@font-face{font-family:Inter;src:url('./inter-400.ttf');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('./inter-500.ttf');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('./inter-600.ttf');font-weight:600;font-display:swap}
@font-face{font-family:'Young Serif';src:url('./young-serif-400.ttf');font-weight:400;font-display:swap}
:root{--bg:#191a1d;--surface:#222327;--panel:#2a2b30;--text:#f2f1ee;--muted:#a0a1a9;--dim:#898b95;--line:#3b3c43;--serif:'Young Serif',Georgia,serif;font-family:Inter,Arial,sans-serif;font-synthesis:none;color:var(--text);background:var(--bg);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;min-width:1024px}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #d1d0e1;outline-offset:6px}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-weight:400}
p{font-size:20px;line-height:1.6;letter-spacing:-.025em}
strong{font-weight:500;color:var(--text)}
img{display:block;max-width:100%}
.wrap{width:calc(100% - 128px);max-width:1160px;margin-inline:auto}
.chapter{padding:120px 0}
.display{font-size:clamp(52px,5vw,76px);line-height:1.1;letter-spacing:-.055em;font-weight:500}
.display>span{color:var(--muted)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand span{font-family:var(--serif);font-weight:400;letter-spacing:-.065em;font-size:32px;line-height:1}
.navigation{position:sticky;top:0;z-index:10}
/* Fade the glass itself, so the blur has no hard lower edge. */
.navigation::before{content:'';position:absolute;inset:0 0 -32px;pointer-events:none;background:linear-gradient(to bottom,#191a1ded 0%,#191a1db8 40%,#191a1d66 70%,#191a1d00 100%);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 28%,#000c 52%,#0005 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 28%,#000c 52%,#0005 78%,transparent 100%)}
.nav-inner{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;max-width:1424px;margin:auto;padding:0 48px}
.nav-brand{justify-self:start;gap:8px;min-width:103px}
.nav-brand img{width:31px;height:24px}
.nav-brand .nav-wordmark{font-size:28px;font-weight:400;opacity:0;transform:translateX(-5px);transition:opacity .22s ease,transform .22s ease}
.navigation.show-wordmark .nav-wordmark{opacity:1;transform:translateX(0)}
.nav-links{display:flex;gap:25px;color:var(--muted);font-size:13px;white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-contact{justify-self:end;font-size:12px;background:#e3e2df;color:#252529;padding:8px 17px;border-radius:30px}
.nav-contact:hover{background:#fff}
.skip{position:fixed;top:-100px;left:10px;z-index:20;background:var(--text);color:var(--bg);padding:15px}
.skip:focus{top:10px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* One identity and one supporting line. */
.hero{overflow:hidden;background:radial-gradient(ellipse at 50% 63%,#2a2b31 0,transparent 62%),var(--bg)}
.hero-copy{text-align:center;padding:62px 40px 0}
.hero-brand{gap:11px;margin-bottom:26px}
.hero-brand span{font-size:38px;font-weight:400}
.hero-brand img{width:40px;height:30px}
.hero h1{font-family:var(--serif);font-size:clamp(62px,6.7vw,104px);line-height:1.13;letter-spacing:-.055em;white-space:nowrap}
.hero-subtitle{font-size:27px;letter-spacing:-.04em;margin-top:25px}
.hero-subtitle span{color:var(--muted)}
.product-reveal{width:calc(100% - 240px);max-width:1160px;margin:60px auto 0;border:1px solid #52535a;padding:7px;border-radius:17px 17px 0 0;background:#333439;box-shadow:0 0 0 5px #1b1c2040,0 30px 100px #0006;max-height:540px;overflow:hidden;position:relative}
.product-reveal img{width:100%;height:auto;border-radius:10px 10px 0 0}
.product-reveal:after{content:'';position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(transparent,#191a1d55);pointer-events:none}
/* Establish the problem, then introduce the software and the people behind it. */
.problem{padding:126px 0 134px}
.problem>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:start}
.problem-copy>p{color:var(--muted);font-size:23px;line-height:1.5}
.problem-copy>p+p{margin-top:24px}
/* Three direct paths into the product story. */
.highlights{background:var(--surface);padding:100px 0}
.highlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px}
.highlight{height:420px;position:relative;overflow:hidden;border-radius:18px;background:#2d2e34;padding:31px 29px;display:flex;flex-direction:column;isolation:isolate;transition:background .2s}
.highlight:hover{background:#34353c}
.highlight h3{font-size:30px;font-weight:500;line-height:1.18;letter-spacing:-.045em;position:relative;z-index:2}
.highlight-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;position:relative;z-index:2}
.highlight-bottom p{font-size:14px;color:#b6b7c0;line-height:1.4;max-width:205px}
.circle-arrow{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:50%;background:#45464f;color:var(--text);font-size:19px;transition:transform .2s}
.highlight:hover .circle-arrow{transform:translate(2px,-2px)}
.mini-workflow{display:flex;flex-direction:column;align-items:center;position:absolute;top:143px;left:30px;right:30px}
.mini-input{color:#b7b9c2;font-size:13px;border:1px solid #55565f;padding:10px 18px;border-radius:7px}
.mini-line{height:18px;width:1px;background:#686975}
.mini-core{width:85px;height:60px;display:grid;place-items:center;background:#3c3d46;border:1px solid #666873;border-radius:10px;box-shadow:0 12px 28px #0002}
.mini-outputs{display:flex;gap:17px;border-top:1px solid #686975;padding-top:14px}
.mini-outputs>span{width:37px;height:25px;border:1px solid #62646f;border-radius:4px;background:#34363e}
.control-highlight{background:#2b2d32}
.agent-crop{position:absolute;top:132px;left:50px;width:calc(100% - 70px);height:204px;overflow:hidden;border-radius:9px;transform:rotate(-4deg);border:1px solid #5a5d64;box-shadow:0 12px 40px #0004;background:#202326}
.agent-crop img{position:absolute;right:0;top:-40px;width:1280px;max-width:none;height:720px;transform:scale(.61);transform-origin:top right}
.connection-preview{position:absolute;top:153px;left:29px;right:29px;display:grid;gap:12px}
.connection-preview>div{padding:15px 18px;background:#383a43;border:1px solid #52545f;border-radius:8px;font-size:20px;letter-spacing:-.035em}
.connection-preview span{display:block;font-size:12px;letter-spacing:0;color:#acafbd;margin-top:5px}
/* Workflow is the reusable game knowledge; Studio is the production surface. */
.workflows{padding:128px 0}
.center-heading{text-align:center}
.center-heading .display{font-family:var(--serif);font-weight:400;font-size:clamp(56px,5.2vw,80px)}
.lead{max-width:800px;margin:30px auto 0;font-size:23px;color:var(--muted)}
.workflow-visual{margin:62px auto 0;padding:24px;background:radial-gradient(circle at 75% 8%,#30303b,#24252b 50%,#202126);border:1px solid #484953;border-radius:24px;box-shadow:0 28px 80px #0002}
.workflow-system{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);align-items:center}
.workflow-role{min-height:346px;display:flex;flex-direction:column;padding:32px;background:#2a2b32;border:1px solid #ffffff22;border-radius:17px}
.workflow-software{background:#34323e;border-color:#89829480}
.workflow-role-type{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:#d3d0da;letter-spacing:.03em}
.workflow-role-type i{width:3px;height:3px;border-radius:50%;background:#a8a7b0}
.workflow-role-type img{width:21px;height:16px}
.workflow-role h3{font-family:var(--serif);font-size:31px;line-height:1.2;letter-spacing:-.04em;margin-top:38px}
.workflow-role p{font-size:16px;line-height:1.55;color:#c3c2ce;margin-top:17px;max-width:390px}
.workflow-elements{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:28px}
.workflow-elements span{font-size:12px;color:#cbcbd4;border:1px solid #ffffff38;border-radius:20px;padding:8px 12px}
.workflow-join{height:1px;background:#a7a5b76b;display:grid;place-items:center}
.workflow-join span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #a7a5b7;border-radius:50%;background:#34323d;color:#f4f2f4;font-size:19px}
.workflow-result{display:flex;align-items:center;gap:20px;padding:22px 17px 4px}
.workflow-result-mark{font-family:var(--serif);font-size:34px;color:#bcb6c8;line-height:1}
.workflow-result p{font-size:16px;line-height:1.5;color:#bcbcc5}
.workflow-body{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1040px;margin:43px auto 0}
.workflow-body p{font-size:19px;line-height:1.6;color:var(--muted)}
/* The first workflow receives its own chapter before the Studio preview. */
.tcg-invitation{background:#1e1f23;overflow:hidden}
.tcg-invitation-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.tcg-invitation-copy>p:not(.product-name){color:var(--muted);font-size:21px;margin-top:27px;max-width:540px}
.tcg-invitation-copy .display{font-family:var(--serif);font-weight:400}
.tcg-invitation-art{height:440px;position:relative;background:radial-gradient(ellipse at center,#35303f,transparent 70%)}
.tcg-invitation-art img{position:absolute;width:240px;height:340px;object-fit:contain;filter:drop-shadow(0 25px 30px #0009)}
.tcg-invitation-art img:first-child{left:17%;top:35px;transform:rotate(-13deg)}
.tcg-invitation-art img:last-child{left:47%;top:65px;transform:rotate(12deg)}
/* All three views are visible without interaction. */
.studio{background:var(--surface);padding:104px 0}
.studio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px}
.product-name{font-size:19px;color:var(--muted);margin-bottom:16px;font-weight:500}
.studio-heading>p{width:355px;flex-shrink:0;font-size:19px;color:var(--muted);line-height:1.55}
.product-viewer{width:calc(100% - 96px);max-width:1280px;margin:56px auto 0}
.viewer-image{background:#17181b;border:1px solid #52545d;padding:7px;border-radius:14px;box-shadow:0 25px 55px #0002;overflow:hidden}
.viewer-image img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:7px;background:#17181b}
.product-feature figcaption{margin-top:23px}
.product-feature h3{font-size:25px;font-weight:500;letter-spacing:-.04em}
.product-feature figcaption p{font-size:17px;color:var(--muted);margin-top:7px}
.storyboard-feature figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:30px;padding:0 5px}
.storyboard-feature figcaption p{margin-top:0}
.studio-details{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:56px}
.studio-details .viewer-image{padding:4px;border-radius:10px}
.studio-details .viewer-image img{border-radius:6px}
.studio-page-link{text-align:center;margin-top:42px}
.studio-page-link .contact-link{margin-top:0}
/* Task-level cost visibility, with explicitly illustrative values. */
.dashboard{padding:132px 0}
.dashboard-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:75px;align-items:center}
.dashboard-copy>p:not(.product-name){font-size:20px;color:var(--muted);margin-top:28px}
.dashboard-copy>p:last-child{font-size:17px;margin-top:20px}
.dashboard-example{background:#24262c;border:1px solid #464852;border-radius:14px;padding:25px 29px;box-shadow:0 20px 70px #0002}
.dashboard-toolbar{display:flex;justify-content:space-between;gap:10px;padding-bottom:23px;border-bottom:1px solid #44464f;font-size:16px;font-weight:500}
.dashboard-toolbar>span:last-child{font-size:12px;color:var(--muted);font-weight:400;align-self:center}
.dashboard-example table{width:100%;border-collapse:collapse;text-align:left;font-size:15px}
.dashboard-example th{font-weight:400}
.dashboard-example thead th{padding:20px 0 7px;font-size:12px;color:var(--muted)}
.dashboard-example td,.dashboard-example th:last-child{text-align:right}
.dashboard-example tbody th{padding:24px 28px 24px 0}
.dashboard-example tbody td{font-variant-numeric:tabular-nums;vertical-align:top;padding-top:24px}
.spend-track{display:block;height:4px;background:#373943;border-radius:4px;margin-top:13px;width:100%}
.spend-track i{height:100%;display:block;border-radius:4px;background:#a9aec6}
.dashboard-example tfoot{border-top:1px solid #44464f;font-size:17px}
.dashboard-example tfoot th,.dashboard-example tfoot td{padding-top:22px;font-weight:500}
.dashboard-example figcaption{font-size:12px;color:var(--dim);margin-top:24px}
/* Explicit architecture and transparent economics; no oversized percentage claim. */
.connections{padding:0 0 117px}
.connections>.wrap{border-top:1px solid var(--line);padding-top:104px}
.connections-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:59px}
.connections-grid article{padding-top:26px;border-top:1px solid var(--line)}
.connection-brand{display:flex;align-items:center;height:46px}
.connection-brand img{height:42px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.connections-grid p{font-size:20px;color:var(--muted);margin-top:22px;max-width:470px}
.connections-grid article>strong{display:block;font-size:16px;margin-top:23px}
.architecture-principle{text-align:center;margin:87px auto 0;font-size:25px;color:var(--muted);line-height:1.5}
.contact-link{display:inline-block;background:#eeede9;color:#26272c;border-radius:30px;padding:14px 24px;font-size:14px;margin-top:34px}
.contact-link:hover{background:#fff}
/* The offer structure explains access and optional workflow development without prices. */
.access{background:var(--surface);padding:106px 0 0}
.access>.wrap>.display{text-align:center;font-family:var(--serif);font-weight:400;font-size:70px}
.access-intro{text-align:center;font-size:23px;margin-top:23px;color:var(--muted)}
.access-options{margin-top:57px}
.founding-card{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;column-gap:66px;padding:43px 45px 46px;background:#2c2e35;border:1px solid #50525e;border-radius:20px;overflow:hidden}
/* The masks remove the card fill AND straight border inside each circular cutout.
   Both 36px-radius cutouts share the connector's center, 12px into the 24px gap.
   The 1px arcs sit just outside the removed area, preserving the contour. */
.founding-card{-webkit-mask-image:radial-gradient(circle at 50% calc(100% + 12px),transparent 35.5px,#000 36px);mask-image:radial-gradient(circle at 50% calc(100% + 12px),transparent 35.5px,#000 36px)}
.workflow-addons{-webkit-mask-image:radial-gradient(circle at 50% -12px,transparent 35.5px,#000 36px);mask-image:radial-gradient(circle at 50% -12px,transparent 35.5px,#000 36px)}
.founding-card::after,.workflow-addons::before{content:'';position:absolute;left:50%;width:74px;height:74px;border:1px solid #50525e;border-radius:50%;transform:translateX(-50%);pointer-events:none}
.founding-card::after{bottom:-49px}
.workflow-addons::before{top:-49px}
.access-connector{position:relative;z-index:1;height:24px;display:flex;align-items:center;justify-content:center}
.access-connector span{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid #666976;background:#30323a;color:#e8e9ef}
.access-connector svg{display:block;width:24px;height:24px}
.tcg-entry{border-left:2px solid #a4a9c1;padding-left:21px}
.tcg-entry h3{font-size:30px;font-weight:500;letter-spacing:-.04em}
.tcg-entry p{font-size:17px;color:#b0b3c0;margin-top:8px;max-width:360px}
.tcg-entry a{display:inline-block;font-size:13px;border-bottom:1px solid #777985;margin-top:15px;padding-bottom:4px}
.tcg-entry a:hover{border-color:#fff}
.subscription-list{list-style:none;padding:0;margin:27px 0 0}
.subscription-list li{position:relative;font-size:16px;line-height:1.5;padding-left:25px;margin-top:13px;color:#d0d1da}
.subscription-list li:before{content:'✓';position:absolute;left:0;color:#b0b7cd}
.library-target{font-size:13px;color:var(--muted);margin-top:23px;line-height:1.6}
.api-billing{font-size:13px;text-align:center;color:var(--muted);margin-top:22px}
/* Custom workflow development extends the same Studio and library. */
.workflow-addons{position:relative;background:#26282e;border:1px solid #50525e;border-radius:20px;padding:42px 45px 10px;overflow:hidden}
.addons-heading{display:grid;grid-template-columns:.85fr 1.15fr;gap:66px;align-items:start}
.addons-heading h3{font-size:25px;line-height:1.25;letter-spacing:-.035em;font-weight:500}
.addons-heading>p{font-size:16px;color:#b3b5c2;line-height:1.6}
.addon-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:31px;padding:28px 0 30px;border-top:1px solid #41434d}
.addon-options article{display:grid;grid-template-columns:142px minmax(0,1fr);gap:24px;align-items:start;position:relative}
.addon-options article+article::before{content:'';position:absolute;left:-21px;top:0;bottom:0;width:1px;background:#41434d}
.addon-title h4{font-size:23px;font-weight:500;letter-spacing:-.03em}
.addon-details ul{padding-left:18px;color:#b4b6c0;font-size:16px;line-height:1.5;margin:0 0 21px}
.addon-details li+li{margin-top:9px}
.addon-details>a{font-size:13px;display:inline-flex;gap:25px;align-items:center;border-bottom:1px solid #707382;padding-bottom:5px}
.addon-details>a:hover{color:#fff;border-color:#fff}
.addon-details>a>span{font-size:18px}
.founding-intro h3{font-size:28px;font-weight:500;letter-spacing:-.035em}
.founding-intro>p{font-size:20px;color:#b3b5c2;line-height:1.55;margin-top:23px;max-width:330px}
@media(max-width:1100px){.founding-card{column-gap:40px;padding-left:32px;padding-right:32px}.workflow-addons{padding-left:32px;padding-right:32px}.addons-heading{gap:40px}.addon-options{gap:32px}.addon-options article{grid-template-columns:130px minmax(0,1fr);gap:18px}.addon-options article+article::before{left:-17px}}

/* A conversation is the next step; pricing is discussed directly. */
.contact-section{background:var(--surface);padding:118px 0 112px}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 445px;gap:92px;align-items:center}
.contact-copy .display{font-family:var(--serif);font-weight:400;font-size:clamp(54px,4.9vw,75px)}
.contact-copy .display span{color:var(--muted)}
.contact-copy>p{max-width:555px;margin-top:30px;color:#b7b8c1;font-size:21px;line-height:1.58}
.contact-card{padding:32px;background:radial-gradient(circle at 100% 0%,#3a3642,#2c2d35 58%,#282a30);border:1px solid #686771;border-radius:23px;box-shadow:0 22px 58px #0002}
.contact-person{display:flex;align-items:center;gap:17px}
.contact-avatar{width:76px;height:76px;flex:none;object-fit:cover;border-radius:50%;border:2px solid #e4e0e5}
.contact-person>div{display:flex;flex-direction:column;gap:5px}
.contact-person strong{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:-.04em}
.contact-person span{font-size:13px;color:#b4b4c0}
.contact-card>p{font-size:17px;line-height:1.55;color:#c5c3ce;margin-top:28px}
.contact-book{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:15px 20px;border-radius:30px;background:#eeede9;color:#25262c;font-size:15px;font-weight:500}
.contact-book:hover{background:#fff}
.contact-book span{font-size:20px;line-height:1}
.contact-other{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:25px;padding-top:19px;border-top:1px solid #ffffff29;color:#bdbbc7;font-size:13px}
.contact-other a:hover{color:#fff}
.site-footer{padding:28px 0;background:var(--surface);font-size:12px;color:var(--dim)}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between}
.site-footer .brand{color:var(--text)}.site-footer .brand span{font-size:26px}
@media(min-width:1600px){.hero-copy{padding-top:80px}.product-reveal{margin-top:75px;max-height:610px}.highlights{padding-top:125px}}
@media(max-width:1100px){.workflow-visual{padding:18px}.workflow-system{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}.workflow-role{padding:24px;min-height:375px}.workflow-role h3{font-size:27px}.workflow-body{gap:40px}.problem>.wrap{gap:55px}.dashboard-layout{gap:45px}.contact-layout{grid-template-columns:minmax(0,1fr) 405px;gap:45px}.contact-card{padding:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* An editorial doorway into the separate manifesto. */
.manifesto-invitation{border-top:1px solid var(--line);background:var(--surface)}
.manifesto-invitation-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.manifesto-label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.manifesto-invitation h2{font-family:var(--serif);font-size:clamp(42px,4.2vw,62px);line-height:1.18;letter-spacing:-.045em}
.manifesto-invitation-copy>p{color:#b9bac2;font-size:21px}
.manifesto-invitation-copy .contact-link{margin-top:28px}