/* Applications, industries, and learning environments share the second section. */
#industries { --industry-accent: #a65439; --industry-tint: #f8eee9; --industry-surface: #faf9f7; position: relative; border-top: 0; padding-block: calc(clamp(72px, 8vw, 120px) + 32px) clamp(24px, 2.5vw, 40px); font-family: Inter, Geist, "Helvetica Neue", Arial, sans-serif; scroll-margin-top: calc(var(--anchor-top, 96px) - clamp(72px, 8vw, 120px) - 32px); } /* --anchor-top minus this section's top padding (negative at most widths, which scroll-margin allows): the Applications, Industries and Environments links land the heading 24px under the header like every other section, instead of 158px down (2026-10-31; a flat 80px before) */
#industries .industry-mode-picker { display: flex; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: 18px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
/* Keep every heading in one shared grid cell so tab changes cannot resize the header. */
#industries .industry-headings { display: grid; grid-template-columns: minmax(0, 1fr); }
#industries .industries-head[hidden] { display: grid; visibility: hidden; pointer-events: none; }
#industries .industry-mode-picker[hidden], #industries [data-industry-view][hidden] { display: none; }
/* Measure the original Industry card at its real width without showing the hidden view. */
#industries [data-industry-view].industry-measure[hidden] { display: block; position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
#industries .industry-mode-picker button { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; white-space: nowrap; color: var(--dim); transition: background 200ms ease, color 200ms ease; }
#industries .industry-mode-picker button:hover { color: var(--fg); }
#industries .industry-mode-picker button[aria-selected="true"] { background: rgba(201, 108, 74, .12); color: #D97757; }
#industries .industry-mode-picker button[aria-selected="true"]:hover { background: rgba(201, 108, 74, .2); }
#industries .industry-mode-picker button:focus-visible { outline: 2px solid var(--industry-accent); outline-offset: 2px; }
#industries .industries-head { display: grid; grid-area: 1 / 1; min-width: 0; align-self: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 6vw, 88px); margin-bottom: clamp(36px, 4.5vw, 64px); }
#industries .industries-intro { min-width: 0; }
#industries .industries-intro p { margin: 0 0 16px; max-width: 29em; color: var(--dim); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; text-wrap: pretty; }
#industries [data-industry-heading="industries-view"] .industries-intro p { margin-bottom: 0; }
#industries [data-industry-heading="environments-view"] .industries-intro p { margin-bottom: 0; }
#industries .industries-eyebrow { margin: 0 0 20px; color: var(--dim); font: 10px/1.6 "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
#industries h2 { font-weight: 450; font-size: clamp(36px, 3.8vw, 54px); line-height: 1.04; letter-spacing: -.045em; }
#industries .industries-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
#industries .industries-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
#industries .industry-selector { display: flex; flex-direction: column; gap: 7px; padding-top: 3px; }
#industries .industry-selector[hidden] { display: none; }
#industries .industries-layout:has(.industry-selector[hidden]) { grid-template-columns: minmax(0, 1fr); }
#industries .industry-selector button { display: flex; align-items: center; gap: 13px; min-height: 61px; padding: 13px 15px; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; color: var(--dim); font: 14px/1.35 Inter, sans-serif; cursor: pointer; }
#industries .industry-selector button > svg { flex: none; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#industries .industry-selector button > span:not(.industry-tab-arrow) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#industries .industry-selector .industry-tab-arrow { opacity: 0; font-size: 16px; }
#industries .industry-selector button:hover { color: var(--fg); background: var(--industry-surface); }
#industries .industry-selector button[aria-selected="true"] { background: rgba(201, 108, 74, .12); color: #D97757; } /* the hero's See platform pill: its orange wash (.btn-tint) and terracotta text (Nick 2026-10-29: "change the section 2 list highlight fill color and text color to the same shades as the see platform button on the home page"); the section's own --industry-tint #f8eee9 and --industry-accent #a65439 before */
#industries .industry-selector button[aria-selected="true"]:hover { background: rgba(201, 108, 74, .2); } /* the pill's hover wash */
#industries .industry-selector button[aria-selected="true"] .industry-tab-arrow { opacity: 1; }
#industries .industry-selector button:focus-visible, #industries .industry-panel:focus-visible { outline: 2px solid var(--industry-accent); outline-offset: 4px; }
#industries .industry-panels { min-width: 0; }
#industries .industry-panel { overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); }
#industries .industry-panel + .industry-panel { margin-top: 24px; }
#industries .industry-panel[hidden] { display: none; }
#industries .industry-selector:not([hidden]) + .industry-panels .industry-panel { margin-top: 0; }
#industries .industry-content { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 28px; min-height: 440px; padding: 30px; }
#industries .industry-copy { min-width: 0; }
#industries .industry-sector { margin: 0 0 12px; font: 10px/1.6 "Geist Mono", monospace; color: var(--industry-accent); letter-spacing: .06em; text-transform: uppercase; }
#industries #uc-imagery .industry-sector { color: #D97757; }
#industries .industry-content h3 { margin: 0; max-width: 14em; font-size: clamp(22px, 2.1vw, 28px); font-weight: 450; line-height: 1.15; letter-spacing: -.035em; text-wrap: pretty; }
#industries .industry-description { margin: 17px 0 0; max-width: 30em; font-size: 14px; line-height: 1.7; color: var(--dim); text-wrap: pretty; }
#industries .defense-contact { color: inherit; text-decoration: none; }
#industries .defense-contact:hover { color: var(--industry-accent); }
#industries .defense-contact:focus-visible { outline: 2px solid var(--industry-accent); outline-offset: 6px; border-radius: 3px; }
#industries .defense-watermark { display: grid; place-items: center; align-self: stretch; min-width: 0; }
#industries .defense-watermark .brand-mark { width: min(75%, 260px); height: auto; aspect-ratio: 1; color: var(--fg); opacity: .12; }
#industries .industry-visual, #industries .application-visual { min-width: 0; width: 100%; margin: 0; align-self: center; }
#industries .industry-art { display: flex; align-items: center; width: 100%; aspect-ratio: 5 / 3; background: transparent; }
#industries .industry-art > img, #industries .industry-art > svg { display: block; width: 100%; height: 100%; object-fit: contain; }
#industries .application-art > canvas { display: block; width: 100%; height: 100%; }
#industries .industry-art > img { border: 0; border-radius: 0; }
#industries #uc-timeseries .application-art > :is(img, svg) { transform: scale(1.2); transform-origin: center; }
#industries .application-result { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 28px; padding-top: 8px; } /* 8px over the grid gap since 2026-11-01 (Nick: "slightly reduce the gap in between 24,784,392 vehicles and the benchmark text with the description and graphic"), 20px before; no rule above the benchmark since 2026-11-01 (Nick: "remove the horizontal line above the benchmark and count in the imagery section"); the applications row below keeps its own line */
#industries .application-result strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; letter-spacing: -.035em; }
#industries .application-result small { font-size: .5em; letter-spacing: -.01em; }
#industries .application-result p { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.6; }
#industries #uc-imagery .application-result p { font-size: 13px; }
#industries .application-performance { color: #D97757; }
/* The card's footer row: a mono kicker (data-kicker) names the row, then each item carries a mono index in the
   section's rust and sits in its own hairline-divided column. It replaced
   three dotted bullets (Nick 2026-10-31: "redesign the bottom 3 words with the dots next to them. That looks very
   typical vibe coded formatting"). Auto-flow columns take three or four items alike. */
