/* Inner pages: quickstart, pricing, examples. Same system as the home page. */

/* page hero */
.p-hero { position: relative; padding-top: clamp(64px, 8vw, 112px); }
.p-hero::before { content: ''; position: absolute; left: 50%; top: -140px; width: min(1200px, 120vw); height: 680px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(40% 50% at 28% 40%, rgba(212, 240, 226, .9), transparent 70%), radial-gradient(38% 46% at 72% 34%, rgba(227, 224, 247, .9), transparent 72%), radial-gradient(40% 40% at 50% 80%, rgba(248, 233, 218, .7), transparent 72%); filter: blur(30px); }
.p-hero.center { text-align: center; }
.p-hero .label { margin-bottom: 26px; }
.p-hero .lede { max-width: 640px; margin-top: 26px; }
.p-hero.center .lede { margin-left: auto; margin-right: auto; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 34px; }
.p-hero.center .ctas { justify-content: center; }
.cm { margin-left: -.07em; }

/* big media under a hero */
.p-media { margin-top: clamp(56px, 7vw, 88px); }
.p-media .frame { aspect-ratio: 16 / 9; border-radius: var(--r-xl); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .45); }
button.frame { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; }
.play { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); font: 500 14.5px/1 var(--sans); color: var(--ink); transition: transform .3s var(--out); }
.play i { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.play i::after { content: ''; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8.5px; border-color: transparent transparent transparent #fff; }
button.frame:hover .play { transform: translateY(-2px); }

/* feature rows: words beside a product window */
.rows { display: grid; gap: clamp(88px, 10vw, 140px); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row.flip > :first-child { order: 2; }
.row .num { font-size: 12.5px; color: var(--muted); }
.row .d2 { font-size: clamp(30px, 3.4vw, 46px); margin-top: 16px; }
.row .lede { margin-top: 18px; }
.ticks { list-style: none; margin: 28px 0 0; padding: 0; }
.ticks li { position: relative; padding: 13px 0 13px 28px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--dim); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 11px; height: 6px; border-left: 1.6px solid var(--tl-accent); border-bottom: 1.6px solid var(--tl-accent); transform: rotate(-45deg); }
.ticks b { color: var(--ink); font-weight: 600; }
.night .ticks li { border-color: var(--night-line); color: var(--on-night-dim); } .night .ticks b { color: var(--on-night); }
.ticks.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin-top: 40px; }
.ticks.tri li { border-bottom: 0; }
.win .shot { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); }
.win .shot video, .win .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* card grids */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
.grid .card[hidden] { display: none; }
.grid.two .card .t { font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -.02em; margin-top: 10px; }
.card .frame .tag { position: absolute; left: 14px; top: 14px; z-index: 1; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 7px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; min-height: 220px; padding: 28px 26px 26px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .3s var(--out); }
a.tile:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -24px rgba(0, 0, 0, .15); transform: translateY(-2px); }
.tile .label { margin-bottom: auto; padding-bottom: 36px; }
.tile h3 { margin: 0; font: 600 20px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.tile p { margin: 8px 0 0; font-size: 15px; color: var(--dim); }
.tile.ink { background: var(--night); box-shadow: none; } .tile.ink h3 { color: #fff; } .tile.ink p { color: var(--on-night-dim); } .tile.ink .label { color: var(--on-night-muted); }

/* examples filters */
.examples-page .p-hero { padding-top: clamp(36px, 4vw, 56px); }
.examples-page .p-hero .wide { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 48px; align-items: end; }
.examples-page .p-hero .label { grid-column: 1 / -1; margin-bottom: 20px; }
.examples-page .p-hero h1 { font-size: clamp(40px, 5vw, 64px); }
.examples-page .p-hero .lede { max-width: 440px; margin: 0 0 5px; font-size: 16px; }
.example-tools { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.example-search { display: flex; align-items: center; gap: 12px; width: min(540px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.example-search svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.example-search input { width: 100%; padding: 0; border: 0; outline: none; background: transparent; font: 400 15px/1.5 var(--sans); color: var(--ink); }
.example-search:focus-within { outline: 2px solid var(--tl-accent); outline-offset: 2px; }
.example-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; color: var(--muted); }
.example-sort select { font: 500 14px/1.5 var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 10px; }
.examples-page .filters { margin-top: 24px; margin-bottom: 12px; }
.example-count { margin: 0 0 24px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.example-empty { padding: 56px 0; text-align: center; color: var(--muted); }
.examples-grid .card .t { font-size: 17px; letter-spacing: -.02em; line-height: 1.4; margin: 14px 0 5px; }
.examples-grid .card .s { font-size: 13px; line-height: 1.65; color: var(--muted); }
.examples-grid .frame { border-radius: 12px; border: 1px solid var(--line); }
.clip-label { position: absolute; left: 12px; bottom: 12px; font: 500 11px/1.4 var(--mono); color: #fff; background: rgba(0,0,0,.62); padding: 3px 7px; border-radius: 5px; }
@media (max-width: 1020px) { .examples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .examples-page .p-hero .wide { display: block; } .examples-page .p-hero .lede { margin-top: 20px; } }
@media (max-width: 620px) { .example-tools { flex-wrap: wrap; gap: 12px; } .example-sort { margin-left: 0; } .examples-grid { grid-template-columns: 1fr; } .examples-page .p-hero .lede { font-size: 16px; } }
.filters { position: sticky; top: var(--nav); z-index: 20; margin: clamp(48px, 6vw, 72px) 0 36px; padding: 12px 0; background: rgba(252, 252, 252, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.filters .wide { display: flex; flex-wrap: wrap; gap: 6px; }
.filters a { flex: none; height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; font: 500 13.5px/1 var(--sans); color: var(--dim); transition: background .15s, color .15s, box-shadow .15s; }
.filters a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.filters a small { font: 400 11px/1 var(--mono); color: var(--faint); }
.filters a[aria-current="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.filters a[aria-current="true"] small { color: #8a8a8a; }

/* examples: one gallery (strongest first, 24 at a time), then the effects, 3-up; a card is a button that opens the film player */
.more-btn { display: flex; margin: 48px auto 0; height: 44px; padding: 0 22px; }
.more-btn[hidden] { display: none; }
.fx-sec { margin-top: clamp(80px, 9vw, 120px); }
.fx-sec[hidden], .gal[hidden] { display: none; }
.fg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fg-h h2 { margin: 0; font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.fg-h p { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card .sub { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--dim); }
.card.fx .t { font-size: 15px; }
.card.fx .s.q { font-size: 13px; }
button.card { width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.card:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 6px; border-radius: var(--r-lg); }
.card .frame.fit img { object-fit: contain; }
.card .frame .tag b { margin-right: 7px; padding-right: 7px; border-right: 1px solid rgba(255, 255, 255, .35); font-weight: 500; }
.card .frame .dur { position: absolute; right: 12px; bottom: 12px; z-index: 1; height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 6px; background: rgba(0, 0, 0, .62); font: 500 11px/1 var(--mono); color: #fff; }
.card .frame .pbtn { position: absolute; left: 50%; top: 50%; z-index: 1; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.9); transition: opacity .2s, transform .3s var(--out); }
.card .frame .pbtn svg { width: 22px; height: 22px; margin-left: 3px; }
.card:hover .frame .pbtn, .card:focus-visible .frame .pbtn { opacity: 1; transform: none; }
.card .s.q { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (hover: none) { .card.ultra .frame .pbtn { opacity: .9; transform: none; width: 46px; height: 46px; margin: -23px 0 0 -23px; } }

/* terminal */
.term { border-radius: var(--r-lg); background: var(--night); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5); overflow: hidden; }
.term-bar { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid var(--night-line); }
.term-bar button, .term-bar span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: none; font: 500 13px/1 var(--sans); color: var(--on-night-muted); }
.term-bar button { cursor: pointer; transition: color .15s, background .15s; }
.term-bar button img { width: 14px; height: 14px; filter: invert(1); opacity: .55; }
/* after the first two, tabs are icons; the chosen one shows its name */
.term-bar button.ico span { display: none; }
.term-bar button.ico[aria-selected="true"] span { display: inline; height: auto; padding: 0; }
.term-bar { flex-wrap: wrap; }
.term-bar button[aria-selected="true"] { background: var(--night-3); color: var(--on-night); }
.term pre { margin: 0; min-height: 240px; padding: 24px 26px 28px; font: 400 13.5px/1.85 var(--mono); color: #e3e6eb; white-space: pre-wrap; overflow-wrap: anywhere; }
.term pre[hidden] { display: none; }
.term .p { color: var(--g2); } .term .o { color: #7d8490; } .term .s { color: #f0c98d; } .term .c { color: #5c6370; }

/* pricing */
.bill { display: inline-flex; gap: 2px; margin-top: 34px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.bill button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font: 500 14px/1 var(--sans); color: var(--dim); cursor: pointer; }
.bill button em { font: 500 11px/1 var(--mono); font-style: normal; color: var(--tl-accent); }
.bill button[aria-checked="true"] { background: var(--ink); color: #fff; } .bill button[aria-checked="true"] em { color: #7fe0c8; }
.cmp-wrap { overflow-x: auto; }
.cmp-note { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.how-c { position: relative; padding: 26px 24px; border-radius: 20px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--line); }
.how-d { display: block; margin-bottom: 30px; font-size: 38px; line-height: 0; }
.how-c h3 { margin: 0; font: 600 18px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.how-c p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--dim); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(56px, 7vw, 80px); }
.plan { display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 20px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .03); }
.plan.hi { background: linear-gradient(180deg, #16181c, #0b0c0f); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.plan.hi { background: var(--night); color: var(--on-night); box-shadow: none; }
.plan h3 { display: flex; justify-content: space-between; align-items: center; min-height: 22px; margin: 0; font: 600 16px/1 var(--sans); letter-spacing: -.01em; }
.plan .price { margin: 26px 0 0; font: 600 46px/1 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.plan .sub { margin: 8px 0 0; font: 400 12px/1.3 var(--mono); color: var(--faint); }
.plan.hi .sub { color: var(--on-night-muted); }
.plan.hi .price { color: #fff; }
.plan .price small { font: 400 13.5px/1 var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.plan .for { margin: 14px 0 0; min-height: 44px; font-size: 14.5px; color: var(--dim); }
.steps { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; min-height: 60px; margin: 4px 0 14px; }
.steps button { height: 28px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--bg-2); font: 500 12px/1 var(--mono); color: var(--dim); cursor: pointer; transition: background .15s, color .15s; }
.steps button:hover { color: var(--ink); }
.steps button[aria-checked="true"] { background: var(--ink); color: #fff; }
.plan.hi .steps button { background: rgba(255, 255, 255, .08); color: var(--on-night-dim); }
.plan.hi .steps button[aria-checked="true"] { background: #fff; color: var(--ink); }
.plan ul { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.plan li { position: relative; padding: 6px 0 6px 22px; color: var(--dim); }
.plan li::before { content: ''; position: absolute; left: 1px; top: 12px; width: 10px; height: 5.5px; border-left: 1.5px solid var(--tl-accent); border-bottom: 1.5px solid var(--tl-accent); transform: rotate(-45deg); }
.plan .btn { width: 100%; }
.plan.hi .for, .plan.hi li, .plan.hi .price small { color: var(--on-night-dim); }
.plan.hi ul { border-color: var(--night-line); }
.plan.hi .btn-ink { background: #fff; color: var(--ink); }
.plan.hi li::before { border-color: var(--g2); }
.plan .pop { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: rgba(60, 188, 147, .16); color: var(--g2); font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.note-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; font: 400 12.5px/1.4 var(--mono); color: var(--faint); }
.note-row a { color: var(--ink); }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 15px 12px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.compare thead th { position: sticky; top: var(--nav); background: rgba(252, 252, 252, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 600 14px/1 var(--sans); color: var(--ink); border-bottom-color: var(--ink); }
.compare tbody th { color: var(--ink); }
.compare td { color: var(--dim); }
.compare .grp th { padding-top: 40px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-2); }
.compare .y { color: var(--tl-accent); font-weight: 600; }
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font: 600 18px/1.35 var(--sans); letter-spacing: -.02em; color: var(--ink); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq details p { margin: -4px 0 24px; max-width: 680px; color: var(--dim); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }

/* quickstart: three doors, then each way in as steps on a track */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.door { position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px; border-radius: 22px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .03); }
.door-d { position: absolute; right: 26px; top: 26px; font-size: 42px; line-height: 0; transform: rotate(-5deg); }
.door h2 { margin: 18px 0 0; font: 600 24px/1.15 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.door > p:not(.label) { margin: 10px 0 24px; font-size: 15px; line-height: 1.55; color: var(--dim); }
.door-a { display: flex; align-items: center; gap: 18px; margin-top: auto; }
.door-a .link { font-size: 14px; }
.qs-head { margin-bottom: 44px; } .qs-head .label { margin-bottom: 20px; }
.qs-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.qs-v { position: sticky; top: calc(var(--nav) + 40px); }
.track { position: relative; max-width: 820px; margin: 0; padding: 0 0 0 44px; list-style: none; counter-reset: s; }
.track::before { content: ''; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--tl-accent), rgba(31, 138, 134, .12)); }
.track li { position: relative; padding: 0 0 38px; counter-increment: s; }
.track li::before { content: counter(s, decimal-leading-zero); position: absolute; left: -44px; top: 0; width: 26px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--c); color: #fff; font: 500 10.5px/1 var(--mono); }
.track h3 { margin: 0; font: 600 21px/1.25 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.track p { margin: 8px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--dim); }
.track .link { margin-top: 14px; font-size: 14.5px; }
.tries { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.tries a { padding: 9px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; color: var(--ink); transition: box-shadow .2s, transform .2s var(--out); }
.tries a:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 24px -14px rgba(0, 0, 0, .25); transform: translateX(3px); }
.agent-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.rec { padding: 26px 26px 24px; border-radius: 20px; background: linear-gradient(180deg, rgba(220, 241, 229, .7), rgba(255, 255, 255, .6)); box-shadow: inset 0 0 0 1px rgba(31, 138, 134, .22); }
.rec-tag { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--tl-accent); color: #fff; font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rec h3, .then, .byhand { margin: 14px 0 0; font: 600 20px/1.25 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.rec p { margin: 8px 0 20px; font-size: 15px; line-height: 1.6; color: var(--dim); }
.then { margin-top: 36px; }
.byhand { margin: 0 0 16px; } .byhand span { font-weight: 400; color: var(--muted); font-size: 15px; letter-spacing: -.01em; }
.says { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.says li { padding: 11px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; color: var(--ink); }
.fine { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.term pre { min-height: 150px; }

/* closing band */
.close { position: relative; margin-top: clamp(110px, 13vw, 180px); text-align: center; }
.close::before { content: ''; position: absolute; left: 50%; top: -60px; width: 900px; height: 420px; transform: translateX(-50%); pointer-events: none; z-index: -1; background: radial-gradient(40% 50% at 30% 50%, rgba(212, 240, 226, .9), transparent 70%), radial-gradient(40% 50% at 70% 45%, rgba(227, 224, 247, .9), transparent 72%); filter: blur(30px); }
.close .d2 { max-width: 820px; margin: 0 auto; }
.close .ctas { justify-content: center; }

@media (max-width: 1020px) {
  .row, .row.flip, .split, .agent-grid, .qs-body { grid-template-columns: 1fr; } .qs-v { position: static; }
  .doors { grid-template-columns: 1fr; } .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row.flip > :first-child { order: 0; }
  .ticks.tri { grid-template-columns: 1fr; }
  .grid, .tiles, .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid, .tiles, .grid.two, .plans, .how { grid-template-columns: 1fr; }
  .filters .wide { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .filters .wide::-webkit-scrollbar { display: none; }
  .compare { font-size: 13.5px; } .compare th, .compare td { padding: 12px 6px; }
  .p-media .frame { border-radius: var(--r); }
}
.sec-night { margin-top: clamp(96px, 12vw, 168px); }

/* ── pricing ── */
a.u { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .15s; }
a.u:hover { text-decoration-color: currentColor; }
.plan .also { margin: 22px 0 -8px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan.hi .also { color: var(--on-night-muted); }
.plan .also + ul { border-top: 0; padding-top: 12px; }
/* on every plan: four facts under the cards */
.all-plans { margin-top: 56px; padding: 26px 28px; border-radius: 20px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--line); }
.all-plans ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; margin: 18px 0 0; padding: 0; list-style: none; }
.all-plans li { font-size: 14px; line-height: 1.5; color: var(--dim); }
.all-plans li span { display: block; margin-bottom: 14px; font-size: 30px; line-height: 0; }
.all-plans li b { display: block; margin-bottom: 3px; font: 600 15.5px/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
/* the comparison: a feature's note under its name, rows that are the same for everyone span the plans */
.compare th small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.compare tbody th { width: 34%; }
.compare td.all { text-align: center; color: var(--dim); }
.compare tbody tr:not(.grp):hover > * { background: rgba(0, 0, 0, .018); }
/* open source: a night band — the pitch and the install on the left, how it differs from the app on the right */
.os { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 88px); align-items: start; padding-top: clamp(88px, 10vw, 140px); padding-bottom: clamp(88px, 10vw, 140px); }
.os .d2 { margin-top: 20px; } .os .lede { margin-top: 24px; }
.os-code { margin-top: 30px; border-radius: 14px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); overflow: hidden; }
.os-bar { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--night-line); font: 500 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--on-night-muted); }
.os-copy { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .06); font: 500 11.5px/1 var(--mono); color: var(--on-night-dim); cursor: pointer; }
.os-copy:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.os-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 13.5px/1.75 var(--mono); color: var(--on-night); }
.os-code .c { color: var(--on-night-muted); }
.os .ctas { margin-top: 28px; }
.os-cmp { padding: 8px 28px 22px; border-radius: 20px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); overflow-x: auto; }
.os-cmp table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.os-cmp th, .os-cmp td { padding: 14px 10px; border-bottom: 1px solid var(--night-line); text-align: left; vertical-align: top; font-weight: 400; }
.os-cmp thead th { padding-top: 18px; font: 600 14.5px/1 var(--sans); color: var(--on-night); }
.os-cmp tbody th { width: 28%; padding-left: 0; color: var(--on-night-muted); }
.os-cmp thead th:first-child { padding-left: 0; }
.os-cmp td { color: var(--on-night-dim); }
.os-cmp td:last-child { color: var(--on-night); }
.os-fine { margin: 16px 0 0; font-size: 12.5px; color: var(--on-night-muted); }
@media (max-width: 1020px) {
  .all-plans ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .all-plans { padding: 22px 20px; } .all-plans ul { grid-template-columns: 1fr; }
  .cmp-wrap { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
  .compare { min-width: 600px; }
  /* the feature column stays put while the plans scroll under it */
  .compare tbody tr:not(.grp) th, .compare thead th:first-child { position: sticky; left: calc(var(--pad) * -1); z-index: 1; width: 150px; min-width: 150px; padding-left: var(--pad); background: var(--bg); box-shadow: 1px 0 0 var(--line); }
  .compare thead th:first-child { z-index: 2; }
  .compare .grp th span { position: sticky; left: 0; }
  .os-cmp { padding: 4px 18px 18px; }
}