/* AIQT site — shared stylesheet.
   AIQT palette (dark default + light) with a cleanlanguage.ai-scale type system:
   Inter + system fallback, large headings, wide hero, generous whitespace, and a
   teal "eyebrow" kicker above every section. */

/* dark is the default; a [data-theme] attribute (set by the toggle) beats the OS setting */
:root{
  --bg:#0b1220; --panel:#111b2e; --panel-2:#0e1728;
  --ink:#e6edf3; --muted:#9fb0c3; --faint:#6b7d94;
  --line:#1e2c44; --accent:#5eb0ef; --accent-2:#7ee0c8;
  --on-accent:#08111f; --on-accent-2:#08111f;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --panel:#111b2e; --panel-2:#0e1728;
  --ink:#e6edf3; --muted:#9fb0c3; --faint:#6b7d94;
  --line:#1e2c44; --accent:#5eb0ef; --accent-2:#7ee0c8;
  --on-accent:#08111f; --on-accent-2:#08111f;
}
:root[data-theme="light"]{
  --bg:#f7f9fc; --panel:#ffffff; --panel-2:#f0f4fa;
  --ink:#101828; --muted:#41506a; --faint:#54637a;
  --line:#e2e8f2; --accent:#1d6fd0; --accent-2:#0d9488;
  --on-accent:#ffffff; --on-accent-2:#ffffff;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f9fc; --panel:#ffffff; --panel-2:#f0f4fa;
    --ink:#101828; --muted:#41506a; --faint:#54637a;
    --line:#e2e8f2; --accent:#1d6fd0; --accent-2:#0d9488;
    --on-accent:#ffffff; --on-accent-2:#ffffff;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  margin:0; background:var(--bg); color:var(--ink);
  font-size:1.19rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px; margin:0 auto; padding:0 1.5rem}

section{padding:1.25rem 0}
h1,h2,h3{line-height:1.12; letter-spacing:-.025em; font-weight:750}
h1{font-size:clamp(2.1rem,4vw,3.2rem)}
h2{font-size:clamp(1.85rem,3.2vw,2.75rem); margin:0 0 1.15rem}
h3{font-size:1.42rem; margin:0 0 .5rem}
p{color:var(--muted); margin:0 0 1.05rem}
.lead{font-size:clamp(1.24rem,1.7vw,1.42rem); color:var(--ink); line-height:1.55}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em}

/* the teal kicker above every section */
.eyebrow{color:var(--accent-2); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; font-size:1.02rem; margin:0 0 .95rem}

/* top navigation */
.topnav{padding:.85rem 0 .3rem}
.navrow{display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.7rem}
.brand{font-weight:800; font-size:1.15rem; color:var(--ink); letter-spacing:.02em}
.brand:hover{text-decoration:none}
.navlinks{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.navlinks a{color:var(--muted); font-size:1.08rem}
.navlinks a.plain:hover{color:var(--ink); text-decoration:none}
/* the two divergent-path links rendered as buttons */
.navlinks a.navbtn{color:var(--accent); font-weight:700; font-size:1.02rem; padding:.5rem 1.1rem;
    border:1px solid var(--accent); border-radius:999px; background:var(--panel)}
.navlinks a.navbtn:hover{background:var(--accent); color:var(--on-accent); border-color:transparent; text-decoration:none}

/* hero */
header.hero{padding:6rem 0 4.5rem; text-align:center; background:
  radial-gradient(1200px 420px at 50% -10%, rgba(94,176,239,.14), transparent 70%)}
header.hero h1{font-size:clamp(2.5rem,4.8vw,3.95rem); margin:0 auto 1.4rem; max-width:680px}
header.hero .lead{max-width:62ch; margin:0 auto 1.7rem}
.ordering{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1.2rem; color:var(--ink); font-size:1.14rem; margin-top:.4rem}
.ordering .tier{color:var(--accent-2); font-weight:700}
.orderingnote{font-size:1.02rem; color:var(--faint); margin-top:.7rem}
.cta{margin-top:2.1rem; display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:.8rem 1.5rem; border-radius:10px; font-weight:650;
  border:1px solid var(--line); font-size:1.14rem}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:transparent}
.btn.primary:hover{text-decoration:none; filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn.ghost:hover{text-decoration:none; background:var(--accent); color:var(--on-accent); border-color:transparent}

/* internal page header (install, roadmap, developers, teams) */
.pagehead{padding-top:3.75rem; padding-bottom:1.25rem}
.pagehead h1{margin:.2rem 0 1.15rem}

/* generic two-column grid of cards */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.6rem}
.card h3{color:var(--ink)}
.card p{margin:0}

/* three divergent paths */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem}
.path h3{margin:0}
.path p{margin:0; flex:1}
.path .btn{align-self:flex-start; margin-top:.3rem; padding:.65rem 1.25rem; font-size:1.08rem}

