/* Hopbyte v4. Company offerings within Sapphire. */
.hero-console-stage { position: relative; min-width: 0; width: 100%; }
.hero-console-stage::before { content: ""; position: absolute; inset: -12% -18% -18% -16%; z-index: 0; pointer-events: none; border-radius: 42%; filter: blur(38px); background: radial-gradient(55% 50% at 74% 20%, rgba(47,107,255,.62), transparent 70%), radial-gradient(48% 46% at 16% 88%, rgba(56,189,248,.42), transparent 70%); }
.hero-console-stage .agent-console { position: relative; z-index: 1; }
.tile { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 14px; }
.tile::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--glass-hi); pointer-events: none; }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-bottom { position: relative; }

/* Each solution is one compact spread: identity and UI opposite buyer copy. */
.solutions { background: radial-gradient(900px 600px at 94% 4%, rgba(47,107,255,.12), transparent 60%), radial-gradient(900px 700px at 0% 60%, rgba(56,189,248,.08), transparent 60%), var(--paper); }
.solutions .section-head { margin-bottom: 64px; }
.solutions .section-head h2 { max-width: 20ch; }
.solutions-layout { display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 42px; align-items: start; }
.solution-index { position: sticky; top: 114px; display: grid; padding: 6px 0; }
.solution-index > .mono { margin: 0 0 20px 12px; font-size: 0.66rem; }
.solution-index a { display: flex; gap: 10px; position: relative; padding: 11px 12px; border-left: 1px solid var(--line-2); font-size: .76rem; color: var(--copy); }
.solution-index a span { font: 0.66rem/2.2 var(--mono); color: var(--muted); }
.solution-index a::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 2px; background: var(--vermilion); opacity: 0; transition: opacity .2s; }
.solution-index a[aria-current] { color: var(--accent-text); background: var(--glass-inner-2); }
.solution-index a[aria-current]::before { opacity: 1; }
.solution-index a:hover { color: var(--ink); }
.solution-list { min-width: 0; }
.solution-block { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); grid-template-areas: "identity copy" "panel copy"; column-gap: clamp(28px,3vw,48px); row-gap: 24px; padding: 0 0 68px; scroll-margin-top: 112px; position: relative; }
.solution-block::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 56%; height: 72%; bottom: -4%; border-radius: 42%; filter: blur(46px); opacity: .6; background: radial-gradient(60% 55% at 50% 50%, rgba(47,107,255,.62), transparent 72%); }
.solution-block:nth-child(odd)::before { left: -8%; pointer-events: none; }
.solution-block:nth-child(even)::before { right: -8%; background: radial-gradient(60% 55% at 50% 50%, rgba(56,189,248,.42), transparent 72%); pointer-events: none; }
.solution-block > * { position: relative; z-index: 1; }
.solution-block + .solution-block { padding-top: 68px; border-top: 1px solid var(--line-2); }
.solution-block:last-child { padding-bottom: 0; }
.solution-block:nth-child(even) { grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); grid-template-areas: "copy identity" "copy panel"; }
.solution-identity { grid-area: identity; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; }
.solution-heading { min-width: 0; }
.solution-heading > .mono { font-size: 0.66rem; }
.solution-heading h3 { font-size: clamp(2.25rem,3.2vw,3.25rem); letter-spacing: -.055em; line-height: 1; margin: 12px 0; }
.solution-category { font: 0.66rem/1.65 var(--mono); color: var(--dim); max-width: 27ch; }
.solution-tile { width: clamp(88px,9vw,120px); max-width: 160px; flex-shrink: 0; }
.solution-copy { grid-area: copy; align-self: center; min-width: 0; }
.solution-description { color: var(--copy); font-size: 1rem; line-height: 1.75; }
.solution-copy .agent-does { font-size: .88rem; gap: 12px; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.runs-inside { display: grid; gap: 12px; }
.tool-chips, .runtime-guardrails { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.tool-chips li, .runtime-guardrails li { font: 0.66rem/1.5 var(--mono); border: 1px solid var(--glass-border); border-radius: 5px; padding: 6px 8px; color: var(--copy); background: var(--glass-inner); }
.solution-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 28px; }
.solution-actions .btn { padding: 13px 15px; font-size: 0.66rem; }
.solution-actions .text-link { font-size: 0.66rem; }

/* Illustrations use real HTML and retain their final state without animation. */
.solution-panel { grid-area: panel; border-radius: 14px; overflow: hidden; font: 0.66rem/1.6 var(--mono); min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 0.66rem; }
.panel-heading > span:first-child { display: flex; align-items: center; gap: 8px; }
.panel-heading i { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.panel-caption { color: var(--dim); font-size: 0.66rem; }
.panel-body { padding: 18px; }
.panel-body h4 { font: 700 .95rem/1.35 var(--display); letter-spacing: -.02em; margin: 8px 0; }
.panel-body p { color: var(--copy); }
.ui-label { font: 0.66rem/1.5 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .045em; }
.panel-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 6px 16px; background: var(--glass-inner); border-top: 1px solid var(--line); font-size: 0.66rem; color: var(--muted); }
.panel-replay { border: 0; padding: 8px 0 8px 10px; min-height: 32px; font: 0.66rem var(--mono); color: var(--vermilion-2); background: transparent; cursor: pointer; }
.panel-replay:hover { color: var(--text); }
.alert-queue { list-style: none; margin: 0; padding: 0; }
.alert-queue li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.66rem; }
.alert-queue li:first-child { padding-top: 0; }
.alert-queue small { display: block; color: var(--muted); font-size: 0.66rem; margin-top: 3px; }
.severity { display: inline-flex; justify-content: center; min-width: 48px; padding: 3px 5px; border: 1px solid var(--glass-border); border-radius: 4px; font-size: 0.66rem; background: var(--glass-inner); }
.severity-high { color: var(--vermilion-2); }
.severity-medium { color: var(--accent-text); }
.severity-low { color: var(--muted); }
.queue-id { margin-left: auto; font-size: 0.66rem; color: var(--dim); }
.panel-body .correlation { padding: 16px 0; font-size: .78rem; }
.correlation strong { font-weight: 400; color: var(--vermilion-2); }
.action-proposal, .request-card, .model-card { padding: 15px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; }
.action-proposal > p { font-size: 0.66rem; }
.approval-status { display: grid; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.66rem; }
.approval-status > span { grid-area: 1 / 1; }
.status-waiting { opacity: 0; color: var(--muted); }
.status-approved { color: var(--vermilion-2); }
.audit-line { font-size: 0.66rem; margin-top: 14px; }
.audit-line > span { color: var(--vermilion-2); }
.request-card dl { display: grid; grid-template-columns: 1.1fr .7fr 1.3fr; gap: 8px; margin: 16px 0 0; }
.request-card dt { font-size: 0.66rem; color: var(--dim); }
.request-card dd { margin: 4px 0 0; font-size: 0.66rem; }
.provision-pipeline { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; list-style: none; padding: 28px 0; margin: 0; }
.provision-pipeline::before { content: ""; position: absolute; height: 1px; background: var(--line-2); top: 42px; left: 10%; right: 10%; }
.provision-pipeline li { display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; font-size: 0.66rem; }
.pipeline-node { display: grid; position: relative; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); }
.pipeline-lit { display: grid; position: absolute; inset: -1px; place-items: center; border-radius: 50%; color: var(--paper); background: var(--vermilion-2); font-style: normal; }
.provision-output { padding: 15px; border: 1px solid var(--line); border-radius: 8px; }
.provision-output ul { list-style: none; padding: 12px 0; margin: 0; display: grid; gap: 6px; font-size: 0.66rem; }
.provision-output li > span { color: var(--vermilion-2); margin-right: 6px; }
.panel-body .ui-status { color: var(--vermilion-2); font-size: 0.66rem; }
.chart-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.chart-key { color: var(--vermilion-2); font-size: 0.66rem; }
.spend-bars { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 7px; height: 130px; padding: 0; margin: 14px 0 18px; list-style: none; }
.spend-month { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: center; color: var(--muted); font-size: 0.66rem; }
.spend-track { flex: 1; position: relative; border-bottom: 1px solid var(--line-2); }
.spend-bar, .spend-saved { position: absolute; inset: 0; border-radius: 3px 3px 0 0; transform-origin: bottom; }
.spend-bar { background: #3C4A6E; transform: scaleY(var(--level)); }
.spend-saved { background: var(--vermilion); transform: scaleY(var(--after)); }
.has-saving .spend-bar { opacity: 0; }
.sizing-table { table-layout: fixed; font-size: 0.66rem; }
.sizing-table caption { text-align: left; font-size: 0.66rem; text-transform: uppercase; color: var(--muted); padding: 6px 0 10px; }
.sizing-table th, .sizing-table td { padding: 9px 5px 9px 0; border-bottom: 1px solid var(--line); font-weight: 400; overflow-wrap: anywhere; }
.sizing-table thead { color: var(--muted); font-size: 0.66rem; }
.sizing-table td:last-child { color: var(--vermilion-2); }
.panel-body .governance-chip { padding: 10px 12px; border: 1px solid var(--glass-border); background: var(--glass-inner); border-radius: 5px; font-size: 0.66rem; margin-top: 16px; color: var(--vermilion-2); }
.chat-thread { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; }
.chat-message { padding: 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.66rem; }
.chat-message p { margin-top: 8px; }
.chat-request { margin-left: 30px; background: var(--panel-2); }
.chat-agent { margin-right: 18px; background: var(--panel); }
.chat-agent .ui-label { color: var(--vermilion-2); }
.chat-source { display: block; margin-top: 12px; color: var(--dim); font-size: 0.66rem; }
.ticket-message { margin-right: 18px; border-left: 2px solid var(--vermilion); }
.filed-status { padding-top: 16px; }
.model-card > p { font-size: 0.66rem; }
.vpc-badge { display: inline-flex; color: var(--vermilion-2); border: 1px solid var(--glass-border); border-radius: 4px; padding: 5px 8px; margin-top: 15px; font-size: 0.66rem; background: var(--glass-inner); }
.evaluation-suite { margin-top: 20px; }
.eval-legend { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 14px; font-size: 0.66rem; color: var(--muted); }
.eval-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; background: #3C4A6E; margin-right: 6px; }
.eval-legend span:last-child::before { background: var(--vermilion); }
.eval-row { display: grid; grid-template-columns: 115px minmax(0,1fr); gap: 14px; margin-bottom: 17px; align-items: center; font-size: 0.66rem; }
.eval-pair { display: grid; gap: 5px; }
.eval-track { display: block; height: 5px; border-radius: 2px; background: var(--panel-2); }
.eval-track > i { display: block; height: 100%; width: 100%; border-radius: 2px; transform: scaleX(var(--score)); transform-origin: left; background: #3C4A6E; }
.eval-track > .eval-tuned { background: var(--vermilion); }
.eval-note { font-size: 0.66rem; padding-top: 4px; }
.briefing-agenda { list-style: none; margin: 0; padding: 0; }
.briefing-agenda li { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px; padding: 0 0 20px; }
.briefing-agenda li::before { content: ""; position: absolute; left: 53px; top: 5px; bottom: 0; width: 1px; background: var(--line-2); }
.briefing-agenda li:last-child::before { bottom: 20px; }
.agenda-time { color: var(--vermilion-2); font-size: 0.66rem; margin-top: 3px; }
.briefing-agenda h4 { margin: 0 0 5px; }
.briefing-agenda p { font-size: 0.66rem; }
.briefing-outcomes { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.briefing-outcomes ul { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; margin: 12px 0 0; list-style: none; font-size: 0.66rem; }
.outcome-check { color: var(--vermilion-2); display: inline-block; margin-right: 4px; }

/* Six layered rails describe a shared standard, not another offering. */
.platform { background: radial-gradient(900px 500px at 50% 0%, rgba(47,107,255,.10), transparent 60%), var(--tint); border-block: 1px solid var(--line); }
.runtime-intro h3 { font-size: 1.3rem; margin-bottom: 12px; }
.runtime-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 64px; align-items: center; }
.runtime-layers { display: grid; list-style: none; margin: 0; padding: 0; gap: 8px; }
.runtime-layer { position: relative; display: grid; grid-template-columns: 26px minmax(0,1fr) 10px; gap: 16px; align-items: center; padding: 19px 22px; border-radius: 8px; overflow: hidden; }
.layer-rule { position: absolute; bottom: 0; height: 2px; left: 0; right: 0; background: var(--vermilion); transform-origin: left; opacity: .7; }
.layer-index { font: 0.66rem var(--mono); color: var(--accent-text); }
.runtime-layer h3 { font-size: 1rem; line-height: 1.4; }
.runtime-layer p { color: var(--copy); font-size: .77rem; line-height: 1.55; margin-top: 4px; }
.layer-port { width: 6px; height: 6px; border: 1px solid var(--vermilion); border-radius: 50%; }
.runtime-visual { min-width: 0; }
.runtime-object { aspect-ratio: 3 / 2; }
.runtime-visual > .mono { margin-top: 28px; text-align: center; font-size: 0.66rem; line-height: 1.9; }
.runtime-guardrails { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line-2); gap: 10px; }
.runtime-guardrails li { padding: 9px 12px; font-size: 0.66rem; }

/* Production evidence and the operating belief form one continuous dark band. */
.results-note { margin-top: 24px; text-transform: none; line-height: 1.8; letter-spacing: .015em; font-size: 0.66rem; }
.standard-quote { position: relative; margin: 42px 0 0 auto; border-radius: 14px; padding: 30px 34px; max-width: 760px; color: var(--ink); }
.standard-quote::before { content: "“"; color: var(--vermilion-2); font-size: 3.5rem; font-weight: 800; line-height: .8; }
.standard-quote blockquote { margin: 14px 0 22px; font-size: 1.3rem; line-height: 1.45; letter-spacing: -.025em; }
.standard-quote figcaption { font: 0.66rem/1.6 var(--mono); color: var(--dim); }
.safe-way { padding-top: 0; }
.safe-way > .container { border-top: 1px solid var(--line-2); padding-top: clamp(60px,7vw,96px); }
.safe-way .section-head h2 { max-width: 22ch; }
.guardrail-item .v4-check { fill: none; stroke: var(--vermilion-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.manifesto-visual { min-width: 0; max-width: 460px; justify-self: center; width: 100%; }
.manifesto-visual > .mono { display: block; text-align: center; margin-top: 26px; color: var(--dim); font-size: 0.66rem; }

/* Compact capability links and image-led reading cards. */
.capability-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); background: var(--tint); border-bottom: 1px solid var(--line); }
.capability-links > a { display: flex; align-items: start; gap: 14px; padding: 25px 20px; min-width: 0; transition: border-color .25s, transform .3s var(--ease); }
.capability-links > a > .mono { color: var(--accent-text); font-size: 0.66rem; padding-top: 4px; }
.capability-links h3 { font-size: 1.02rem; line-height: 1.4; }
.capability-links p { margin-top: 6px; font-size: .77rem; line-height: 1.6; color: var(--copy); }
.cap-arrow { margin-left: auto; color: var(--accent-text); font-size: .8rem; }
.capability-links > a:hover h3 { color: var(--ink); }
.insight-art { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 24px; }
.insight-card .insight-meta { margin-bottom: 18px; }
.insight-card h3 a:focus-visible { outline: none; }
.insight-card h3 a:focus-visible::after { outline: 2px solid rgba(56,189,248,.6); outline-offset: 6px; border-radius: 14px; }
.about-company { padding: 0 0 72px; }
.about-company .container { padding-top: 40px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: start; }
.about-company h2 { margin-top: 7px; font-weight: 400; }
.about-company p { font-size: clamp(1.15rem,1.8vw,1.5rem); line-height: 1.6; max-width: 62ch; letter-spacing: -.02em; }

@media (max-width: 1190px) {
  .solutions-layout { grid-template-columns: minmax(0,1fr); }
  .solution-index { display: none; }
  .solution-tile { width: 120px; }
  .solution-heading h3 { font-size: 2.75rem; }
  .runtime-layout { gap: 32px; }
}
@media (max-width: 980px) {
  .hero-console-stage { max-width: 620px; justify-self: center; }
  .solution-tile { width: 92px; }
  .solution-heading h3 { font-size: 2.45rem; }
}
@media (max-width: 880px) {
  .solution-block, .solution-block:nth-child(even) { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 26px; }
  .solution-identity { grid-column: 1 / -1; max-width: none; }
  .solution-block, .solution-block:nth-child(even) { grid-template-areas: "identity identity" "panel copy"; }
  .solution-tile { width: 92px; }
  .solution-heading h3 { font-size: 3rem; }
  .solution-copy { align-self: start; }
  .solution-description { font-size: .9rem; }
  .panel-heading { padding-inline: 14px; font-size: 0.66rem; }
  .panel-body { padding: 14px; }
  .runtime-layout { grid-template-columns: minmax(0,1fr); }
  .runtime-visual { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: center; }
  .runtime-visual > .mono { text-align: left; margin: 0; }
  .capability-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .insight-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
  .insight-card h3 { font-size: 1.18rem; }
  .insight-card p { font-size: .85rem; }
  .insight-meta { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 680px) {
  .solutions .section-head { margin-bottom: 36px; }
  .solution-block, .solution-block:nth-child(even) { grid-template-columns: minmax(0,1fr); grid-template-areas: "identity" "copy" "panel"; row-gap: 24px; padding-bottom: 48px; }
  .solution-block + .solution-block { padding-top: 48px; }
  .solution-heading h3 { font-size: clamp(2.3rem,9vw,3rem); }
  .solution-description { font-size: 1rem; }
  .solution-copy .agent-does { margin: 20px 0; padding-bottom: 20px; }
  .solution-actions { margin-top: 24px; }
  .panel-heading { font-size: 0.66rem; }
  .panel-body { padding: 18px; }
  .capability-links { grid-template-columns: minmax(0,1fr); }
  .capability-links > a { padding-right: 20px; }
  .insight-grid { grid-template-columns: minmax(0,1fr); gap: 42px; }
  .insight-card h3 { font-size: 1.45rem; }
  .insight-card p { font-size: .95rem; }
  .insight-meta { flex-wrap: nowrap; }
  .runtime-layer { padding: 16px; gap: 12px; grid-template-columns: 20px minmax(0,1fr) 6px; }
  .runtime-layer h3 { font-size: .94rem; }
  .runtime-layer p { font-size: .75rem; }
  .runtime-visual { gap: 20px; }
  .runtime-visual > .mono { font-size: 0.66rem; }
  .runtime-guardrails li { font-size: 0.66rem; }
  .standard-quote { padding: 26px; }
  .standard-quote blockquote { font-size: 1.15rem; }
  .about-company .container { grid-template-columns: minmax(0,1fr); gap: 22px; }
}
@media (max-width: 639px) {
  .hero-console-stage::before { inset: -6% -8% -9%; opacity: .7; pointer-events: none; }
  .solutions { background: radial-gradient(460px 440px at 94% 4%, rgba(47,107,255,.09), transparent 60%), radial-gradient(460px 520px at 0% 60%, rgba(56,189,248,.06), transparent 60%), var(--paper); }
  .solution-block::before { width: 70%; height: 52%; bottom: 0; opacity: .42; pointer-events: none; }
  .solution-block:nth-child(odd)::before { left: -3%; pointer-events: none; }
  .solution-block:nth-child(even)::before { right: -3%; pointer-events: none; }
  .platform { background: radial-gradient(460px 360px at 50% 0%, rgba(47,107,255,.08), transparent 60%), var(--tint); }
}
@media (max-width: 360px) {
  .solution-tile { width: 76px; }
  .solution-category { font-size: 0.66rem; }
  .solution-actions { gap: 14px; }
  .panel-heading { font-size: 0.66rem; }
  .panel-body { padding: 14px; }
  .eval-row { grid-template-columns: 100px minmax(0,1fr); gap: 10px; }
  .request-card dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .solution-index a::before { transition: none; }
  .safe-object, .solution-panel, .runtime-layer { transform: none !important; }
}