/* Brand page. Colours, the display font and the seal come from theme.css; this file owns layout. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.brand-page { margin: 0; min-height: 100dvh; }
.brand-page a:not([class]) { color: inherit; }
.brand-page img { display: block; max-width: 100%; height: auto; }
.section-inner { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 14px; border-radius: 8px; color: var(--t-on-accent); background: var(--t-accent); font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 3; width: min(1160px, calc(100% - 64px)); height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-brand strong { color: var(--t-text); font-family: var(--t-font-display); font-size: 17px; font-weight: 600; letter-spacing: .08em; }
.site-nav { display: flex; gap: 30px; margin-right: auto; }
.site-nav a { color: var(--t-text-2); font-size: 14px; text-decoration: none; transition: color var(--t-dur) var(--t-ease); }
.site-nav a:hover { color: var(--t-text); }
.site-header-actions { display: flex; align-items: center; gap: 10px; }
.site-theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--t-line-strong); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color var(--t-dur) var(--t-ease); }
.site-theme-toggle:hover { border-color: var(--t-accent-line); }
/* Half paper, half screening room: shows both looks at a glance. */
.site-theme-toggle span { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #ececea 50%, #151619 50%); box-shadow: inset 0 0 0 1px rgba(22, 24, 28, .3); }

/* ---------- Buttons ---------- */
.header-action, .primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease); }
.header-action { min-height: 38px; padding: 0 18px; font-size: 14px; }
.header-action, .primary-action { color: var(--t-on-accent); background: var(--t-accent); }
.header-action:hover, .primary-action:hover { background: var(--t-fill-hover); }
.secondary-action { border-color: var(--t-line-strong); color: var(--t-text); }
.secondary-action:hover { border-color: var(--t-accent-line); }
:is(.header-action, .primary-action, .secondary-action):active { transform: translateY(1px); }
.text-link { display: inline-block; margin-top: 28px; color: var(--t-accent-hover); font-size: 15px; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------- Hero: headline set like a scroll title, the canvas as the painting ---------- */
.hero { width: min(1160px, calc(100% - 64px)); min-height: calc(100dvh - 76px); margin: 0 auto; padding: 24px 0 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero-title { margin: 0; color: var(--t-text); font-family: var(--t-font-display); font-size: clamp(56px, 7.4vw, 104px); font-weight: 600; line-height: 1.12; letter-spacing: .06em; }
.hero-lede { max-width: 30em; margin: 30px 0 0; color: var(--t-text-2); font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-scroll { position: relative; margin: 0; padding: clamp(18px, 2.4vw, 30px); border: 1px solid var(--t-line-strong); border-radius: 6px; background: var(--t-panel); box-shadow: var(--t-shadow-lg); }
/* The mount: a dot grid like the canvas itself. */
.scroll-mount { position: relative; aspect-ratio: 640 / 420; border-radius: 3px; background-color: var(--t-bg); background-image: radial-gradient(circle, var(--t-dot) 1px, transparent 1.3px); background-size: 18px 18px; overflow: hidden; }
.flow-diagram { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-line { fill: none; stroke: var(--t-edge-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: flow-draw 1.1s var(--t-ease) forwards; }
.flow-line:nth-of-type(2) { animation-delay: .15s; }
.flow-line-out { stroke-dasharray: 80; stroke-dashoffset: 80; animation-delay: .9s; }
@keyframes flow-draw { to { stroke-dashoffset: 0; } }
.flow-node { position: absolute; padding: 3.2% 3.4%; border: 1px solid var(--t-line-strong); border-radius: 10px; background: var(--t-raised); box-shadow: var(--t-shadow-md); }
.flow-kind { display: block; margin-bottom: 8px; color: var(--t-accent-hover); font-size: clamp(10px, 1.1vw, 12px); font-weight: 600; }
.flow-node p { margin: 0; color: var(--t-text); font-size: clamp(11px, 1.25vw, 14px); line-height: 1.6; }
.flow-prompt { left: 4%; top: 9%; width: 29%; }
.flow-ref { left: 4%; top: 57%; width: 29%; }
.flow-swatch { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 9; }
.flow-swatch i { border-radius: 4px; background: var(--t-k-image); opacity: .55; }
.flow-swatch i:first-child { grid-row: span 2; opacity: .85; }
.flow-swatch i:last-child { background: var(--t-k-text); }
.flow-gen { left: 55%; top: 18%; width: 38%; }
.flow-gen small { display: block; margin-top: 8px; color: var(--t-text-3); font-size: clamp(10px, 1vw, 12px); }
/* Four results in a 2x2 contact sheet; each is a different gradient so they read as different pictures. */
.flow-results { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.flow-results i { aspect-ratio: 16 / 10; border-radius: 4px; background: var(--t-screen); box-shadow: var(--t-screen-shadow); }
.flow-results i:nth-child(1) { --img: linear-gradient(180deg, #1b2440 0%, #3b3f6a 45%, #e8b66a 46%, #2a2236 60%, #0e0d14 100%); }
.flow-results i:nth-child(2) { --img: radial-gradient(60% 50% at 30% 40%, #e39a8c, transparent 70%), linear-gradient(160deg, #232744, #0f0e16); }
.flow-results i:nth-child(3) { --img: linear-gradient(200deg, #e8b66a 0%, #a8573c 40%, #2a1d2b 100%); }
.flow-results i:nth-child(4) { --img: radial-gradient(40% 40% at 65% 60%, #93c4a0, transparent 70%), linear-gradient(170deg, #1d2b2f, #0c0f12); }
/* Develop: each frame fades up from a dark blur, one after another. */
#heroDemo[data-phase="done"] .flow-results i { background: var(--img); animation: flow-develop 1.4s cubic-bezier(.2, .7, .1, 1) both; }
#heroDemo[data-phase="done"] .flow-results i:nth-child(2) { animation-delay: .18s; }
#heroDemo[data-phase="done"] .flow-results i:nth-child(3) { animation-delay: .36s; }
#heroDemo[data-phase="done"] .flow-results i:nth-child(4) { animation-delay: .54s; }
@keyframes flow-develop { from { opacity: 0; filter: blur(10px) brightness(.3); } 50% { opacity: 1; filter: blur(4px) brightness(.75); } to { opacity: 1; filter: none; } }
/* Running: light travels down both connectors into the generator, and its frame warms up. */
.flow-beam { fill: none; stroke: var(--t-beam); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 90; opacity: 0; filter: drop-shadow(0 0 6px var(--t-beam-soft)); }
#heroDemo[data-phase="running"] .flow-beam { opacity: 1; animation: flow-beam 1.1s linear infinite; }
#heroDemo[data-phase="running"] .flow-beam-2 { animation-delay: .35s; }
@keyframes flow-beam { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
#heroDemo[data-phase="running"] .flow-gen { border-color: var(--t-accent-line); box-shadow: 0 0 0 1px var(--t-accent-soft), 0 0 50px -12px var(--t-beam-soft), var(--t-shadow-md); }
#heroDemo[data-phase="running"] .flow-results i { background: linear-gradient(100deg, var(--t-screen) 30%, var(--t-beam-soft) 50%, var(--t-screen) 70%) 0 0 / 300% 100%; animation: flow-warm 1.2s linear infinite; }
@keyframes flow-warm { to { background-position: -150% 0; } }
#heroDemo[data-phase="reset"] .flow-results i { transition: opacity .4s; opacity: 0; }
.demo-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--t-accent); }
#heroDemo:not([data-phase="typing"]) .demo-caret { opacity: 0; }
#heroDemo[data-phase="typing"] .demo-caret { animation: flow-caret .9s steps(1) infinite; }
@keyframes flow-caret { 50% { opacity: 0; } }
.flow-node { transition: border-color .3s, box-shadow .3s; }

/* ---------- Sections ---------- */
.flow-section, .showcase-section, .agent-section { padding: clamp(80px, 11vw, 140px) 0; border-top: 1px solid var(--t-line); }
.brand-page h2 { max-width: 16em; margin: 0; color: var(--t-text); font-family: var(--t-font-display); font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1.3; letter-spacing: .04em; }
.brand-page h3 { margin: 0 0 10px; color: var(--t-text); font-size: 18px; font-weight: 600; }
.brand-page p { color: var(--t-text-2); font-size: 16px; line-height: 1.8; }

/* A real four-step sequence, so the steps are numbered. */
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 64px 0 0; padding: 0; list-style: none; counter-reset: step; }
.flow-steps li { position: relative; padding-top: 56px; counter-increment: step; }
.flow-steps li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--t-accent-line); border-radius: 50%; color: var(--t-accent-hover); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-steps li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 46px; right: -20px; height: 1px; background: var(--t-line-strong); }
.flow-steps p { margin: 0; font-size: 15px; }

.showcase-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.showcase-copy p { max-width: 28em; margin: 24px 0 0; }
.showcase-points { margin: 28px 0 0; padding: 0; list-style: none; }
.showcase-points li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--t-line); color: var(--t-text); font-size: 15px; line-height: 1.6; }
.showcase-points li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); }
.showcase-figure { margin: 0; padding: 12px; border: 1px solid var(--t-line-strong); border-radius: 6px; background: var(--t-panel); box-shadow: var(--t-shadow-lg); }
.showcase-figure img { width: 100%; aspect-ratio: 16 / 10; border-radius: 3px; object-fit: cover; object-position: left top; }

.agent-section { background: var(--t-panel); }
.agent-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.agent-layout p { max-width: 30em; margin: 0; }

.closing-section { padding: clamp(72px, 9vw, 112px) 0; border-top: 1px solid var(--t-line); }
.closing-layout { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.site-footer { padding: 28px 0 36px; border-top: 1px solid var(--t-line); color: var(--t-text-3); font-size: 13px; }
.site-footer .section-inner { display: flex; justify-content: space-between; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }
  .hero-title br { display: none; }
  .flow-steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .flow-steps li:nth-child(2)::after { display: none; }
  .showcase-layout, .agent-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .section-inner, .site-header, .hero { width: calc(100% - 40px); }
  .site-header { height: 64px; gap: 16px; }
  .site-nav { display: none; }
  .site-header-actions { margin-left: auto; }
  .hero-title { font-size: clamp(44px, 13vw, 60px); }
  .hero-lede { font-size: 16px; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps li::after { display: none; }
  .closing-layout { flex-direction: column; align-items: flex-start; }
  /* Phones: the diagram keeps its shape; only the first line of the prompt shows. */
  .hero-scroll { padding: 12px; }
  .flow-node { padding: 8px 9px; border-radius: 8px; }
  .flow-kind { margin-bottom: 4px; font-size: 11px; }
  .flow-node p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; line-height: 1.45; }
  .flow-prompt, .flow-ref { width: 34%; }
  .flow-gen { left: 54%; width: 40%; }
  .flow-gen small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow-line { animation: none; stroke-dashoffset: 0; }
}
/* Before the demo starts (or with reduced motion) the finished sheet is shown. */
#heroDemo:not([data-phase]) .flow-results i { background: var(--img); }
@media (prefers-reduced-motion: reduce) {
  .flow-results i { background: var(--img) !important; animation: none !important; }
}