/* The AI guide (/ai-guide). Builds on css/site.css. Each idea gets its own band:
   one heading, a sentence or two, and one visual. Copper marks steps AI handles, nowhere else. */

/* ── Bands ── */
.g-part, .g-slide { padding: var(--sr-section-y) var(--pad-x); --pad-x: max(var(--sr-gutter), calc((100% - var(--sr-max)) / 2 + var(--sr-gutter))); }
.g-part { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sr-col-gap); row-gap: 48px; align-items: center; min-height: 100vh; }
.g-part-head { grid-column: span 6; display: flex; flex-direction: column; gap: 20px; }
.g-part-num { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); padding: 8px 14px; border: 1.5px solid var(--fg); align-self: flex-start; }
.g-part-title { font-weight: 600; font-size: 88px; line-height: 1; letter-spacing: -0.035em; }
.g-contents { grid-column: 8 / span 5; list-style: none; margin: 0; padding: 0; border-top: var(--sr-rule) solid var(--rule-c); }
.g-contents li { border-bottom: 1px solid var(--line-c); }
.g-contents a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; padding: 13px 0; font-size: 18px; text-decoration: none; color: var(--fg); }
.g-contents a span { font-size: 14px; font-weight: 700; color: var(--muted); }
.g-contents a:hover { text-decoration: underline; text-underline-offset: 4px; }
.g-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.g-edition { font-size: 15px; color: var(--text); }
.g-edition a { color: var(--fg); text-underline-offset: 4px; }
.g-edition a[aria-current] { font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--fg); }
.g-slide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sr-col-gap); row-gap: 40px; align-items: center; min-height: 86vh; }
.g-copy { grid-column: span 5; display: flex; flex-direction: column; gap: 20px; }
.g-visual { grid-column: 7 / span 6; }
.g-slide.flip .g-copy { grid-column: 8 / span 5; grid-row: 1; }
.g-slide.flip .g-visual { grid-column: 1 / span 6; grid-row: 1; }
.g-num { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--muted); }
.g-copy .body a { color: var(--fg); text-underline-offset: 3px; }
.v-note { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Shared node styles (person = outline, AI = copper, outcome = solid) */
.n-person { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.n-ai { fill: var(--sr-copper); }
.n-outcome { fill: var(--fg); }
.v-link { stroke: var(--rule-c); stroke-width: 1.5; fill: none; }
.node, .dot { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--fg); background: var(--bg); }
.node.ai, .dot.ai { background: var(--sr-copper); border-color: var(--sr-copper); }
.node.outcome, .dot.outcome { background: var(--fg); }

/* 01 Nested circles */
.v-nest { width: 100%; height: auto; overflow: visible; }
.v-nest circle { fill: none; stroke: var(--rule-c); stroke-width: 1.5; }
.v-nest .core circle { fill: var(--sr-copper); stroke: var(--sr-copper); }
.v-nest text { font: 600 15px var(--sr-font); fill: var(--fg); text-anchor: middle; }
.v-nest .core text { fill: var(--sr-navy); }

/* 02 Two lists */
.v-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sr-col-gap); }
.v-list { border-top: var(--sr-rule) solid var(--rule-c); }
.v-list-head { padding: 14px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.v-item { padding: 14px 0; border-top: 1px solid var(--line-c); font-size: 17px; line-height: 1.45; }
.v-list.warn .v-item { color: var(--text); }

/* 03 Flows */
.v-flows, .v-agent { width: 100%; height: auto; overflow: visible; }
.v-flow-label { font: 600 12px var(--sr-font); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--muted); }
.v-cap { font: 400 14px var(--sr-font); fill: var(--text); text-anchor: middle; }
.v-loop { fill: none; stroke: var(--sr-copper); stroke-width: 1.5; stroke-dasharray: 4 5; }

/* 04 and 16 Steps */
.v-steps { list-style: none; margin: 0; padding: 0; border-top: var(--sr-rule) solid var(--rule-c); }
.v-steps li { display: grid; grid-template-columns: 34px 130px minmax(0, 1fr); align-items: start; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-c); font-size: 17px; line-height: 1.45; }
.v-steps li .dot { margin-top: 3px; }
.v-steps .lane { padding-top: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.v-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 16px; font-size: 14px; color: var(--text); }
.v-legend span { display: inline-flex; align-items: center; gap: 8px; }
.v-legend .dot { width: 14px; height: 14px; }

/* 05 Cost stack */
.v-stack { display: flex; flex-direction: column; gap: 10px; }
.v-block { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1.5px solid var(--rule-c); }
.v-block strong { font-size: 19px; }
.v-block span { font-size: 15px; line-height: 1.5; color: var(--text); }
.v-block:first-child { background: var(--fg); color: var(--bg); }
.v-block:first-child span { color: var(--bg); opacity: 0.8; }

