@layer page {
[data-site-page-root] { --color-accent: #306a52; --muted: color-mix(in srgb, var(--color-primary) 70%, var(--color-bg)); --pad-y: clamp(56px, 7vw, 96px); font-family: var(--font-body); color: var(--color-text); overflow-x: clip; }
[data-site-page-root] .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 4.2vw, var(--gutter)); }
[data-site-page-root] .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-site-page-root] h1, [data-site-page-root] h2, [data-site-page-root] h3, [data-site-page-root] h4 { font-family: var(--font-display); font-weight: 400; color: var(--color-text); text-wrap: balance; overflow-wrap: break-word; }
[data-site-page-root] h1 { font-size: clamp(2.5rem, 5.2vw, 3.75rem); line-height: 1.1; letter-spacing: -0.01em; }
[data-site-page-root] h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); line-height: 1.2; }
[data-site-page-root] h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; }
[data-site-page-root] p { margin: 0; }
[data-site-page-root] .lede { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 60ch; text-wrap: pretty; margin-top: 16px; }
[data-site-page-root] .eyebrow { margin: 0 0 16px; }
[data-site-page-root] .micro { font-size: 14px; line-height: 1.5; color: var(--color-accent); margin-top: 16px; }
[data-site-page-root] .micro .textlink { margin-left: 8px; }
[data-site-page-root] a:focus-visible, [data-site-page-root] button:focus-visible, [data-site-page-root] summary:focus-visible, [data-site-page-root] input:focus-visible, [data-site-page-root] [tabindex="0"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }
[data-site-page-root] .sec--ink a:focus-visible { outline-color: #1ef4b4; }

/* buttons */
[data-site-page-root] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 20px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); font: 400 15px/24px var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; text-align: center; }
[data-site-page-root] .btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
[data-site-page-root] .btn--primary:hover { background: #061b16; }
[data-site-page-root] .btn--secondary, [data-site-page-root] .btn--ghost { background: transparent; color: var(--color-text); }
[data-site-page-root] .btn--secondary:hover, [data-site-page-root] .btn--ghost:hover { background: var(--color-primary); color: #fff; }
[data-site-page-root] .btn--sm { min-height: 44px; padding: 9px 18px; font-size: 14px; }
[data-site-page-root] .btn--light { background: #fff; color: var(--color-primary); border-color: #fff; }
[data-site-page-root] .btn--light:hover { background: var(--color-tint-teal); border-color: var(--color-tint-teal); }
[data-site-page-root] .btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
[data-site-page-root] .btn--outline-light:hover { background: #fff; color: var(--color-primary); }
[data-site-page-root] .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
[data-site-page-root] .textlink { font-weight: 500; color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; transition: opacity .2s ease-in; }
[data-site-page-root] .textlink:hover { opacity: .7; }
[data-site-page-root] .textlink--arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; text-decoration: none; font-size: 16px; min-height: 44px; }

/* chips */
[data-site-page-root] .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--radius-pill); font: 500 12.5px/1.5 var(--font-body); white-space: nowrap; background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .chip--prompt { background: color-mix(in srgb, #c6b5ff 30%, #fff); color: var(--color-primary); }
[data-site-page-root] .chip--topic { background: var(--color-surface); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-border); }
[data-site-page-root] .chip--trig { background: var(--color-bg); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-border); font-size: 13.5px; padding: 5px 13px; }
[data-site-page-root] .chip--data, [data-site-page-root] .chip--brain, [data-site-page-root] .chip--ai, [data-site-page-root] .chip--out { font-size: 15px; padding: 8px 16px; }
[data-site-page-root] .chip--brain { background: color-mix(in srgb, #c6b5ff 30%, #fff); color: var(--color-primary); }
[data-site-page-root] .chip--ai { background: var(--color-primary); color: #fff; }
[data-site-page-root] .chip--out { background: var(--color-surface); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-border); }
[data-site-page-root] .frame { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }

/* sections */
[data-site-page-root] .sec { padding-block: var(--pad-y); position: relative; }
[data-site-page-root] .sec--tint { background: var(--color-bg); }
[data-site-page-root] .sec--white { background: var(--color-surface); }
[data-site-page-root] .sec--warm { background: var(--color-tint-warm); }
[data-site-page-root] .sec--faq { background: var(--color-bg); }
[data-site-page-root] .sec--gradient { background: linear-gradient(135deg, #d4fdff, color-mix(in srgb, #c6b5ff 55%, #fff)); }
[data-site-page-root] .sec--ink { background: var(--color-ink); color: #fff; }
[data-site-page-root] .sec--ink h2 { color: #fff; }
[data-site-page-root] .sec--ink .eyebrow { color: #1ef4b4; }
[data-site-page-root] .sec--ink .lede { color: #ebeae1; }
[data-site-page-root] .sec--ink .micro { color: #ebeae1; }
[data-site-page-root] .head--wide .lede { max-width: 56ch; }
[data-site-page-root] .split { display: grid; gap: clamp(32px, 6vw, 88px); align-items: start; }
[data-site-page-root] .split > * { min-width: 0; }

/* hero */
[data-site-page-root] .hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(to right bottom, #d4fdff, color-mix(in srgb, #c6b5ff 35%, #fff)); padding: clamp(112px, 12vw, 150px) 0 clamp(56px, 7vw, 96px); }
[data-site-page-root] .hero__grid { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
[data-site-page-root] .hero__grid > * { min-width: 0; }
[data-site-page-root] .hero__copy .lede { max-width: 52ch; margin-top: 24px; }
[data-site-page-root] .crumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; list-style: none; padding: 0; margin: 0 0 18px; font-size: 14px; color: var(--muted); }
[data-site-page-root] .crumbs li + li::before { content: "›"; margin: 0 10px; color: var(--muted); }
[data-site-page-root] .crumbs a { color: var(--color-text); text-decoration: none; transition: opacity .2s ease-in; }
[data-site-page-root] .crumbs a:hover { opacity: .7; }
[data-site-page-root] .crumbs [aria-current] { color: var(--color-accent); font-weight: 500; }
[data-site-page-root] .hero__visual { position: relative; padding: 26px 0 28px 20px; }
[data-site-page-root] .sheet { padding: 16px 18px 12px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
[data-site-page-root] .sheet__bar { display: flex; align-items: center; gap: 6px; font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
[data-site-page-root] .sheet__tab { padding: 5px 12px; border-radius: var(--radius-pill); color: var(--muted); white-space: nowrap; }
[data-site-page-root] .sheet__tab.is-on { background: var(--color-primary); color: #fff; }
[data-site-page-root] .sheet__run { margin-left: auto; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--color-tint-teal); color: var(--color-accent); font-weight: 500; white-space: nowrap; }
[data-site-page-root] .sheet__name { font: 400 18px/1.2 var(--font-display); padding: 16px 0 12px; }
[data-site-page-root] .sheet__grid { display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
[data-site-page-root] .sheet__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 10px 12px; font-size: 13px; border-top: 1px solid var(--color-border); }
[data-site-page-root] .sheet__row--head { border-top: 0; background: var(--color-tint-warm); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
[data-site-page-root] .sheet__row .in { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-site-page-root] .sheet__row .chip { flex: none; }
[data-site-page-root] .fill { display: block; height: 8px; border-radius: 4px; background: var(--color-border); overflow: hidden; }
[data-site-page-root] .fill i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #1ef4b4, var(--color-accent)); border-radius: 4px; transform-origin: left; animation: fillrow 9s cubic-bezier(.65,0,.35,1) infinite; }
[data-site-page-root] .tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-tint-teal); color: var(--color-accent); animation: tickrow 9s ease infinite; }
[data-site-page-root] .sheet__row:nth-child(2) .fill i { animation-delay: 0s; }
[data-site-page-root] .sheet__row:nth-child(3) .fill i { animation-delay: .6s; }
[data-site-page-root] .sheet__row:nth-child(4) .fill i { animation-delay: 1.2s; }
[data-site-page-root] .sheet__row:nth-child(5) .fill i { animation-delay: 1.8s; }
[data-site-page-root] .sheet__row:nth-child(6) .fill i { animation-delay: 2.4s; }
[data-site-page-root] .sheet__row:nth-child(2) .tick { animation-delay: 1.4s; }
[data-site-page-root] .sheet__row:nth-child(3) .tick { animation-delay: 2s; }
[data-site-page-root] .sheet__row:nth-child(4) .tick { animation-delay: 2.6s; }
[data-site-page-root] .sheet__row:nth-child(5) .tick { animation-delay: 3.2s; }
[data-site-page-root] .sheet__row:nth-child(6) .tick { animation-delay: 3.8s; }
@keyframes fillrow { 0% { transform: scaleX(0); } 14%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes tickrow { 0%, 10% { opacity: 0; transform: scale(.6); } 18%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.6); } }
[data-site-page-root] .sheet__note { font-size: 12px; color: var(--muted); padding-top: 10px; text-align: left; }
[data-site-page-root] .float { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; background: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
[data-site-page-root] .float--ready { right: -4px; bottom: 6px; animation: ready 9s ease infinite; }
[data-site-page-root] .float--sched { left: 0; top: -18px; padding-left: 14px; color: var(--color-accent); }
@keyframes ready { 0%, 40% { opacity: 0; transform: translateY(8px); } 50%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }

/* trusted */
[data-site-page-root] .trusted { background: var(--color-surface); padding: clamp(36px, 5vw, 56px) 0 clamp(32px, 4vw, 44px); overflow: hidden; }
[data-site-page-root] .trusted__t { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); padding-inline: 20px; margin-bottom: 28px; }
[data-site-page-root] .logo-marquee ul { display: flex; align-items: center; gap: clamp(40px, 6vw, 80px); padding: 0 clamp(20px, 3vw, 40px); list-style: none; flex: none; margin: 0; }
[data-site-page-root] .logo-marquee img { height: auto; max-height: 44px; width: auto; max-width: 130px; opacity: .8; filter: grayscale(1); }

/* sub nav */
[data-site-page-root] .after { position: relative; }
[data-site-page-root] .subnav { position: sticky; top: var(--nav-offset); z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-block: 1px solid var(--color-border); }
[data-site-page-root] .subnav__in { max-width: var(--maxw); margin: 0 auto; padding: 8px clamp(16px, 4.2vw, var(--gutter)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
[data-site-page-root] .subnav__links { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; }
[data-site-page-root] .subnav__links::-webkit-scrollbar { display: none; }
[data-site-page-root] .subnav__links a { display: block; padding: 11px 16px; font-size: 14px; font-weight: 500; white-space: nowrap; border-radius: var(--radius-pill); color: var(--color-text); transition: color .2s ease, background-color .2s ease; }
[data-site-page-root] .subnav__links a:hover { background: var(--color-bg); }
[data-site-page-root] .subnav__links a.is-active { color: var(--color-accent); background: var(--color-tint-teal); }
[data-site-page-root] .subnav .btn { flex: none; }
[data-site-page-root] .subnav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--nav-offset); background: rgba(255,255,255,.96); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
[data-site-page-root] .subnav.is-stuck::before { opacity: 1; }

/* bottleneck */
[data-site-page-root] .split--57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
[data-site-page-root] .pains { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-border); }
[data-site-page-root] .pains li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--color-border); }
[data-site-page-root] .glyph { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-accent); box-shadow: var(--shadow-sm); }
[data-site-page-root] .pains h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
[data-site-page-root] .pains p { color: var(--muted); font-size: 18px; line-height: 1.6; margin-top: 6px; }
[data-site-page-root] .caret { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* how */
[data-site-page-root] .steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
[data-site-page-root] .steps li { position: relative; padding-top: 34px; border-top: 1px solid var(--color-border); }
[data-site-page-root] .steps li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
[data-site-page-root] .steps__n { display: block; font: 400 clamp(2.5rem, 5vw, 3.75rem)/1 var(--font-display); color: var(--color-accent); margin-bottom: 16px; }
[data-site-page-root] .steps p { color: var(--muted); font-size: 18px; line-height: 1.6; margin-top: 10px; max-width: 34ch; }
[data-site-page-root] .flow { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: stretch; gap: 14px; padding: 24px; background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
[data-site-page-root] .flow__node { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-sm); align-content: center; min-width: 0; }
[data-site-page-root] .flow__k { width: 100%; font-size: 12px; letter-spacing: 1.12px; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .flow__plus { color: var(--muted); font-size: 20px; }
[data-site-page-root] .flow__arrow { display: grid; place-items: center; color: var(--color-accent); }
[data-site-page-root] .flow__node .chip { white-space: normal; }

/* templates */
[data-site-page-root] .tpl .head { margin-bottom: 48px; }
[data-site-page-root] .tpl__row1 { display: grid; grid-template-columns: 1.25fr 1.05fr .95fr; gap: 20px; align-items: stretch; }
[data-site-page-root] .tpl__row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-top: 20px; }
[data-site-page-root] .tcard { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; background: var(--color-surface); border: 1px solid #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); min-width: 0; }
[data-site-page-root] .tcard__cat { font-size: var(--type-1); letter-spacing: 1.12px; color: var(--color-accent); }
[data-site-page-root] .tcard h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
[data-site-page-root] .tcard__out { font-size: 18px; line-height: 1.5; color: var(--color-text); }
[data-site-page-root] .tcard__in { font-size: 15px; line-height: 1.6; color: var(--muted); }
[data-site-page-root] .tcard .btn { margin-top: auto; }
[data-site-page-root] .gets { width: 100%; margin-top: 4px; border-top: 1px solid var(--color-border); }
[data-site-page-root] .gets summary, [data-site-page-root] .qa summary, [data-site-page-root] .transcript summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 0; font-weight: 500; font-size: 15px; }
[data-site-page-root] summary::-webkit-details-marker { display: none; }
[data-site-page-root] .gets summary::after, [data-site-page-root] .qa summary::after, [data-site-page-root] .transcript summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat, linear-gradient(currentColor,currentColor) center/1.6px 100% no-repeat; }
[data-site-page-root] details[open] > summary::after { background: linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat; }
[data-site-page-root] .gets ul { list-style: none; padding: 0 0 8px; margin: 0; display: grid; gap: 10px; }
[data-site-page-root] .gets li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--muted); }
[data-site-page-root] .gets li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-tint-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2.4 5.2 4.3 7 7.7 3' stroke='%23306a52' stroke-width='1.5'/%3E%3C/svg%3E") center/10px no-repeat; }
[data-site-page-root] .slack { width: 100%; padding: 14px; border-radius: var(--radius-sm); background: var(--color-bg); display: grid; gap: 8px; }
[data-site-page-root] .slack__h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
[data-site-page-root] .slack__h span:last-child { color: var(--muted); margin-left: auto; }
[data-site-page-root] .slack__av { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #c6b5ff, #1ef4b4); }
[data-site-page-root] .slack__l { height: 8px; border-radius: 4px; background: var(--color-border); width: var(--w); }
[data-site-page-root] .slack__tags { display: flex; gap: 6px; flex-wrap: wrap; }
[data-site-page-root] .slack__tags span { font-size: 12px; padding: 2px 10px; border-radius: 100px; background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .tcard--wide { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 24px; }
[data-site-page-root] .tcard--wide .btn { margin-top: 6px; }
[data-site-page-root] .tcard__main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
[data-site-page-root] .daily { display: flex; align-items: flex-end; gap: 8px; align-self: center; flex: none; }
[data-site-page-root] .daily span { width: 18px; height: 54px; border-radius: 6px; background: var(--color-tint-teal); position: relative; }
[data-site-page-root] .daily span::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: var(--color-accent); border-radius: 6px; opacity: .85; }
[data-site-page-root] .daily span:nth-child(2n)::after { height: 62%; }
[data-site-page-root] .daily span:nth-child(3n)::after { height: 28%; }
[data-site-page-root] .tcard--scratch { background: transparent; box-shadow: none; border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent); }
[data-site-page-root] .field { flex: 1 1 220px; min-width: 0; }
[data-site-page-root] .field--grow { flex: 2 1 280px; }
[data-site-page-root] .field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
[data-site-page-root] .field .req { font-weight: 400; color: var(--muted); }
[data-site-page-root] .field input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 54px; padding: 14px 20px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: var(--color-surface); font: 400 15px/24px var(--font-body); color: var(--color-text); }
[data-site-page-root] .ferr { color: #a1281d; font-size: 13px; margin-top: 4px; }
[data-site-page-root] .ferr:empty { display: none; }
[data-site-page-root] .ferr--global { flex-basis: 100%; }
[data-site-page-root] .fok { flex-basis: 100%; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .fok h4 { font-size: 20px; color: var(--color-accent); }
[data-site-page-root] .fok[hidden] { display: none; }

/* brain */
[data-site-page-root] .brain { padding-bottom: calc(var(--pad-y) + clamp(40px, 6vw, 80px)); z-index: 2; }
[data-site-page-root] .split--brain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
[data-site-page-root] .brainviz { position: relative; display: grid; place-items: center; }
[data-site-page-root] .brainviz__card { width: min(100%, 440px); padding: 26px; border: 1px solid #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transform: translateY(clamp(0px, 5.5vw, 80px)); }
[data-site-page-root] .brainviz__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 var(--type-4)/1.2 var(--font-display); margin-bottom: 18px; }
[data-site-page-root] .brainviz__h b { font-weight: 400; }
[data-site-page-root] .brainviz ul { list-style: none; padding: 0; margin: 0; }
[data-site-page-root] .brainviz li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-border); font-size: 16px; }
[data-site-page-root] .brainviz__out { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--color-border); }
[data-site-page-root] .brainviz__out::before { content: "Feeds"; width: 100%; font-size: 12px; letter-spacing: 1.12px; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .check-dot { flex: none; }

/* control */
[data-site-page-root] .control { padding-top: calc(var(--pad-y) + clamp(40px, 9vw, 130px)); }
[data-site-page-root] .control .head { margin-bottom: 40px; }
[data-site-page-root] .tabs__list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
[data-site-page-root] .tabs__list button { min-height: 48px; padding: 10px 24px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font: 400 15px/24px var(--font-body); transition: background-color .2s ease, color .2s ease; }
[data-site-page-root] .tabs__list button:hover { background: var(--color-bg); }
[data-site-page-root] .tabs__list button[aria-selected="true"] { background: var(--color-primary); color: #fff; }
[data-site-page-root] .tabs__panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(20px, 3.5vw, 40px); background: var(--color-bg); border-radius: var(--radius-lg); }
[data-site-page-root] .tabs__panel[hidden] { display: none; }
[data-site-page-root] .tabs__copy p { color: var(--muted); font-size: 18px; line-height: 1.6; margin-top: 12px; }
[data-site-page-root] .mini { padding: 16px 18px 10px; min-width: 0; }
[data-site-page-root] .mini__tools { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); font-size: 12.5px; }
[data-site-page-root] .mini__tools span { padding: 4px 11px; border-radius: 100px; background: var(--color-bg); white-space: nowrap; }
[data-site-page-root] .mini__tools .mini__run { margin-left: auto; background: var(--color-primary); color: #fff; }
[data-site-page-root] .mini__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 14px 12px; align-items: center; padding: 14px 0 6px; }
[data-site-page-root] .mini__grid .h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .mini__grid .h--ai { color: var(--color-accent); }
[data-site-page-root] .bar { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1ef4b4, var(--color-accent)); width: var(--w); }
[data-site-page-root] .bar--ai { background: #c6b5ff; }
[data-site-page-root] .canvas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 24px 4px 14px; position: relative; }
[data-site-page-root] .canvas::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 1.5px solid var(--color-accent); opacity: .5; }
[data-site-page-root] .node { position: relative; padding: 12px; font-size: 13.5px; font-weight: 500; line-height: 1.3; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
[data-site-page-root] .node small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
[data-site-page-root] .node--ai { background: color-mix(in srgb, #c6b5ff 30%, #fff); }
[data-site-page-root] .node--out { background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .runs { list-style: none; padding: 0; margin: 0; }
[data-site-page-root] .runs li { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
[data-site-page-root] .runs li:first-child { border-top: 0; }
[data-site-page-root] .runs b { font-weight: 500; }
[data-site-page-root] .runs .ok { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 9px; border-radius: 100px; background: var(--color-tint-teal); color: var(--color-accent); font-size: 12.5px; font-weight: 500; }
[data-site-page-root] .runs .ok i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
[data-site-page-root] .runs .next { color: var(--muted); text-align: right; }
[data-site-page-root] .trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
[data-site-page-root] .trust li { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }

/* compare */
[data-site-page-root] .compare .head { margin-bottom: 40px; }
[data-site-page-root] .ctable { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; border: 1px solid #fff; }
[data-site-page-root] .ctable table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
[data-site-page-root] .ctable th, [data-site-page-root] .ctable td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--color-border); vertical-align: middle; font-weight: 400; }
[data-site-page-root] .ctable thead th { font: 500 16px/1.3 var(--font-body); padding-block: 22px; white-space: nowrap; }
[data-site-page-root] .ctable thead th.ctable__pixis { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
[data-site-page-root] .ctable thead th.ctable__pixis .badge-teal { margin-left: 10px; font-family: var(--font-body); font-size: 13px; vertical-align: middle; background: #fff; }
[data-site-page-root] .ctable tbody th { width: 34%; font-weight: 500; }
[data-site-page-root] .ctable .ctable__pixis { background: var(--color-tint-teal); }
[data-site-page-root] .ctable tbody tr:last-child > * { border-bottom: 0; }
[data-site-page-root] .yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--color-accent); vertical-align: middle; margin: -2px 8px 0 0; }
[data-site-page-root] .yes--plain { background: var(--color-tint-teal); }
[data-site-page-root] .compare__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
[data-site-page-root] .footnote { font-size: var(--type-1); line-height: 1.5; color: var(--muted); max-width: 80ch; }

/* pricing */
[data-site-page-root] .pricing__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
[data-site-page-root] .engines { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[data-site-page-root] .engines li { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-weight: 500; font-size: 16px; }
[data-site-page-root] .engines img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
[data-site-page-root] .plans { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
[data-site-page-root] .plans li { padding: 28px; border-left: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 4px; }
[data-site-page-root] .plans li:first-child { border-left: 0; }
[data-site-page-root] .plans li.is-pop { background: var(--color-tint-teal); }
[data-site-page-root] .plans__n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; }
[data-site-page-root] .plans__p { font: 400 clamp(2rem, 3.4vw, var(--type-7))/1.1 var(--font-display); margin: 10px 0 6px; }
[data-site-page-root] .plans__d { color: var(--muted); font-size: 15px; }
[data-site-page-root] .plans__c { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 15px; color: var(--color-accent); font-weight: 500; }
[data-site-page-root] .plans .badge-teal { font-size: 12px; padding: 2px 10px; background: #fff; }

/* walkthrough */
[data-site-page-root] .walk .head { margin-bottom: 40px; }
[data-site-page-root] .walk__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
[data-site-page-root] .facade { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(to right bottom, #d4fdff, color-mix(in srgb, #c6b5ff 35%, #fff)); border: 0; display: grid; place-items: center; }
[data-site-page-root] .facade__poster { position: absolute; inset: 12% 10%; display: grid; gap: 12px; align-content: center; }
[data-site-page-root] .facade__row { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; background: rgba(255,255,255,.85); border-radius: var(--radius-sm); }
[data-site-page-root] .facade__row i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1ef4b4, var(--color-accent)); width: var(--w); }
[data-site-page-root] .facade__play { position: relative; display: grid; place-items: center; width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px); border-radius: 50%; border: 0; background: #fff; color: var(--color-primary); box-shadow: var(--shadow-md); transition: transform .2s ease; }
[data-site-page-root] .facade__play:hover { transform: scale(1.05); }
[data-site-page-root] .facade__play svg { margin-left: 4px; }
[data-site-page-root] .facade__status { position: absolute; left: 16px; right: 16px; bottom: 12px; font-size: 13px; text-align: center; background: rgba(255,255,255,.92); border-radius: 100px; padding: 4px 12px; }
[data-site-page-root] .facade__status:empty { display: none; }
[data-site-page-root] .chapters h3 { font-size: 20px; margin-bottom: 8px; }
[data-site-page-root] .chapters ol { list-style: none; padding: 0; margin: 0; counter-reset: c; border-top: 1px solid var(--color-border); }
[data-site-page-root] .chapters li { counter-increment: c; border-bottom: 1px solid var(--color-border); }
[data-site-page-root] .chapters li button { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; min-height: 48px; padding: 10px 4px; background: none; border: 0; color: var(--color-text); font: 400 16px/1.35 var(--font-body); transition: color .2s ease; }
[data-site-page-root] .chapters li button::before { content: counter(c, decimal-leading-zero); font-size: 13px; color: var(--color-accent); min-width: 22px; }
[data-site-page-root] .chapters li button:hover { color: var(--color-accent); }
[data-site-page-root] .transcript { margin-top: 16px; }
[data-site-page-root] .transcript p { color: var(--muted); font-size: 15px; padding-bottom: 8px; }

/* faq */
[data-site-page-root] .split--faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
[data-site-page-root] .split--faq .head { position: sticky; top: calc(var(--nav-offset) + 96px); }
[data-site-page-root] .more { margin-top: 28px; font-size: 14px; line-height: 2; color: var(--muted); }
[data-site-page-root] .qa { border-top: 1px solid var(--color-border); }
[data-site-page-root] .qa details { border-bottom: 1px solid var(--color-border); }
[data-site-page-root] .qa summary { font: 400 clamp(1.125rem, 1.8vw, 1.375rem)/1.35 var(--font-display); padding: 22px 0; }
[data-site-page-root] .qa summary:hover { color: var(--color-accent); }
[data-site-page-root] .qa p { color: var(--muted); font-size: 18px; line-height: 1.6; padding: 0 40px 24px 0; max-width: 62ch; }

/* final */
[data-site-page-root] .final { padding-block: clamp(72px, 9vw, 128px); }
[data-site-page-root] .final__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
[data-site-page-root] .final h2 { font-size: clamp(2rem, 4.6vw, var(--type-8)); line-height: 1.12; }
[data-site-page-root] .final__act .btn-row { margin-top: 0; }

/* ---- polish pass ---- */
/* hero ground: layered mesh, dot grid, soft fade into the logo band */
[data-site-page-root] .hero { background: radial-gradient(55% 70% at 88% 18%, rgba(198,181,255,.55), transparent 62%), radial-gradient(45% 60% at 72% 100%, rgba(30,244,180,.20), transparent 66%), radial-gradient(40% 55% at 0% 0%, rgba(255,255,255,.7), transparent 70%), linear-gradient(to right bottom, #d4fdff, color-mix(in srgb, #c6b5ff 35%, #fff)); }
[data-site-page-root] .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(7,41,41,.16) 1px, transparent 1.3px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(48% 62% at 76% 46%, #000, transparent 75%); mask-image: radial-gradient(48% 62% at 76% 46%, #000, transparent 75%); pointer-events: none; }
[data-site-page-root] .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: -1; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-surface)); pointer-events: none; }
[data-site-page-root] .hero__orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(2px); }
[data-site-page-root] .hero__orb--a { width: 220px; height: 220px; right: -70px; top: -46px; background: radial-gradient(circle at 35% 30%, #fff, rgba(198,181,255,.65) 55%, rgba(198,181,255,0) 72%); animation: orbdrift 14s ease-in-out infinite alternate; }
[data-site-page-root] .hero__orb--b { width: 160px; height: 160px; left: -30px; bottom: -26px; background: radial-gradient(circle at 40% 35%, #fff, rgba(30,244,180,.40) 55%, rgba(30,244,180,0) 72%); animation: orbdrift 17s ease-in-out -6s infinite alternate-reverse; }
@keyframes orbdrift { from { transform: translate(0,0); } to { transform: translate(-14px, 18px); } }
[data-site-page-root] .hero__visual .sheet { position: relative; z-index: 1; box-shadow: 0 24px 60px -24px rgba(7,41,41,.28), 0 2px 16px 0 rgba(7,41,41,.06); }
[data-site-page-root] .sheet-back { position: absolute; z-index: 0; left: 20px; right: 0; top: 14px; bottom: 28px; border-radius: var(--radius-lg); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-sm); }
[data-site-page-root] .sheet-back--1 { transform: translate(18px, -14px) scale(.985); opacity: .85; }
[data-site-page-root] .sheet-back--2 { transform: translate(36px, -28px) scale(.97); opacity: .5; }
[data-site-page-root] .sheet { backdrop-filter: none; }
[data-site-page-root] .sheet__row { animation: rowglow 9s ease infinite; }
[data-site-page-root] .sheet__row--head { animation: none; }
[data-site-page-root] .sheet__row:nth-child(2) { animation-delay: 0s; }
[data-site-page-root] .sheet__row:nth-child(3) { animation-delay: .6s; }
[data-site-page-root] .sheet__row:nth-child(4) { animation-delay: 1.2s; }
[data-site-page-root] .sheet__row:nth-child(5) { animation-delay: 1.8s; }
[data-site-page-root] .sheet__row:nth-child(6) { animation-delay: 2.4s; }
@keyframes rowglow { 0% { background-color: transparent; } 3%, 12% { background-color: color-mix(in srgb, var(--color-tint-teal) 80%, transparent); } 22%, 100% { background-color: transparent; } }
[data-site-page-root] .sheet__run { animation: runpulse 9s ease infinite; }
@keyframes runpulse { 0% { box-shadow: 0 0 0 0 rgba(30,244,180,.55); } 7%, 100% { box-shadow: 0 0 0 12px rgba(30,244,180,0); } }
[data-site-page-root] .float--sched { animation: floaty 6s ease-in-out infinite; z-index: 2; }
[data-site-page-root] .float--ready { z-index: 2; }
@keyframes floaty { 50% { transform: translateY(-5px); } }
/* hero entrance */
[data-site-page-root] .hero__copy > * { animation: heroin .8s cubic-bezier(.65,0,.35,1) both; }
[data-site-page-root] .hero__copy > :nth-child(2) { animation-delay: .06s; }
[data-site-page-root] .hero__copy > :nth-child(3) { animation-delay: .12s; }
[data-site-page-root] .hero__copy > :nth-child(4) { animation-delay: .2s; }
[data-site-page-root] .hero__copy > :nth-child(5) { animation-delay: .28s; }
[data-site-page-root] .hero__copy > :nth-child(6) { animation-delay: .36s; }
[data-site-page-root] .hero__visual .sheet { animation: sheetin 1s .15s cubic-bezier(.65,0,.35,1) both; }
[data-site-page-root] .sheet-back { animation: sheetin 1s .3s cubic-bezier(.65,0,.35,1) both; }
@keyframes heroin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sheetin { from { opacity: 0; transform: translateY(26px) scale(.98); } }
/* logo band */
[data-site-page-root] .logo-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
[data-site-page-root] .logo-marquee img { opacity: .7; transition: opacity .2s ease; }
/* strategy brain: orbs behind the card */
[data-site-page-root] .brain { overflow: visible; }
[data-site-page-root] .brainviz::before { content: ""; position: absolute; inset: -10% -6% 10% 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 68%); z-index: 0; pointer-events: none; }
[data-site-page-root] .brainviz__card { position: relative; z-index: 1; }
/* walkthrough play ring */
[data-site-page-root] .facade__play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); animation: ring 2.8s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
/* final CTA */
[data-site-page-root] .final { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(60% 90% at 100% 0%, rgba(30,244,180,.16), transparent 62%), radial-gradient(50% 80% at 0% 100%, rgba(198,181,255,.18), transparent 65%), var(--color-ink); }
[data-site-page-root] .final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px) 0 0 / 24px 24px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%); mask-image: linear-gradient(100deg, transparent 30%, #000 100%); }
[data-site-page-root] .final__glow { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
[data-site-page-root] .final__glow--a { width: 360px; height: 360px; right: 6%; top: -140px; background: radial-gradient(circle, rgba(30,244,180,.22), transparent 68%); animation: orbdrift 16s ease-in-out infinite alternate; }
[data-site-page-root] .final__glow--b { width: 300px; height: 300px; left: 30%; bottom: -150px; background: radial-gradient(circle, rgba(198,181,255,.22), transparent 68%); animation: orbdrift 19s ease-in-out -5s infinite alternate-reverse; }
[data-site-page-root] .final__grid { align-items: center; }
[data-site-page-root] .final__act { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
[data-site-page-root] .final__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; font-size: var(--type-2); color: #fff; }
[data-site-page-root] .final__list li { display: flex; align-items: center; gap: 12px; }
[data-site-page-root] .final .check-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(30,244,180,.18); color: #1ef4b4; }
[data-site-page-root] .final__act .btn-row { margin-top: 0; }
[data-site-page-root] .final__act .micro { margin-top: 16px; }
@media (max-width: 860px) {
  [data-site-page-root] .sheet-back--1 { transform: translate(10px, -10px) scale(.985); }
  [data-site-page-root] .sheet-back--2 { transform: translate(20px, -20px) scale(.97); }
  [data-site-page-root] .sheet-back { left: 0; }
  [data-site-page-root] .hero__orb--a { right: -40px; }
  [data-site-page-root] .brainviz { margin-bottom: 0; }}

/* ---- hero sheet: AI look ---- */
[data-site-page-root] .hero__visual::before { content: ""; position: absolute; z-index: -1; inset: -6% -8% -4% 2%; border-radius: 50%; background: conic-gradient(from 200deg at 55% 50%, rgba(198,181,255,.75), rgba(30,244,180,.40), rgba(163,227,224,.45), rgba(198,181,255,.75)); filter: blur(60px); opacity: .75; animation: aurora 18s linear infinite; }
@keyframes aurora { to { transform: rotate(360deg); } }
[data-site-page-root] .hero__visual .sheet { color: #ffffff; border: 1.5px solid transparent; background: radial-gradient(90% 60% at 100% 0%, rgba(198,181,255,.38), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(187,193,249,.28), transparent 62%), linear-gradient(#072929, #1e3c3b) padding-box, linear-gradient(135deg, #a3e3e0, #c6b5ff 55%, #c6b5ff) border-box; box-shadow: 0 34px 80px -26px rgba(7,41,41,.55), 0 18px 40px -24px rgba(30,244,180,.45); }
[data-site-page-root] .sheet-back--1 { background: linear-gradient(135deg, rgba(198,181,255,.45), rgba(187,193,249,.30)); border-color: rgba(255,255,255,.5); }
[data-site-page-root] .sheet-back--2 { background: linear-gradient(135deg, rgba(187,193,249,.35), rgba(198,181,255,.35)); border-color: rgba(255,255,255,.4); }
[data-site-page-root] .sheet__tab.is-on { background: linear-gradient(135deg, var(--color-primary), #1e3c3b); box-shadow: 0 6px 14px -6px rgba(7,41,41,.6); }
[data-site-page-root] .sheet__run { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, #d4fdff, color-mix(in srgb, #c6b5ff 38%, #fff)); color: var(--color-primary); }
[data-site-page-root] .sheet__run .spark { color: var(--color-accent); }
[data-site-page-root] .sheet__name { display: flex; align-items: center; gap: 10px; }
[data-site-page-root] .sheet__ai { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #306a52, #2d4e4d); }
[data-site-page-root] .sheet__ai .spark { width: 13px; height: 13px; }
[data-site-page-root] .sheet__row { grid-template-columns: minmax(0, 2.1fr) minmax(0, .9fr) minmax(0, .9fr) 24px; }
[data-site-page-root] .sheet__row .in { text-overflow: clip; }
[data-site-page-root] .sheet__row .in .chip { padding: 2px 9px; font-size: 12px; }
[data-site-page-root] .chip--prompt { background: color-mix(in srgb, #c6b5ff 38%, #fff); color: #072929; }
[data-site-page-root] .sheet__row--head { background: linear-gradient(90deg, var(--color-tint-warm), #f5f5f0); }
[data-site-page-root] .fill { position: relative; background: #ebeae1; }
[data-site-page-root] .fill i { background: linear-gradient(90deg, #1ef4b4, #82ffda 45%, #c6b5ff); }
[data-site-page-root] .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 9s ease infinite; }
[data-site-page-root] .sheet__row:nth-child(3) .fill::after { animation-delay: .6s; }
[data-site-page-root] .sheet__row:nth-child(4) .fill::after { animation-delay: 1.2s; }
[data-site-page-root] .sheet__row:nth-child(5) .fill::after { animation-delay: 1.8s; }
[data-site-page-root] .sheet__row:nth-child(6) .fill::after { animation-delay: 2.4s; }
@keyframes shimmer { 0%, 10% { transform: translateX(-100%); } 26%, 100% { transform: translateX(100%); } }
[data-site-page-root] .tick { background: linear-gradient(135deg, #d4fdff, color-mix(in srgb, #c6b5ff 38%, #fff)); }
[data-site-page-root] .float { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 14px 30px -14px rgba(7,41,41,.35); }
[data-site-page-root] .float--ready .check-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #306a52, #1ef4b4); }
@media (prefers-reduced-motion: reduce) { [data-site-page-root] .hero__visual::before, [data-site-page-root] .fill::after { animation: none; }}

/* ---- hero sheet: midnight glass, blue-violet data ---- */
[data-site-page-root] .hero__visual .sheet__bar { border-bottom-color: rgba(255,255,255,.12); }
[data-site-page-root] .hero__visual .sheet__tab { color: #bbc1f9; }
[data-site-page-root] .hero__visual .sheet__tab.is-on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
[data-site-page-root] .hero__visual .sheet__run { background: linear-gradient(135deg, #1ef4b4, #c6b5ff); color: #fff; }
[data-site-page-root] .hero__visual .sheet__run .spark { color: #fff; }
[data-site-page-root] .hero__visual .sheet__name { color: #fff; }
[data-site-page-root] .hero__visual .sheet__ai { background: linear-gradient(135deg, #1ef4b4, #c6b5ff); }
[data-site-page-root] .hero__visual .sheet__grid { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
[data-site-page-root] .hero__visual .sheet__row { border-top-color: rgba(255,255,255,.10); color: #ffffff; }
[data-site-page-root] .hero__visual .sheet__row--head { background: rgba(255,255,255,.07); color: #bbc1f9; }
[data-site-page-root] .hero__visual .chip { background: rgba(163,227,224,.16); color: #d4fdff; }
[data-site-page-root] .hero__visual .chip--prompt { background: rgba(198,181,255,.24); color: color-mix(in srgb, #c6b5ff 38%, #fff); }
[data-site-page-root] .hero__visual .chip--topic { background: rgba(255,255,255,.10); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
[data-site-page-root] .hero__visual .fill { background: rgba(255,255,255,.12); }
[data-site-page-root] .hero__visual .fill i { background: linear-gradient(90deg, #1ef4b4, #bbc1f9 55%, #c6b5ff); box-shadow: 0 0 12px rgba(187,193,249,.6); }
[data-site-page-root] .hero__visual .fill::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); }
[data-site-page-root] .hero__visual .tick { background: linear-gradient(135deg, #1ef4b4, #c6b5ff); color: #fff; }
[data-site-page-root] .hero__visual .sheet__note { color: #bbc1f9; }
[data-site-page-root] .hero__visual::before { background: conic-gradient(from 200deg at 55% 50%, rgba(198,181,255,.75), rgba(187,193,249,.55), rgba(198,181,255,.5), rgba(198,181,255,.75)); }
[data-site-page-root] .hero__visual .float--ready .check-dot { background: linear-gradient(135deg, #1ef4b4, #c6b5ff); }
[data-site-page-root] .hero__visual .float--sched { color: #072929; }
@keyframes rowglow { 0% { background-color: transparent; } 3%, 12% { background-color: rgba(187,193,249,.16); } 22%, 100% { background-color: transparent; } }

/* ---- hero: balanced ground ---- */
[data-site-page-root] .hero { background: radial-gradient(46% 62% at 8% 6%, rgba(163,227,224,.55), transparent 70%), radial-gradient(46% 62% at 94% 10%, rgba(198,181,255,.50), transparent 70%), radial-gradient(60% 50% at 50% 100%, rgba(212,253,255,.55), transparent 72%), linear-gradient(180deg, #eaf6f7 0%, #eef0fa 100%); }
[data-site-page-root] .hero::before { background: radial-gradient(rgba(7,41,41,.10) 1px, transparent 1.3px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(50% 60% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(50% 60% at 50% 40%, #000, transparent 78%); }
[data-site-page-root] .hero__orb--b { display: none; }
[data-site-page-root] .hero__orb--a { opacity: .55; right: -20px; top: -30px; }
[data-site-page-root] .hero__visual::before { opacity: .45; inset: 0 -2% 0 6%; filter: blur(70px); }
[data-site-page-root] .hero .eyebrow { text-transform: none; letter-spacing: .01em; font-size: var(--type-2); font-weight: 500; }
[data-site-page-root] .sheet__row { grid-template-columns: minmax(0, 2.5fr) minmax(0, .8fr) minmax(0, .8fr) 24px; }
[data-site-page-root] .hero__visual .sheet__row .in { font-size: 13px; }

/* ---- walkthrough video ---- */
[data-site-page-root] .facade { aspect-ratio: 1280 / 648; background: #072929; padding: 0; }
[data-site-page-root] .facade__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #072929; object-fit: cover; }
[data-site-page-root] .facade__play { position: absolute; inset: 0; margin: auto; z-index: 2; }
[data-site-page-root] .facade::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(7,41,41,.18), rgba(7,41,41,0) 45%); pointer-events: none; transition: opacity .2s ease; }
[data-site-page-root] .facade.is-playing .facade__play, [data-site-page-root] .facade.is-playing::after { opacity: 0; visibility: hidden; pointer-events: none; }
[data-site-page-root] .chapters li button { justify-content: flex-start; }
[data-site-page-root] .chapters li button time { margin-left: auto; font-size: var(--type-1); color: var(--muted); font-variant-numeric: tabular-nums; padding-left: 12px; }
[data-site-page-root] .chapters li button.is-now { color: var(--color-accent); }
[data-site-page-root] .chapters li button.is-now time { color: var(--color-accent); }

/* ---- hero H1 second line, walkthrough pair ---- */
[data-site-page-root] .hero h1 .h1-sub { display: block; margin-top: 14px; font-size: clamp(1.25rem, 2.1vw, var(--type-6)); line-height: 1.25; letter-spacing: 0; color: var(--color-accent); }
[data-site-page-root] .walk__grid { align-items: center; grid-template-columns: minmax(0, 8fr) minmax(0, 4.4fr); }
[data-site-page-root] .facade { border: 6px solid transparent; border-radius: calc(var(--radius-lg) + 6px); background: linear-gradient(#072929, #072929) padding-box, linear-gradient(120deg, #1ef4b4 0%, #82ffda 30%, #bbc1f9 62%, #c6b5ff 82%, #1ef4b4 100%) border-box; box-shadow: 0 30px 70px -28px rgba(7,41,41,.5), 0 16px 40px -22px rgba(30,244,180,.55); }
[data-site-page-root] .facade__video { border-radius: var(--radius-lg); }
[data-site-page-root] .chapters { padding: clamp(20px, 2.4vw, 32px); border: 6px solid transparent; border-radius: calc(var(--radius-lg) + 6px); background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(120deg, #1ef4b4 0%, #82ffda 30%, #bbc1f9 62%, #c6b5ff 82%, #1ef4b4 100%) border-box; box-shadow: 0 30px 70px -28px rgba(7,41,41,.35); }
[data-site-page-root] .chapters__k { font-size: var(--type-1); color: var(--color-accent); font-weight: 500; margin-bottom: 4px; }
[data-site-page-root] .chapters h3 { font-size: var(--type-5); margin-bottom: 14px; }
[data-site-page-root] .chapters ol { border-top: 1px solid var(--color-border); }
[data-site-page-root] .chapters li:last-child { border-bottom: 0; }
[data-site-page-root] .walk .head { margin-bottom: clamp(40px, 5vw, 56px); }
@media (max-width: 860px) { [data-site-page-root] .facade { border-width: 4px; } [data-site-page-root] .chapters { border-width: 4px; }}

/* ---- hero key message ---- */
[data-site-page-root] .hero h1 .h1-sub { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin-top: 22px; padding: 12px 16px 12px 18px; font-size: clamp(1.125rem, 1.75vw, var(--type-5)); line-height: 1.2; font-weight: 400; letter-spacing: 0; color: #fff; background: linear-gradient(120deg, #306a52 0%, #1e3c3b 45%, #072929 100%); border-radius: var(--radius-pill); box-shadow: 0 0 0 5px rgba(30,244,180,.28), 0 18px 36px -16px rgba(7,41,41,.7); position: relative; overflow: hidden; text-wrap: balance; }
[data-site-page-root] .hero h1 .h1-sub::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: shimmer 6s ease-in-out 1.2s infinite; pointer-events: none; }
[data-site-page-root] .hero h1 .h1-sub .spark { flex: none; color: #1ef4b4; }
[data-site-page-root] .hero h1 .h1-sub__tag { flex: none; font: 500 var(--type-1)/1 var(--font-body); padding: 6px 12px; border-radius: var(--radius-pill); background: #1ef4b4; color: var(--color-primary); }
@media (max-width: 560px) { [data-site-page-root] .hero h1 .h1-sub { border-radius: var(--radius-md); padding: 12px 14px; gap: 10px; font-size: var(--type-3); }}
@media (prefers-reduced-motion: reduce) { [data-site-page-root] .hero h1 .h1-sub::after { animation: none; }}

/* ---- video quality menu ---- */
[data-site-page-root] .vq { position: absolute; top: 12px; right: 12px; z-index: 4; }
[data-site-page-root] .vq__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-pill); background: rgba(7,41,41,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 500 14px/1 var(--font-body); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
[data-site-page-root] .vq__btn:hover, [data-site-page-root] .vq.is-open .vq__btn { background: rgba(7,41,41,.85); border-color: rgba(255,255,255,.55); }
[data-site-page-root] .vq__hd { padding: 3px 7px; border-radius: 6px; background: linear-gradient(135deg, #1ef4b4, #a3e3e0); color: var(--color-primary); font: 500 11px/1 var(--font-body); letter-spacing: .04em; }
[data-site-page-root] .vq__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; list-style: none; margin: 0; padding: 6px; border-radius: var(--radius-sm); background: rgba(7,41,41,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
[data-site-page-root] .vq__list[hidden] { display: none; }
[data-site-page-root] .vq__list button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 48px; padding: 9px 12px 9px 34px; border: 0; border-radius: 8px; background: transparent; color: #fff; text-align: left; cursor: pointer; position: relative; font: 500 15px/1.2 var(--font-body); }
[data-site-page-root] .vq__list button small { font: 400 12px/1.2 var(--font-body); color: #bbc1f9; }
[data-site-page-root] .vq__list button:hover { background: rgba(255,255,255,.1); }
[data-site-page-root] .vq__list button[aria-checked="true"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 7px; margin-top: -6px; border-left: 2px solid #1ef4b4; border-bottom: 2px solid #1ef4b4; transform: rotate(-45deg); }
[data-site-page-root] .vq__btn:focus-visible, [data-site-page-root] .vq__list button:focus-visible { outline: 2px solid #1ef4b4; outline-offset: 2px; }
@media (max-width: 560px) { [data-site-page-root] .vq { top: 8px; right: 8px; } [data-site-page-root] .vq__list { min-width: 200px; }}

/* ---- brand alignment (Visibility visual guidelines, Sept 2026) ----
   Palette: #072929 text/CTAs, #1E3C3B, #2D4E4D, gradients #1EF4B4>#C6B5FF, #D4FDFF>#C6B5FF, #BBC1F9>#82FFDA,
   neutrals #EBEAE1 #F5F5F0 #FFFFFF, accents #1EF4B4 #C6B5FF, alternate CTA #A3E3E0. No textures, no extra hues. */
[data-site-page-root] .hero { background: linear-gradient(to right bottom, #d4fdff 0%, color-mix(in srgb, #c6b5ff 38%, #fff) 100%); }
[data-site-page-root] .hero::before, [data-site-page-root] .hero__orb, [data-site-page-root] .hero__visual::before { display: none; }
[data-site-page-root] .hero::after { background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-surface)); }
[data-site-page-root] .final { background: var(--color-ink); }
[data-site-page-root] .final::before, [data-site-page-root] .final__glow { display: none; }
[data-site-page-root] .final__act { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-site-page-root] .final .check-dot { background: rgba(30,244,180,.18); color: #1ef4b4; }
/* key message: primary brand gradient with Dark Teal text */
[data-site-page-root] .hero h1 .h1-sub { background: linear-gradient(120deg, #1ef4b4 0%, #82ffda 40%, #c6b5ff 100%); color: var(--color-primary); box-shadow: 0 14px 30px -16px rgba(7,41,41,.45); }
[data-site-page-root] .hero h1 .h1-sub .spark { color: var(--color-primary); }
[data-site-page-root] .hero h1 .h1-sub__tag { background: var(--color-primary); color: #fff; }
/* second CTA on a page: alternate CTA colour #A3E3E0 */
[data-site-page-root] .btn--outline-light { background: #a3e3e0; color: var(--color-primary); border-color: #a3e3e0; }
[data-site-page-root] .btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--color-primary); }
[data-site-page-root] .btn--light:hover { background: #d4fdff; border-color: #d4fdff; }
/* chips and badges stay in palette */
[data-site-page-root] .chip--brain, [data-site-page-root] .chip--prompt { background: color-mix(in srgb, #c6b5ff 38%, #fff); color: var(--color-primary); }
[data-site-page-root] .hero__visual .chip { background: rgba(163,227,224,.18); color: #a3e3e0; }
[data-site-page-root] .hero__visual .chip--prompt { background: rgba(198,181,255,.22); color: #c6b5ff; }
[data-site-page-root] .hero__visual .float--sched { color: var(--color-primary); }

/* responsive */
@media (max-width: 1024px) {
  [data-site-page-root] .tpl__row1 { grid-template-columns: 1fr 1fr; }
  [data-site-page-root] .tpl__row1 .tcard--slack { grid-column: 1 / -1; }
  [data-site-page-root] .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-page-root] .plans li:nth-child(3) { border-left: 0; }
  [data-site-page-root] .plans li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  [data-site-page-root] .flow { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .flow__arrow { transform: rotate(90deg); padding: 2px 0; }}
@media (max-width: 860px) {
  [data-site-page-root] .hero__grid, [data-site-page-root] .split--57, [data-site-page-root] .split--brain, [data-site-page-root] .pricing__top, [data-site-page-root] .walk__grid, [data-site-page-root] .split--faq, [data-site-page-root] .final__grid, [data-site-page-root] .request, [data-site-page-root] .tabs__panel { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .hero { padding-top: 112px; }
  [data-site-page-root] .hero__visual { padding-left: 0; }
  [data-site-page-root] .float--sched { left: 8px; }
  [data-site-page-root] .steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; border-left: 1px solid var(--color-border); }
  [data-site-page-root] .steps li { border-top: 0; padding: 0 0 36px 28px; }
  [data-site-page-root] .steps li::before { top: 8px; left: -5px; }
  [data-site-page-root] .split--faq .head { position: static; }
  [data-site-page-root] .brainviz__card { transform: none; }
  [data-site-page-root] .brain { padding-bottom: var(--pad-y); }
  [data-site-page-root] .control { padding-top: var(--pad-y); }
  [data-site-page-root] .subnav__in { padding-block: 6px; }
  [data-site-page-root] .subnav .btn { display: none; }
  [data-site-page-root] .subnav__links { padding-block: 2px; gap: 8px; }
  [data-site-page-root] .subnav__links a { background: var(--color-bg); border: 1px solid var(--color-border); min-height: 44px; display: flex; align-items: center; padding: 8px 16px; }
  [data-site-page-root] .request__form .btn { margin-top: 4px; }}
@media (max-width: 860px) {
  [data-site-page-root] .crumbs a, [data-site-page-root] .more .textlink, [data-site-page-root] .micro .textlink, [data-site-page-root] .qa .textlink { display: inline-flex; align-items: center; min-height: 44px; }
  [data-site-page-root] .more { line-height: 1.4; }
  [data-site-page-root] .micro .textlink { margin-left: 0; }}
@media (max-width: 720px) {
  [data-site-page-root] .tpl__row1, [data-site-page-root] .tpl__row2 { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .tcard--wide { flex-direction: column; }
  [data-site-page-root] .daily { align-self: flex-start; }
  [data-site-page-root] .ctable { background: transparent; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
  [data-site-page-root] .ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-site-page-root] .ctable table, [data-site-page-root] .ctable tbody { display: block; }
  [data-site-page-root] .ctable tr { display: grid; margin-bottom: 14px; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
  [data-site-page-root] .ctable th, [data-site-page-root] .ctable td { display: block; width: auto !important; padding: 12px 18px; border: 0; }
  [data-site-page-root] .ctable tbody th { padding-top: 16px; font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.3; }
  [data-site-page-root] .ctable td::before { content: attr(data-label); display: block; font-size: 12px; letter-spacing: 1.12px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  [data-site-page-root] .ctable td.ctable__pixis::before { color: var(--color-accent); }
  [data-site-page-root] .sheet__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 24px; }
  [data-site-page-root] .sheet__row > :nth-child(3) { display: none; }
  [data-site-page-root] .sheet__tab:nth-child(3) { display: none; }
  [data-site-page-root] .mini__grid { grid-template-columns: 1.2fr 1fr 1fr; }
  [data-site-page-root] .mini__grid > :nth-child(4n) { display: none; }
  [data-site-page-root] .canvas { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  [data-site-page-root] .canvas::before { left: 50%; right: auto; top: 6%; bottom: 6%; border-top: 0; border-left: 1.5px solid var(--color-accent); }
  [data-site-page-root] .runs li { grid-template-columns: minmax(0, 1fr) auto; }
  [data-site-page-root] .runs .next { grid-column: 1 / -1; text-align: left; }
  [data-site-page-root] .plans { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .plans li { border-left: 0; border-top: 1px solid var(--color-border); }
  [data-site-page-root] .plans li:first-child { border-top: 0; }
  [data-site-page-root] .btn-row .btn { flex: 1 1 100%; }
  [data-site-page-root] .qa p { padding-right: 0; }
  [data-site-page-root] .float--ready { right: 0; font-size: 12.5px; }}
@media (prefers-reduced-motion: reduce) {
  [data-site-page-root] .fill i, [data-site-page-root] .tick, [data-site-page-root] .float--ready, [data-site-page-root] .caret, [data-site-page-root] .logo-marquee__track, [data-site-page-root] .sheet__row, [data-site-page-root] .sheet__run, [data-site-page-root] .float--sched, [data-site-page-root] .hero__copy > *, [data-site-page-root] .hero__visual .sheet, [data-site-page-root] .sheet-back, [data-site-page-root] .hero__orb, [data-site-page-root] .final__glow, [data-site-page-root] .facade__play::before { animation: none; }}
/* ============ builder-first rebuild ============ */
[data-site-page-root] .hero__copy > :nth-child(7) { animation-delay: .44s; }
[data-site-page-root] .hero__copy > :nth-child(8) { animation-delay: .52s; }
[data-site-page-root] .hero h1 { max-width: 19ch; font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.04; }
[data-site-page-root] .hero__copy .lede { margin-top: 20px; }
[data-site-page-root] .hero__sec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; }
[data-site-page-root] .hero__sec .micro { margin: 0; max-width: 34ch; }

/* prompt box */
[data-site-page-root] .prompt { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 6px 6px 6px 22px; background: #fff; border: 1.5px solid var(--color-primary); border-radius: var(--radius-pill); box-shadow: 0 18px 40px -26px rgba(7,41,41,.45); transition: box-shadow .2s ease; }
[data-site-page-root] .prompt:focus-within { box-shadow: 0 0 0 4px rgba(30,244,180,.45), 0 18px 40px -26px rgba(7,41,41,.45); }
[data-site-page-root] .prompt__in { flex: 1 1 auto; min-width: 0; min-height: 48px; border: 0; outline: 0; background: transparent; font: 400 16px/24px var(--font-body); color: var(--color-text); }
[data-site-page-root] .prompt__in::placeholder { color: var(--muted); opacity: 1; }
[data-site-page-root] .prompt__go { flex: none; min-height: 48px; padding: 10px 20px; white-space: nowrap; }
[data-site-page-root] .prompt__hint { min-height: 0; margin: 10px 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--color-accent); }
[data-site-page-root] .prompt__hint:empty { display: none; }
[data-site-page-root] .prompt__hint a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
[data-site-page-root] .idea-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; }
[data-site-page-root] .idea-chips button { min-height: 40px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent); border-radius: var(--radius-pill); background: rgba(255,255,255,.7); color: var(--color-text); font: 400 14px/1.2 var(--font-body); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
[data-site-page-root] .idea-chips button:hover { background: #fff; border-color: var(--color-primary); }
[data-site-page-root] .idea-chips button:focus-visible, [data-site-page-root] .prompt__go:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[data-site-page-root] .prompt--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.34); box-shadow: none; margin-top: 0; }
[data-site-page-root] .prompt--dark .prompt__in { color: #fff; }
[data-site-page-root] .prompt--dark .prompt__in::placeholder { color: #bbc1f9; }
[data-site-page-root] .prompt--dark:focus-within { box-shadow: 0 0 0 4px rgba(30,244,180,.4); }
[data-site-page-root] .sec--ink .prompt__hint { color: #1ef4b4; margin-left: 22px; }
[data-site-page-root] .final__act .micro { margin-top: 14px; }

/* hero visual: typed idea becomes a chain, then a readable result */
[data-site-page-root] .hv { padding: 18px 18px 12px; }
[data-site-page-root] .hv__prompt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 15px; line-height: 1.35; }
[data-site-page-root] .hv__ai { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #1ef4b4, #c6b5ff); color: var(--color-primary); }
[data-site-page-root] .hv__type { flex: 1; min-width: 0; animation: hvtype 2.4s .5s steps(36, end) both; }
[data-site-page-root] .hv__caret { flex: none; width: 2px; height: 18px; background: #1ef4b4; animation: hvblink 1s steps(2, start) infinite; }
[data-site-page-root] .hv__chain { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 14px 0; }
[data-site-page-root] .hv__chain li { position: relative; padding: 10px 11px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.3); color: #fff; font-size: 12.5px; line-height: 1.3; font-weight: 500; animation: hvpop .5s calc(2.9s + var(--k) * .3s) both; }
[data-site-page-root] .hv__chain li small { display: block; margin-bottom: 4px; color: #bbc1f9; font-size: 10.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
[data-site-page-root] .hv__chain li + li::before { content: "›"; position: absolute; left: -9px; top: 50%; margin-top: -9px; color: #bbc1f9; font-size: 16px; line-height: 18px; }
[data-site-page-root] .hv__out { padding: 14px 16px 8px; border-radius: 14px; background: #fff; color: var(--color-primary); animation: hvrise .7s 4.7s cubic-bezier(.2,.7,.2,1) both; }
[data-site-page-root] .hv__h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
[data-site-page-root] .hv__h b { font-weight: 500; }
[data-site-page-root] .hv__h span:last-child { margin-left: auto; color: var(--muted); white-space: nowrap; }
[data-site-page-root] .hv__av { flex: none; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #c6b5ff, #1ef4b4); }
[data-site-page-root] .hv__out ul { list-style: none; padding: 0; margin: 10px 0 0; }
[data-site-page-root] .hv__out li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
[data-site-page-root] .hv__out li b { font-weight: 500; }
[data-site-page-root] .hv__out li span { color: var(--muted); font-size: 12.5px; }
[data-site-page-root] .hv .sheet__note { color: #bbc1f9; }
@keyframes hvtype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hvblink { 50% { opacity: 0; } }
@keyframes hvpop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hvrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* idea wall */
[data-site-page-root] .ideas .head { margin-bottom: 28px; }
[data-site-page-root] .wall__key { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 13px; }
[data-site-page-root] .t, [data-site-page-root] .s, [data-site-page-root] .d { font-weight: 500; padding: 1px 8px; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-site-page-root] .t { background: var(--color-tint-teal); }
[data-site-page-root] .s { background: color-mix(in srgb, #c6b5ff 32%, #fff); }
[data-site-page-root] .d { background: #d4fdff; }
[data-site-page-root] .wall__key b { padding: 4px 12px; border-radius: var(--radius-pill); }
[data-site-page-root] .wall__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--color-border); }
[data-site-page-root] .wall__row:last-child { border-bottom: 1px solid var(--color-border); }
[data-site-page-root] .wall__row h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); padding-top: 2px; }
[data-site-page-root] .wall__row ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
[data-site-page-root] .idea { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
[data-site-page-root] .idea p { font-size: 17px; line-height: 1.75; }
[data-site-page-root] .idea__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14.5px; font-weight: 500; color: var(--color-accent); text-decoration: none; }
[data-site-page-root] .idea__go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* how it works */
[data-site-page-root] .how .flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.7fr) auto minmax(0, .9fr); }
@media (max-width: 1024px) { [data-site-page-root] .how .flow { grid-template-columns: minmax(0, 1fr); }}
[data-site-page-root] .how .flow__node { align-content: flex-start; }

/* step library */
[data-site-page-root] .split--lib { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }
[data-site-page-root] .lib h2 { color: #fff; max-width: 18ch; }
[data-site-page-root] .lib__count { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 0; margin: 28px 0 0; }
[data-site-page-root] .lib__count li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: #ebeae1; }
[data-site-page-root] .lib__count b { font: 400 clamp(2.25rem, 4vw, 3.25rem)/1 var(--font-display); color: #1ef4b4; }
[data-site-page-root] .lib__groups { display: grid; gap: 22px; margin: 32px 0 34px; }
[data-site-page-root] .lib__g h3 { font: 500 12px/1.2 var(--font-body); letter-spacing: 1.12px; text-transform: uppercase; color: #bbc1f9; margin-bottom: 10px; }
[data-site-page-root] .lib__g ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
[data-site-page-root] .lib__g li { padding: 7px 14px; border: 1px solid rgba(255,255,255,.26); border-radius: var(--radius-pill); font-size: 14px; color: #fff; background: rgba(255,255,255,.05); }
[data-site-page-root] .lib__shot { margin: 0; }
[data-site-page-root] .lib__frame { position: relative; max-width: 380px; margin-inline: auto; max-height: 560px; overflow: hidden; border-radius: var(--radius-lg); background: #fff; border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #1ef4b4, #82ffda 45%, #c6b5ff) border-box; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
[data-site-page-root] .lib__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
[data-site-page-root] .lib__frame img { display: block; width: 100%; height: auto; }
[data-site-page-root] .lib__shot figcaption { max-width: 380px; margin: 16px auto 0; font-size: 14px; line-height: 1.5; color: #bbc1f9; }

/* build your own */
[data-site-page-root] .split--build { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
[data-site-page-root] .build__path { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 26px 0 0; }
[data-site-page-root] .build__path li { padding: 8px 16px; border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, transparent); border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; background: var(--color-bg); }
[data-site-page-root] .build__path li + li::before { content: "›"; margin-right: 12px; margin-left: -4px; color: var(--muted); }
[data-site-page-root] .build__shot { margin: 0; border-radius: var(--radius-lg); border: 6px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #1ef4b4 0%, #82ffda 32%, #bbc1f9 64%, #c6b5ff 100%) border-box; box-shadow: 0 30px 70px -34px rgba(7,41,41,.5); overflow: hidden; }
[data-site-page-root] .build__shot img { display: block; width: 100%; height: auto; }

/* templates */
[data-site-page-root] .gets { margin-top: 4px; padding-top: 14px; }
[data-site-page-root] .gets__k { font-size: var(--type-1); letter-spacing: 1.12px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
[data-site-page-root] .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
[data-site-page-root] .tpl__row2 { grid-template-columns: 1.5fr 1fr; }
[data-site-page-root] .slack__list { list-style: none; padding: 0; margin: 2px 0 0; display: grid; }
[data-site-page-root] .slack__list li { padding: 7px 0; border-top: 1px solid var(--color-border); font-size: 14px; line-height: 1.4; }
[data-site-page-root] .slack__list li b { font-weight: 500; color: var(--color-primary); }
[data-site-page-root] .slack__note { font-size: 12px; color: var(--muted); }
[data-site-page-root] .gaplist { flex: none; align-self: center; width: min(100%, 240px); padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-bg); }
[data-site-page-root] .gaplist__h { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
[data-site-page-root] .gaplist ul { list-style: none; padding: 0; margin: 0; }
[data-site-page-root] .gaplist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
[data-site-page-root] .gaplist li b { font-weight: 500; color: var(--color-accent); }
[data-site-page-root] .gaplist .slack__note { margin-top: 6px; }
[data-site-page-root] .tpl__more { margin-top: 32px; font-size: 17px; }

/* control: readable sheet */
[data-site-page-root] .mini__table { padding: 8px 0 4px; }
[data-site-page-root] .mt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-border); font-size: 13.5px; line-height: 1.4; }
[data-site-page-root] .mt .chip { margin-right: 6px; }
[data-site-page-root] .mt--h { border-top: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .node--trig { background: var(--color-bg); }

/* outcomes */
[data-site-page-root] .outcomes .head { margin-bottom: 40px; }
[data-site-page-root] .counter { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; }
[data-site-page-root] .counter li { padding: 20px 0 0; border-top: 2px solid var(--color-accent); }
[data-site-page-root] .counter b { display: block; font: 400 clamp(1rem, 1.5vw, 1.125rem)/1.3 var(--font-display); letter-spacing: .02em; color: var(--color-accent); overflow-wrap: anywhere; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, transparent); border-radius: var(--radius-sm); }
[data-site-page-root] .counter span { display: block; margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--muted); }
[data-site-page-root] .voice { margin: clamp(40px, 5vw, 64px) 0 0; padding: 28px clamp(20px, 3vw, 40px); border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent); border-radius: var(--radius-lg); }
[data-site-page-root] .voice blockquote { margin: 0; font: 400 clamp(1.375rem, 2.6vw, 2rem)/1.3 var(--font-display); color: var(--muted); }
[data-site-page-root] .voice figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* site check */
[data-site-page-root] .split--check { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
[data-site-page-root] .check__form { padding: clamp(22px, 3vw, 34px); background: rgba(255,255,255,.78); border: 1px solid #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
[data-site-page-root] .check__form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
[data-site-page-root] .check__row { display: flex; flex-wrap: wrap; gap: 10px; }
[data-site-page-root] .check__row input { flex: 1 1 240px; min-width: 0; min-height: 54px; padding: 14px 20px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: #fff; font: 400 15px/24px var(--font-body); color: var(--color-text); }
[data-site-page-root] .check__row input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[data-site-page-root] .check__err { min-height: 0; margin-top: 8px; font-size: 13px; color: #a1281d; }
[data-site-page-root] .check__err:empty { display: none; }
[data-site-page-root] .check__note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* build with us, pricing, faq */
[data-site-page-root] .split--with { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; }
[data-site-page-root] .withus h2 { max-width: 22ch; }
[data-site-page-root] .with__act { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
[data-site-page-root] .with__act .textlink--arrow { margin-top: 14px; }
[data-site-page-root] .pricing .head { max-width: 60ch; }
[data-site-page-root] .more--vs { margin-top: 14px; }

/* walkthrough sits under a lighter head now */
[data-site-page-root] .ideas, [data-site-page-root] .lib, [data-site-page-root] .build, [data-site-page-root] .outcomes { overflow: clip; }

@media (max-width: 1024px) {
  [data-site-page-root] .wall__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  [data-site-page-root] .counter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-page-root] .tpl__row2 { grid-template-columns: minmax(0, 1fr); }}
@media (max-width: 860px) {
  [data-site-page-root] .split--lib, [data-site-page-root] .split--build, [data-site-page-root] .split--check, [data-site-page-root] .split--with { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .wall__row ul { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  [data-site-page-root] .hero h1 { max-width: none; }
  [data-site-page-root] .hv__chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-page-root] .hv__chain li + li::before { display: none; }
  [data-site-page-root] .mt { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  [data-site-page-root] .mt--h { display: none; }
  [data-site-page-root] .lib__frame { max-height: 420px; }}
@media (max-width: 560px) {
  [data-site-page-root] .prompt { flex-wrap: wrap; border-radius: var(--radius-md); padding: 6px 6px 6px 16px; }
  [data-site-page-root] .prompt__in { flex-basis: 100%; }
  [data-site-page-root] .prompt__go { width: 100%; }
  [data-site-page-root] .prompt__hint { margin-left: 4px; }
  [data-site-page-root] .idea-chips button { min-height: 44px; }
  [data-site-page-root] .counter { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .hv__type { animation: none; }
  [data-site-page-root] .hv__caret { display: none; }
  [data-site-page-root] .hv__prompt { font-size: 14px; }}
@media (prefers-reduced-motion: reduce) {
  [data-site-page-root] .hv__type, [data-site-page-root] .hv__chain li, [data-site-page-root] .hv__out, [data-site-page-root] .hv__caret { animation: none; }}

/* ============ non-interactive page: visuals do the persuading ============ */
[data-site-page-root] { --g1: linear-gradient(135deg, #1ef4b4, #82ffda); --g2: linear-gradient(135deg, #c6b5ff, #bbc1f9); --g3: linear-gradient(135deg, #82ffda, #a3e3e0); --g4: linear-gradient(135deg, #bbc1f9, #d4fdff); --g5: linear-gradient(135deg, #a3e3e0, #c6b5ff); }
[data-site-page-root] .hero__btns { margin-top: 28px; }
[data-site-page-root] .hero__copy > .micro { margin-top: 14px; }

/* showcase tabs (what you can build) */
[data-site-page-root] .ideas .head { margin-bottom: 32px; }
[data-site-page-root] .stabs__list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
[data-site-page-root] .stabs__list button { min-height: 48px; padding: 10px 22px; border: 1.5px solid transparent; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text); font: 400 16px/24px var(--font-body); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
[data-site-page-root] .stabs__list button:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
[data-site-page-root] .stabs__list button[aria-selected="true"] { background: var(--tab); border-color: var(--color-primary); font-weight: 500; }
[data-site-page-root] .stabs__list button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[data-site-page-root] .spanel { position: relative; min-height: clamp(440px, 40vw, 540px); border-radius: var(--radius-lg); background: var(--g); overflow: hidden; isolation: isolate; }
[data-site-page-root] .spanel[hidden] { display: none; }
[data-site-page-root] .spanel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(7,41,41,.10) 1px, transparent 1.3px) 0 0 / 20px 20px; opacity: .6; }
[data-site-page-root] .sbg { position: absolute; left: 4%; right: 24%; top: 9%; bottom: 0; background: rgba(255,255,255,.92); border-radius: 18px 18px 0 0; padding: 16px 20px; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
[data-site-page-root] .sbg__t { display: flex; align-items: center; gap: 10px; font-size: 15px; padding-bottom: 12px; }
[data-site-page-root] .sbg__t i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #1ef4b4, #c6b5ff); }
[data-site-page-root] .sbg__r { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--color-border); font-size: 14px; color: var(--muted); }
[data-site-page-root] .sbg__r span:first-child { color: var(--color-text); }
[data-site-page-root] .sbg__r--h { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
[data-site-page-root] .scard { position: absolute; background: #fff; border-radius: 18px; box-shadow: 0 24px 50px -22px rgba(7,41,41,.45), 0 0 0 1px rgba(7,41,41,.06); padding: 20px 22px; }
[data-site-page-root] .scard--a { left: 3%; bottom: 7%; width: min(38%, 400px); }
[data-site-page-root] .scard--b { right: 3%; top: 8%; width: min(40%, 430px); }
[data-site-page-root] .scard__h { display: flex; align-items: center; gap: 10px; font: 400 clamp(1.125rem, 1.6vw, 1.375rem)/1.2 var(--font-display); margin-bottom: 14px; }
[data-site-page-root] .scard__ic { width: 22px; height: 22px; border-radius: 7px; background: var(--g); border: 1px solid rgba(7,41,41,.2); flex: none; }
[data-site-page-root] .scard--b .scard__h { font: 500 12px/1.2 var(--font-body); letter-spacing: 1.12px; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .scard__n { margin-top: 10px; font-size: 12px; color: var(--muted); }
[data-site-page-root] .wds { display: grid; gap: 0; margin: 0; }
[data-site-page-root] .wds > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--color-border); font-size: 15px; line-height: 1.4; }
[data-site-page-root] .wds dt { font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
[data-site-page-root] .wds dd { margin: 0; }
[data-site-page-root] .wds ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
[data-site-page-root] .wds ol li { display: flex; gap: 10px; align-items: flex-start; }
[data-site-page-root] .wds .n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-tint-teal); color: var(--color-accent); font-size: 11.5px; font-weight: 500; margin-top: 1px; }
[data-site-page-root] .wds b { font-weight: 500; }
[data-site-page-root] .slackmsg { border-radius: 12px; }
[data-site-page-root] .slackmsg__h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; }
[data-site-page-root] .slackmsg__h .av { flex: none; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #c6b5ff, #1ef4b4); }
[data-site-page-root] .slackmsg__h span:last-child { margin-left: auto; color: var(--muted); white-space: nowrap; }
[data-site-page-root] .slackmsg ul { list-style: none; padding: 0; margin: 0; }
[data-site-page-root] .slackmsg li { padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 14.5px; line-height: 1.4; }
[data-site-page-root] .slackmsg li b { font-weight: 500; }
[data-site-page-root] .doc { font-size: 14.5px; line-height: 1.45; }
[data-site-page-root] .doc__k { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 12px 0 3px; }
[data-site-page-root] .doc__k:first-child { margin-top: 0; }
[data-site-page-root] .doc__t { font: 400 17px/1.3 var(--font-display); }
[data-site-page-root] .doc ol { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
[data-site-page-root] .pri { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
[data-site-page-root] .pri li { display: flex; gap: 10px; align-items: baseline; }
[data-site-page-root] .pri b { flex: none; min-width: 64px; text-align: center; padding: 1px 8px; border-radius: 100px; font-size: 11.5px; font-weight: 500; }
[data-site-page-root] .pri .hi { background: #ffd9d4; color: #7a1d14; }
[data-site-page-root] .pri .md { background: #fff0c7; color: #6b4a00; }
[data-site-page-root] .pri .lo { background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .ideas__cta { margin-top: 32px; }

/* how it works: the 20-second loop */
[data-site-page-root] .how .head { margin-bottom: 36px; }
[data-site-page-root] .demo { --T: 20s; position: relative; max-width: 1040px; margin-inline: auto; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 34px 70px -34px rgba(7,41,41,.45); }
[data-site-page-root] .demo__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-size: 13px; background: var(--color-bg); }
[data-site-page-root] .demo__dots { display: inline-flex; gap: 6px; } 
[data-site-page-root] .demo__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d8d6c8; }
[data-site-page-root] .demo__bar b { font-weight: 500; }
[data-site-page-root] .demo__tag { margin-left: auto; color: var(--muted); font-size: 12px; }
[data-site-page-root] .demo__stage { position: relative; height: clamp(300px, 34vw, 380px); background: linear-gradient(135deg, #d4fdff, color-mix(in srgb, #c6b5ff 45%, #fff)); overflow: hidden; }
[data-site-page-root] .scene { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 3vw, 36px); opacity: 0; }
[data-site-page-root] .demo.is-live .scene { animation: scn var(--T) infinite both; }
[data-site-page-root] .scene--1 { animation-delay: 0s; } 
[data-site-page-root] .demo.is-live .scene--2 { animation-delay: calc(var(--T) * .25); }
[data-site-page-root] .demo.is-live .scene--3 { animation-delay: calc(var(--T) * .5); }
[data-site-page-root] .demo.is-live .scene--4 { animation-delay: calc(var(--T) * .75); }
@keyframes scn { 0% { opacity: 0; transform: translateY(10px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
[data-site-page-root] .scene--1 { opacity: 1; }
[data-site-page-root] .demo.is-live .scene--1 { opacity: 0; }
[data-site-page-root] .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(100%, 860px); }
[data-site-page-root] .gcard { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); border: 2px solid transparent; }
[data-site-page-root] .gcard small { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); }
[data-site-page-root] .gcard b { font: 400 18px/1.25 var(--font-display); }
[data-site-page-root] .gcard__go { margin-top: 10px; align-self: flex-start; font-size: 13px; color: var(--color-accent); font-weight: 500; }
[data-site-page-root] .gcard--pick { border-color: var(--color-primary); box-shadow: 0 0 0 5px rgba(30,244,180,.4), var(--shadow-sm); }
[data-site-page-root] .demo.is-live .gcard--pick { animation: pick var(--T) infinite both; }
@keyframes pick { 0%, 8% { transform: none; box-shadow: var(--shadow-sm); border-color: transparent; } 12%, 22% { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: 0 0 0 5px rgba(30,244,180,.4), var(--shadow-md); } 100% { transform: none; } }
[data-site-page-root] .sh { width: min(100%, 880px); background: #fff; border-radius: 14px; box-shadow: var(--shadow-md); padding: 14px 18px; }
[data-site-page-root] .sh__tools { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
[data-site-page-root] .sh__tools span { padding: 4px 11px; border-radius: 100px; background: var(--color-bg); }
[data-site-page-root] .sh__tools .sh__run { margin-left: auto; background: var(--color-primary); color: #fff; }
[data-site-page-root] .sh__r { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
[data-site-page-root] .sh__tools + .sh__r { border-top: 0; }
[data-site-page-root] .sh__r--h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .cell { position: relative; display: block; height: 26px; }
[data-site-page-root] .cell i { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 100px; font-style: normal; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
[data-site-page-root] .cell .run { background: color-mix(in srgb, #c6b5ff 30%, #fff); color: var(--color-primary); }
[data-site-page-root] .cell .done { background: var(--color-tint-teal); color: var(--color-accent); opacity: 0; }
[data-site-page-root] .demo.is-live .cell .run { animation: runfade var(--T) infinite both; }
[data-site-page-root] .demo.is-live .cell .done { animation: donefade var(--T) infinite both; }
[data-site-page-root] .cell .r2, [data-site-page-root] .cell .d2 { animation-delay: .25s !important; }
[data-site-page-root] .cell .r3, [data-site-page-root] .cell .d3 { animation-delay: .5s !important; }
@keyframes runfade { 0%, 31% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes donefade { 0%, 34% { opacity: 0; } 39%, 100% { opacity: 1; } }
[data-site-page-root] .scene--2 .cell .run { opacity: 1; } 
[data-site-page-root] .out { width: min(100%, 780px); background: #fff; border-radius: 14px; box-shadow: var(--shadow-md); padding: 20px 24px; }
[data-site-page-root] .out__h { font: 500 12px/1.2 var(--font-body); letter-spacing: 1.12px; text-transform: uppercase; color: var(--color-accent); padding-bottom: 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 14px; }
[data-site-page-root] .out__g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
[data-site-page-root] .out .doc__t { font-size: 20px; }
[data-site-page-root] .sc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; width: min(100%, 800px); align-items: stretch; }
[data-site-page-root] .sc__f, [data-site-page-root] .sc .slackmsg { background: #fff; border-radius: 14px; box-shadow: var(--shadow-md); padding: 18px 20px; }
[data-site-page-root] .sc__pill { display: inline-block; padding: 7px 16px; border-radius: 100px; background: var(--color-tint-teal); font-weight: 500; font-size: 15px; margin-bottom: 14px; }
[data-site-page-root] .sc__pill--d { background: #d4fdff; margin-bottom: 0; }
[data-site-page-root] .demo__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 0; border-top: 1px solid var(--color-border); }
[data-site-page-root] .demo__steps li { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 15px; font-weight: 500; color: var(--muted); border-left: 1px solid var(--color-border); }
[data-site-page-root] .demo__steps li:first-child { border-left: 0; }
[data-site-page-root] .demo__steps b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); font-size: 12.5px; }
[data-site-page-root] .demo.is-live .demo__steps li { animation: stp var(--T) infinite both; animation-delay: calc(var(--n) * var(--T) * .25); }
[data-site-page-root] .demo.is-live .demo__steps b { animation: stpb var(--T) infinite both; animation-delay: calc(var(--n) * var(--T) * .25); }
@keyframes stp { 0%, 24% { color: var(--color-primary); } 25%, 100% { color: var(--muted); } }
@keyframes stpb { 0%, 24% { background: var(--color-accent); color: #fff; } 25%, 100% { background: var(--color-bg); color: inherit; } }
[data-site-page-root] .demo__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 24px; color: var(--muted); font-size: 15px; }
[data-site-page-root] .demo__more .btn { gap: 8px; }

/* template cards: finished outputs */
[data-site-page-root] .doc--card { width: 100%; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--color-bg); }
[data-site-page-root] .gets__line { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
[data-site-page-root] .roi { align-self: center; }
[data-site-page-root] .tpl .head { margin-bottom: 36px; }

/* closing call */
[data-site-page-root] .final__after { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #ebeae1; }
[data-site-page-root] .final__act .btn-row { margin-top: 0; }

/* walkthrough modal */
[data-site-page-root] .vmodal { position: fixed; inset: 0; margin: auto; width: min(1100px, 94vw); height: fit-content; max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: #072929; overflow: visible; }
[data-site-page-root] .vmodal::backdrop { background: rgba(7,41,41,.78); backdrop-filter: blur(4px); }
[data-site-page-root] .vmodal__v { display: block; width: 100%; max-height: 86vh; border-radius: var(--radius-lg); background: #072929; }
[data-site-page-root] .vmodal__x { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--color-primary); font-size: 28px; line-height: 1; cursor: pointer; }
[data-site-page-root] .vmodal__x:focus-visible { outline: 3px solid #1ef4b4; outline-offset: 2px; }

@media (max-width: 1024px) {
  [data-site-page-root] .spanel { display: grid; gap: 16px; padding: 20px; min-height: 0; }
  [data-site-page-root] .sbg { display: none; }
  [data-site-page-root] .scard { position: relative; inset: auto; width: auto; }
  [data-site-page-root] .scard--a, [data-site-page-root] .scard--b { left: auto; right: auto; top: auto; bottom: auto; width: auto; }}
@media (min-width: 761px) and (max-width: 1024px) { [data-site-page-root] .spanel { grid-template-columns: 1fr 1fr; align-items: start; }}
@media (max-width: 760px) {
  [data-site-page-root] .g3 { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .g3 .gcard:nth-child(n+2) { display: none; }
  [data-site-page-root] .demo__stage { height: 340px; }
  [data-site-page-root] .out__g, [data-site-page-root] .sc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-site-page-root] .sh__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-site-page-root] .sh__r > span:first-child { grid-column: 1 / -1; }
  [data-site-page-root] .sh__r--h { display: none; }
  [data-site-page-root] .demo__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-page-root] .demo__steps li:nth-child(3) { border-left: 0; }
  [data-site-page-root] .demo__steps li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  [data-site-page-root] .stabs__list { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  [data-site-page-root] .stabs__list button { flex: none; }
  [data-site-page-root] .vmodal__x { top: -50px; }}
@media (prefers-reduced-motion: reduce) {
  [data-site-page-root] .demo .scene, [data-site-page-root] .demo .cell i, [data-site-page-root] .demo .gcard--pick, [data-site-page-root] .demo__steps li, [data-site-page-root] .demo__steps b { animation: none !important; }
  [data-site-page-root] .demo .scene--1 { opacity: 0; }
  [data-site-page-root] .demo .scene--3 { opacity: 1; }
  [data-site-page-root] .demo__steps li { color: var(--color-primary); }}

[data-site-page-root] .tpl__row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-site-page-root] .tpl__row2 .tcard--wide { flex-direction: column; justify-content: flex-start; gap: 18px; }
[data-site-page-root] .tpl__row2 .gaplist { width: 100%; align-self: stretch; margin-top: 0; }
[data-site-page-root] .tpl__row2 .tcard--wide .btn { margin-top: 4px; }

/* ============ workflow canvas: nodes, ports, wires ============ */
[data-site-page-root] .app { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 34px 70px -34px rgba(7,41,41,.5), 0 0 0 1px rgba(7,41,41,.06); }
[data-site-page-root] .app__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--color-border); background: #fff; font-size: 13px; min-width: 0; }
[data-site-page-root] .app__back { color: var(--muted); font-size: 18px; line-height: 1; }
[data-site-page-root] .app__name { font: 400 16px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-site-page-root] .app__draft { padding: 2px 9px; border-radius: 100px; background: #ffe9d4; color: #8a4b00; font-size: 11.5px; flex: none; }
[data-site-page-root] .app__seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--color-bg); margin-left: auto; flex: none; }
[data-site-page-root] .app__seg i { font-style: normal; padding: 4px 12px; border-radius: 8px; color: var(--muted); }
[data-site-page-root] .app__seg i.on { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-sm); font-weight: 500; }
[data-site-page-root] .app__sched { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 10px; white-space: nowrap; flex: none; }
[data-site-page-root] .app__sched svg { color: #e08a00; }
[data-site-page-root] .app__live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 10px; flex: none; }
[data-site-page-root] .app__live u { width: 26px; height: 15px; border-radius: 10px; background: #cfd3d1; position: relative; text-decoration: none; }
[data-site-page-root] .app__live u::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
[data-site-page-root] .app__run { padding: 7px 14px; border-radius: 10px; background: var(--color-primary); color: #fff; font-weight: 500; white-space: nowrap; flex: none; }
[data-site-page-root] .app__canvas { position: relative; padding: clamp(18px, 2.4vw, 30px); background: radial-gradient(rgba(7,41,41,.13) 1px, transparent 1.4px) 0 0 / 20px 20px, #fafaf6; overflow-x: auto; }
[data-site-page-root] .app__note { padding: 8px 16px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--muted); background: #fff; }

[data-site-page-root] .wf { display: grid; grid-template-rows: repeat(3, minmax(88px, 1fr)); align-items: center; min-width: 760px; }
[data-site-page-root] .nd { position: relative; align-self: center; z-index: 1; padding: 12px 13px 13px; background: #fff; border: 1px solid #dcdcd2; border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(7,41,41,.35); min-width: 0; }
[data-site-page-root] .nd--big { align-self: stretch; display: flex; flex-direction: column; }
[data-site-page-root] .nd__k { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .nd__k .ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; }
[data-site-page-root] .nd--trig .ic { background: #d4fdff; color: #1c6b60; }
[data-site-page-root] .nd--data .ic { background: color-mix(in srgb, #a3e3e0 55%, #fff); color: #0f4b47; }
[data-site-page-root] .nd--ai .ic { background: color-mix(in srgb, #c6b5ff 55%, #fff); color: #3a2a85; }
[data-site-page-root] .nd--out .ic { background: var(--color-primary); color: #fff; }
[data-site-page-root] .nd--ai { box-shadow: 0 8px 18px -12px rgba(7,41,41,.35), inset 3px 0 0 #c6b5ff; }
[data-site-page-root] .nd--data { box-shadow: 0 8px 18px -12px rgba(7,41,41,.35), inset 3px 0 0 #82ffda; }
[data-site-page-root] .nd--trig { box-shadow: 0 8px 18px -12px rgba(7,41,41,.35), inset 3px 0 0 #1ef4b4; }
[data-site-page-root] .nd--out { border-color: var(--color-primary); box-shadow: 0 10px 22px -12px rgba(7,41,41,.5); }
[data-site-page-root] .nd__t { margin-top: 8px; font: 500 14px/1.25 var(--font-body); color: var(--color-text); overflow-wrap: anywhere; }
[data-site-page-root] .nd__s { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
[data-site-page-root] .nd__s:empty { display: none; }
[data-site-page-root] .nd::before, [data-site-page-root] .nd::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--color-accent); }
[data-site-page-root] .nd::before { left: -5px; } 
[data-site-page-root] .nd::after { right: -5px; }
[data-site-page-root] .nd--first::before, [data-site-page-root] .nd--last::after { display: none; }
[data-site-page-root] .nd__body { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); }
[data-site-page-root] .nd--big .nd__body { flex: 1; }
[data-site-page-root] .nd .slackmsg li { padding: 6px 0; font-size: 13px; }
[data-site-page-root] .nd .slackmsg__h { font-size: 12.5px; }
[data-site-page-root] .nd .doc { font-size: 13px; }
[data-site-page-root] .nd .doc__t { font-size: 15px; }
[data-site-page-root] .wr { align-self: stretch; justify-self: stretch; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
[data-site-page-root] .wr path, [data-site-page-root] .wv path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-site-page-root] .wr__b { stroke: color-mix(in srgb, var(--color-primary) 28%, #fff); stroke-width: 2; }
[data-site-page-root] .wr__f { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 5 12; animation: wflow 1.6s linear infinite; }
@keyframes wflow { to { stroke-dashoffset: -17; } }
[data-site-page-root] .spanel { padding: clamp(18px, 3.4vw, 48px); min-height: 0; display: block; }
[data-site-page-root] .spanel .app { max-width: 1120px; margin-inline: auto; }
[data-site-page-root] .ideas .app__note { background: #fff; }

/* hero: a vertical workflow, built from a typed idea */
[data-site-page-root] .app--hero { position: relative; z-index: 1; }
[data-site-page-root] .app--hero .app__bar { padding: 10px 14px; gap: 8px; }
[data-site-page-root] .app--hero .app__seg, [data-site-page-root] .app--hero .app__live { display: none; }
[data-site-page-root] .app--hero .app__canvas { overflow: visible; padding: 18px 18px 14px; }
[data-site-page-root] .app--hero .hv__prompt { background: #fff; border: 1px solid var(--color-primary); color: var(--color-text); box-shadow: 0 8px 18px -12px rgba(7,41,41,.4); margin-bottom: 14px; }
[data-site-page-root] .app--hero .hv__ai { color: var(--color-primary); }
[data-site-page-root] .wfv { display: flex; flex-direction: column; }
[data-site-page-root] .wfv .nd { width: 64%; align-self: auto; }
[data-site-page-root] .wfv .nd--l { margin-right: auto; }
[data-site-page-root] .wfv .nd--r { margin-left: auto; width: 68%; }
[data-site-page-root] .wfv .nd::before, [data-site-page-root] .wfv .nd::after { display: none; }
[data-site-page-root] .wv { display: block; width: 100%; height: 34px; overflow: visible; }
[data-site-page-root] .app--hero .nd { animation: hvpop .5s calc(1.2s + var(--k) * .55s) both; }
[data-site-page-root] .app--hero .wv { animation: hvpop .4s calc(1.0s + var(--k) * .55s) both; }
[data-site-page-root] .app--hero .nd--out .nd__body { animation: hvrise .6s 4.1s both; }
[data-site-page-root] .app--hero .app__note { text-align: left; }

/* control: small canvas */
[data-site-page-root] .canvas-wf { overflow-x: auto; padding: 16px 4px 8px; background: radial-gradient(rgba(7,41,41,.13) 1px, transparent 1.4px) 0 0 / 20px 20px, #fafaf6; border-radius: 12px; }
[data-site-page-root] .wf--mini { min-width: 600px; }
[data-site-page-root] .wf--mini .nd__s { display: none; }
[data-site-page-root] .wf--mini { grid-template-rows: repeat(3, minmax(64px, 1fr)); }

/* template cards: the same pills, as a chain */
[data-site-page-root] .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; width: 100%; }
[data-site-page-root] .cn { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 500; line-height: 1.2; background: #fff; border: 1px solid #dcdcd2; }
[data-site-page-root] .cn--trig { box-shadow: inset 3px 0 0 #1ef4b4; }
[data-site-page-root] .cn--data { box-shadow: inset 3px 0 0 #82ffda; }
[data-site-page-root] .cn--ai { box-shadow: inset 3px 0 0 #c6b5ff; }
[data-site-page-root] .cn--out { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
[data-site-page-root] .cw { flex: none; width: 14px; height: 2px; background: var(--color-accent); position: relative; opacity: .7; }
[data-site-page-root] .cw::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 5px solid var(--color-accent); border-block: 4px solid transparent; }
[data-site-page-root] .chain__n { margin-left: 10px; font-size: 12.5px; color: var(--muted); }

/* how it works: the workflow builds itself, runs, and gets scheduled */
[data-site-page-root] .demo { --T: 22s; max-width: 1120px; }
[data-site-page-root] .demo .app__bar { background: #fff; }
[data-site-page-root] .pk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); background: #fff; font-size: 13px; }
[data-site-page-root] .pk__k { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
[data-site-page-root] .pk__c { padding: 5px 13px; border-radius: 100px; border: 1px solid var(--color-border); color: var(--muted); }
[data-site-page-root] .pk__c--on { border-color: var(--color-primary); background: #fff; color: var(--color-primary); font-weight: 500; box-shadow: 0 0 0 4px rgba(30,244,180,.4); }
[data-site-page-root] .demo .app__canvas { overflow-x: auto; }
[data-site-page-root] .demo .wf { min-width: 820px; }
[data-site-page-root] .swap { display: inline-grid; }
[data-site-page-root] .swap > span { grid-area: 1 / 1; }
[data-site-page-root] .sw-a { opacity: 0; visibility: hidden; }
[data-site-page-root] .st { display: none; margin-left: auto; }
[data-site-page-root] .sent { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 100px; background: var(--color-tint-teal); color: var(--color-accent); font-size: 12.5px; font-weight: 500; }
[data-site-page-root] .sent i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
[data-site-page-root] .demo.is-live .st { display: inline-grid; }
[data-site-page-root] .st > span { grid-area: 1 / 1; padding: 2px 9px; border-radius: 100px; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
[data-site-page-root] .st__r { background: color-mix(in srgb, #c6b5ff 40%, #fff); color: #3a2a85; opacity: 0; }
[data-site-page-root] .st__d { background: var(--color-tint-teal); color: var(--color-accent); opacity: 0; }
[data-site-page-root] .demo.is-live .st__r { animation: stR var(--T) infinite both; }
[data-site-page-root] .demo.is-live .st__d { animation: stD var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn2 .st__r, [data-site-page-root] .demo.is-live .dn2 .st__d { animation-delay: calc(var(--T) * .02); }
[data-site-page-root] .demo.is-live .dn3 .st__r, [data-site-page-root] .demo.is-live .dn3 .st__d { animation-delay: calc(var(--T) * .03); }
[data-site-page-root] .demo.is-live .dn4 .st__r, [data-site-page-root] .demo.is-live .dn4 .st__d { animation-delay: calc(var(--T) * .06); }
[data-site-page-root] .demo.is-live .dn5 .st__r, [data-site-page-root] .demo.is-live .dn5 .st__d { animation-delay: calc(var(--T) * .09); }
@keyframes stR { 0%, 33% { opacity: 0; } 36%, 49% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes stD { 0%, 50% { opacity: 0; } 54%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
[data-site-page-root] .demo.is-live .dn0 { animation: dni0 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn1 { animation: dni1 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn2 { animation: dni2 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn3 { animation: dni2 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn4 { animation: dni4 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn5 { animation: dni5 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dw0 { animation: dwi0 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dw1 { animation: dwi1 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dw2 { animation: dwi2 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dw3 { animation: dwi3 var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn5 .nd__body { animation: dbody var(--T) infinite both; }
[data-site-page-root] .demo.is-live .dn5 .sent { animation: dsent var(--T) infinite both; }
@keyframes dbody { 0%, 53% { opacity: 0; transform: translateY(8px); } 58%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dsent { 0%, 76% { opacity: 0; } 80%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
[data-site-page-root] .demo.is-live .sw-a { animation: swA var(--T) infinite both; visibility: visible; }
[data-site-page-root] .demo.is-live .sw-b { animation: swB var(--T) infinite both; }
@keyframes swA { 0%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes swB { 0%, 66% { opacity: 0; } 70%, 100% { opacity: 1; } }
[data-site-page-root] .demo.is-live .pk__c--on { animation: pkon var(--T) infinite both; }
@keyframes pkon { 0%, 2% { border-color: var(--color-border); color: var(--muted); box-shadow: none; font-weight: 400; } 5%, 94% { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px rgba(30,244,180,.4); font-weight: 500; } 99%, 100% { border-color: var(--color-border); color: var(--muted); box-shadow: none; } }
[data-site-page-root] .demo__steps li { animation: none; }
[data-site-page-root] .demo.is-live .demo__steps li { animation: stp var(--T) infinite both; animation-delay: 0s; }
[data-site-page-root] .demo.is-live .demo__steps li:nth-child(1) { animation-name: stp1; }
[data-site-page-root] .demo.is-live .demo__steps li:nth-child(2) { animation-name: stp2; }
[data-site-page-root] .demo.is-live .demo__steps li:nth-child(3) { animation-name: stp3; }
[data-site-page-root] .demo.is-live .demo__steps li:nth-child(4) { animation-name: stp4; }
[data-site-page-root] .demo.is-live .demo__steps b { animation: none; }
@keyframes stp1 { 0%, 31% { color: var(--color-primary); } 32%, 100% { color: var(--muted); } }
@keyframes stp2 { 0%, 31% { color: var(--muted); } 32%, 52% { color: var(--color-primary); } 53%, 100% { color: var(--muted); } }
@keyframes stp3 { 0%, 52% { color: var(--muted); } 53%, 67% { color: var(--color-primary); } 68%, 100% { color: var(--muted); } }
@keyframes stp4 { 0%, 67% { color: var(--muted); } 68%, 96% { color: var(--color-primary); } 99%, 100% { color: var(--muted); } }
[data-site-page-root] .demo__steps li { color: var(--muted); }
[data-site-page-root] .demo__steps li b { background: var(--color-bg); }
@keyframes dni0 { 0%, 1% { opacity: 0; transform: translateY(10px) scale(.97); } 4%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dni1 { 0%, 6% { opacity: 0; transform: translateY(10px) scale(.97); } 9%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dni2 { 0%, 11% { opacity: 0; transform: translateY(10px) scale(.97); } 14%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dni3 { 0%, 14% { opacity: 0; transform: translateY(10px) scale(.97); } 17%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dni4 { 0%, 18% { opacity: 0; transform: translateY(10px) scale(.97); } 21%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dni5 { 0%, 22% { opacity: 0; transform: translateY(10px) scale(.97); } 25%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dwi0 { 0%, 5% { opacity: 0; } 8%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes dwi1 { 0%, 10% { opacity: 0; } 13%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes dwi2 { 0%, 13% { opacity: 0; } 16%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes dwi3 { 0%, 17% { opacity: 0; } 20%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }

@media (max-width: 900px) {
  [data-site-page-root] .wf, [data-site-page-root] .demo .wf, [data-site-page-root] .wf--mini { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  [data-site-page-root] .wf .wr { display: none; }
  [data-site-page-root] .wf .nd { align-self: stretch; width: auto; }
  [data-site-page-root] .wf .nd::after { display: none; }
  [data-site-page-root] .wf .nd:not(.nd--first)::before { display: block; left: 26px; top: -25px; width: 0; height: 24px; margin: 0; border: 0; border-left: 2px dashed var(--color-accent); border-radius: 0; background: none; }
  [data-site-page-root] .wf .nd--first::before { display: none; }
  [data-site-page-root] .wf--mini .nd__s { display: block; }
  [data-site-page-root] .app__bar { flex-wrap: wrap; gap: 8px; }
  [data-site-page-root] .app__seg, [data-site-page-root] .app__live { display: none; }
  [data-site-page-root] .app__run { margin-left: auto; }
  [data-site-page-root] .app__canvas { overflow: visible; }
  [data-site-page-root] .nd--hm { display: none; }
  [data-site-page-root] .wfv .nd { width: 100%; }
  [data-site-page-root] .wfv .nd--r { width: 100%; }
  [data-site-page-root] .wv { display: none; }
  [data-site-page-root] .wfv { gap: 22px; }
  [data-site-page-root] .wfv .nd:not(:first-child)::before { display: block; left: 26px; top: -23px; width: 0; height: 22px; margin: 0; border: 0; border-left: 2px dashed var(--color-accent); border-radius: 0; background: none; }
  [data-site-page-root] .demo__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (prefers-reduced-motion: reduce) {
  [data-site-page-root] .wr__f { animation: none; stroke-dasharray: none; }
  [data-site-page-root] .app--hero .nd, [data-site-page-root] .app--hero .wv, [data-site-page-root] .app--hero .nd--out .nd__body { animation: none; }}

/* hero canvas: compact so the headline, buttons and chips stay in one screen */
[data-site-page-root] .app--hero .app__canvas { padding: 14px 16px 10px; }
[data-site-page-root] .app--hero .hv__prompt { padding: 9px 12px; font-size: 13.5px; margin-bottom: 10px; }
[data-site-page-root] .app--hero .nd { padding: 9px 12px 10px; }
[data-site-page-root] .app--hero .nd:not(.nd--out) .nd__s { display: none; }
[data-site-page-root] .app--hero .nd__t { margin-top: 5px; font-size: 13.5px; }
[data-site-page-root] .app--hero .wv { height: 22px; }
[data-site-page-root] .app--hero .nd--out .nd__body { margin-top: 8px; padding-top: 6px; }
[data-site-page-root] .app--hero .nd--out .slackmsg li { padding: 4px 0; font-size: 12.5px; }
[data-site-page-root] .app--hero .nd--out .slackmsg__h { margin-bottom: 4px; }
[data-site-page-root] .hero__visual { padding-top: 20px; padding-bottom: 20px; }
@media (max-width: 900px) { [data-site-page-root] .app--hero .nd:not(.nd--out) .nd__s { display: block; } [data-site-page-root] .app--hero .wv { display: none; }}

[data-site-page-root] .nd__k { white-space: nowrap; }
[data-site-page-root] .nd__k .st { margin-left: auto; padding-left: 6px; }
[data-site-page-root] .dn0 .st { display: none !important; }
[data-site-page-root] .st > span { padding: 1px 7px; font-size: 10px; }
[data-site-page-root] .demo .nd__k { letter-spacing: .06em; font-size: 10px; }

[data-site-page-root] .chain { flex-wrap: nowrap; }
[data-site-page-root] .chain .cn { flex: none; }
[data-site-page-root] .chain__n { margin-left: auto; padding-left: 8px; white-space: nowrap; }
@media (max-width: 420px) { [data-site-page-root] .chain { flex-wrap: wrap; row-gap: 6px; }}

[data-site-page-root] .chain { flex-wrap: wrap; row-gap: 6px; }
[data-site-page-root] .chain__n { margin-left: 8px; padding-left: 0; flex-basis: auto; }
[data-site-page-root] .tcard--lg .chain { gap: 6px 0; }
[data-site-page-root] .tcard--lg .chain__n { flex-basis: 100%; margin: 2px 0 0; }

/* steps: slimmed to a claim, three counts and the real panel */
[data-site-page-root] .lib__eg { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 30px 0 0; }
[data-site-page-root] .lib__eg li { padding: 7px 14px; border: 1px solid rgba(255,255,255,.26); border-radius: var(--radius-pill); font-size: 14px; color: #fff; background: rgba(255,255,255,.05); }
[data-site-page-root] .lib__frame { max-height: 440px; }
[data-site-page-root] .lib .lede { max-width: 44ch; }

/* walkthrough: a full-width cinema band, chapters underneath */
[data-site-page-root] .walk { background: #0b2b2b; color: #fff; }
[data-site-page-root] .walk .wrap { max-width: 1320px; }
[data-site-page-root] .walk h2, [data-site-page-root] .walk h3 { color: #fff; }
[data-site-page-root] .walk .eyebrow { color: #1ef4b4; }
[data-site-page-root] .walk .lede { color: #ebeae1; }
[data-site-page-root] .walk .head { margin-bottom: clamp(28px, 3.4vw, 44px); }
[data-site-page-root] .walk__grid { display: block; }
[data-site-page-root] .walk .facade { width: 100%; max-width: none; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
[data-site-page-root] .walk .chapters { margin-top: clamp(20px, 2.4vw, 32px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
[data-site-page-root] .walk .chapters__k { display: none; }
[data-site-page-root] .walk .chapters h3 { font: 500 12px/1.2 var(--font-body); letter-spacing: 1.12px; text-transform: uppercase; color: #bbc1f9; margin-bottom: 14px; }
[data-site-page-root] .walk .chapters ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border: 0; }
[data-site-page-root] .walk .chapters li { border: 0; }
[data-site-page-root] .walk .chapters li button { height: 100%; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.05); color: #fff; font-size: 15px; line-height: 1.3; transition: background-color .2s ease, border-color .2s ease; }
[data-site-page-root] .walk .chapters li button::before { color: #1ef4b4; }
[data-site-page-root] .walk .chapters li button:hover { background: rgba(255,255,255,.1); border-color: rgba(30,244,180,.6); color: #fff; }
[data-site-page-root] .walk .chapters li button:focus-visible { outline: 2px solid #1ef4b4; outline-offset: 2px; }
[data-site-page-root] .walk .chapters li button time { flex-basis: 100%; margin: 0; padding: 0 0 0 32px; color: #bbc1f9; }
[data-site-page-root] .walk .chapters li button.is-now { background: rgba(30,244,180,.14); border-color: #1ef4b4; color: #fff; }
[data-site-page-root] .walk .transcript { margin-top: 14px; color: #bbc1f9; font-size: 14px; }
[data-site-page-root] .walk .transcript summary { cursor: pointer; color: #fff; }
[data-site-page-root] .walk .transcript summary:focus-visible { outline: 2px solid #1ef4b4; outline-offset: 2px; }

/* compare: one clean table, our column raised */
[data-site-page-root] .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-site-page-root] .compare .head { margin-bottom: clamp(28px, 3.4vw, 44px); }
[data-site-page-root] .cmp { max-width: 1080px; }
[data-site-page-root] .cmp__t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16px; line-height: 1.4; }
[data-site-page-root] .cmp__t thead th { padding: 0 20px 16px; text-align: left; font: 500 13px/1.2 var(--font-body); letter-spacing: 1.12px; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .cmp__t thead th:first-child { width: 30%; }
[data-site-page-root] .cmp__t thead .cmp__us { color: var(--color-primary); }
[data-site-page-root] .cmp__t tbody th[scope="row"] { padding: 20px 20px 20px 0; text-align: left; font-weight: 500; color: var(--color-text); border-top: 1px solid var(--color-border); vertical-align: top; }
[data-site-page-root] .cmp__t td { padding: 20px; border-top: 1px solid var(--color-border); vertical-align: top; color: var(--muted); }
[data-site-page-root] .cmp__t td:nth-child(2) { color: var(--color-text); background: linear-gradient(180deg, color-mix(in srgb, #1ef4b4 14%, #fff), color-mix(in srgb, #c6b5ff 14%, #fff)); border-top-color: rgba(7,41,41,.08); }
[data-site-page-root] .cmp__diff td:nth-child(2) { display: table-cell; font-weight: 500; }
[data-site-page-root] .cmp__diff td:nth-child(2) .tk { display: inline-block; vertical-align: -2px; margin-right: 8px; color: var(--color-accent); }
[data-site-page-root] .cmp__diff tr:first-child td:nth-child(2) { border-radius: 16px 16px 0 0; border-top: 0; }
[data-site-page-root] .cmp__t tbody:last-child tr:last-child td:nth-child(2) { border-radius: 0 0 16px 16px; }
[data-site-page-root] .cmp__diff tr:first-child th, [data-site-page-root] .cmp__diff tr:first-child td:nth-child(3) { border-top: 0; }
[data-site-page-root] .cmp__sub th { padding: 40px 0 10px; text-align: left; font: 500 12px/1.2 var(--font-body); letter-spacing: 1.12px; text-transform: uppercase; color: var(--muted); border-top: 0; background: none; }
[data-site-page-root] .cmp__same .tk { display: inline-block; vertical-align: -2px; margin-right: 8px; color: var(--color-accent); opacity: .7; }
[data-site-page-root] .cmp__same td:nth-child(2) { font-weight: 400; }
[data-site-page-root] .cmp__note { margin-top: 22px; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
@media (max-width: 900px) {
  [data-site-page-root] .walk .chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-page-root] .cmp__t, [data-site-page-root] .cmp__t tbody, [data-site-page-root] .cmp__t tr, [data-site-page-root] .cmp__t th, [data-site-page-root] .cmp__t td { display: block; }
  [data-site-page-root] .cmp__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-site-page-root] .cmp__t tr { margin-bottom: 14px; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: #fff; }
  [data-site-page-root] .cmp__t tbody th[scope="row"] { padding: 16px 18px 6px; border: 0; }
  [data-site-page-root] .cmp__t td { padding: 10px 18px; border: 0 !important; border-radius: 0 !important; }
  [data-site-page-root] .cmp__t td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11.5px/1.2 var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  [data-site-page-root] .cmp__t td:nth-child(2)::before { color: var(--color-primary); }
  [data-site-page-root] .cmp__t td:last-child { padding-bottom: 16px; }
  [data-site-page-root] .cmp__t .cmp__sub { border: 0; background: none; margin: 18px 0 8px; }
  [data-site-page-root] .cmp__sub th { padding: 0; }}
@media (max-width: 520px) { [data-site-page-root] .walk .chapters ol { grid-template-columns: minmax(0, 1fr); }}

[data-site-page-root] .walk .chapters li button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 8px; align-content: start; }
[data-site-page-root] .walk .chapters li button time { grid-column: 2; flex-basis: auto; padding: 0; }

@media (max-width: 900px) {
  [data-site-page-root] .cmp__diff td:nth-child(2), [data-site-page-root] .cmp__same td:nth-child(2) { display: block; }}

/* ===== hero: "How to improve my GEO score?" runs as a workflow ===== */

/* how it works: two ways in */
[data-site-page-root] .paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1120px; margin: 0 auto 28px; }
[data-site-page-root] .path { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
[data-site-page-root] .path--own { background: linear-gradient(135deg, color-mix(in srgb, #1ef4b4 16%, #fff), color-mix(in srgb, #c6b5ff 18%, #fff)); border-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
[data-site-page-root] .path__k { font: 500 12px/1.2 var(--font-body); letter-spacing: 1.12px; text-transform: uppercase; color: var(--color-accent); margin: 0; }
[data-site-page-root] .path h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
[data-site-page-root] .path > p:not(.path__k):not(.chain):not(.path__n) { color: var(--muted); font-size: 16px; line-height: 1.5; }
[data-site-page-root] .path__pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 6px 0 0; }
[data-site-page-root] .path__pills li { padding: 6px 13px; border-radius: 100px; background: var(--color-bg); border: 1px solid var(--color-border); font-size: 13.5px; }
[data-site-page-root] .path .chain { margin-top: 6px; }
[data-site-page-root] .path__n { margin: 4px 0 0; font-size: 14px; color: var(--color-text); }
[data-site-page-root] .path__n b { font: 400 22px/1 var(--font-display); color: var(--color-accent); margin-right: 2px; }
[data-site-page-root] .pk__c--blank { border-style: dashed; }
[data-site-page-root] .demo__tools { max-width: 1120px; margin: 18px auto 0; text-align: center; color: var(--muted); font-size: 15px; }
[data-site-page-root] .demo__tools b { color: var(--color-text); font-weight: 500; }

/* closing band: two buttons */
[data-site-page-root] .final .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
[data-site-page-root] .btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
[data-site-page-root] .btn--ghost-light:hover { background: #fff; color: var(--color-primary); }
@media (max-width: 900px) {
  [data-site-page-root] .paths { grid-template-columns: minmax(0, 1fr); }}

@media (prefers-reduced-motion: reduce) {
  [data-site-page-root] .demo *, [data-site-page-root] .demo *::before { animation: none !important; }
  [data-site-page-root] .demo .st { display: none !important; }
  [data-site-page-root] .demo .sw-a { opacity: 0; visibility: hidden; }
  [data-site-page-root] .demo .sw-b { opacity: 1; }
  [data-site-page-root] .demo .dn5 .nd__body, [data-site-page-root] .demo .dn5 .sent { opacity: 1; }
  [data-site-page-root] .demo .scene { display: none; }}

/* ===== hero: the workflow builds itself on the canvas ===== */
[data-site-page-root] .hb { overflow: visible; padding: 14px 16px 10px; background: radial-gradient(rgba(7,41,41,.13) 1px, transparent 1.4px) 0 0 / 20px 20px, #fafaf6; }
[data-site-page-root] .app--build .hv__prompt { position: relative; margin-bottom: 12px; padding: 10px 12px; font-size: 14px; background: #fff; border: 1px solid var(--color-primary); color: var(--color-text); box-shadow: 0 8px 18px -12px rgba(7,41,41,.4); }
[data-site-page-root] .app--build .hv__ai { color: var(--color-primary); }
[data-site-page-root] .hb__gen { position: absolute; right: 10px; top: 50%; margin-top: -11px; padding: 2px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 500; background: color-mix(in srgb, #c6b5ff 40%, #fff); color: #3a2a85; opacity: 0; animation: hbgen 2.6s 2.6s both; }
@keyframes hbgen { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
[data-site-page-root] .hb__stage { position: relative; width: 100%; aspect-ratio: 600 / 420; }
[data-site-page-root] .hb__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
[data-site-page-root] .gw { fill: none; stroke: color-mix(in srgb, var(--color-primary) 38%, #fff); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
[data-site-page-root] .gf { fill: none; stroke: var(--color-accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 14; vector-effect: non-scaling-stroke; opacity: 0; animation: gfon .01s 8.2s forwards, gfl 1.4s 8.2s linear infinite; }
@keyframes gfon { to { opacity: 1; } }
@keyframes gfl { to { stroke-dashoffset: -19; } }
[data-site-page-root] .gw--ab, [data-site-page-root] .gw--ac { animation: gdraw .7s 3.6s var(--ease-in-out, ease) forwards; }
[data-site-page-root] .gw--bd { animation: gdraw .6s 5.0s ease forwards; }
[data-site-page-root] .gw--cd { animation: gdraw .6s 5.3s ease forwards; }
[data-site-page-root] .gw--de { animation: gdraw .5s 5.9s ease forwards; }
@keyframes gdraw { to { stroke-dashoffset: 0; } }
[data-site-page-root] .gn { position: absolute; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; background: #fff; border: 1px solid #dcdcd2; border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(7,41,41,.35); min-width: 0; opacity: 0; }
[data-site-page-root] .gn--trig { box-shadow: 0 8px 18px -12px rgba(7,41,41,.35), inset 3px 0 0 #1ef4b4; }
[data-site-page-root] .gn--data { box-shadow: 0 8px 18px -12px rgba(7,41,41,.35), inset 3px 0 0 #82ffda; }
[data-site-page-root] .gn--ai { box-shadow: 0 8px 18px -12px rgba(7,41,41,.35), inset 3px 0 0 #c6b5ff; }
[data-site-page-root] .gn--out { border-color: var(--color-primary); }
[data-site-page-root] .gn::before, [data-site-page-root] .gn::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--color-accent); }
[data-site-page-root] .gn::before { left: -5px; } [data-site-page-root] .gn::after { right: -5px; }
[data-site-page-root] .gn--a::before { display: none; }
[data-site-page-root] .gn--e::after { display: none; }
[data-site-page-root] .gn--e::before { top: 12%; left: 50%; margin-left: -4.5px; margin-top: -5px; }
[data-site-page-root] .gn--d::after { top: 100%; right: auto; left: 50%; margin: -4px 0 0 -4.5px; }
[data-site-page-root] .gn__k { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
[data-site-page-root] .gn__k .ic { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; flex: none; }
[data-site-page-root] .gn--trig .ic { background: #d4fdff; color: #1c6b60; }
[data-site-page-root] .gn--data .ic { background: color-mix(in srgb, #a3e3e0 55%, #fff); color: #0f4b47; }
[data-site-page-root] .gn--ai .ic { background: color-mix(in srgb, #c6b5ff 55%, #fff); color: #3a2a85; }
[data-site-page-root] .gn--out .ic { background: var(--color-primary); color: #fff; }
[data-site-page-root] .gn__ok { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); color: #fff; opacity: 0; transform: scale(.5); }
[data-site-page-root] .gn__t { margin-top: 4px; font: 500 12.5px/1.2 var(--font-body); color: var(--color-text); }
[data-site-page-root] .gn__s { margin-top: 1px; font-size: 11px; line-height: 1.3; color: var(--muted); }
[data-site-page-root] .gn--a { animation: gnpop .55s 3.0s cubic-bezier(.2,.8,.3,1) both; }
[data-site-page-root] .gn--b { animation: gnpop .55s 4.2s cubic-bezier(.2,.8,.3,1) both; }
[data-site-page-root] .gn--c { animation: gnpop .55s 4.45s cubic-bezier(.2,.8,.3,1) both; }
[data-site-page-root] .gn--d { animation: gnpop .55s 5.6s cubic-bezier(.2,.8,.3,1) both; }
[data-site-page-root] .gn--e { animation: gnpop .55s 6.3s cubic-bezier(.2,.8,.3,1) both; }
@keyframes gnpop { 0% { opacity: 0; transform: translateY(-14px) scale(.9); box-shadow: 0 0 0 0 rgba(30,244,180,0); } 60% { opacity: 1; transform: translateY(2px) scale(1.02); box-shadow: 0 0 0 7px rgba(30,244,180,.4); } 100% { opacity: 1; transform: none; } }
[data-site-page-root] .gn--a .gn__ok { animation: gok .4s 8.0s both; }
[data-site-page-root] .gn--b .gn__ok { animation: gok .4s 8.5s both; }
[data-site-page-root] .gn--c .gn__ok { animation: gok .4s 8.8s both; }
[data-site-page-root] .gn--d .gn__ok { animation: gok .4s 9.5s both; }
[data-site-page-root] .gn--e .gn__ok { animation: gok .4s 10.3s both; }
@keyframes gok { to { opacity: 1; transform: none; } }
[data-site-page-root] .gn__sl { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); }
[data-site-page-root] .gn__slh { display: flex; align-items: center; gap: 6px; font-size: 10.5px; margin-bottom: 4px; }
[data-site-page-root] .gn__slh .av { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #c6b5ff, #1ef4b4); flex: none; }
[data-site-page-root] .gn__slh span:last-child { margin-left: auto; color: var(--muted); white-space: nowrap; }
[data-site-page-root] .gn__sc { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--muted); }
[data-site-page-root] .gn__sc b { grid-column: 2; grid-row: 1; font: 400 22px/1 var(--font-display); color: var(--color-text); }
[data-site-page-root] .gn__s0 { animation: hgo .01s 10.4s forwards; }
[data-site-page-root] .gn__s1 { opacity: 0; color: var(--color-accent) !important; animation: hgi .01s 10.4s forwards; }
@keyframes hgo { to { opacity: 0; } } @keyframes hgi { to { opacity: 1; } }
[data-site-page-root] .gn__fx { margin-top: 3px; font-size: 10.5px; color: var(--muted); }
[data-site-page-root] .hb__run { animation: hbrun .6s 7.4s both; }
@keyframes hbrun { 0%, 100% { transform: none; box-shadow: none; } 45% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(30,244,180,.45); } }
[data-site-page-root] .app--build .app__bar .app__seg { display: inline-flex; }
[data-site-page-root] .app--build .app__note { padding: 7px 14px; }
[data-site-page-root] .gn--a { left: 2.000%; top: 40.952%; width: 25%; height: 18.095%; }
[data-site-page-root] .gn--b { left: 37.500%; top: 12.381%; width: 25%; height: 18.095%; }
[data-site-page-root] .gn--c { left: 37.500%; top: 69.524%; width: 25%; height: 18.095%; }
[data-site-page-root] .gn--d { left: 73.000%; top: 26.190%; width: 25%; height: 18.095%; }
[data-site-page-root] .gn--e { left: 73.000%; top: 62.381%; width: 25%; height: 28.095%; }

@media (max-width: 640px), (min-width: 861px) and (max-width: 1180px) {
  [data-site-page-root] .hb__stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 18px; }
  [data-site-page-root] .hb__wires { display: none; }
  [data-site-page-root] .gn { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; padding: 10px 12px; }
  [data-site-page-root] .gn::before, [data-site-page-root] .gn::after { display: none; }
  [data-site-page-root] .gn:not(.gn--a)::before { display: block; left: 24px; right: auto; top: -19px; width: 0; height: 18px; margin: 0; border: 0; border-left: 2px dashed var(--color-accent); border-radius: 0; background: none; }
  [data-site-page-root] .gn--c { display: none; }
  [data-site-page-root] .gn__t { font-size: 13.5px; } [data-site-page-root] .gn__s { font-size: 12px; }
  [data-site-page-root] .app--build .app__seg { display: none; }}
@media (prefers-reduced-motion: reduce) {
  [data-site-page-root] .app--build *, [data-site-page-root] .app--build *::before { animation: none !important; }
  [data-site-page-root] .gn { opacity: 1; } [data-site-page-root] .gw { stroke-dashoffset: 0; }
  [data-site-page-root] .gn__ok { opacity: 1; transform: none; } [data-site-page-root] .gn__s0, [data-site-page-root] .hb__gen { opacity: 0; } [data-site-page-root] .gn__s1 { opacity: 1; } [data-site-page-root] .gf { opacity: 0; }}

[data-site-page-root] .hb__stage { aspect-ratio: 600 / 460; }
[data-site-page-root] .gn--a { left: 2.000%; top: 41.739%; width: 25.000%; height: 16.522%; }
[data-site-page-root] .gn--b { left: 37.500%; top: 8.696%; width: 25.000%; height: 16.522%; }
[data-site-page-root] .gn--c { left: 37.500%; top: 74.783%; width: 25.000%; height: 16.522%; }
[data-site-page-root] .gn--d { left: 73.333%; top: 23.913%; width: 25.000%; height: 18.696%; }
[data-site-page-root] .gn--e { left: 73.333%; top: 56.957%; width: 25.000%; height: 38.261%; }
[data-site-page-root] .gn--e { justify-content: flex-start; }
[data-site-page-root] .gn--e::before { top: -5px; left: 50%; margin: 0 0 0 -4.5px; }
[data-site-page-root] .gn--d::after { top: auto; bottom: -5px; right: auto; left: 50%; margin: 0 0 0 -4.5px; }
[data-site-page-root] .gn__sc b { font-size: 20px; }
[data-site-page-root] .gn__slh b { font-weight: 500; line-height: 1.15; }
@media (max-width: 640px), (min-width: 861px) and (max-width: 1180px) { [data-site-page-root] .hb__stage { aspect-ratio: auto; } [data-site-page-root] .gn--e::before { top: -19px; left: 24px; margin: 0; }}

[data-site-page-root] .gn--e { height: 41%; }
[data-site-page-root] .gn__slh span:last-child { display: none; }
[data-site-page-root] .gn__slh b { font-size: 10.5px; }
@media (max-width: 640px), (min-width: 861px) and (max-width: 1180px) { [data-site-page-root] .gn--e { height: auto !important; } [data-site-page-root] .gn__slh span:last-child { display: inline; }}

/* ===== use cases: pick a bottleneck, watch the workflow build ===== */
[data-site-page-root] .bn .head { margin-bottom: 28px; }
[data-site-page-root] .bn__list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
[data-site-page-root] .bn__list button { min-height: 48px; padding: 10px 18px; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font: 400 15.5px/1.25 var(--font-body); text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
[data-site-page-root] .bn__list button:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
[data-site-page-root] .bn__list button[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 500; }
[data-site-page-root] .bn__list button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-site-page-root] .bn__panel[hidden] { display: none; }
[data-site-page-root] .bn__panel { border-radius: var(--radius-lg); padding: clamp(16px, 2.6vw, 32px); background: linear-gradient(135deg, color-mix(in srgb, #1ef4b4 14%, #fff), color-mix(in srgb, #c6b5ff 16%, #fff)); }
[data-site-page-root] .bn__lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
[data-site-page-root] .bn__q { font: 400 clamp(1.125rem, 1.8vw, 1.5rem)/1.3 var(--font-display); max-width: 56ch; }
[data-site-page-root] .bn__panel .app { max-width: 1120px; margin-inline: auto; }
[data-site-page-root] .bn__panel .nd { animation: bnin .5s calc(var(--k) * .32s) cubic-bezier(.2,.8,.3,1) both; }
[data-site-page-root] .bn__panel .wr { animation: bnwire .6s calc(var(--k) * .32s - .12s) ease both; }
@keyframes bnin { from { opacity: 0; transform: translateY(-12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bnwire { from { opacity: 0; } to { opacity: 1; } }
[data-site-page-root] .bn__more { margin-top: 24px; color: var(--muted); font-size: 16px; }
@media (max-width: 760px) {
  [data-site-page-root] .bn__list { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 0 20px 6px; scrollbar-width: none; }
  [data-site-page-root] .bn__list button { flex: none; max-width: 78vw; }
  [data-site-page-root] .bn__panel { padding: 14px; }}
@media (prefers-reduced-motion: reduce) { [data-site-page-root] .bn__panel .nd, [data-site-page-root] .bn__panel .wr { animation: none; }}

}

@media (max-width: 860px) { [data-site-page-root] .bn__more .textlink { display: inline-flex; align-items: center; min-height: 44px; } }
@media (min-width: 641px) and (max-width: 1180px) { [data-site-page-root] .app--build .app__seg { display: none; } }

/* ===== walkthrough thumbnail: the two templates the video covers ===== */
[data-site-page-root] .facade { container-type: inline-size; }

@media (min-width: 1181px), (min-width: 641px) and (max-width: 860px) {
  [data-site-page-root] .hb__stage { aspect-ratio: 600 / 540; }
  [data-site-page-root] .gn--a { left: 1.000%; top: 40.000%; width: 28.000%; height: 18.519%; padding: 10px 12px; }
  [data-site-page-root] .gn--b { left: 36.000%; top: 1.852%; width: 28.000%; height: 20.741%; padding: 10px 12px; }
  [data-site-page-root] .gn--c { left: 36.000%; top: 77.778%; width: 28.000%; height: 20.741%; padding: 10px 12px; }
  [data-site-page-root] .gn--d { left: 71.000%; top: 22.222%; width: 28.000%; height: 22.222%; padding: 10px 12px; }
  [data-site-page-root] .gn--e { left: 71.000%; top: 55.556%; width: 28.000%; height: 42.963%; padding: 10px 12px; }
  [data-site-page-root] .gn__t { font-size: 13px; }
  [data-site-page-root] .gn__s { font-size: 11.5px; }
}
@media (min-width: 641px) and (max-width: 1340px) { [data-site-page-root] .app--build .app__seg { display: none; } }

/* ===== walkthrough thumbnail: "Build your own workflows. Win AI search." ===== */
[data-site-page-root] .facade { --px: clamp(18px, 5.5cqw, 72px); --ps: clamp(52px, 8.5cqw, 88px); }
[data-site-page-root] .facade__cover { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(8px, 3cqw, 40px); align-items: center; padding: clamp(14px, 4cqw, 48px) var(--px); background: radial-gradient(60% 90% at 10% 0%, rgba(30,244,180,.30), transparent 70%), radial-gradient(55% 80% at 100% 100%, rgba(198,181,255,.30), transparent 70%), radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 22px 22px, #072929; border-radius: var(--radius-lg); pointer-events: none; transition: opacity .2s ease; }
[data-site-page-root] .facade.is-playing .facade__cover { opacity: 0; visibility: hidden; }
[data-site-page-root] .vt__copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--ps) + clamp(6px, 2cqw, 24px)); min-width: 0; }
[data-site-page-root] .vt__eyebrow { margin: 0 0 clamp(4px, 1.2cqw, 14px); font: 500 clamp(8px, 1.4cqw, 13px)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #82ffda; }
[data-site-page-root] .vt__h { margin: 0; font: 400 clamp(17px, 4.9cqw, 58px)/1.08 var(--font-display); color: #fff; letter-spacing: -.01em; }
[data-site-page-root] .vt__h span { color: #1ef4b4; }
[data-site-page-root] .vt__watch { position: absolute; left: calc(var(--px) + var(--ps) + clamp(10px, 1.8cqw, 20px)); bottom: calc(clamp(14px, 4cqw, 48px) + var(--ps) / 2 - .75em); margin: 0; font: 500 clamp(10px, 1.6cqw, 15px)/1.5 var(--font-body); color: rgba(255,255,255,.85); white-space: nowrap; }
[data-site-page-root] .facade__play { inset: auto !important; left: var(--px) !important; bottom: clamp(14px, 4cqw, 48px) !important; right: auto !important; top: auto !important; margin: 0 !important; width: var(--ps); height: var(--ps); }
[data-site-page-root] .vt__graph { display: flex; flex-direction: column; align-items: stretch; justify-content: center; max-width: 340px; width: 100%; margin-inline: auto; padding-top: clamp(14px, 4cqw, 40px); }
[data-site-page-root] .vt__graph b { align-self: flex-start; width: 0; height: clamp(8px, 1.9cqw, 22px); margin-left: clamp(14px, 2.8cqw, 30px); border-left: 2px dashed rgba(130,255,218,.65); }
[data-site-page-root] .vt__n { display: flex; align-items: center; gap: clamp(6px, 1.2cqw, 12px); padding: clamp(5px, 1.2cqw, 13px) clamp(8px, 1.8cqw, 18px); border-radius: clamp(8px, 1.4cqw, 14px); background: rgba(255,255,255,.95); color: var(--color-primary); font: 500 clamp(9px, 1.7cqw, 16px)/1.2 var(--font-body); box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); }
[data-site-page-root] .vt__n i { flex: none; display: grid; place-items: center; width: clamp(9px, 1.7cqw, 18px); height: clamp(9px, 1.7cqw, 18px); border-radius: 50%; background: #fff; border: 2px solid var(--color-accent); }
[data-site-page-root] .vt__n--ai i { border-color: #8d74ff; }
[data-site-page-root] .vt__n--out { background: #1ef4b4; }
[data-site-page-root] .vt__n--out i { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-site-page-root] .vt__n--out i svg { width: 70%; height: 70%; }
@media (max-width: 520px) {
  [data-site-page-root] .vt__graph { display: none; }
  [data-site-page-root] .facade__cover { grid-template-columns: minmax(0, 1fr); }
  [data-site-page-root] .facade { --ps: 46px; --px: 16px; }
  [data-site-page-root] .facade__cover { padding: 52px var(--px) 14px; align-items: start; }
  [data-site-page-root] .vt__copy { justify-content: flex-start; padding-bottom: 0; }
  [data-site-page-root] .vt__eyebrow { display: none; }
  [data-site-page-root] .vt__h { font-size: 19px; }
  [data-site-page-root] .vt__watch { font-size: 12px; bottom: 14px; margin-bottom: calc(var(--ps) / 2 - .75em); }
}
[data-site-page-root] .paths { max-width: none; margin-inline: 0; }
[data-site-page-root] .path__cta { align-self: flex-start; margin-top: auto; }
[data-site-page-root] .path > :nth-last-child(2) { margin-bottom: 8px; }
[data-site-page-root] .path--own .btn--secondary { background: #fff; }

/* ===== Try it: describe the job, run it in the product ===== */
@media (max-width: 640px) {
      
}

/* ===== use cases as a spreadsheet (like the product's Sheet view) ===== */
[data-site-page-root] .bn__panel { background: radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--t1, #d4fdff) 70%, #fff), transparent 70%), radial-gradient(55% 80% at 100% 100%, color-mix(in srgb, var(--t2, #c6b5ff) 60%, #fff), transparent 70%), #fafaf6; }
[data-site-page-root] .bn__panel .app { overflow: visible; }
[data-site-page-root] .sx__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--color-border); background: #fff; font-size: 12.5px; color: var(--muted); }
[data-site-page-root] .sx__tools span { padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 8px; }
[data-site-page-root] .sx__tools .sx__add { margin-left: auto; color: var(--color-text); }
[data-site-page-root] .sx { position: relative; background: #fff; }
[data-site-page-root] .sx__scroll { overflow-x: auto; scrollbar-width: thin; }
[data-site-page-root] .sx__grid { display: grid; min-width: 720px; border-left: 0; }
[data-site-page-root] .sx__h, [data-site-page-root] .sx__n, [data-site-page-root] .sx__c { border-right: 1px solid #e6e6dd; border-bottom: 1px solid #e6e6dd; padding: 10px 12px; font-size: 13px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
[data-site-page-root] .sx__h { display: flex; align-items: center; gap: 8px; background: #f4f4ef; color: var(--color-text); font-weight: 500; font-size: 12.5px; animation: sxhead .45s calc(var(--c) * .5s) cubic-bezier(.2,.8,.3,1) both; }
[data-site-page-root] .sx__h i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fff; border: 1px solid #dcdcd2; }
[data-site-page-root] .sx__h--data i { background: color-mix(in srgb, #a3e3e0 55%, #fff); color: #0f4b47; border-color: transparent; }
[data-site-page-root] .sx__h--ai i { background: color-mix(in srgb, #c6b5ff 55%, #fff); color: #3a2a85; border-color: transparent; }
[data-site-page-root] .sx__h--out i { background: var(--color-primary); color: #fff; border-color: transparent; }
[data-site-page-root] .sx__n { background: #f4f4ef; color: var(--muted); font-size: 12px; text-align: center; padding-inline: 0; }
[data-site-page-root] .sx__c { color: var(--color-text); }
[data-site-page-root] .sx__c--e { min-height: 40px; }
[data-site-page-root] .sx__c:not(.sx__c--e) { animation: sxfill .5s calc(var(--c) * .5s + var(--r) * .14s + .35s) both; }
[data-site-page-root] .sx__c--data { background: color-mix(in srgb, #a3e3e0 14%, #fff); }
[data-site-page-root] .sx__c--ai { background: color-mix(in srgb, #c6b5ff 16%, #fff); }
[data-site-page-root] .sx__sent { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 100px; font-style: normal; font-size: 12px; font-weight: 500; background: var(--color-tint-teal); color: var(--color-accent); white-space: nowrap; }
@keyframes sxhead { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sxfill { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
[data-site-page-root] .sx__out { position: absolute; right: 18px; bottom: 16px; width: min(400px, 42%); padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); box-shadow: 0 28px 60px -22px rgba(7,41,41,.55); animation: sxout .6s 3.4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes sxout { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
[data-site-page-root] .sx__outh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13.5px; }
[data-site-page-root] .sx__outh b { font-weight: 500; }
[data-site-page-root] .sx__av { flex: none; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #c6b5ff, #1ef4b4); }
[data-site-page-root] .sx__chan { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted); font-size: 11.5px; }
[data-site-page-root] .sx__out ul { list-style: none; margin: 0; padding: 0; }
[data-site-page-root] .sx__out li { padding: 7px 0; border-top: 1px solid var(--color-border); font-size: 13.5px; line-height: 1.35; }
@media (max-width: 1100px) {
  [data-site-page-root] .sx__out { position: static; width: auto; margin: 14px; }
}
@media (prefers-reduced-motion: reduce) { [data-site-page-root] .sx__h, [data-site-page-root] .sx__c, [data-site-page-root] .sx__out { animation: none !important; } }
[data-site-page-root] .sx__out { bottom: 14px; padding: 12px 16px; }
[data-site-page-root] .sx__out li { padding: 5px 0; }

/* ===== Clay-style staging: grainy plate, window breaking out, floating cards ===== */
[data-site-page-root] .bn__panel { padding: 0; background: none; border-radius: 0; }
[data-site-page-root] .bn__lead { margin-bottom: 26px; }
[data-site-page-root] .sx__stage { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); position: relative; padding: 64px clamp(14px, 3.2vw, 44px) 40px; }
[data-site-page-root] .sx__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 78px; bottom: 0; border-radius: 28px; background: var(--g), linear-gradient(160deg, var(--t1, #d4fdff), color-mix(in srgb, var(--t2, #c6b5ff) 90%, #fff) 70%, color-mix(in srgb, var(--t2, #c6b5ff) 70%, #fff)); background-blend-mode: soft-light, normal; }
[data-site-page-root] .sx__stage .app { position: relative; z-index: 1; max-width: none; margin: 0; border: 1px solid rgba(7,41,41,.08); border-bottom: 0; background: linear-gradient(#fff 60%, rgba(255,255,255,.55)); box-shadow: 0 30px 70px -28px rgba(7,41,41,.35); }
[data-site-page-root] .sx__stage .sx { background: none; }
[data-site-page-root] .sx__stage .sx__scroll { -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); }
[data-site-page-root] .sx__stage .sx__grid { padding-bottom: 36px; }
[data-site-page-root] .sx__stage .app__note { position: relative; z-index: 2; }
/* highlighted AI column, like Clay's purple Preview column */
[data-site-page-root] .sx__h--ai { background: #b9a6f6; color: #fff; }
[data-site-page-root] .sx__h--ai i { background: rgba(255,255,255,.28); color: #fff; border-color: transparent; }
[data-site-page-root] .sx__c--ai { background: linear-gradient(#ece6ff, #f6f2ff); }
/* floating status card */
[data-site-page-root] .sx__status { position: absolute; z-index: 3; left: clamp(6px, 1.4vw, 20px); bottom: 12px; width: 268px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(7,41,41,.08); box-shadow: 0 30px 60px -20px rgba(7,41,41,.5), 0 0 0 6px rgba(255,255,255,.45); animation: sxout .6s 2.6s cubic-bezier(.2,.8,.3,1) both; }
[data-site-page-root] .sx__sh { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
[data-site-page-root] .sx__sh b { font-weight: 500; }
[data-site-page-root] .sx__sh small { margin-left: auto; font-size: 11px; color: var(--muted); }
[data-site-page-root] .sx__status ul { list-style: none; margin: 0; padding: 0; }
[data-site-page-root] .sx__status li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--color-border); font-size: 13.5px; line-height: 1.3; }
[data-site-page-root] .sx__status li i { margin-left: auto; order: 2; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
[data-site-page-root] .sx__status li i.ok { background: #1ef4b4; color: var(--color-primary); }
[data-site-page-root] .sx__status li i.wait { color: var(--muted); }
[data-site-page-root] .sx__spin { animation: sxspin 1.1s steps(8) infinite; }
@keyframes sxspin { to { transform: rotate(360deg); } }
[data-site-page-root] .sx__sent--wait { background: #fff; border: 1px solid var(--color-border); color: var(--muted); }
/* "Send to…" pill joined to the output card by a dotted line */
[data-site-page-root] .sx__send { position: absolute; z-index: 3; top: 6px; right: clamp(14px, 3.2vw, 44px); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -16px rgba(7,41,41,.5), 0 0 0 5px rgba(255,255,255,.5); font-size: 15px; color: var(--color-primary); }
[data-site-page-root] .sx__send b { font-weight: 500; }
[data-site-page-root] .sx__dots { position: absolute; z-index: 0; top: 52px; bottom: 120px; right: calc(clamp(14px, 3.2vw, 44px) / 2 + 2px); border-right: 3px dotted rgba(7,41,41,.5); }
[data-site-page-root] .sx__stage .sx__out { z-index: 3; right: -12px; bottom: 16px; box-shadow: 0 30px 60px -20px rgba(7,41,41,.5), 0 0 0 6px rgba(255,255,255,.45); }
@media (max-width: 1100px) {
  [data-site-page-root] .sx__stage { padding: 52px 10px 28px; }
  [data-site-page-root] .sx__dots { display: none; }
  [data-site-page-root] .sx__status { position: static; width: auto; margin: 0 14px 14px; }
  [data-site-page-root] .sx__stage .sx__out { right: auto; }
  [data-site-page-root] .sx__stage .sx__scroll { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 640px) { [data-site-page-root] .sx__send { right: 10px; top: 4px; font-size: 13px; padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { [data-site-page-root] .sx__status, [data-site-page-root] .sx__spin { animation: none !important; } }
[data-site-page-root] .bn__lead { padding-inline: clamp(2px, 1vw, 8px); }
[data-site-page-root] .sx__stage .app__note { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); z-index: 4; margin: 0; padding: 0; background: none; border: 0; white-space: nowrap; font-size: 12px; color: var(--color-primary); opacity: .75; }
[data-site-page-root] .sx__dots { top: 50px; bottom: auto; height: 30px; right: calc(clamp(14px, 3.2vw, 44px) + 26px); }
@media (max-width: 1100px) { [data-site-page-root] .sx__stage .app__note { position: static; transform: none; display: block; padding: 10px 14px; text-align: center; white-space: normal; } }

/* ===== hero: three workflows build one after another ===== */
[data-site-page-root] .hb__scene { display: none; }
[data-site-page-root] .hb__scene.is-on { display: block; }
[data-site-page-root] .gn__ck { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; }
[data-site-page-root] .gn__ck li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.25; color: var(--color-text); opacity: 0; animation: gckin .4s calc(10.5s + var(--k) * .45s) both; }
[data-site-page-root] .gn__ck i { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #1ef4b4; color: var(--color-primary); }
@keyframes gckin { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
[data-site-page-root] .hb__tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-left: 0; }
[data-site-page-root] .hb__tab { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 10px 14px 12px; border-radius: 14px; border: 1px solid rgba(7,41,41,.14); background: rgba(255,255,255,.7); color: var(--color-text); text-align: left; cursor: pointer; font: inherit; transition: background-color .2s ease, border-color .2s ease; }
[data-site-page-root] .hb__tab b { font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--color-primary); }
[data-site-page-root] .hb__tab span { font-size: 12px; line-height: 1.25; color: var(--muted); }
[data-site-page-root] .hb__tab:hover { background: #fff; }
[data-site-page-root] .hb__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-site-page-root] .hb__tab.is-on { background: #fff; border-color: var(--color-primary); }
[data-site-page-root] .hb__tab i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #1ef4b4; }
[data-site-page-root] .hb__tab.is-on i { animation: hbprog 14.5s linear forwards; }
[data-site-page-root] .hb__tab.is-on.is-manual i { animation: none; width: 100%; }
@keyframes hbprog { to { width: 100%; } }
@media (max-width: 640px) {
  [data-site-page-root] .hb__tabs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  [data-site-page-root] .hb__tab { min-height: 44px; flex-direction: row; align-items: center; gap: 10px; padding: 8px 14px 10px; }
  [data-site-page-root] .hb__tab span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-site-page-root] .gn__ck li { opacity: 1; animation: none !important; }
  [data-site-page-root] .hb__tab.is-on i { animation: none !important; width: 100%; }
}
[data-site-page-root] .app--build .app__draft { display: none; }
[data-site-page-root] .app--build .app__name { overflow: visible; text-overflow: clip; white-space: nowrap; }

/* report tab as a canvas on the same plate */
[data-site-page-root] .sx__stage--canvas { padding-top: 34px; }
[data-site-page-root] .sx__stage--canvas::before { top: 60px; }
[data-site-page-root] .sx__stage--canvas .app { max-width: 780px; margin-inline: auto; border-bottom: 1px solid rgba(7,41,41,.08); background: #fff; }
[data-site-page-root] .sx__stage--canvas .app__note { position: static; transform: none; display: block; padding: 8px 14px; text-align: center; white-space: normal; z-index: 1; }


/* ===== New agents: Content Creation Agent + Landing Page Optimisation Agent ===== */
[data-site-page-root] .k5sec { padding-block: clamp(44px, 5vw, 72px); background: radial-gradient(48% 50% at 0% 0%, color-mix(in srgb, #c6b5ff 26%, transparent), transparent 70%), radial-gradient(42% 50% at 100% 100%, color-mix(in srgb, #1ef4b4 16%, transparent), transparent 70%), var(--color-tint-warm); }
[data-site-page-root] .k5__head { text-align: center; max-width: 760px; margin: 0 auto clamp(22px, 3vw, 36px); }
[data-site-page-root] .k5__head h2 { margin: 6px 0 10px; color: var(--color-primary); font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.05; }
[data-site-page-root] .k5__lede { margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); line-height: 1.4; color: var(--color-text); }
[data-site-page-root] .k5__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1120px; margin-inline: auto; }
[data-site-page-root] .k5 { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: clamp(20px, 2.2vw, 30px); border-radius: 28px; background: #fff; border: 1px solid rgba(7,41,41,.08); box-shadow: 0 2px 16px rgba(7,41,41,.06), 0 40px 70px -50px rgba(7,41,41,.45); }
[data-site-page-root] .k5__top { display: flex; align-items: center; gap: 14px; }
[data-site-page-root] .k5__ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #c6b5ff, #1ef4b4); color: var(--color-primary); }
[data-site-page-root] .k5__new { display: inline-block; padding: 2px 10px; border-radius: 100px; background: #1ef4b4; color: var(--color-primary); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
[data-site-page-root] .k5 h3 { margin: 6px 0 0; font: 400 clamp(1.45rem, 2vw, 1.8rem)/1.1 var(--font-display); color: var(--color-primary); }
[data-site-page-root] .k5__job { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.35; font-weight: 500; color: var(--color-primary); }
[data-site-page-root] .k5__plate { padding: clamp(14px, 1.8vw, 22px); border-radius: 22px; background: linear-gradient(150deg, #cdbdff 0%, #d9d3ff 40%, #d4fdff 100%); }
[data-site-page-root] .k5--pg .k5__plate { background: linear-gradient(150deg, #bdf3e3 0%, #d4fdff 45%, #d9d3ff 100%); }
[data-site-page-root] .k5__sheet { border-radius: 14px; background: #fff; border: 1px solid rgba(7,41,41,.08); box-shadow: 0 24px 48px -28px rgba(7,41,41,.45); overflow: hidden; }
[data-site-page-root] .k5__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--color-border); min-width: 0; }
[data-site-page-root] .k5__bar b { margin-right: auto; font: 400 15px/1.2 var(--font-display); color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-site-page-root] .k5__csv { padding: 3px 10px; border: 1px solid #1ef4b4; border-radius: 8px; background: color-mix(in srgb, #1ef4b4 14%, #fff); font-size: 11.5px; font-weight: 500; color: var(--color-primary); white-space: nowrap; }
[data-site-page-root] .k5__go { padding: 5px 12px; border-radius: 100px; background: var(--color-primary); color: #fff; font-size: 11.5px; white-space: nowrap; }
[data-site-page-root] .k5__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
[data-site-page-root] .k5__h, [data-site-page-root] .k5__c { display: flex; align-items: center; padding: 0 12px; min-height: 48px; font-size: 13px; line-height: 1.25; border-bottom: 1px solid #efefe9; min-width: 0; }
[data-site-page-root] .k5__h { min-height: 38px; background: #f8f7f4; font-size: 12px; font-weight: 500; color: var(--muted); }
[data-site-page-root] .k5__h--ag { background: #b9a4f5; color: #fff; }
[data-site-page-root] .k5--pg .k5__h--ag { background: #4fcfb0; color: #04302d; }
[data-site-page-root] .k5__c:nth-last-child(-n+3) { border-bottom: 0; }
[data-site-page-root] .k5__c--ag { background: linear-gradient(90deg, rgba(185,164,245,.16), rgba(185,164,245,.05)); }
[data-site-page-root] .k5--pg .k5__c--ag { background: linear-gradient(90deg, rgba(79,207,176,.18), rgba(79,207,176,.05)); }
[data-site-page-root] .k5__ok { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--color-primary); }
[data-site-page-root] .k5__ok i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1ef4b4; color: var(--color-primary); }
[data-site-page-root] .k5__view { display: inline-block; padding: 4px 11px; border-radius: 100px; border: 1px solid rgba(7,41,41,.18); background: #fff; font-size: 12px; font-weight: 500; color: var(--color-primary); white-space: nowrap; }
[data-site-page-root] .k5__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
[data-site-page-root] .k5__ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--color-primary); }
[data-site-page-root] .k5__ticks i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1ef4b4; color: var(--color-primary); }
[data-site-page-root] .k5--pg .k5__ticks i { background: #c6b5ff; }
[data-site-page-root] .k5__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 20px; margin-top: clamp(20px, 2.6vw, 32px); }
[data-site-page-root] .k5__foot p { margin: 0; font-size: 1rem; color: var(--color-text); }
/* the rows finish one after another */
html[data-reveal-ready] [data-site-page-root] .k5 .k5__c--ag { opacity: .15; }
html[data-reveal-ready] [data-site-page-root] .k5.is-in .k5__c--ag { animation: k5fill .5s calc(.6s + var(--r) * .35s) forwards; }
@keyframes k5fill { to { opacity: 1; } }
@media (max-width: 900px) { [data-site-page-root] .k5__grid2 { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 520px) {
  [data-site-page-root] .k5 { border-radius: 24px; }
  [data-site-page-root] .k5__h, [data-site-page-root] .k5__c { padding: 0 8px; font-size: 12px; }
  [data-site-page-root] .k5__ok i, [data-site-page-root] .k5__csv { display: none; }
  [data-site-page-root] .k5__view { padding: 4px 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { html[data-reveal-ready] [data-site-page-root] .k5 .k5__c--ag { animation: none !important; opacity: 1 !important; } }

/* fit one screen, align both cards */
[data-site-page-root] .k5sec { padding-block: clamp(32px, 3.6vw, 52px); }
[data-site-page-root] .k5__head { margin-bottom: clamp(16px, 2vw, 24px); }
[data-site-page-root] .k5__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 8px; }
[data-site-page-root] .k5 { gap: 12px; padding: clamp(18px, 1.8vw, 24px); }
@media (min-width: 901px) {
  [data-site-page-root] .k5__top { min-height: 66px; }
  [data-site-page-root] .k5__job { min-height: 1.35em; }
}
[data-site-page-root] .k5__plate { padding: 14px; }
[data-site-page-root] .k5__h, [data-site-page-root] .k5__c { min-height: 42px; }
[data-site-page-root] .k5__h { min-height: 34px; }
[data-site-page-root] .k5__foot { margin-top: 18px; }
@media (max-width: 520px) {
  [data-site-page-root] .k5__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr); }
  [data-site-page-root] .k5__view { padding: 3px 7px; font-size: 10.5px; }
  [data-site-page-root] .k5__ok { font-size: 11.5px; }
}

/* compare: grouped, strengths first */
[data-site-page-root] .cmp__diff .cmp__sub th { padding: 36px 0 12px; border-top: 0; color: var(--color-primary); }
[data-site-page-root] .cmp__diff:first-of-type .cmp__sub th { padding-top: 8px; }
[data-site-page-root] .cmp__diff .cmp__sub + tr td:nth-child(2) { border-radius: 16px 16px 0 0; border-top: 0; }
[data-site-page-root] .cmp__diff .cmp__sub + tr th, [data-site-page-root] .cmp__diff .cmp__sub + tr td:nth-child(3) { border-top: 0; }
[data-site-page-root] .cmp__diff tr:last-child td:nth-child(2) { border-radius: 0 0 16px 16px; }
[data-site-page-root] .cmp__diff .cmp__sub + tr:last-child td:nth-child(2) { border-radius: 16px; }
@media (max-width: 720px) {
  [data-site-page-root] .cmp__diff .cmp__sub th, [data-site-page-root] .cmp__diff:first-of-type .cmp__sub th { padding: 0; }
  [data-site-page-root] .cmp__diff .cmp__sub + tr td:nth-child(2), [data-site-page-root] .cmp__diff tr:last-child td:nth-child(2) { border-radius: 0 !important; }
}

/* agents: one palette. Dark teal for structure, one soft mint for "done". No gradients, no purple. */
[data-site-page-root] .k5sec { background: var(--color-tint-warm); }
[data-site-page-root] .k5 { box-shadow: 0 1px 2px rgba(7,41,41,.04), 0 24px 48px -36px rgba(7,41,41,.28); border-color: rgba(7,41,41,.08); }
[data-site-page-root] .k5__ic { background: var(--color-primary); color: #1ef4b4; }
[data-site-page-root] .k5__new { background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .k5__plate, [data-site-page-root] .k5--pg .k5__plate { background: var(--color-tint-warm); border: 1px solid rgba(7,41,41,.06); }
[data-site-page-root] .k5__sheet { box-shadow: 0 1px 2px rgba(7,41,41,.05), 0 12px 28px -20px rgba(7,41,41,.3); border-color: rgba(7,41,41,.1); }
[data-site-page-root] .k5__csv { border-color: rgba(7,41,41,.18); background: #fff; color: var(--color-primary); }
[data-site-page-root] .k5__h { background: #fff; border-bottom-color: rgba(7,41,41,.12); }
[data-site-page-root] .k5__h--ag, [data-site-page-root] .k5--pg .k5__h--ag { background: var(--color-primary); color: #fff; }
[data-site-page-root] .k5__c--ag, [data-site-page-root] .k5--pg .k5__c--ag { background: color-mix(in srgb, #1ef4b4 7%, #fff); }
[data-site-page-root] .k5__ok i, [data-site-page-root] .k5__ticks i, [data-site-page-root] .k5--pg .k5__ticks i { background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .k5__view { border-color: rgba(7,41,41,.16);  }
/* agents: two cards, each a small workflow canvas that builds step by step */
[data-site-page-root] .k5__ic { position: relative; width: 56px; height: 56px; border-radius: 18px; }
[data-site-page-root] .k5__bdg { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1ef4b4; color: var(--color-primary); border: 2px solid #fff; }
[data-site-page-root] .k5__plate { padding: 0; background: none; border: 0; }
[data-site-page-root] .k5__sheet { border-radius: 16px; background: #fff; border: 1px solid rgba(7,41,41,.1); box-shadow: 0 1px 2px rgba(7,41,41,.05), 0 12px 28px -20px rgba(7,41,41,.3); overflow: hidden; }
[data-site-page-root] .k5w { padding: 22px 16px 24px; background: radial-gradient(rgba(7,41,41,.13) 1px, transparent 1.4px) 0 0 / 18px 18px, #fafaf6; }
[data-site-page-root] .k5w__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
[data-site-page-root] .k5w__n { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 10px 10px; border-radius: 12px; background: #fff; border: 1px solid #dcdcd2; box-shadow: 0 8px 18px -12px rgba(7,41,41,.35), inset 3px 0 0 #1ef4b4; }
[data-site-page-root] .k5w__n--out { border-color: var(--color-primary); }
[data-site-page-root] .k5w__n::before, [data-site-page-root] .k5w__n::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--color-accent); z-index: 1; }
[data-site-page-root] .k5w__n::before { left: -5px; } [data-site-page-root] .k5w__n::after { right: -5px; }
[data-site-page-root] .k5w__n:first-child::before, [data-site-page-root] .k5w__n:last-child::after { display: none; }
[data-site-page-root] .k5w__k { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
[data-site-page-root] .k5w__k i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--color-tint-teal); color: var(--color-accent); }
[data-site-page-root] .k5w__n b { margin-top: 5px; font: 400 15px/1.15 var(--font-display); color: var(--color-primary); }
[data-site-page-root] .k5w__n small { font-size: 12px; line-height: 1.25; color: var(--muted); }
[data-site-page-root] .k5w__ok { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); color: #fff; }
/* wires between steps */
[data-site-page-root] .k5w__flow { position: relative; }
@media (min-width: 701px) {
  [data-site-page-root] .k5w__n:not(:last-child) > b::after { content: ""; position: absolute; left: calc(100% + 4px); top: 50%; width: 16px; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(7,41,41,.4) 0 5px, transparent 5px 8px); transform-origin: left; }
}
html[data-reveal-ready] [data-site-page-root] .k5 .k5w__n { opacity: 0; transform: translateY(8px); }
html[data-reveal-ready] [data-site-page-root] .k5 .k5w__ok { transform: scale(0); }
html[data-reveal-ready] [data-site-page-root] .k5 .k5w__n > b::after { transform: scaleX(0); }
html[data-reveal-ready] [data-site-page-root] .k5.is-in .k5w__n { animation: k5pop .5s calc(.35s + var(--i) * .6s) forwards; }
html[data-reveal-ready] [data-site-page-root] .k5.is-in .k5w__ok { animation: k5tick .35s calc(.75s + var(--i) * .6s) forwards; }
html[data-reveal-ready] [data-site-page-root] .k5.is-in .k5w__n > b::after { animation: k5draw .3s calc(.7s + var(--i) * .6s) forwards; }
@keyframes k5pop { to { opacity: 1; transform: none; } }
@keyframes k5tick { to { transform: scale(1); } }
@keyframes k5draw { to { transform: scaleX(1); } }
@media (max-width: 700px) {
  [data-site-page-root] .k5w__flow { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  [data-site-page-root] .k5w__n::before, [data-site-page-root] .k5w__n::after { left: 50%; right: auto; margin-left: -4.5px; margin-top: 0; }
  [data-site-page-root] .k5w__n::before { top: -5px; } [data-site-page-root] .k5w__n::after { top: auto; bottom: -5px; }
  [data-site-page-root] .k5w__n:not(:last-child) > b::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 2px; height: 14px; margin-left: -1px; background: repeating-linear-gradient(180deg, rgba(7,41,41,.4) 0 5px, transparent 5px 8px); transform-origin: top; }
  html[data-reveal-ready] [data-site-page-root] .k5 .k5w__n > b::after { transform: scaleY(0); }
  html[data-reveal-ready] [data-site-page-root] .k5.is-in .k5w__n > b::after { animation-name: k5drawy; }
  @keyframes k5drawy { to { transform: scaleY(1); } }
}
@media (prefers-reduced-motion: reduce) {
  html[data-reveal-ready] [data-site-page-root] .k5 .k5w__n, html[data-reveal-ready] [data-site-page-root] .k5 .k5w__ok, html[data-reveal-ready] [data-site-page-root] .k5 .k5w__n > b::after { opacity: 1; transform: none; animation: none !important; }
}
[data-site-page-root] .k5w__k { padding-right: 22px; }
[data-site-page-root] .k5__ic { overflow: visible; }
[data-site-page-root] .k5__ic .k5__bdg { display: grid; z-index: 2; }
[data-site-page-root] .k5 h3 { font-size: clamp(1.3rem, 1.75vw, 1.6rem); }
[data-site-page-root] .k5__plate { margin-top: auto; }
[data-site-page-root] .k5w__k { padding-right: 0; }
[data-site-page-root] .k5w__ok { top: auto; bottom: 8px; right: 8px; }
[data-site-page-root] .k5w__n small { padding-right: 16px; }

/* more use cases (new section under #ideas) */
[data-site-page-root] .uc { padding-block: clamp(56px, 7vw, 96px); }
[data-site-page-root] .uc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 3.5vw, 48px); }
[data-site-page-root] .uc__card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(20px, 2vw, 28px); border-radius: 28px; background: #fff; border: 1px solid rgba(7,41,41,.08); box-shadow: 0 1px 2px rgba(7,41,41,.04), 0 24px 48px -36px rgba(7,41,41,.28); }
[data-site-page-root] .uc__card--own { background: transparent; border: 1.5px dashed rgba(7,41,41,.28); box-shadow: none; }
[data-site-page-root] .uc__cat { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[data-site-page-root] .uc__viz { display: grid; align-content: center; gap: 12px; min-height: 176px; padding: 18px; border-radius: 18px; background: radial-gradient(rgba(7,41,41,.13) 1px, transparent 1.4px) 0 0 / 18px 18px, #fafaf6; border: 1px solid rgba(7,41,41,.06); }
[data-site-page-root] .uc__card h3 { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 400 clamp(1.25rem, 1.7vw, 1.5rem)/1.15 var(--font-display); color: var(--color-primary); }
[data-site-page-root] .uc__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary); color: #1ef4b4; }
[data-site-page-root] .uc__txt { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--color-text); }
[data-site-page-root] .uc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-primary); }
[data-site-page-root] .uc__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; background: var(--color-tint-warm); }
[data-site-page-root] .uc__meta .uc__steps { margin-left: auto; padding: 0; background: none; color: var(--muted); }
/* keyword scale */
[data-site-page-root] .uc__scale { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; align-items: end; }
[data-site-page-root] .uc__cell { position: relative; display: block; height: 34px; border-radius: 4px; background: rgba(7,41,41,.12); }
[data-site-page-root] .uc__cell.is-hit { background: color-mix(in srgb, #1ef4b4 45%, #fff); }
[data-site-page-root] .uc__cell.is-pin { background: var(--color-primary); }
[data-site-page-root] .uc__cell.is-pin::after { content: ""; position: absolute; left: 50%; top: -8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #1ef4b4; }
[data-site-page-root] .uc__axis { display: grid; grid-template-columns: 10fr 1fr 9fr; margin: 0; font-size: 11.5px; color: var(--muted); }
[data-site-page-root] .uc__axis { grid-template-columns: auto 1fr auto; gap: 8px; }
[data-site-page-root] .uc__axis-hit { color: var(--color-accent); font-weight: 500; text-align: right; }
/* roi bars */
[data-site-page-root] .uc__bars { display: flex; align-items: end; gap: 5px; height: 78px; }
[data-site-page-root] .uc__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: rgba(7,41,41,.16); transform-origin: bottom; }
[data-site-page-root] .uc__bars i:nth-child(n+9) { background: color-mix(in srgb, #1ef4b4 55%, #fff); }
[data-site-page-root] .uc__bars i:last-child { background: var(--color-primary); }
[data-site-page-root] .uc__val { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 100px; background: #fff; border: 1px solid rgba(7,41,41,.14); font-size: 13px; font-weight: 500; color: var(--color-primary); }
[data-site-page-root] .uc__val b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1ef4b4; font-weight: 500; }
/* blank flow */
[data-site-page-root] .uc__flow { display: flex; align-items: center; justify-content: center; gap: 0; }
[data-site-page-root] .uc__flow i { flex: 1; min-width: 14px; height: 2px; background: repeating-linear-gradient(90deg, rgba(7,41,41,.4) 0 5px, transparent 5px 8px); }
[data-site-page-root] .uc__node { display: grid; place-items: center; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid #dcdcd2; font-size: 12.5px; font-weight: 500; color: var(--color-primary); box-shadow: 0 8px 18px -12px rgba(7,41,41,.35); }
[data-site-page-root] .uc__node--add { padding: 8px; border: 1.5px dashed var(--color-accent); background: transparent; color: var(--color-accent); box-shadow: none; }
html[data-reveal-ready] [data-site-page-root] .uc__bars i { transform: scaleY(0); }
html[data-reveal-ready] [data-site-page-root] .uc__card.is-in .uc__bars i { animation: ucgrow .5s calc(.2s + var(--d) * .06s) cubic-bezier(.65,0,.35,1) forwards; }
@keyframes ucgrow { to { transform: none; } }
@media (max-width: 960px) { [data-site-page-root] .uc__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { html[data-reveal-ready] [data-site-page-root] .uc__bars i { transform: none; animation: none !important; }
}
@media (max-width: 900px) { [data-site-page-root] .v2__pair, [data-site-page-root] .v2__vgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  [data-site-page-root] .ub__row { grid-template-columns: minmax(0, 1fr); } [data-site-page-root] .vw__b { flex: 1; justify-content: center; } }
@media (min-width: 901px) { [data-site-page-root] .k5sec .k5__job { min-height: 4.1em; } }
[data-site-page-root] .k5sec .k5__plate { margin-top: 0; }
[data-site-page-root] .k5 .v2__out { margin: auto 0 0; padding-top: 12px; border-top: 1px solid rgba(7,41,41,.1); font: 400 clamp(1.05rem, 1.4vw, 1.2rem)/1.3 var(--font-display); color: var(--color-primary); }
/* use-case view toggle + extra job cards */
[data-site-page-root] .vw { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 100px; background: #fff; border: 1px solid rgba(7,41,41,.12); }
[data-site-page-root] .vw__b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 100px; background: transparent; font: 500 15px/1 var(--font-body); color: var(--color-text); cursor: pointer; transition: background .2s, color .2s; }
[data-site-page-root] .vw__b[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
[data-site-page-root] .vw__b:not([aria-pressed="true"]):hover { background: var(--color-tint-warm); }
[data-site-page-root] .vw__b:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[data-site-page-root] .vw__pane[hidden] { display: none; }
[data-site-page-root] .uc__flow--3 { gap: 0; }
[data-site-page-root] .uc__flow--3 .uc__node { font-size: 12px; text-align: center; line-height: 1.2; }
[data-site-page-root] .uc__node--ai { background: color-mix(in srgb, #c6b5ff 22%, #fff); border-color: transparent; }
[data-site-page-root] .uc__node--out { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
@media (max-width: 520px) { [data-site-page-root] .vw { display: flex; } [data-site-page-root] .vw__b { flex: 1; justify-content: center; } }
@media (min-width: 901px) { [data-site-page-root] .k5sec .k5__job { min-height: 4.1em; } }
[data-site-page-root] .k5sec .k5__plate { margin-top: 0; }
[data-site-page-root] .k5 .v2__out { margin-top: auto; }
/* sheet / canvas switch lives inside the product window */
[data-site-page-root] .bn__panel { position: relative; }
[data-site-page-root] .vw { position: absolute; z-index: 5; top: 8px; left: clamp(14px, 3.2vw, 44px); margin: 0; box-shadow: 0 10px 24px -14px rgba(7,41,41,.4); }
[data-site-page-root] .sx__stage--canvas { padding-top: 64px; }
[data-site-page-root] .sx__stage--canvas::before { top: 82px; }
@media (max-width: 640px) {
  [data-site-page-root] .vw { top: 4px; left: 10px; }
  [data-site-page-root] .vw__b { padding: 0 14px; font-size: 14px; }
  [data-site-page-root] .vw__b svg { display: none; }
}
@media (min-width: 901px) {
  [data-site-page-root] .bn__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  [data-site-page-root] .bn__list button { justify-content: center; text-align: center; min-height: 46px; }
  [data-site-page-root] .vw { top: 10px; padding: 3px; }
  [data-site-page-root] .vw__b { min-height: 36px; padding: 0 16px; font-size: 14px; }
  [data-site-page-root] .sx__stage { padding-top: 56px; }
  [data-site-page-root] .sx__stage--canvas { padding-top: 56px; }
  [data-site-page-root] .sx__stage::before { top: 48px; }
  [data-site-page-root] .sx__stage--canvas::before { top: 48px; }
  [data-site-page-root] .sx__send { top: 8px; }
}
[data-site-page-root] .bn__more { margin-top: 18px; }

/* hero: working Sheet / Canvas switch */
[data-site-page-root] .app--hero .app__bar .app__seg { display: inline-flex; }
[data-site-page-root] .app__seg button { min-height: 28px; padding: 3px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
[data-site-page-root] .app__seg button[aria-pressed="true"] { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-sm); font-weight: 500; }
[data-site-page-root] .app__seg button:not([aria-pressed="true"]):hover { color: var(--color-primary); }
[data-site-page-root] .app__seg button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
[data-site-page-root] .app__sheetpane[hidden], [data-site-page-root] .app--hero .app__canvas[hidden] { display: none; }
[data-site-page-root] .app__sheetpane { position: relative; background: #fff; }
[data-site-page-root] .app__sheetpane .sx__h, [data-site-page-root] .app__sheetpane .sx__c { animation-duration: .35s; }
[data-site-page-root] .app__sheetpane .sx__grid { min-width: 0; }
[data-site-page-root] .app__sheetpane .sx__scroll { overflow: hidden; }
[data-site-page-root] .app__sheetout { margin: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--color-primary); box-shadow: 0 18px 40px -22px rgba(7,41,41,.5); }
[data-site-page-root] .app__sheetout .sx__outh { margin-bottom: 6px; }
[data-site-page-root] .app__sheetout ul { list-style: none; margin: 0; padding: 0; }
[data-site-page-root] .app__sheetout li { padding: 5px 0; border-top: 1px solid var(--color-border); font-size: 13px; line-height: 1.35; }
[data-site-page-root] .app__sheetpane .app__note { display: block; padding: 6px 12px 10px; text-align: center; }
[data-site-page-root] .app__sheetpane .sx__tools { padding: 7px 12px; }
@media (max-width: 1340px) { [data-site-page-root] .app--hero .app__bar .app__draft { display: none; } }
@media (max-width: 640px) {
  [data-site-page-root] .app--hero .app__bar .app__seg { display: inline-flex; }
  [data-site-page-root] .app--hero .app__bar .app__run { display: none; }
  [data-site-page-root] .app__seg button { min-height: 32px; }
  [data-site-page-root] .app__sheetpane .sx__h, [data-site-page-root] .app__sheetpane .sx__c { padding: 8px 8px; font-size: 12px; }
  [data-site-page-root] .app__sheetpane .sx__h { font-size: 11.5px; }
  [data-site-page-root] .app__sheetpane .sx__h i { display: none; }
  [data-site-page-root] .app__sheetpane .sx__sent { font-size: 11px; padding: 2px 7px; }
  [data-site-page-root] .app__sheetout .sx__chan { display: none; }
}
@media (max-width: 640px) {
  [data-site-page-root] .app__sheetpane .sx__grid { grid-template-columns: 26px minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr) 84px !important; }
  [data-site-page-root] .app__sheetpane .sx__sent svg { display: none; }
  [data-site-page-root] .app__sheetpane .sx__sent { padding: 2px 8px; }
  [data-site-page-root] .app__sheetpane .sx__sent--wait svg { display: block; width: 11px; height: 11px; }
  [data-site-page-root] .app--hero .app__bar { flex-wrap: wrap; row-gap: 8px; }
}
[data-site-page-root] .app--hero .app__bar .app__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-site-page-root] .app__sheetpane .sx__h, [data-site-page-root] .app__sheetpane .sx__c { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 1340px) {
  [data-site-page-root] .app__sheetpane .sx__h i { display: none; }
  [data-site-page-root] .app__sheetpane .sx__sent svg:not(.sx__spin) { display: none; }
  [data-site-page-root] .app__sheetout .sx__chan { margin-left: 0; width: 100%; }
}
@media (min-width: 641px) and (max-width: 1340px) {
  [data-site-page-root] .app--hero .app__bar { flex-wrap: wrap; row-gap: 8px; }
  [data-site-page-root] .app--hero .app__bar .app__name { flex: 1 1 100%; white-space: normal; }
  [data-site-page-root] .app--hero .app__bar .app__seg { margin-left: 0; }
  [data-site-page-root] .app--hero .app__bar .app__run { margin-left: auto; }
}
@media (min-width: 641px) and (max-width: 1340px) {
  [data-site-page-root] .app--hero .app__bar .app__name { flex: 1 1 calc(100% - 40px); }
  [data-site-page-root] .app__sheetpane .sx__grid { grid-template-columns: 30px minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,.9fr) 118px !important; }
}

/* quality pass: consistent section rhythm, contrast, tap targets */
[data-site-page-root] .k5sec { padding-block: var(--pad-y); }
[data-site-page-root] .sx__h--ai { background: #b9a6f6; color: #1f1457; }
[data-site-page-root] .sx__h--ai i { background: rgba(255,255,255,.45); color: #1f1457; }
@media (max-width: 640px) {
  [data-site-page-root] .app--hero .app__seg button { min-height: 44px; padding-inline: 16px; }
  [data-site-page-root] .gn__k { font-size: 11px; }
}
[data-site-page-root] .uc__feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
[data-site-page-root] .uc__feed > span { padding: 6px 8px; border-radius: 10px; background: #fff; border: 1px solid #dcdcd2; font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--color-primary); }
[data-site-page-root] .uc__feed .uc__flow { grid-column: 1 / -1; margin-top: 6px; }
[data-site-page-root] .uc__bars--fade i, [data-site-page-root] .uc__bars--fade i:nth-child(n+9), [data-site-page-root] .uc__bars--fade i:last-child { background: color-mix(in srgb, var(--color-primary) 22%, #fff); }
[data-site-page-root] .uc__bars--fade i:first-child { background: var(--color-primary); }
[data-site-page-root] .uc__val--soft { justify-self: start; padding: 5px 12px; font-size: 12.5px; }

/* first fold, standardised to the Visibility page: uppercase eyebrow, green key words, Book a Demo + Sign up for free */
[data-site-page-root] .hero .eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: var(--type-2); font-weight: 400; color: var(--color-accent); margin-bottom: 14px; }
[data-site-page-root] .hero h1 { font-weight: 300; max-width: 15ch; }
[data-site-page-root] .hero h1 .h1-key { color: var(--color-accent); }
[data-site-page-root] .hero__btns { gap: 14px; margin-top: 32px; }
[data-site-page-root] .btn--demo, [data-site-page-root] .btn--signup { min-height: 54px; border-radius: var(--radius-pill); font: 500 17px/24px var(--font-body); text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
[data-site-page-root] .btn--demo { padding: 14px 30px; background: #7ecfdb; border: 1px solid #7ecfdb; color: var(--color-primary); }
[data-site-page-root] .btn--demo:hover { background: #6bc2cf; border-color: #6bc2cf; }
[data-site-page-root] .btn--signup { gap: 12px; padding: 7px 28px 7px 7px; background: var(--color-primary); border: 1px solid var(--color-primary); color: #fff; }
[data-site-page-root] .btn--signup:hover { background: #061b16; }
[data-site-page-root] .btn--signup .hero__hand { flex: none; width: 38px; height: 38px; }
[data-site-page-root] .btn--demo:focus-visible, [data-site-page-root] .btn--signup:focus-visible, [data-site-page-root] .hero__watch:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
[data-site-page-root] .hero__more { margin: 18px 0 0; }
[data-site-page-root] .hero__watch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; background: none; border: 0; border-radius: 0; font: 500 16px/1.2 var(--font-body); color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent); cursor: pointer; }
[data-site-page-root] .hero__watch:hover { text-decoration-color: var(--color-accent); }
@media (max-width: 560px) { [data-site-page-root] .hero__btns .btn { flex: 1 1 100%; } [data-site-page-root] .hero h1 { max-width: none; } }

/* sheet / canvas switch: larger, with a one-line hint beside it */
[data-site-page-root] .vw__wrap { position: absolute; z-index: 5; top: 10px; left: clamp(14px, 3.2vw, 44px); right: auto; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 28px); }
[data-site-page-root] .vw__wrap .vw { position: static; margin: 0; padding: 5px; gap: 4px; }
[data-site-page-root] .vw__wrap .vw__b { min-height: 48px; padding: 0 24px; gap: 10px; font-size: 17px; }
[data-site-page-root] .vw__wrap .vw__b svg { display: block; width: 20px; height: 20px; }
[data-site-page-root] .vw__hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 1.2; font-weight: 500; color: var(--color-accent); white-space: nowrap; }
[data-site-page-root] .vw__hint svg { flex: none; }
[data-site-page-root] .sx__stage, [data-site-page-root] .sx__stage--canvas { padding-top: 84px; }
[data-site-page-root] .sx__stage::before, [data-site-page-root] .sx__stage--canvas::before { top: 74px; }
[data-site-page-root] .sx__send { top: 14px; }
@media (max-width: 900px) { [data-site-page-root] .sx__send { display: none; } }
@media (max-width: 640px) {
  [data-site-page-root] .vw__wrap { top: 8px; left: 10px; gap: 8px; }
  [data-site-page-root] .vw__wrap .vw__b { min-height: 44px; padding: 0 16px; font-size: 15px; gap: 0; }
  [data-site-page-root] .vw__wrap .vw__b svg { display: none; }
  [data-site-page-root] .vw__hint { font-size: 13px; white-space: normal; max-width: 9.5em; }
  [data-site-page-root] .vw__hint svg { width: 20px; height: 14px; }
  [data-site-page-root] .sx__stage, [data-site-page-root] .sx__stage--canvas { padding-top: 70px; }
  [data-site-page-root] .sx__stage::before, [data-site-page-root] .sx__stage--canvas::before { top: 62px; }
}

/* Book a Demo form: in a dialog, in the site's own language (cream card, pill fields, dark pill button) */
[data-site-page-root] .dmodal, .dmodal { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); height: fit-content; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text); overflow: visible; box-shadow: 0 40px 90px -30px rgba(7,41,41,.55); }
.dmodal::backdrop { background: rgba(7,41,41,.72); backdrop-filter: blur(5px); }
.dmodal__x { position: absolute; z-index: 2; top: -14px; right: -14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 0 0 3px #fff; }
.dmodal__x:focus-visible, .dform input:focus-visible, .dform select:focus-visible, .dform__submit:focus-visible, .dform a:focus-visible { outline: 3px solid #1ef4b4; outline-offset: 2px; }
.dform { display: block; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-lg); font-family: var(--font-body); }
.dform__body, .dform__ok { padding: clamp(24px, 4.5vw, 48px); }
.dform__h { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 4.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; color: var(--color-primary); text-wrap: balance; }
.dform__req { margin: 0 0 clamp(18px, 3vw, 28px); font-size: 14px; color: var(--muted, #5a6e6c); }
.dform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dform__f { min-width: 0; }
.dform__f--full { grid-column: 1 / -1; }
.dform label { display: block; margin: 0 0 6px 4px; font-size: 14px; font-weight: 500; color: var(--color-primary); }
.dform input:not([type="checkbox"]):not([type="radio"]), .dform select { display: block; width: 100%; min-width: 0; min-height: 54px; padding: 14px 20px; border: 1px solid color-mix(in srgb, var(--color-primary) 28%, #fff); border-radius: 100px; background: #fff; font: 400 16px/24px var(--font-body); color: var(--color-primary); -webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease; }
.dform select { padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 6 5 5 5-5' stroke='%23072929' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; }
.dform input::placeholder { color: #8a9694; }
.dform input:not([type="checkbox"]):not([type="radio"]):hover, .dform select:hover { border-color: var(--color-primary); }
.dform input:not([type="checkbox"]):not([type="radio"]):focus, .dform select:focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, #1ef4b4 45%, transparent); }
.dform__tel { display: grid; grid-template-columns: minmax(112px, 138px) minmax(0, 1fr); gap: 10px; }
.dform__tel select { padding-left: 16px; padding-right: 36px; background-position: right 14px center; }
.dform__err { margin: 6px 0 0 8px; min-height: 0; font-size: 13px; line-height: 1.35; color: #b3261e; }
.dform__err:empty { display: none; }
.dform__f:has(.dform__err:not(:empty)) input, .dform__f:has(.dform__err:not(:empty)) select { border-color: #b3261e; }
.dform__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px clamp(16px, 3vw, 28px); margin-top: clamp(20px, 3.4vw, 32px); }
.dform__submit { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 40px; border: 1px solid var(--color-primary); border-radius: 100px; background: var(--color-primary); color: #fff; font: 500 17px/24px var(--font-body); cursor: pointer; transition: background-color .2s ease, opacity .2s ease; }
.dform__submit:hover { background: #061b16; }
.dform[data-form-state="submitting"] .dform__submit { opacity: .7; cursor: progress; }
.dform__legal { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted, #5a6e6c); }
.dform__legal a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.dform__gerr { margin: 14px 0 0; font-size: 14px; line-height: 1.4; color: #b3261e; }
.dform__gerr:empty { display: none; }
.dform__ok p { margin: 0 0 24px; font-size: 18px; line-height: 1.5; color: var(--color-text); }
.dform__ok[hidden], .dform__body[hidden] { display: none; }
.dform[data-form-state="success"] .dform__body { display: none; }
@media (max-width: 560px) {
  .dform__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dform__foot { grid-template-columns: minmax(0, 1fr); }
  .dform__submit { width: 100%; }
  .dform__tel { grid-template-columns: minmax(104px, 122px) minmax(0, 1fr); }
  .dmodal__x { top: 8px; right: 8px; box-shadow: none; width: 44px; height: 44px; }
  .dform__h { padding-right: 44px; }
}
@media (prefers-reduced-motion: reduce) { .dform *, .dform__submit { transition: none; } }