/* Stonefletcher Productions
   Layout: a dark workshop bench. Sticky glass nav, a full-bleed hero with a live "fletching" field,
   then bands of work laid out on a faint 8px engineering grid. Ember orange marks anything you can act on,
   steel blue marks metadata. Geist for interface, Geist Mono for the machine details, Instrument Serif
   italic for the one accent word per page. */
:root {
  --bg: #090b0f;          /* workshop at night */
  --bg-2: #0d1016;
  --surface: #12161e;
  --surface-2: #181d27;
  --line: #222835;
  --line-soft: #1a1f2a;
  --fg: #e9ecf2;
  --muted: #8a93a6;
  --faint: #5b6476;
  --accent: #ff6b2c;      /* ember */
  --accent-soft: rgba(255, 107, 44, .14);
  --accent-ink: #160a04;
  --steel: #8fb3ff;       /* tempered steel */
  --steel-soft: rgba(143, 179, 255, .12);
  --ok: #5fd39a;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --radius: 14px;
  --maxw: 1200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.6 var(--sans); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Faint engineering grid behind everything */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: .55;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(9, 11, 15, .78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line-soft); }
.nav > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.02em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand small { font: 400 12px/1 var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-menu { display: flex; align-items: center; gap: 20px; }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.has-menu { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--sans); color: var(--muted); background: none; border: 0; padding: 10px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .2s, background .2s; }
.nav-trigger:hover, .has-menu.open .nav-trigger { color: var(--fg); background: var(--surface); }
.has-menu.current .nav-trigger { color: var(--fg); }
.has-menu.current .nav-trigger::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-left: 2px; }
.nav-trigger .chev { width: 12px; height: 12px; transition: transform .2s; opacity: .7; }
.has-menu.open .chev { transform: rotate(180deg); }
.nav-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mega { position: absolute; top: calc(100% + 10px); left: 50%; width: 340px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(15, 18, 25, .97); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.mega::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } /* hover bridge */
.mega.wide { width: 560px; }
.has-menu.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s, transform .18s; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega.wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega li a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.mega li a:hover, .mega li a:focus-visible { background: var(--surface-2); outline: none; }
.mi-thumb { flex: none; width: 52px; height: 40px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.mi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mi-thumb.logo img { object-fit: contain; padding: 6px; }
.mi-text { display: grid; gap: 3px; min-width: 0; }
.mi-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.mi-state { font: 500 10.5px/1 var(--mono); color: var(--accent); }
.mi-state.live { color: var(--ok); }
.mi-note { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mega-all { display: flex; justify-content: space-between; margin: 6px 2px 0; padding: 12px 10px 6px; border-top: 1px solid var(--line-soft); font: 500 13px/1 var(--mono); color: var(--steel); text-decoration: none; }
.mega-all:hover { color: var(--fg); }
.nav-cta { padding: 10px 14px; font-size: 14px; }
.nav-store { font: 500 13px/1 var(--mono); color: var(--muted); text-decoration: none; padding: 10px 6px; white-space: nowrap; }
.nav-store:hover { color: var(--fg); }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; place-items: center; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 18px; height: 1.5px; background: var(--fg); border-radius: 2px; transition: transform .2s, background .2s; }
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; }
.menu-open .nav-toggle .bars { background: transparent; }
.menu-open .nav-toggle .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-open .nav-toggle .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* The menu collapses to the hamburger below 1100px: five groups, the store link and the button need the room. */
@media (max-width: 1100px) {
  .nav-toggle { display: grid; }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 64px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)); flex-direction: column; align-items: stretch; gap: 16px; padding: 12px max(20px, env(safe-area-inset-left, 0px)) 32px; background: var(--bg); border-top: 1px solid var(--line-soft); overflow-y: auto; }
  .menu-open .nav-menu { display: flex; }
  .menu-lock, .menu-lock body { overflow: hidden; }
  .nav-links { flex-direction: column; gap: 0; }
  .has-menu { border-bottom: 1px solid var(--line-soft); }
  .nav-trigger { width: 100%; justify-content: space-between; font-size: 18px; padding: 18px 4px; border-radius: 0; color: var(--fg); }
  .nav-trigger:hover, .has-menu.open .nav-trigger { background: none; }
  .has-menu.current .nav-trigger::after { margin-left: auto; margin-right: 10px; }
  .nav-trigger .chev { width: 16px; height: 16px; }
  .mega, .mega.wide { position: static; width: auto; padding: 0 0 12px; border: 0; background: none; box-shadow: none; transform: none; display: none; opacity: 1; visibility: visible; transition: none; }
  .mega::before { display: none; }
  .has-menu.open .mega { display: block; transform: none; }
  .mega.wide ul { grid-template-columns: 1fr; }
  .mega li a { padding: 10px 4px; }
  .nav-cta { justify-content: center; padding: 15px; font-size: 16px; }
  .nav-store { font-size: 16px; padding: 14px 4px; }
}