/* 06 Timeline */
.v-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; position: relative; }
.v-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1.5px; background: var(--rule-c); transform-origin: left; }
.v-week { position: relative; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--text); }
.v-week strong { color: var(--fg); font-size: 17px; }
.v-week .node { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 8px; }

/* 07 Rules */
.v-rules { border-top: var(--sr-rule) solid var(--rule-c); }
.v-rule { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-c); }
.v-rule .node { margin-top: 4px; }
.v-rule div { display: flex; flex-direction: column; gap: 6px; }
.v-rule strong { font-size: 19px; }
.v-rule span { font-size: 15px; line-height: 1.55; color: var(--text); }

/* 08 Tokens */
.v-tokens { display: flex; flex-direction: column; gap: 14px; }
.v-tokens-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.v-tokens-input { width: 100%; height: 56px; padding: 0 16px; font: 400 20px var(--sr-font); color: var(--fg); background: transparent; border: 1.5px solid var(--rule-c); border-radius: 0; }
.v-tokens-input:focus { outline: 2px solid var(--fg); outline-offset: 2px; }
.v-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 100px; align-content: flex-start; }
.v-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; font-size: 18px; border: 1px solid var(--muted); white-space: pre; }
.v-chip:nth-child(even) { background: var(--line-c); }
.v-chips .v-count { flex-basis: 100%; font-size: 14px; color: var(--muted); margin-top: 6px; }

/* 09 Prediction */
.v-predict-text { font-size: 30px; font-weight: 600; line-height: 1.3; min-height: 80px; }
.v-predict-text .caret { display: inline-block; width: 3px; height: 1em; margin-left: 4px; vertical-align: -0.12em; background: var(--sr-copper); }
.v-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; border-top: var(--sr-rule) solid var(--rule-c); padding-top: 20px; }
.v-bar { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; column-gap: 16px; font-size: 17px; }
.v-bar i { display: block; height: 14px; background: var(--line-c); transform-origin: left; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease; }
.v-bar.pick i { background: var(--sr-copper); }
.v-bar.pick span { font-weight: 600; }

/* 10 Pipeline, 13 Retrieval */
.v-pipeline, .v-rag { border-top: var(--sr-rule) solid var(--rule-c); }
.v-stage, .v-rag-step { display: grid; grid-template-columns: 34px 220px minmax(0, 1fr); align-items: start; column-gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-c); }
.v-rag-step { grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr); }
.v-stage strong, .v-rag-step strong { font-size: 18px; }
.v-stage span:last-child, .v-rag-step span:last-child:not(.node) { font-size: 15px; line-height: 1.5; color: var(--text); }
.v-stage .node, .v-rag-step .node { margin-top: 3px; }
.v-stage span:last-child, .v-rag-step span:last-child:not(.node) { padding-top: 2px; }

/* 11 Context window */
.v-ctx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); column-gap: 20px; align-items: end; }
.v-ctx-out, .v-ctx-win { display: flex; flex-direction: column; gap: 10px; }
.v-ctx-win { padding: 18px; border: 2px solid var(--sr-copper); }
.v-ctx-label, .v-ctx-cap { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.v-ctx-label { color: var(--sr-copper-text); }
.v-ctx-cap { color: var(--muted); }
.v-ctx-note { font-size: 14px; color: var(--text); }
.v-pages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.v-pages.faded { grid-template-columns: repeat(2, minmax(0, 1fr)); opacity: 0.35; }
.v-pages i { position: relative; display: block; aspect-ratio: 3 / 4; border: 1px solid var(--muted); background: var(--bg); }
.v-pages i::before, .v-pages i::after { content: ""; position: absolute; left: 18%; right: 18%; height: 1.5px; background: var(--line-c); }
.v-pages i::before { top: 28%; }
.v-pages i::after { top: 46%; right: 34%; }
/* Start and end of the window are used most reliably: stronger tiles there, quieter ones in the middle */
.v-ctx-win .v-pages i { border-color: var(--sr-mist); transition: border-color 0.6s ease, background-color 0.6s ease; }
.v-ctx-win .v-pages i.edge { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, var(--bg)); }
.v-ctx-win .v-pages i.edge::before, .v-ctx-win .v-pages i.edge::after { background: var(--sr-mist); }
.v-ctx-win .v-pages i.new { outline: 1.5px solid var(--fg); outline-offset: 2px; }
.v-ctx-out .v-pages { transition: opacity 0.5s ease; }
.v-ctx-out .v-pages.took { opacity: 0.6; }
.v-ctx-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--text); }
.v-ctx-key span { display: inline-flex; align-items: center; gap: 8px; }
.v-ctx-key b { display: inline-block; width: 12px; height: 16px; border: 1px solid var(--sr-mist); background: var(--bg); }
.v-ctx-key b.edge { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, var(--bg)); }

