/* Original homepage presentation adapted from cofounder 2d8a3c5. Footer/consent remain owned by site.css. See docs/demo-port.md. */ :where(.home-original) { --canvas: #F2F4F7; --surface: #FFFFFF; --surface-2: #F8F9FB; --warm: #FCF7EF; --ink: #111418; --ink-2: #222831; --slate: #4B576A; --slate-2: #636F82; --line: #DCE0E6; --line-2: #E8EBEF; --blue: #386FA9; --blue-deep: #2B5E96; --blue-tint: #E6F0F9; --sky: #6EABD8; --amber: #F5B24A; --amber-tint: #F8EBD6; --amber-text: #7A4A00; --sand-tint: #FBF4E9; --serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --r-sm: 6px; --r: 10px; --r-lg: 16px; --shadow-app: 0 1px 0 rgba(17, 20, 24, .04), 0 24px 60px -24px rgba(34, 40, 49, .28), 0 8px 24px -12px rgba(34, 40, 49, .12); --ease: cubic-bezier(.2, .7, .2, 1); --gutter: clamp(16px, 4vw, 40px); } :where(.home-original) { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } :where(.home-original) { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } :where(.home-original) img, :where(.home-original) svg { display: block; max-width: 100%; } :where(.home-original) button { font: inherit; color: inherit; } :where(.home-original) ul, :where(.home-original) ol { margin: 0; padding: 0; list-style: none; } :where(.home-original) :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; } :where(.home-original) .skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; } :where(.home-original) .eyebrow { font: 600 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; } :where(.home-original) h1, :where(.home-original) h2 { font-family: var(--serif); font-optical-sizing: auto; letter-spacing: -.028em; line-height: 1.02; text-wrap: balance; } :where(.home-original) h2 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 500; } :where(.home-original) h3 { font: 600 17px/1.35 var(--sans); letter-spacing: -.01em; } :where(.home-original) .inline { color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(61, 106, 165, .35); text-underline-offset: 3px; } :where(.home-original) .inline:hover { text-decoration-color: currentColor; } :where(.home-original) .fine { font-size: 13.5px; color: var(--slate-2); } :where(.home-original) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 9px; border: 1px solid transparent; font: 500 15px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } :where(.home-original) .btn--primary { background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px -8px rgba(17,20,24,.5); } :where(.home-original) .btn--quiet { background: var(--surface); border-color: var(--line); color: var(--ink); } :where(.home-original) .btn--quiet:hover { border-color: #C8CDD4; } :where(.home-original) .btn--ghost { background: transparent; border-color: #C8CDD4; color: var(--ink); } :where(.home-original) .btn svg { transition: transform .2s var(--ease); } :where(.home-original) .btn--quiet:hover svg { transform: translateY(2px); } :where(.home-original) .cta-row { display: flex; flex-wrap: wrap; gap: 12px; } :where(.home-original) .site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 245, 242, 0); border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); } :where(.home-original) .site-header.is-scrolled { background: rgba(250, 249, 246, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line); } :where(.home-original) .header-inner { display: flex; align-items: center; gap: 32px; height: 68px; } :where(.home-original) .brand img { width: 142px; height: auto; } :where(.home-original) .nav { display: flex; gap: 28px; margin-left: auto; } :where(.home-original) .nav a { text-decoration: none; font-size: 14.5px; color: var(--slate); transition: color .2s; } :where(.home-original) .nav a:hover { color: var(--ink); } :where(.home-original) .header-cta { display: flex; align-items: center; gap: 10px; } :where(.home-original) .mobile-nav { padding: 8px var(--gutter) 20px; display: grid; gap: 2px; border-top: 1px solid var(--line); background: var(--canvas); } :where(.home-original) .mobile-nav a { padding: 12px 0; text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--line-2); } :where(.home-original) .hero { overflow-x: clip; position: relative; isolation: isolate; padding: 0 0 clamp(64px, 8vw, 112px); background: linear-gradient(180deg, var(--warm) 0%, var(--warm) 46%, var(--canvas) 78%); margin-top: -68px; } :where(.home-original) .hero-top { position: relative; padding: calc(68px + clamp(40px, 6vw, 88px)) 0 clamp(48px, 6vw, 80px); min-height: min(820px, 100vh); display: flex; align-items: center; } :where(.home-original) .hero-art { position: absolute; z-index: -1; pointer-events: none; top: calc(50% + 34px); right: 0; width: min(64vw, 1100px); transform: translateY(-50%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 8%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 8%, #000 84%, transparent 100%); mask-composite: intersect; } :where(.home-original) .hero-art img { width: 100%; animation: demo-art-in 1.4s var(--ease) both; } @keyframes demo-art-in { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } } :where(.home-original) .hero-copy { position: relative; } :where(.home-original) .hero-logo { width: clamp(260px, 30vw, 440px); height: auto; margin: 0 0 clamp(20px, 2.4vw, 32px) -6px; } :where(.home-original) .hero h1 { margin: 0; font-weight: 500; } :where(.home-original) .hero-tag { display: block; max-width: 17em; font: 400 clamp(15px, 1.65vw, 24px)/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--slate); margin-bottom: clamp(20px, 2.6vw, 36px); } :where(.home-original) .hero-head { display: block; max-width: 9.6em; font-family: var(--serif); font-size: clamp(44px, 4.4vw, 66px); line-height: .98; letter-spacing: -.035em; color: var(--ink); } :where(.home-original) .hero-sub { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--slate); max-width: 26em; } :where(.home-original) .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: clamp(28px, 3vw, 40px); } :where(.home-original) .btn--round { border-radius: 999px; min-height: 54px; padding: 0 30px; font-size: 17px; } :where(.home-original) .btn--round:hover svg { transform: translateX(3px); } :where(.home-original) .scroll-link { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; } :where(.home-original) .scroll-ring { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease); } :where(.home-original) .scroll-link:hover .scroll-ring { background: var(--ink); color: #fff; } :where(.home-original) .hero-pillars { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: clamp(36px, 4.4vw, 60px); font: 500 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--slate); } :where(.home-original) .hero-pillars li { display: flex; align-items: center; } :where(.home-original) .hero-pillars li + li::before { content: ""; width: 1px; height: 14px; background: #B8BFCA; margin: 0 clamp(14px, 2vw, 30px); } :where(.home-original) .hero .fine { margin-top: 14px; } :where(.home-original) .ws-badge { font: 600 12px/1 var(--sans); color: var(--blue-deep); background: var(--blue-tint); padding: 6px 9px; border-radius: 6px; white-space: nowrap; } :where(.home-original) .ws-h { font: 600 12px/1 var(--sans); color: var(--ink-2); margin: 4px 0 12px; } :where(.home-original) .page { font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 13.5px; line-height: 1.55; color: var(--ink); } :where(.home-original) .scene { position: relative; } :where(.home-original) .scene + .scene { margin-top: 22px; } :where(.home-original) .act { margin-bottom: 8px; max-width: 60ch; } :where(.home-original) .sec { padding: clamp(80px, 11vw, 148px) 0; position: relative; } :where(.home-original) .sec-head h2 { margin-bottom: 22px; } :where(.home-original) .sec-head p:not(.eyebrow) { font-size: 18px; color: var(--slate); max-width: 40em; } :where(.home-original) .sec-head--split { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; } :where(.home-original) .sec-head--split h2 { margin-bottom: 0; } :where(.home-original) .approach { padding-bottom: clamp(64px, 8vw, 112px); } :where(.home-original) .sec-head--center { margin-left: auto; margin-right: auto; text-align: center; } :where(.home-original) .sec-head--center .eyebrow { justify-content: center; } :where(.home-original) .film { position: relative; max-width: 880px; margin: 0 auto; } :where(.home-original) .approach-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); max-width: 640px; text-align: center; margin: clamp(40px, 5vw, 64px) auto 0; padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--line); } :where(.home-original) .approach-points h3 { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 23px); letter-spacing: -.012em; line-height: 1.25; margin-bottom: 10px; } :where(.home-original) .approach-points p { color: var(--slate); font-size: 15.5px; line-height: 1.6; } :where(.home-original) .film-play { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--slate); cursor: pointer; } :where(.home-original) .film-play .i-play { display: none; } :where(.home-original) .film.is-paused .film-play .i-play { display: block; } :where(.home-original) .film.is-paused .film-play .i-pause { display: none; } :where(.home-original) .film-stage { position: relative; aspect-ratio: 612 / 412; border-radius: 20px; background: radial-gradient(120% 90% at 20% 0%, #FFFFFF 0%, #EEF0F6 60%, #E4E7F0 100%); border: 1px solid var(--line-2); overflow: hidden; isolation: isolate; container-type: inline-size; } :where(.home-original) .g-ingest { position: absolute; inset: 0; width: 100%; height: 100%; } :where(.home-original) .g-lab { font: 700 9px var(--sans); letter-spacing: .16em; fill: #6B7A90; } :where(.home-original) .g-row { font: 600 9.5px var(--sans); fill: #4B576A; } :where(.home-original) .g-page { fill: #fff; stroke: #E3E6EB; filter: drop-shadow(0 14px 22px rgba(17,20,24,.12)); } :where(.home-original) .g-b0 { fill: #EEF0F3; } :where(.home-original) .g-b { fill: #C8CDD4; } :where(.home-original) .g-b--slug { fill: #111418; } :where(.home-original) .g-b--chr { fill: #6B7A90; } :where(.home-original) .g-tile { fill: #fff; stroke: #DCE0E6; filter: drop-shadow(0 1px 1.5px rgba(17,20,24,.14)); } :where(.home-original) .g-line { fill: none; stroke: #3A73B0; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; } :where(.home-original) .g-scene { fill: #E6F0F9; stroke: #B9D5EC; } :where(.home-original) .g-scene-l { fill: #6EABD8; } :where(.home-original) .g-act { fill: #F5B24A; } :where(.home-original) .g-act--2 { fill: #F8CF8A; } :where(.home-original) .g-loc { stroke-width: 1; } :where(.home-original) .g-loc--1 { fill: #F8EBD6; stroke: #EBD7B8; } :where(.home-original) .g-loc--2 { fill: #FCF7EF; stroke: #EBD7B8; } :where(.home-original) .g-loc--3 { fill: #E6F0F9; stroke: #B9D5EC; } :where(.home-original) .g-loc-l { fill: #6B7A90; opacity: .55; } :where(.home-original) .g-rail { stroke: #C8CDD4; stroke-width: .8; } :where(.home-original) .g-pin circle { fill: #fff; stroke-width: 1.3; } :where(.home-original) .g-pin line { stroke-width: 1; } :where(.home-original) .g-pin .g-drop { stroke-dasharray: 2.5 3.5; opacity: .7; } :where(.home-original) .g-pin text { font: 600 7.5px var(--sans); fill: #111418; } :where(.home-original) .g-pin--act circle, :where(.home-original) .g-pin--act line { stroke: #C2510F; } :where(.home-original) .g-pin--seq circle, :where(.home-original) .g-pin--seq line { stroke: #0F7669; } :where(.home-original) .g-pin--scene circle, :where(.home-original) .g-pin--scene line { stroke: #3A73B0; } :where(.home-original) .g-scan { opacity: 0; } :where(.home-original) .g-w, :where(.home-original) .g-pop { transform-box: fill-box; } :where(.home-original) .g-w { transform-origin: left center; } :where(.home-original) .g-pop { transform-origin: center; } @keyframes demo-g-wipe { from { transform: scaleX(0); } } @keyframes demo-g-draw { from { stroke-dashoffset: 1; } } @keyframes demo-g-pop { from { opacity: 0; transform: scale(.5); } } @keyframes demo-g-fade { from { opacity: 0; } } @keyframes demo-g-scan { 0% { opacity: 0; transform: none; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } } @keyframes demo-g-read { from { fill: #EEF0F3; } } :where(.home-original) .film.is-in .film-stage[data-stage="0"] .g-scan { animation: demo-g-scan 3.6s linear .5s both; } :where(.home-original) .film.is-in .film-stage[data-stage="0"] .g-w { animation: demo-g-wipe var(--w) linear var(--d) both; } :where(.home-original) .film.is-in .film-stage[data-stage="0"] .g-r { animation: demo-g-read .35s ease-out var(--d) both; } :where(.home-original) .film.is-in .film-stage[data-stage="0"] .g-line { animation: demo-g-draw var(--w) linear var(--d) both; } :where(.home-original) .film.is-in .film-stage[data-stage="0"] .g-pop { animation: demo-g-pop .45s var(--ease) var(--d) both; } :where(.home-original) .film.is-in .film-stage[data-stage="0"] .g-fade { animation: demo-g-fade .4s ease-out var(--d) both; } :where(.home-original) .film.is-paused .g-ingest * { animation-play-state: paused !important; } :where(.home-original) .develop { background: var(--surface); border-top: 1px solid var(--line-2); } :where(.home-original) .bp.app { margin-top: 0; overflow: clip; border: 1px solid var(--line); box-shadow: var(--shadow-app); } :where(.home-original) .bp-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(28px, 3vw, 40px); } :where(.home-original) .bp-part { padding-top: 18px; border-top: 1px solid var(--ink); } :where(.home-original) .bp-part h3 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); letter-spacing: -.012em; line-height: 1.25; } :where(.home-original) .bp-part p { color: var(--slate); font-size: 16px; line-height: 1.6; } :where(.home-original) .bp-rkey { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 14.5px; color: var(--slate); } :where(.home-original) .bp-rkey b { font-weight: 600; margin-right: 4px; } :where(.home-original) .bp-rkey .up b { color: #15803D; } :where(.home-original) .bp-rkey .down b { color: #DC2626; } :where(.home-original) .bp-rkey .flat b { color: var(--ink-2); } :where(.home-original) .bp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px; } :where(.home-original) .bp-label { margin: 0 0 12px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--g500); } :where(.home-original) .bp .bv-palette { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 10px; padding: 14px 12px; } :where(.home-original) .bp-grp--hope, :where(.home-original) .bp-grp--fear { grid-column: span 3; } :where(.home-original) .bp-grp--core { grid-column: span 2; } :where(.home-original) .bp-grp--core .bp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.home-original) .bp-grp--core .bp-grp-h { color: var(--ai); } :where(.home-original) .bp-grp--other { grid-column: span 4; } :where(.home-original) .bp-grp-h { margin: 0 0 8px 4px; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--g500); } :where(.home-original) .bp-grp--hope .bp-grp-h { color: #15803D; } :where(.home-original) .bp-grp--fear .bp-grp-h { color: #DC2626; } :where(.home-original) .bp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } :where(.home-original) .bp-grp--other .bp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.home-original) .bp .ptile { padding: 6px 2px; font-size: 12px; cursor: pointer; touch-action: auto; } :where(.home-original) .bp .ptile .tchip { width: 34px; height: 34px; border-radius: 8px; font-size: 12px; } :where(.home-original) .bp .ptile:hover { background: var(--g50); } :where(.home-original) .bp .ptile.is-on { color: var(--g900); font-weight: 600; background: var(--g50); } :where(.home-original) .bp .ptile.is-on .tchip { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); } :where(.home-original) .bp-def { padding: 22px 24px; border: 1px solid var(--g200); border-radius: 12px; background: var(--g50); } :where(.home-original) .bp-def .bt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 36px; align-content: start; } :where(.home-original) .bp-def .bt > * { grid-column: 1; } :where(.home-original) .bp-def .bt > .bt-label { grid-column: 2; grid-row: 1; margin-top: 4px; } :where(.home-original) .bp-def .bt > .bt-ex { grid-column: 2; grid-row: 2 / span 8; align-self: start; } :where(.home-original) .bp-glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; padding: 6px 22px 24px; } :where(.home-original) .bp.is-live .bp-glossary { display: none; } :where(.home-original) .bp:not(.is-live) .bp-body { display: none; } :where(.home-original) .bvs { --ai: #504AE6; --g300: #D1D5DB; --g900: #111827; max-width: 820px; margin: 0 auto clamp(28px, 3vw, 40px); } :where(.home-original) .bvs-scroll { overflow-x: auto; scrollbar-width: none; } :where(.home-original) .bvs-svg { display: block; width: 100%; min-width: 600px; height: auto; } :where(.home-original) .bvs-svg .pin text { font-size: 11px; } :where(.home-original) .bvs-band { fill: #EEF0FF; } :where(.home-original) .bvs-band-l { font: 600 11px var(--sans); fill: #504AE6; letter-spacing: .02em; } :where(.home-original) .bvs-beat rect { fill: #fff; stroke: #E5E7EB; filter: drop-shadow(0 1px 2px rgba(17,24,39,.12)); } :where(.home-original) .bvs-beat.is-in rect { stroke: #B9B6F4; } :where(.home-original) .bvs-beat text { font: 700 11px var(--sans); fill: #111827; } :where(.home-original) .bvs-res { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } :where(.home-original) .bvs-res--up { stroke: #15803D; } :where(.home-original) .bvs-res--down { stroke: #DC2626; } :where(.home-original) .bvs-res--flat { stroke: #6B7280; } :where(.home-original) .bvs figcaption { margin-top: 8px; font-size: 14px; color: var(--slate-2); text-align: center; } :where(.home-original) .bt-h { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 600 20px/1.2 var(--sans); color: var(--ink); } :where(.home-original) .bt-h .tchip { width: 34px; height: 34px; border-radius: 8px; font-size: 12px; } :where(.home-original) .bt-group { margin: 0 0 12px; font: 600 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-2); } :where(.home-original) .bt[data-group="hope"] .bt-group { color: #15803D; } :where(.home-original) .bt[data-group="core"] .bt-group { color: #504AE6; } :where(.home-original) .bt[data-group="fear"] .bt-group { color: #DC2626; } :where(.home-original) .bt-sum { margin: 0 0 10px; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--ink); } :where(.home-original) .bt-label { margin: 14px 0 6px; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); } :where(.home-original) .bt-ex { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } :where(.home-original) .bt-ex li { padding: 10px 12px; border-left: 3px solid var(--c); border-radius: 0 8px 8px 0; background: #fff; font-size: 14px; line-height: 1.5; color: var(--ink-2); } :where(.home-original) .bt-ex cite { display: block; margin-top: 4px; font-size: 12.5px; font-style: italic; color: var(--slate-2); } :where(.home-original) .prose .bt p { margin-bottom: 0; } :where(.home-original) .prose .bt .bt-group { margin: 2px 0 12px; } :where(.home-original) .prose .bt .bt-sum { margin-bottom: 10px; } :where(.home-original) .prose .bt .bt-label { margin: 16px 0 8px; } :where(.home-original) .prose .bt-h { margin: 0 0 2px; } :where(.home-original) .prose .bt ul { margin: 0; } :where(.home-original) .prose .bt li { border-top: 0; } :where(.home-original) .prose .bt-ex li { padding: 10px 12px; background: var(--surface-2); } :where(.home-original) .map { position: relative; display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; } :where(.home-original) .region { position: relative; border-radius: 14px; padding: 34px 12px 12px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.55); cursor: pointer; transition: border-color .3s, background .3s, box-shadow .3s, opacity .3s; min-height: 64px; } :where(.home-original) .region > .region-name { position: absolute; top: 11px; left: 14px; font-size: 12.5px; font-weight: 600; color: var(--slate); pointer-events: none; } :where(.home-original) .region:hover { border-color: #BFC7D1; } :where(.home-original) .region.is-sel { border-color: var(--blue); background: rgba(227,237,247,.75); box-shadow: 0 0 0 3px rgba(61,106,165,.14); } :where(.home-original) .region.is-sel > .region-name { color: var(--blue-deep); } :where(.home-original) .region.is-anc { border-color: #B9CDE4; } :where(.home-original) .region .kids { display: flex; flex-direction: column; gap: 10px; } :where(.home-original) .region .kids.row { flex-direction: row; flex-wrap: wrap; } :where(.home-original) .region .kids.row > .region { flex: 1 1 120px; } :where(.home-original) .rel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--amber-text); background: var(--amber-tint); padding: 4px 8px; border-radius: 6px; align-self: flex-start; } :where(.home-original) .mk { position: relative; padding: 0 .08em; z-index: 0; } :where(.home-original) .mk::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: .36em; z-index: -1; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); border-radius: 2px; } :where(.home-original) .pricing { background: var(--surface); border-top: 1px solid var(--line-2); } :where(.home-original) .pricing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; } /* site.css zeroes margin and padding on .pricing-grid, so the pricing wrapper needs its centering and gutter back. */ :where(.home-original) .wrap.pricing-grid { margin: 0 auto; padding-inline: var(--gutter); } :where(.home-original) .pricing-copy h2 { margin-bottom: 22px; } :where(.home-original) .pricing-copy p:not(.eyebrow):not(.fine) { font-size: 18px; color: var(--slate); margin-bottom: 18px; max-width: 26em; } :where(.home-original) .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } :where(.home-original) .plan { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 6px; background: var(--canvas); } :where(.home-original) .plan h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--slate); font-weight: 500; } :where(.home-original) .save { font-size: 12px; font-weight: 600; color: var(--amber-text); background: var(--amber-tint); padding: 4px 8px; border-radius: 6px; } :where(.home-original) .price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; } :where(.home-original) .amt { font-family: var(--serif); font-size: 64px; letter-spacing: -.04em; line-height: 1; font-weight: 500; } :where(.home-original) .per { color: var(--slate); } :where(.home-original) .plan-d { color: var(--slate); font-size: 14.5px; margin-bottom: 24px; min-height: 3em; } :where(.home-original) .plan .btn { margin-top: auto; width: 100%; } :where(.home-original) .plan--feature { background: var(--surface); border-color: var(--ink); box-shadow: 0 30px 60px -36px rgba(34,40,49,.35); } :where(.home-original) .faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); } :where(.home-original) .faq-grid h2 { margin-bottom: 20px; } :where(.home-original) .faq-side { color: var(--slate); max-width: 22em; } :where(.home-original) .faq-list summary h3 { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; } :where(.home-original) .faq-list details p { padding: 0 40px 24px 0; color: var(--slate); font-size: 16.5px; max-width: 42em; } :where(.home-original) .final { padding: clamp(96px, 12vw, 168px) 0; text-align: center; position: relative; overflow: hidden; } :where(.home-original) .final::before { content: ""; position: absolute; inset: auto 0 0; height: 70%; z-index: -1; background: radial-gradient(50% 60% at 50% 100%, rgba(245,178,74,.16), transparent 70%), radial-gradient(40% 50% at 70% 100%, rgba(143,189,227,.22), transparent 70%); } :where(.home-original) .final-inner { display: flex; flex-direction: column; align-items: center; } :where(.home-original) .final-mark { width: 72px; height: auto; margin-bottom: 28px; } :where(.home-original) .final h2 { font-size: clamp(38px, 5.6vw, 72px); max-width: 12em; margin-bottom: 22px; } :where(.home-original) .final p { font-size: 19px; color: var(--slate); max-width: 34em; margin-bottom: 34px; } @media (max-width: 1080px) { :where(.home-original) .bp .bv-palette { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* The menu button takes over from the inline navigation below 830px, the same width as site.css uses on every other page. */ @media (max-width: 829px) { :where(.home-original) .nav { display: none; } :where(.home-original) .header-cta { margin-left: auto; } } @media (max-width: 900px) { :where(.home-original) .film, :where(.home-original) .pricing-grid, :where(.home-original) .faq-grid, :where(.home-original) .sec-head--split { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .sec-head--split { gap: 20px; } :where(.home-original) .film-stage { order: -1; } :where(.home-original) .hero-top { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; } :where(.home-original) .hero-art { position: relative; order: 2; top: 0; transform: none; width: 132%; margin: 8px 0 0 -16%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%); } } @media (max-width: 720px) { :where(.home-original) .plans { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .bp-glossary, :where(.home-original) .bp-body, :where(.home-original) .bp-parts { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .bp-rkey { flex-direction: column; gap: 6px; } :where(.home-original) .bp .bv-palette { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .bp-def .bt { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .bp-def .bt > .bt-label, :where(.home-original) .bp-def .bt > .bt-ex { grid-column: 1; grid-row: auto; } :where(.home-original) .bp-grp--hope, :where(.home-original) .bp-grp--fear, :where(.home-original) .bp-grp--core, :where(.home-original) .bp-grp--other { grid-column: 1 / -1; } :where(.home-original) .bp-grp--other .bp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.home-original) .bp-grp--core .bp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(.home-original) .map { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .approach-points { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .film-play { position: static; margin-top: 12px; } } @media (max-width: 420px) { :where(.home-original) .brand img { width: 118px; } :where(.home-original) .header-cta .btn { padding: 0 11px; font-size: 13px; } :where(.home-original) .cta-row .btn { width: 100%; } :where(.home-original) .hero-pillars { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 28px; font-size: 12px; letter-spacing: .18em; } :where(.home-original) .hero-pillars li + li::before { display: none; } } @media (prefers-reduced-motion: reduce) { :where(.home-original) { scroll-behavior: auto; } :where(.home-original) *, :where(.home-original) *::before, :where(.home-original) *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; } } :where(.home-original) .article { padding: clamp(32px, 5vw, 56px) 0 clamp(80px, 10vw, 128px); } :where(.home-original) .answer { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; color: var(--ink-2); max-width: 40em; padding-left: 20px; border-left: 3px solid var(--amber); } :where(.home-original) .prose { max-width: 680px; font-size: 18px; line-height: 1.7; color: var(--ink-2); } :where(.home-original) .prose h2 { font-size: clamp(28px, 3vw, 38px); margin: 56px 0 18px; scroll-margin-top: 96px; } :where(.home-original) .prose h2:first-child { margin-top: 0; } :where(.home-original) .prose h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.01em; margin: 30px 0 8px; } :where(.home-original) .prose p { margin-bottom: 18px; } :where(.home-original) .prose ul { margin: 0 0 18px; padding-left: 0; } :where(.home-original) .prose li { padding: 10px 0; border-top: 1px solid var(--line); } :where(.home-original) .prose strong { font-weight: 600; color: var(--ink); } :where(.home-original) .prose .cta-row { margin-top: 32px; } :where(.home-original) .eyebrow { display: flex; align-items: center; gap: 12px; } :where(.home-original) .eyebrow::before { content: ""; flex: none; width: 14px; height: 17px; background: url("/_revisions/619a61b1483084343f6a74b3a3a9035cb4bb0996/assets/img/brand/mark.svg?v=23dc1e5c05") center / contain no-repeat; } :where(.home-original) .world { background: var(--surface); } :where(.home-original) .pricing-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(32px, 4vw, 48px); } :where(.home-original) .pricing-copy .eyebrow { justify-content: center; } :where(.home-original) .pricing-copy p:not(.eyebrow):not(.fine) { margin-left: auto; margin-right: auto; } :where(.home-original) .plans { width: min(100%, 760px); text-align: left; } :where(.home-original) .final { background: linear-gradient(180deg, var(--canvas) 0%, var(--warm) 55%, var(--sand-tint) 100%); } :where(.home-original) .final::before { height: 90%; background: radial-gradient(46% 60% at 50% 100%, rgba(245,178,74,.22), transparent 70%), radial-gradient(36% 46% at 72% 100%, rgba(110,171,216,.26), transparent 70%), radial-gradient(30% 40% at 28% 100%, rgba(248,235,214,.7), transparent 70%); } :where(.home-original) .final-mark { width: 104px; margin-bottom: 32px; animation: demo-float 7s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(245,178,74,.25)); } @keyframes demo-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.5deg); } } :where(.home-original) .final .eyebrow { justify-content: center; } :where(.home-original) .hero-art-inner { position: relative; transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px + var(--sy, 0) * 1px), 0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); will-change: transform; } :where(.home-original) .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } :where(.home-original) .fx-sparks { mix-blend-mode: screen; } :where(.home-original) .fx-arc { stroke-dasharray: 14 86; stroke-dashoffset: 100; opacity: 0; animation: demo-arc-run 5.5s linear 1.2s infinite; } @keyframes demo-arc-run { 0% { stroke-dashoffset: 100; opacity: 0; } 6% { opacity: var(--o, 1); } 92% { opacity: var(--o, 1); } 100% { stroke-dashoffset: 0; opacity: 0; } } :where(.home-original) .fx-arc--glow { --o: .6; } :where(.home-original) .fx-nodes circle { fill: rgba(245, 178, 74, .55); stroke: #fff; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: demo-node-ping 5.5s ease-out infinite; animation-delay: calc(1.2s + var(--t) * 5.2s); } @keyframes demo-node-ping { 0% { opacity: .95; transform: scale(.6); } 14% { opacity: 0; transform: scale(2.3); } 100% { opacity: 0; transform: scale(2.3); } } :where(.home-original) .hero-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.9) 48%, rgba(255,240,214,.6) 52%, transparent 62%) 0 0 / 260% 100% no-repeat; animation: demo-sheen 9s ease-in-out 2s infinite; } @keyframes demo-sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } } @media (prefers-reduced-motion: reduce) { :where(.home-original) .fx-sparks, :where(.home-original) .fx-arc, :where(.home-original) .fx-nodes, :where(.home-original) .hero-sheen { display: none; } :where(.home-original) .fx-beat-bg { animation: none !important; } :where(.home-original) .hero-art-inner { transform: none; } } :where(.home-original) .hero-fine { margin-top: 14px; font-size: 13.5px; color: var(--slate-2); } :where(.home-original) .hero-fine + .hero-pillars { margin-top: clamp(28px, 3.4vw, 44px); } :where(.home-original) .hero { padding-bottom: clamp(40px, 5vw, 72px); } :where(.home-original) .approach, :where(.home-original) .develop, :where(.home-original) .world { background: var(--surface); border: 0; } :where(.home-original) .pricing, :where(.home-original) .faq { background: var(--canvas); border: 0; } :where(.home-original) .sec--rule { padding-top: 0; } :where(.home-original) .sec--rule > .wrap { border-top: 1px solid var(--line); padding-top: clamp(80px, 11vw, 148px); } :where(.home-original) .plan { background: var(--surface); } :where(.home-original) .plan--feature { box-shadow: 0 30px 60px -36px rgba(34,40,49,.3); } :where(.home-original) .approach, :where(.home-original) .develop, :where(.home-original) .world, :where(.home-original) .security, :where(.home-original) .pricing, :where(.home-original) .faq { isolation: isolate; } :where(.home-original) .approach::after, :where(.home-original) .develop::after, :where(.home-original) .world::after, :where(.home-original) .security::after, :where(.home-original) .pricing::after, :where(.home-original) .faq::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } :where(.home-original) .approach::after { background: radial-gradient(44% 40% at 50% 56%, rgba(110,171,216,.24), transparent 72%), radial-gradient(28% 30% at 15% 66%, rgba(245,178,74,.14), transparent 72%); } :where(.home-original) .develop::after { background-image: radial-gradient(rgba(17,20,24,.12) 1.1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 46% at 50% 38%, #000 30%, transparent 80%); mask-image: radial-gradient(70% 46% at 50% 38%, #000 30%, transparent 80%); } :where(.home-original) .world::after { background: radial-gradient(36% 30% at 10% 16%, rgba(248,235,214,.85), transparent 72%), radial-gradient(38% 38% at 92% 82%, rgba(110,171,216,.2), transparent 72%); } :where(.home-original) .security::after { background-image: radial-gradient(rgba(17,20,24,.11) 1.1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(76% 32% at 50% 8%, #000 25%, transparent 82%); mask-image: radial-gradient(76% 32% at 50% 8%, #000 25%, transparent 82%); } :where(.home-original) .pricing::after { background: radial-gradient(46% 56% at 50% 62%, rgba(110,171,216,.26), transparent 72%), radial-gradient(26% 34% at 80% 38%, rgba(245,178,74,.15), transparent 72%); } :where(.home-original) .faq::after { background: url("/_revisions/619a61b1483084343f6a74b3a3a9035cb4bb0996/assets/img/brand/mark.svg?v=23dc1e5c05") left -6% bottom 40px / clamp(220px, 22vw, 340px) auto no-repeat; opacity: .11; } :where(.home-original) .hero { background: linear-gradient(180deg, var(--warm) 0%, var(--warm) 32%, var(--surface) 52%, var(--surface) 100%); } :where(.home-original) .hero-demo { position: relative; isolation: isolate; } :where(.home-original) .hero-demo::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; width: 100vw; transform: translateX(-50%); top: -170px; bottom: calc(-1 * clamp(40px, 5vw, 72px)); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.15) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.15) 88%, transparent 100%); background: radial-gradient(42% 46% at 30% 62%, rgba(245, 178, 74, .16), transparent 70%), radial-gradient(40% 50% at 74% 58%, rgba(110, 171, 216, .2), transparent 70%), linear-gradient(180deg, rgba(253, 249, 243, 0) 0, #E7E0D5 70px, #8A8C92 190px, #2A2E35 330px, var(--ink) 470px); } :where(.home-original) .hero { z-index: 1; } :where(.home-original) .audience { position: relative; background: var(--surface); padding: clamp(24px, 3vw, 40px) 0 clamp(56px, 7vw, 96px); } :where(.home-original) .aud-lede { max-width: 30em; margin: 0 auto clamp(36px, 4vw, 56px); font-family: var(--serif); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); text-align: center; } :where(.home-original) .aud-title { font: 600 12.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); text-align: center; margin-bottom: clamp(22px, 2.6vw, 32px); } :where(.home-original) .aud-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.home-original) .aud-list li { padding: 2px clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); } :where(.home-original) .aud-list li:first-child { border-left: 0; padding-left: 0; } :where(.home-original) .aud-list li:last-child { padding-right: 0; } :where(.home-original) .aud-list h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin-bottom: 6px; } :where(.home-original) .aud-list p { font-size: 14.5px; line-height: 1.5; color: var(--slate); } @media (max-width: 900px) { :where(.home-original) .aud-list { grid-template-columns: 1fr 1fr; row-gap: 24px; } :where(.home-original) .aud-list li:nth-child(odd) { border-left: 0; padding-left: 0; } :where(.home-original) .aud-list li:nth-child(2) { padding-right: 0; } } @media (max-width: 520px) { :where(.home-original) .aud-title { text-align: left; } :where(.home-original) .aud-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; } :where(.home-original) .aud-list li { border-left: 0; padding: 14px 0; border-top: 1px solid var(--line); } :where(.home-original) .aud-list li:first-child { border-top: 0; padding-top: 0; } } :where(.home-original) .nav a[aria-current="page"] { color: var(--ink); } :where(.home-original) .fx-beat-bg { fill: #fff; fill-opacity: .96; stroke: #3C5070; stroke-opacity: .2; stroke-width: 1; animation: demo-beat-edge 5.5s ease-out infinite; animation-delay: calc(1.2s + var(--t) * 5.2s); } :where(.home-original) .fx-beat-ln { fill: #C9D1DC; } @keyframes demo-beat-edge { 0% { stroke: #3C5070; stroke-opacity: .2; stroke-width: 1; } 6% { stroke: #F5B24A; stroke-opacity: 1; stroke-width: 2; } 24%, 100% { stroke: #3C5070; stroke-opacity: .2; stroke-width: 1; } } :where(.home-original) .locsys { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-app); overflow: hidden; font-size: 14px; } :where(.home-original) .locsys-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); } :where(.home-original) .locsys-hint { color: var(--slate); font-size: 13.5px; } :where(.home-original) .locsys-body { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; min-height: 500px; } :where(.home-original) .locsys-map, :where(.home-original) .locsys-export { padding: 18px; background: var(--surface-2); } :where(.home-original) .locsys-map { border-right: 1px solid var(--line-2); } :where(.home-original) .locsys-export { border-left: 1px solid var(--line-2); } :where(.home-original) .locsys-script { padding: 18px 20px; min-width: 0; } :where(.home-original) .locsys-script > .ws-h { display: flex; justify-content: space-between; padding-right: 8px; } :where(.home-original) .locsys-fallback ul { padding-left: 14px; } :where(.home-original) .locsys .map { display: flex; flex-direction: column; gap: 8px; } :where(.home-original) .locsys .region { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 6px 7px 8px; border: 1px solid rgba(17,24,39,.2); border-radius: 0; box-shadow: none; cursor: pointer; transition: background .2s, border-color .2s; } :where(.home-original) .locsys .region.d-0 { background: #EDEFF2; } :where(.home-original) .locsys .region.d-1 { background: #E0E3E8; } :where(.home-original) .locsys .region.d-2 { background: #D1D5DC; } :where(.home-original) .locsys .region.d-3 { background: #C2C7CF; } :where(.home-original) .locsys .region.is-leaf { padding: 0; } :where(.home-original) .locsys .region > .region-name { position: static; display: flex; align-items: baseline; gap: 6px; width: 100%; margin: 0; padding: 2px 2px; border: 0; background: none; border-radius: 0; font: 600 13px/1.3 var(--sans); color: #111827; text-align: left; cursor: pointer; pointer-events: auto; letter-spacing: 0; } :where(.home-original) .locsys .region.is-leaf > .region-name { padding: 7px 8px; } :where(.home-original) .locsys .region .kids { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; } :where(.home-original) .lm-ie { flex: none; font: 600 12px/1 var(--sans); letter-spacing: .04em; color: #444D5B; } :where(.home-original) .locsys .region:hover { border-color: rgba(17,24,39,.36); } :where(.home-original) .locsys .region.is-anc { border-color: #8F8AEF; } :where(.home-original) .locsys .region.is-sel { background: #DCDAFB; border-color: #504AE6; box-shadow: none; } :where(.home-original) .locsys .region.is-sel > .region-name { color: #2F2A9E; } :where(.home-original) .locsys-detail { margin-top: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } :where(.home-original) .ld-label { display: block; font-size: 12px; color: var(--slate-2); margin-bottom: 6px; } :where(.home-original) .ld-input { width: 100%; font: 500 15px/1.3 var(--sans); color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); } :where(.home-original) .ld-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61,106,165,.15); background: var(--surface); } :where(.home-original) .ld-path { margin-top: 10px; font-size: 12.5px; color: var(--slate-2); } :where(.home-original) .ld-count { margin-top: 4px; font-size: 13px; color: var(--slate); } :where(.home-original) .lscript { border-top: 1px solid var(--line-2); } :where(.home-original) .lscene { display: grid; grid-template-columns: minmax(0, 1fr) 156px; } :where(.home-original) .lbeats { display: grid; gap: 8px; align-content: start; padding: 0 14px 10px 0; } :where(.home-original) .lscene:first-child .lbeats { padding-top: 10px; } :where(.home-original) .lbeat { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 10px 10px 8px; border: 1px solid #E5E7EB; border-left: 3px solid var(--c); border-radius: 8px; background: #fff; font: 500 13px/1.3 var(--sans); color: #111827; box-shadow: 0 1px 2px rgba(17,24,39,.05); } :where(.home-original) .lb-grip { flex: none; width: 6px; height: 12px; background: radial-gradient(circle, #9CA3AF 1px, transparent 1.3px) 0 0 / 3px 4px; } :where(.home-original) .lb-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F3F4F6; font-size: 12px; color: #4B5563; } :where(.home-original) .lb-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(.home-original) .lb-type { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--c); font: 600 12px/1.4 var(--sans); color: #111418; } :where(.home-original) .lb-res { flex: none; width: 13px; height: 13px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :where(.home-original) .lb-res.up { stroke: #15803D; } :where(.home-original) .lb-res.down { stroke: #DC2626; } :where(.home-original) .lb-count { flex: none; display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 50%; background: #F3F4F6; font-size: 12px; color: #5B6472; } :where(.home-original) .lb-chev { flex: none; width: 8px; height: 8px; border-right: 1.5px solid #9CA3AF; border-bottom: 1.5px solid #9CA3AF; transform: rotate(45deg) translate(-2px, -2px); } /* --ls-step is the height of one strip label, which is a 24 px target at every width (WCAG 2.2 2.5.8). */ :where(.home-original) .lstrip { --ls-step: 24px; position: relative; min-height: calc(var(--n) * var(--ls-step) + 30px); transition: background .2s; } :where(.home-original) .ls-tree { position: absolute; inset: 0 6px 0 4px; border-radius: 3px; pointer-events: none; } :where(.home-original) .lscene:first-child .ls-tree { top: 10px; } :where(.home-original) .ls-l { position: absolute; top: calc(var(--d) * var(--ls-step)); right: calc(var(--d) * 7px + 12px); max-width: calc(100% - var(--d) * 7px - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/var(--ls-step) var(--sans); color: #4B5563; text-align: right; } :where(.home-original) .ls-l[style*="--d:0"] { color: #504AE6; font-weight: 600; } :where(.home-original) button.ls-l { min-width: 24px; padding: 0 4px; margin-right: -4px; border: 0; border-radius: 3px; background: none; cursor: pointer; pointer-events: auto; } :where(.home-original) button.ls-l:hover { background: #EEF0FF; } :where(.home-original) .ls-l.is-sel { background: #504AE6; color: #fff !important; font-weight: 600; } /* button.ls-l:hover is more specific than .ls-l.is-sel; without this the selected label's white text turns white on a pale fill. */ :where(.home-original) button.ls-l.is-sel:hover { background: #504AE6; } :where(.home-original) .ls-b.is-sel { border-color: #504AE6; background: #A9A5F3; } :where(.home-original) .ls-b.is-sel[style*="--d:0"] { background: #2F2A9E; } :where(.home-original) .lbeat { cursor: pointer; } :where(.home-original) .ls-b { position: absolute; top: calc(var(--d) * var(--ls-step) + var(--ls-step)); bottom: 0; right: calc(var(--d) * 7px); width: 4px; border: 1px solid #C3C8D0; background: #F3F4F6; } :where(.home-original) .ls-b[style*="--d:0"] { width: 5px; border: 0; background: #504AE6; } :where(.home-original) .lscene.is-here .lbeat { border-color: #C7C5F5; border-left-color: var(--c); } :where(.home-original) .lexport { margin: 0; padding: 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 12px; } :where(.home-original) .lexport li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 6px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-weight: 700; color: var(--ink); } :where(.home-original) .lexport li:last-child { border-bottom: 0; } :where(.home-original) .lexport li.is-here .lx-h { color: var(--blue-deep); } :where(.home-original) .lx-n { color: var(--slate-2); font-weight: 400; text-align: center; } :where(.home-original) .lx-h { border-radius: 3px; padding: 0 2px; overflow-wrap: anywhere; } :where(.home-original) .lexport li.is-flash .lx-h, :where(.home-original) .is-flash { animation: demo-lflash 1.1s ease-out; } @keyframes demo-lflash { 0% { background-color: rgba(245, 178, 74, .6); } 100% { background-color: rgba(245, 178, 74, 0); } } :where(.home-original) .lexport-note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--slate-2); } @media (max-width: 1180px) { :where(.home-original) .locsys-body { grid-template-columns: 270px minmax(0, 1fr); } :where(.home-original) .locsys-export { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-2); } } @media (max-width: 760px) { :where(.home-original) .locsys-body { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .locsys-map { border-right: 0; border-bottom: 1px solid var(--line-2); } /* A wider strip, with its labels closer to the edge, fits the longest place name. */ :where(.home-original) .lscene { grid-template-columns: minmax(0, 1fr) 152px; } :where(.home-original) .ls-tree { right: 2px; } :where(.home-original) .locsys .region > .region-name { min-height: 24px; } :where(.home-original) .lbeats { padding-right: 8px; } :where(.home-original) .lb-grip, :where(.home-original) .lb-count, :where(.home-original) .lb-chev, :where(.home-original) .lb-type { display: none; } :where(.home-original) .lbeat { gap: 6px; padding: 9px 8px 9px 6px; font-size: 12.5px; } /* A beat title wraps rather than being cut off with an ellipsis. */ :where(.home-original) .lb-t { white-space: normal; overflow: visible; text-overflow: clip; } :where(.home-original) .locsys-hint { font-size: 12.5px; } } :where(.home-original) .hero-sub-lead { color: var(--ink); font-weight: 500; } :where(.home-original) .app { --ai: #504AE6; --ai-tint: #EEF0FF; --g50: #F9FAFB; --g100: #F3F4F6; --g200: #E5E7EB; --g300: #D1D5DB; --g500: #6B7280; --g700: #374151; --g900: #111827; margin-top: clamp(40px, 5vw, 64px); background: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); overflow: hidden; font: 400 13px/1.45 var(--sans); color: var(--g900); scroll-margin-top: 96px; } :where(.home-original) .hero-demo .app { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255,255,255,.06); } :where(.home-original) .app svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } :where(.home-original) .app button { font: inherit; } :where(.home-original) .app-top { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--g200); background: var(--g50); } :where(.home-original) .app-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; } :where(.home-original) .app .app-mark { width: 16px; height: 16px; } :where(.home-original) .app-proj { padding-left: 14px; border-left: 1px solid var(--g300); font-weight: 600; font-size: 14px; } :where(.home-original) .app-slate { color: var(--g500); font-size: 13px; } :where(.home-original) .app-ro { margin-left: auto; font: 600 12px/1 var(--sans); color: var(--ai); background: var(--ai-tint); padding: 6px 9px; border-radius: 6px; } :where(.home-original) .app-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--g200); overflow-x: auto; scrollbar-width: none; } /* Sideways scrollers fade out at an edge that has more to scroll to (set from cofounder-demos.js). */ :where(.home-original) .is-fade-l, :where(.home-original) .is-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%); } :where(.home-original) .is-fade-l { --fade-l: 40px; } :where(.home-original) .is-fade-r { --fade-r: 40px; } :where(.home-original) .app-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 12px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--g500); font-size: 13.5px; white-space: nowrap; cursor: pointer; } :where(.home-original) .app-tab:hover { color: var(--g900); } :where(.home-original) .app-tab[aria-selected="true"] { color: var(--ai); border-bottom-color: var(--ai); font-weight: 500; } :where(.home-original) .app-panel { background: #fff; min-height: 520px; } :where(.home-original) .app-link { border: 0; background: none; padding: 0; color: var(--ai); font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } :where(.home-original) .app-link.is-quiet { cursor: default; } :where(.home-original) .app-fallback { padding: 20px 28px; } :where(.home-original) .bv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--g100); } :where(.home-original) .bv-seg { display: inline-flex; border: 1px solid var(--g200); border-radius: 8px; padding: 2px; background: #fff; } :where(.home-original) .bv-seg > * { padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--g500); border: 0; background: none; cursor: pointer; } :where(.home-original) .bv-seg .is-on { background: var(--g100); color: var(--g900); font-weight: 600; } :where(.home-original) .bv-meta { color: var(--g500); font-size: 12.5px; } :where(.home-original) .bv-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } :where(.home-original) .tchip { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 4px; border-radius: 6px; background: var(--c); color: #111418; font: 700 12px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } :where(.home-original) .bv-legend .tchip + .mk { margin-left: 14px; } :where(.home-original) .mk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--g500); margin-left: 8px; } :where(.home-original) .mk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.6px solid var(--m); background: #fff; } :where(.home-original) .mk--act { --m: #C2510F; } :where(.home-original) .mk--seq { --m: #0F7669; } :where(.home-original) .mk--scene { --m: var(--ai); } :where(.home-original) .bv-scroll { overflow-x: auto; padding: 0 0 4px; } :where(.home-original) .bv-canvas { position: relative; height: 380px; margin: 0 auto; } :where(.home-original) .bv-svg { position: absolute; inset: 0; width: auto !important; height: auto !important; } :where(.home-original) .bv-rail { stroke: var(--g300); stroke-width: 1; } :where(.home-original) .pin circle { fill: #fff; stroke-width: 1.8; } :where(.home-original) .pin text { font: 600 12px var(--sans); fill: var(--g900); stroke: none; } :where(.home-original) .pin-stem { stroke-width: 1.4; } :where(.home-original) .pin-drop { stroke-width: 1.1; stroke-dasharray: 4 5; } :where(.home-original) .pin--act circle, :where(.home-original) .pin--act line { stroke: #C2510F; } :where(.home-original) .pin--act .pin-drop { stroke: #E6A57D; } :where(.home-original) .pin--seq circle, :where(.home-original) .pin--seq line { stroke: #0F7669; } :where(.home-original) .pin--seq .pin-drop { stroke: #8CBDB5; } :where(.home-original) .pin--seq text { font-weight: 500; } :where(.home-original) .pin--scene circle, :where(.home-original) .pin--scene line { stroke: var(--ai); } :where(.home-original) .pin--scene .pin-drop { stroke: #B9B6F4; } :where(.home-original) .pin--scene text { font-weight: 500; font-size: 12px; } :where(.home-original) .bv-line { fill: none; stroke: var(--ai); stroke-width: 3.5; stroke-linejoin: round; opacity: .9; } /* The beat cards share one toolbar laid over the canvas; it passes pointer events through to the canvas. */ :where(.home-original) .bv-beats { position: absolute; inset: 0; pointer-events: none; } :where(.home-original) .bv-beats .bcard { pointer-events: auto; } :where(.home-original) .bcard { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; width: 120px; transition: opacity .2s; } :where(.home-original) .bcard-box { position: relative; width: 48px; height: 48px; border-radius: 8px; background: #fff; border: 1px solid var(--g200); box-shadow: 0 2px 4px rgba(17,24,39,.12), 0 0 0 1px rgba(17,24,39,.02); transition: transform .2s var(--ease), box-shadow .2s; } :where(.home-original) .bcard:hover .bcard-box { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(17,24,39,.14); } :where(.home-original) .bcard-k { position: absolute; left: 9px; bottom: 7px; font: 700 13px/1 var(--sans); color: var(--g900); } :where(.home-original) .bcard-dot { position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); } :where(.home-original) .bcard-t { font-size: 12px; line-height: 1.3; color: var(--g700); text-align: center; max-width: 118px; transform: translateY(26px); position: absolute; top: 50%; } :where(.home-original) .bcard.is-sel .bcard-box { border: 2px solid var(--ai); box-shadow: 0 0 0 3px #CFCDF8, 0 4px 10px rgba(80,74,230,.18); } :where(.home-original) .bcard-step { position: absolute; right: -19px; top: 8px; width: 17px; height: 30px; display: grid; grid-template-rows: 1fr 1fr; background: #fff; border: 1px solid var(--g200); border-radius: 5px; overflow: hidden; } :where(.home-original) .bcard-step > span { display: grid; place-items: center; cursor: pointer; } :where(.home-original) .bcard-step > span:hover { background: var(--g100); } :where(.home-original) .app .bcard-step svg { width: 10px; height: 7px; stroke: #9CA3AF; } :where(.home-original) .app .bcard-step .is-on svg { stroke: var(--ai); stroke-width: 2.2; } :where(.home-original) .bcard { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } :where(.home-original) .bv-canvas.is-dragging .bcard { transition: left .2s var(--ease), top .2s var(--ease), opacity .2s; } :where(.home-original) .bv-canvas.is-dragging .bcard.is-drag { transition: none; z-index: 5; cursor: grabbing; } :where(.home-original) .bcard.is-drag .bcard-box { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 22px rgba(17,24,39,.2); } :where(.home-original) .pin-h { position: absolute; width: 96px; height: 26px; transform: translate(-50%, -50%); border: 0; border-radius: 6px; background: none; padding: 0; cursor: grab; touch-action: pan-y; z-index: 2; } :where(.home-original) .pin-h:hover, :where(.home-original) .pin-h:focus-visible, :where(.home-original) .pin-h.is-drag { background: rgba(17,24,39,.05); } :where(.home-original) .pin-h.is-drag { cursor: grabbing; } :where(.home-original) .bv-canvas.is-dragging { cursor: grabbing; } :where(.home-original) .bv-hint { margin: 0; padding: 8px 16px 0; font-size: 12px; color: var(--g500); } /* Demo hints name mouse gestures; a device whose main pointer is touch gets the touch wording instead. */ :where(.home-original) .hint-touch { display: none; } @media (pointer: coarse) { :where(.home-original) .hint-pointer { display: none; } :where(.home-original) .hint-touch { display: inline; } } :where(.home-original) .bv-reset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border: 1px solid var(--ai); border-radius: 8px; background: var(--ai-tint); color: var(--ai); font: 600 12.5px/1 var(--sans); cursor: pointer; box-shadow: 0 1px 2px rgba(80,74,230,.15); animation: demo-bv-reset-in .3s var(--ease); transition: background .15s, color .15s; } :where(.home-original) .bv-reset:hover, :where(.home-original) .bv-reset:focus-visible { background: var(--ai); color: #fff; } :where(.home-original) .app .bv-reset svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @keyframes demo-bv-reset-in { from { opacity: 0; transform: scale(.92); } } @media (prefers-reduced-motion: reduce) { :where(.home-original) .bv-reset { animation: none; } } :where(.home-original) .sv-act--empty .sv-sub { color: var(--g500); } :where(.home-original) .ch { padding: 14px 16px 16px; } :where(.home-original) .ch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px; } :where(.home-original) .ch-count { font-size: 12.5px; color: var(--g500); } :where(.home-original) .ch-sort { display: inline-flex; border: 1px solid var(--g200); border-radius: 8px; overflow: hidden; background: #fff; } :where(.home-original) .ch-sort button { padding: 7px 12px; border: 0; background: none; font: 500 12.5px/1 var(--sans); color: var(--g900); cursor: pointer; } :where(.home-original) .ch-sort button + button { border-left: 1px solid var(--g200); } :where(.home-original) .ch-sort .is-on { background: var(--ai-tint); color: var(--ai); } :where(.home-original) .ch-list { list-style: none; margin: 0 auto; padding: 4px 0; max-width: 760px; border: 1px solid var(--g200); border-radius: 10px; background: var(--g50); } :where(.home-original) .ch-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; } :where(.home-original) .ch-item b { display: block; font: 600 15px/1.3 var(--sans); color: var(--g900); } :where(.home-original) .ch-item small { display: block; margin-top: 5px; font-size: 12px; color: var(--g500); } :where(.home-original) .ch-tools { display: inline-flex; gap: 14px; color: var(--g700); } :where(.home-original) .app .ch-tools svg { width: 16px; height: 16px; } :where(.home-original) .ch-foot { display: flex; justify-content: flex-end; margin-top: 14px; } :where(.home-original) .ch-new { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: var(--ai); color: #fff; font: 500 13px/1 var(--sans); box-shadow: 0 4px 12px rgba(80,74,230,.28); cursor: not-allowed; } /* The pinned row labels are 136 px wide: scroll a focused control clear of them. */ :where(.home-original) .sl-scroll { overflow-x: auto; scroll-padding-left: 136px; border-top: 1px solid var(--g100); margin-top: 10px; } :where(.home-original) .sl-grid { min-width: max-content; } :where(.home-original) .sl-row { display: grid; background: var(--t, #fff); border-bottom: 1px solid var(--g200); min-height: 66px; transition: box-shadow .15s; } :where(.home-original) .sl-row.is-target { box-shadow: inset 0 0 0 2px var(--ai); } :where(.home-original) .sl-row--head { background: #fff; min-height: 118px; } :where(.home-original) .sl-lab { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 10px 10px 14px; background: var(--t, #fff); border-right: 1px solid var(--g200); } :where(.home-original) .sl-lab b { display: flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--sans); color: var(--g900); } :where(.home-original) .sl-lab b i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } :where(.home-original) .sl-lab small { font-size: 12px; color: #5B6472; } :where(.home-original) .sl-lab .app-link { font-size: 12px; margin-top: 8px; } :where(.home-original) .sl-col { display: flex; flex-direction: column; align-items: center; margin: 3px 4px; padding: 10px 6px 8px; border: 0; border-radius: 6px; background: none; font: 11.5px/1.3 var(--sans); color: var(--g700); text-align: center; cursor: pointer; } :where(.home-original) .sl-col b { font-weight: 600; color: var(--g900); } :where(.home-original) .sl-col-t { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :where(.home-original) .sl-col small { margin-top: auto; font-size: 12px; color: #5B6472; letter-spacing: .04em; } :where(.home-original) .sl-col:hover { background: var(--g50); } :where(.home-original) .sl-col.is-sel { background: #E4E3FC; box-shadow: inset 0 0 0 1.5px var(--ai); } :where(.home-original) .sl-cell { display: grid; place-items: center; } :where(.home-original) .slcard { position: relative; width: 46px; height: 46px; padding: 0; border: 1px solid var(--g200); border-radius: 8px; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 1px 3px rgba(17,24,39,.12); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity .15s; } :where(.home-original) .slcard:hover { box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 4px 10px rgba(17,24,39,.14); } :where(.home-original) .slcard-k { position: absolute; left: 7px; bottom: 6px; font: 700 12px/1 var(--sans); color: var(--g900); } :where(.home-original) .slcard-dot { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } :where(.home-original) .slcard .res { position: absolute; right: 5px; bottom: 5px; width: 11px !important; height: 11px !important; } :where(.home-original) .slcard.is-sel { border: 2px solid var(--ai); box-shadow: 0 0 0 3px #CFCDF8; } :where(.home-original) .slcard.is-drag { opacity: .35; } :where(.home-original) .sl-foot { display: grid; gap: 6px; padding: 12px 16px 12px; } :where(.home-original) .app .sl-map { display: block; width: 100%; height: 30px; fill: none; } :where(.home-original) .app .sl-map line { stroke-width: 2.4; vector-effect: non-scaling-stroke; } :where(.home-original) .app .sl-map .sl-map-base { stroke: var(--g200); stroke-width: 1; } :where(.home-original) .sl-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 12px; color: var(--g500); } :where(.home-original) .sl-meta b { color: var(--g900); font-weight: 500; } :where(.home-original) .sl-hint { margin: 0; font-size: 12px; color: var(--g500); } :where(.home-original) .bv-ghost-n { position: absolute; right: -8px; top: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #504AE6; color: #fff; font: 600 12px/18px var(--sans); text-align: center; } @media (prefers-reduced-motion: reduce) { :where(.home-original) .bv-canvas.is-dragging .bcard { transition: none; } } :where(.home-original) .bv-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: end; padding: 6px 16px 14px; } :where(.home-original) .bv-mini { display: grid; gap: 4px; min-width: 0; } :where(.home-original) .bv-mini-a { font-size: 12px; color: var(--g500); } :where(.home-original) .bv-mini svg { width: 100%; max-width: 420px; height: 20px; stroke: #9C98F0; stroke-width: 1.2; vector-effect: non-scaling-stroke; } :where(.home-original) .bv-mini svg path { vector-effect: non-scaling-stroke; } :where(.home-original) .bv-sel { font-size: 12px; color: var(--g500); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } :where(.home-original) .bv-sel b { color: var(--g900); font-weight: 500; } :where(.home-original) .bv-palette { display: grid; grid-template-columns: repeat(6, auto); gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--g200); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(17,24,39,.05); } :where(.home-original) .ptile { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; font-size: 12px; color: var(--g700); cursor: pointer; border-radius: 6px; } :where(.home-original) .ptile .tchip { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; } :where(.home-original) .ptile { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } :where(.home-original) .ptile:hover .tchip { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(17,24,39,.15), inset 0 0 0 1px rgba(0,0,0,.06); } :where(.home-original) .bcard.is-new .bcard-box { border: 1.5px dashed var(--ai); box-shadow: 0 0 0 3px #E4E3FC; } :where(.home-original) .bv-ghost { position: fixed; left: -22px; top: -22px; z-index: 1000; width: 44px; height: 44px; border-radius: 8px; background: #fff; border: 1px solid #E5E7EB; box-shadow: 0 10px 24px rgba(17,24,39,.22); pointer-events: none; font-family: var(--sans); } :where(.home-original) .bv-ghost.is-over { opacity: 0; } :where(.home-original) .bv-ghost-k { position: absolute; left: 8px; bottom: 6px; font: 700 12px/1 var(--sans); color: #111827; } :where(.home-original) .bv-ghost-dot { position: absolute; right: 7px; top: 7px; width: 9px; height: 9px; border-radius: 50%; } :where(.home-original) .bv-count { grid-column: 1 / -1; text-align: right; font-size: 12px; color: var(--g500); margin-top: -6px; } :where(.home-original) .app-data { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 11px 14px; border: 1px solid var(--g200); border-radius: 10px; font-size: 12.5px; color: var(--g500); } :where(.home-original) .app-data b { font-size: 12px; letter-spacing: .08em; color: var(--g900); margin-right: 4px; } :where(.home-original) .app-data-x { margin-left: auto; } :where(.home-original) .sv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 9px 14px; border: 1px solid var(--g200); border-radius: 10px; } :where(.home-original) .sv-crumb { font-size: 13px; color: var(--g500); } :where(.home-original) .sv-crumb b { color: var(--g900); font-weight: 600; } :where(.home-original) .sv-open { margin-left: auto; border: 1px solid #C7C4F6; background: #fff; color: var(--ai); border-radius: 7px; padding: 5px 10px; font-size: 12.5px; font-weight: 500; cursor: pointer; } :where(.home-original) .sv-style { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g500); } :where(.home-original) .sv-style .is-on { background: var(--ai-tint); color: var(--ai); } :where(.home-original) .sv-path { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 14px; margin: 12px 16px 0; padding: 12px 16px; background: var(--g50); border-radius: 10px; font-size: 12.5px; color: var(--g700); } :where(.home-original) .sv-body { padding: 6px 16px 18px; max-height: 620px; overflow: auto; } :where(.home-original) .sv-act, :where(.home-original) .sv-seqline { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; font-size: 12px; } :where(.home-original) .sv-act::before, :where(.home-original) .sv-seqline::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid currentColor; flex: none; } :where(.home-original) .sv-act::after, :where(.home-original) .sv-seqline::after { content: ""; flex: 1; height: 1.5px; background: currentColor; opacity: .7; order: 5; } :where(.home-original) .sv-act { color: #C2510F; } :where(.home-original) .sv-act-k { font-weight: 700; letter-spacing: .04em; } :where(.home-original) .sv-seqline { color: #0F7669; } :where(.home-original) .sv-seq-k { font-weight: 700; letter-spacing: .05em; } :where(.home-original) .sv-seqline--scene { color: var(--ai); } :where(.home-original) .sv-sub { color: var(--g500); } :where(.home-original) .sv-seq-loc { order: 6; color: var(--g700); } :where(.home-original) .sv-sec { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; } :where(.home-original) .sv-list { display: grid; gap: 12px; align-content: start; } :where(.home-original) .sbeat { border: 1px solid var(--g200); border-left: 3px solid var(--c); border-radius: 10px; background: var(--g50); overflow: hidden; } :where(.home-original) .sbeat.is-sel { box-shadow: 0 0 0 2px #CFCDF8; } :where(.home-original) .sbeat-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } :where(.home-original) .sbeat.is-open .sbeat-h { border-bottom: 1px solid var(--g200); } :where(.home-original) .blk-grip { color: var(--g300); display: inline-flex; } :where(.home-original) .app .blk-grip svg { width: 8px; height: 13px; fill: currentColor; stroke: none; } :where(.home-original) .sbeat-n { width: 24px; height: 24px; border-radius: 50%; background: var(--g100); display: grid; place-items: center; font-size: 12px; color: var(--g700); flex: none; } :where(.home-original) .sbeat-title { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; } :where(.home-original) .sbeat-type { background: var(--c); color: #111418; font: 600 12px/1 var(--sans); padding: 5px 9px; border-radius: 999px; white-space: nowrap; } :where(.home-original) .res { width: 13px !important; height: 13px !important; stroke-width: 1.8 !important; } :where(.home-original) .res--up { color: #15803D; } :where(.home-original) .res--down { color: #DC2626; } :where(.home-original) .sbeat-count { min-width: 20px; height: 20px; border-radius: 50%; background: var(--g200); display: grid; place-items: center; font-size: 12px; color: var(--g700); } :where(.home-original) .sbeat-toggle { width: 26px; height: 26px; border: 0; background: none; color: var(--g500); display: grid; place-items: center; cursor: pointer; border-radius: 6px; } :where(.home-original) .sbeat-toggle:hover { background: var(--g100); } :where(.home-original) .sbeat:not(.is-open) .sbeat-toggle svg { transform: rotate(180deg); } :where(.home-original) .sbeat-b { padding: 10px 12px 12px; display: grid; gap: 8px; } :where(.home-original) .sbeat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 6px; } :where(.home-original) .sbeat-res { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } :where(.home-original) .sbeat-res.up { color: #15803D; } :where(.home-original) .sbeat-res.down { color: #DC2626; } :where(.home-original) .sbeat-show { margin-left: auto; border: 0; background: none; color: var(--g700); font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; } :where(.home-original) .sbeat-show:hover { color: var(--ai); } :where(.home-original) .sbeat-trash { color: var(--g500); display: inline-flex; } :where(.home-original) .blk { display: grid; grid-template-columns: 12px 26px minmax(0, 1fr) minmax(0, 170px) auto; gap: 10px; align-items: start; background: #fff; border-radius: 8px; padding: 12px 12px 12px 10px; } :where(.home-original) .blk-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; } :where(.home-original) .blk--dialogue .blk-ic { background: #DBEAFE; color: #2563EB; } :where(.home-original) .blk--action .blk-ic { background: #FEF3C7; color: #B45309; } :where(.home-original) .blk--sound .blk-ic { background: #DCFCE7; color: #15803D; } :where(.home-original) .blk-text { font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 13px; line-height: 1.5; color: var(--g900); } :where(.home-original) .blk-who { display: block; text-align: center; text-transform: uppercase; } :where(.home-original) .blk-line { display: block; margin: 0 14% 0 18%; } :where(.home-original) .blk-sfx { display: block; font-size: 12px; color: var(--g500); } :where(.home-original) .blk-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--g500); padding-top: 2px; } :where(.home-original) .blk-tools { display: inline-flex; gap: 10px; color: var(--g500); padding-top: 2px; } :where(.home-original) .sbeat-add { color: var(--ai); font-size: 12.5px; font-weight: 500; padding: 2px 4px; } :where(.home-original) .lstrip2 { position: relative; min-height: 120px; } :where(.home-original) .ls-label { display: block; text-align: right; font-size: 12px; line-height: 1.3; color: var(--g700); padding-right: calc(12px + var(--d) * 13px); margin-bottom: 6px; } :where(.home-original) .ls-bar { position: absolute; top: calc(8px + var(--d) * 22px); bottom: 0; right: calc((var(--n) - 1 - var(--d)) * 0px + var(--d) * 13px); width: 7px; border: 1.3px solid #6B7280; border-bottom: 0; background: var(--g200); border-radius: 1px 1px 0 0; } :where(.home-original) .sv-body.is-zen { max-width: none; } :where(.home-original) .zen-beat { padding: 14px 6px 18px; border-bottom: 1px solid var(--g100); cursor: pointer; font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 13.5px; line-height: 1.55; } :where(.home-original) .zen-beat.is-sel { background: linear-gradient(90deg, rgba(80,74,230,.05), transparent); } :where(.home-original) .zen-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14.5px; } :where(.home-original) .zen-sel { padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } :where(.home-original) .zen-t { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--sans); color: var(--g700); } :where(.home-original) .zen-t::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); } :where(.home-original) .zen-who { text-align: center; text-transform: uppercase; margin-top: 8px; font-weight: 700; } :where(.home-original) .zen-dia { margin: 0 20% 6px 18%; } :where(.home-original) .zen-sfx { font-size: 12px; color: var(--g500); margin-top: 6px; } :where(.home-original) .zen-act { margin-bottom: 8px; } :where(.home-original) .lm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; padding: 18px 16px; } :where(.home-original) .lm-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } :where(.home-original) .lm-title h4 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } :where(.home-original) .lm-title p { font-size: 12px; color: var(--g500); } :where(.home-original) .lm-acts { display: inline-flex; gap: 12px; align-items: center; font-size: 12px; } :where(.home-original) .lm-max { color: var(--g500); font-size: 12px; } :where(.home-original) .lm-main { display: grid; gap: 10px; align-content: start; } :where(.home-original) .lm-box { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid var(--g200); border-radius: 12px; background: #fff; cursor: pointer; } :where(.home-original) .lm-box.lm-d1 { background: #E9EAEE; border-color: #DCDEE3; } :where(.home-original) .lm-box.lm-d2 { background: #DADCE1; border-color: #CDD0D6; } :where(.home-original) .lm-box.lm-d3 { background: #CBCED4; } :where(.home-original) .lm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; align-content: start; } :where(.home-original) .app .lm-name { width: 100%; margin-top: 6px; padding: 0; border: 0; background: none; color: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; } :where(.home-original) .lm-head .lm-dots { margin-left: auto; } :where(.home-original) .lm-inside { font-size: 12px; color: var(--g500); } /* The nested boxes are tinted gray; this keeps the muted text at 4.5:1 or better on each tint. */ :where(.home-original) :is(.lm-d1, .lm-d2, .lm-d3) > .lm-head > .lm-inside { color: #4E5866; } :where(.home-original) .lm-kids { display: grid; gap: 8px; } :where(.home-original) .lm-leaf { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: rgba(255,255,255,.6); border: 1px solid rgba(17,24,39,.08); border-radius: 9px; cursor: pointer; font-size: 12.5px; } :where(.home-original) .app .lm-leaf { width: 100%; color: inherit; font-size: 12.5px; text-align: left; } :where(.home-original) .lm-uses { margin-left: auto; font-size: 12px; color: var(--g500); } :where(.home-original) .lm-dots { color: var(--g500); display: inline-flex; } :where(.home-original) .lm-box.is-sel, :where(.home-original) .lm-leaf.is-sel { outline: 2px solid var(--ai); outline-offset: 1px; } :where(.home-original) .ie { font: 600 12px/1 var(--sans); padding: 4px 6px; border-radius: 999px; } :where(.home-original) .ie--INTEXT { background: #F3E8FF; color: #7E22CE; } :where(.home-original) .ie--INT { background: #FEF3C7; color: #92400E; } :where(.home-original) .ie--EXT { background: #DCFCE7; color: #166534; } :where(.home-original) .lm-side { border: 1px solid var(--g200); border-radius: 12px; padding: 14px; align-self: start; display: grid; gap: 10px; } :where(.home-original) .lm-side-h { font: 700 12px/1 var(--sans); letter-spacing: .08em; } :where(.home-original) .lm-new { display: block; padding: 9px 12px; border-radius: 8px; background: var(--ai-tint); color: var(--ai); font-weight: 500; border: 1px solid #DCD9FB; } :where(.home-original) .lm-note { font-size: 12px; color: var(--g500); } :where(.home-original) .lm-detail { border-top: 1px solid var(--g200); padding-top: 10px; display: grid; gap: 4px; justify-items: start; } :where(.home-original) .lm-detail b { font-size: 14px; } :where(.home-original) .lm-detail p { font-size: 12px; color: var(--g500); } :where(.home-original) .uv { padding: 18px 16px 20px; display: grid; gap: 14px; max-width: 820px; margin: 0 auto; } :where(.home-original) .uv h4 { font-size: 16px; font-weight: 700; margin-top: 6px; } :where(.home-original) .uv-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: var(--g700); flex: none; font-weight: 700; } :where(.home-original) .app .uv-ic svg { width: 17px; height: 17px; } :where(.home-original) .uv-sheet, :where(.home-original) .uv-export { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--g200); border-radius: 10px; } :where(.home-original) .uv-sheet b, :where(.home-original) .uv-export b { font-size: 14px; } :where(.home-original) .uv-sheet p, :where(.home-original) .uv-export p { font-size: 12px; color: var(--g500); } :where(.home-original) .uv-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } :where(.home-original) .uv-count { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--g50); border-radius: 10px; } :where(.home-original) .uv-count small { display: block; font-size: 12px; color: var(--g500); } :where(.home-original) .uv-count b { font-size: 17px; } :where(.home-original) .uv-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } :where(.home-original) .uv-view { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--g200); border-radius: 10px; background: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(17,24,39,.06); } :where(.home-original) .uv-view:hover { border-color: #C7C4F6; } :where(.home-original) .uv-view b { display: block; font-size: 13px; } :where(.home-original) .uv-view small { font-size: 12px; color: var(--g500); } :where(.home-original) .uv-export > div { flex: 1; } :where(.home-original) .uv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; } :where(.home-original) .uv-fields label { display: grid; padding: 6px 10px; background: var(--g50); border-bottom: 1px solid var(--g300); border-radius: 6px 6px 0 0; } :where(.home-original) .uv-fields small { font-size: 12px; color: var(--g500); } :where(.home-original) .uv-fields span { font-size: 13px; } :where(.home-original) .uv-dl { float: right; background: var(--ai); color: #fff; font-weight: 500; padding: 8px 14px; border-radius: 999px; opacity: .55; cursor: not-allowed; } :where(.home-original) .st { padding: 18px 16px 24px; max-width: 820px; margin: 0 auto; } :where(.home-original) .st-h h4 { display: inline; font-size: 17px; font-weight: 700; } :where(.home-original) .st-h > span { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--g300); color: var(--g500); font-size: 12px; } :where(.home-original) .st-h p { font-size: 12px; color: var(--g500); margin-top: 2px; } :where(.home-original) .st-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } :where(.home-original) .st-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--g200); border-radius: 7px; background: var(--g50); font: 500 12.5px/1.2 var(--sans); color: var(--g700); cursor: pointer; transition: background .15s, border-color .15s; } :where(.home-original) .st-tabs button:hover { border-color: var(--g300); background: #fff; } :where(.home-original) .st-tabs .is-on { background: var(--ai); border-color: var(--ai); color: #fff; } :where(.home-original) .st-bars { border: 1px solid var(--g200); border-radius: 10px; padding: 14px; display: grid; gap: 10px; } :where(.home-original) .st-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 46px; gap: 12px; align-items: center; font-size: 12.5px; font-weight: 500; } :where(.home-original) .st-row > span:last-child { text-align: right; color: var(--g500); font-weight: 400; } :where(.home-original) .st-track { height: 12px; background: var(--g200); border-radius: 999px; overflow: hidden; } :where(.home-original) .st-track i { display: block; height: 100%; background: var(--ai); border-radius: 999px; animation: demo-st-grow .45s var(--ease) both; transform-origin: left; } @keyframes demo-st-grow { from { transform: scaleX(0); } } @media (max-width: 1080px) { :where(.home-original) .bv-legend .tchip { display: none; } :where(.home-original) .bv-foot { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .bv-palette { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 760px) { :where(.home-original) .app-top { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; } :where(.home-original) .app-slate { display: none; } :where(.home-original) .app-ro { margin-left: 0; } :where(.home-original) .app-panel { min-height: 0; } :where(.home-original) .bv-legend { display: none; } :where(.home-original) .bv-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.home-original) .sv-sec { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .lstrip2 { display: none; } :where(.home-original) .blk { grid-template-columns: 22px minmax(0, 1fr) auto; } :where(.home-original) .blk-grip, :where(.home-original) .blk-tools { display: none; } :where(.home-original) .blk-meta { grid-column: 2 / -1; padding-top: 0; } :where(.home-original) .sbeat-h .blk-grip { display: none; } :where(.home-original) .sbeat-type { display: none; } :where(.home-original) .lm-wrap { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .lm-box { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .app .lm-name { width: auto; margin-top: 0; } :where(.home-original) .uv-counts { grid-template-columns: 1fr 1fr; } :where(.home-original) .uv-views, :where(.home-original) .uv-fields { grid-template-columns: minmax(0, 1fr); } :where(.home-original) .st-row { grid-template-columns: 96px minmax(0, 1fr) 42px; } } .demo-static-0 {--d:0.753s} .demo-static-1 {--d:0.915s} .demo-static-2 {--d:1.036s} .demo-static-3 {--d:1.218s} .demo-static-4 {--d:1.339s} .demo-static-5 {--d:1.461s} .demo-static-6 {--d:1.804s} .demo-static-7 {--d:1.966s} .demo-static-8 {--d:2.088s} .demo-static-9 {--d:2.27s} .demo-static-10 {--d:2.391s} .demo-static-11 {--d:2.512s} .demo-static-12 {--d:2.775s} .demo-static-13 {--d:2.937s} .demo-static-14 {--d:3.058s} .demo-static-15 {--d:3.18s} .demo-static-16 {--d:3.362s} .demo-static-17 {--d:3.483s} .demo-static-18 {--d:3.604s} .demo-static-19 {--d:0.5s;--w:2.065s} .demo-static-20 {--d:2.671s;--w:1.429s} .demo-static-21 {--d:0.5s;--w:1.006s} .demo-static-22 {--d:0.606s;--w:0.45s} .demo-static-23 {--d:1.612s;--w:0.953s} .demo-static-24 {--d:1.718s;--w:0.424s} .demo-static-25 {--d:2.671s;--w:0.635s} .demo-static-26 {--d:2.776s;--w:0.291s} .demo-static-27 {--d:3.412s;--w:0.688s} .demo-static-28 {--d:3.518s;--w:0.304s} .demo-static-29 {--d:0.5s;--w:3.6s} .demo-static-30 {--d:0.5s} .demo-static-31 {--d:1.506s} .demo-static-32 {--d:2.644s} .demo-static-33 {--d:3.2s} .demo-static-34 {--d:0.712s;--w:3.229s} .demo-static-35 {--d:0.632s} .demo-static-36 {--d:1.188s} .demo-static-37 {--d:1.771s} .demo-static-38 {--d:2.326s} .demo-static-39 {--d:2.909s} .demo-static-40 {--d:3.438s} .demo-static-41 {--d:3.862s} .demo-static-42 {--d:0.685s;--w:3.229s} .demo-static-43 {--d:0.871s;--w:1.35s} .demo-static-44 {--d:2.353s;--w:1.376s} .demo-static-45 {--d:0.659s;--w:0.794s} .demo-static-46 {--d:0.844s;--w:0.635s} .demo-static-47 {--d:1.003s;--w:0.529s} .demo-static-48 {--d:2.485s;--w:0.582s} .demo-static-49 {--dx:0px;--dy:356px} .demo-static-50 {--dx:272px;--dy:0px} .demo-static-51 {--t:0} .demo-static-52 {--t:0.13} .demo-static-53 {--t:0.27} .demo-static-54 {--t:0.47} .demo-static-55 {--t:0.63} .demo-static-56 {--t:0.82} .demo-static-57 {--t:1} /* Integration: scoped presentation, canonical glossary colours, static fallbacks. */ .cofounder-demo { --shadow-app: var(--shadow-panel); --blue-deep: #2B5E96; --sand-tint: #FBF4E9; } .cofounder-demo .ws-h { font: 600 12px/1 var(--sans); color: var(--ink-2); margin: 4px 0 12px; } .cofounder-demo .ws-badge { font: 600 12px/1 var(--sans); color: var(--blue-deep); background: var(--blue-tint); padding: 6px 9px; border-radius: 6px; white-space: nowrap; } .cofounder-demo .bp-fallback-group { grid-column: 1 / -1; } .cofounder-demo .bt .definition-tagline { font: 600 14px/1.4 var(--sans); margin: 0 0 12px; } .cofounder-demo .bt .definition-detail { font-size: 14.5px; line-height: 1.6; color: var(--slate); } .cofounder-demo .demo-type-L { --c: #5FD3D0; } .cofounder-demo .demo-type-A { --c: #3D9AD6; } .cofounder-demo .demo-type-R { --c: #6377D6; } .cofounder-demo .demo-type-D { --c: #E3C92E; } .cofounder-demo .demo-type-PE { --c: #F46D43; } .cofounder-demo .demo-type-T { --c: #E5576B; } .cofounder-demo .demo-type-PR { --c: #A3DA8F; } .cofounder-demo .demo-type-DR { --c: #2E9A7A; } .cofounder-demo .demo-type-E { --c: #C39BE8; } .cofounder-demo .demo-type-C { --c: #BF9A6A; } .cofounder-demo .demo-type-S { --c: #E164C4; } .cofounder-demo .demo-type-U { --c: #BDB8AE; } .home-original-hero { position: relative; isolation: isolate; overflow-x: clip; padding: 0 0 clamp(40px, 5vw, 72px); background: linear-gradient(180deg, var(--warm) 0%, var(--warm) 32%, var(--surface) 52%, var(--surface) 100%); } .home-original-hero .hero-top { position: relative; min-height: min(820px, 100vh); display: flex; align-items: center; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 80px); } .home-original-hero .hero-copy { position: relative; width: 100%; } .home-original-hero .hero-title { max-width: 9.6em; font-size: clamp(44px, 4.4vw, 66px); } .home-original-hero .hero-text { max-width: 26em; } .home-original-hero .hero-logo { width: clamp(260px, 30vw, 440px); height: auto; margin: 0 0 clamp(20px, 2.4vw, 32px) -6px; } .home-original-hero .hero-demo { position: relative; isolation: isolate; } .home-original-hero .hero-demo::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; width: 100vw; transform: translateX(-50%); top: -170px; bottom: calc(-1 * clamp(40px, 5vw, 72px)); mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.15) 88%, transparent 100%); background: radial-gradient(42% 46% at 30% 62%, rgba(245,178,74,.16), transparent 70%), radial-gradient(40% 50% at 74% 58%, rgba(110,171,216,.2), transparent 70%), linear-gradient(180deg, rgba(253,249,243,0) 0, #E7E0D5 70px, #8A8C92 190px, #2A2E35 330px, var(--ink) 470px); } .home-original-hero .demo-fallback { padding: 20px; border-radius: var(--r); background: var(--surface); } .interactive-demo-row { grid-template-columns: minmax(0, 1fr); } .cofounder-demo [data-app]:not(.is-live) .app-tabs, .cofounder-demo [data-app]:not(.is-live) .app-panel { display: none; } .cofounder-demo [data-app].is-live .app-fallback { display: none; } @media (max-width: 900px) { .home-original-hero .hero-top { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; } /* Stacked under the copy, the art sits above the dark band that starts behind the demo, so the band's light top does not veil it. The crop drops the pale left edge of the image and the fades are kept short. */ .home-original-hero .hero-copy { z-index: 2; } .home-original-hero .hero-art { position: relative; z-index: 1; order: 2; top: 0; transform: none; width: 140%; margin: 0 0 0 -26%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%); } } @media (max-width: 720px) { .cofounder-demo .bp-glossary, .cofounder-demo .bp-body, .cofounder-demo .bp-def .bt { grid-template-columns: minmax(0, 1fr); } .cofounder-demo .bp .bv-palette { grid-template-columns: minmax(0, 1fr); } .cofounder-demo .bp-grp { grid-column: 1 / -1; } .cofounder-demo .bp-def .bt > .bt-label, .cofounder-demo .bp-def .bt > .bt-ex { grid-column: 1; grid-row: auto; } .cofounder-demo .film-play { position: static; margin-top: 12px; } } @media (prefers-reduced-motion: reduce) { .cofounder-demo *, .cofounder-demo *::before, .cofounder-demo *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; } } .home-original-hero { margin-top: -68px; } .home-original-hero .hero-top { padding-top: calc(68px + clamp(40px, 6vw, 88px)); } /* On phones a shorter gap under the header lets more of the hero art into the first screen. */ @media (max-width: 600px) { .home-original-hero .hero-top { padding-top: calc(68px + 24px); } } .home-original.home-header-ready .site-header { transition: background .3s var(--ease), border-color .3s var(--ease); } .home-original.home-header-ready .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; } .home-original.home-header-ready .site-header.is-scrolled { background: rgba(250,249,246,.86); border-bottom-color: var(--line); backdrop-filter: saturate(1.4) blur(14px); } /* The hero carries the full logo, so the header logo waits until the page scrolls. */ .home-original .site-header .brand { transition: opacity .3s var(--ease), transform .3s var(--ease); } .home-original .site-header:not(.show-brand) .brand { opacity: 0; transform: translateY(-4px); pointer-events: none; } .home-original .site-header .brand:focus-visible { opacity: 1; transform: none; } .home-original .header-inner { gap: 32px; } .home-original .header-cta { margin-left: 0; } @media (max-width: 829px) { .home-original .header-inner { gap: 10px; } .home-original .header-cta { margin-left: auto; } } /* The original hero's complete authored copy and actions. */ .home-original-hero .hero-tag { display: block; max-width: 17em; font: 400 clamp(15px, 1.65vw, 24px)/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--slate); margin-bottom: clamp(20px, 2.6vw, 36px); } .home-original-hero .hero-head { display: block; max-width: 9.6em; font-family: var(--serif); font-size: clamp(44px, 4.4vw, 66px); line-height: .98; letter-spacing: -.035em; color: var(--ink); } .home-original-hero .hero-sub { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--slate); max-width: 26em; } .home-original-hero .hero-sub-lead { color: var(--ink); font-weight: 500; } .home-original-hero .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: clamp(28px, 3vw, 40px); } .home-original-hero .btn--round { gap: 8px; border-radius: 999px; min-height: 54px; padding: 0 30px; font-size: 17px; } .home-original-hero .btn--round:hover svg { transform: translateX(3px); } .home-original-hero .scroll-link { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; } .home-original-hero .scroll-ring { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease); } .home-original-hero .scroll-link:hover .scroll-ring { background: var(--ink); color: #fff; } .home-original-hero .hero-fine { margin-top: 14px; font-size: 13.5px; color: var(--slate-2); } .home-original-hero .hero-pillars { display: flex; flex-wrap: wrap; gap: 10px 0; padding: 0; margin-top: clamp(28px, 3.4vw, 44px); font: 500 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--slate); } .home-original-hero .hero-pillars li { display: flex; align-items: center; } .home-original-hero .hero-pillars li + li::before { content: ""; width: 1px; height: 14px; background: #B8BFCA; margin: 0 clamp(14px, 2vw, 30px); } @media (max-width: 420px) { .home-original-hero .hero-pillars { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 28px; font-size: 12px; letter-spacing: .18em; } .home-original-hero .hero-pillars li + li::before { display: none; } } .home-original .bp.is-live .bp-glossary { display: none; } .home-original .bp:not(.is-live) .bp-body { display: none; } .home-original .demo-slot:has([data-app].is-live) .demo-fallback, .home-original .demo-slot:has([data-film].is-live) .demo-fallback, .home-original .demo-slot:has([data-locsys].is-live) .demo-fallback, .home-original .part-demo .demo-fallback { display: none; } .home-original .plan-details { margin-top: 20px; font-size: 13px; color: var(--slate); } .home-original .plan-details summary { cursor: pointer; font-weight: 500; } .home-original .plan-details p { margin-top: 12px; } .home-original .part-demo { min-width: 0; }