/* ---------- Type ---------- */
.eyebrow { font: 500 12px/1 var(--mono); color: var(--steel); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
.display { font-weight: 600; font-size: clamp(44px, 7.4vw, 104px); line-height: .95; letter-spacing: -0.045em; }
.display em, .h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); }
.h2 { font-weight: 600; font-size: clamp(32px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.035em; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 60ch; margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---------- Buttons ---------- */
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font: 500 15px/1 var(--sans); text-decoration: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg); transition: transform .2s, border-color .2s, background .2s; }
.btn:hover { border-color: #344055; transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: #ff7d45; }
.btn .k { font: 500 11px/1 var(--mono); padding: 3px 6px; border-radius: 5px; background: rgba(0,0,0,.18); }
.btn:not(.primary) .k { background: var(--surface-2); color: var(--muted); }
.arrow { transition: transform .2s; }
a:hover > .arrow, a:hover .arrow { transform: translateX(3px); }

/* ---------- Sections ---------- */
.band { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line-soft); position: relative; }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: 40px; }
.band-head > div { display: grid; gap: 16px; }
.band-head p { margin: 0; color: var(--muted); max-width: 52ch; justify-self: end; }
.band-head p a { color: var(--fg); }
@media (max-width: 800px) { .band-head { grid-template-columns: 1fr; } .band-head p { justify-self: start; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(56px, 9vw, 112px) clamp(40px, 6vw, 72px); display: grid; gap: 22px; }
.path { font: 400 13px/1 var(--mono); color: var(--faint); }
.path b { color: var(--muted); font-weight: 400; }
.path i { font-style: normal; color: var(--accent); }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.card { position: relative; background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: border-color .25s, transform .25s; }
.card:hover { border-color: #33405a; }
.card .art { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.card .art.square { aspect-ratio: 1 / 1; }
.card .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .art img { transform: scale(1.035); }
.card .art img.contain { object-fit: contain; }
.card .art img.cover-art { object-fit: contain; padding: 14px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.card .art img.logo { object-fit: contain; padding: 14% 14%; }
.card:hover .art img.cover-art, .card:hover .art img.logo, .card:hover .art img.contain { transform: scale(1.02); }
.tool-card .art img { object-fit: contain; }
.tool-card:hover .art img { transform: none; }
.tool-card .foot { flex-wrap: wrap; }
.tool-capture { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.tool-capture summary { cursor: pointer; color: var(--steel); padding: 8px 0; font-size: 14px; }
.tool-capture summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tool-capture figure { margin: 10px 0 0; }
.tool-capture img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.tool-capture figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.tooling-credits p { max-width: 85ch; color: var(--muted); }
.tooling-credits a { color: var(--steel); }
.card .body { padding: 20px 20px 18px; display: grid; gap: 10px; flex: 1; align-content: start; }
.card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .foot { padding: 14px 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.card .foot a { color: var(--accent); text-decoration: none; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.card .foot .meta { font: 400 12px/1.3 var(--mono); color: var(--faint); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 500 11.5px/1 var(--mono); padding: 5px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-soft); }
.tag.hot { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.tag.cool { color: var(--steel); background: var(--steel-soft); border-color: transparent; }
.tag.live { color: var(--ok); background: rgba(95, 211, 154, .1); border-color: transparent; }
.tag.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(95, 211, 154, .18); }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--line-soft); padding-block: 56px 64px; color: var(--muted); font-size: 14px; }
footer.site .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(6, minmax(0, 1fr)); gap: 28px; }
footer.site .foot-cta { color: var(--accent); font-weight: 500; }
footer.site .foot-cta:hover { color: #ff8a55; }
footer.site h4 { font: 500 12px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer.site a { text-decoration: none; color: var(--muted); }
footer.site a:hover { color: var(--fg); }
footer.site .sig { display: grid; gap: 12px; align-content: start; }
footer.site .sig p { margin: 0; max-width: 34ch; }
footer.site .build { font: 400 12px/1.5 var(--mono); color: var(--faint); }
@media (max-width: 900px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } footer.site .sig { grid-column: 1 / -1; } }

/* ---------- Reveal ---------- */
.reveal { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.reveal.d1 { animation-delay: .08s; } .reveal.d2 { animation-delay: .16s; } .reveal.d3 { animation-delay: .24s; } .reveal.d4 { animation-delay: .32s; }
@keyframes rise { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } .card .art img, .btn, .arrow { transition: none; } }

/* ---------- Home hero ---------- */
.hero { position: relative; min-height: min(78vh, 760px); display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9,11,15,0) 30%, var(--bg) 96%), radial-gradient(ellipse 60% 50% at 20% 70%, rgba(9,11,15,.85), transparent 70%); }
.hero .wrap { position: relative; z-index: 1; padding-block: 96px clamp(56px, 8vw, 96px); display: grid; gap: 28px; width: 100%; }
.hero .display { max-width: 13ch; }
.hero .readout { display: flex; gap: 10px 28px; flex-wrap: wrap; font: 400 12.5px/1.4 var(--mono); color: var(--faint); }
.hero .readout b { color: var(--muted); font-weight: 400; }
.hero .readout .live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255,107,44,.04); } }

