/* Architecture v2: scoped to the replaced section. Earlier approved scenes
   and all shared typography, product media and responsive rules stay frozen. */
#architecture { padding:128px 0 0; }
#architecture .av-heading-row { display:grid; grid-template-columns:minmax(0,1fr) 362px; gap:56px; align-items:end; margin-bottom:36px; }
#architecture .av-label { margin:0 0 24px; font-size:11px; line-height:1.4; letter-spacing:.06em; }
#architecture .av-support { font-size:18px; line-height:1.5; color:var(--muted); }
#architecture .av-support p+p { margin-top:20px; }
#architecture .av-scene { margin:0; position:relative; height:448px; isolation:isolate; }
#architecture .av-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; }
#architecture .av-line { fill:none; stroke:var(--construction); stroke-width:1; vector-effect:non-scaling-stroke; }
#architecture .av-active-line { stroke:var(--accent); }
#architecture .av-planned-line { stroke-dasharray:4 5; }
#architecture .av-node-label { margin:0; font-size:11px; line-height:1.45; text-transform:uppercase; letter-spacing:.055em; }
#architecture :is(.av-label,.av-node-label,.av-stream-label,.av-storage-path-label) { font-weight:500; font-variation-settings:"SHRP" 90,"CRSV" 0,"slnt" 0; }
#architecture .av-cameras { position:absolute; left:0; top:24px; width:20%; z-index:1; }
#architecture .av-camera { width:calc(100% - 24px); margin:24px 0 0; padding:6px 6px 0; border:1px solid var(--hairline); border-radius:6px; background:var(--paper); }
#architecture .av-camera-two { margin:20px 0 0 24px; }
#architecture .av-camera img { width:100%; height:108px; object-fit:cover; }
#architecture .av-camera figcaption { display:flex; align-items:center; justify-content:space-between; height:30px; font-size:13px; line-height:1.45; }
#architecture .av-camera figcaption span { color:var(--muted); font-size:11px; }
#architecture .av-discovery { margin:16px 0 0 24px; font-size:13px; line-height:1.5; color:var(--muted); }
#architecture .av-stream-label { position:absolute; color:var(--accent); font-size:11px; letter-spacing:.05em; line-height:1.45; background:var(--canvas); padding:4px; z-index:2; }
#architecture .av-core { position:absolute; left:26%; top:24px; width:34%; height:288px; padding:26px 28px; border-radius:12px; background:var(--product-dark); color:var(--paper); display:flex; flex-direction:column; z-index:1; }
#architecture .av-core-brand { display:flex; align-items:center; gap:10px; font-size:20px; line-height:27px; font-weight:500; font-variation-settings:"SHRP" 90,"CRSV" 0,"slnt" 0; letter-spacing:.055em; }
#architecture .av-core h3 { margin:16px 0 0; font-size:32px; line-height:1.15; font-weight:450; font-variation-settings:"SHRP" 80,"CRSV" 0,"slnt" 0; letter-spacing:-.6px; }
#architecture .av-core-functions { margin-top:16px; font-size:14px; line-height:1.7; }
#architecture .av-core-functions span { padding:0 6px; color:var(--construction); }
#architecture .av-health { display:flex; align-items:end; justify-content:space-between; gap:20px; padding-top:16px; margin-top:auto; border-top:1px solid rgb(255 255 255 / 15%); }
#architecture .av-health>p { font-size:13px; line-height:1.5; color:var(--construction); text-align:right; }
/* Native tabHealth uptime fragment. Its own font, colors and fixture value
   are preserved; this is a sample, not measured server availability. */
