/* CLEOWebsites.ca — page-scoped composition for the "cleo-os" page.
 * Lifted verbatim from the approved J2 prototype (cleo-os.html), which kept each
 * page's own composition in a page <style> block. Kept per-page rather than
 * merged into system.css on purpose: #open and #close are each used by three
 * different pages with different rules, and merging would silently cross them.
 * Everything shared lives in system.css. */

/* The whole page sits in the cooled room — CLEO's light, held steady,
     rather than the homepage's crossing into it. */
  #open .scene__body{align-items:flex-end;padding-bottom:clamp(56px,9vh,104px)}
  #knows .scene__body{align-items:center;gap:clamp(30px,4vw,80px);padding-top:110px;padding-bottom:80px}
  #knows .knows__l{flex:1 1 46%;max-width:460px}
  #knows .knows__r{flex:1 1 50%}
  #ask .scene__body{flex-direction:column;justify-content:center;gap:clamp(12px,1.8vh,20px);
    padding-top:92px;padding-bottom:56px}
  .xchgs{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  /* three exchanges have to sit inside one viewport, or the third is a
     surprise the visitor only finds by scrolling past the point */
  #ask .xchg{width:min(540px,52vw)}
  #ask .xchg__q{padding:13px 18px;font-size:16px}
  #ask .xchg__a{padding:13px 18px;font-size:16px;line-height:1.48}
  #ask .xchg__src{padding:8px 18px}
  #ask .h-sec{font-size:clamp(23px,2.3vw,32px)}
  .xchgs .xchg:nth-child(2){align-self:center}
  .xchgs .xchg:nth-child(3){align-self:flex-end}
  #status .scene__body{align-items:center;justify-content:center;flex-direction:column;
    text-align:center;gap:20px}
  @media (max-width:820px){
    #knows .scene__body{flex-direction:column;align-items:flex-start;gap:22px;padding-top:96px}
    #knows .knows__l,#knows .knows__r{flex:none;width:100%;max-width:100%}
    #open .scene__body{padding-bottom:44px}
    .xchgs .xchg:nth-child(2),.xchgs .xchg:nth-child(3){align-self:stretch}
    #ask .xchg{width:100%}
  }