/* ---------- Home hero commission card ---------- */
.hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px 56px; align-items: end; }
.hero-copy { display: grid; gap: 28px; }
.hire { position: relative; display: grid; gap: 16px; padding: 26px; border: 1px solid #3a3330; border-radius: calc(var(--radius) + 4px); background: linear-gradient(180deg, rgba(24, 18, 15, .92), rgba(13, 16, 22, .94)); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 107, 44, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hire-status { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--ok); text-transform: uppercase; letter-spacing: .08em; }
.hire-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(95, 211, 154, .18); animation: pulse-ok 2.4s ease-in-out infinite; }
@keyframes pulse-ok { 50% { box-shadow: 0 0 0 6px rgba(95, 211, 154, .04); } }
.hire h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.hire h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -0.01em; }
.hire p { margin: 0; color: var(--muted); font-size: 15px; }
.hire-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hire-kinds a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9, 11, 15, .6); text-decoration: none; transition: border-color .2s, background .2s; }
.hire-kinds a:hover { border-color: var(--accent); background: var(--accent-soft); }
.hire-kinds b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hire-kinds span { font-size: 12.5px; color: var(--muted); }
.hire-go { justify-content: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hire { max-width: 560px; } }
@media (max-width: 400px) { .hire { padding: 20px; } .hire-kinds a { padding: 10px 12px; } }

