/* Design tokens — every :root custom property from the prototype. */

html {scroll-behavior:smooth;scroll-padding-top:0}

:root {--motion-out:cubic-bezier(.22,1,.36,1);--motion-soft:cubic-bezier(.2,.65,.3,1)}

@media(prefers-reduced-motion:reduce) {
html {scroll-behavior:auto}
}
/* Page styles, verbatim from the prototype. Components keep the same class names. */

@font-face {font-family:NorthlitSans;src:url("/fonts/northlit-sans.woff2") format('woff2');font-display:swap;font-weight:100 900}

* {box-sizing:border-box}

body {margin:0;background:#111113;color:#fbfbfc;font:16px/1.55 NorthlitSans,Arial,sans-serif}

h1,h2,h3,p {margin:0}

h1,h2,h3 {line-height:1.03;letter-spacing:-.055em;font-weight:500}

a {color:inherit;text-decoration:none}

button {font:inherit;cursor:pointer}

button,a {-webkit-tap-highlight-color:transparent}

button:focus-visible,a:focus-visible {outline:3px solid #f5501e;outline-offset:5px}

img {display:block;width:100%;height:100%;object-fit:cover}

em {font-style:normal;color:#f5501e}

.wrap {width:calc(100% - 128px);max-width:1440px;margin-inline:auto}

.grid {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}

.skip {position:fixed;top:-100px;left:16px;z-index:99;background:white;color:black;padding:16px}

.skip:focus {top:16px}

.logo {font-size:28px;font-weight:600;letter-spacing:-1.4px;white-space:nowrap}

.logo span {color:#f5501e}

header {align-items:center;padding-block:32px;border-bottom:1px solid #ffffff26}

header>.logo {grid-column:span 4}

header nav {grid-column:span 5;display:flex;gap:24px;font-size:14px}

header>.header-cta {grid-column:span 3;justify-self:end;font-size:14px;border-bottom:1px solid #777}

.kicker,.label {font:12px/1.5 monospace;letter-spacing:.055em}

.kicker {color:#a5a5ae}

h1 {font-weight:600}

.hero-copy .lead {letter-spacing:-.04em;margin-bottom:24px;color:#fff}

.lead span {color:#f5501e}

.hero-copy>p {color:#b2b2ba}

.button {display:inline-flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px;padding:16px 24px;min-height:48px}

.orange {background:#f5501e;color:#111113}

.hero-art {grid-column:span 10;height:560px;position:relative;overflow:hidden;background:#343432}

.hero-art img {object-position:center 55%}

.hero-art:after {content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#000b)}

.art-caption {position:absolute;bottom:32px;inset-inline:32px;display:flex;justify-content:space-between;font-size:12px;line-height:1.5;font-family:NorthlitSans,Arial,sans-serif;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em;z-index:1}

.frame-mark {position:absolute;inset:56px 64px;pointer-events:none}

.frame-mark i {position:absolute;inset:0;border:1px solid #ffffff45}

.frame-mark i:nth-child(2) {inset:12% 12%}

.frame-mark i:nth-child(3) {inset:24% 24%}

.hero-side {grid-column:span 2;align-self:end;font-size:12px;line-height:1.5;font-family:NorthlitSans,Arial,sans-serif;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em}

.hero-side>span {font-size:40px;letter-spacing:-2px;display:block;margin-bottom:24px}

.hero-side p {color:#a5a5ae}

.section-heading {align-items:end}

.section-heading>.kicker {grid-column:span 2;align-self:start}

.section-heading>h2 {grid-column:span 6}

.section-heading>p:last-child {grid-column:span 4;color:#b2b2ba}

.brief {border-top:1px solid #444;border-bottom:1px solid #444}

.brief>div:nth-child(1) {grid-column:span 3}

.brief>div:nth-child(2) {grid-column:span 5}

.brief>div:nth-child(3) {grid-column:span 4}

.brief .label {display:block;color:#a5a5ae;margin-bottom:16px}

.brief strong {display:block;font-size:22px;letter-spacing:-1px}

.brief small {color:#aaa}

.brief p {color:#c4c4ca;max-width:40ch}

.demo-toolbar,.preview-toolbar {display:flex;justify-content:space-between;gap:24px;align-items:center;padding:16px 0;font:12px monospace}

.badge {padding:8px 12px;border:1px solid #666}

.choices {display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}

.choice {color:white;border:1px solid #444;padding:0;text-align:left;transition:border-color .2s}

.choice.active {border-color:#f5501e}

.choice-top {display:flex;justify-content:space-between;font:12px monospace;gap:8px}

.choice-state {color:#aaa}

.active .choice-state {color:#ff845c}

.mini {position:relative;overflow:hidden;color:#111;background:#eeece7}

.nh {font-size:12px;font-weight:700;letter-spacing:-.04em;position:relative;z-index:2}

.mini h3 {position:relative;z-index:2;font-weight:600}

.mini-editorial h3 {max-width:50%}

.mini-editorial img {position:absolute;right:0;bottom:0;width:52%;height:78%}

.mini-foot {position:absolute;bottom:16px;left:24px;font:10px/1.5 monospace;z-index:2}

.mini-editorial .mini-foot {writing-mode:vertical-rl;left:8px;font-size:9px}

.mini-immersive {color:white}

.mini-immersive img {position:absolute;inset:0}

.mini-immersive:after {content:'';position:absolute;inset:0;background:linear-gradient(#0006,transparent,#0009)}

.mini-immersive h3 {font-weight:400}

.mini-pair {display:grid;grid-template-columns:1fr 1fr;gap:8px;height:128px}

.choice-bottom strong {font-weight:500;letter-spacing:-.03em}

.choice-bottom p {font-size:14px;color:#a5a5ae;margin-top:8px}

.decision>.kicker {grid-column:span 2}

.decision>div {grid-column:span 6}

.decision p:not(.kicker) {color:#b2b2ba}

.decision>a {grid-column:span 4;justify-self:end}

.text-link {font-size:14px;border-bottom:1px solid #666;padding-bottom:8px}

.disclosure {color:#a5a5ae;font-size:12px}

.system {padding-block:96px;background:#eeece7;color:#111113}

.system .kicker,.pricing .kicker {color:#62626a}

.system .section-heading>p:last-child,.pricing .section-heading>p:last-child {color:#62626a}

.brand-spec>p {color:#62626a;max-width:35ch}

.brand-spec dl {font-size:12px}

.brand-spec dl>div {border-top:1px solid #ccc;display:flex;justify-content:space-between;gap:16px;padding:16px 0}

.brand-spec dd {margin:0;text-align:right}

.swatches {display:flex;gap:8px}

.swatches span {width:24px;height:24px;background:var(--swatch);border:1px solid #ccc}

.component-sheet {align-self:start;padding:32px;background:#fbfbfc;border:1px solid #d1d1d1}

.sheet-meta {display:flex;justify-content:space-between;gap:24px;font:12px/1.5 monospace}

.sheet-meta>span:last-child {max-width:18ch;color:#777}

.type-sample {font-size:128px;line-height:1;font-weight:650;letter-spacing:-.06em;margin-block:56px}

.type-sample>span {display:block;font-size:32px;margin-top:16px}

.sample-components {display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}

.sample-components>a {background:#111;color:white;padding:16px;font-size:14px}

.sample-components>span {font:12px monospace}

.spec-note {border-top:1px solid #ccc;padding-top:24px;margin-top:32px;grid-template-columns:1fr 1.618fr;gap:24px;font-size:14px}

.spec-note>span {font:12px monospace}

.preview-toolbar {background:#262628;padding:16px 24px;border:1px solid #444}

.preview-toolbar>div {display:flex;gap:8px}

.preview-toolbar button {font:12px monospace;background:transparent;color:#bbb;border:1px solid #555;padding:8px 16px;min-height:40px}

.preview-toolbar button[aria-pressed=true] {background:#eeece7;color:#111}

.preview-stage {background:#242425;padding:32px;display:flex;justify-content:center;border:1px solid #444;border-top:0;min-width:0}

.preview-stage iframe {display:block;border:0;width:100%;max-width:100%;height:680px;background:#eeece7;transition:width .5s ease}

.preview-stage.mobile iframe {width:390px}

.handoff {padding-top:64px}

.handoff>div {color:#b2b2ba}

.handoff ul {list-style:none;padding:0;margin:24px 0 0;font-size:14px}

.handoff li:before {margin-right:12px;color:#f5501e}

.agent {border-top:1px solid #444}

.agent>div>p:not(.kicker) {color:#b2b2ba}

.prompt {margin-top:32px;border-top:1px solid #555;padding-top:24px}

.prompt p {font:16px/1.6 monospace}

.prompt button {background:none;color:#ff845c;border:0;border-bottom:1px solid #ff845c;padding:16px 0;margin-top:16px;font-size:14px}

#copy-status {font-size:14px;margin-top:16px}

.pricing {padding-block:96px;background:#eeece7;color:#111}

.plans article {grid-column:span 4;border-top:1px solid #111;padding-top:24px}

.plans h3 {font-size:40px;margin:32px 0 24px}

.price {font-size:64px;line-height:1;letter-spacing:-.065em}

.price span {font-size:14px;letter-spacing:0;margin-left:8px;color:#62626a}

.plans ul {list-style:none;margin:32px 0;padding:0;line-height:2;font-size:16px}

.plan-cta {display:block;padding:16px 0;border-top:1px solid #bbb;font-size:14px}

.definitions {border-block:1px solid #bbb;padding-block:24px;margin-top:40px}

.definitions>p {grid-column:span 4;font-size:14px;color:#62626a}

.definitions b {font-weight:500;color:#111}

.enterprise {display:flex;gap:32px;justify-content:space-between;align-items:center;padding-top:32px}

.enterprise h3 {font-size:28px}

.enterprise p span {color:#62626a;font-size:12px}

.enterprise a {font-size:14px;border-bottom:1px solid #999}

.closing {padding-block:112px;align-items:end}

.closing>.kicker {grid-column:1/-1}

.closing h2 {grid-column:span 8;font-size:clamp(80px,10vw,160px);font-weight:600;line-height:.9;letter-spacing:-.07em}

.closing>div {grid-column:span 4}

.closing>div>p {font-size:20px;margin-bottom:32px;color:#b2b2ba}

footer {border-top:1px solid #444;padding-block:32px;display:flex;justify-content:space-between;gap:24px;align-items:center}

footer p,footer>span,footer>a:not(.logo) {font-size:12px;color:#a5a5ae}

dialog {max-width:560px;width:calc(100% - 32px);background:#eeece7;color:#111;border:0;padding:48px}

dialog::backdrop {background:#000b}

dialog h2 {font-size:48px;margin:24px 0}

dialog p {margin-bottom:24px}

dialog .dialog-close {position:absolute;right:16px;top:8px;background:none;border:0;padding:8px;font-size:28px}

dialog .kicker {color:#666}

body:has(dialog[open]) {overflow:hidden}

@media(max-width:1100px) {
.wrap {width:calc(100% - 64px)}
.grid {gap:24px}
header>.logo {grid-column:span 3}
header nav {grid-column:span 6}
.hero-copy {padding-top:40px}
.hero-copy .lead {font-size:24px}
.hero-art {height:480px}
.section-heading>h2 {font-size:48px}
.mini {padding:16px}
.mini h3 {font-size:40px}
.mini-systematic h3 {font-size:28px}
.mini-pair {height:104px}
.choice-top {font-size:12px;padding:12px;flex-wrap:wrap}
.price {font-size:48px}
.component-sheet {grid-column:5/span 8}
.brand-spec {padding:0}
.hero-copy .button {padding:16px}
.brand-spec h3 {font-size:40px}
.preview-stage {padding:24px}
footer {flex-wrap:wrap}
}

@media(max-width:760px) {
.wrap {width:calc(100% - 40px)}
.grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
header {padding-block:24px;row-gap:24px}
header>.logo {grid-column:span 2}
header>.header-cta {grid-column:span 2;grid-row:1}
header nav {grid-row:2;grid-column:1/-1;gap:24px;flex-wrap:wrap}
.hero-copy {padding-top:0}
.hero-copy .lead {font-size:24px}
.hero-art {grid-column:1/-1;height:400px;margin-top:16px}
.hero-side {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}
.hero-side>span {margin:0;font-size:28px}
.hero-side p {display:flex;gap:8px}
.frame-mark {inset:40px 24px}
.art-caption {inset-inline:16px;bottom:16px;font-size:12px;gap:16px}
.art-caption span {max-width:16ch}
.section-heading>.kicker,.section-heading>h2,.section-heading>p:last-child {grid-column:1/-1}
.brief {margin-bottom:24px;gap:24px}
.brief p {max-width:100%}
.brief .label {margin-bottom:8px}
.choices {overflow-x:auto;scroll-snap-type:x mandatory}
.choice {flex:0 0 87%;scroll-snap-align:start;min-width:0}
.mini-pair {height:128px}
.decision>.kicker,.decision>div,.decision>a {grid-column:1/-1;justify-self:start}
.system,.pricing {padding-block:64px}
.brand-spec>p {max-width:100%}
.component-sheet {padding:24px}
.sheet-meta {font-size:12px}
.sheet-meta>span:last-child {display:none}
.type-sample {font-size:104px;margin-block:40px}
.spec-note {grid-template-columns:1fr}
.prototype-section {padding-block:64px}
.preview-toolbar {padding:16px 12px;flex-wrap:wrap;font-size:12px;gap:16px}
.preview-stage {padding:8px}
.preview-stage iframe {height:600px}
.handoff {padding-top:40px}
.handoff>.kicker,.handoff>h3,.handoff>div {grid-column:1/-1}
.agent>div:first-child,.agent>div:last-child {padding-top:0}
.plans {gap:32px}
.plans article,.plans article+article {grid-column:1/-1;border-left:0;padding:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plans .label {grid-column:1/-1}
.plans h3 {margin:0;font-size:32px}
.price {text-align:right;font-size:44px}
.price span {display:block;font-size:12px;line-height:1.5}
.plans ul {grid-column:1/-1;margin:0}
.plan-cta {grid-column:1/-1}
.definitions>p {grid-column:1/-1}
.enterprise {display:block}
.closing {padding-block:64px}
.closing h2 {grid-column:1/-1;font-size:clamp(64px,16vw,112px)}
.closing>div {grid-column:1/-1}
.closing>div>p {font-size:18px}
footer {gap:24px}
footer p {width:100%;order:2}
footer>.logo {font-size:24px}
footer>span {order:3}
dialog {padding:40px 24px}
}

@media(prefers-reduced-motion:reduce) {
*,*:before,*:after {transition:none!important;animation:none!important}
}

h2,h3 {letter-spacing:-.035em}

.section-heading {display:block;max-width:none;margin-bottom:48px}

.section-heading>.kicker {margin-bottom:16px}

.section-heading>h2 {font-size:clamp(40px,4vw,56px);line-height:1.1}

.section-heading>p:last-child {margin-top:20px;max-width:56ch}

.brief>div:nth-child(n) {grid-column:span 4}

.choice-top,.choice-bottom {padding-inline:24px}

.decision>.kicker {margin-bottom:12px}

.decision p:not(.kicker) {max-width:58ch}

.decision>.text-link {display:inline-block;margin-top:16px}

.disclosure {max-width:88ch;margin-top:24px}

.brand-spec {grid-column:span 4;padding-right:0}

.component-sheet {grid-column:5/span 8}

.brand-spec h3 {font-size:32px;margin:24px 0 16px}

.brand-spec dl {margin-top:32px}

.sheet-meta {align-items:start}

.type-sample>span {letter-spacing:-.025em;line-height:1.3;font-weight:500}

.spec-note {display:block}

.spec-note>span {display:block;margin-bottom:12px}

.spec-note p {max-width:56ch}

.mini-systematic {display:flex;flex-direction:column}

.mini-systematic .mini-pair {min-height:0;flex:1}

.mini-systematic .mini-foot {position:static;display:block;flex-shrink:0;margin-top:12px;font-size:10px}

.handoff {grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 32px;align-items:start}

.handoff>.kicker {grid-column:1/5}

.handoff>h3 {grid-column:1/5;grid-row:2;font-size:28px}

.handoff>div {grid-column:5/-1;grid-row:1/3}

.handoff ul {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;line-height:1.6}

.agent {align-items:start}

.agent>div:first-child {grid-column:span 4}

.agent>div:last-child {grid-column:span 8;padding-top:0}

.agent h2 {font-size:clamp(40px,4vw,56px);line-height:1.1;margin-top:16px}

.agent>div>p:not(.kicker) {max-width:56ch}

.prompt {max-width:640px}

.prompt p {max-width:48ch}

.plans article+article {border-left:0;padding-left:0}

.definitions {column-gap:32px}

.experience {padding-block:96px}

.prototype-section {padding-block:96px 64px}

.agent {padding-block:64px 96px}

@media(max-width:1100px) {
.choice-top,.choice-bottom {padding-inline:16px}
.handoff {gap:16px 24px}
.handoff ul {display:block}
.handoff li+li {margin-top:8px}
}

@media(max-width:760px) {
.section-heading {margin-bottom:32px}
.section-heading>h2 {font-size:36px}
.section-heading>p:last-child {margin-top:16px}
.brand-spec,.component-sheet {grid-column:1/-1}
.decision {max-width:100%}
.decision h3 {font-size:26px}
.brand-spec h3 {font-size:28px}
.handoff {display:block}
.handoff>h3 {margin:16px 0;font-size:28px}
.handoff>div {margin-top:16px}
.agent>div:first-child,.agent>div:last-child {grid-column:1/-1}
.agent h2 {font-size:36px;max-width:16ch}
.experience,.prototype-section {padding-block:64px}
.agent {padding-block:48px 64px}
.plans {margin-top:32px}
.type-sample>span {font-size:26px;letter-spacing:-.025em}
.definitions {gap:24px}
}

.hero {padding-top:64px;align-items:center;row-gap:32px}

.hero-title {grid-column:span 8}

.hero-copy {padding-top:0;grid-column:span 4}

h1 {font-size:clamp(48px,5.5vw,88px);line-height:1.05;letter-spacing:-.05em;margin-top:24px;max-width:16ch}

.hero-title .kicker {font-size:13px;letter-spacing:.02em;color:#c1c1c8}

.hero-copy .lead {font-size:24px;line-height:1.3}

.hero-copy>p {max-width:42ch}

.hero-actions {display:flex;align-items:flex-start;flex-direction:column;gap:24px;margin-top:24px}

.hero-copy .button {margin-top:0}

.hero-actions .text-link {line-height:1.5}

.experience {padding-top:64px}

.experience .section-heading {margin-bottom:32px}

.exploration-canvas {border:1px solid #454549;background:#1a1a1d;padding:24px}

.demo-toolbar {padding:0 0 24px;font-size:13px}

.badge {font-size:12px;color:#d2d2d8}

.brief {margin-bottom:24px;padding:24px 0;gap:24px}

.brief small {font-size:13px}

.brief p {font-size:14px}

.choices {gap:24px}

.choice {background:#111113;min-width:0}

.choice-top {padding:16px;font-size:12px}

.choice-bottom {padding:24px 16px}

.choice-bottom strong {font-size:18px}

.mini {height:304px;padding:16px}

.mini h3 {font-size:clamp(28px,3.2vw,48px)}

.mini-editorial h3 {margin-top:24px}

.mini-systematic h3 {font-size:clamp(24px,2.4vw,34px);margin:24px 0 16px}

.mini-immersive h3 {margin-top:112px}

.mini-pair {min-height:0}

.refinement {margin-top:48px;padding-top:48px;border-top:1px solid #444;align-items:start}

.refinement>div:first-child {grid-column:span 4}

.refinement>div:last-child {grid-column:span 8}

.refinement h3 {font-size:28px;line-height:1.2;margin:16px 0}

.refinement p:not(.kicker):not(.label) {color:#bdbdc5;max-width:58ch}

.refine-panel {padding:32px;border:1px solid #454549;background:#1a1a1d}

.refine-panel>.label {color:#aaaab4;margin-bottom:24px}

.refine-panel>p:nth-child(2) {font-size:22px!important;color:#f6f6f8!important;line-height:1.4}

.refine-actions {display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 16px}

.refine-actions button {font-size:14px;min-height:48px;padding:12px 16px;border:1px solid #666;background:transparent;color:#e2e2e8}

.refine-actions button[aria-pressed=true] {background:#eeece7;color:#111113;border-color:#eeece7}

#refine-status {font-size:14px;min-height:3em}

.component-sheet {transition:padding .25s ease}

body[data-spacing=open] .component-sheet {padding:48px}

body[data-spacing=open] .type-sample {margin-block:72px}

.handoff strong,.handoff li span {display:block}

.handoff li:before {content:none}

.handoff strong {color:#fff;font-weight:500;font-size:16px;margin-bottom:8px}

.handoff .handoff-note {font-size:14px;margin-top:24px;max-width:66ch;color:#aaaab4}

.example-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}

.example-card {display:block;min-width:0}

.example-card>.label {color:#aaaab4;margin:24px 0 12px;font-size:12px}

.example-card h3 {font-size:24px;line-height:1.25;margin-bottom:12px}

.example-card>p:not(.label) {font-size:16px;color:#bdbdc5;max-width:35ch}

.example-link {display:inline-block;font-size:14px;margin-top:24px;border-bottom:1px solid #666;padding-bottom:8px}

.example-art,.product-tile {overflow:hidden;position:relative}

.example-art:after {content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#000c)}

.example-art>span {position:absolute;left:24px;bottom:24px;font-size:26px;line-height:1.1;letter-spacing:-.03em;z-index:1}

.fashion-example img {object-position:center 24%}

.fashion-example>span {font-size:32px}

.product-tile {background:#e4eaff;color:#152337;padding:24px}

.product-tile-head {display:flex;justify-content:space-between;border-bottom:1px solid #b5bed3;padding-bottom:24px;font-size:12px}

.product-tile>strong {font-size:28px;font-weight:500;letter-spacing:-.04em;display:block;margin:24px 0}

.tile-metrics {display:flex;gap:24px;margin-bottom:24px;font-size:12px}

.tile-metrics b {display:block;font-size:28px;line-height:1.25;font-weight:500}

.tile-row {display:flex;justify-content:space-between;gap:8px;font-size:12px;border-top:1px solid #bac4d9;padding:12px 0}

.tile-row>span:last-child {color:#485c77}

.usage-example {padding:32px 0;border-top:1px solid #bfbfbc;margin-top:32px;align-items:start}

.usage-example>div:first-child {grid-column:span 4}

.usage-example>div:last-child {grid-column:span 8}

.usage-example h3 {font-size:28px;line-height:1.2;margin-top:16px}

.usage-example>div>p:not(.kicker) {color:#53535b;max-width:64ch}

.usage-example>div>p+p {margin-top:16px}

.usage-example .text-link {display:inline-block;margin-top:24px}

.faq {padding-block:96px}

.faq-list {border-top:1px solid #4c4c52}

.faq details {border-bottom:1px solid #4c4c52}

.faq summary {font-size:20px;line-height:1.4;cursor:pointer;position:relative;list-style:none;padding:24px 48px 24px 0}

.faq summary::-webkit-details-marker {display:none}

.faq summary:after {content:'+';position:absolute;right:8px;top:24px;color:#ff845c;font-size:24px;line-height:1}

.faq details[open] summary:after {content:'−'}

.faq details>p {color:#bdbdc5;max-width:76ch;padding:0 48px 24px 0;line-height:1.65}

.faq summary:focus-visible {outline:3px solid #f5501e;outline-offset:4px}

.closing {border-top:1px solid #444}

.agent h2 {max-width:16ch}

.section-heading>h2 {max-width:24ch}

.kicker,.label {line-height:1.6}

@media(max-width:1100px) {
.exploration-canvas {padding:16px}
.choices {gap:16px}
.mini {height:280px}
.mini-immersive h3 {margin-top:104px}
.example-grid {gap:24px}
.product-tile {padding:16px}
.tile-row {font-size:12px}
.product-tile-head {gap:16px}
}

@media(max-width:760px) {
.hero {padding-top:40px}
.hero-title,.hero-copy {grid-column:1/-1}
h1 {font-size:clamp(40px,9.5vw,64px);line-height:1.08;max-width:17ch;margin-top:16px}
.hero-title .kicker {font-size:12px;max-width:34ch}
.hero-copy .lead {display:none}
.hero-copy>p {max-width:100%}
.hero-actions {gap:20px;margin-top:24px}
.experience {padding-block:48px 64px}
.exploration-canvas {padding:16px}
.demo-toolbar {flex-wrap:wrap;gap:12px;padding-bottom:16px}
.brief {padding-block:24px}
.brief>div:nth-child(n) {grid-column:1/-1}
.choices {display:grid;grid-template-columns:1fr;overflow:visible;padding-bottom:0;gap:24px}
.choice {width:100%}
.mini {height:320px;padding:24px}
.mini h3 {font-size:44px}
.mini-systematic h3 {font-size:32px}
.refinement {margin-top:32px;padding-top:32px;gap:24px}
.refinement>div:first-child,.refinement>div:last-child {grid-column:1/-1}
.refine-panel {padding:24px}
.refine-panel>p:nth-child(2) {font-size:20px!important}
.refine-actions {flex-direction:column;align-items:stretch}
.refine-actions button {text-align:left}
body[data-spacing=open] .component-sheet {padding:32px}
body[data-spacing=open] .type-sample {margin-block:48px}
.example-grid {grid-template-columns:1fr;gap:40px}
.product-tile {padding:24px}
.example-card>p:not(.label) {max-width:100%}
.usage-example {gap:24px}
.usage-example>div:first-child,.usage-example>div:last-child {grid-column:1/-1}
.usage-example h3 {font-size:26px}
.faq {padding-block:64px}
.faq summary {font-size:18px}
.faq details>p {padding-right:0}
.handoff ul {display:block}
.handoff li+li {margin-top:24px}
.section-heading>h2 {max-width:24ch}
}

.site-header {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-block:24px;min-height:96px;align-items:center;border-bottom:1px solid #ffffff26}

.site-header>.logo {font-size:30px;grid-column:1;justify-self:start}

.site-header nav {grid-column:2;justify-self:center;justify-content:center;gap:32px}

.site-header nav a {padding-block:12px;color:#c8c8cf;transition:color .2s ease}

.site-header nav a:hover {color:#fff}

.site-header>.header-cta {grid-column:3;justify-self:end;gap:12px;white-space:nowrap;border:1px solid #62626a;padding:12px 20px;min-height:48px;display:inline-flex;align-items:center;font-size:14px;transition:background .2s ease}

.site-header>.header-cta:hover {background:#eeece7;color:#111113}

.photo-hero {padding-top:56px;row-gap:48px;align-items:end}

.photo-hero .hero-title {grid-column:span 8}

.photo-hero .hero-title .kicker {font-size:12px;letter-spacing:.04em;max-width:none;color:#b9b9c1}

.photo-hero h1 {font-size:clamp(64px,7.2vw,112px);line-height:.98;letter-spacing:-.06em;font-weight:600;max-width:none;margin-top:24px}

.photo-hero h1 em {color:#f5501e;font-weight:500}

.photo-hero .hero-copy {grid-column:span 4;padding:0 0 8px}

.photo-hero .hero-copy>p {font-size:16px;line-height:1.65;max-width:37ch;color:#bdbdc5}

.photo-hero .hero-actions {gap:24px;margin-top:32px}

.photo-hero .hero-actions .button {min-width:208px}

.photo-hero .hero-art {grid-column:span 10;position:relative;height:clamp(400px,42vw,640px);margin:0;overflow:hidden;background:#343432}

.photo-hero .hero-art img {object-position:center 55%;width:100%;height:100%}

.photo-hero .hero-art:after {content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}

.photo-hero .frame-mark {inset:48px 56px}

.photo-hero .frame-mark i {border-color:#ffffff30}

.photo-hero .art-caption {inset-inline:32px;bottom:24px;font-size:12px;line-height:1.5;align-items:end;gap:24px}

.photo-hero .art-caption>span:last-child {text-align:right;color:#e4e4e8}

.photo-hero .hero-side {grid-column:span 2;padding-left:0;align-self:end;font:14px/1.6 monospace}

.photo-hero .hero-side>span {font:clamp(32px,3.2vw,48px)/1.2 NorthlitSans,Arial,sans-serif;letter-spacing:-.06em;margin-bottom:24px}

.photo-hero .hero-side>p {color:#aaaab4}

.photo-hero .hero-side>a {display:flex;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid #55555d;border-radius:50%;font:24px NorthlitSans,Arial,sans-serif;margin-top:32px}

.photo-hero .hero-side>a:hover {border-color:#f5501e;color:#ff845c}

.photo-hero+.experience {padding-top:96px}

@media(min-width:1600px) {
.photo-hero h1 {font-size:112px}
.photo-hero .hero-break {display:none}
}

@media(min-width:761px) and (max-width:1050px) {
.site-header nav {gap:20px}
.site-header>.header-cta {padding-inline:16px}
.photo-hero h1 {font-size:clamp(56px,7.2vw,76px)}
.photo-hero .hero-copy>p {font-size:16px}
.photo-hero .hero-actions .button {min-width:0;width:100%;gap:16px;padding-inline:16px}
.photo-hero .hero-actions .text-link {font-size:14px}
.photo-hero .hero-art {height:440px}
.photo-hero .hero-side>span {font-size:32px}
}

@media(max-width:760px) {
.site-header {min-height:80px;padding-block:16px;display:flex;justify-content:space-between;gap:16px}
.site-header>.logo {font-size:26px}
.site-header nav {display:none}
.site-header>.header-cta {padding:12px 16px;font-size:13px;min-height:48px}
.photo-hero {padding-top:40px;row-gap:32px}
.photo-hero .hero-title,.photo-hero .hero-copy {grid-column:1/-1}
.photo-hero .hero-title .kicker {font-size:12px;max-width:32ch}
.photo-hero h1 {font-size:clamp(42px,10vw,76px);line-height:1.04;letter-spacing:-.05em;margin-top:24px}
.photo-hero .hero-break {display:none}
.photo-hero .hero-copy {padding:0}
.photo-hero .hero-copy>p {max-width:44ch}
.photo-hero .hero-actions {margin-top:24px;gap:24px}
.photo-hero .hero-actions .button {min-width:208px}
.photo-hero .hero-art {grid-column:1/-1;height:440px}
.photo-hero .frame-mark {inset:32px 24px}
.photo-hero .art-caption {inset-inline:16px;bottom:16px;font-size:12px;gap:16px}
.photo-hero .art-caption>span {max-width:16ch}
.photo-hero .hero-side {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px}
.photo-hero .hero-side>span {font-size:32px;margin:0}
.photo-hero .hero-side>p {margin:0}
.photo-hero .hero-side>a {margin:0;flex-shrink:0}
.photo-hero+.experience {padding-top:64px}
}

@media(max-width:380px) {
.photo-hero .hero-art {height:360px}
.site-header>.logo {font-size:24px}
.site-header>.header-cta {padding-inline:12px}
.photo-hero .art-caption {font-size:11px}
.photo-hero h1 {font-size:40px}
}

.site-header .cta-icon {width:20px;height:20px;flex:0 0 20px;display:block}

.photo-hero .hero-copy>.hero-point-of-view {font-size:clamp(26px,2.25vw,32px);line-height:1.2;letter-spacing:-.04em;color:#fbfbfc;max-width:24ch;margin-bottom:24px}

.photo-hero .hero-copy>.hero-point-of-view em {color:#f5501e}

.photo-hero .hero-copy>.hero-explanation {font-size:16px;line-height:1.6;max-width:34ch}

.photo-hero .hero-copy>.hero-audience {font-size:14px;line-height:1.5;color:#aaaab4;max-width:35ch;margin-top:32px}

@media(max-width:760px) {
.photo-hero .hero-copy>.hero-point-of-view {font-size:28px;margin-bottom:20px}
.photo-hero .hero-copy>.hero-explanation {max-width:40ch}
.photo-hero .hero-copy>.hero-audience {max-width:40ch;margin-top:24px}
}

[hidden] {display:none!important}

.hero-price {font-size:14px;color:#bdbdc5}

.hero-price:hover {color:#fff}

.hero-canvas {grid-column:span 2;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0;padding-block:8px}

.hero-canvas>.label {font-size:12px;color:#b6b6c0;line-height:1.5}

.hero-canvas>a {display:block;border:1px solid #55555e;padding:8px;min-width:0;background:#1a1a1d}

.hero-canvas>a:hover,.hero-canvas>a:focus-visible {border-color:#f5501e}

.hero-canvas img {width:100%;height:clamp(64px,6vw,104px);object-fit:cover}

.hero-canvas>a>span {display:block;font:12px/1.5 monospace;margin-top:8px;color:#d6d6dd}

.experience .section-heading>h2 {max-width:23ch}

.workflow-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #505058;margin-bottom:24px;scroll-margin-top:24px}

.workflow-tabs button {border:0;border-right:1px solid #505058;background:#1a1a1d;color:#bdbdc5;min-height:80px;text-align:left;padding:24px;font-size:16px;display:flex;align-items:center;gap:16px;line-height:1.35}

.workflow-tabs button:last-child {border-right:0}

.workflow-tabs button>span {font-family:NorthlitSans,Arial,sans-serif;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#a5a5b0}

.workflow-tabs button[aria-selected=true] {background:#eeece7;color:#111113}

.workflow-tabs button[aria-selected=true]>span {color:#af310b}

.workflow-panel {min-width:0}

.workflow-panel:focus-visible {outline:2px solid #f5501e;outline-offset:8px}

.exploration-canvas .brief {margin-bottom:24px}

.exploration-canvas .brief .label {margin-bottom:8px}

.exploration-canvas .brief p {font-size:14px}

.exploration-canvas .mini {height:352px}

.exploration-canvas .mini-immersive h3 {margin-top:160px}

.decision {display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none;border-top:0;margin-top:0;padding-top:24px}

.decision h3 {font-size:24px;margin-bottom:8px}

.decision p {font-size:14px}

.decision .button {flex-shrink:0;border:0}

.refine-stage {padding:32px;background:#eeece7;align-items:start;color:#111113}

.refine-stage .refine-panel {grid-column:span 4;background:transparent;border:0;padding:8px 0}

.refine-stage .component-sheet {grid-column:span 8}

.refine-stage .refine-panel>.label {color:#62626a}

.refine-stage .refine-panel>p:nth-child(2) {color:#111113!important;font-size:24px!important}

.refine-stage .refine-actions {display:grid;grid-template-columns:1fr;gap:12px}

.refine-stage .refine-actions button {color:#111113;text-align:left;background:transparent;border-color:#96969a}

.refine-stage .refine-actions button[aria-pressed=true] {color:white;background:#111113;border-color:#111113}

.refine-stage #refine-status {font-size:14px;line-height:1.6;color:#62626a}

.refine-stage .type-sample {margin-block:32px;font-size:104px}

.refine-stage .type-sample>span {font-size:28px}

.refine-stage .spec-note {margin-top:24px}

.refine-stage .sample-components>span {display:none}

.stage-footer {display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;color:#bdbdc5;font-size:14px}

.stage-footer .button {border:0;flex-shrink:0}

.stage-caption {font-size:14px;color:#bdbdc5;margin-top:16px}

.workflow-panel .preview-stage iframe {height:560px}

.compact-details {border-top:1px solid #505058;border-bottom:1px solid #505058;margin-top:32px}

.compact-details>summary {position:relative;list-style:none;cursor:pointer;padding:24px 48px 24px 0;min-height:64px;font-size:16px;font-weight:500;line-height:1.5}

.compact-details>summary::-webkit-details-marker {display:none}

.compact-details>summary:after {content:'+';position:absolute;right:8px;top:24px;color:#ff845c;font-size:24px;line-height:1}

.compact-details[open]>summary:after {content:'−'}

.compact-details>summary:focus-visible {outline:3px solid #f5501e;outline-offset:4px}

.included-grid {display:grid;grid-template-columns:1fr 2fr;gap:48px;padding-bottom:32px}

.included-grid .brand-spec {padding:0}

.included-grid .brand-spec dl {font-size:14px;margin-top:24px}

.included-grid .brand-spec dl>div {border-color:#505058}

.included-grid h3 {font-size:24px;margin-bottom:24px}

.included-grid ul {list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0}

.included-grid li strong {display:block;font-size:16px;font-weight:500;margin-bottom:8px}

.included-grid li span {font-size:14px;color:#bdbdc5;display:block}

.included-grid>div>p {font-size:14px;color:#bdbdc5;margin-top:24px;max-width:60ch}

.examples {padding-block:0 96px}

.example-card h3 {margin-top:24px}

.example-art,.product-tile {height:400px}

.product-tile>strong {margin-top:40px}

.tile-row {padding-block:16px}

.example-card .example-link {margin-top:16px}

.examples .disclosure {margin-top:24px}

.plans {margin-top:32px}

.pricing .section-heading>p:last-child {font-size:18px}

.pricing-note {color:#53535b;font-size:14px;line-height:1.6;max-width:84ch;margin-top:32px}

.plan-details {border-color:#bdbdbb;margin-top:24px}

.plan-details>summary:after {color:#111113}

.comparison-scroll {overflow-x:auto}

.plan-details table {width:100%;border-collapse:collapse;font-size:14px;text-align:left;margin-bottom:24px;min-width:480px}

.plan-details caption {text-align:left;padding:0 0 16px;color:#62626a;font-size:14px}

.plan-details th,.plan-details td {border-top:1px solid #bdbdbb;padding:16px 24px 16px 0}

.plan-details th {font-weight:500}

.plan-details>p {font-size:14px;line-height:1.6;color:#53535b;max-width:80ch;margin-bottom:24px}

.enterprise {margin-top:32px}

.enterprise p {font-size:16px}

.faq {padding-bottom:64px}

.agent-details {margin-top:32px}

.agent-details>p {font-size:14px;color:#bdbdc5;max-width:76ch;margin-bottom:24px}

.agent-details .prompt {margin:0 0 16px;border-top:0;padding-top:0}

.agent-details #copy-status {font-size:14px;color:#bdbdc5;padding-bottom:16px}

.faq .agent-details>summary {font-size:16px}

.compact-closing {display:flex;justify-content:space-between;align-items:center;gap:32px;padding-block:48px 0;margin-top:64px;border-top:1px solid #505058}

.compact-closing h2 {font-size:clamp(32px,4vw,56px);line-height:1.15}

.compact-closing .button {margin-top:0}

.compact-closing>div {flex-shrink:0}

@media(max-width:1100px) {
.workflow-tabs button {padding:20px;gap:12px;font-size:14px}
.refine-stage {padding:24px;gap:24px}
.refine-stage .component-sheet {padding:24px}
.included-grid {gap:32px}
.included-grid ul {grid-template-columns:1fr;gap:16px}
.hero-canvas>a>span {font-size:12px}
.hero-canvas {gap:12px}
.example-art,.product-tile {height:352px}
}

@media(max-width:760px) {
.hero-canvas {grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0}
.hero-canvas>.label {grid-column:1/-1}
.hero-canvas img {height:80px}
.hero-canvas>a>span {font-size:12px;overflow-wrap:anywhere}
.workflow-tabs {margin-bottom:16px}
.workflow-tabs button {padding:16px 12px;gap:8px;display:block;font-size:14px;min-height:104px}
.workflow-tabs button>span {display:block;margin-bottom:8px}
.exploration-canvas .mini {height:320px}
.exploration-canvas .mini-immersive h3 {margin-top:128px}
.decision {display:block;padding-top:24px}
.decision .button {margin-top:20px}
.refine-stage {display:flex;flex-direction:column;padding:24px 16px;gap:24px}
.refine-stage .refine-panel {width:100%;padding:0}
.refine-stage .refine-panel>.label {margin-bottom:12px}
.refine-stage .refine-actions {margin:16px 0}
.refine-stage .refine-panel>p:nth-child(2) {font-size:20px!important}
.refine-stage #refine-status {min-height:0}
.refine-stage .component-sheet {width:100%;padding:24px}
.refine-stage .type-sample {font-size:88px}
.refine-stage .type-sample>span {font-size:24px}
.stage-footer {display:block}
.stage-footer .button {margin-top:16px}
.workflow-panel .preview-stage iframe {height:520px}
.included-grid {grid-template-columns:1fr;gap:24px}
.examples {padding-block:0 64px}
.example-art,.product-tile {height:376px}
.pricing .section-heading>p:last-child {font-size:16px}
.enterprise {padding-block:24px}
.enterprise p {margin:16px 0}
.compact-closing {display:block;margin-top:48px;padding-top:32px}
.compact-closing h2 {font-size:36px}
.compact-closing>div {margin-top:24px}
.hero-actions .hero-price {margin-top:-8px}
}

.logo,.site-header>.logo,footer>.logo {font-family:Arial,Helvetica,sans-serif;font-size:32px;font-weight:700;letter-spacing:-1.7px;line-height:1;display:inline-flex;align-items:flex-start;white-space:nowrap}

.logo>sup {color:#f5501e;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;letter-spacing:0;line-height:1;margin-left:2px;position:relative;top:-3px}

@media(max-width:760px) {
.logo,.site-header>.logo,footer>.logo {font-size:28px;letter-spacing:-1.5px}
.logo>sup {font-size:11px;top:-2px}
}

.start-design-cta {border-radius:12px!important}

.hero-shell {background:#030303}

.hero-shell>.photo-hero {border-radius:32px 32px 0 0;overflow:hidden;isolation:isolate}

.hero-title .hero-manifesto>span {transform-origin:left center}

.header-cta,.button,.plan-cta,#copy,#open-prototype,.mobile-nav-cta {transition:transform 240ms var(--motion-out),background-color 240ms ease,color 240ms ease,border-color 240ms ease,box-shadow 300ms ease}

.cta-icon {transition:transform 280ms var(--motion-out)}

.example-art>img,.prototype-launch .mini img,.glass-inset>img {transition:transform 850ms var(--motion-out);transform-origin:center}

.example-card h3,.example-link,.prototype-launch-action {transition:color 200ms ease}

.site-header nav>a:not(.mobile-nav-cta) {position:relative}

.site-header nav>a:not(.mobile-nav-cta):after {content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--motion-out)}

.faq summary {transition:color 200ms ease}

.faq summary:after {transition:color 200ms ease}

@media(hover:hover) and (pointer:fine) {
.header-cta:hover,.button:hover,.plan-cta:hover,#copy:hover,#open-prototype:hover,.mobile-nav-cta:hover {transform:translateY(-2px)}
.button.orange:hover {box-shadow:0 8px 24px #f5501e25}
a:hover>.cta-icon,button:hover>.cta-icon,.example-card:hover .cta-icon,.prototype-launch:hover .prototype-launch-action .cta-icon {transform:translate(2px,-2px)}
.example-card:hover .example-art>img,.prototype-launch:hover .mini img {transform:scale(1.035)}
.glass-inset:hover>img {transform:scale(1.035)}
.brand-poster-stage:hover .brand-poster.is-active {transform:scale(1.025)}
.example-card:hover h3,.faq summary:hover {color:#ff996e}
.folio .example-card:hover h3,.atlas .example-card:hover h3 {color:#ac310c}
.site-header nav>a:hover:after {transform:scaleX(1)}
}

.header-cta:active,.button:active,.plan-cta:active,#copy:active,#open-prototype:active {transform:translateY(0) scale(.985)}

.site-header nav>a:focus-visible:after {transform:scaleX(1)}

.header-cta:focus-visible,.button:focus-visible,.plan-cta:focus-visible,#copy:focus-visible,#open-prototype:focus-visible {outline:2px solid currentColor;outline-offset:5px}

@media(max-width:760px) {
.hero-shell>.photo-hero {border-radius:20px 20px 0 0}
}

@media(prefers-reduced-motion:reduce) {
.header-cta,.button,.plan-cta,#copy,#open-prototype,.mobile-nav-cta,.cta-icon,.example-art>img,.prototype-launch .mini img,.glass-inset>img,.brand-poster-stage .brand-poster,.site-header nav>a:after,.faq summary {transition:none!important}
.header-cta:hover,.button:hover,.plan-cta:hover,#copy:hover,#open-prototype:hover,.mobile-nav-cta:hover,.header-cta:active,.button:active,.plan-cta:active,#copy:active,#open-prototype:active,a:hover>.cta-icon,button:hover>.cta-icon,.example-card:hover .cta-icon,.prototype-launch:hover .prototype-launch-action .cta-icon,.example-card:hover .example-art>img,.prototype-launch:hover .mini img,.glass-inset:hover>img,.brand-poster-stage:hover .brand-poster.is-active {transform:none}
}

html.motion-ready body [data-reveal=""][data-reveal=""]:not([data-revealed]) {opacity:0}

/* A wiped frame is held shut before it opens. */
html.motion-ready body [data-reveal="unveil"]:not([data-revealed]) {clip-path:inset(0 0 100% 0)}

/* The picture settles back from a slight push-in as its frame opens. Only on
   suite tiles, whose images carry no hover zoom to fight over transform — and
   gated on motion-ready so a no-JS page never sits on a held zoom. */
.suite-art[data-reveal="unveil"] img {transition:transform 1.1s var(--motion-out)}

html.motion-ready .suite-art[data-reveal="unveil"]:not([data-revealed]) img {transform:scale(1.04)}

@media(prefers-reduced-motion:reduce) {
.suite-art[data-reveal="unveil"] img {transition:none;transform:none}
}

/* One line of display type inside its own clip: the wrapper hides, the inner
   span rises out of it. Same geometry as the hero headline — the padding pair
   gives descenders room inside the clip without moving the line. */
.reveal-line {display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}

.reveal-line>span {display:block}

/* ---- hero parallax ----------------------------------------------------------
   The photograph lags the page as the hero scrolls away. Native scroll-driven
   animation: no JS, no scroll listener, runs off the main thread, and simply
   doesn't apply where scroll timelines are unsupported. The scrim lives on
   .hero-art, not the image, so it stays put while the picture drifts beneath.
   Scale 1.12 gives 6% of headroom on each edge for a 5% drift to move into.

   It runs on the ROOT scroll timeline, not view(). The image sits inside two
   overflow:hidden frames (.hero-shell>.photo-hero and .hero-art), and
   overflow:hidden makes an element a scroll container — so a view() timeline
   measured the image against a frame that never scrolls, and the drift never
   moved. The hero opens the page, so drifting across the first viewport of
   document scroll is the same motion, measured against the thing that moves. */
@keyframes hero-drift {
from {transform:translate3d(0,0,0) scale(1.12)}
to {transform:translate3d(0,5%,0) scale(1.12)}
}

@supports (animation-timeline:scroll()) {
@media(prefers-reduced-motion:no-preference) {
.photo-hero .hero-art img {animation:hero-drift linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
}
}

/* ---- primary CTA sweep ------------------------------------------------------
   One pass of light across the orange button on hover, over the existing lift
   and the arrow's nudge. Clipped by the button's own radius; pointer-events
   off so it never eats the click. */
.button.orange {position:relative;overflow:hidden}

.button.orange:after {content:'';position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 42%,#ffffff40 50%,transparent 58%);transform:translateX(-75%);transition:transform 720ms var(--motion-out);pointer-events:none}

@media(hover:hover) and (pointer:fine) {
.button.orange:hover:after,.button.orange:focus-visible:after {transform:translateX(75%)}
}

@media(prefers-reduced-motion:reduce) {
.button.orange:after {transition:none;opacity:0}
}

/* Masked lines are hidden by position, not opacity — they sit below their
   clip until the animation lifts them. Matches the engine's first keyframe so
   there is no jump between the pre-paint state and the animation. */
html.motion-ready body [data-reveal="mask"]:not([data-revealed]) {transform:translate3d(0,120%,0)}

@media(prefers-reduced-motion:reduce) {
html.motion-ready body [data-reveal][data-reveal]:not([data-revealed]) {opacity:1;transform:none}
}

.variation-switcher {display:flex;justify-content:center;gap:8px;padding:12px 24px;background:#080809;border-bottom:1px solid #303033;color:#bdbdc5;font-size:12px}

.variation-switcher a {padding:8px 16px;min-height:40px;display:flex;align-items:center;border:1px solid transparent}

.variation-switcher a[aria-current=page] {color:#fff;border-color:#67676e}

.variation-switcher a:hover {color:#ff845c}

.variation .site-header {min-height:96px}

.variation .photo-hero {padding-top:40px}

.variation .variant-story {min-width:0}

.variation .hero-copy {min-width:0}

.variation .hero-art {margin:0}

.variation .hero-point-of-view {font-size:26px!important;max-width:26ch}

.variation .hero-explanation {font-size:16px!important}

.variation .hero-audience {font-size:14px!important}

.variation .hero-actions {gap:20px;margin-top:24px}

.variation .hero-price {margin-top:0}

.variation .site-header nav {gap:32px}

.atelier .photo-hero {display:grid;grid-template-columns:38.2fr 61.8fr;gap:32px;align-items:stretch}

.atelier .variant-story {display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding-block:24px 32px}

.atelier .photo-hero h1 {font-size:clamp(48px,4.9vw,80px);line-height:1.02;letter-spacing:-.055em;margin-top:32px}

.atelier .hero-break {display:none}

.atelier .photo-hero .hero-art {grid-column:2;height:100%;min-height:840px}

.atelier .art-caption {top:24px;bottom:auto;font-size:12px;align-items:start}

.atelier .photo-note {position:absolute;bottom:40px;left:32px;font-size:clamp(28px,3.2vw,48px);letter-spacing:-.04em;line-height:1.1;z-index:2;color:#fff}

.atelier .hero-copy {padding:0}

.atelier .photo-hero .hero-point-of-view {font-size:24px!important;margin-bottom:16px}

.atelier .hero-copy .hero-audience {max-width:32ch}

.atelier #experience {padding-top:96px}

.atelier .example-grid {grid-template-columns:1.4fr 1fr 1fr}

.atelier .example-art,.atelier .product-tile {height:416px}

.atelier .pricing {background:#e9e8e6}

.atelier .plans article {border-top:2px solid #111113}

.atelier .compact-closing h2 {font-size:clamp(36px,5vw,72px)}

.folio .photo-hero {display:grid;grid-template-columns:38.2fr 61.8fr;gap:0;align-items:stretch}

.folio .variant-story {background:#e9e8e6;color:#111113;padding:40px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}

.folio .photo-hero h1 {font-size:clamp(44px,4.8vw,76px);line-height:1.02;letter-spacing:-.06em;margin-top:40px}

.folio .hero-break {display:none}

.folio .photo-hero .hero-title>.kicker {color:#55555e;max-width:26ch}

.folio .photo-hero .hero-copy>.hero-point-of-view {color:#111113;font-size:24px!important;margin-bottom:16px}

.folio .photo-hero .hero-copy>.hero-explanation,.folio .photo-hero .hero-copy>.hero-audience,.folio .hero-price {color:#53535b}

.folio .hero-actions .orange {background:#111113;color:white}

.folio .hero-actions .text-link {border-color:#89898f}

.folio .variant-imagery {min-width:0;position:relative;min-height:880px;padding-bottom:176px}

.folio .photo-hero .hero-art {width:100%;height:100%;min-height:640px}

.folio .hero-art img {object-position:center 30%}

.folio .art-caption {top:24px;bottom:auto;align-items:start;font-size:12px}

.folio .glass-inset {margin:0;position:absolute;bottom:0;right:0;width:62%;height:288px;border:16px solid #111113;border-bottom:0;border-right:0;background:#eeece7;z-index:3;overflow:hidden}

.folio .glass-inset img {object-fit:cover}

.folio .glass-inset figcaption {position:absolute;left:16px;bottom:16px;font:12px monospace;color:#111113;background:#eeece7e6;padding:8px}

.folio .examples {background:#e9e8e6;color:#111113;width:100%;max-width:none;padding:80px max(64px,calc((100vw - 1440px)/2))}

.folio .examples .kicker,.folio .examples .example-card>p:not(.label),.folio .examples .disclosure {color:#55555e}

.folio .example-grid {grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:start}

.folio .example-card:nth-child(1) {grid-column:span 6}

.folio .example-card:nth-child(2),.folio .example-card:nth-child(3) {grid-column:span 3}

.folio .example-card:first-child .example-art {height:520px}

.folio .example-card:nth-child(2) .product-tile,.folio .example-card:nth-child(3) .example-art {height:352px}

.folio .product-tile {padding:16px}

.folio .product-tile-head {gap:8px}

.folio .product-tile-head>span {display:none}

.folio .product-tile>strong {font-size:24px}

.folio .tile-metrics {gap:16px}

.folio .tile-row {font-size:12px}

.folio .pricing {background:#111113;color:#fbfbfc}

.folio .pricing .kicker,.folio .pricing .section-heading>p:last-child,.folio .pricing-note,.folio .plan-details>p,.folio .plan-details caption,.folio .enterprise p {color:#bdbdc5}

.folio .pricing .plans article {border-color:#777}

.folio .plans .label,.folio .plans ul,.folio .price span {color:#bdbdc5}

.folio .plan-cta {color:#fff;border-color:#888}

.folio .plan-details,.folio .plan-details th,.folio .plan-details td,.folio .enterprise {border-color:#55555d}

.folio .plan-details>summary:after {color:#ff845c}

.atlas {background:#e9e8e6;color:#111113}

.atlas .site-header {border-color:#bfbfbd}

.atlas .site-header nav a {color:#4c4c54}

.atlas .site-header nav a:hover {color:#111113}

.atlas .site-header>.header-cta {border-color:#55555d}

.atlas .site-header>.header-cta:hover {background:#111113;color:#fff}

.atlas .photo-hero {padding-top:64px}

.atlas .photo-hero .hero-title>.kicker {color:#53535b}

.atlas .photo-hero h1 {font-size:clamp(64px,7.5vw,120px)}

.atlas .photo-hero .hero-copy>.hero-point-of-view {color:#111113}

.atlas .photo-hero .hero-copy>.hero-explanation,.atlas .photo-hero .hero-copy>.hero-audience,.atlas .hero-price {color:#53535b}

.atlas .photo-hero .hero-art {grid-column:span 8;height:600px}

.atlas .hero-canvas {grid-column:span 4;padding:24px;background:#dcdcd9;gap:16px}

.atlas .hero-canvas>.label {color:#4d4d54}

.atlas .hero-canvas>a {display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;padding:0;background:transparent;color:#111113;border:0;border-top:1px solid #a9a9a8;padding-top:16px}

.atlas .hero-canvas>a>span {color:#111113;font-size:14px;margin:0}

.atlas .hero-canvas img {height:128px}

.atlas .hero-canvas>a:hover {color:#f5501e}

.atlas .art-caption {color:white}

.atlas .experience {background:#111113;color:#fbfbfc;width:100%;max-width:none;padding:80px max(64px,calc((100vw - 1440px)/2));margin-top:80px}

.atlas .experience .section-heading>h2 {max-width:21ch}

.atlas .examples {padding-top:80px}

.atlas .examples .kicker,.atlas .examples .example-card>p:not(.label),.atlas .examples .disclosure {color:#53535b}

.atlas .example-grid {gap:32px}

.atlas .example-art,.atlas .product-tile {height:416px}

.atlas .pricing {background:#dcdcd9}

.atlas .faq .kicker,.atlas .faq details>p,.atlas .agent-details #copy-status {color:#53535b}

.atlas .faq-list,.atlas .faq details,.atlas .compact-closing {border-color:#b6b6b4}

.atlas .faq summary:after {color:#b6320b}

.atlas .prompt {color:#111113}

.atlas .prompt button {color:#b6320b}

.atlas footer {border-color:#b6b6b4}

.atlas footer p,.atlas footer>span {color:#53535b}

@media(min-width:1600px) {
.atelier .photo-hero h1,.folio .photo-hero h1 {font-size:80px}
.atelier .hero-break,.folio .hero-break {display:none}
}

@media(max-width:1100px) {
.atelier .photo-hero {gap:24px}
.atelier .photo-hero h1 {font-size:clamp(44px,4.9vw,64px)}
.folio .variant-story {padding:32px 24px}
.folio .photo-hero h1 {font-size:clamp(40px,4.8vw,64px)}
.variation .site-header nav {gap:20px}
.folio .example-grid {gap:24px}
.folio .example-card:nth-child(1) {grid-column:span 6}
.folio .example-card:nth-child(2),.folio .example-card:nth-child(3) {grid-column:span 3}
.folio .product-tile>strong {font-size:20px}
.folio .tile-row {display:block}
.folio .tile-row>span {display:block}
.folio .tile-metrics {gap:8px}
.atlas .photo-hero .hero-art {height:560px}
.atlas .hero-canvas {padding:16px}
.atlas .hero-canvas>a {gap:12px}
.atlas .hero-canvas img {height:112px}
.atlas .hero-canvas>a>span {font-size:12px}
}

@media(max-width:760px) {
.variation-switcher {padding:8px 16px}
.variation .site-header {min-height:80px}
.variation .photo-hero,.atelier .photo-hero,.folio .photo-hero {display:flex;flex-direction:column;padding-top:24px;gap:0;align-items:stretch}
.variation .variant-story {padding:24px 0 32px;gap:32px}
.variation .photo-hero h1,.atelier .photo-hero h1,.folio .photo-hero h1,.atlas .photo-hero h1 {font-size:clamp(44px,10vw,72px);line-height:1.04;letter-spacing:-.055em;margin-top:24px}
.variation .hero-point-of-view {font-size:26px!important}
.variation .hero-copy {padding:0}
.atelier .photo-hero .hero-art {min-height:0;height:560px}
.atelier .photo-note {font-size:32px;bottom:32px;left:24px}
.variation .art-caption {font-size:11px;inset-inline:16px;gap:16px}
.atelier .example-grid {grid-template-columns:1fr}
.variation .example-art,.variation .product-tile {height:376px}
.folio .variant-story {padding:32px 24px}
.folio .variant-imagery {min-height:0;padding-bottom:128px}
.folio .photo-hero .hero-art {min-height:0;height:520px}
.folio .glass-inset {height:208px;width:64%;border-width:12px}
.folio .glass-inset figcaption {font-size:11px;left:8px;bottom:8px}
.folio .examples {padding:64px 24px}
.folio .example-grid {display:grid;grid-template-columns:1fr;gap:40px}
.folio .example-card:nth-child(n) {grid-column:1}
.folio .example-card:first-child .example-art,.folio .example-card:nth-child(2) .product-tile,.folio .example-card:nth-child(3) .example-art {height:400px}
.folio .product-tile {padding:24px}
.folio .product-tile>strong {font-size:28px}
.folio .product-tile-head>span {display:block}
.folio .tile-row {display:flex}
.folio .tile-metrics {gap:24px}
.atlas .photo-hero {gap:32px}
.atlas .photo-hero .hero-art {height:440px}
.atlas .hero-canvas {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:16px;gap:12px}
.atlas .hero-canvas>.label {grid-column:1/-1}
.atlas .hero-canvas>a {display:block;padding-top:12px}
.atlas .hero-canvas img {height:80px}
.atlas .hero-canvas>a>span {margin-top:8px;font-size:12px}
.atlas .experience {padding:64px 24px;margin-top:64px}
.atlas .examples {padding-top:64px}
.atlas .example-grid {grid-template-columns:1fr}
.atlas .photo-hero .hero-title>.kicker {margin-top:16px}
}

.atelier .hero-art img {object-position:50% 12%}

.atelier .hero-art:after {background:linear-gradient(180deg,#11111340,transparent 28%,transparent 60%,#111113bd)}

.atelier .photo-hero.magazine-hero {display:block;position:relative;isolation:isolate;width:100%;max-width:none;margin:0;padding:64px max(64px,calc((100vw - 1440px)/2)) 80px;background:#111113;overflow:hidden}

.atelier .magazine-hero .variant-story {position:relative;z-index:2;padding:0}

.atelier .magazine-hero .hero-title {min-width:0}

.atelier .magazine-hero h1 {letter-spacing:-.055em;margin-top:32px;color:#f6f4ef}

.atelier .magazine-hero .hero-copy>.hero-explanation {color:#d0d0d5}

.atelier .photo-hero.magazine-hero .hero-art {position:absolute;inset:0;z-index:0;width:100%;height:100%;min-height:0;margin:0;background:#111113;pointer-events:none}

.atelier .magazine-hero .hero-art img {object-fit:cover;object-position:70% top}

.atelier .magazine-hero .hero-art:after {inset:0}

.atelier .magazine-hero .art-caption {top:auto;bottom:24px;left:auto;right:32px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}

@media(min-width:1800px) {
.atelier .magazine-hero {min-height:920px}
.atelier .magazine-hero .variant-story {min-height:776px}
}

@media(max-width:1100px) and (min-width:761px) {
.atelier .photo-hero.magazine-hero {padding:48px 40px 64px;min-height:800px}
.atelier .magazine-hero .variant-story {width:62%;min-height:688px}
.atelier .magazine-hero h1 {font-size:clamp(48px,6vw,66px)}
}

@media(max-width:760px) {
.atelier .magazine-hero .variant-story {justify-content:space-between}
.atelier .magazine-hero h1 {max-width:15ch}
.atelier .magazine-hero .hero-art img {object-position:85% top}
.atelier .magazine-hero .hero-copy {max-width:36ch}
.atelier .magazine-hero .art-caption {right:24px;bottom:24px;font-size:11px}
}

body {overflow-x:clip}

.photo-hero .hero-art.direction-showcase {grid-column:1/-1;width:100vw;max-width:none;margin:0 calc(50% - 50vw);height:clamp(560px,56vw,800px);isolation:isolate;background:#181817}

.direction-showcase .direction-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:0;transition:opacity 650ms cubic-bezier(.22,.61,.36,1);pointer-events:none}

.direction-showcase .direction-image.is-active {opacity:1}

.direction-showcase:after {inset:0;z-index:1;background:linear-gradient(180deg,#0002 0%,transparent 40%,#0001 60%,#000b 100%);pointer-events:none}

.showcase-caption {position:absolute;z-index:2;left:max(32px,calc((100vw - 1440px)/2));bottom:40px;display:flex;flex-direction:column;gap:16px;color:#fff;text-shadow:0 2px 16px #0006;pointer-events:none}

.showcase-caption .label {color:#f5f5f5;font-size:12px;letter-spacing:.08em}

.showcase-title {font-size:clamp(32px,3vw,48px);line-height:1.1;letter-spacing:-.04em;font-weight:500}

.showcase-credit {font:12px/1.5 monospace;color:#dededc}

.showcase-controls {position:absolute;z-index:3;right:max(32px,calc((100vw - 1440px)/2));bottom:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px;border:1px solid #ffffff40;border-radius:16px}

.showcase-choice {min-width:0;width:152px;padding:4px;border:1px solid transparent;border-radius:8px;color:#fff;text-align:left;transition:background 180ms,border-color 180ms;touch-action:manipulation}

.direction-showcase .showcase-choice img {position:static;width:100%;height:88px;object-fit:cover}

.showcase-choice>span {display:block;font:12px/1.4 monospace;padding:8px 4px 4px;white-space:nowrap}

.showcase-choice:hover {background:#ffffff14}

.showcase-choice:hover img,.showcase-choice[aria-pressed=true] img {opacity:1}

.showcase-choice:focus-visible {outline:2px solid white;outline-offset:2px}

.showcase-status {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(min-width:761px) and (max-width:1050px) {
.showcase-choice {width:120px}
.direction-showcase .showcase-choice img {height:72px}
.showcase-caption {left:24px;bottom:40px}
.showcase-controls {right:24px;bottom:32px}
.showcase-credit {max-width:24ch}
}

@media(max-width:760px) {
.photo-hero .hero-art.direction-showcase {height:600px;min-height:0;flex:none;align-self:center;margin-inline:calc(50% - 50vw)}
.direction-showcase:after {background:linear-gradient(180deg,#0007,transparent 35%,#0001 60%,#000b)}
.showcase-caption {top:32px;bottom:auto;left:24px;right:24px;gap:16px}
.showcase-title {font-size:32px}
.showcase-credit {font-size:12px}
.showcase-controls {inset-inline:16px;bottom:24px;padding:8px;gap:8px;border-radius:12px}
.showcase-choice {width:100%;padding:4px}
.direction-showcase .showcase-choice img {height:clamp(56px,17vw,112px)}
.showcase-choice>span {font-family:NorthlitSans,Arial,sans-serif;font-size:12px;padding:8px 0 4px;white-space:normal}
.showcase-caption .label {font-size:12px}
}

@media(prefers-reduced-motion:reduce) {
.direction-showcase .direction-image,.showcase-choice,.direction-showcase .showcase-choice img {transition:none}
}

.photo-hero .hero-art.direction-showcase {margin-top:16px}

.showcase-controls {background:linear-gradient(135deg,#ffffff29,#ffffff0d);border-color:#ffffff4d;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);box-shadow:inset 0 1px 0 #ffffff33,0 16px 48px #0004}

.showcase-choice {background:#11121438;box-shadow:inset 0 1px 0 #ffffff14}

.showcase-choice[aria-pressed=true] {border-color:#ffffffb3;background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff14}

.showcase-choice>span {text-shadow:0 1px 4px #000b}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
.showcase-controls {background:#252529e6}
}

.restored-showcase {display:block;position:relative;isolation:isolate;width:100%;height:clamp(560px,56vw,800px);margin:0;overflow:hidden;background:#181817}

.restored-showcase:after {content:'';position:absolute}

@media(max-width:760px) {
.restored-showcase {height:600px}
}

.direction-showcase {border-radius:16px;overflow:hidden}

.direction-showcase .direction-image {border-radius:16px}

.direction-showcase .showcase-controls {padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;gap:12px}

.direction-showcase .showcase-choice {padding:0;border:0;border-radius:12px;background:none;box-shadow:none;min-height:48px}

.direction-showcase .showcase-choice img {border-radius:12px;opacity:.6;transition:opacity .25s ease}

.direction-showcase .showcase-choice[aria-pressed="true"] img {opacity:1}

@media(hover:hover) {
.direction-showcase .showcase-choice[aria-pressed="false"]:hover img {opacity:.8}
}

@media(prefers-reduced-motion:reduce) {
.direction-showcase .showcase-choice img {transition:none}
}

.brand-intelligence {display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);width:100%;margin:0;background:#f8f8f6;color:#111113}

.brand-landscape {position:relative;margin:0;min-height:640px;overflow:hidden;background:#cbd2d9}

.brand-landscape>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% center}

.brand-landscape figcaption {position:absolute;inset-inline:32px;bottom:32px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font:12px/1.5 monospace;letter-spacing:.02em;color:#fff}

.brand-landscape figcaption span {background:#111113d9;padding:8px 12px}

.brand-landscape figcaption span:last-child {font-size:11px;background:#111113a8}

.brand-intelligence-copy {padding:64px 48px;min-width:0;display:flex;flex-direction:column;gap:48px}

.brand-intelligence-copy>.label {color:#36363b;font-size:12px;letter-spacing:.06em}

.brand-intelligence-intro h2 {font-size:clamp(40px,3.8vw,64px);line-height:1.05;letter-spacing:-.045em;max-width:15ch}

.brand-intelligence-intro>p {margin-top:24px;max-width:36ch;color:#5c5c62;font-size:16px;line-height:1.6}

.brand-intelligence-details {margin:0;padding:0;margin-top:auto}

.brand-intelligence-details>div {border-top:1px solid #d5d5d5;padding:16px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:16px;align-items:center;font-size:14px;line-height:1.5}

.brand-intelligence-details dd {margin:0;text-align:right;color:#505059}

.brand-intelligence-details .brand-palette {display:flex;justify-content:flex-end;gap:4px}

.brand-palette i {display:block;background:var(--tone);width:24px;height:24px}

.atlas .brand-intelligence+.experience {margin-top:0}

footer.site-footer {display:block;width:100%;max-width:none;margin:0;padding:0;background:#111113;color:#f8f8f6;border-top:1px solid #ffffff20;overflow:hidden}

.site-footer .footer-inner {padding-block:64px 32px}

.site-footer .footer-closing {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;padding-bottom:64px;border-bottom:1px solid #ffffff25}

.site-footer .footer-closing>.label {grid-column:1/-1;font-size:12px;color:#c8c8cc}

.site-footer .footer-closing>h2 {font-size:clamp(40px,5vw,72px);line-height:1.05;max-width:16ch;letter-spacing:-.045em}

.site-footer .footer-closing .orange {color:#111113}

.site-footer .footer-meta {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding-top:32px;font-size:14px}

.site-footer .footer-meta>.logo {color:#f8f8f6}

.site-footer .footer-meta>p,.site-footer .footer-meta>span {color:#aaaab4;width:auto;order:initial}

.site-footer .footer-meta>a:not(.logo) {color:#f8f8f6;text-underline-offset:4px;text-decoration:underline}

.site-footer .footer-wordmark {justify-content:space-between;align-items:baseline;padding-bottom:16px;font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.035em;user-select:none}

.site-footer .footer-wordmark span {display:block}

@media(max-width:1100px) {
.brand-intelligence-copy {padding:48px 32px;gap:40px}
.brand-intelligence-intro h2 {font-size:40px}
.brand-landscape {min-height:600px}
}

@media(max-width:760px) {
.brand-intelligence {grid-template-columns:1fr}
.brand-landscape {min-height:0;height:440px}
.brand-landscape>img {object-position:52% center}
.brand-landscape figcaption {inset-inline:24px;bottom:24px}
.brand-intelligence-copy {padding:40px 24px;gap:32px}
.brand-intelligence-intro h2 {font-size:40px;max-width:18ch}
.brand-intelligence-details>div {padding-block:16px;font-size:14px}
.brand-intelligence-intro>p {max-width:40ch}
.site-footer .footer-inner {padding-block:48px 24px}
.site-footer .footer-closing {display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-bottom:40px}
.site-footer .footer-closing>h2 {font-size:40px}
.site-footer .footer-meta {display:grid;grid-template-columns:1fr auto;gap:24px;font-size:14px;padding-top:32px}
.site-footer .footer-meta>p {grid-column:1/-1;grid-row:2}
.site-footer .footer-meta>span {grid-column:1/-1}
.site-footer .footer-wordmark {padding-bottom:16px}
}

footer.site-footer {position:relative;isolation:isolate}

.site-footer .footer-glass {position:absolute;inset:0 0 auto;height:560px;pointer-events:none;z-index:-1;overflow:hidden}

.footer-glass img {display:block;width:100%;height:100%;object-fit:cover;object-position:right center}

.footer-glass:after {content:'';position:absolute;inset:0}

.site-footer .footer-closing {min-height:400px;align-content:center;gap:24px}

.site-footer .footer-closing>h2 {grid-column:1/span 7}

.site-footer .footer-closing>div {grid-column:1/span 7;justify-self:start}

@media(max-width:760px) {
.site-footer .footer-glass {height:520px}
.footer-glass img {object-position:right center}
.site-footer .footer-closing {min-height:400px;justify-content:center}
}

.brand-gallery {margin:0;min-width:0;padding:32px;background:#eeede9;display:flex;flex-direction:column;justify-content:center;gap:24px}

.brand-poster-stage {position:relative;width:100%;aspect-ratio:4/3;background:#f5f4f0;isolation:isolate}

.brand-poster-stage .brand-poster {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease;pointer-events:none}

.brand-poster-stage .brand-poster.is-active {opacity:1}

.brand-poster-controls {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}

.brand-poster-controls button {min-width:0;padding:8px;background:transparent;border:1px solid #c7c5be;color:#52525a;text-align:left;transition:border-color .2s,background .2s}

.brand-poster-controls button img {width:100%;height:72px;object-fit:contain;background:#f5f4f0}

.brand-poster-controls button span {display:block;padding:12px 0 4px;font:12px/1.4 NorthlitSans,Arial,sans-serif}

.brand-poster-controls button[aria-pressed="true"] {border-color:#111113;background:#fff;color:#111113}

.brand-poster-controls button:hover {border-color:#111113}

.brand-poster-controls button:focus-visible {outline:3px solid #111113;outline-offset:4px}

.brand-poster-status {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:760px) {
.brand-gallery {padding:24px;gap:16px}
.brand-poster-controls {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.brand-poster-controls button {padding:4px}
.brand-poster-controls button span {font-size:11px;padding:8px 0 4px}
}

@media(prefers-reduced-motion:reduce) {
.brand-poster-stage .brand-poster {transition:none}
}

.site-footer .footer-glass {mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 68%,transparent 100%)}

.footer-glass:after {background:linear-gradient(90deg,#111113 0%,#111113e6 27%,#11111322 58%,transparent 78%),linear-gradient(0deg,#111113 0%,transparent 50%)}

@media(max-width:760px) {
.footer-glass:after {background:linear-gradient(90deg,#111113d9,#11111355),linear-gradient(0deg,#111113,transparent 65%)}
}

.brand-poster-stage {border-radius:16px;overflow:hidden}

.brand-poster-stage .brand-poster {border-radius:16px}

.brand-gallery .brand-poster-controls button {border:0;border-radius:12px;padding:0;background:none;box-shadow:none;overflow:hidden;min-height:48px}

.brand-gallery .brand-poster-controls button img {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;opacity:.6;transition:opacity .25s ease}

.brand-gallery .brand-poster-controls button[aria-pressed="true"] img {opacity:1}

@media(hover:hover) {
.brand-gallery .brand-poster-controls button[aria-pressed="false"]:hover img {opacity:.8}
}

@media(prefers-reduced-motion:reduce) {
.brand-gallery .brand-poster-controls button img {transition:none}
}

.site-header.grid.wrap {width:100%;max-width:none;margin:0;background:#030303;color:#f8f8f6;border:0;min-height:96px;padding:24px max(64px,calc((100vw - 1440px)/2))}

.site-header.grid.wrap>.logo {color:#f8f8f6}

.site-header.grid.wrap>.logo>sup {color:#f5501e}

.site-header.grid.wrap nav a {color:#e5e5eb;font-weight:500}

.site-header.grid.wrap>.header-cta {background:#030303;border-color:#62626a;color:#fff}

.site-header.grid.wrap>.header-cta:hover {background:#fff;border-color:#fff;color:#111113}

.site-header.grid.wrap a:focus-visible {outline-color:#ff8256}

.prototype-experience.experience,.atlas .prototype-experience.experience {width:100%;max-width:none;margin:0;padding:80px 0;background:#111113;color:#f8f8f6}

.prototype-intro {margin-bottom:40px}

.prototype-intro>.kicker {margin-bottom:16px;color:#aaaab4}

.prototype-intro h2 {max-width:22ch;font-size:clamp(40px,4.5vw,64px);line-height:1.05;letter-spacing:-.045em}

.prototype-intro>p:last-child {margin-top:24px;max-width:64ch;font-size:16px;color:#bdbdc5;line-height:1.6}

.prototype-toolbar {position:sticky;top:0;z-index:10;background:#18181b;border-block:1px solid #414147}

.prototype-toolbar-inner {display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:16px}

.prototype-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1;max-width:760px}

.prototype-tab {display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;min-width:0;min-height:80px;color:#c8c8d0;background:transparent;border:1px solid #414147;text-align:left;border-radius:4px}

.prototype-tab img {width:64px;height:56px;flex-shrink:0;border-radius:2px}

.prototype-tab>span {font-size:14px;line-height:1.4;font-weight:500}

.prototype-tab small {display:block;font:12px/1.4 monospace;margin-bottom:4px;opacity:.7}

.prototype-tab:hover {border-color:#85858d}

.prototype-tab[aria-selected=true] {background:#f2f1ed;color:#111113;border-color:#f2f1ed;box-shadow:inset 0 -3px #f5501e}

.prototype-tab[aria-selected=true] small {color:#ad340c;opacity:1}

.prototype-tools {display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0;font-size:14px}

.prototype-device {display:flex;gap:4px;background:#27272c;padding:4px;border-radius:4px}

.prototype-device button {padding:8px 12px;min-height:40px;border:0;border-radius:2px;background:transparent;color:#c8c8cf;font-size:14px}

.prototype-device button[aria-pressed=true] {background:#f2f1ed;color:#111113}

.prototype-tools>a {color:#f2f1ed;text-underline-offset:4px}

.prototype-tools>a:hover {text-decoration:underline}

.prototype-live {width:100%;scroll-margin-top:144px}

.prototype-experience .preview-stage {width:100%;padding:0;margin:0;background:#242429;display:flex;justify-content:center;overflow:hidden}

.prototype-experience .preview-stage iframe {display:block;width:100%;max-width:none;height:84svh;min-height:640px;max-height:1040px;margin:0;border:0;background:#eeece7;box-shadow:none}

.prototype-experience .preview-stage.mobile {padding:24px 0}

.prototype-experience .preview-stage.mobile iframe {width:390px;max-width:100%;min-height:640px}

.prototype-below {padding-top:24px}

.prototype-caption {display:flex;justify-content:space-between;gap:24px;align-items:start;font-size:14px;line-height:1.5;color:#c8c8cf}

.prototype-caption>span {max-width:40ch;text-align:right;font-size:12px;color:#aaaab4}

.prototype-refine {margin-top:32px;border-top:1px solid #44444c;scroll-margin-top:144px}

.prototype-refine>summary {padding:24px 0;cursor:pointer;font-size:16px}

.prototype-refine .refine-stage {margin-bottom:24px}

.prototype-refine .refine-panel>p:nth-child(2) {font-size:24px!important}

.prototype-experience .included {margin-top:0}

.prototype-refine .component-sheet {color:#111113}

.agent-feature {background:#111113;color:#f8f8f6;padding:96px 0}

.agent-feature-inner {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}

.agent-feature-inner>div:first-child {grid-column:span 6}

.agent-feature-copy {grid-column:8/-1;padding-top:32px;min-width:0}

.agent-feature .kicker {color:#aaaab4;margin-bottom:32px}

.agent-feature h2 {font-size:clamp(48px,5.5vw,88px);line-height:1.02;letter-spacing:-.05em}

.agent-feature-copy>p {color:#c4c4cd;font-size:16px;line-height:1.65;max-width:48ch}

.agent-feature .prompt {display:block;max-width:none;background:none;padding:24px 0 0;margin-top:32px;border:0;border-top:1px solid #515159;color:#fff}

.agent-feature .prompt>p {max-width:54ch;font:14px/1.7 monospace;color:#f2f2f3}

.agent-feature .prompt>button {display:inline-flex;min-height:44px;margin-top:24px;padding:8px 0;background:none;border:0;border-bottom:1px solid #f5501e;color:#ff8256;font-size:14px;cursor:pointer}

.agent-feature #copy-status {min-height:24px;margin-top:16px;font-size:14px;color:#c8c8cf}

.site-footer .footer-wordmark {display:block;width:100%;margin:32px 0 0;padding:0;font-size:0;line-height:0;color:#202023}

.site-footer .footer-wordmark svg {display:block;width:100%;height:auto;overflow:hidden;fill:currentColor}

@media(max-width:1100px) {
.prototype-toolbar-inner {gap:24px}
.prototype-tab {display:block;padding:12px}
.prototype-tab img {display:none}
.prototype-tab small {display:inline;margin:0 8px 0 0}
.prototype-tab {min-height:56px}
.prototype-tools {gap:8px}
.agent-feature-copy {grid-column:7/-1}
}

@media(max-width:760px) {
.prototype-experience.experience,.atlas .prototype-experience.experience {padding:64px 0}
.prototype-intro h2 {font-size:36px}
.prototype-intro {margin-bottom:32px}
.prototype-intro>p:last-child {margin-top:16px}
.prototype-toolbar-inner {display:block;padding-block:12px}
.prototype-tabs {max-width:none;gap:8px}
.prototype-tab {padding:12px 8px;min-height:64px}
.prototype-tab small {display:block;margin-bottom:4px}
.prototype-tab>span {font-size:14px}
.prototype-tools {margin-top:12px;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.prototype-device button {padding:8px 12px;font-size:13px}
.prototype-experience .preview-stage iframe {min-height:580px;height:80svh;max-height:900px}
.prototype-experience .preview-stage.mobile {padding:0}
.prototype-caption {display:block}
.prototype-caption>span {display:block;text-align:left;margin-top:8px;max-width:100%}
.prototype-refine {margin-top:24px}
.prototype-refine .refine-stage {display:flex;flex-direction:column;padding:24px 16px;gap:24px}
.prototype-refine .refine-panel,.prototype-refine .component-sheet {width:100%}
.agent-feature {padding:64px 0}
.agent-feature-inner {grid-template-columns:1fr;gap:32px}
.agent-feature-inner>div:first-child,.agent-feature-copy {grid-column:1;padding:0}
.agent-feature .kicker {margin-bottom:24px}
.agent-feature h2 {font-size:48px}
.site-footer .footer-wordmark {margin-top:24px}
}

.development-foundation {margin-top:48px;padding-top:48px;border-top:1px solid #44444c;scroll-margin-top:32px;min-width:0}

.development-foundation h3 {margin:0 0 40px;font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.035em;font-weight:500;color:#f8f8f6}

.development-foundation .foundation-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;list-style:none;padding:0;margin:0}

.foundation-grid li {min-width:0;padding:0}

.foundation-grid strong {display:block;margin-bottom:16px;font-size:20px;font-weight:500;line-height:1.3;color:#f8f8f6}

.foundation-grid span {display:block;max-width:40ch;font-size:16px;line-height:1.65;color:#bdbdc5}

.development-foundation .foundation-note {margin:40px 0 0;max-width:none;font-size:14px;line-height:1.6;color:#bdbdc5}

@media(max-width:760px) {
.development-foundation {margin-top:32px;padding-top:32px}
.development-foundation h3 {margin-bottom:32px}
.development-foundation .foundation-grid {grid-template-columns:1fr;gap:32px}
.foundation-grid strong {margin-bottom:8px}
.development-foundation .foundation-note {margin-top:32px}
}

.site-header.grid.wrap nav {display:flex;gap:24px;white-space:nowrap}

.site-header.grid.wrap nav a {font-size:14px;min-height:44px;display:inline-flex;align-items:center}

@media(max-width:1200px) {
.site-header.grid.wrap {display:grid;grid-template-columns:1fr 1fr;row-gap:8px}
.site-header.grid.wrap>.logo {grid-column:1;grid-row:1}
.site-header.grid.wrap>.header-cta {grid-column:2;grid-row:1}
.site-header.grid.wrap nav {grid-column:1/-1;grid-row:2;justify-self:center;justify-content:center;flex-wrap:wrap;gap:0 24px}
}

@media(max-width:480px) {
.site-header.grid.wrap nav {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px}
.site-header.grid.wrap nav a {justify-content:center;font-size:12px;padding-block:8px}
}

.site-header.grid.wrap>.logo {align-items:center}

.site-header.grid.wrap>.logo .northlit-symbol {display:block;width:40px;height:auto;max-height:40px;object-fit:contain;flex:0 0 40px;margin-right:12px}

.site-header.grid.wrap>.logo>sup {align-self:flex-start}

@media(max-width:760px) {
.site-header.grid.wrap>.logo .northlit-symbol {width:32px;flex-basis:32px;margin-right:8px}
}

.site-header.grid.wrap .nav-toggle,.site-header.grid.wrap nav .mobile-nav-cta {display:none}

@media(max-width:760px) {
.site-header.grid.wrap {grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:0;min-height:80px;padding:16px 20px;align-items:center}
.site-header.grid.wrap>.logo {grid-column:1;grid-row:1;min-width:0;font-size:28px}
.site-header.grid.wrap>.header-cta {display:none}
.site-header.grid.wrap .nav-toggle {display:inline-flex;grid-column:2;grid-row:1;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px;border:1px solid #ffffff40;border-radius:8px;background:transparent;color:#fff;font-size:14px;line-height:1;cursor:pointer}
.nav-toggle svg {display:block;flex:none}
.nav-toggle .nav-close-icon {display:none}
.nav-toggle[aria-expanded="true"] .nav-menu-icon {display:none}
.nav-toggle[aria-expanded="true"] .nav-close-icon {display:block}
.site-header.grid.wrap nav {grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);width:100%;justify-self:stretch;gap:0;margin-top:16px;padding-top:8px;border-top:1px solid #ffffff20;white-space:normal}
.site-header.grid.wrap.nav-ready:not(.nav-open) nav {display:none}
.site-header.grid.wrap nav a {display:flex;align-items:center;justify-content:flex-start;min-height:48px;padding:12px 8px;font-size:16px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.site-header.grid.wrap nav .mobile-nav-cta {display:flex;justify-content:center;margin-top:12px;border-radius:8px;background:#f5501e;color:#111113;font-weight:600}
.site-header.grid.wrap .nav-toggle:focus-visible {outline:2px solid #ff8256;outline-offset:4px}
}

.pricing-bloom {--pricing-surface:#eeece7;position:relative;isolation:isolate;display:flex;justify-content:center;margin:0;background:#fff;overflow:hidden;pointer-events:none}

.atelier .pricing-bloom {--pricing-surface:#e9e8e6}

.folio .pricing-bloom {--pricing-surface:#111113}

.atlas .pricing-bloom {--pricing-surface:#dcdcd9}

.pricing-bloom:before {content:"";position:absolute;inset:0 0 auto;height:96px;background:linear-gradient(to bottom,var(--pricing-surface),#fff);z-index:-1}

.pricing-bloom img {display:block;height:auto;aspect-ratio:2/1;object-fit:contain;mix-blend-mode:multiply}

@media(max-width:760px) {
.pricing-bloom {padding:56px 0 40px;min-height:280px}
.pricing-bloom:before {height:64px}
.pricing-bloom img {width:100%}
}

.photo-hero .hero-title {container-type:inline-size}

.photo-hero h1.hero-manifesto {font-size:clamp(28px,15.8cqi,112px);font-weight:500;line-height:1.02;letter-spacing:-.06em;color:#f6f4ef;max-width:none;text-wrap:initial}

/* Each headline line is its own mask; the inner span is what animates up out
   of it. The padding/negative-margin pair gives descenders room to exist
   inside the clip without changing where the line sits. */
.photo-hero .hero-manifesto>span {display:block;white-space:nowrap;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}

.photo-hero .hero-manifesto>span>span {display:block}

.photo-hero .hero-manifesto>.hero-manifesto-accent {color:#f5501e}

.folio .photo-hero h1.hero-manifesto,.atlas .photo-hero h1.hero-manifesto {color:#111113}

.development-foundation.foundation-editorial {position:relative;isolation:isolate;overflow:hidden;width:100%;margin:0;padding:0;border:0;background:#111113;scroll-margin-top:0;color:#f6f4ef}

.foundation-editorial>.foundation-photograph {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2}

.foundation-editorial:after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(17,17,19,.12),rgba(17,17,19,.06) 32%,rgba(17,17,19,.88) 73%,#111113),linear-gradient(90deg,rgba(17,17,19,.68),transparent 72%)}

.foundation-editorial .foundation-content {display:flex;flex-direction:column;justify-content:space-between;gap:160px;min-height:800px;padding-block:80px 64px}

.foundation-editorial .foundation-heading {max-width:800px}

.foundation-editorial .foundation-heading .kicker {color:#ff996e;margin:0 0 24px}

.foundation-editorial .foundation-heading h2 {font-size:clamp(40px,5.2vw,80px);font-weight:500;line-height:1.05;letter-spacing:-.055em;color:#f6f4ef;margin:0}

.foundation-editorial .foundation-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}

.foundation-editorial .foundation-grid li {border-top:1px solid #ffffff50;padding-top:24px}

.foundation-editorial .foundation-grid .foundation-index {font-family:NorthlitSans,Arial,sans-serif;font-size:12px;line-height:1.5;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.05em;color:#ff996e;margin-bottom:24px}

.foundation-editorial .foundation-grid strong {font-size:24px;margin-bottom:12px;color:#fff}

.foundation-editorial .foundation-grid span:not(.foundation-index) {max-width:32ch;font-size:16px;line-height:1.6;color:#dddde1}

@media(max-width:760px) {
.foundation-editorial .foundation-content {min-height:1040px;padding:64px 24px 48px;gap:240px}
.foundation-editorial>.foundation-photograph {height:640px;object-position:64% top}
.foundation-editorial:after {background:linear-gradient(180deg,#11111366,transparent 20%,#111113aa 43%,#111113 60%)}
.foundation-editorial .foundation-heading h2 {font-size:clamp(36px,8vw,56px)}
.foundation-editorial .foundation-grid {grid-template-columns:1fr;gap:24px}
.foundation-editorial .foundation-grid li {padding-top:16px}
.foundation-editorial .foundation-grid .foundation-index {margin-bottom:12px}
.foundation-editorial .foundation-grid strong {font-size:22px}
.foundation-editorial .foundation-grid span:not(.foundation-index) {max-width:42ch}
}

.site-header.grid.wrap>.logo .northlit-symbol {transform:translateY(-3px)}

.brand-intelligence-intro>.brand-process-copy {margin-top:16px}

.example-art,.product-tile,.glass-inset {border-radius:12px;overflow:hidden}

.hero-canvas>a,.hero-canvas img {border-radius:8px;overflow:hidden}

.pricing-bloom {padding:48px 0 0;min-height:0;align-items:flex-end}

.pricing-bloom img {width:min(100%,1600px);margin-bottom:clamp(-48px,-3vw,-8px);mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent)}

.atelier .magazine-hero .hero-art>.hero-slide {position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1200ms cubic-bezier(.22,1,.36,1);object-fit:cover}

.atelier .magazine-hero .hero-art>.hero-slide.is-active {opacity:1}

.atelier .magazine-hero .hero-art>[data-hero-slide="portrait"] {object-position:72% top}

.atelier .magazine-hero .hero-art>[data-hero-slide="city"] {object-position:68% center}

.hero-rotation-controls {position:absolute;z-index:3;right:32px;bottom:80px;display:flex;align-items:center;padding:0 8px;border-radius:40px;background:#11111370;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

.hero-rotation-controls button {display:grid;place-items:center;min-width:44px;min-height:44px;border:0;padding:0;background:transparent;color:#fff;cursor:pointer}

.hero-rotation-controls [data-hero-frame-choice]:after {content:"";display:block;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.4;transition:opacity .25s}

.hero-rotation-controls [aria-pressed="true"]:after {opacity:1}

.hero-rotation-controls .hero-playback {padding:0 12px;font:12px/1 NorthlitSans,Arial,sans-serif}

.hero-rotation-controls button:focus-visible {outline:2px solid #fff;outline-offset:-4px;border-radius:24px}

@media(max-width:760px) {
.site-header.grid.wrap>.logo .northlit-symbol {transform:translateY(-2px)}
.hero-rotation-controls {bottom:80px}
.atelier .magazine-hero .hero-art>[data-hero-slide="studio"] {object-position:85% top}
.atelier .magazine-hero .hero-art>[data-hero-slide="portrait"] {object-position:78% top}
.atelier .magazine-hero .hero-art>[data-hero-slide="city"] {object-position:68% center}
}

@media(prefers-reduced-motion:reduce) {
.atelier .magazine-hero .hero-art>.hero-slide {transition:none}
}

.foundation-editorial .foundation-content {padding-bottom:96px}

.examples#examples {padding-top:48px;padding-bottom:128px}

.examples#examples .section-heading {margin-bottom:64px}

.examples#examples .section-heading>.kicker {margin-bottom:32px}

.atelier .magazine-hero .hero-art>[data-hero-slide="mountains"] {object-position:62% center;filter:brightness(.72)}

.atelier .magazine-hero .hero-art>[data-hero-slide="female"] {object-fit:contain;object-position:right top;background:#202020}

.cta-icon {display:inline-block;width:20px;height:20px;min-width:20px;flex:0 0 20px;vertical-align:middle;stroke:currentColor;margin-inline-start:8px}

.site-header .cta-icon {margin-inline-start:0}

@media(max-width:760px) {
.foundation-editorial .foundation-content {padding-bottom:72px}
.examples#examples {padding-top:40px;padding-bottom:80px}
.examples#examples .section-heading {margin-bottom:40px}
.examples#examples .section-heading>.kicker {margin-bottom:24px}
.atelier .magazine-hero .hero-art>[data-hero-slide="female"] {object-fit:cover;object-position:55% 15%}
.hero-rotation-controls {padding-inline:0}
.hero-rotation-controls button {min-width:40px}
}

.site-header.grid.wrap>.header-cta .cta-icon {color:#ff8256}

.site-header.grid.wrap nav a:hover {color:#ff8256}

.prototype-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.prototype-launch {min-width:0;display:block;padding:0;border:1px solid #46464e;border-radius:0;background:#19191c;color:#f8f8f6;text-align:left;overflow:hidden;transition:border-color 180ms,box-shadow 180ms}

.prototype-launch:hover {border-color:#ff8256;box-shadow:0 12px 32px #0003}

.prototype-launch .mini {height:384px;padding:24px;text-align:left;width:100%;overflow:hidden}

.prototype-launch .mini h3 {font-size:48px;line-height:1.02;letter-spacing:-.05em}

.prototype-launch .mini-systematic h3 {font-size:36px}

.prototype-launch .mini-immersive h3 {margin-top:120px;font-size:56px}

.prototype-launch .mini-editorial h3 {max-width:6ch}

.prototype-launch .mini .mini-foot {font-size:11px}

.prototype-launch-caption {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 24px;font-size:14px;line-height:1.5}

.prototype-launch-action {color:#ff8256;font-size:13px}

#prototype-lightbox {position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#101012;color:#fff;overflow:hidden;box-sizing:border-box}

#prototype-lightbox:not([open]) {display:none}

#prototype-lightbox[open] {display:flex;flex-direction:column}

#prototype-lightbox::backdrop {background:#000d}

#prototype-lightbox .lightbox-toolbar {align-items:center;flex-shrink:0;border-bottom:1px solid #35353b;background:#101012}

#prototype-lightbox #lightbox-title {margin:0;font:12px/1.5 monospace;letter-spacing:.03em}

#prototype-lightbox .prototype-tabs {flex:none;display:flex;gap:4px;background:#222226;padding:4px;border:1px solid #393940;border-radius:8px}

#prototype-lightbox .prototype-tab {display:block;min-height:40px;padding:8px 12px;margin:0;border:0;border-radius:4px;background:none;box-shadow:none;color:#bfc0c8;float:none;text-align:center}

#prototype-lightbox .prototype-tab>span {font-size:14px;line-height:1.4}

#prototype-lightbox .prototype-tab small {display:none}

#prototype-lightbox .prototype-tab[aria-selected=true] {background:#ffffff26;color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px #ffffff24}

#prototype-lightbox .prototype-tab:hover:not([aria-selected=true]) {background:#333339;color:#fff}

#prototype-lightbox .prototype-tools {display:flex;flex-direction:row;align-items:center;margin:0}

#prototype-lightbox .prototype-tools>a {white-space:nowrap}

#prototype-lightbox .prototype-device button {margin:0}

#close-lightbox {display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;margin:0;border:1px solid #53535c;border-radius:8px;background:transparent;color:#fff;font-size:14px;float:none;white-space:nowrap}

#close-lightbox:hover {background:#333339}

#prototype-lightbox .prototype-live {display:flex;flex:1;min-height:0;width:100%;outline-offset:-3px}

#prototype-lightbox .preview-stage {display:flex;justify-content:center;flex:1;min-height:0;width:100%;padding:0;background:#25252a;overflow:hidden}

#prototype-lightbox .preview-stage iframe {display:block;flex:none;width:100%;max-width:none;height:100%;min-height:0;max-height:none;margin:0;border:0;box-shadow:none;background:#eeece7}

#prototype-lightbox .preview-stage.mobile {padding:0 16px}

#prototype-lightbox .preview-stage.mobile iframe {width:390px;max-width:100%;height:100%}

.lightbox-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:1100px) {
#prototype-lightbox .lightbox-toolbar {flex-wrap:wrap;gap:12px 16px;padding:12px 16px}
#prototype-lightbox #lightbox-title {flex:1}
#prototype-lightbox .prototype-tabs {order:3;flex:1;justify-content:center}
#prototype-lightbox .prototype-tools {order:4}
#prototype-lightbox #close-lightbox {order:2}
.prototype-launch .mini {padding:20px;height:352px}
.prototype-launch .mini h3 {font-size:40px}
.prototype-launch .mini-systematic h3 {font-size:30px}
.prototype-launch-caption {padding:16px}
}

@media(max-width:760px) {
.prototype-gallery {grid-template-columns:1fr;gap:24px}
.prototype-launch .mini {padding:24px}
.prototype-launch .mini h3 {font-size:48px}
.prototype-launch .mini-systematic h3 {font-size:36px}
.prototype-launch .mini-immersive h3 {font-size:56px}
#prototype-lightbox #lightbox-title {grid-column:1;grid-row:1;min-width:0}
#prototype-lightbox .prototype-tabs {grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
#prototype-lightbox .prototype-tab {padding:8px 4px}
#prototype-lightbox .prototype-tools {display:flex;gap:12px}
#prototype-lightbox .prototype-tools>a {font-size:12px}
#prototype-lightbox .preview-stage.mobile {padding:0}
}

@media(prefers-reduced-motion:reduce) {
.prototype-launch {transition:none}
}

#prototype-lightbox :is(button,a):focus-visible {outline:2px solid #ffffffa6;outline-offset:3px}

.prototype-gallery .prototype-launch {border-radius:12px;overflow:hidden}

.prototype-gallery .prototype-launch .mini {border-radius:12px 12px 0 0}

.prototype-gallery .mini-editorial>img,.prototype-gallery .mini-pair>img {border-radius:8px}

.gallery-shell {position:relative;min-width:0;--rail-bg:#111113}

.gallery-shell .horizontal-rail {display:flex!important;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-block:8px 20px;align-items:stretch}

.horizontal-rail::-webkit-scrollbar {display:none}

.gallery-shell .horizontal-rail>* {flex:0 0 calc((100% - 88px)/3);min-width:0;scroll-snap-align:start;grid-column:auto!important;margin-top:0!important}

.horizontal-rail:focus-visible {outline:2px solid #ff8256;outline-offset:4px}

.gallery-scrim {position:absolute;inset:0 0 0 auto;width:104px;background:linear-gradient(90deg,transparent,var(--rail-bg));pointer-events:none;transition:opacity .3s;z-index:3}

.gallery-shell.is-end .gallery-scrim {opacity:0}

#experience .gallery-scrim {right:max(64px,calc((100% - 1440px)/2))}

.gallery-navigation {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:8px;font-size:12px;color:#a5a5ae}

#examples .gallery-navigation {width:100%}

.gallery-hint>span {padding-inline:12px;color:#777}

.gallery-navigation>div {display:flex;gap:8px}

.gallery-navigation button {width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#ffffff09;color:inherit;transition:background .2s,opacity .2s}

.gallery-navigation button:hover:not(:disabled) {background:#ffffff20;color:white}

.gallery-navigation button:disabled {opacity:.3;cursor:default}

.gallery-navigation button[data-step="1"] svg {transform:rotate(45deg)}

.gallery-navigation button[data-step="-1"] svg {transform:rotate(-135deg)}

.gallery-shell .prototype-launch {border:0;background:#1c1c20}

.gallery-shell .extra-preview {color:white;background:#151518}

.extra-preview>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.extra-preview:after {content:'';position:absolute;inset:0;background:linear-gradient(#0003,transparent 30%,#000b)}

.extra-preview .demo-brand {position:relative;z-index:1;font-size:12px;letter-spacing:.14em}

.prototype-launch .extra-preview h3 {position:absolute;inset:auto 24px 64px;max-width:9ch;font-size:40px;line-height:1.02;font-weight:500}

.prototype-launch .product-tile {color:#242d3c;background:#e4e8fe;padding:24px}

.prototype-launch .product-tile>strong {display:block;font-size:32px;margin-block:32px}

#examples .horizontal-rail .example-art,#examples .horizontal-rail .product-tile {height:400px!important;border-radius:12px}

#examples .added-example {position:relative;overflow:hidden}

.added-example>span {position:absolute;inset:auto 24px 24px;z-index:1;font-size:28px;line-height:1.04;letter-spacing:-.04em;max-width:12ch;color:white}

.added-example:after {content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#0009)}

.folio .gallery-shell,.atlas #examples .gallery-shell {--rail-bg:#eeece7}

#prototype-lightbox .lightbox-toolbar {display:flex;flex-wrap:nowrap;gap:12px;min-height:56px;padding:6px 16px}

#prototype-lightbox #lightbox-title {flex:none;font-size:11px;min-width:0;color:#92929b}

.prototype-picker {margin-right:auto;min-width:0}

#prototype-select {display:block;width:180px;max-width:100%;min-height:36px;padding:6px 28px 6px 10px;border:1px solid #ffffff24;border-radius:6px;background:#202023;color:#eee;font:12px/1.4 NorthlitSans,Arial,sans-serif;cursor:pointer}

#prototype-lightbox .prototype-tools {order:initial;gap:16px;font-size:12px}

#prototype-lightbox .prototype-device {display:flex;gap:2px;padding:2px;border:0;border-radius:6px;background:#222226}

#prototype-lightbox .prototype-device button {float:none;border:0;min-height:32px;padding:4px 10px;font-size:12px;border-radius:4px;background:transparent;color:#aaa;line-height:1.3}

#prototype-lightbox .prototype-device button[aria-pressed=true] {background:#ffffff24;color:#fff}

#prototype-lightbox #open-prototype {display:flex;align-items:center;gap:6px;font-size:12px}

#prototype-lightbox #open-prototype svg {width:16px;height:16px}

#prototype-lightbox #close-lightbox {order:initial;min-height:36px;padding:6px 8px;font-size:12px;border-color:#ffffff24;border-radius:6px}

#prototype-lightbox .preview-stage.tablet {padding:0 16px}

#prototype-lightbox .preview-stage.tablet iframe {width:768px;max-width:100%}

#prototype-select:focus-visible {outline:2px solid #ff8256;outline-offset:3px}

.trust-section {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding-block:56px;border-bottom:1px solid #ffffff20}

.trust-section .kicker {margin-bottom:16px}

.trust-section h2 {font-size:24px;letter-spacing:-.03em}

.sample-label {font-size:12px;line-height:1.6;color:#9999a3;margin-top:16px}

.trust-logos {display:grid;grid-template-columns:repeat(3,auto);align-items:center;justify-items:center;justify-content:space-evenly;gap:20px 40px;color:#c7c7cd;min-width:0}

.nike-logo {width:96px;height:40px}

.adidas-logo {height:36px;width:auto;filter:grayscale(1) brightness(0) invert(82%)}

.google-logo {height:36px;width:auto;display:block;filter:grayscale(1) brightness(0) invert(82%)}

.trust-agencies {grid-column:1/-1;display:flex;align-items:center;gap:12px;width:100%;color:#9a9aa1;font-family:NorthlitSans,Arial,sans-serif;font-weight:600;font-size:clamp(14px,1.1vw,16px);letter-spacing:.04em;text-transform:none;white-space:normal;min-width:0}

.trust-agencies::before,.trust-agencies::after {content:'';flex:1;height:1px;background:#9a9aa128;min-width:0}

.testimonials {padding-block:80px 112px;border-top:1px solid #ffffff20}

.testimonials .section-heading {display:block;margin-bottom:48px}

.testimonials .section-heading h2 {font-size:clamp(36px,4vw,64px);margin-top:24px}

.testimonials .section-heading .sample-label {max-width:none;color:#9999a3}

.testimonial-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.testimonial-grid figure {margin:0;padding:32px;border-radius:12px;background:#1c1c20;display:flex;flex-direction:column;min-height:336px}

.quote-mark {font-size:56px;line-height:.8;color:#ff8256}

.testimonial-grid blockquote {margin:24px 0 40px;font-size:21px;line-height:1.45;letter-spacing:-.025em;color:#eeeef0}

.testimonial-grid figcaption {display:flex;gap:16px;align-items:center;margin-top:auto;font-size:13px}

.testimonial-grid small {display:block;font-size:11px;color:#95959e;margin-top:4px}

.testimonial-avatar {display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#ffffff0b;font-family:NorthlitSans,Arial,sans-serif;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#aaa}

.folio .trust-section,.atlas .trust-section,.folio .testimonials,.atlas .testimonials {color:#111;border-color:#0002}

.folio .trust-logos,.atlas .trust-logos {color:#333}

.folio .adidas-logo,.folio .google-logo,.atlas .adidas-logo,.atlas .google-logo {filter:grayscale(1) brightness(0) invert(20%)}

.folio .trust-agencies,.atlas .trust-agencies {color:#888}

.folio .gallery-navigation,.atlas #examples .gallery-navigation {color:#555}

.folio .gallery-navigation button,.atlas #examples .gallery-navigation button {border-color:#0003;background:#00000008}

@media(max-width:1100px) {
.gallery-shell .horizontal-rail>* {flex-basis:calc((100% - 72px)/2)}
.testimonial-grid {gap:16px}
.testimonial-grid figure {padding:24px}
.testimonial-grid blockquote {font-size:19px}
}

@media(max-width:760px) {
.gallery-shell .horizontal-rail {gap:16px}
.gallery-shell .horizontal-rail>* {flex-basis:86%}
.gallery-scrim {width:48px}
#experience .gallery-scrim {right:24px}
.gallery-navigation {font-size:11px}
.gallery-hint>span {padding-inline:6px}
.prototype-launch .mini {height:344px}
#examples .horizontal-rail .example-art,#examples .horizontal-rail .product-tile {height:344px!important}
#prototype-lightbox .lightbox-toolbar {display:grid;grid-template-columns:minmax(0,1fr) auto;padding:4px 12px;gap:0 12px}
#prototype-lightbox #lightbox-title {display:none}
.prototype-picker {grid-column:1;grid-row:1;width:100%}
#prototype-select {min-height:40px;width:100%;border:0;background:transparent}
#prototype-lightbox #close-lightbox {grid-column:2;grid-row:1;min-height:44px;border:0}
#prototype-lightbox .prototype-tools {grid-column:1/-1;grid-row:2;justify-content:space-between;padding-bottom:4px}
#prototype-lightbox .prototype-device button {min-height:40px;padding:4px 12px}
#prototype-lightbox .prototype-tools>a {min-height:44px}
#prototype-lightbox .preview-stage.tablet {padding:0}
.trust-section {grid-template-columns:1fr;gap:32px;padding-block:40px}
.trust-logos {grid-template-columns:repeat(3,auto);justify-content:space-around;gap:12px 20px;min-width:0}
.google-logo {height:28px}
.nike-logo {width:72px}
.adidas-logo {height:28px}
.testimonials {padding-block:56px 72px}
.testimonial-grid {grid-template-columns:1fr}
.testimonial-grid figure {min-height:0;padding:32px}
.testimonial-grid blockquote {font-size:22px}
.testimonials .section-heading {margin-bottom:32px}
}

@media(prefers-reduced-motion:reduce) {
.gallery-scrim,.gallery-navigation button {transition:none}
#prototype-lightbox .preview-stage iframe {transition:none}
}

.atelier .magazine-hero :is(.hero-title,.hero-copy) {position:relative;isolation:isolate;--hero-accent:#f5501e}

.atelier .magazine-hero :is(.hero-title,.hero-copy)[data-hero-tone="dark"] {--hero-foreground:#000}

.atelier .magazine-hero .hero-title {align-self:flex-start;width:100%}

.atelier .magazine-hero .hero-copy {align-self:flex-start}

.atelier .magazine-hero :is(.hero-title,.hero-copy) :is(h1,.kicker,p,.lead,.hero-point-of-view,.hero-explanation) {color:var(--hero-foreground)!important;opacity:1;text-shadow:none}

.atelier .magazine-hero :is(.hero-title,.hero-copy) :is(em,.hero-manifesto-accent,.hero-point-of-view span,.lead span) {color:var(--hero-accent)!important}

.atelier .magazine-hero .art-caption {padding:8px 12px;border-radius:8px;background:#111113b3;color:#f6f4ef}

.atelier .magazine-hero .hero-art>[data-hero-slide="atrium"] {object-position:55% center}

.atelier .magazine-hero .hero-art>[data-hero-slide="gallery"] {object-position:60% center}

.hero-rotation-controls {gap:0}

@media(max-width:760px) {
.atelier .magazine-hero .hero-art>[data-hero-slide="atrium"] {object-position:26% center}
.atelier .magazine-hero .hero-art>[data-hero-slide="gallery"] {object-position:40% center}
.hero-rotation-controls {left:16px;right:16px;width:fit-content;margin-left:auto;max-width:calc(100% - 32px)}
.hero-rotation-controls button[data-hero-frame-choice] {min-width:0;width:clamp(28px,8vw,40px);min-height:44px}
.hero-rotation-controls .hero-playback {padding-inline:8px}
}

.atelier .magazine-hero .hero-art>[data-hero-slide="fashion"] {object-position:center 25%}

.hero-microcopy {font-size:13px;line-height:1.5;color:#aaaab4;margin:0}

.atelier .magazine-hero .hero-copy .hero-microcopy {opacity:.75}

.workflow-canvas-figure {margin-top:48px;padding-top:48px;border-top:1px solid #ffffff20}

.workflow-canvas-figure img {display:block;width:100%;height:auto;border-radius:12px}

.workflow-canvas-figure figcaption {font-size:14px;color:#aaaab4;margin-top:16px}

@media(max-width:760px) {
.workflow-canvas-figure {margin-top:32px;padding-top:32px}
}

.atelier .magazine-hero .hero-rotation-controls {left:50%;right:auto;bottom:24px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:0 4px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}

.atelier .magazine-hero .hero-rotation-controls:before {content:"";position:absolute;inset:6px 0;background:#111113b3;border:1px solid #ffffff0d;border-radius:24px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:-1;pointer-events:none}

.atelier .magazine-hero .hero-rotation-controls button[data-hero-frame-choice] {width:28px;min-width:28px;min-height:44px}

.atelier .magazine-hero .hero-rotation-controls [data-hero-frame-choice]:after {width:4px;height:4px}

.atelier .magazine-hero .hero-rotation-controls .hero-playback {min-height:44px;min-width:40px;padding:0 8px;font-size:11px}

.pricing.product-pricing .section-heading {margin-bottom:40px}

.pricing-options {display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:40px}

.pricing-options>p {font-size:14px;color:#62626a;line-height:1.7}

.pricing-options strong {font-weight:500;color:#111113}

.billing-toggle {display:flex;align-items:center;gap:4px;background:#00000008;border:1px solid #0002;border-radius:32px;padding:4px;flex-shrink:0}

.billing-toggle button {border:0;background:none;border-radius:24px;padding:10px 16px;min-height:44px;font-size:14px;color:#555}

.billing-toggle button[aria-pressed=true] {background:#111113;color:#fff}

.billing-toggle button>span {font-size:12px;opacity:.8;margin-left:6px}

.product-pricing .product-plans {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:0;align-items:stretch}

.product-pricing .product-plans article {grid-column:auto;display:flex;flex-direction:column;padding:24px;border:1px solid #11111326;border-radius:12px;background:#ffffff32;min-width:0}

.product-pricing .product-plans article.is-popular {border-color:#f5501e;background:#f5501e08}

.product-pricing .plan-name {min-height:64px;position:relative;padding-top:24px}

.product-pricing .product-plans h3 {font-size:28px;letter-spacing:-.045em;line-height:1.1;margin:0}

.plan-badge {position:absolute;top:-8px;left:0;font:10px/1.3 monospace;text-transform:uppercase;letter-spacing:.04em;color:#a32e0a;background:#f5501e17;padding:4px 8px;border-radius:16px}

.plan-description {font-size:14px;line-height:1.5;color:#62626a;min-height:66px;margin-top:8px}

.product-pricing .product-plans .price {margin-top:24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;font-size:clamp(28px,2.7vw,48px);line-height:1.1;letter-spacing:-.05em}

.product-pricing .price strong {font-weight:500}

.product-pricing .product-plans .price>span {font-size:12px;margin:0;letter-spacing:0;color:#62626a}

.product-pricing .price>small {font-size:12px;letter-spacing:0;color:#62626a;width:100%}

.enterprise-plan .price {position:relative}

.enterprise-plan .price>small {position:absolute;left:0;top:-16px}

.billing-caption {font-size:12px;color:#62626a;margin-top:8px;min-height:36px}

.plan-example {font-size:13px;line-height:1.6;color:#9e3517;min-height:84px;margin-top:16px}

.credit-pool {padding:16px;border:1px solid #f5501e33;background:#f5501e06;border-radius:8px;margin-top:8px}

.credit-pool strong {display:block;font-size:16px;line-height:1.4;font-weight:500;letter-spacing:-.025em}

.credit-pool>span {display:block;margin-top:4px;font-size:12px;color:#62626a}

.product-pricing .product-plans ul {margin:24px 0 32px;font-size:14px;line-height:1.5;padding:0;list-style:none}

.product-pricing .product-plans li {padding-left:16px;position:relative;margin-bottom:12px}

.product-pricing .product-plans li:before {content:'✓';position:absolute;left:0;top:0;font-size:12px;color:#b13914}

.product-pricing .product-plans .plan-cta {margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #11111340;border-radius:8px;padding:12px 16px;min-height:48px;font-size:14px}

.product-pricing .is-popular .plan-cta {background:#f5501e;color:#111113;border-color:#f5501e}

.product-pricing .pricing-note {margin-top:32px;font-size:14px;line-height:1.6;max-width:96ch;color:#62626a}

.product-pricing .comparison-scroll {overflow-x:auto;margin-top:24px}

.product-pricing table {min-width:880px;width:100%;font-size:14px;border-collapse:collapse}

.product-pricing caption {text-align:left;font-size:12px;padding-bottom:16px;color:#62626a}

.product-pricing table th,.product-pricing table td {text-align:left;vertical-align:top;padding:16px 12px;border-bottom:1px solid #11111320;width:19%}

.product-pricing table th:first-child {width:24%;padding-left:0}

.product-pricing .plan-details>p {font-size:13px;line-height:1.7;color:#62626a;margin-top:16px;max-width:100ch}

.billing-status {font-size:12px;color:#62626a;margin-top:24px}

.folio .product-pricing {color:#f6f4ef}

.folio .product-pricing :is(.pricing-options>p,.plan-description,.billing-caption,.credit-pool>span,.pricing-note,.billing-status,caption,.plan-details>p,.price>span,.price>small) {color:#b6b6bf}

.folio .pricing-options strong {color:#f6f4ef}

.folio .product-pricing .product-plans article {background:#ffffff04;border-color:#ffffff30}

.folio .product-pricing .product-plans article.is-popular {border-color:#f5501e}

.folio .product-pricing .plan-example,.folio .product-pricing .plan-badge {color:#ff996f}

.folio .billing-toggle {border-color:#ffffff30;background:#ffffff06}

.folio .billing-toggle button {color:#b6b6bf}

.folio .billing-toggle button[aria-pressed=true] {background:#f6f4ef;color:#111113}

.folio .product-pricing .plan-cta {border-color:#ffffff40}

.folio .product-pricing table :is(th,td) {border-color:#ffffff25}

@media(max-width:1200px) {
.product-pricing .product-plans {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.product-pricing .product-plans .price {font-size:44px}
.plan-description {min-height:44px}
.plan-example {min-height:64px}
}

@media(max-width:760px) {
.atelier .magazine-hero .art-caption {display:none}
.pricing-options {align-items:flex-start;flex-direction:column;gap:24px}
.product-pricing .product-plans {grid-template-columns:1fr;gap:24px}
.product-pricing .product-plans article {padding:24px}
.plan-description,.plan-example {min-height:0}
.billing-caption {min-height:0}
.plan-example {margin-top:24px;margin-bottom:16px}
.product-pricing .product-plans .price {font-size:44px}
.product-pricing .product-plans .plan-cta {margin-top:8px}
.billing-toggle button {padding:10px 14px}
.billing-toggle button>span {font-size:11px}
.product-pricing .section-heading>p {max-width:32ch}
}

@media(pointer:coarse) {
.atelier .magazine-hero .hero-rotation-controls button[data-hero-frame-choice] {width:32px;min-width:32px}
.atelier .magazine-hero .hero-rotation-controls .hero-playback {min-width:40px}
}

.hero-rotation-controls[hidden],.hero-rotation-controls [hidden] {display:none!important}

.gallery-navigation button,.round-arrow {display:grid!important;place-items:center!important;flex:none;padding:0!important;width:44px;height:44px;min-width:44px;min-height:44px;line-height:0;border:1px solid #ffffff30;border-radius:50%;background:#ffffff09;color:inherit;cursor:pointer}

.gallery-navigation button svg,.gallery-navigation button:hover svg,.round-arrow svg,.round-arrow:hover svg {display:block;width:20px;height:20px;margin:0!important;transform:none!important;flex:none;position:static}

.round-arrow:hover {background:#ffffff20}

#examples .format-rail {align-items:flex-start;gap:24px;padding-block:8px 24px}

#examples .format-rail>.format-column {flex:0 0 clamp(256px,28vw,368px);display:flex;flex-direction:column;gap:24px;height:524px}

#examples .format-rail>.format-wide {flex-basis:clamp(320px,42vw,560px)}

.format-card {display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}

.format-image {display:block;border-radius:12px;overflow:hidden;background:#202024;height:208px}

.format-single .format-image {height:488px}

.format-wide .format-image {height:360px}

.format-single>.format-card,.format-stack>.format-card {display:flex;flex-direction:column;flex:1 1 0;min-height:0}

.format-single .format-image,.format-stack .format-image {flex:1 1 0;height:auto;min-height:0}

.format-image>img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s}

.format-portrait img {object-position:center 30%}

.format-square img {object-fit:contain;background:#f5501e}

.format-caption {display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:12px;font-size:16px;line-height:1.5;letter-spacing:-.01em}

.format-caption>span:last-child {font-family:NorthlitSans,Arial,sans-serif;font-size:12px;line-height:1.5;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#8e8e96}

.format-card:focus-visible,.workflow-directions button:focus-visible,.workflow-prototype:focus-visible,.round-arrow:focus-visible,.format-close:focus-visible {outline:2px solid #f5501e;outline-offset:5px}

@media(hover:hover) {
.format-card:hover img {transform:scale(1.035)}
.format-card:hover .format-caption {color:#ff8256}
}

#format-lightbox {position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#09090b;color:#f5f5f5;overflow:hidden}

#format-lightbox[open] {display:grid;grid-template-rows:auto minmax(0,1fr) auto}

#format-lightbox::backdrop {background:#09090b}

.format-viewer-toolbar {display:flex;align-items:center;gap:24px;padding:16px 24px;border-bottom:1px solid #ffffff14}

#format-title {font:500 16px/1.4 NorthlitSans,Arial,sans-serif;letter-spacing:0;margin:0}

#format-description {font-size:12px;color:#96969f;margin:4px 0 0}

.format-counter {margin-left:auto;color:#aaa;font-family:NorthlitSans,Arial,sans-serif;font-size:12px;line-height:1.4;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em}

.format-close {display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:0;color:inherit;font:14px/1.4 NorthlitSans,Arial,sans-serif;min-height:44px;padding:0 8px;cursor:pointer}

.format-close svg {display:block;margin:0}

.format-viewer-stage {position:relative;min-height:0;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:24px;align-items:center;padding:24px}

.format-viewer-image {display:block;grid-column:2;grid-row:1;width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;border-radius:8px;opacity:1;transition:opacity .24s ease}

.format-viewer-image.is-loading {opacity:0}

.format-prev {grid-column:1;grid-row:1}

.format-next {grid-column:3;grid-row:1}

.format-loading {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;color:#aaa;pointer-events:none}

.format-thumbnails {display:flex;gap:8px;padding:12px 24px 24px;overflow-x:auto;justify-content:safe center;scrollbar-width:none}

.format-thumbnails button {flex:none;display:block;width:64px;height:48px;min-height:44px;padding:0;border:0;border-radius:6px;overflow:hidden;background:#161619;opacity:.4;cursor:pointer;transition:opacity .2s}

.format-thumbnails button[aria-pressed=true],.format-thumbnails button:hover,.format-thumbnails button:focus-visible {opacity:1}

.format-thumbnails button:focus-visible {outline:2px solid #f5501e;outline-offset:3px}

.format-thumbnails img {width:100%;height:100%;object-fit:cover;display:block}

.how-it-works {padding-block:112px 96px;scroll-margin-top:0;border-bottom:1px solid #ffffff18;color:#f4f4f6}

.how-it-works .section-heading {display:block;margin-bottom:64px}

.how-it-works .section-heading h2 {font-size:clamp(36px,4.5vw,64px);font-weight:500;line-height:1.06;letter-spacing:-.05em;margin-top:24px;max-width:20ch}

.workflow-grid {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}

.workflow-step {grid-column:span 4;min-width:0;position:relative}

.workflow-caption {padding-top:24px;border-top:1px solid #ffffff2b;min-height:176px;position:relative}

.workflow-step:not(:last-child) .workflow-caption:after {content:'';position:absolute;right:-32px;top:-1px;width:32px;height:1px;background:#ffffff2b}

.workflow-number {display:block;font-family:NorthlitSans,Arial,sans-serif;font-size:12px;line-height:1.4;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.05em;color:#f5501e;margin-bottom:16px}

.workflow-caption h3 {font-size:24px;line-height:1.2;letter-spacing:-.03em;margin:0 0 12px}

.workflow-caption p {font-size:16px;line-height:1.5;color:#aaaab4;max-width:32ch;margin:0 0 24px}

.workflow-board,.workflow-directions,.workflow-prototype {height:336px}

.workflow-board {display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr auto;gap:8px;padding:16px;border-radius:12px;background:#202024}

.workflow-board>img {width:100%;height:100%;min-height:0;object-fit:cover;border-radius:6px}

.workflow-board>img:first-child {grid-row:span 2}

.workflow-swatches {display:flex;gap:4px;height:24px;grid-column:1}

.workflow-swatches i {flex:1;background:#161619;border-radius:3px}

.workflow-swatches i:nth-child(2) {background:#91867b}

.workflow-swatches i:nth-child(3) {background:#eeebe4}

.workflow-swatches i:nth-child(4) {background:#f5501e}

.workflow-brief {font-size:14px;line-height:1.3;align-self:center}

.workflow-brief small {display:block;font-size:12px;color:#aaa;margin-top:4px}

.workflow-directions {display:flex;align-items:center;gap:8px}

.workflow-directions>button {width:calc((100% - 16px)/3);padding:0;border:0;background:none;color:#eee;text-align:left;cursor:pointer;opacity:.5;transition:opacity .25s,transform .25s}

.workflow-directions>button[aria-pressed=true] {opacity:1;transform:translateY(-12px)}

.workflow-directions>button:hover {opacity:1}

.workflow-directions .mini {height:224px!important;min-height:0!important;border-radius:8px;overflow:hidden;padding:12px!important;pointer-events:none}

.workflow-directions .mini h3 {font-size:20px!important;margin:24px 0!important;max-width:7ch}

.workflow-directions .mini .nh {font-size:6px!important;letter-spacing:.05em}

.workflow-directions .mini .mini-foot {display:none}

.workflow-directions .mini-editorial>img {width:100%;height:112px;object-fit:cover;position:static}

.workflow-directions .mini-pair {gap:4px}

.workflow-directions .mini-pair img {height:92px}

.workflow-direction-label {display:block;margin-top:12px;font-size:12px;line-height:1.4}

.workflow-prototype {width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;background:#232327;color:#eee;cursor:pointer;text-align:left;display:flex;flex-direction:column}

.workflow-browser {display:flex;align-items:center;gap:4px;padding:12px;flex:none}

.workflow-browser>span {width:5px;height:5px;border-radius:50%;background:#777}

.workflow-browser small {margin-left:8px;font-size:11px;color:#aaa}

.workflow-prototype-preview {flex:1;min-height:0;overflow:hidden;pointer-events:none}

.workflow-prototype-preview .mini {height:100%!important;min-height:0!important;padding:24px!important;border-radius:0!important}

.workflow-prototype-preview .mini h3 {font-size:36px!important;margin-block:16px!important;position:relative;z-index:1}

.workflow-prototype-preview .mini .nh {font-size:9px!important}

.workflow-prototype-preview .mini-foot {display:none}

.workflow-prototype-preview .mini-editorial>img {height:144px;width:48%;position:absolute;right:0;bottom:0;object-fit:cover}

.workflow-open {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px;font-size:14px;color:#f6f6f6}

.workflow-open svg {flex:none;display:block;margin:0}

.workflow-canvas {margin-top:48px;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20}

.workflow-canvas summary {display:flex;align-items:center;justify-content:space-between;list-style:none;font-size:14px;padding:24px 0;cursor:pointer}

.workflow-canvas summary::-webkit-details-marker {display:none}

.workflow-canvas[open] summary>span {transform:rotate(45deg)}

.workflow-canvas figure {margin:0 0 24px}

.workflow-canvas img {display:block;width:100%;height:auto;border-radius:12px}

.workflow-canvas figcaption {font-size:14px;color:#aaa;margin-top:16px}

.folio .how-it-works,.atlas .how-it-works {color:#161619;border-color:#0002}

.folio .workflow-caption,.atlas .workflow-caption {border-color:#0002}

.folio .workflow-caption p,.atlas .workflow-caption p {color:#595960}

@media(max-width:1000px) {
.workflow-grid {gap:24px}
.workflow-step:not(:last-child) .workflow-caption:after {width:24px;right:-24px}
.workflow-caption {min-height:192px}
.workflow-directions {gap:4px}
.workflow-direction-label {font-size:12px}
.workflow-board {padding:8px}
.workflow-directions .mini h3 {font-size:16px!important}
}

@media(max-width:760px) {
#examples .format-rail {gap:16px}
#examples .format-rail>.format-column {flex-basis:76vw;height:auto}
#examples .format-rail>.format-wide {flex-basis:86vw}
.format-single>.format-card,.format-stack>.format-card {flex:none;display:block}
.format-single .format-image,.format-stack .format-image {flex:none}
.format-image {height:168px}
.format-single .format-image {height:408px}
.format-wide .format-image {height:280px}
.format-viewer-toolbar {padding:8px 16px;gap:12px}
#format-description {max-width:28ch}
.format-counter {font-size:12px}
.format-close {font-size:0;gap:0;width:44px;flex:none}
.format-viewer-stage {padding:16px;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 44px;gap:16px}
.format-viewer-image {grid-column:1;grid-row:1}
.format-prev,.format-next {grid-column:1;grid-row:2;justify-self:center}
.format-prev {margin-right:56px}
.format-next {margin-left:56px}
.format-thumbnails {padding:8px 16px 16px}
.how-it-works {padding-block:64px}
.how-it-works .section-heading {margin-bottom:40px}
.workflow-grid {display:flex;flex-direction:column;gap:48px}
.workflow-caption {min-height:0}
.workflow-step:not(:last-child) .workflow-caption:after {display:none}
.workflow-board,.workflow-directions,.workflow-prototype {height:320px}
.workflow-directions .mini h3 {font-size:24px!important}
.workflow-directions .mini {height:248px!important}
.workflow-directions>button {width:calc((100% - 16px)/3)}
.workflow-directions {gap:8px}
.workflow-canvas {margin-top:40px}
}

@media(prefers-reduced-motion:reduce) {
.format-image>img,.format-viewer-image,.format-thumbnails button,.workflow-directions>button {transition:none}
.format-card:hover img {transform:none}
}

#format-lightbox .format-viewer-toolbar {display:flex;grid-template-columns:none;min-height:0;width:100%;max-width:none;margin:0;position:relative}

#format-lightbox .format-loading {margin:0}

.workflow-directions .mini {position:relative}

.workflow-prototype-preview .mini {position:relative}

.workflow-prototype-preview .mini-immersive>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.workflow-prototype-preview .mini-immersive .nh {position:relative;z-index:1}

.launch-section {padding-block:96px}

.launch-section h2 {font-size:clamp(36px,4.3vw,62px);line-height:1.08;letter-spacing:-.045em}

.launch-section h3 {font-size:25px;line-height:1.18;letter-spacing:-.035em}

.launch-section p {line-height:1.65}

.launch-section .kicker {font-size:11px;letter-spacing:.065em;margin-bottom:20px}

.launch-section .section-heading>p:last-child {max-width:64ch}

.launch-section .text-link {display:inline-block;margin-top:24px;padding-bottom:7px;line-height:1.4}

.launch-guidance {background:#eeece7;color:#111113}

.launch-guidance .kicker {color:#666}

.launch-guidance .section-heading>p:last-child {color:#5c5c62}

.launch-resource-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}

.launch-resource-grid article {min-width:0}

.launch-resource-grid article>p:not(.kicker) {color:#5c5c62;font-size:15px;margin-top:16px}

.launch-resource-grid article>.kicker {margin:24px 0 12px}

.launch-resource-grid h3 {font-size:23px}

.launch-resource-art {height:210px;overflow:hidden;position:relative;padding:24px;background:#fbfbfc;border:1px solid #1112}

.launch-resource-art>span {font-size:9px;letter-spacing:.07em}

.launch-style-art {background:#F5501E}

.launch-style-art strong {display:block;font-size:46px;line-height:1.02;letter-spacing:-.07em;font-weight:600;margin-top:24px}

.launch-style-art i {position:absolute;width:70px;height:70px;right:-20px;bottom:-15px;border:1px solid #111;border-radius:50%}

.launch-system-art>strong {display:block;font-size:78px;letter-spacing:-.065em;font-weight:500;line-height:1}

.launch-system-art>div {display:flex;gap:5px;margin:17px 0}

.launch-system-art i {width:32px;height:24px;background:#111113}

.launch-system-art i:nth-child(2) {background:#F5501E}

.launch-system-art i:nth-child(3) {background:#97A6C4}

.launch-system-art i:nth-child(4) {background:#EDECEE}

.launch-template-art {display:grid;grid-template-columns:1.3fr 1fr;gap:8px;align-content:center}

.launch-template-art div {height:43px;background:#e5e4e2;border:1px solid #1112}

.launch-template-art div:first-child {grid-column:1/-1;height:63px;background:#111113}

.launch-template-art span {grid-column:1/-1;margin-top:10px}

.launch-skill-art {background:#111113;color:#FBFBFC}

.launch-skill-art>span {color:#aaa}

.launch-skill-art p {font-size:13px;line-height:1.9;margin-top:26px;letter-spacing:-.02em}

.launch-skill-art b {display:block;font-weight:400;font-size:9px;color:#ff9a4d;margin-top:24px}

.launch-guidance-example {display:grid;grid-template-columns:1fr 1.3fr;gap:64px;margin-top:64px;padding-top:40px;border-top:1px solid #1113}

.launch-guidance-example p:not(.kicker) {font-size:15px;color:#62626a;margin-top:16px;max-width:44ch}

.launch-example-options button {display:grid;grid-template-columns:24px 1fr 1.8fr 16px;align-items:center;gap:12px;width:100%;padding:20px 0;background:none;border:0;border-bottom:1px solid #1113;color:#111;text-align:left}

.launch-example-options button>span:first-child {font:11px monospace;color:#777}

.launch-example-options strong {font-weight:500;font-size:17px}

.launch-example-options small {font-size:13px;color:#666}

.launch-note {font-size:12px!important;line-height:1.6!important;color:#999!important;max-width:60ch}

.launch-guidance .launch-note {color:#666!important}

.launch-two-column {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}

.launch-two-column>div>p:not(.kicker) {font-size:17px;color:#b2b2ba;max-width:52ch;margin-top:24px}

.launch-built-in {border-bottom:1px solid #fff2}

.launch-agent-names {display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

.launch-agent-names span {padding:9px 14px;border:1px solid #fff3;border-radius:6px;font-size:13px}

.launch-edit-example {padding:36px;background:#1c1c20;border:1px solid #fff2;border-radius:12px}

.launch-edit-example blockquote {font-size:27px;line-height:1.3;letter-spacing:-.03em;margin:28px 0 36px;color:#FBFBFC}

.launch-edit-steps p {padding:13px 0;border-top:1px solid #fff2;color:#bbb;font-size:14px}

.launch-edit-steps span {font:11px monospace;color:#ff9a4d;margin-right:18px}

.launch-outline-button {display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;border:1px solid #777;background:none;color:#fff;padding:15px 18px;margin-top:28px;font-size:14px;border-radius:8px}

.launch-edit-example .launch-note {margin-top:18px}

.launch-models {border-top:1px solid #fff2;border-bottom:1px solid #fff2}

.launch-models .launch-two-column>div:last-child>p {margin-top:0}

.launch-model-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}

.launch-model-grid>div {border-top:1px solid #fff3;padding-top:24px}

.launch-model-grid h3 {font-size:23px}

.launch-model-grid p:not(.kicker) {font-size:14px;color:#aaa;margin-top:18px}

.launch-model-grid span {display:block;font-size:12px;color:#ff9a4d;margin-top:24px}

.launch-details {border-top:1px solid #fff3;margin-top:40px}

.launch-details summary {padding:22px 0;font-size:14px;cursor:pointer}

.launch-details>div {max-width:78ch;padding-bottom:24px}

.launch-details p {font-size:15px;color:#aaa;margin-top:12px}

.launch-audience-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}

.launch-audience-grid article {border-top:1px solid #fff3;padding-top:24px}

.launch-audience-grid h3 {font-size:28px}

.launch-audience-grid article>p:not(.kicker) {font-size:16px;color:#aaa;margin-top:24px}

.launch-credit-examples {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-block:1px solid #1113;padding:24px 0;margin:28px 0}

.launch-credit-examples strong {display:block;font-weight:500;font-size:23px;letter-spacing:-.04em}

.launch-credit-examples p {font-size:13px;color:#62626a;margin-top:8px}

.launch-pricing-terms {font-size:13px;line-height:1.7;color:#62626a;max-width:90ch;margin-top:18px}

.launch-integrations {display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.launch-integrations a {padding:10px 14px;border:1px solid #fff3;border-radius:6px;font-size:13px}

.launch-footer-link {font-size:12px;color:#a5a5ae}

.launch-plan-dialog {border-radius:12px;padding:40px;max-width:560px}

.launch-plan-dialog .launch-plan-value {font-size:40px;line-height:1.1;letter-spacing:-.04em}

.launch-plan-dialog .launch-plan-period {font-size:14px;color:#666;margin-top:10px}

.launch-plan-dialog p {font-size:15px}

.launch-plan-dialog .launch-plan-selection {margin:24px 0;border-block:1px solid #1113;padding:24px 0}

.launch-plan-dialog a.button {width:100%;border-radius:8px}

.launch-plan-dialog .launch-note {color:#666!important;margin:20px 0 0}

.launch-plan-dialog .dialog-close {line-height:1}

@media(max-width:1050px) {
.launch-resource-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
.launch-two-column {gap:40px}
.launch-guidance-example {gap:40px}
.launch-example-options button {grid-template-columns:20px 1fr 16px}
.launch-example-options small {grid-column:2;grid-row:2}
.launch-example-options button>span:last-child {grid-column:3;grid-row:1/3}
}

@media(max-width:760px) {
.launch-section {padding-block:64px}
.launch-section h2 {font-size:38px}
.launch-two-column,.launch-guidance-example,.launch-model-grid,.launch-audience-grid {grid-template-columns:1fr;gap:36px}
.launch-resource-grid {gap:32px 18px}
.launch-resource-art {height:176px;padding:18px}
.launch-style-art strong {font-size:36px}
.launch-system-art>strong {font-size:62px}
.launch-system-art i {width:24px;height:20px}
.launch-resource-grid h3 {font-size:22px}
.launch-resource-grid article>p:not(.kicker) {font-size:14px}
.launch-resource-grid .text-link {font-size:12px}
.launch-resource-art>span {font-size:8px}
.launch-edit-example {padding:24px}
.launch-edit-example blockquote {font-size:24px}
.launch-guidance-example {margin-top:40px}
.launch-credit-examples {grid-template-columns:1fr;gap:18px}
.launch-credit-examples>div+div {padding-top:18px;border-top:1px solid #1112}
.launch-plan-dialog {padding:40px 24px}
.launch-plan-dialog .launch-plan-value {font-size:34px}
}

@media(max-width:380px) {
.launch-resource-grid {grid-template-columns:1fr}
.launch-resource-art {height:210px}
}

.atelier .photo-hero.magazine-hero {padding-block:56px 80px;min-height:760px}

.atelier .magazine-hero .variant-story {width:62%;max-width:750px;min-height:624px;gap:36px;justify-content:space-between;margin:0}

.atelier .magazine-hero h1 {font-size:clamp(54px,6vw,84px);max-width:15ch;line-height:1.03}

.atelier .magazine-hero .hero-copy {max-width:48ch}

.atelier .magazine-hero .hero-copy .hero-explanation {font-size:17px;line-height:1.65}

.atelier .magazine-hero .hero-actions {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px}

.atelier .magazine-hero .hero-actions .hero-microcopy {flex-basis:100%;font-size:12px;line-height:1.5;margin:0}

.atelier .magazine-hero .hero-art:after {background:linear-gradient(90deg,#000c 0%,#0009 40%,transparent 80%)}

.atelier .magazine-hero :is(.hero-title,.hero-copy) {--hero-foreground:#faf9f6!important}

.atelier .magazine-hero .hero-actions .text-link {color:#faf9f6;border-color:#aaa}

.workflow-canvas-figure {margin-inline:0}

@media(max-width:1100px) {
.atelier .magazine-hero .variant-story {width:70%}
}

@media(max-width:760px) {
.atelier .photo-hero.magazine-hero {padding:40px 20px 80px;min-height:0}
.atelier .magazine-hero .variant-story {width:100%;min-height:620px;gap:36px}
.atelier .magazine-hero h1 {font-size:clamp(44px,11vw,64px);margin-top:20px}
.atelier .magazine-hero .hero-copy .hero-explanation {font-size:16px}
.atelier .magazine-hero .hero-art:after {background:linear-gradient(180deg,#0008,#000c)}
.atelier .magazine-hero .hero-actions {gap:18px}
}

.launch-arrow {display:inline-block;vertical-align:-3px;flex-shrink:0}

.launch-section .text-link .launch-arrow {width:14px;height:14px;vertical-align:-2px;margin-left:3px}

.launch-resource-grid article {display:flex;flex-direction:column;align-items:flex-start}

.launch-resource-art {width:100%;flex-shrink:0}

.launch-resource-grid article>.text-link {margin-top:auto;padding-top:24px}

@media(max-width:760px) {
.launch-skill-art p {font-size:10px;line-height:1.7;margin-top:14px}
.launch-skill-art b {margin-top:16px;font-size:8px}
}

.unified-agents {position:relative;border-bottom:1px solid #ffffff26}

.unified-agent-anchor {position:absolute;top:0;left:0}

.unified-agent-intro>h2 {font-size:clamp(48px,6.4vw,88px);line-height:1.03;letter-spacing:-.05em;margin:0}

.unified-agent-intro>p:last-child {font-size:19px;line-height:1.65;color:#b2b2ba;max-width:67ch;margin-top:28px}

.unified-agent-paths {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:56px;border-top:1px solid #ffffff26;padding-top:36px}

.unified-agent-paths article {display:flex;flex-direction:column;align-items:flex-start;padding-right:56px}

.unified-agent-paths article+article {padding-right:0;padding-left:56px;border-left:1px solid #ffffff26}

.unified-agent-paths h3 {font-size:28px;line-height:1.2;letter-spacing:-.035em}

.unified-agent-paths p {color:#b2b2ba;font-size:17px;line-height:1.65;margin:20px 0 28px;max-width:49ch}

.unified-agent-cta {display:inline-flex;align-items:center;gap:14px;font-size:15px;line-height:1.5;min-height:44px;border-bottom:1px solid #777;margin-top:auto;padding-bottom:9px;color:#fbfbfc}

.unified-agent-cta svg {color:#f5501e;flex-shrink:0}

.unified-agent-example {display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-top:56px;padding-top:32px;border-top:1px solid #ffffff26}

.unified-agent-example>.kicker {margin:5px 0 0;font-size:11px;max-width:22ch}

.unified-agent-example #prompt-text {font-size:27px;line-height:1.4;letter-spacing:-.025em;color:#fbfbfc;max-width:48ch;margin:0}

.unified-agent-example #prompt-text:before {content:open-quote}

.unified-agent-example #prompt-text:after {content:close-quote}

.unified-agent-example #copy {display:inline-flex;align-items:center;gap:12px;min-height:44px;background:none;border:0;border-bottom:1px solid #f5501e;border-radius:0;color:#ff845c;font-size:14px;line-height:1.5;padding:10px 0;margin-top:24px}

.unified-agent-example #copy-status {font-size:13px;line-height:1.5;margin:12px 0 0;color:#b2b2ba;min-height:20px}

@media(max-width:1000px) {
.unified-agent-paths article {padding-right:32px}
.unified-agent-paths article+article {padding-left:32px}
.unified-agent-example {gap:32px}
.unified-agent-paths h3 {font-size:25px}
}

@media(max-width:760px) {
.unified-agent-intro>h2 {font-size:52px}
.unified-agent-intro>p:last-child {font-size:17px;margin-top:24px}
.unified-agent-paths {grid-template-columns:1fr;margin-top:36px;padding-top:28px}
.unified-agent-paths article {padding:0}
.unified-agent-paths article+article {border-left:0;border-top:1px solid #ffffff26;padding:28px 0 0;margin-top:32px}
.unified-agent-paths h3 {font-size:27px}
.unified-agent-paths p {font-size:16px;margin:16px 0 20px}
.unified-agent-example {grid-template-columns:1fr;gap:20px;margin-top:36px;padding-top:28px}
.unified-agent-example>.kicker {max-width:none}
.unified-agent-example #prompt-text {font-size:24px}
.unified-agent-cta {font-size:14px}
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html:not(.da-fx) [data-fx] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* ── Northlit session state (not part of the prototype export) ────────────
   scripts/build-landing.tsx sets `nl-member` on <html> — synchronously from
   the nl_auth hint cookie before first paint, or after a Firebase-persistence
   probe — so member/guest CTA twins swap without a flash. */
html.nl-member [data-guest-only] {display:none !important}
html:not(.nl-member) [data-member-only] {display:none !important}

/* ---- Landing revisions (northlit-website): CTAs, trusted-by, suite, works-with ---- */
.button,.site-header>.header-cta,.site-header nav .mobile-nav-cta {font-size:15px;font-weight:600}

.trusted {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding-block:56px;border-bottom:1px solid #ffffff18;color:#f4f4f6}
.trusted .kicker {margin-bottom:12px}
.trusted-title {font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.03em;margin:0}
.trusted-marks {display:flex;justify-content:space-between;align-items:center;gap:40px;list-style:none;margin:0;padding:0 24px}
.trusted-marks li {display:flex;align-items:center;justify-content:center;color:#d6d6dc}
.trusted-marks svg {display:block;height:auto}
.trusted-marks .trusted-apple {width:34px}
.trusted-marks .trusted-adidas {width:66px}
.trusted-marks .trusted-google {width:124px}
.trusted-more {display:flex;align-items:center;gap:20px;margin:28px 0 0;font-size:14px;color:#8f8f98}
.trusted-more:before,.trusted-more:after {content:"";flex:1;height:1px;background:#ffffff22}
@media (max-width:860px) {
.trusted {grid-template-columns:1fr;gap:28px;padding-block:40px}
.trusted-marks {padding:0;gap:24px}
.trusted-marks .trusted-apple {width:28px}
.trusted-marks .trusted-adidas {width:52px}
.trusted-marks .trusted-google {width:100px}
}

.works-with {display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;list-style:none;margin:36px 0 0;padding:0;color:#e6e6ea;font-size:15px}
.works-with li {display:inline-flex;align-items:center;gap:10px;margin:0}
.works-with-label {font:11px/1.5 monospace;letter-spacing:.065em;text-transform:uppercase;color:#8f8f98}
.works-with svg {width:22px;height:22px;display:block}

.suite {border-bottom:1px solid #fff2}
.suite .launch-two-column>div:last-child>p {margin-top:0}
.suite-gallery {display:grid;grid-template-columns:3fr 2fr 2fr 2fr;gap:20px;list-style:none;margin:64px 0 0;padding:0}
.suite-gallery li {display:flex;flex-direction:column;gap:14px;margin:0;min-width:0}
.suite-art {display:block;overflow:hidden;border-radius:16px;background:#1c1c20;aspect-ratio:1}
.suite-gallery li:first-child .suite-art {aspect-ratio:3/2}
.suite-art img {display:block;width:100%;height:100%;object-fit:cover}
.suite-caption {display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#e6e6ea}
.suite-caption span:last-child {font:11px/1.6 monospace;letter-spacing:.065em;text-transform:uppercase;color:#8f8f98}
.suite-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;list-style:none;margin:80px 0 0;padding:0}
.suite-grid li {margin:0;min-width:0;border-top:1px solid #fff3;padding-top:20px}
.suite-index {display:block;font:11px/1.5 monospace;letter-spacing:.065em;color:#ff9a4d;margin-bottom:14px}
.suite-grid strong {display:block;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.3;color:#f8f8f6;margin-bottom:10px}
.suite-grid p {font-size:14px;line-height:1.6;color:#aaaab4;margin:0;max-width:30ch}
.suite .disclosure {margin-top:40px}
@media (max-width:960px) {
.suite-gallery {grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.suite-gallery li:first-child {grid-column:1/-1}
.suite-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;margin-top:56px}
}
@media (max-width:560px) {
.suite-grid {grid-template-columns:1fr}
}

/* ---- hero: "Watch video" — a play glyph in a ring, then a text link.
   Opens #video-lightbox via the page script; it is a button, not an anchor,
   so it never becomes a scroll-jump when the script is absent. ---- */
.hero-actions .hero-watch {display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;font:14px/1.5 NorthlitSans,Arial,sans-serif;cursor:pointer}
.hero-watch-icon {display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff66;border-radius:50%;transition:background .2s,border-color .2s}
.hero-watch-icon svg {display:block;margin-left:1px}
.hero-watch-label {border-bottom:1px solid #666;padding-bottom:2px}
.hero-watch:hover .hero-watch-icon,.hero-watch:focus-visible .hero-watch-icon {background:#ffffff1f;border-color:#fff}
.hero-watch:focus-visible {outline:2px solid #fff;outline-offset:6px;border-radius:4px}

/* ---- video lightbox: the dialog is a transparent full-viewport stage; its
   ::backdrop is the dark, blurred mask over the page. ---- */
#video-lightbox {position:fixed;inset:0;margin:0;padding:24px;width:100vw;max-width:none;height:100dvh;max-height:none;border:0;background:transparent;color:#f5f5f5;overflow:hidden}
#video-lightbox[open] {display:grid;place-items:center}
#video-lightbox::backdrop {background:#000000b8;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
#video-lightbox .video-player {display:block;width:min(1200px,100%);height:auto;max-height:calc(100dvh - 48px);aspect-ratio:16/9;border-radius:12px;background:#000;box-shadow:0 40px 120px #00000099;outline:1px solid #ffffff1a}
#video-lightbox .video-close {position:absolute;top:24px;right:24px;background:#00000066;border-color:#ffffff40}
@media(max-width:760px) {
#video-lightbox {padding:16px}
#video-lightbox .video-close {top:12px;right:12px}
}

/* ---- how it works: product gallery (screenshots + the film as last slide) ---- */
.workflow-gallery-stage {position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b0b0d;outline:1px solid #ffffff14}
/* Inactive slides are hidden, not just transparent: the film sits last in the
   stack, and a transparent <video> would still take clicks and tab focus. */
.workflow-gallery-slide {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.workflow-gallery-slide.is-active {opacity:1;visibility:visible;transition-delay:0s}
@media(prefers-reduced-motion:reduce) {
.workflow-gallery-slide,.workflow-gallery-play {transition:none}
}
/* The play disc over the film slide: brand orange, sized to be the first thing
   the eye lands on, with a soft halo so it reads on the dark poster. */
.workflow-gallery-play {position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#f5501e;color:#fff;cursor:pointer;box-shadow:0 0 0 12px #f5501e26,0 18px 48px #f5501e59;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.workflow-gallery-play svg {display:block;margin-left:5px}
.workflow-gallery-play:hover,.workflow-gallery-play:focus-visible {background:#ff6a3a;transform:scale(1.06);box-shadow:0 0 0 16px #f5501e33,0 22px 56px #f5501e73}
.workflow-gallery-play:focus-visible {outline:2px solid #fff;outline-offset:4px}
.workflow-gallery-play[hidden] {display:none}
@media(max-width:760px) {
.workflow-gallery-play {width:72px;height:72px;margin:-36px 0 0 -36px}
.workflow-gallery-play svg {width:28px;height:28px}
}
.workflow-gallery-controls {display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.workflow-gallery-controls[hidden] {display:none}
.workflow-gallery-counter {font:12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;color:#aaaab4;min-width:6ch;text-align:center}

/* ---- sticky header ----------------------------------------------------------
   Follows NN/g's sticky-header guidance: small once stuck (64px desktop, 56px
   phones — the resting masthead keeps its 96px), high contrast against whatever
   is under it, one 300ms settle and no other motion. The glass is frosted but
   nearly opaque (≥.88) so text stays legible over any content — the article's
   warning is about translucent headers, and this one is only barely so. The
   theme CONTRASTS the section under the header's bottom edge: light glass over
   dark sections, dark glass over the light ones (tagged data-header-tone).
   Anchor targets scroll to sit below the stuck header. */
.site-header.grid.wrap {position:sticky;top:0;z-index:40;transition:background-color .3s ease,color .3s ease,padding .3s ease,min-height .3s ease,box-shadow .3s ease}
.site-header.grid.wrap.is-stuck {--hdr-bg:rgba(246,245,240,.9);--hdr-fg:#111113;--hdr-muted:#3f3f47;--hdr-line:#0000001f;--hdr-cta-border:#111113;--hdr-cta-hover-bg:#111113;--hdr-cta-hover-fg:#fff;min-height:64px;padding-block:8px;background:var(--hdr-bg);color:var(--hdr-fg);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 1px 0 var(--hdr-line),0 10px 30px #00000024}
.site-header.grid.wrap.is-stuck[data-header-theme="dark"] {--hdr-bg:rgba(11,11,13,.88);--hdr-fg:#f8f8f6;--hdr-muted:#c8c8cf;--hdr-line:#ffffff1f;--hdr-cta-border:#8a8a92;--hdr-cta-hover-bg:#fff;--hdr-cta-hover-fg:#111113}
.site-header.grid.wrap.is-stuck>.logo {color:var(--hdr-fg);font-size:26px}
/* The symbol is a white mark with an orange dot; invert+rotate keeps the dot
   orange while the mark goes black on the light glass. */
.site-header.grid.wrap.is-stuck[data-header-theme="light"] .northlit-symbol {filter:invert(1) hue-rotate(180deg)}
.site-header.grid.wrap.is-stuck nav a {color:var(--hdr-muted)}
.site-header.grid.wrap.is-stuck nav a:hover,.site-header.grid.wrap.is-stuck nav a:focus-visible {color:var(--hdr-fg)}
.site-header.grid.wrap.is-stuck>.header-cta {background:transparent;border-color:var(--hdr-cta-border);color:var(--hdr-fg);min-height:40px;padding:8px 16px}
.site-header.grid.wrap.is-stuck>.header-cta:hover {background:var(--hdr-cta-hover-bg);border-color:var(--hdr-cta-hover-bg);color:var(--hdr-cta-hover-fg)}
.site-header.grid.wrap.is-stuck .nav-toggle {color:var(--hdr-fg);border-color:var(--hdr-line)}
.site-header.grid.wrap.is-stuck nav {border-top-color:var(--hdr-line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
.site-header.grid.wrap.is-stuck {--hdr-bg:#f6f5f0}
.site-header.grid.wrap.is-stuck[data-header-theme="dark"] {--hdr-bg:#0b0b0d}
}
@media(max-width:760px) {
.site-header.grid.wrap.is-stuck {min-height:56px;padding:6px 20px}
.site-header.grid.wrap.is-stuck>.logo {font-size:24px}
.site-header.grid.wrap.is-stuck .nav-toggle {min-height:44px;padding:10px}
}
@media(prefers-reduced-motion:reduce) {
.site-header.grid.wrap {transition:none}
}
html {scroll-padding-top:72px}
@media(max-width:760px) {
html {scroll-padding-top:64px}
}

/* 2026-09-21 — Brand-agnostic landing: the hero shows the Northlit canvas
   with work for fictional brands instead of a photo slideshow. Northlit's
   ember stays in the chrome (buttons, active rail icon); never in the work. */
.atelier .photo-hero.magazine-hero.canvas-hero {display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;min-height:0}
.atelier .canvas-hero .variant-story {width:auto;min-height:0;gap:40px;justify-content:center}
.atelier .canvas-hero h1 {font-size:clamp(48px,5.4vw,84px);max-width:12ch}
.atelier .canvas-hero .hero-canvas {display:block;grid-column:auto;margin:0;min-width:0}
.hc-window {border:1px solid #2a2a2e;border-radius:16px;background:#161618;overflow:hidden;box-shadow:0 24px 64px #0009}
.hc-top {display:flex;align-items:center;gap:20px;padding:12px 16px;border-bottom:1px solid #2a2a2e;font-size:12px;color:#8a8a93}
.hc-dots {display:flex;gap:6px}
.hc-dots i {width:9px;height:9px;border-radius:50%;background:#3a3a40}
.hc-logo {font-weight:600;letter-spacing:-.02em;color:#f6f4ef;font-size:14px}
.hc-crumbs b {font-weight:500;color:#f6f4ef}
.hc-body {display:grid;grid-template-columns:44px minmax(0,1fr)}
.hc-rail {display:flex;flex-direction:column;align-items:center;gap:18px;padding:16px 0;border-right:1px solid #2a2a2e;color:#6b6b73}
.hc-rail svg.is-on {color:#f5501e}
.hc-board {display:flex;flex-direction:column;gap:14px;padding:16px;min-width:0}
.hc-row {display:grid;gap:10px}
.hc-row-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.hc-row-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.hc-card {display:flex;flex-direction:column;gap:6px;min-width:0}
.hc-label {font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:#8a8a93}
.hc-card img {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#222226}
.hc-row-4 .hc-card img {aspect-ratio:1}
.hc-card img {object-position:center 25%}
.hc-prompt {display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding:10px 12px;border:1px solid #2a2a2e;border-radius:10px;font-size:12px;color:#6b6b73}
.hc-prompt i {display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#3a3a40;color:#c9ced6}
@media(max-width:1100px) {
.atelier .photo-hero.magazine-hero.canvas-hero {grid-template-columns:minmax(0,1fr);gap:48px}
}
@media(max-width:760px) {
.atelier .photo-hero.magazine-hero.canvas-hero {padding:40px 16px 48px}
.hc-body {grid-template-columns:minmax(0,1fr)}
.hc-rail,.hc-crumbs {display:none}
.hc-board {padding:12px;gap:10px}
.hc-row {gap:6px}
.hc-row-3,.hc-row-4 {grid-template-columns:repeat(2,minmax(0,1fr))}
.hc-row-3 .hc-card:nth-child(3) {display:none}
}
/* Brand DNA: three client brands, one layout; the palette row follows the pick. */
.brand-poster-controls.brand-choices {grid-template-columns:repeat(3,minmax(0,1fr))}
.brand-choices button {display:flex;flex-direction:column;gap:8px;text-align:left}
.brand-choice-name {font-size:13px;font-weight:500;color:#62626a;transition:color .25s ease}
.brand-choices button[aria-pressed="true"] .brand-choice-name {color:#111113}
.brand-choices button[aria-pressed="true"] img {opacity:1;box-shadow:inset 0 -2px 0 #f5501e}
.brand-intelligence [data-brand-palette] {display:none}
.brand-intelligence[data-brand="tessera"] [data-brand-palette="tessera"],
.brand-intelligence[data-brand="nocturne"] [data-brand-palette="nocturne"],
.brand-intelligence[data-brand="halcyon"] [data-brand-palette="halcyon"] {display:flex}
/* Guidance tiles: example styles and systems use client palettes, not ember. */
.launch-style-art {background:#1f3fd1;color:#f7f8fa}
.launch-style-art i {border-color:#f7f8fa}
.launch-system-art i {background:#0f1e3d}
.launch-system-art i:nth-child(2) {background:#9fe3c9}
.launch-system-art i:nth-child(3) {background:#5c6b7f}
.launch-system-art i:nth-child(4) {background:#e4e7ec}
.launch-skill-art b {color:#9aa0ab}
/* Formats: the logo card sits on its own brand ground, not ember. */
.format-square img {object-fit:cover;background:#1c1f24}
/* Footer: a collage of client-brand work replaces the ember glass render. */
.site-footer .footer-collage {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:56px max(64px,calc((100vw - 1440px)/2)) 0 50%;align-content:start}
.footer-collage img {width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
@media(max-width:760px) {
.site-footer .footer-collage {padding:32px 16px 0 30%;gap:8px}
}
/* Development: product panels for one client brand replace the work-table photo. */
.foundation-editorial.foundation-panels {background:#111113}
.foundation-editorial.foundation-panels .foundation-content {min-height:0;gap:64px}
.foundation-panel {height:240px;margin-bottom:28px;border:1px solid #2a2a2e;border-radius:12px;background:#18181b;overflow:hidden;font-size:12px;color:#8a8a93}
.fp-code {display:flex;flex-direction:column}
.foundation-editorial .foundation-grid .foundation-panel .fp-file,.foundation-editorial .foundation-grid .foundation-panel .fp-url {display:block;max-width:none;padding:10px 14px;border-bottom:1px solid #2a2a2e;font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8a8a93}
.fp-code pre {margin:0;padding:14px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c9ced6;white-space:pre;overflow:hidden}
.fp-browser {display:flex;flex-direction:column}
.fp-browser img {flex:1;min-height:0;width:100%;object-fit:cover;object-position:center 30%}
.fp-spec {display:flex;flex-direction:column;padding:16px;background:#f7f8fa}
.foundation-grid .fp-spec strong {margin-bottom:8px;font-size:14px;font-weight:600;color:#111113}
.foundation-editorial .foundation-grid .fp-spec span {max-width:none;padding:9px 0;border-bottom:1px solid #e1e3e8;font-size:13px;line-height:1.3;color:#111113}
.fp-spec b {margin-top:auto;padding:9px;border-radius:8px;background:#111113;color:#f7f8fa;font-weight:500;text-align:center}
@media(max-width:760px) {
.foundation-editorial.foundation-panels .foundation-content {min-height:0;gap:40px}
.foundation-panel {height:200px}
}
/* Agents: copy on the left, the plugin at work on the right. */
.unified-agents .agent-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
.agent-layout>:not(.agent-demo) {grid-column:1}
.agent-demo {grid-column:2;grid-row:1/span 3;align-self:center;position:relative;margin:0;padding-bottom:24px}
.agent-terminal,.agent-board {border:1px solid #2a2a2e;border-radius:12px;background:#18181b;overflow:hidden}
.agent-bar {display:block;padding:10px 14px;border-bottom:1px solid #2a2a2e;font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8a8a93}
.agent-terminal pre {margin:0;padding:14px;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c9ced6;white-space:pre-wrap}
.agent-board {position:relative;margin:-12px 0 0 12%;box-shadow:0 24px 48px #0008}
.agent-board>div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.agent-board img {width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
@media(max-width:1100px) {
.unified-agents .agent-layout {grid-template-columns:minmax(0,1fr)}
.agent-layout>:not(.agent-demo),.agent-demo {grid-column:1;grid-row:auto}
.agent-demo {order:1;margin-top:48px}
.agent-board {margin-left:0}
}