/* Product photography: every card links to an unaltered product screenshot. */
html { scroll-padding-top: 154px; }
.wrap { width: min(1392px, calc(100% - 96px)); }
.header-inner { height: 72px; }
.product-navigation { display: flex; justify-content: space-between; gap: 24px; padding-block: 14px; border-top: 1px solid var(--line); }
.nav-product-group { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }
.nav-product-group > span { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.nav-product-group > a { font-size: 13px; font-weight: 600; padding-block: 5px; }
.nav-product-group > a:hover { color: var(--mint); }
.hero-layout { grid-template-columns: .88fr 1.12fr; gap: 4%; min-height: 650px; padding-block: 54px 36px; }
.hero h1 { font-size: clamp(42px, 4.3vw, 66px); letter-spacing: -2.8px; }
.hero-lead { font-size: 14px; line-height: 2; }
.hero-product-scene { position: relative; min-width: 0; height: clamp(360px, 36vw, 530px); }
.scene-heading, .scene-footer { position: absolute; inset: 0 2% auto; display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
.scene-heading > span:last-child { margin-left: auto; font-size: 9px; letter-spacing: 0; }
.hero-shot { position: absolute; width: 78%; padding: 9px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--surface); box-shadow: var(--card-shadow); transform-origin: 50% 100%; transition: transform 1.15s cubic-bezier(.22,.68,.16,1), box-shadow .8s, border-color .8s; }
.hero-shot > span { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 4px 12px; font-size: 11px; }
.hero-shot b { font-size: 9px; font-weight: 400; color: var(--muted); }
.hero-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 4px; }
.hero-shot-back { --scene-x: -9%; --scene-y: -10%; --scene-angle: -12deg; --scene-scale: .92; --scene-layer: 1; }
.hero-shot-middle { --scene-x: 17%; --scene-y: -2%; --scene-angle: 10deg; --scene-scale: .92; --scene-layer: 2; }
.hero-shot-front { --scene-x: 4%; --scene-y: 12%; --scene-angle: -3deg; --scene-scale: 1; --scene-layer: 3; }
.hero-shot:focus-visible { z-index: 5; box-shadow: var(--shadow); }
.scene-footer { top: auto; bottom: 0; justify-content: space-between; letter-spacing: 0; font-size: 11px; }
.scene-footer a { color: var(--mint); }
.capability-section { background: var(--surface); padding-block: 76px; border-bottom: 1px solid var(--line); }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.capability-grid article { padding: 32px; border-right: 1px solid var(--line); }
.capability-grid article:first-child { padding-left: 0; }
.capability-grid article:last-child { border: 0; padding-right: 0; }
.capability-index { font: 11px Consolas, monospace; color: var(--mint); }
.capability-grid h3 { font-size: 23px; margin-block: 22px 15px; font-weight: 600; }
.capability-grid p { font-size: 13px; line-height: 1.9; color: var(--muted); }
.capability-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 22px; }
.capability-tags span { padding: 7px 9px; background: var(--soft); border-radius: 4px; font-size: 10px; }
.capability-grid a { display: inline-block; padding-block: 8px; color: var(--mint); font-size: 12px; }
.products-intro { padding-block: 80px 50px; }
.product-layout { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 6%; }
.reverse-layout { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.product-section { padding-block: 96px; overflow: hidden; }
.section-learning { padding-top: 60px; }
.product-copy h2 { font-size: clamp(30px, 3vw, 43px); }
.product-lead { font-size: 14px; }
.feature-list li { font-size: 12px; }
.screenshot-deck { width: 100%; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.gallery-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; padding-inline: 3%; }
.gallery-heading > span:first-child { display: flex; align-items: center; gap: 10px; }
.gallery-heading > span:last-child { font: 9px Consolas, monospace; letter-spacing: 1px; }
.fan-stage { position: relative; width: 100%; aspect-ratio: 1.3; isolation: isolate; }
.screen-card { --card-angle: calc(var(--slot) * 11deg); position: absolute; top: 17%; left: 11%; width: 78%; padding: 9px; color: var(--ink); background: var(--surface); border: 1px solid var(--accent-line); border-radius: 10px; box-shadow: var(--card-shadow); transform-origin: 50% 100%; transform: translateX(calc(var(--slot) * 15%)) rotate(var(--card-angle)) scale(.95); transition: transform 1.05s cubic-bezier(.22,.68,.16,1), box-shadow .6s, border-color .6s; }
.screen-card[data-index="2"] { z-index: 2; }
.screen-card.is-active { z-index: 3; transform: translateY(6%) rotate(-2deg); box-shadow: var(--card-shadow), 0 0 40px var(--glow); border-color: var(--accent-line); }
.screen-card:focus-visible { z-index: 4; transform: translateY(-5%) rotate(0); }
.screen-card-bar { display: flex; align-items: center; gap: 8px; padding: 4px 3px 10px; font-size: 10px; }
.screen-card-bar > b { margin-left: auto; font: 10px Consolas, monospace; color: var(--mint); }
.screen-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #f4f6f5; border: 1px solid #142a3810; border-radius: 4px; }
.screen-card-foot { display: flex; justify-content: space-between; padding: 10px 4px 2px; font-size: 10px; }
.screen-card-foot > span:last-child { color: var(--mint); }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gallery-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-tabs button, .gallery-enlarge { color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 5px; min-height: 44px; padding: 9px 12px; font-size: 11px; }
.gallery-tabs button > span { margin-right: 6px; font: 10px Consolas, monospace; opacity: .65; }
.gallery-tabs button[aria-pressed="true"] { color: var(--on-accent); background: var(--mint); border-color: var(--mint); }
.gallery-enlarge { flex-shrink: 0; color: var(--mint); }
.screenshot-deck figcaption { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; font-size: 10px; line-height: 1.7; }
.screenshot-deck figcaption a { margin-left: auto; color: var(--mint); }
.support-card { overflow: visible; }
.support-card::before { display: none; }
.support-card:hover, .reveal-ready .support-card.is-revealed:hover { transform: none; }
.support-card .screenshot-deck { margin-top: 36px; }
.support-card .fan-stage { width: 96%; margin-inline: auto; }
.support-card .gallery-caption { max-width: none; }
.support-card .support-bottom a { color: var(--mint); }
.screenshot-lightbox { width: min(1400px, 94vw); max-width: 94vw; max-height: 94dvh; padding: 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--accent-line); border-radius: 12px; box-shadow: 0 30px 90px #0007; }
.screenshot-lightbox::backdrop { background: #06131bdb; backdrop-filter: blur(9px); }
.lightbox-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 14px; }
.lightbox-header p { font-size: 15px; font-weight: 600; }
.lightbox-count { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }
.lightbox-close, .lightbox-controls button { min-height: 44px; padding: 8px 14px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); border-radius: 5px; }
.lightbox-close { white-space: nowrap; }
.lightbox-image { width: 100%; height: auto; max-height: calc(94dvh - 200px); object-fit: contain; background: var(--paper); }
.lightbox-description { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.lightbox-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 12px; }
.lightbox-original { color: var(--mint); }
.motion-paused .screen-card, .motion-paused .hero-shot { transition: none; }