/* ---------- Home catalog ---------- */
.filters { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); margin-bottom: 24px; flex-wrap: wrap; }
.filters button { font: 500 14px/1 var(--sans); color: var(--muted); background: none; border: 0; padding: 10px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: color .2s, background .2s; }
.filters button span { font: 500 11px/1 var(--mono); color: var(--faint); }
.filters button:hover { color: var(--fg); }
.filters button[aria-pressed="true"] { color: var(--fg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.filters button[aria-pressed="true"] span { color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.tile, .studio-link { position: relative; isolation: isolate; }
.tile::before, .studio-link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 60%); opacity: 0; transition: opacity .3s; }
.tile:hover::before, .studio-link:hover::before { opacity: 1; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); text-decoration: none; transition: border-color .25s, transform .25s; }
.tile[hidden] { display: none; }
.tile:hover { border-color: #3a3330; transform: translateY(-2px); }
.tile-art { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tile-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .tile-art img { transform: scale(1.04); }
.tile-art.logo { background: radial-gradient(circle at 50% 45%, #1c2230, var(--bg-2) 72%); }
.tile-art.logo img { object-fit: contain; padding: 18% 26%; }
.tile-body { padding: 18px 18px 8px; display: grid; gap: 8px; flex: 1; align-content: start; }
.tile-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 12px/1 var(--mono); color: var(--faint); }
.tile h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.tile p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.tile-go { padding: 12px 18px 18px; font: 500 13px/1 var(--mono); color: var(--muted); display: flex; gap: 6px; }
.tile:hover .tile-go { color: var(--accent); }

@media (max-width: 560px) {
  .tiles { gap: 10px; }
  .tile { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .tile-art { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; min-height: 112px; border-bottom: 0; border-right: 1px solid var(--line); }
  .tile-art.logo img { padding: 22%; }
  .tile-body { padding: 14px 14px 4px; gap: 6px; }
  .tile h3 { font-size: 17px; }
  .tile p { font-size: 13.5px; }
  .tile-go { padding: 8px 14px 14px; }
}

/* ---------- Home studio links ---------- */
.studio-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.studio-link { display: grid; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--bg-2)); text-decoration: none; transition: border-color .25s, transform .25s; }
.studio-link:hover { border-color: #3a3330; transform: translateY(-2px); }
.sl-top { display: flex; justify-content: space-between; align-items: baseline; }
.sl-title { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.sl-count { font: 500 12px/1 var(--mono); color: var(--accent); }
.sl-note { color: var(--muted); font-size: 15px; padding-right: 28px; }
.studio-link > .arrow { position: absolute; right: 24px; bottom: 24px; color: var(--muted); }
.studio-link:hover > .arrow { color: var(--accent); }
@media (max-width: 760px) { .studio-links { grid-template-columns: 1fr; } }

/* ---------- About / statement ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 64px; align-items: start; }
.statement .big { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.025em; margin: 0; }
.statement .big em { font-family: var(--serif); font-style: italic; color: var(--accent); }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.specs div { padding: 16px 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 4px; }
.specs dt { font: 400 12px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.specs dd { margin: 0; font-size: 15px; }
@media (max-width: 860px) { .statement { grid-template-columns: 1fr; } }

/* ---------- Sub nav on long pages ---------- */
.toc { display: flex; gap: 6px; flex-wrap: wrap; }
.toc a { font: 400 12.5px/1 var(--mono); color: var(--muted); text-decoration: none; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; }
.toc a:hover { color: var(--fg); border-color: #344055; }
.toc a b { color: var(--accent); font-weight: 400; margin-right: 6px; }

/* ---------- Career ---------- */
.side-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 40px; }
@media (max-width: 760px) { .side-pair { grid-template-columns: 1fr; } }
.side-pair .card .body { padding: 22px; }
.timeline { display: grid; border-top: 1px solid var(--line); }
.tl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
.tl .when { font: 400 13px/1.6 var(--mono); color: var(--faint); }
.tl h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.tl .org { color: var(--steel); font-size: 14px; margin-top: 2px; }
.tl p { margin: 10px 0 0; color: var(--muted); max-width: 72ch; }
@media (max-width: 700px) { .tl { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips span { font: 400 13px/1 var(--mono); padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }

/* ---------- AI ---------- */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px; }
.panel h3 { font: 500 12px/1 var(--mono); color: var(--steel); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.panel li { padding-left: 22px; position: relative; color: var(--muted); }
.panel li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); }

/* ---------- Cars ---------- */
.garage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(70px, 9vw, 112px); gap: 10px; }
.garage figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.garage img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.garage figure:hover img { transform: scale(1.04); }
.garage figure { grid-column: span 2; grid-row: span 2; }
.garage figure:nth-child(1) { grid-column: span 4; grid-row: span 4; }
@media (max-width: 760px) { .garage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; } .garage figure:nth-child(n) { grid-column: span 1; grid-row: span 1; } .garage figure:nth-child(1) { grid-column: span 2; grid-row: span 2; } }
.modlist { margin-top: 28px; border-top: 1px solid var(--line); columns: 2 340px; column-gap: 40px; }
.modlist a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; break-inside: avoid; }
.modlist .cat { font: 400 12px/1.6 var(--mono); color: var(--faint); }
.modlist .part { font-size: 15px; }
.modlist .brand { color: var(--muted); }
.modlist a:hover .part { color: var(--accent); }
.callout { margin-top: 28px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 22px; border: 1px dashed #3a3330; border-radius: var(--radius); }
.callout p { margin: 0; color: var(--muted); }
.callout a { color: var(--accent); text-decoration: none; font-weight: 500; }

/* ---------- Links ---------- */
.linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.linkgrid a { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--surface); transition: border-color .2s; }
.linkgrid a:hover { border-color: var(--accent); }
.linkgrid small { font: 400 12px/1 var(--mono); color: var(--faint); display: block; margin-top: 4px; }

/* ---------- Products ---------- */
.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
.product + .product { margin-top: 22px; }
.product .media { position: relative; min-height: 320px; background: var(--surface-2); border-right: 1px solid var(--line); }
.product .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product .media img.logo { object-fit: contain; padding: 22%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.product .media.logo-bg { background: radial-gradient(circle at 50% 45%, #1c2230, var(--bg-2) 70%); }
.product .info { padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 18px; align-content: start; }
.product h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.035em; line-height: 1; }
.product .info > p { margin: 0; color: var(--muted); }
.product .feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 14px; }
.product .feat li::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--bg-2); }
.plan .nm { font: 500 12px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.plan .pr { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; margin-top: 8px; }
.plan .pr small { font-size: 13px; color: var(--faint); font-weight: 400; letter-spacing: 0; }
.plan .nt { font-size: 13px; color: var(--muted); margin-top: 4px; }
.plan.pick { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plans.one { grid-template-columns: minmax(0, 300px); }
.product .fine { margin: 0; font-size: 13px; color: var(--faint); }
.product-more { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.product-more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px clamp(24px, 3.4vw, 40px); font: 500 14px/1.3 var(--mono); color: var(--steel); }
.product-more summary::-webkit-details-marker { display: none; }
.product-more summary::before { content: "+"; color: var(--accent); font-size: 18px; width: 14px; transition: transform .2s; }
.product-more[open] summary::before { content: "−"; }
.product-more summary:hover { color: var(--fg); }
.product-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.product-more .more-body { padding: 4px clamp(24px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px); display: grid; gap: 28px; }
.more-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
@media (max-width: 760px) { .more-sections { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .more-sections td:last-child { white-space: normal; } }
.more-sections h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.more-sections ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--muted); font-size: 14.5px; }
.more-sections li::marker { color: var(--accent); }
.more-sections table { width: 100%; border-collapse: collapse; font-size: 14px; }
.more-sections td { padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
.more-sections td:last-child { text-align: right; color: var(--fg); font-family: var(--mono); font-size: 13px; padding-left: 12px; white-space: nowrap; }
.more-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.more-gallery figure { margin: 0; }
.more-gallery img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.more-gallery figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.more-note { margin: 0; font-size: 13px; color: var(--faint); }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; } .product .media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 240px; } }
@media (max-width: 480px) { .plans { grid-template-columns: 1fr; } .product .feat { grid-template-columns: 1fr; } }

