/* Generated by scripts/port-brand-pages.py from GraphonAI/graphon-brand. Do not edit by hand. */
/* Industry pages, built from the home page's own parts: the soft-serif hero over a painted plate,
   section heads with a mono label, brush-cut panels, the ink-bordered question card, and painted cyan
   for what Graphon found. Evidence stays real footage, toned into the paper and cut with the same brush. */

/* ---- hero: the home page's headline and buttons, then a painted plate across the full width ---- */
.ind-hero { padding: 56px 0 0; }
.ind-hero h1 { font: var(--dw) clamp(34px, 3.6vw, 52px)/1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.05em * var(--dt)); margin: 0; max-width: 1200px; }
.ind-hero .sub { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 64px; align-items: end; margin: 20px 0 0; padding-bottom: 24px; }
.ind-hero .sub p { margin: 0; font-size: 21px; line-height: 1.5; color: var(--ink); }
.ind-hero .ctas { display: flex; gap: 8px; margin-top: 28px; }
.ind-hero .btn { height: 44px; padding: 0 20px; font: var(--dw) 17px/1.2 var(--display); font-variation-settings: var(--dfv); }
.btn.cyan { background: var(--cyan-paint); color: #111; border-color: var(--cyan-edge); }
.btn.line { background: transparent; color: var(--ink); }
.ind-hero .sub p.sector { font: 400 12px var(--mono); color: var(--muted); justify-self: end; text-align: right; margin: 0 0 6px; }
/* the home page's sky: the elephant painting's warm sky, on the right, running up behind the header and fading out by
   the foot of the hero. The header goes clear over it until the page scrolls. */
.ind-sky { position: absolute; left: 0; right: 0; top: 0; height: var(--sky-h, 640px); z-index: -1; pointer-events: none;
  background: url(/painted/images/lively/hero-sky-up.webp) center bottom / cover no-repeat;
  -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 45%, transparent 100%), linear-gradient(to right, transparent 36%, #000 60%); -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 45%, transparent 100%), linear-gradient(to right, transparent 36%, #000 60%); mask-composite: intersect; }
body:has(.ind-sky) { position: relative; isolation: isolate; }
body:has(.ind-sky) > nav:not(.stuck) { background: transparent; border-bottom-color: transparent; }
body:has(.ind-sky) > nav { transition: background .3s, border-color .3s; }

/* ---- section head, as on the home page: a mono label in its own column, then the serif headline ---- */
.ind-demo { padding-top: 72px; padding-bottom: 112px; }
.ind-head { margin-bottom: 48px; }
.ind-head .lab { font: 400 12px var(--mono); color: var(--muted); padding-top: 12px; }
.ind-head h2 { font: var(--dw) clamp(34px, 4.2vw, 60px)/1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.035em * var(--dt)); margin: 0; max-width: 900px; }
.ind-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: start; }

/* ---- the question and answer: the home page's answer card ---- */
.ind-ask { position: sticky; top: 96px; }
.ind-card { border: 1px solid var(--ink); padding: 18px 20px 20px; }
.ind-card .who { font: 400 11px var(--mono); color: var(--muted); margin-bottom: 6px; }
.ind-card .q { font: var(--dw) 24px/1.18 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.015em * var(--dt)); margin: 0 0 14px; }
.ind-corpus { font: 400 11px/1.6 var(--mono); color: var(--muted); margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--faint); }
.ind-corpus b { font-weight: 500; color: var(--ink); }
.ind-card p.ans { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.ind-card mark { background: var(--cyan-paint); color: #111; padding: 0 .2em; box-shadow: inset 0 0 0 1px var(--cyan-edge); }
.ind-card sup, .ind-src .n { display: inline-grid; place-items: center; width: 16px; height: 16px; font: 500 9px/1 var(--mono); background: var(--ink); color: var(--paper); vertical-align: 2px; margin-left: 3px; border-radius: 22%; }
.ind-ask .note { margin: 18px 0 0 4px; font: italic 400 14px/1.4 var(--sans); color: var(--muted); transform: rotate(-2deg); transform-origin: left; }
.ind-ask .note::before { content: "— "; }

/* ---- the cited sources: brush-cut panels like the home page's API paintings ---- */
.ind-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.ind-src { margin: 0; }
.ind-src .thumb { position: relative; aspect-ratio: 16 / 10; background: #E9E1D0;
  -webkit-mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; }
/* the evidence is mounted inside the brushed panel at its own 16:9, clear of the brush edge, so the marked spots land exactly */
.ind-src .frame { position: absolute; left: 7%; right: 7%; top: 50%; aspect-ratio: 16 / 9; transform: translateY(-50%); box-shadow: 0 1px 0 rgba(17, 17, 17, .08); }
.ind-src .frame > img, .ind-src .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* toned into the paper: warm, soft, low-contrast, the way the paintings sit on the page */
.ind-src .bw { filter: grayscale(1) sepia(.38) contrast(.96) brightness(1.04); }
.ind-src .thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: multiply; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(120, 100, 70, .08) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .08) 0 1px, transparent 1px 3px); }   /* the canvas weave */
.ind-src .patch { z-index: 1; }
.ind-src .n { width: 18px; height: 18px; font-size: 10px; margin: 0 8px 0 0; vertical-align: 1px; }
.ind-src .ann { position: absolute; z-index: 3; box-shadow: 0 0 0 2.5px #0BD3D8, 0 0 0 3.5px rgba(17, 17, 17, .7); border-radius: 2px; }
.ind-src figcaption { padding: 14px 2px 0; display: grid; gap: 3px; }
.ind-src .kind { font: 400 11px var(--mono); color: var(--muted); }
.ind-src h4 { margin: 0; font: var(--dw) 22px/1.15 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.015em * var(--dt)); }
.ind-src .from { font: 400 11px var(--mono); color: var(--muted); }

/* played: the answer arrives after the search, and each source's spot is marked as the answer cites it */
.ind-demo.play .ind-corpus, .ind-demo.play .ans .w, .ind-demo.play .ans sup, .ind-demo.play .ind-src .ann, .ind-demo.play .ind-src .patch,
.ind-demo.play .ind-ask .note { opacity: 0; transition: opacity .35s; }
.ind-demo.play .on { opacity: 1 !important; }

@media (max-width: 900px) {
  .ind-hero .sub, .ind-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ind-hero .sector { justify-self: start; text-align: left; }
  .ind-ask { position: static; }
}
@media (max-width: 600px) {
  .ind-srcs { grid-template-columns: minmax(0, 1fr); }
  .ind-hero .sub p { font-size: 18px; }
}
.muted { color: var(--muted); }
.ind-hero .sub p.ind-lede { font: var(--dw) clamp(22px, 2.2vw, 30px)/1.25 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.015em * var(--dt)); color: var(--ink); max-width: 640px; }