/* 12 Made-up answer */
.v-answer { display: flex; flex-direction: column; gap: 18px; }
.v-q { padding: 18px 20px; border: 1.5px solid var(--rule-c); font-size: 17px; }
.v-a { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; border-left: 1px solid var(--line-c); font-size: 18px; line-height: 1.5; }
.v-a .made { position: relative; padding: 8px 10px; outline: 1.5px dashed var(--sr-copper); }
.v-a .made em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--sr-mist); }

/* 14 Agent loop */
.v-agent-ring { fill: none; stroke: var(--rule-c); stroke-width: 1.5; }
.v-agent text { font: 600 14px var(--sr-font); fill: var(--fg); text-anchor: middle; }
.v-agent-dot { fill: var(--fg); }

/* 15 Prompt */
.v-prompt { border: 1.5px solid var(--rule-c); }
.v-part { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 16px; padding: 18px 20px; border-top: 1px solid var(--line-c); font-size: 17px; line-height: 1.5; }
.v-part:first-child { border-top: 0; }
.v-part .tag { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }

/* Summary */
.g-summary { min-height: auto; }
.v-summary .v-item { font-size: 20px; padding: 18px 0; }
.v-summary { border-top: var(--sr-rule) solid var(--rule-c); }

/* Progress rail */
.g-rail { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 10px; }
.g-rail a { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sr-mist); background: transparent; }
.g-rail a.on { background: var(--sr-copper); border-color: var(--sr-copper); }
.g-rail a.part { border-radius: 0; }

/* ── Motion: visuals build when their band scrolls into view ── */
.motion .g-slide .v-nest-ring { opacity: 0; transform: scale(0.85); transform-origin: 260px 400px; transform-box: view-box; transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i) * 0.35s); }
.motion .g-slide.in .v-nest-ring { opacity: 1; transform: none; }
.motion .g-slide .v-item, .motion .g-slide .v-steps li, .motion .g-slide .v-block, .motion .g-slide .v-week, .motion .g-slide .v-rule, .motion .g-slide .v-stage, .motion .g-slide .v-rag-step, .motion .g-slide .v-part, .motion .g-slide .v-flow, .motion .g-slide .v-agent-node, .motion .g-slide .v-a .line { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 0.18s + 0.2s); }
.motion .g-slide .v-flow, .motion .g-slide .v-agent-node { transform: none; }
.motion .g-slide.in .v-item, .motion .g-slide.in .v-steps li, .motion .g-slide.in .v-block, .motion .g-slide.in .v-week, .motion .g-slide.in .v-rule, .motion .g-slide.in .v-stage, .motion .g-slide.in .v-rag-step, .motion .g-slide.in .v-part, .motion .g-slide.in .v-flow, .motion .g-slide.in .v-agent-node, .motion .g-slide.in .v-a .line { opacity: 1; transform: none; }
.motion .g-slide .v-a .line { transition-delay: calc(var(--i) * 0.6s + 0.3s); }
.motion .g-slide .v-a .made { outline-color: transparent; transition: outline-color 0.4s ease 2.2s, opacity 0.6s ease 0.9s, transform 0.7s ease 0.9s; }
.motion .g-slide.in .v-a .made { outline-color: var(--sr-copper); }
.motion .g-slide .v-a .made em { opacity: 0; transition: opacity 0.4s ease 2.4s; }
.motion .g-slide.in .v-a .made em { opacity: 1; }
.motion .g-slide .v-timeline::before { transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; }
.motion .g-slide.in .v-timeline::before { transform: none; }
.motion .g-slide .v-ctx-win .v-pages i { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.5s ease; transition-delay: calc(var(--i) * 45ms + 0.3s); }
.motion .g-slide.in .v-ctx-win .v-pages i { opacity: 1; transform: none; }
/* Once the loop starts, guide.js drives movement with inline transitions */
.motion .g-slide.in .v-ctx-win .v-pages.live i { transition: border-color 0.6s ease, background-color 0.6s ease; transition-delay: 0s; }
.motion .g-part .g-contents li { opacity: 0; transform: translateX(-10px); transition: opacity 0.5s ease, transform 0.6s ease; transition-delay: calc(var(--i) * 70ms + 0.3s); }
.motion .g-part.in .g-contents li { opacity: 1; transform: none; }
.motion .g-slide.in .v-agent-dot { animation: v-orbit 6s linear 1.2s infinite; transform-box: view-box; transform-origin: 200px 200px; }
@keyframes v-orbit { to { transform: rotate(360deg); } }
.motion .v-predict-text .caret { animation: v-blink 1s steps(1) infinite; }
@keyframes v-blink { 50% { opacity: 0; } }