/* ---------- Open source ---------- */
.repo-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); overflow: hidden; background: var(--surface); }
.repo-feature .media { border-right: 1px solid var(--line); min-height: 300px; position: relative; }
.repo-feature .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.repo-feature .info { padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; align-content: start; }
.repo-feature h2 { font: 600 clamp(26px, 3vw, 36px)/1.05 var(--mono); letter-spacing: -0.04em; }
@media (max-width: 860px) { .repo-feature { grid-template-columns: 1fr; } .repo-feature .media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 220px; } }
.term { font: 400 13px/1.6 var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; overflow-x: auto; }
.term code { white-space: nowrap; color: var(--fg); }
.term code::before { content: "$ "; color: var(--accent); }
.term button { font: 500 11px/1 var(--mono); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; cursor: pointer; flex: none; }
.term button:hover { color: var(--fg); }
.card .lock { position: absolute; top: 12px; left: 12px; z-index: 1; }

/* Tool "See it in use" pages */
.showcase-intro { display: grid; gap: 18px; max-width: 760px; }
.showcase-intro .lede { margin: 0; }
.showcase-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }
.showcase-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.showcase-gallery figure.wide { grid-column: 1 / -1; }
.showcase-gallery a { display: block; background: var(--surface-2); }
.showcase-gallery img { display: block; width: 100%; height: auto; }
.showcase-gallery figcaption { padding: 12px 16px 14px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.showcase-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }
.showcase-details .panel p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .showcase-gallery, .showcase-details { grid-template-columns: 1fr; } }