#architecture .av-native-status { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-variation-settings:normal; font-synthesis:initial; }
#architecture .av-native-status .v-metric { display:flex; flex-direction:column; gap:2px; min-width:0; }
#architecture .av-native-status .v-metric__label { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:rgba(238,241,248,.42); }
#architecture .av-native-status .v-metric__value { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; font-weight:600; font-size:26px; color:#F2F3F7; }
#architecture .av-storage { position:absolute; left:28%; top:340px; width:30%; min-height:108px; padding:20px 24px; border:1px solid var(--construction); border-radius:12px; background:var(--paper); display:flex; gap:20px; align-items:center; z-index:1; }
#architecture .av-storage svg { flex:none; fill:none; stroke:var(--construction); stroke-width:1; }
#architecture .av-storage h3 { margin:0; font-size:26px; line-height:1.2; font-weight:450; font-variation-settings:"SHRP" 80,"CRSV" 0,"slnt" 0; letter-spacing:-.5px; }
#architecture .av-storage p { margin-top:6px; font-size:16px; line-height:1.5; }
#architecture .av-storage-path-label { position:absolute; font-size:13px; line-height:1.5; color:var(--muted); background:var(--canvas); padding:2px 6px; z-index:2; }
#architecture .av-clients { position:absolute; top:24px; right:0; width:28%; z-index:1; }
#architecture .av-web-client { margin-top:18px; border-top:1px solid var(--hairline); }
#architecture .av-client { padding:16px; }
#architecture .av-browser { padding:16px 0; }
#architecture .av-client-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
#architecture .av-client-title h3 { margin:0; font-size:22px; font-weight:450; font-variation-settings:"SHRP" 80,"CRSV" 0,"slnt" 0; line-height:1.25; letter-spacing:-.4px; }
#architecture .av-client p { margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); }
#architecture .av-available { color:var(--muted); font-size:11px; line-height:1.45; flex:none; }
#architecture .av-pwa { background:var(--accent-soft); border-radius:6px; }
#architecture .av-pwa h3 { color:var(--accent); }
#architecture .av-pwa p { color:var(--ink); }
#architecture .av-same-client { margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
#architecture .av-desktop { margin-top:22px; border:1px dashed var(--construction); border-radius:6px; }
#architecture .av-desktop .av-client-title { flex-wrap:wrap; gap:8px 12px; }
#architecture .av-desktop h3 { font-size:17px; line-height:1.35; letter-spacing:-.2px; color:var(--muted); }
#architecture .av-future { display:inline-block; padding:3px 7px; border:1px solid var(--construction); border-radius:3px; color:var(--muted); font-size:11px; line-height:1.4; white-space:nowrap; }
#architecture .av-routes { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; padding-top:20px; margin-top:20px; border-top:1px solid var(--hairline); }
#architecture .av-route h3 { font-size:14px; line-height:1.45; font-weight:500; font-variation-settings:"SHRP" 55,"CRSV" 0,"slnt" 0; margin:0 0 12px; }
#architecture .av-route p { display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.5; }
#architecture .av-route p>span:not(.av-route-connector) { flex:none; }
#architecture .av-route-connector { position:relative; min-width:24px; flex:1; height:1px; border-top:1px solid var(--construction); }
#architecture .av-route-connector::after { content:""; position:absolute; right:0; top:-3px; width:5px; height:5px; border-top:1px solid var(--construction); border-right:1px solid var(--construction); transform:rotate(45deg); }
#architecture .av-route-remote .av-route-connector { border-top-style:dashed; }
#architecture .av-route-remote .av-route-connector:last-of-type::after { border-color:var(--accent); }
#architecture .av-meta-row { margin-top:18px; display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:48px; align-items:start; }
#architecture .av-transfer-note { max-width:570px; font-size:13px; line-height:1.5; color:var(--muted); }
#architecture .av-infrastructure { padding-left:16px; border-left:1px dashed var(--construction); }
#architecture .av-infrastructure>p+p { margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); }
#architecture .av-fixture-note { margin-top:22px; font-size:11px; line-height:1.5; color:var(--muted); }
@media (max-width:1279px) {
  #architecture { padding-top:96px; }
  #architecture .av-heading-row { grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; margin-bottom:48px; }
  #architecture .av-support { max-width:650px; }
  #architecture .av-scene { display:grid; grid-template-columns:minmax(0,1fr); gap:60px; height:auto; max-width:760px; margin:0 auto; }
  #architecture .av-cameras { position:relative; left:auto; top:auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
  #architecture .av-cameras>.av-node-label { grid-column:1/-1; }
  #architecture .av-camera { width:100%; margin:0; }
  #architecture .av-camera-two { margin:0; }
  #architecture .av-camera img { height:auto; aspect-ratio:16 / 9; }
  #architecture .av-discovery { grid-column:1/-1; margin:0; }
  #architecture .av-core { position:relative; left:auto; top:auto; width:min(100%,540px); height:288px; justify-self:center; }
  #architecture .av-storage { position:relative; left:auto; top:auto; width:min(100%,460px); justify-self:center; }
  #architecture .av-clients { position:relative; right:auto; top:auto; width:100%; padding-top:8px; }
  #architecture .av-web-client { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:16px; }
  #architecture .av-browser { padding:16px 0; }
  #architecture .av-same-client { grid-column:1/-1; margin-top:0; }
  #architecture .av-desktop { margin-top:24px; width:100%; }
  #architecture .av-desktop .av-client-title { flex-wrap:nowrap; }
  #architecture .av-routes { grid-template-columns:minmax(0,1fr); gap:24px; max-width:760px; margin:32px auto 0; }
  #architecture .av-route p { max-width:760px; }
  #architecture .av-meta-row { grid-template-columns:minmax(0,1fr); gap:24px; max-width:760px; margin:24px auto 0; }
  #architecture .av-infrastructure { margin-top:0; padding-top:0; }
  #architecture .av-fixture-note { max-width:760px; margin:24px auto 0; }
}