/* platform quick-start (install page) */
.platforms{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
@media (max-width:760px){.platforms{grid-template-columns:1fr}}
.platform{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem}
.platform h3{margin:0}
.platform p{margin:0; flex:1}
.platform .btn{align-self:flex-start; padding:.6rem 1.15rem; font-size:1.06rem}
.installlinks{margin-top:1.4rem; display:flex; gap:1.8rem; flex-wrap:wrap}
.installlinks a{font-weight:650}

/* numbered lists: rules and setup steps */
ol.rules,ol.steps{counter-reset:r; list-style:none; padding:0; margin:0}
ol.rules li,ol.steps li{background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:1.1rem 1.2rem 1.1rem 3.5rem; position:relative; margin:.75rem 0}
ol.rules li::before,ol.steps li::before{counter-increment:r; content:counter(r);
  position:absolute; left:1.05rem; top:1.05rem; width:1.7rem; height:1.7rem; border-radius:50%;
  color:var(--on-accent); font-weight:700; font-size:.92rem; display:flex; align-items:center;
  justify-content:center}
ol.rules li::before{background:var(--accent)}
ol.steps li::before{background:var(--accent-2); color:var(--on-accent-2)}
ol.rules b,ol.steps b{color:var(--ink)}
ol.rules p,ol.steps li{color:var(--muted)}
ol.rules p{margin:.3rem 0 0}

ul.clean{margin:.5rem 0 0; padding-left:1.2rem}
ul.clean li{margin:.35rem 0; color:var(--muted)}

/* directory tree (development page) */
.tree{background:var(--panel-2); border:1px solid var(--line); border-radius:14px;
  padding:1.3rem 1.5rem; overflow-x:auto; margin:1.5rem 0 1rem}
.tree pre{margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.06rem; line-height:1.8; color:var(--muted)}
.tree .dir{color:var(--ink); font-weight:600}
.tree .yours{color:var(--accent-2); font-weight:600}
.tree .updater{color:var(--accent); font-weight:600}
.tree .note{color:var(--faint)}

/* status pills */
.pill{display:inline-block; font-size:.88rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.26rem .75rem; border-radius:999px; margin-bottom:.2rem;
  align-self:flex-start}
.pill.now{background:rgba(126,224,200,.16); color:var(--accent-2)}
.pill.next{background:rgba(94,176,239,.16); color:var(--accent)}
.pill.idea{background:rgba(155,176,195,.14); color:var(--muted)}
.idea-note{font-size:1.02rem; color:var(--faint)}

footer{border-top:1px solid var(--line); padding:2.6rem 0 3.2rem; text-align:center; margin-top:2rem}
footer p{color:var(--faint); font-size:1.04rem; margin:.35rem 0}

/* dark/light toggle */
.themetoggle{font:inherit; cursor:pointer; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:.42rem .9rem; font-size:1rem;
  font-weight:650; margin-left:.35rem}
.themetoggle:hover{border-color:var(--accent); color:var(--accent)}

/* examples: without/with comparison (linear, one example per row) */
.example{margin:0 0 1.9rem}
.example h3{font-size:1.42rem; margin:0 0 .7rem}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:640px){.compare{grid-template-columns:1fr}}
.compare .col{border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.5rem}
.compare .without{background:var(--panel-2)}
.compare .with{background:rgba(126,224,200,.10); border-color:var(--accent-2)}
.compare .lbl{font-size:.9rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .55rem}
.compare .without .lbl{color:var(--faint)}
.compare .with .lbl{color:var(--accent-2)}
.compare .col p:last-child{margin:0}

/* cleanlanguage-style platform install buttons (welcoming, non-technical) */
.platform-actions{margin:1.9rem 0 0; display:grid; grid-template-columns:repeat(12,1fr); gap:.9rem}
.platform-button{grid-column:span 4; display:flex; align-items:center; gap:.95rem; min-height:86px;
  padding:1.1rem 1.25rem; border:1px solid var(--line); border-radius:16px; background:var(--panel);
  text-align:left; text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease}
.platform-button:hover{transform:translateY(-3px); border-color:var(--accent); text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.16)}
.platform-button.wide{grid-column:span 6}
@media (max-width:760px){.platform-button,.platform-button.wide{grid-column:span 12}}
.platform-button strong,.platform-button small{display:block}
.platform-button strong{font-size:1.1rem; line-height:1.2; color:var(--ink)}
.platform-button small{margin-top:.25rem; color:var(--muted); font-size:.98rem; line-height:1.35}
.platform-icon{flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center;
  border-radius:13px; color:#fff; font-size:1.1rem; font-weight:800; letter-spacing:-.03em}
.platform-icon.claude{background:#c15f3c}
.platform-icon.chatgpt{background:#10a37f}
.platform-icon.copilot{background:linear-gradient(135deg,#0a6ed1,#2ec6c2)}
.platform-icon.guide{background:var(--accent)}
.platform-icon.source{background:#4a5568; font-size:.92rem}

/* secondary content-tab bar (row 2, cleanlanguage-style pills) */
.subnav{border-bottom:1px solid var(--line); padding:.3rem 0 .7rem}
.subrow{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:center}
.subnav a{display:inline-flex; align-items:center; padding:.5rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font-weight:650;
  font-size:1.02rem; text-decoration:none}
.subnav a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.subnav a.active,.subnav a.active:hover{background:var(--accent); border-color:transparent; color:var(--on-accent)}