#industries .industry-use-cases { display: grid; grid-column: 1 / -1; grid-template-columns: max-content; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; align-items: baseline; gap: 0; list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); counter-reset: uc; }
#industries .industry-use-cases::before { content: attr(data-kicker); padding-right: 24px; font: 10px/1.6 "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #79766d; }
#industries .industry-use-cases li { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 0 16px 0 20px; border-left: 1px solid var(--line); font: 10px/1.6 "Geist Mono", monospace; letter-spacing: .06em; color: #79766d; text-wrap: balance; /* the items in the kicker's own type since 2026-11-01 (Nick: "make the applications text the same size and color and font as the label to their left"); 13px of the page face in the foreground colour before */ }
#industries .industry-use-cases li::before { content: counter(uc, decimal-leading-zero); counter-increment: uc; flex: none; font: 10px/1 "Geist Mono", monospace; letter-spacing: .04em; color: var(--industry-accent); }
html[data-theme="dark"] #industries { --industry-accent: #e1987e; --industry-tint: #33231c; --industry-surface: #151513; }
#industries :is(.maritime-wave, .automotive-wave, .aerospace-wave, .factory-wave) { opacity: .45; transform-box: view-box; transform-origin: 0 0; animation: industry-signal-pulse 3s linear infinite both; }
#industries :is(.maritime-wave-far, .automotive-wave-far, .aerospace-wave-far, .factory-wave-far) { animation-delay: .36s; }
#industries :is(.maritime-signal-rig, .automotive-signal-taxi) [class$="wave-near"] { animation-delay: -1s; }
#industries :is(.maritime-signal-rig, .automotive-signal-taxi) [class$="wave-far"] { animation-delay: -.64s; }
#industries :is(.maritime-signal-derrick, .automotive-signal-luxury) [class$="wave-near"] { animation-delay: -2s; }
#industries :is(.maritime-signal-derrick, .automotive-signal-luxury) [class$="wave-far"] { animation-delay: -1.64s; }
#industries .aerospace-signal-satellite .aerospace-wave-near { animation-delay: -.75s; }
#industries .aerospace-signal-satellite .aerospace-wave-far { animation-delay: -.39s; }
#industries .aerospace-signal-ground .aerospace-wave-near { animation-delay: -1.5s; }
#industries .aerospace-signal-ground .aerospace-wave-far { animation-delay: -1.14s; }
#industries .aerospace-signal-gantry .aerospace-wave-near { animation-delay: -2.25s; }
#industries .aerospace-signal-gantry .aerospace-wave-far { animation-delay: -1.89s; }
#industries[data-motion="paused"] .industry-art * { animation-play-state: paused !important; }
@keyframes industry-signal-pulse { 0% { opacity: 0; transform: scale(.45); } 8% { opacity: .85; transform: scale(.66); } 24% { opacity: .62; transform: scale(1); } 56%, 100% { opacity: 0; transform: scale(1.8); } }
@media (min-width: 881px) {
  #industries [data-industry-heading="industries-view"] .industries-intro { position: relative; top: 16px; }
  /* The full-width environment visual sits 56px below the other cards. */
  #industries [data-industry-heading="environments-view"] .industries-intro { position: relative; top: 72px; }
  #industries .industry-mode-picker:not([hidden]) ~ [data-industry-view] .industry-panels { margin-top: -56px; }
}
@media (min-width: 681px) {
  #industries #industry-defense .industry-content { grid-template-rows: 1fr auto; }
  #industries #applications-view .industry-content { min-height: var(--application-card-height, 440px); grid-template-rows: 1fr auto; padding-block: 20px; }
}
@media (max-width: 1000px) {
  #industries .industries-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
  #industries .industry-selector button { padding-inline: 11px; gap: 10px; font-size: 13px; }
  #industries .industry-content { min-height: 430px; padding: 24px; gap: 22px; }
}
@media (max-width: 880px) {
  #industries .industries-head { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 24px; }
  #industries .industries-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #industries .industry-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 0; }
  #industries .industry-selector button { border-color: var(--line); min-height: 58px; }
  #industries .industry-selector button[aria-selected="true"] { border-color: transparent; }
  #industries .industry-selector .industry-tab-arrow { display: none; }
  #industries .industry-content { min-height: 390px; }
}
@media (max-width: 680px) {
  #industries .industry-content { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 25px; }
  #industries .application-result { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #industries .industry-content h3 { max-width: 18em; }
  #industries .industry-description { max-width: 42em; }
  #industries .industry-visual, #industries .application-visual { max-width: 500px; justify-self: center; }
}
@media (max-width: 540px) {
  /* Phones scale the title, intro, spacing and card down with the screen (Nick 2026-10-31: "scale better proportionally"). */
  #industries { padding-top: 48px; scroll-margin-top: calc(var(--anchor-top, 96px) - 48px); }
  #industries h2 { font-size: clamp(26px, 7.2vw, 36px); }
  #industries .industries-head { gap: 16px; margin-bottom: 24px; }
  #industries .industries-intro p { margin-bottom: 0; font-size: 15px; }
  #industries .industry-mode-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #industries .industry-mode-picker button { display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 0 4px; }
  #industries .industry-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #industries .industry-selector button { font-size: 12px; padding-inline: 10px; gap: 8px; }
  #industries .industry-selector button > svg { width: 21px; height: 21px; }
  #industries .industry-content { padding: 18px 16px; min-height: 0; gap: 20px; }
  #industries .industry-content h3 { font-size: clamp(20px, 5.6vw, 25px); }
  /* The defense card's watermark: a small centered mark instead of one that fills the box (Nick 2026-10-31). */
  #industries .defense-watermark { padding: 28px 0; }
  #industries .defense-watermark .brand-mark { width: 104px; }
  #industries .industry-description { font-size: 15px; line-height: 1.65; }
  #industries .application-art { aspect-ratio: 5 / 4; }
  #industries .application-result p { font-size: 13px; }
  /* The footer row stacks: kicker on top, then one hairline-divided line per item. */
  #industries .industry-use-cases { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
  #industries .industry-use-cases::before { padding: 0 0 10px; }
  #industries .industry-use-cases li { padding: 9px 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  #industries .industry-mode-picker button { transition: none; }
  #industries .industry-art * { animation: none !important; transition: none !important; }
  #industries :is(.maritime-wave, .automotive-wave, .aerospace-wave, .factory-wave) { opacity: .45; transform: none; }
  #industries :is(.maritime-wave-far, .automotive-wave-far, .aerospace-wave-far, .factory-wave-far) { transform: scale(1.5); }
}