/* Feed-specific composition; shared type, gutters and spacing form the system.
   Other product pages are free to use a different visual narrative. */
.feed-page .feed-page-hero { padding-block: 64px 56px; }
.feed-page .feed-page-hero h1 { max-width: 1100px; }
.feed-page .feed-page-hero h1 br { display: initial; }
.feed-page .feed-page-hero > p { max-width: 880px; }
.feed-page .feed-page-hero .back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.feed-page .feed-showcase { padding-block: 0 100px; scroll-margin-top: 110px; }
.feed-reading.product-preview { padding: 0; border-color: #d9d9d9; border-radius: 16px; background: #fff; box-shadow: 0 2px 3px #00000003, 0 16px 36px -20px #00000020; overflow: clip; }
.feed-reading-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; border-bottom: 1px solid #e2e2e2; }
.feed-reading-header h2 { display: flex; font-size: 18px; }
.feed-reading-header > span { font-size: 16px; color: #747474; }
.feed-reading-layout { display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.72fr); }
.feed-reading-choices { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #f5f5f3; border-right: 1px solid #e2e2e2; }
.feed-reading-choices > button { display: flex; flex-direction: column; align-items: start; gap: 8px; text-align: left; width: 100%; min-width: 0; padding: 15px 20px; border: 1px solid transparent; border-radius: 10px; background: transparent; font-family: inherit; color: #626262; cursor: pointer; transition: background-color 200ms, border-color 200ms, color 200ms; }
.feed-reading-choices > button[aria-selected="true"] { background: #fff; border-color: #ddd; color: #262626; }
.feed-choice-category { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.feed-choice-category .icon { width: 18px; height: 18px; flex-shrink: 0; }
[aria-selected="true"] .feed-choice-category { color: #69319e; }
.feed-reading-choices strong { font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -.015em; }
.feed-choice-short { display: none; }
.feed-choice-context { font-size: 16px; line-height: 1.5; color: #6c6c6c; }
.feed-reading-stage { display: grid; min-width: 0; scroll-margin-top: 120px; }
.feed-reading-panel { display: flex; flex-direction: column; padding: 32px 36px 24px; min-height: 610px; outline-offset: -5px; }
.feed-reading-panel[hidden] { display: none; }
.feed-reading-introduction h3 { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.25; font-weight: 600; max-width: 660px; }
.feed-reading-introduction p { font-size: 17px; line-height: 1.6; color: #666; margin-top: 14px; max-width: 650px; }
.feed-reading-visual { container-type: inline-size; margin-block: 32px 20px; }
.feed-reading-visual .feed-dependency { margin: 0 auto; }
.feed-reading .dv-source { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; }
.feed-reading .opportunity-geography { margin: 0 auto; width: 100%; height: auto; aspect-ratio: 270 / 170; max-height: 420px; min-height: 300px; }
.feed-reading .opportunity-map { background: #fff; }
.feed-reading .geographic-label { background: #fff; }
.feed-reading .geographic-projects { top: 71%; }
.feed-reading-actions { display: flex; align-items: start; justify-content: flex-end; gap: 8px 24px; flex-wrap: wrap; margin-top: auto; }
.feed-example-art { margin: 0 auto; max-width: 680px; padding-top: 8px; font-family: 'IBM Plex Sans', sans-serif; }
.fe-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: center; }
.fe-dates > div { display: flex; flex-direction: column; gap: 6px; }
.fe-dates span, .fe-forecast-key { font-size: 16px; line-height: 1.45; color: #69656f; }
.fe-dates strong { font-size: 24px; line-height: 1.25; font-weight: 500; color: #302b36; letter-spacing: -.02em; }
.fe-dates > div:first-child strong { color: #7134a5; }
.fe-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.fe-compact { display: none; }
.fe-scene path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fe-ground-shadow { fill: #f2f1f3; }
.fe-ground-edge { fill: #e4e3e6; }
.fe-ground { fill: #fafafa; stroke: #e2e1e5; stroke-width: .8; }
.fe-grid { stroke: #e6e4e8; stroke-width: .65; }
.fe-front { fill: #45404d; }
.fe-side { fill: #302c37; }
.fe-roof { fill: #7b7288; }
.fe-edge { stroke: #a39bab; stroke-width: .8; }
.fe-rib { stroke: #716979; stroke-width: .8; }
.fe-roof-rib { stroke: #a39aaa; stroke-width: .75; }
.fe-door { stroke: #9a90a4; stroke-width: .8; }
.fe-locking-bar { stroke: #b6acbf; stroke-width: 1.2; }
.fe-asset-frame { stroke: #b88cdb; stroke-width: .8; }
.fe-frame-corner { stroke: #a572ce; stroke-width: 1; }
.fe-route { stroke: #9d6ac6; stroke-width: 1.3; }
.fe-deadline-plane { fill: #9469b815; }
.fe-deadline-outline { stroke: #a778ca; stroke-width: 1; }
.fe-deadline-cap { stroke: #8242b7; stroke-width: 1.4; }
.fe-certificate { stroke: #ac8bc3; stroke-width: .9; }
.fe-certificate-line { stroke: #ac8bc3; stroke-width: .7; }
.fe-leader { stroke: #c0bac6; stroke-width: .8; }
.fe-port-halo { fill: #fff; stroke: #b895d2; stroke-width: .7; }
.fe-port { fill: #8443b6; }
.fe-forecast-key { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-inline: 12px; }
.fe-forecast-key > span { display: flex; align-items: center; gap: 8px; }
.fe-forecast-key i { width: 18px; height: 10px; border: 1px solid #b099c2; background: #9575b01a; }
.fe-forecast-key strong { font-weight: 500; color: #53405f; }
.fe-forecast-area { fill: #9672b712; stroke: #b8a2ca; stroke-width: .65; stroke-dasharray: 3 4; }
.fe-wind { stroke: #9d79b8; stroke-width: 1; }
.fe-site-pad { fill: #eeedef; stroke: #d4d1d8; stroke-width: .6; }
.fe-equipment .fe-front { fill: #9b90a8; }
.fe-equipment .fe-side { fill: #776d84; }
.fe-equipment .fe-roof { fill: #b4a7c2; }
.fe-equipment .fe-edge { stroke: #c4b8cf; stroke-width: .5; }
.fe-louvre { stroke: #766881; stroke-width: .6; }
.fe-window { fill: #d3c8df; stroke: #91839f; stroke-width: .4; }
.fe-work-times { margin-top: -8px; }
.fe-work-times strong { font-size: 18px; color: #353038; }
.fe-work-times > div:first-child strong { color: #353038; }
.fe-work-time { white-space: nowrap; }
.fe-work-time::before { content: ' · '; }
.fe-materials .fe-dates > div:first-child strong { color: #353038; }
.fe-materials .fe-dates > div:last-child strong { color: #7134a5; }
.fe-pallet .fe-front { fill: #cbc7cc; }
.fe-pallet .fe-side { fill: #aaa5b0; }
.fe-pallet .fe-roof { fill: #dedbe1; }
.fe-sheet-stack .fe-front { fill: #b9b2c2; }
.fe-sheet-stack .fe-side { fill: #787080; }
.fe-sheet-stack .fe-roof { fill: #ded8e5; }
.fe-sheet-stack .fe-edge { stroke: #f3f0f6; }
.fe-sheet-edge { stroke: #79707f; stroke-width: .7; }
.fe-sheet-strap { stroke: #817188; stroke-width: 2.3; }
.fe-sheet-glint { stroke: #b6a1c7; stroke-width: .9; }
.fe-material-brace { stroke: #b3a5bd; stroke-width: .8; }
.fe-gap-footprint { fill: #a483bd0a; stroke: #b99acd; stroke-width: .6; }
.fe-gap-upright { stroke: #be9dd5; stroke-width: .7; stroke-dasharray: 2 3; }
.fe-fuel-labels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; text-align: center; font-size: 16px; line-height: 1.45; color: #53485f; }
.fe-scene .fe-tank-wall { fill: var(--tank-metal); stroke: #726979; stroke-width: .6; }
.fe-tank-roof { fill: #c2b9ce; stroke: #8f829d; stroke-width: .7; }
.fe-tank-rim { fill: none; stroke: #a494b4; stroke-width: .5; }
.fe-pipe { stroke: #b4aebb; stroke-width: 2.2; }
.fe-pipe-high { stroke: #a094ad; stroke-width: 2; }
.fe-refinery-band { stroke: #c3b7ce; stroke-width: .8; }
.fe-road-edge { stroke: #d7d4dc; stroke-width: .9; }
.fe-road-mark { stroke: #d3ced9; stroke-width: .7; stroke-dasharray: 5 5; }
.fe-chassis .fe-front, .fe-chassis .fe-side { fill: #413a4a; }
.fe-trailer .fe-front { fill: #8a8295; }
.fe-trailer .fe-side { fill: #61576e; }
.fe-trailer .fe-roof { fill: #c1b7cd; }
.fe-trailer-rib { stroke: #aaa0b7; stroke-width: .7; }
.fe-cab .fe-front { fill: #b7a6ca; }
.fe-cab .fe-side { fill: #7c6991; }
.fe-cab .fe-roof { fill: #d9cbe7; }
.fe-windscreen { fill: #4c435a; stroke: #d5c7e3; stroke-width: .5; }
.fe-tyre { fill: #3c3544; stroke: #d6d1dc; stroke-width: .6; }
.fe-wheel { fill: #b9afc6; }
.fe-price-plane { fill: #9b70bd0b; stroke: #c7b4d6; stroke-width: .6; }
.fe-price-trend { stroke: #8650b1; stroke-width: 1.5; }
.fe-price-arrow { stroke: #8650b1; stroke-width: 1.2; }
.feed-reading-actions .text-link { font-size: 16px; margin: 0; min-height: 44px; flex-shrink: 0; }
.feed-reading-evidence { min-width: 0; margin-top: 26px; }
.feed-evidence-label { font-size: 16px; color: #716978; }
.feed-reading-evidence dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 14px; }
.feed-reading-evidence dl > div { border-top: 1px solid #e3e1e5; padding-top: 12px; }
.feed-reading-evidence dt { font-size: 16px; line-height: 1.4; font-weight: 500; color: #38343c; }
.feed-reading-evidence dd { font-size: 16px; line-height: 1.5; color: #686868; margin: 6px 0 0; text-wrap: pretty; }
.feed-page-spread { width: var(--page); max-width: 1440px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
.feed-page-copy h2 { font-size: clamp(32px, 3vw, 46px); line-height: 1.18; letter-spacing: -.04em; }
.feed-page-copy p { font-size: 19px; line-height: 1.65; color: #6d6d6d; margin-top: 24px; max-width: 460px; }
.feed-page-copy p + p { margin-top: 18px; }
.feed-evolution { background: #f4f4f1; padding-block: 96px; }
.feed-update-reading { padding: 36px 40px; background: #fff; border: 1px solid #dedede; border-radius: 14px; box-shadow: 0 12px 32px -24px #00000024; font-family: 'IBM Plex Sans', sans-serif; }
.feed-update-heading { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; margin-bottom: 36px; }
.feed-update-heading .icon { width: 22px; height: 22px; color: #7a3fb0; }
.feed-change-log { list-style: none; padding: 0; margin: 0; }
.feed-change-log li { position: relative; padding: 0 0 32px 28px; }
.feed-change-log li::before { content: ''; position: absolute; width: 1px; left: 4px; top: 12px; bottom: -7px; background: #ddd; }
.feed-change-log li:last-child { padding-bottom: 0; }
.feed-change-log li:last-child::before { display: none; }
.feed-change-point { position: absolute; top: 6px; left: 0; width: 9px; height: 9px; background: #fff; border: 1px solid #bababa; border-radius: 50%; }
.feed-change-label { font-size: 16px; line-height: 1.3; color: #717171; }
.feed-change-log h3 { font-family: inherit; font-size: 21px; font-weight: 500; line-height: 1.35; margin-top: 8px; color: #4b4b4b; letter-spacing: -.02em; }
.feed-change-log p { font-size: 16px; line-height: 1.55; color: #737373; margin-top: 8px; }
.feed-change-latest .feed-change-point { background: #7a3fb0; border-color: #7a3fb0; box-shadow: 0 0 0 4px #efe8f5; }
.feed-change-latest .feed-change-label { color: #6b2da2; }
.feed-change-latest h3 { font-size: 28px; line-height: 1.2; font-weight: 600; color: #292929; }
.feed-change-latest p { color: #555; }
.feed-next-step { padding-block: 96px 48px; }
.feed-followups > a { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 28px 0; border-top: 1px solid #ddd; }
.feed-followups h3 { font-size: 26px; letter-spacing: -.025em; }
.feed-followups p { font-size: 17px; line-height: 1.6; color: #737373; margin-top: 12px; max-width: 470px; }
.feed-followups > a > .icon { width: 22px; height: 22px; color: #8146b8; margin-top: 6px; transition: transform 200ms; }
.feed-page .detail-questions { padding-block: 48px 96px; }
.feed-page .detail-questions .detail-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 112px); }
@media (hover: hover) and (pointer: fine) {
  .feed-reading-choices > button:hover { background: #fafafa; color: #242424; }
  .feed-reading-choices > button[aria-selected="true"]:hover { background: #fff; }
  .feed-followups > a:hover > .icon { transform: translateX(4px); }
}
@media (max-width: 1000px) {
  .feed-reading-layout { grid-template-columns: 1fr; }
  .feed-reading-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 12px; border-right: 0; border-bottom: 1px solid #e2e2e2; gap: 8px; }
  .feed-reading-choices > button { flex: 1; padding: 14px 10px; }
  .feed-reading-choices strong, .feed-choice-context { display: none; }
  .feed-choice-full { display: none; }
  .feed-choice-short { display: inline; }
  .feed-reading-panel { min-height: 0; }
  .feed-page-spread { grid-template-columns: 1fr 1.1fr; gap: 40px; }
  .feed-page .detail-questions .detail-inner { grid-template-columns: 1fr 1.1fr; gap: 40px; }
  .feed-update-reading { padding: 28px 24px; }
}
@media (max-width: 900px) {
  .feed-page .detail-questions .detail-inner { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 700px) {
  .feed-page .feed-page-hero { padding-block: 44px; }
  .feed-page .feed-page-hero h1 { font-size: clamp(36px, 8vw, 46px); }
  .feed-page .feed-page-hero > p { font-size: 18px; }
  .feed-page .feed-showcase { padding-bottom: 60px; }
  .feed-reading-header { padding: 20px; }
  .feed-reading-header > span { display: none; }
  .feed-reading-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; gap: 6px; }
  .feed-reading-choices > button { padding: 14px 10px; align-items: start; }
  .feed-choice-category { font-size: 16px; gap: 7px; }
  .feed-choice-category .icon { width: 16px; height: 16px; }
  .feed-reading-panel { padding: 28px 20px 20px; }
  .feed-reading-introduction h3 { font-size: 26px; }
  .feed-reading-introduction p { font-size: 16px; }
  .feed-reading-visual { margin-block: 30px 22px; }
  .feed-reading-introduction { order:0; }
  .feed-reading-visual { order:1; }
  .feed-reading-evidence { order:2; margin:0 0 26px; }
  .feed-reading-actions { order:3; }
  .fe-wide { display: none; }
  .fe-compact { display: block; }
  .fe-dates { gap: 12px; }
  .fe-dates strong { font-size: 21px; }
  .fe-dates span { font-size: 16px; }
  .fe-forecast-key { flex-direction: column; align-items: start; gap: 6px; padding: 0; }
  .fe-work-times strong { font-size: 18px; }
  .fe-work-times { margin-top: -12px; }
  .fe-work-time { display: block; margin-top: 3px; }
  .fe-work-time::before { content: ''; }
  .feed-reading .opportunity-geography { min-height: 0; max-height: none; aspect-ratio: auto; padding-top: 62.963%; padding-bottom: 52px; }
  .feed-reading .opportunity-map { top: 0; height: calc(100% - 52px); }
  .feed-reading .geographic-label { padding: 5px; }
  .feed-reading .geographic-developer { top: 16%; left: 0; max-width: 45%; }
  .feed-reading .geographic-projects { top: auto; bottom: 0; left: 34%; }
  .feed-reading-actions { flex-direction: column; gap: 8px; }
  .feed-reading-evidence { width: 100%; }
  .feed-reading-evidence dl { grid-template-columns: 1fr; gap: 12px; }
  .feed-reading-evidence dl > div { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 14px; }
  .feed-reading-evidence dd { margin: 0; }
  .feed-page-spread { grid-template-columns: 1fr; gap: 36px; }
  .feed-page-copy h2 { font-size: 34px; }
  .feed-page-copy p { font-size: 18px; margin-top: 20px; }
  .feed-evolution { padding-block: 60px; }
  .feed-update-reading { padding: 26px 22px; }
  .feed-update-heading { font-size: 17px; gap: 10px; margin-bottom: 30px; }
  .feed-change-log li { padding-left: 24px; }
  .feed-change-latest h3 { font-size: 26px; }
  .feed-next-step { padding-block: 60px 30px; }
  .feed-page .detail-questions { padding-block: 30px 60px; }
}
@media (prefers-reduced-motion: reduce) { .feed-page *, .feed-page *::before { transition: none !important; } }