/* Silver surfaces and slow orbital light give the real interfaces a shared stage. */
.site-header { box-shadow: 0 8px 35px #00000008; }
.wordmark-symbol i { border-radius: 1px; }
.wordmark-symbol i:nth-child(2) { background: linear-gradient(180deg, #d5e3ff, #7196ff); }
.wordmark-symbol i:nth-child(3) { background: #7e91bc; }
.product-navigation { padding-block: 11px; }
.nav-product-group > a { transition: color .25s, text-shadow .25s; }
.nav-product-group > a:hover { text-shadow: 0 0 20px var(--glow); }
.button-accent { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(115deg, #3453c5, #4164d8); border: 1px solid #b2c5ff45; box-shadow: 0 6px 28px #5179f52a, inset 0 1px 0 #ffffff30; }
.button-accent::after { content: ""; position: absolute; z-index: -1; inset: -30% -50%; background: linear-gradient(100deg, transparent 35%, #ffffff10 50%, transparent 65%); transform: translateX(-70%); animation: button-reflection 9s ease-in-out infinite; pointer-events: none; }
.hero { background: radial-gradient(ellipse at 90% 70%, #27346f12, transparent 55%), var(--paper); }
.hero::before { background-size: 80px 80px; opacity: .2; mask-image: linear-gradient(100deg, transparent 8%, #000 80%); }
.hero::after { content: ""; position: absolute; pointer-events: none; left: 0; right: 0; height: 1px; bottom: 0; background: linear-gradient(90deg, transparent, var(--accent-line), var(--metal), transparent); opacity: .5; }
.hero-aurora { top: -25%; right: -12%; width: 85%; height: 145%; opacity: .8; background: radial-gradient(ellipse at 65% 25%, #5577e728, transparent 45%), radial-gradient(ellipse at 25% 65%, #7e5cca17, transparent 50%); animation: atmosphere-drift 20s ease-in-out infinite alternate; }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.atmosphere-halo { position: absolute; width: 60%; height: 90%; left: 39%; top: 5%; border-radius: 50%; background: radial-gradient(ellipse, #6487ff14, transparent 68%); animation: halo-drift 13s ease-in-out infinite alternate; }
.orbital-field { width: 100%; height: 100%; min-width: 1000px; position: absolute; right: -5%; top: 0; opacity: .7; }
.orbit-track { stroke: var(--accent-line); stroke-width: .7; }
.orbit-track-inner { stroke-dasharray: 2 12; opacity: .4; }
.orbit-beam { stroke: url(#orbital-light); stroke-width: 1.4; stroke-dasharray: 90 910; animation: orbital-travel 18s linear infinite; }
.orbit-beam-inner { stroke-width: 1; stroke-dasharray: 50 950; animation-duration: 26s; animation-direction: reverse; }
.field-star { fill: var(--metal); animation: star-breathe 6s ease-in-out infinite alternate; }
.field-star:nth-of-type(2) { animation-delay: -2s; }
.field-star:nth-of-type(3) { animation-delay: -4s; }
.hero-copy > .eyebrow { color: var(--muted); font-size: 10px; letter-spacing: 2.6px; }
.hero h1 { font-weight: 650; line-height: 1.32; }
.gradient-text { background-image: linear-gradient(110deg, var(--metal) 8%, var(--blue) 35%, var(--purple) 62%, var(--metal) 85%); background-size: 260% auto; animation: text-light 11s ease-in-out infinite alternate; }
.hero-statement { color: var(--metal); font-size: 15px; font-weight: 400; }
.hero-lead { color: var(--muted); font-size: 13px; }
.hero-facts { gap: 23px; margin-top: 39px; }
.hero-facts b { font-size: 24px; font-weight: 300; color: var(--metal); }
.hero-product-scene { perspective: 1200px; }
.hero-product-scene::before { content: ""; position: absolute; width: 65%; height: 15%; bottom: 9%; left: 23%; border-radius: 50%; background: #6283ed1a; filter: blur(35px); animation: halo-drift 9s ease-in-out infinite alternate; }
.hero-shot { top: 17%; left: 8%; right: auto; z-index: var(--scene-layer); transform: translate(var(--scene-x), var(--scene-y)) rotate(var(--scene-angle)) scale(var(--scene-scale)); animation: scene-float 8s ease-in-out infinite; border-color: var(--line); background: linear-gradient(125deg, var(--soft), var(--surface)); }
.hero-shot-middle { animation-delay: -2.6s; }
.hero-shot-front { animation-delay: -5.3s; }
.hero-shot.is-active { border-color: var(--accent-line); box-shadow: var(--card-shadow), 0 0 60px var(--glow), inset 0 1px 0 #d6e3ff18; }
.hero-product-scene[data-active="0"] .hero-shot-back,
.hero-product-scene[data-active="1"] .hero-shot-middle,
.hero-product-scene[data-active="2"] .hero-shot-front { --scene-x: 4%; --scene-y: 12%; --scene-angle: -3deg; --scene-scale: 1; --scene-layer: 3; }
.hero-product-scene[data-active="0"] .hero-shot-middle,
.hero-product-scene[data-active="1"] .hero-shot-front,
.hero-product-scene[data-active="2"] .hero-shot-back { --scene-x: -9%; --scene-y: -10%; --scene-angle: -12deg; --scene-scale: .92; --scene-layer: 1; }
.hero-product-scene[data-active="0"] .hero-shot-front,
.hero-product-scene[data-active="1"] .hero-shot-back,
.hero-product-scene[data-active="2"] .hero-shot-middle { --scene-x: 17%; --scene-y: -2%; --scene-angle: 10deg; --scene-scale: .92; --scene-layer: 2; }
.hero-product-scene:focus-within .hero-shot { animation-play-state: paused; }
.hero-shot:focus-visible { z-index: 5; transform: translate(var(--scene-x), calc(var(--scene-y) - 4%)) rotate(0deg) scale(1.01); }
@media (hover: hover) and (pointer: fine) {
  .hero-product-scene:hover .hero-shot { animation-play-state: paused; }
  .hero-shot:hover { z-index: 5; box-shadow: var(--shadow); transform: translate(var(--scene-x), calc(var(--scene-y) - 4%)) rotate(0deg) scale(1.01); }
  .screen-card:hover { z-index: 4; transform: translateY(-5%) rotate(0); }
}
.hero-shot > span { color: var(--ink); }
.scene-heading { color: var(--muted); letter-spacing: 1.8px; }
.scene-indicators { display: flex; gap: 13px; }
.scene-indicators i { font: normal 9px Consolas, monospace; color: var(--muted); opacity: .35; padding-bottom: 5px; border-bottom: 1px solid transparent; transition: color .5s, opacity .5s, border-color .5s; }
.hero-product-scene[data-active="0"] .scene-indicators i:nth-child(1),
.hero-product-scene[data-active="1"] .scene-indicators i:nth-child(2),
.hero-product-scene[data-active="2"] .scene-indicators i:nth-child(3) { color: var(--metal); opacity: 1; border-color: var(--blue); }
.scene-footer { font-size: 10px; }
.hero-bottom { border-top-color: var(--line); }
.capability-section { background: linear-gradient(180deg, var(--surface), var(--paper)); }
.capability-grid article { position: relative; overflow: hidden; }
.capability-grid article::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), var(--metal), transparent); animation: capability-trace 12s ease-in-out infinite; transform: translateX(-100%); }
.capability-grid article:nth-child(2)::before { animation-delay: -8s; }
.capability-grid article:nth-child(3)::before { animation-delay: -4s; }
.capability-tags span { color: var(--muted); border: 1px solid var(--line); background: var(--accent-soft); }
.product-rail > a { background: linear-gradient(145deg, var(--soft), var(--paper) 72%); border-color: var(--line); box-shadow: inset 0 1px 0 #c8d6ff0a; }
.product-rail > a:hover { box-shadow: inset 0 1px 0 #c8d6ff22, 0 18px 40px var(--glow); }
.product-copy h2 > span { color: var(--metal); }
.fan-stage::before { content: ""; position: absolute; inset: 20% 12% 9%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, var(--glow), transparent 70%); }
.screen-card { background: linear-gradient(135deg, var(--soft), var(--surface) 75%); border-color: var(--line); }
.gallery-tabs button { transition: background .3s, color .3s, border-color .3s; }
.gallery-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--soft); border-color: var(--accent-line); box-shadow: inset 0 -2px 0 var(--blue); }
.gallery-enlarge:hover { background: var(--accent-soft); }
.support-card { background: linear-gradient(135deg, var(--surface), var(--paper)); border-color: var(--line); }
.contact-section { background: radial-gradient(ellipse at 75% 20%, var(--glow), transparent 65%), var(--surface); }
.contact-orbit { border-style: dashed; border-color: var(--accent-line); animation: contact-orbit-turn 70s linear infinite; }
[data-theme="light"] .hero-aurora { opacity: .75; }
[data-theme="light"] .orbital-field { opacity: .5; }
[data-theme="light"] .wordmark-symbol i:nth-child(2) { background: linear-gradient(180deg, #627fe4, #3f59b2); }
@keyframes atmosphere-drift { from { transform: translate(0, -3%) rotate(-5deg) scale(.95); } to { transform: translate(-6%, 6%) rotate(7deg) scale(1.12); } }
@keyframes halo-drift { from { transform: translateY(-6px) scale(.96); opacity: .55; } to { transform: translateY(12px) scale(1.08); opacity: 1; } }
@keyframes orbital-travel { to { stroke-dashoffset: -1000; } }
@keyframes star-breathe { from { opacity: .25; } to { opacity: .9; } }
@keyframes scene-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes button-reflection { 0%, 70% { transform: translateX(-70%); } 90%, 100% { transform: translateX(70%); } }
@keyframes capability-trace { 0%, 65%, 100% { transform: translateX(-100%); opacity: 0; } 10%, 35% { opacity: .8; } 45%, 64% { transform: translateX(100%); opacity: 0; } }
@keyframes contact-orbit-turn { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .product-navigation { gap: 15px; }
  .nav-product-group { gap: 16px; }
  .nav-product-group > a { font-size: 12px; }
  .hero-layout { gap: 3%; }
  .hero h1 { font-size: 45px; }
  .hero-lead { font-size: 12px; }
  .hero-product-scene { height: 400px; }
  .hero-shot { top: 17%; }
  .hero-shot > span { font-size: 9px; }
  .capability-grid article { padding: 25px; }
  .capability-grid h3 { font-size: 19px; }
  .product-layout, .reverse-layout { grid-template-columns: 1fr; gap: 45px; }
  .product-copy { max-width: 650px; }
  .screenshot-deck { width: min(100%, 800px); justify-self: center; }
  .reverse-layout .product-copy, .reverse-layout .product-figure { order: initial; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card .screenshot-deck { max-width: 780px; margin-inline: auto; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 54px; }
  .hero-product-scene { width: min(100%, 600px); height: 500px; margin-inline: auto; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 207px; }
  .wrap { width: calc(100% - 36px); }
  .header-inner { height: 62px; }
  .product-navigation { display: block; padding-block: 9px 12px; }
  .nav-product-group { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 3px 5px; }
  .nav-product-group > span { grid-column: 1 / -1; font-size: 9px; letter-spacing: .5px; }
  .nav-product-group > a { min-height: 36px; display: flex; align-items: center; font-size: 11px; letter-spacing: -.3px; }
  .related-navigation { margin-top: 3px; display: flex; gap: 16px; }
  .related-navigation > span { font-size: 9px; }
  .related-navigation > a { min-height: 28px; }
  .main-nav { top: 62px; z-index: 6; }
  .hero-layout { grid-template-columns: 1fr; gap: 30px; min-height: 0; padding-top: 40px; }
  .hero h1 { font-size: clamp(35px, 7.9vw, 55px); letter-spacing: -1.5px; }
  .hero-lead { font-size: 12px; }
  .hero-product-scene { width: min(100%, 600px); height: auto; aspect-ratio: 1.12; margin-inline: auto; }
  .orbital-field { right: -85%; opacity: .45; }
  .hero-aurora { width: 150%; right: -45%; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  .hero-statement { font-size: 13px; }
  .hero-shot { border-radius: 6px; padding: 6px; }
  .hero-shot > span { padding: 3px 2px 7px; font-size: 8px; }
  .hero-shot b { font-size: 7px; }
  .scene-heading { font-size: 7px; letter-spacing: 1px; }
  .scene-heading > span:last-child { font-size: 7px; }
  .scene-footer { font-size: 9px; }
  .hero-facts > span:last-child, .hero-facts > i:last-of-type { display: none; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article, .capability-grid article:first-child, .capability-grid article:last-child { padding: 25px 0; border: 0; border-bottom: 1px solid var(--line); }
  .capability-grid article:last-child { border-bottom: 0; }
  .capability-grid h3 { font-size: 22px; margin-top: 14px; }
  .capability-grid p { font-size: 13px; }
  .capability-tags { margin-block: 15px; }
  .capability-section, .products-intro { padding-block: 55px; }
  .product-section { padding-block: 55px; }
  .product-copy h2 { font-size: 32px; }
  .product-lead { font-size: 13px; }
  .feature-list li { font-size: 11px; }
  .gallery-heading { font-size: 9px; }
  .fan-stage { aspect-ratio: 1.15; }
  .screen-card { padding: 5px; border-radius: 6px; top: 19%; }
  .screen-card-bar { font-size: 8px; padding-bottom: 7px; }
  .screen-card-bar .window-dots { gap: 2px; }
  .screen-card-bar .window-dots i { width: 3px; height: 3px; }
  .screen-card-foot { font-size: 9px; padding-block: 7px 2px; }
  .gallery-controls { align-items: stretch; flex-wrap: wrap; }
  .gallery-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; gap: 5px; }
  .gallery-tabs button { padding: 8px 5px; font-size: 10px; }
  .gallery-tabs button > span { font-size: 8px; margin-right: 3px; }
  .gallery-enlarge { width: 100%; font-size: 11px; }
  .screenshot-deck figcaption { font-size: 10px; }
  .support-card { padding: 23px 16px; }
  .screenshot-lightbox { padding: 12px; width: 96vw; max-width: 96vw; }
  .lightbox-header p { font-size: 12px; }
  .lightbox-controls { font-size: 10px; }
}
@media (max-width: 380px) { .hero h1 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .screen-card, .hero-shot { transition: none; } }
@media print { .hero-product-scene, .hero-atmosphere { display: none; } .gallery-controls { display: none; } .fan-stage { display: grid; gap: 15px; aspect-ratio: auto; } .screen-card, .screen-card.is-active { position: static; width: 100%; transform: none; } }

/* Product marks are copied from the corresponding live product sources. */
.product-logo { display: block; flex: none; object-fit: contain; }
.product-brand > .product-logo { width: 36px; height: 36px; }
.rail-top .product-logo { width: 30px; height: 30px; }
.connection-grid .product-logo { width: 36px; height: 36px; }
.support-top .product-logo { width: 48px; height: 48px; }
html[data-theme="dark"] .product-logo[src$="ai-logo.svg"] { background: #f7f6ff; padding: 3px; border-radius: 6px; }
@media (max-width: 760px) { .rail-top .product-logo { width: 26px; height: 26px; } .connection-grid .product-logo { width: 32px; height: 32px; } }