/* Portfolio-first discovery and the little Street that connects the product.
 * These components use native controls and never request account data. */
#pageroot[data-page="algos"] .al-hero h1 { font-size: clamp(39px,4.4vw,61px); max-width: 16ch; line-height: 1.08; letter-spacing: -.055em; }
#pageroot[data-page="algos"] .al-herotop { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 60px; }
#pageroot[data-page="algos"] #al-flow h2 { max-width: 37ch; }
#pageroot[data-page="algos"] .al-cathd { max-width: none; }
#pageroot[data-page="algos"] .al-catalog-promise { display: block; max-width: 54ch; margin-top: 18px; font-size: clamp(20px,2vw,27px); font-weight: 500; letter-spacing: -.03em; line-height: 1.45; }
#pageroot[data-page="algos"] .al-toll-row { align-items: stretch; }
#pageroot[data-page="algos"] #strategy-explainers { scroll-margin-top: calc(var(--topbarh,78px) + 24px); }
#pageroot[data-page="algos"] .strategy-details { margin-bottom: 18px; font-size: 12px; color: var(--dim); }
#pageroot[data-page="algos"] .strategy-details summary { cursor: pointer; color: var(--ink); font-weight: 600; }
#pageroot[data-page="algos"] .strategy-details p { padding-top: 10px; line-height: 1.8; }
#pageroot .portfolio-showcase { min-width: 0; padding: 25px; border: 1px solid #d7e2d8; border-radius: 26px; background: white; box-shadow: 0 24px 65px -35px #244c3b55; position: relative; }
#pageroot .ps-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--dim); margin-bottom: 18px; }
#pageroot .ps-eyebrow { font-size: 11px; font-weight: 600; }
#pageroot .ps-topline > svg { width: 24px; height: 24px; transform: rotate(-9deg); }
#pageroot .ps-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; border: none; margin: 0 0 25px; padding: 4px; background: var(--panel); border-radius: 12px; min-width: 0; }
#pageroot .ps-choices legend { padding: 0; font-size: 21px; font-weight: 700; letter-spacing: -.035em; margin-bottom: 16px; }
#pageroot .ps-choice { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#pageroot .ps-choices label { padding: 10px 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--dim); border-radius: 8px; cursor: pointer; transition: background .18s,color .18s; }
#pageroot .ps-choice:checked + label { background: var(--ink); color: white; box-shadow: 0 2px 4px #12282115; }
#pageroot .ps-choice:focus-visible + label { outline: 2px solid var(--duck); outline-offset: 3px; }
#pageroot .ps-panel { display: none; }
#pageroot .portfolio-showcase:has(#ps-ai:checked) .ps-panel-ai,
#pageroot .portfolio-showcase:has(#ps-income:checked) .ps-panel-income,
#pageroot .portfolio-showcase:has(#ps-daily:checked) .ps-panel-daily { display: block; animation: ps-reveal .25s ease-out; }
#pageroot .ps-identity { display: flex; gap: 11px; align-items: center; font-size: 12px; font-weight: 600; }
#pageroot .ps-identity small { display: block; font-size: 10px; color: var(--dim); font-weight: 400; margin-top: 5px; }
#pageroot .ps-avatar { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--duck-deep); background: var(--duck-bg); flex: none; }
#pageroot .ps-avatar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#pageroot .ps-example { margin-left: auto; border: 1px solid var(--hair); padding: 4px 7px; border-radius: 6px; color: var(--dim); font-size: 9px; font-weight: 400; }
#pageroot .ps-panel h2 { margin: 23px 0 10px; max-width: 21ch; min-height: 2.4em; font-size: 27px; line-height: 1.2; letter-spacing: -.045em; font-weight: 600; }
#pageroot .ps-description { margin: 0 0 20px; max-width: 45ch; color: var(--dim); font-size: 12px; line-height: 1.8; min-height: 44px; }
#pageroot .ps-basket { border: 1px solid var(--hair); border-radius: 14px; padding: 15px; }
#pageroot .ps-basket-top { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; margin-bottom: 11px; }
#pageroot .ps-basket-top span:last-child { color: var(--faint); }
#pageroot .ps-holding { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 12px; }
#pageroot .ps-holding b { font-weight: 600; }
#pageroot .ps-holding > span:last-child { margin-left: auto; color: var(--dim); font-size: 11px; }
#pageroot .ps-ticker-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--ink); }
#pageroot .ps-mint { background: #dcefe6; }
#pageroot .ps-lime { background: #e8f3c4; }
#pageroot .ps-lavender { background: #e9e6f6; }
#pageroot .ps-agent-note { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--duck-deep); background: #f2f7ed; border-radius: 10px; padding: 12px; margin-top: 12px; line-height: 1.6; }
#pageroot .ps-spark { font-size: 19px; }
#pageroot .ps-explore { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; }
#pageroot .ps-explore span { font-size: 21px; transition: transform .2s; }
#pageroot .ps-explore:hover span { transform: translate(2px,-2px); }
#pageroot .ps-disclosure { font-size: 10px; line-height: 1.7; color: var(--dim); border-top: 1px solid var(--hair); margin: 18px 0 0; padding-top: 14px; }
@keyframes ps-reveal { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

#pageroot[data-page="algos"] .al-street-promise { max-width: 55ch; margin: 16px 0; font-size: clamp(21px,2.3vw,29px); font-weight: 500; letter-spacing: -.035em; line-height: 1.45; text-wrap: balance; }
#pageroot .street-scene { border: 1px solid var(--hair); border-radius: 24px; overflow: hidden; margin: 28px 0; background: #f6f8f3; }
#pageroot .street-scene-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 26px 28px; }
#pageroot .street-sign { background: var(--ink); color: white; border-radius: 8px; border: 4px solid #d9e5d9; box-shadow: 0 0 0 1px #becebf; padding: 8px 17px; font-size: 19px; font-weight: 600; letter-spacing: -.035em; transform: rotate(-3deg); }
#pageroot .street-sign > span { margin-right: 8px; color: var(--public-accent); }
#pageroot .street-route-labels { display: grid; grid-template-columns: 230px 1fr 230px; gap: 24px; padding: 16px 28px; background: #edf2e9; color: var(--dim); font-size: 10px; }
#pageroot .street-lane { display: grid; grid-template-columns: 230px 1fr 230px; gap: 24px; align-items: center; padding: 22px 28px; border-top: 1px solid #e2e9de; }
#pageroot .street-lane-name { display: flex; align-items: center; gap: 12px; }
#pageroot .street-lane-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--hair); background: white; color: var(--duck-deep); }
#pageroot .street-lane-icon svg { width: 24px; height: 24px; }
#pageroot .street-lane:nth-child(-n+2) .street-lane-icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#pageroot .street-lane-name b { font-size: 13px; font-weight: 600; }
#pageroot .street-lane-name small { display: block; color: var(--dim); font-size: 10px; margin-top: 4px; }
#pageroot .street-decision { display: flex; align-items: center; gap: 14px; }
#pageroot .street-rule { color: var(--dim); font-size: 11px; flex: none; }
#pageroot .street-rule > span { color: var(--duck); margin-right: 4px; }
#pageroot .street-road { flex: 1; min-width: 30px; height: 26px; position: relative; border-top: 1px solid #e2e9de; border-bottom: 1px solid #e2e9de; background: repeating-linear-gradient(90deg,#c2d0bd 0 7px,transparent 7px 16px) center / 100% 1px no-repeat; }
#pageroot .street-courier { position: absolute; top: -3px; left: 52%; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #c4d7b6; background: #e7f2ce; border-radius: 9px; box-shadow: 0 3px 5px #17351d0a; }
#pageroot .street-courier svg { width: 17px; height: 17px; }
#pageroot .street-order { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--hair); padding: 12px 14px; border-radius: 10px; font-size: 11px; font-weight: 600; }
#pageroot .street-order-icon { color: var(--duck-deep); font-size: 16px; }
#pageroot .street-destination { display: flex; align-items: center; gap: 15px; margin: 6px 28px 0; padding: 21px; color: white; background: var(--ink); border-radius: 14px; }
#pageroot .street-broker { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); background: #f6f8f0; border-radius: 12px; flex: none; }
#pageroot .street-broker svg { width: 27px; height: 27px; }
#pageroot .street-destination b { font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
#pageroot .street-destination div > span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.6; color: #bdcfc1; }
#pageroot .street-destination-arrow { margin-left: auto; color: var(--public-accent); font-size: 28px; }
#pageroot .street-disclosure { margin: 0; padding: 17px 28px; font-size: 10px; line-height: 1.7; color: var(--dim); }

#pageroot[data-page="algos"] .al-agent-explainer { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 70px; padding: 44px; border-radius: 24px; background: var(--panel); }
#pageroot .al-agent-lede > p { max-width: 44ch; font-size: 15px; line-height: 1.8; color: var(--dim); }
#pageroot .al-agent-lede .public-status { margin-bottom: 22px; }
#pageroot .al-agent-lede a { display: inline-block; margin-top: 15px; color: var(--duck-deep); font-size: 13px; font-weight: 600; }
@media (max-width: 1100px) {
  #pageroot[data-page="algos"] .al-herotop { gap: 32px; }
  #pageroot .street-route-labels, #pageroot .street-lane { grid-template-columns: 190px 1fr 195px; gap: 16px; padding-left: 22px; padding-right: 22px; }
  #pageroot .street-rule { font-size: 10px; }
  #pageroot[data-page="algos"] .al-agent-explainer { gap: 32px; padding: 28px; }
}
@media (max-width: 760px) {
  #pageroot[data-page="algos"] .al-herotop, #pageroot[data-page="algos"] .al-agent-explainer { grid-template-columns: minmax(0,1fr); gap: 32px; }
  #pageroot[data-page="algos"] .al-hero h1 { max-width: 17ch; font-size: clamp(38px,8vw,52px); }
  #pageroot .portfolio-showcase { padding: 20px; }
  #pageroot .ps-panel h2 { font-size: 26px; }
  #pageroot .ps-example { display: none; }
  #pageroot .street-scene-head { padding: 22px; }
  #pageroot .street-route-labels { display: none; }
  #pageroot .street-lane { grid-template-columns: minmax(0,1fr); gap: 15px; padding: 20px 22px; }
  #pageroot .street-lane-name { gap: 10px; }
  #pageroot .street-lane-name b { font-size: 14px; }
  #pageroot .street-decision { margin-left: 52px; }
  #pageroot .street-rule { font-size: 11px; }
  #pageroot .street-order { margin-left: 52px; }
  #pageroot .street-destination { margin: 4px 18px 0; padding: 17px; align-items: flex-start; }
  #pageroot .street-destination b { font-size: 14px; }
  #pageroot .street-destination-arrow { display: none; }
  #pageroot .street-disclosure { padding: 17px 22px; }
  #pageroot[data-page="algos"] .al-agent-explainer { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #pageroot .street-courier, #pageroot .ps-panel { animation: none !important; }
  #pageroot .street-motion { display: none; }
  #pageroot .ps-explore span, #pageroot .ps-choices label { transition: none; }
}

/* A compact, portfolio-first hero. Money stays still; the example picks move. */
#pageroot[data-page="algos"] .al-hero { padding: 42px 16px 34px; }
#pageroot[data-page="algos"] .al-herotop { gap: 44px; align-items: center; }
#pageroot[data-page="algos"] .al-hero h1 { font-size: clamp(39px,4.15vw,59px); max-width: 18ch; margin-top: 18px; }
#pageroot[data-page="algos"] .al-sub { max-width: 49ch; margin-top: 20px; font-size: 16px; line-height: 1.8; }
#pageroot[data-page="algos"] .al-sub-action { display: block; margin-top: 10px; color: var(--ink); font-weight: 600; }
#pageroot[data-page="algos"] .al-acts { margin-top: 22px; }
#pageroot[data-page="algos"] .agent-source-row { margin-top: 28px; }
#pageroot .portfolio-showcase { padding: 22px; }
#pageroot .ps-topline { margin-bottom: 10px; }
#pageroot .ps-choices { margin-bottom: 18px; }
#pageroot .ps-choices legend { margin-bottom: 10px; font-size: 20px; }
#pageroot .ps-panel h2 { font-size: 25px; min-height: 0; max-width: none; margin: 16px 0 8px; }
#pageroot .ps-description { margin-bottom: 14px; min-height: 0; font-size: 12px; line-height: 1.7; }
#pageroot .ps-value { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 18px; margin-bottom: 16px; border-bottom: 1px solid var(--hair); }
#pageroot .ps-value > div > span { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
#pageroot .ps-value strong { display: block; font-family: var(--mono); font-size: clamp(30px,3vw,40px); font-weight: 600; letter-spacing: -.055em; line-height: 1.2; }
#pageroot .ps-value strong span { color: #84928a; }
#pageroot .ps-value .ps-example { display: inline-block; font-size: 10px; padding: 5px 8px; border-radius: 7px; background: var(--panel); }
#pageroot .ps-avatar { width: 36px; height: 36px; border-radius: 11px; }
#pageroot .ps-avatar svg { width: 22px; height: 22px; }
#pageroot .ps-agent-read { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: #eff6eb; border: 1px solid #e0ead7; border-radius: 10px 10px 0 0; position: relative; overflow: hidden; }
#pageroot .ps-model-stack { display: flex; align-items: center; flex: none; padding-right: 3px; }
#pageroot .ps-model-stack svg { width: 24px; height: 24px; padding: 3px; background: white; border: 1px solid #d8e4d4; border-radius: 50%; margin-right: -3px; }
#pageroot .ps-read-copy { color: var(--duck-deep); font-size: 10px; font-weight: 600; line-height: 1.5; }
#pageroot .ps-read-dots { margin-left: auto; display: flex; gap: 3px; flex: none; }
#pageroot .ps-read-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--duck); }
#pageroot .ps-basket { padding: 10px 12px 4px; border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; }
#pageroot .ps-basket-top { margin-bottom: 3px; font-size: 10px; }
#pageroot .ps-holding { min-height: 43px; gap: 8px; border-top: 1px solid #f0f3ef; padding: 8px 0; }
#pageroot .ps-holding > b { min-width: 36px; font-size: 12px; }
#pageroot .ps-holding .ps-side { font-size: 10px; font-weight: 600; padding: 3px 6px; border-radius: 5px; background: var(--duck-bg); color: var(--duck-deep); white-space: nowrap; }
#pageroot .ps-holding .ps-short { color: #a83d3d; background: #faeeee; }
#pageroot .ps-holding .ps-rule { color: #6a5934; background: #f5f1e6; }
#pageroot .ps-pick-source { margin-left: auto; flex: none; display: grid; place-items: center; }
#pageroot .ps-pick-source svg { width: 15px; height: 15px; }
#pageroot .ps-panel-income .ps-pick-source svg { fill: none; stroke: var(--duck-deep); stroke-width: 1.6; stroke-linecap: round; }
#pageroot .ps-holding .ps-size { min-width: 69px; margin-left: 0; color: var(--ink); text-align: right; font-family: var(--mono); font-size: 11px; }
#pageroot .ps-explore { margin-top: 12px; }
#pageroot .ps-disclosure { margin-top: 12px; padding-top: 10px; font-size: 10px; line-height: 1.6; }
#pageroot .ps-panel.is-playing .ps-holding { animation: ps-pick-arrives 1s calc(.4s + var(--pick) * .65s) both; }
#pageroot .ps-panel.is-playing .ps-read-dots i { animation: ps-thinking .7s 3; }
#pageroot .ps-panel.is-playing .ps-read-dots i:nth-child(2) { animation-delay: .12s; }
#pageroot .ps-panel.is-playing .ps-read-dots i:nth-child(3) { animation-delay: .24s; }
#pageroot .ps-panel.is-playing .ps-model-stack svg { animation: ps-model-thinks 1.1s 2; }
#pageroot .ps-panel.is-playing .ps-model-stack svg:nth-child(2) { animation-delay: .3s; }
#pageroot .ps-panel.is-playing .ps-model-stack svg:nth-child(3) { animation-delay: .6s; }
@keyframes ps-pick-arrives { 0% { transform: translateX(-18px); opacity: .12; background: #e5f1d1; } 45% { opacity: 1; background: #e5f1d1; } 100% { transform: none; opacity: 1; background: transparent; } }
@keyframes ps-thinking { 50% { transform: translateY(-3px); } }
@keyframes ps-model-thinks { 40% { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 0 0 3px #d8ef8c66; } }

/* The portfolio itself is the hero visual; native choice tabs still select
 * the strategy example, not fictitious historical time ranges. */
#pageroot .ps-choices legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
#pageroot .ps-choices { margin-bottom: 15px; }
#pageroot .ps-value { border: 0; padding-bottom: 0; margin-bottom: 13px; }
#pageroot .ps-value strong { font-size: clamp(34px,3.2vw,42px); }
#pageroot .ps-panel .ps-chart-heading h2 { margin: 0; font-size: 15px; line-height: 1.5; letter-spacing: -.025em; }
#pageroot .ps-chart-heading > span { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; }
#pageroot .ps-chart { margin: 12px -3px 0; }
#pageroot .ps-chart > svg { display: block; width: 100%; height: auto; overflow: visible; }
#pageroot .ps-chart-grid { fill: none; stroke: #edf2ec; stroke-width: 1; }
#pageroot .ps-chart-line { fill: none; stroke: var(--duck); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
#pageroot .ps-chart-dot { fill: var(--duck); }
#pageroot .ps-chart figcaption { font-size: 9px; color: var(--dim); line-height: 1.5; margin: 4px 3px 11px; }
#pageroot .ps-description { font-size: 11px; line-height: 1.65; margin-bottom: 13px; }
#pageroot .ps-panel.is-playing .ps-chart-line { animation: ps-chart-draw 2.8s ease-out both; }
#pageroot .ps-panel.is-playing .ps-chart-area { animation: ps-chart-wash 2.8s ease-out both; }
#pageroot .ps-panel.is-playing .ps-chart-dot { animation: ps-chart-wash .6s 2.4s both; }
#pageroot .ps-panel.is-playing .ps-holding { animation-delay: calc(1.5s + var(--pick) * .65s); }
@keyframes ps-chart-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes ps-chart-wash { from { opacity: 0; } to { opacity: 1; } }

/* The Street carries legible order tickets, not just a moving mascot. */
#pageroot .street-scene-head { padding: 21px 26px; }
#pageroot .street-example-label { font-size: 12px; color: var(--dim); }
#pageroot .street-route-labels,
#pageroot .street-lane { grid-template-columns: minmax(170px,.85fr) minmax(260px,1.6fr) minmax(185px,1fr); gap: 26px; }
#pageroot .street-lane { padding: 21px 26px; }
#pageroot .street-decision { display: block; min-width: 0; }
#pageroot .street-rule { display: block; margin-bottom: 10px; font-size: 11px; }
#pageroot .street-road { width: 100%; height: 43px; min-width: 0; border-color: #e4eadf; }
#pageroot .street-courier { top: 3px; left: calc(100% - 215px); width: 215px; height: 35px; display: flex; gap: 7px; justify-content: center; align-items: center; padding: 0 9px; border-radius: 8px; border-color: #cbdcbe; background: #fafff4; box-shadow: 0 3px 8px #224b2220; font-size: 10px; white-space: nowrap; }
#pageroot .street-courier svg { flex: none; width: 19px; height: 19px; }
#pageroot .street-lane:nth-child(-n+2) .street-courier svg { fill: none; stroke: var(--duck-deep); stroke-width: 1.6; stroke-linecap: round; }
#pageroot .street-courier small { color: var(--dim); font-family: var(--mono); font-size: 9px; margin-left: auto; }
#pageroot .street-side { padding: 3px 5px; border-radius: 4px; color: var(--duck-deep); background: var(--duck-bg); font-size: 9px; font-weight: 600; }
#pageroot .street-side.is-short { color: #a83d3d; background: #faeeee; }
#pageroot .street-order-queue { display: grid; gap: 7px; }
#pageroot .street-order { padding: 10px 12px; min-height: 53px; font-size: 11px; }
#pageroot .street-order small { display: block; margin-top: 5px; font-size: 10px; color: var(--dim); font-weight: 400; line-height: 1.5; }
#pageroot .street-courier:first-child { opacity: 0; }
#pageroot .street-scene.is-playing .street-courier { animation: street-ticket 1.9s calc(var(--lane) * .2s + var(--order) * 1.8s) both cubic-bezier(.22,.7,.3,1); }
#pageroot .street-scene.is-playing .street-courier:first-child { animation-name: street-ticket-through; }
#pageroot .street-scene.is-playing .street-order { animation: street-arrival 1.9s calc(var(--lane) * .2s + var(--order) * 1.8s) both; }
@keyframes street-ticket { 0%,8% { left: 0; opacity: 0; transform: scale(.94); } 22% { opacity: 1; } 85%,100% { left: calc(100% - 215px); opacity: 1; transform: none; } }
@keyframes street-ticket-through { 0%,8% { left: 0; opacity: 0; transform: scale(.94); } 22% { opacity: 1; } 75% { left: calc(100% - 215px); opacity: 1; transform: none; } 100% { left: calc(100% - 215px); opacity: 0; transform: translateX(8px); } }
@keyframes street-arrival { 0%,55% { border-color: var(--hair); } 75% { border-color: #9fcf89; background: #f4faed; } 100% { border-color: var(--hair); background: white; } }

/* One setup journey, with the agent's work alongside your three decisions. */
#pageroot[data-page="algos"] .al-agent-explainer { gap: 26px 48px; padding: 36px; align-items: center; }
#pageroot .al-agent-heading { grid-column: 1 / -1; }
#pageroot .al-agent-heading .public-status { margin-bottom: 18px; }
#pageroot[data-page="algos"] .al-agent-heading h2 { max-width: none; }
#pageroot .al-setup-time { display: inline-block; font-size: .52em; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; vertical-align: middle; }
#pageroot .al-agent-heading > p { margin: 14px 0 4px; max-width: 65ch; color: var(--dim); font-size: 15px; line-height: 1.8; }
#pageroot .al-setup-qualification { display: block; color: var(--dim); font-size: 11px; line-height: 1.7; margin-top: 9px; }
#pageroot[data-page="algos"] .al-agent-explainer .al-steps { grid-template-columns: minmax(0,1fr); gap: 0; }
#pageroot[data-page="algos"] .al-agent-explainer .al-step { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 18px; padding: 26px 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--hair); background: none; transform: none; }
#pageroot[data-page="algos"] .al-agent-explainer .al-step:last-child { border-bottom: 0; }
#pageroot .al-agent-explainer .al-step-top { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
#pageroot .al-agent-explainer .al-step-num { background: none; color: var(--dim); border: 0; padding: 0; font-size: 12px; }
#pageroot .al-agent-explainer .al-step-icon-wrap { width: 44px; height: 44px; border-radius: 12px; color: var(--duck-deep); background: white; border-color: #d6e4d9; }
#pageroot .al-agent-explainer .al-step h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.035em; margin-bottom: 9px; }
#pageroot .al-agent-explainer .al-step p { font-size: 13px; line-height: 1.8; color: var(--dim); }
#pageroot .al-setup-note { display: block; margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--duck-deep); }
#pageroot .al-agent-explainer .agent-workspace { padding: 23px; border-radius: 22px; }
#pageroot .al-agent-explainer .agent-brief { margin: 20px 0; padding: 17px; }
#pageroot .al-agent-explainer .agent-sequence-row { padding-top: 12px; padding-bottom: 12px; }
#pageroot .al-agent-explainer .agent-controls { margin-top: 18px; padding: 14px; }

/* A small research desk: source pages are scanned, model views compared,
 * then the existing decision/execution path lights in sequence. */
#pageroot .agent-research { overflow: hidden; }
#pageroot .agent-research-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
#pageroot .agent-research-heading > span { color: var(--duck-deep); font-size: 24px; line-height: 1; }
#pageroot .agent-research-inputs { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 17px; overflow: hidden; }
#pageroot .agent-research-source { position: relative; min-width: 0; padding: 11px 8px; border: 1px solid #dbe6dc; border-radius: 10px; background: white; }
#pageroot .agent-research-source b { display: block; margin-top: 10px; font-size: 10px; font-weight: 600; }
#pageroot .agent-research-source > small { display: block; margin-top: 4px; color: var(--dim); font-size: 9px; line-height: 1.5; }
#pageroot .agent-research-paper { height: 34px; display: grid; align-content: center; gap: 5px; }
#pageroot .agent-research-paper > svg { display: block; width: 100%; height: 34px; fill: none; stroke: var(--duck); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pageroot .agent-research-paper .research-baseline { stroke: #e0e8e1; stroke-width: 1; }
#pageroot .agent-research-paper i { display: block; height: 3px; border-radius: 3px; background: #dce8dc; width: 86%; }
#pageroot .agent-research-paper i:nth-child(2) { width: 65%; background: #b5d29e; }
#pageroot .agent-research-paper i:nth-child(3) { width: 74%; }
#pageroot .agent-research-scan { position: absolute; inset: 0 auto 0 0; width: 42%; background: linear-gradient(90deg,transparent,#d8ef8c55,transparent); border-right: 1px solid #9dc971; pointer-events: none; opacity: 0; }
#pageroot .agent-research .agent-models { margin-top: 14px; }
#pageroot .agent-research .agent-models > span { flex: 1; justify-content: center; padding: 7px 6px; font-size: 10px; }
#pageroot .agent-brief .agent-research-note { font-size: 11px; font-weight: 500; line-height: 1.6; margin: 12px 0 0; color: var(--dim); }
#pageroot .agent-workspace.is-playing .agent-research-source { animation: agent-source-read 1.6s calc(var(--source) * .55s) both; }
#pageroot .agent-workspace.is-playing .agent-research-scan { animation: agent-scan-context 2.7s .2s both; }
#pageroot .agent-workspace.is-playing .agent-models > span { animation: agent-compare-view 1.4s 1.2s both; }
#pageroot .agent-workspace.is-playing .agent-models > span:nth-child(2) { animation-delay: 1.7s; }
#pageroot .agent-workspace.is-playing .agent-models > span:nth-child(3) { animation-delay: 2.2s; }
#pageroot .agent-workspace.is-playing .agent-sequence-row .agent-check { animation: agent-check-rule .8s 2.7s both; }
#pageroot .agent-workspace.is-playing .agent-sequence-row:nth-child(2) .agent-check { animation-delay: 3.3s; }
#pageroot .agent-workspace.is-playing .agent-sequence-row:nth-child(3) .agent-check { animation-delay: 3.9s; }
@keyframes agent-source-read { 0% { transform: translateY(4px); } 38% { border-color: #a6c88b; box-shadow: 0 3px 12px #6c995020; } 100% { transform: none; } }
@keyframes agent-scan-context { 0% { transform: translateX(-105%); opacity: 0; } 14%,82% { opacity: 1; } 100% { transform: translateX(245%); opacity: 0; } }
@keyframes agent-compare-view { 36% { transform: translateY(-3px); border-color: #98bd78; background: #f5faea; } 100% { transform: none; } }
@keyframes agent-check-rule { 40% { transform: scale(1.18); color: var(--ink); background: var(--public-accent); box-shadow: 0 0 0 5px #d8ef8c33; } }

@media (max-width: 1100px) {
  #pageroot[data-page="algos"] .al-herotop { gap: 30px; }
  #pageroot .street-route-labels, #pageroot .street-lane { grid-template-columns: 170px minmax(225px,1fr) 185px; gap: 18px; }
  #pageroot[data-page="algos"] .al-agent-explainer { padding: 28px; gap: 22px 28px; }
}
@media (max-width: 760px) {
  #pageroot[data-page="algos"] .al-hero { padding: 30px 0; }
  #pageroot[data-page="algos"] .al-hero h1 { font-size: clamp(37px,8vw,50px); max-width: 18ch; }
  #pageroot[data-page="algos"] .al-herotop { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #pageroot .portfolio-showcase { padding: 18px; }
  #pageroot .ps-panel h2 { font-size: 23px; }
  #pageroot .ps-read-copy { max-width: 22ch; }
  #pageroot .street-lane { grid-template-columns: minmax(0,1fr); gap: 13px; padding: 20px; }
  #pageroot .street-decision { margin-left: 0; }
  #pageroot .street-order { margin-left: 0; min-height: 53px; }
  #pageroot .street-route-labels { display: none; }
  #pageroot .street-example-label { max-width: 25ch; font-size: 11px; }
  #pageroot .street-scene-head { padding: 20px; }
  #pageroot[data-page="algos"] .al-agent-explainer { padding: 22px; gap: 22px; }
  #pageroot .al-agent-heading > p { font-size: 14px; }
  #pageroot[data-page="algos"] .al-agent-explainer .al-step { padding: 20px 0; gap: 14px; }
  #pageroot .al-agent-explainer .agent-workspace { padding: 18px; }
}
@media (max-width: 380px) {
  #pageroot .ps-pick-source { display: none; }
  #pageroot .ps-holding .ps-size { margin-left: auto; }
  #pageroot .agent-research-inputs { gap: 5px; }
  #pageroot .agent-research-source { padding: 9px 5px; }
  #pageroot .agent-research-source b { font-size: 9px; }
  #pageroot .agent-research-source > small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #pageroot .ps-panel *, #pageroot .street-scene *, #pageroot .agent-workspace * { animation: none !important; transition: none !important; }
}