/* ── Smaller screens ── */
@media (max-width: 1100px) {
  .g-rail { display: none; }
  .g-copy, .g-slide.flip .g-copy { grid-column: span 12; grid-row: auto; }
  .g-visual, .g-slide.flip .g-visual { grid-column: span 12; grid-row: auto; max-width: 680px; }
  .g-slide { min-height: auto; }
  .g-part-title { font-size: 64px; }
  .g-part-head, .g-contents { grid-column: span 12; }
  .g-part { min-height: auto; }
}
@media (max-width: 767px) {
  .g-part-title { font-size: 44px; }
  .v-ctx { grid-template-columns: 1fr; row-gap: 16px; }
  .v-pages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .v-pages.faded { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-num { font-size: 44px; }
  .v-two { grid-template-columns: 1fr; row-gap: 24px; }
  .v-steps li { grid-template-columns: 28px minmax(0, 1fr); row-gap: 2px; }
  .v-steps li .dot { grid-row: span 2; }
  .v-timeline { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .v-timeline::before { display: none; }
  .v-stage, .v-rag-step { grid-template-columns: 28px minmax(0, 1fr); row-gap: 4px; }
  .v-stage span:last-child, .v-rag-step span:last-child:not(.node) { grid-column: 2; }
  .v-part { grid-template-columns: 1fr; row-gap: 4px; }
  .v-bar { grid-template-columns: 100px minmax(0, 1fr); }
  .v-predict-text { font-size: 24px; }
}

.print-only { display: none !important; }

/* ── Print and PDF: one band per landscape page, every visual in its finished state ── */
@media print {
  @page { size: 11in 8.5in; margin: 0; }
  html, body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .mobile-menu, .footer, .g-rail, .cta-row, #talk { display: none !important; }
  .hero, .g-part, .g-slide { min-height: 0; height: 8.5in; break-after: page; break-inside: avoid; padding: 0.7in 0.8in; }
  .hero { display: grid; align-items: center; }
  .g-slide { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .g-copy, .g-slide.flip .g-copy { grid-column: 1 / span 5; grid-row: 1; }
  .g-visual, .g-slide.flip .g-visual { grid-column: 7 / span 6; grid-row: 1; max-width: none; }
  .motion .reveal, .reveal { opacity: 1 !important; transform: none !important; }
  .g-slide *, .g-slide *::before { transition: none !important; animation: none !important; }
  .motion .g-slide .v-nest-ring, .motion .g-slide .v-item, .motion .g-slide .v-steps li, .motion .g-slide .v-block, .motion .g-slide .v-week, .motion .g-slide .v-rule, .motion .g-slide .v-stage, .motion .g-slide .v-rag-step, .motion .g-slide .v-part, .motion .g-slide .v-flow, .motion .g-slide .v-agent-node, .motion .g-slide .v-a .line, .motion .g-slide .v-a .made em { opacity: 1 !important; transform: none !important; }
  .motion .g-slide .v-timeline::before { transform: none !important; }
  .motion .g-part .g-contents li, .motion .g-slide .v-ctx-win .v-pages i { opacity: 1 !important; transform: none !important; }
  .g-part { border-top: 0; }
  .g-part-head { grid-column: 1 / span 6; }
  .g-contents { grid-column: 8 / span 5; }
  .g-edition { display: none; }
  .motion .g-slide .v-a .made { outline-color: var(--sr-copper) !important; }
  .rule-draw::before { transform: none !important; }
  .print-only { display: grid !important; }
  .v-tokens-input { display: none; }
  .v-predict-text .caret { display: none; }
  /* Chrome lays print out at a narrow width, so restore the desktop layout of each visual */
  .h1 { font-size: 52px; }
  .h2 { font-size: 34px; line-height: 1.15; }
  .g-num { font-size: 48px; }
  .g-part-title { font-size: 64px; }
  .v-two { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .v-steps li { grid-template-columns: 34px 130px minmax(0, 1fr); }
  .v-steps li .dot { grid-row: auto; }
  .v-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v-timeline::before { display: block; }
  .v-stage { grid-template-columns: 34px 200px minmax(0, 1fr); }
  .v-rag-step { grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr); }
  .v-stage span:last-child, .v-rag-step span:last-child:not(.node) { grid-column: auto; }
  .v-part { grid-template-columns: 110px minmax(0, 1fr); }
  .v-bar { grid-template-columns: 140px minmax(0, 1fr); }
  .v-predict-text { font-size: 26px; }
  .v-ctx { grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); }
  .v-pages { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .v-pages.faded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}