/* Home architecture section only. Every rule is scoped to #architecture.
   No rule here targets :root, html, body, section, headings, buttons or shared
   layout classes. Tokens come from assets/site.css and are not redefined here. */

/* Target architecture plate: one subdivided frame, drafting encoding (dashed outer frame, open corners). */
#architecture .plate{
  margin:0; position:relative; border:1px dashed var(--ink3); border-radius:16px; padding:18px;
  background:
    linear-gradient(var(--ink3),var(--ink3)) top left / 18px 1px no-repeat,
    linear-gradient(var(--ink3),var(--ink3)) top left / 1px 18px no-repeat,
    linear-gradient(var(--ink3),var(--ink3)) top right / 18px 1px no-repeat,
    linear-gradient(var(--ink3),var(--ink3)) top right / 1px 18px no-repeat,
    linear-gradient(var(--ink3),var(--ink3)) bottom left / 18px 1px no-repeat,
    linear-gradient(var(--ink3),var(--ink3)) bottom left / 1px 18px no-repeat,
    linear-gradient(var(--ink3),var(--ink3)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--ink3),var(--ink3)) bottom right / 1px 18px no-repeat,
    var(--navy2);
}
#architecture .plate-caption{margin:0 0 14px; font-size:13px; color:var(--ink2)}
#architecture .areas-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:10px; overflow:hidden}
#architecture .area{background:var(--navy2); padding:18px 16px; position:relative; min-width:0; overflow-wrap:anywhere; transition:color .18s cubic-bezier(.2,0,0,1), box-shadow .18s cubic-bezier(.2,0,0,1)}
#architecture .area strong{display:block; font-size:15px; font-weight:600; color:var(--ink)}
#architecture .area ul{list-style:none; margin:8px 0 0; padding:0; font-size:13px; color:var(--ink2); line-height:1.5}
#architecture .area li + li::before{content:"· "; color:var(--ink3)}
#architecture .a-cloud,#architecture .a-studio{grid-column:span 2}
#architecture .a-studio{background:var(--navy3)}
#architecture .a-studio .layer-label{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin:0 0 6px}
@media (min-width:1200px){
  #architecture .areas-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  #architecture .a-flight,#architecture .a-companion,#architecture .a-ai{grid-column:span 2}
  #architecture .a-video,#architecture .a-cloud{grid-column:span 3}
  #architecture .a-studio{grid-column:span 6}
}
@media (max-width:420px){
  #architecture .areas-grid{grid-template-columns:minmax(0,1fr)}
  #architecture .a-cloud,#architecture .a-studio{grid-column:span 1}
}
/* Lit (selected scenario): 2px cyan inset ring plus a square marker. Fill is not changed (fill is reserved for proof). */
#architecture .area.lit{box-shadow:inset 0 0 0 2px var(--cyan)}
#architecture .lit-tag{display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--cyan2)}
#architecture .area.lit::before{content:""; position:absolute; top:14px; right:14px; left:auto; width:8px; height:8px; background:var(--cyan)}
#architecture .has-sel .area:not(.lit) strong,
#architecture .has-sel .area:not(.lit) ul,
#architecture .has-sel .area:not(.lit) li + li::before{color:var(--ink3)}

/* Aveoni Companion: first-party, visually prominent. No specification or maturity claim. */
#architecture .fp-tag{display:inline-block; white-space:nowrap; padding:2px 8px; border:1px solid var(--cyan); border-radius:999px; color:var(--cyan); margin-right:6px}
#architecture .first-party{color:var(--ink)}
#architecture .has-sel .area:not(.lit) .first-party,
#architecture .has-sel .area:not(.lit) .ref{color:var(--ink3)}
#architecture .has-sel .area:not(.lit) .fp-tag{color:var(--ink3); border-color:var(--line2)}

/* Scenarios: native radios, outcome panel. Without JavaScript every scenario is shown as text. */
#architecture .intro,#architecture .mission-line{max-width:62ch}
#architecture .arch-body{margin-top:34px; display:grid; gap:26px}
@media (min-width:1024px){#architecture .arch-body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start}}
#architecture .plate-wrap,#architecture .rail{min-width:0}
@media (max-width:1023.98px){
  #architecture .arch-body{display:flex; flex-direction:column; gap:20px}
  #architecture .rail{display:contents}
  #architecture .scn-boundary,#architecture .rail fieldset{order:1}
  #architecture .plate-wrap{order:2}
  #architecture .idle,#architecture .scn{order:3}
}
#architecture .rail fieldset{border:0; margin:0; padding:0; display:none}
.is-enhanced #architecture .rail fieldset{display:block}
#architecture .rail legend{font-size:13px; color:var(--ink3); margin:0 0 10px; padding:0}
#architecture .scn-boundary{margin:0 0 14px; font-size:14px; color:var(--ink2)}
#architecture .opt{display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 14px; margin:0 0 8px; border:1px solid #66748f; border-radius:12px; background:var(--navy2); cursor:pointer; font-size:15px; color:var(--ink)}
#architecture .opt input{width:18px; height:18px; accent-color:var(--cyan); margin:0}
#architecture .opt:has(input:checked){border-color:var(--cyan); background:var(--navy3)}
@media (hover:hover){#architecture .opt:hover{border-color:var(--ink2); background:var(--navy3)}}
#architecture .opt input:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
#architecture .opt:has(input:focus-visible){outline:2px solid var(--cyan); outline-offset:2px}
#architecture .scn{margin:0 0 14px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--navy2)}
#architecture .scn .outcome{margin:10px 0 0; color:var(--ink); font-size:15px}
#architecture .scn .areas{margin:10px 0 0; font-size:13px; color:var(--ink2)}
#architecture .scn details{margin-top:12px}
#architecture .scn summary{cursor:pointer; color:var(--cyan2); font-size:14px; font-weight:600; min-height:44px; display:flex; align-items:center}
#architecture .scn details p{margin:6px 0 0; font-size:14px; color:var(--ink2)}
.is-enhanced #architecture .scn{display:none}
.is-enhanced #architecture .scn.is-current{display:block}
#architecture .idle{display:none; margin:0; padding:18px; border:1px dashed var(--line2); border-radius:14px; color:var(--ink2); font-size:15px}
.is-enhanced #architecture .idle.show{display:block}

/* Proof: solid filled plates, visibly different from the dashed design plate. */
#evidence .proof-boundary{margin:10px 0 0; font-size:15px; color:var(--ink2)}
#evidence .proofs{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px}
@media (min-width:1024px){#evidence .proofs{grid-template-columns:repeat(2,minmax(0,1fr))}}
#evidence .proofs li{background:var(--navy3); border:1px solid var(--line2); border-radius:12px; padding:20px; min-width:0}
#evidence .proofs .claim{margin:0; font-size:15px; color:var(--ink)}
#evidence .proofs .scope{margin:12px 0 0; font-size:14px; color:var(--ink2)}
#evidence .proofs .scope b{color:var(--ink2); font-weight:600}
#evidence .cta{margin-top:28px}

@media (forced-colors:active){
  #architecture .area.lit{outline:3px solid Highlight; outline-offset:-4px}
  #architecture .area.lit::before{forced-color-adjust:none; background:Highlight}
  #architecture .opt:has(input:checked){outline:2px solid Highlight; outline-offset:-2px}
  #architecture .opt:has(input:focus-visible){outline:2px solid Highlight; outline-offset:2px}
}
@media (prefers-reduced-motion: reduce){
  #architecture .area{transition:none}
}

#architecture .comp{font-size:12.5px;line-height:1.4}