/* ---------- Commissions ---------- */
.kinds .door { min-height: 0; grid-template-rows: auto auto 1fr auto; align-content: stretch; }
.kinds .door .glyph { position: static; width: 56px; height: 56px; }
.kinds .door h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 10px; }
.request { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px 64px; align-items: start; }
.request-intro { display: grid; gap: 18px; position: sticky; top: 96px; }
.request-intro p { margin: 0; }
.request-intro a { color: var(--accent); }
.steps { list-style: none; counter-reset: step; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; padding-left: 40px; color: var(--muted); }
.steps li::before { content: "0" counter(step); position: absolute; left: 0; top: 1px; font: 500 12px/1.6 var(--mono); color: var(--accent); }
.steps b { color: var(--fg); font-weight: 500; }
.request-form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); }
.field { display: grid; gap: 8px; min-width: 0; }
.field > span { font: 500 12px/1 var(--mono); color: var(--steel); text-transform: uppercase; letter-spacing: .08em; }
.field > span i { font-style: normal; color: var(--faint); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.field select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.field select option { background: var(--surface); color: var(--fg); }
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field [aria-invalid="true"] { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.request-form .cta { margin: 0; }
.request-form button { cursor: pointer; }
.form-error { margin: 0; color: var(--accent); font-size: 15px; }
.form-sent { display: grid; gap: 14px; padding: 18px; border: 1px dashed #3a3330; border-radius: 10px; }
.form-sent p { margin: 0; color: var(--muted); }
.form-sent b { color: var(--fg); font-weight: 500; }
.form-sent[hidden], .form-error[hidden] { display: none; }
@media (max-width: 860px) { .request { grid-template-columns: 1fr; } .request-intro { position: static; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Product details pages (pocket-reels.html, skyline-strip.html) ---------- */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.pp-info { display: grid; gap: 20px; }
.pp-buy { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 20px; display: grid; gap: 14px; }
.pp-price { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pp-price small { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.pp-buy .fine { margin: 0; font-size: 13px; color: var(--faint); }
.pp-info .feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 14px; }
.pp-info .feat li::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
.pp-shot { margin: 0; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); overflow: hidden; background: var(--surface-2); }
.pp-shot img { display: block; width: 100%; height: auto; }
.pp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; }
.pp-facts div { background: var(--surface); padding: 14px 16px; display: grid; gap: 4px; }
.pp-facts span { font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.pp-facts b { font-weight: 500; font-size: 14.5px; }
.pp-h { font-size: clamp(26px, 3.2vw, 38px); margin: clamp(48px, 7vw, 80px) 0 20px; scroll-margin-top: 90px; }
.pp-sections { gap: 36px 48px; }
.pp-faq { display: grid; gap: 10px; max-width: 860px; }
.pp-faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pp-faq summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 500; display: flex; gap: 12px; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::before { content: "+"; color: var(--accent); font-family: var(--mono); width: 12px; }
.pp-faq details[open] summary::before { content: "−"; }
.pp-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.pp-faq p { margin: 0; padding: 0 18px 18px 42px; color: var(--muted); }
.pp-end { margin-top: clamp(48px, 7vw, 80px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--surface); padding: clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.pp-end h3 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.02em; }
.pp-end p { margin: 0; color: var(--muted); }
@media (max-width: 960px) { .pp-hero { grid-template-columns: 1fr; } .pp-shot { order: -1; } .pp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pp-info .feat { grid-template-columns: 1fr; } }
.pp-sections td:last-child { white-space: normal; }
.pp-req td:first-child { width: 28%; padding-right: 12px; }
.pp-req td:last-child { text-align: left; font: 14px/1.45 var(--sans); }

/* ---------- Sectioned menu panels (Tools, Assets) ---------- */
.mega.sectioned { width: 620px; }
.mega-sections { columns: 2; column-gap: 4px; }
.mega-sec { break-inside: avoid; padding-bottom: 6px; }
.mega-h { display: block; padding: 10px 10px 4px; font: 500 11px/1.3 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.mega.sectioned ul { grid-template-columns: 1fr; }
.mega.sectioned.single { width: 560px; }
.mega.sectioned.single .mega-sections { columns: 1; }
.mega.sectioned.single ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mega.sectioned, .mega.sectioned.single { width: auto; } .mega-sections { columns: 1; } .mega.sectioned.single ul { grid-template-columns: 1fr; } .mega-h { padding: 8px 4px 2px; } }

/* ---------- Tools page sections ---------- */
.tool-sec + .tool-sec { margin-top: 56px; }
.sec-h { font: 500 12px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.dev-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }

/* ---------- Assets page ---------- */
.asset-line + .asset-line { margin-top: 72px; }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pack { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); scroll-margin-top: 90px; }
.pack.best { border-color: rgba(255, 107, 44, .45); }
.pack-art { display: block; aspect-ratio: 630 / 500; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pack-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pack:hover .pack-art img { transform: scale(1.03); }
.pack-body { padding: 16px 18px 4px; display: grid; gap: 8px; align-content: start; flex: 1; }
.pack-body .tag { justify-self: start; }
.pack-body h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.pack-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pack-foot { padding: 14px 18px 18px; display: grid; gap: 12px; }
.pack-price { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pack-price small { font: 400 12.5px/1 var(--mono); color: var(--muted); letter-spacing: 0; }
.pack-foot .btn { justify-content: center; }
.asset-feat { list-style: none; margin: 28px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; font-size: 14px; }
.asset-feat li::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
@media (max-width: 1000px) { .packs, .asset-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .packs, .asset-feat { grid-template-columns: 1fr; } }

/* ---------- AI page: agentic tools and Current research ---------- */
.product.agentic .media img.contain { object-fit: contain; background: #0b0d12; }
.product.agentic .tool-capture { margin-top: 2px; }
.copy-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 8px 8px 8px 14px; }
.copy-line code { font: 500 14px/1.4 var(--mono); color: var(--steel); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.copy-line .btn { padding: 8px 14px; font-size: 14px; }
.r-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.r-index a { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--fg); transition: border-color .2s, transform .2s; }
.r-index a:hover { border-color: #344055; transform: translateY(-1px); }
.r-index b { font-weight: 600; letter-spacing: -0.01em; }
.r-index span { font-size: 14px; color: var(--muted); }
.r-index i { font: 500 12px/1 var(--mono); font-style: normal; color: var(--accent); }
.research { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px 56px; padding-block: 48px; border-top: 1px solid var(--line-soft); }
.research:first-of-type { border-top: 0; }
.research > header { position: sticky; top: 96px; align-self: start; display: grid; gap: 12px; }
.research > header .num { font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .08em; }
.research > header h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.research > header p { margin: 0; color: var(--muted); font-size: 15px; }
.research .r-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.research .r-body > p { margin: 0; color: var(--muted); max-width: 72ch; }
.research .r-body > p strong { color: var(--fg); font-weight: 500; }
.research .r-body code { overflow-wrap: anywhere; font: 500 .9em var(--mono); color: var(--steel); background: var(--steel-soft); padding: 1px 6px; border-radius: 5px; }
.r-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.r-points li { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px 18px; color: var(--muted); font-size: 14.5px; }
.r-points li b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 4px; }
.r-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.r-table th { text-align: left; font: 500 12px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.r-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
.r-table td:first-child { color: var(--fg); white-space: nowrap; }
.r-scroll { overflow-x: auto; }
.r-fig { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); padding: clamp(14px, 2vw, 24px); }
.r-fig svg { display: block; width: 100%; height: auto; }
.r-fig figcaption { font-size: 13px; color: var(--faint); margin-top: 12px; }
.r-fig img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.r-src { font-size: 13px; color: var(--faint); margin: 0; }
.r-src a { color: var(--muted); }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.principles .panel p { margin: 0; color: var(--muted); font-size: 14.5px; }
.principles .panel h3 { margin-bottom: 10px; }
@media (max-width: 960px) { .research { grid-template-columns: minmax(0, 1fr); padding-block: 36px; } .research > header { position: static; } .r-index, .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .r-index, .principles, .r-points { grid-template-columns: 1fr; } .r-table td:first-child { white-space: normal; } }
.tg-tall { display: none !important; max-width: 420px; margin-inline: auto; }
@media (max-width: 640px) { .tg-wide { display: none !important; } .tg-tall { display: block !important; } }

.pack-price small{display:block;line-height:1.5;margin-top:5px}.pack-price .pack-count{font-family:var(--sans);font-size:14px}.asset-actions{margin:24px 0 32px}.hearth-demo{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:#090b0f}.demo-caption{color:var(--muted);font-size:14px;line-height:1.6}