/* Shared site finish, adapted from the Studio Figma designs.
   Load after the shared and page-specific stylesheets. */
body {
  --studio-accent: #00d0e5;
  --studio-accent-soft: #8ae6ee;
  --studio-edge: #ffffff0d;
  --studio-bevel: inset 0 2px 0 var(--studio-edge);
  --studio-ease: cubic-bezier(.2, .7, .25, 1);
}

/* A dark edge and a lit upper lip give controls the Studio's shallow depth. */
:is(.nav-contact, .contact-link, .contact-book, .pill-button) {
  --control-fill: linear-gradient(180deg, #36373b, #292a2e);
  position: relative;
  isolation: isolate;
  border: 1px solid #1b1b1d;
  border-radius: 12px;
  background: var(--control-fill);
  color: #f2f3f4;
  box-shadow: inset 0 2px 0 #ffffff12, 0 2px 3px #0003, 0 6px 16px #0002;
  font-weight: 500;
  transition: transform .2s var(--studio-ease), box-shadow .2s ease, border-color .2s ease;
}
:is(.nav-contact, .contact-link, .contact-book, .pill-button)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, #ffffff20, transparent 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 48px;
  padding: 13px 20px;
}
.nav-contact {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 10px;
}
.contact-book {
  min-height: 52px;
  border-radius: 14px;
}
:is(.nav-contact, .contact-book, .pill-button[href*="cal.com"]) {
  --control-fill: radial-gradient(ellipse at 35% 0%, #ffffff45, transparent 75%), linear-gradient(180deg, #00d0e5, #00b6ca);
  color: #052d32;
  border-color: #063e44;
  background: var(--control-fill);
  box-shadow: inset 0 2px 0 #ffffff40, inset 0 -1px 0 #0002, 0 2px 4px #0004, 0 6px 20px #00d0e50a;
}
:is(.nav-contact, .contact-link, .contact-book, .pill-button):hover { background: var(--control-fill); }
:is(.contact-link, .contact-book, .pill-button, .addon-details > a) > :is(span, img) {
  display: inline-block;
  transition: transform .2s var(--studio-ease);
}

/* Navigation keeps its fading backdrop; only the links gain a response. */
.nav-links a {
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
:is(.nav-brand, .site-footer .brand) {
  border-radius: 6px;
  transition: filter .2s ease;
}
:is(.tcg-entry a, .addon-details > a, .contact-other a) {
  transition: color .2s ease, border-color .2s ease;
}
.contact-other a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
a:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 5px;
}

/* Surface light is restrained; cyan follows the production software. */
.hero {
  background: radial-gradient(ellipse at 50% 82%, #00d0e509, transparent 55%), radial-gradient(ellipse at 50% 63%, #2a2b31, transparent 62%), var(--bg);
}
.product-reveal {
  background: linear-gradient(180deg, #36383c, #202124);
  border-color: #ffffff1f;
  box-shadow: inset 0 2px 0 #ffffff0d, 0 0 0 5px #0a0b0d33, 0 30px 100px #0006, 0 -10px 70px #00d0e506;
}
.highlight {
  background: linear-gradient(160deg, #2d2f33, #242529);
  border: 1px solid #141518;
  border-radius: 20px;
  box-shadow: var(--studio-bevel), 0 8px 24px #0002;
  transition: transform .25s var(--studio-ease), border-color .25s ease, box-shadow .25s ease;
}
.highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, #00d0e515, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.circle-arrow {
  border-radius: 9px;
  border: 1px solid #1b1b1d;
  background: linear-gradient(#414347, #303236);
  box-shadow: var(--studio-bevel), 0 2px 6px #0003;
  transition: transform .2s var(--studio-ease), color .2s ease, background-color .2s ease;
}
:is(.mini-core, .connection-preview > div) {
  background: linear-gradient(160deg, #35373b, #282a2d);
  border-color: #ffffff14;
  box-shadow: var(--studio-bevel), 0 8px 20px #0003;
}
.mini-core { border-color: #00d0e538; }
.workflow-visual {
  background: linear-gradient(145deg, #27292d, #1e1f23);
  border-color: #101114;
  border-radius: 20px;
  box-shadow: var(--studio-bevel), 0 24px 60px #0003;
}
.workflow-role {
  background: linear-gradient(150deg, #2b2d31, #242529);
  border-color: #ffffff0d;
  border-radius: 16px;
  box-shadow: var(--studio-bevel), 0 4px 12px #0002;
}
.workflow-software {
  background: radial-gradient(ellipse at 50% 0%, #00d0e51a, transparent 70%), #20272a;
  border-color: #00d0e528;
}
.workflow-elements span {
  border-radius: 8px;
  border-color: #ffffff14;
  background: #ffffff04;
}
.workflow-join span {
  background: linear-gradient(#343a3e, #25292d);
  border-color: #65777b;
  box-shadow: var(--studio-bevel), 0 2px 8px #0003;
  color: var(--studio-accent-soft);
}
.viewer-image {
  background: linear-gradient(150deg, #303236, #202125);
  border-color: #ffffff1a;
  box-shadow: var(--studio-bevel), 0 20px 55px #0003;
}
.dashboard-example {
  border-radius: 20px;
  border-color: #101114;
  background: radial-gradient(ellipse at 80% 0%, #00d0e50a, transparent 65%), #242529;
  box-shadow: var(--studio-bevel), 0 20px 60px #0003;
}
.dashboard-toolbar { border-color: #ffffff0d; }
.spend-track { background: #ffffff0a; }
.spend-track i {
  background: linear-gradient(90deg, #267b85, var(--studio-accent));
  box-shadow: inset 0 1px 0 #ffffff26;
}
:is(.founding-card, .workflow-addons) { box-shadow: var(--studio-bevel); }
.founding-card { background: linear-gradient(145deg, #303236, #26282c); }
.workflow-addons { background: linear-gradient(145deg, #282a2e, #232529); }
.access-connector span {
  background: linear-gradient(#3b4044, #292d31);
  color: var(--studio-accent-soft);
  box-shadow: inset 0 2px 0 #ffffff14, 0 3px 10px #0003;
}
.contact-card {
  border-radius: 20px;
  border-color: #ffffff14;
  background: radial-gradient(ellipse at 90% 0%, #00d0e515, transparent 65%), linear-gradient(145deg, #2c2f32, #24262a);
  box-shadow: var(--studio-bevel), 0 22px 58px #0003;
}

@media (hover: hover) and (pointer: fine) {
  :is(.nav-contact, .contact-link, .contact-book, .pill-button):hover {
    transform: translateY(-2px);
    border-color: #ffffff30;
    box-shadow: inset 0 2px 0 #ffffff1f, 0 4px 6px #0003, 0 10px 24px #0003;
  }
  :is(.nav-contact, .contact-book, .pill-button[href*="cal.com"]):hover {
    border-color: #6de8f2;
    box-shadow: inset 0 2px 0 #ffffff55, 0 4px 8px #0003, 0 8px 28px #00d0e526;
  }
  :is(.nav-contact, .contact-link, .contact-book, .pill-button):hover::before { opacity: 1; }
  :is(.contact-link, .contact-book, .pill-button, .addon-details > a):hover > :is(span, img) { transform: translate(2px, -2px); }
  .nav-links a:hover { color: #f2f3f4; background: #ffffff08; box-shadow: inset 0 1px 0 #ffffff0a; }
  :is(.nav-brand, .site-footer .brand):hover { filter: drop-shadow(0 0 6px #ffffff40); }
  :is(.tcg-entry a, .addon-details > a):hover { color: var(--studio-accent-soft); border-color: var(--studio-accent); }
  .contact-other a:hover { color: var(--studio-accent-soft); text-decoration-color: #00d0e580; }
  .highlight:hover {
    transform: translateY(-4px);
    background: linear-gradient(160deg, #2d2f33, #242529);
    border-color: #00d0e538;
    box-shadow: inset 0 2px 0 #ffffff12, 0 14px 32px #0003;
  }
  .highlight:hover::before { opacity: 1; }
  .highlight:hover .circle-arrow { color: var(--studio-accent-soft); transform: translate(2px, -2px); }
}
:is(.nav-contact, .contact-link, .contact-book, .pill-button):active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px #0004, 0 1px 0 #ffffff0d;
}
.highlight:active { transform: translateY(0); box-shadow: inset 0 2px 6px #0003; }
@media (prefers-reduced-motion: reduce) {
  :is(.nav-contact, .contact-link, .contact-book, .pill-button, .highlight, .circle-arrow),
  :is(.contact-link, .contact-book, .pill-button, .addon-details > a) > :is(span, img) { transform: none !important; }
}

/* Product-page actions share the same control geometry. */
.pill-button { border-radius:12px; padding:13px 20px; }
.product-page .pill-button img { filter:invert(1); }
.product-page .pill-button[href*="cal.com"] img { filter:none; }
:is(.quiet-link,.manuscript-return,.production-delivery>a,.framework-reference-foot a) {
  transition:color .2s ease,border-color .2s ease;
}
:is(.quiet-link,.manuscript-return,.production-delivery>a) > :is(span,img) {
  transition:transform .2s var(--studio-ease);
}
.site-footer a:not(.brand) { transition:color .2s ease; }
.space-cards>a {
  --space-accent:#00d0e5;
  background:linear-gradient(160deg,#2d2f33,#242529);
  border-color:#141518;
  box-shadow:var(--studio-bevel),0 8px 24px #0002;
  transition:transform .25s var(--studio-ease),border-color .25s ease,box-shadow .25s ease;
}
.space-cards>a:nth-child(2) { --space-accent:#a193f5; }
.space-cards>a:nth-child(3) { --space-accent:#efa081; }
.space-cards>a:nth-child(4) { --space-accent:#83cfa7; }
.space-cards .space-arrow { transition:transform .2s var(--studio-ease); }
:is(.atlas-support article,.atlas-support>p,.toolkit-cards article,.direction-card,.production-spaces>div) {
  box-shadow:var(--studio-bevel),0 8px 24px #0002;
  border-color:#ffffff14;
}
:is(.studio-end-card,.tcg-end-card) {
  border-radius:20px;
  border-color:#ffffff14;
  background:radial-gradient(ellipse at 90% 0%,#00d0e510,transparent 65%),linear-gradient(145deg,#2c2f32,#24262a);
  box-shadow:var(--studio-bevel),0 22px 58px #0003;
}
.tag-list span { border-radius:8px; border-color:#ffffff1a; background:#ffffff05; }
@media (hover:hover) and (pointer:fine) {
  :is(.quiet-link,.manuscript-return,.production-delivery>a,.framework-reference-foot a):hover {
    color:var(--studio-accent-soft); border-color:var(--studio-accent);
  }
  :is(.quiet-link,.manuscript-return,.production-delivery>a):hover > :is(span,img) { transform:translateX(3px); }
  .site-footer a:not(.brand):hover { color:var(--studio-accent-soft); }
  .space-cards>a:hover { transform:translateY(-4px); border-color:var(--space-accent); box-shadow:var(--studio-bevel),0 14px 32px #0003; }
  .space-cards>a:hover .space-arrow { transform:translate(2px,-2px); }
}
.space-cards>a:active { transform:translateY(0); box-shadow:inset 0 2px 6px #0003; }

/* Smaller opening typography leaves room for the product itself. */
.hero h1 { font-size:clamp(48px,5vw,78px); letter-spacing:-.05em; }
.hero-subtitle { font-size:clamp(19px,1.65vw,24px); margin-top:22px; }
.hero-copy { padding-top:66px; }
.product-reveal { margin-top:48px; max-height:none; border-radius:18px; margin-bottom:64px; }
.product-reveal img { border-radius:11px; }
.product-reveal::after { display:none; }

/* Real Figma exports: keep their full aspect ratio, no forced image crops. */
.studio-screen {
  overflow:hidden;
  border:1px solid #ffffff17;
  border-radius:18px;
  background:#17181a;
  box-shadow:var(--studio-bevel),0 20px 60px #0003;
}
.studio-screen>img { display:block; width:100%; height:auto; }
.studio-hero-frame { padding-top:58px; }
.studio-hero-frame .studio-screen { border-radius:20px; }
.hero-frame-caption { margin-bottom:56px!important; }
.agent-crop { left:24px; right:24px; width:auto; height:190px; top:142px; transform:rotate(-3deg); }
.agent-crop img { position:static; width:100%; height:100%; max-width:100%; transform:none; object-fit:cover; object-position:center; }
.dashboard-layout { grid-template-columns:.8fr 1.2fr; gap:54px; }
.dashboard-design { min-width:0; }
.dashboard-design figcaption { font-size:12px; color:var(--dim); line-height:1.5; margin-top:16px; }
.atlas-layered {
  position:relative;
  padding:34px 230px 34px 0;
  min-height:590px;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.atlas-layered::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at 68% 50%,#a193f517,transparent 65%);
}
.atlas-map-layer { width:100%; height:auto; border:1px solid #ffffff1a; border-radius:18px; box-shadow:0 22px 50px #0004; }
.atlas-inspector-layer { position:absolute; width:260px; height:auto; right:8px; top:50%; transform:translateY(-50%); filter:drop-shadow(0 20px 25px #0005); }
.toolkit-screen { margin-bottom:46px; }
.toolkit-cards article::before { display:none; }
.production-atlas>img { height:auto; object-fit:contain; }
@media (max-width:1100px) {
  .dashboard-layout { gap:32px; }
  .atlas-layered { padding-right:190px; min-height:505px; }
  .atlas-inspector-layer { width:220px; }
}
@media (prefers-reduced-motion:reduce) {
  .pill-button,.space-cards>a,.space-cards .space-arrow,
  :is(.quiet-link,.manuscript-return,.production-delivery>a) > :is(span,img) { transform:none!important; }
}

:is(.nav-contact,.contact-book,.pill-button[href*="cal.com"]):active {
  box-shadow:inset 0 2px 5px #0004,0 1px 0 #ffffff0d;
}

/* Shared interface symbols come from the local Iconoir set. */
img.action-icon{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle;object-fit:contain;filter:invert(1);transition:transform .2s ease}
.subscription-list li::before{content:'';width:18px;height:18px;top:4px;background:url('./iconoir/check.svg') center/contain no-repeat;filter:invert(1);opacity:.7}
.manuscript-margin>img{width:64px;height:64px;filter:invert(1);opacity:.5}

/* One display voice across every page; card subheads keep their existing type. */
:root{--section-heading-size:clamp(40px,3.8vw,56px)}
body :is(h1,h2):not(#connections-title){font-family:var(--serif);font-size:var(--section-heading-size);font-weight:400;font-style:normal;line-height:1.18;letter-spacing:-.045em}
/* All action arrows move the same way; contact links do not add an underline. */
.contact-other a,.contact-other a:hover{text-decoration:none}
.contact-other a{display:inline-flex;align-items:center;gap:6px}
:is(.contact-link,.contact-book,.pill-button,.addon-details>a,.contact-other a,.tcg-entry a,.manuscript-return) img{transition:transform .2s var(--studio-ease)}
.contact-book img.action-icon{filter:none}
@media(hover:hover) and (pointer:fine){:is(.contact-link,.contact-book,.pill-button,.addon-details>a,.contact-other a,.tcg-entry a,.manuscript-return):hover img{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){:is(.contact-link,.contact-book,.pill-button,.addon-details>a,.contact-other a,.tcg-entry a,.manuscript-return) img{transform:none!important}}

/* Page actions carry the Studio accent; the manifesto uses the Agents peach. */
body :is(.contact-link,.pill-button){
 --control-fill:radial-gradient(ellipse at 35% 0%,#ffffff45,transparent 75%),linear-gradient(180deg,#00d0e5,#00b6ca);
 background:var(--control-fill);color:#052d32;border-color:#063e44;
 box-shadow:inset 0 2px 0 #ffffff40,inset 0 -1px 0 #0002,0 2px 4px #0004,0 6px 20px #00d0e50a;
}
body .manifesto-invitation .contact-link{
 --control-fill:radial-gradient(ellipse at 35% 0%,#ffffff40,transparent 75%),linear-gradient(180deg,#f0997d,#da8267);
 background:var(--control-fill);color:#382019;border-color:#674337;box-shadow:inset 0 2px 0 #ffffff40,0 3px 8px #0003;
}
body :is(.contact-link,.pill-button)>img{filter:brightness(0);opacity:.85}
@media(hover:hover){
 body :is(.contact-link,.pill-button):hover{background:var(--control-fill);border-color:#6de8f2;box-shadow:inset 0 2px 0 #ffffff55,0 4px 8px #0003,0 8px 28px #00d0e526}
 body .manifesto-invitation .contact-link:hover{border-color:#ffd1bb;box-shadow:inset 0 2px 0 #ffffff55,0 4px 8px #0003,0 8px 28px #f0997d26}
}

/* Iconoir arrows inherit the actual button text color in every state. */
body :is(.contact-link,.contact-book,.pill-button)>svg.action-icon{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle;color:inherit;filter:none;opacity:1;transition:transform .2s var(--studio-ease)}
@media(hover:hover) and (pointer:fine){body :is(.contact-link,.contact-book,.pill-button):hover>svg.action-icon{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){body :is(.contact-link,.contact-book,.pill-button)>svg.action-icon{transform:none!important}}

/* Shared editorial alignment: headings and supporting copy start on the same row. */
body :is(.studio-heading,.toolkit-story-heading,.manifesto-invitation-inner){align-items:start}
body :is(.section-heading,.feature-heading,.framework-heading,.market-head),body.product-page :is(.section-heading,.feature-heading,.framework-heading,.market-head){align-items:start;row-gap:16px}
body :is(.section-heading,.feature-heading,.framework-heading,.market-head)>div{display:contents}
body :is(.section-heading,.feature-heading,.framework-heading,.market-head)>div>.eyebrow{grid-column:1;grid-row:1}
body :is(.section-heading,.feature-heading,.framework-heading,.market-head)>div>h2{grid-column:1;grid-row:2;margin-top:0}
body :is(.section-heading,.feature-heading,.framework-heading,.market-head)>p{grid-column:2;grid-row:2;margin-top:0}
body .site-footer{background:var(--bg)}
body .site-footer>.wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
body .site-footer>.wrap>a:last-child{justify-self:end}

/* Product navigation marks exported from Figma, kept at their authored 20px size. */
.product-mode{width:48px;height:48px;border-radius:14px;background:#242427;border:1px solid #ffffff14;box-shadow:inset 0 2px 0 #ffffff0d}
.product-mode img{width:20px;height:20px;max-width:none;filter:none;opacity:1}
.product-mode.studio-mode{background:#00d0e5;border-color:#3d3d3f}
.product-mode.atlas-mode{background:#9a8df7}.product-mode.agents-mode{background:#f0997d}.product-mode.toolkits-mode{background:#83cfa7}
.manuscript-closing>.manuscript-signature{margin:0 auto 40px}
.studio-page .studio-hero-heading h1>span{white-space:nowrap}

.toolkit-cards article{display:flex;flex-direction:column}
.toolkit-cards .tag-list{margin-top:auto;padding-top:24px}