/* ============================================================
   appcrane.dev "scan" layer: the home page and the install page.
   One idea per section, one visual per section, ported from
   moorai.dev's moorai-scan.css. Colours are appcrane-theme.css
   --at-* tokens only (scripts/check-theme.mjs fails any literal
   outside the window-control dots). Linked from each page's head
   after /appcrane-theme.css and /fonts.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;background:var(--at-bg);color:var(--at-text)}
.sx{--sx-sans:'Outfit','Helvetica Neue',Arial,sans-serif;--sx-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;font-family:var(--sx-sans);color:var(--at-text)}
.sx a{color:var(--at-accent)}
.sx code{font-family:var(--sx-mono);font-size:.86em;background:var(--at-surface-2);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.sx-wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── type ── */
.sx-eyebrow{display:block;font-family:var(--sx-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--at-accent);margin-bottom:18px}
.sx-h1{font-size:clamp(40px,6.2vw,76px);font-weight:800;letter-spacing:-.04em;line-height:1.03;color:var(--at-text)}
.sx-h1 .sx-accent{color:var(--at-accent)}
.sx-sub{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--at-text-2);max-width:660px;margin:22px auto 0}
.sx-h2{font-size:clamp(30px,4.2vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.08;color:var(--at-text)}
.sx-body{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--at-text-2);margin-top:20px;max-width:520px}
.sx-more{display:inline-block;margin-top:22px;font-size:17px;font-weight:600;color:var(--at-accent);text-decoration:none}
.sx-more:hover{text-decoration:underline}

/* ── buttons ── */
.sx-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 24px;border-radius:999px;font-family:var(--sx-sans);font-size:16px;font-weight:600;text-decoration:none;border:1px solid var(--at-accent);transition:background .2s,color .2s,border-color .2s}
.sx .sx-btn--primary{background:var(--at-accent);color:var(--at-accent-ink)}
.sx .sx-btn--primary:hover{background:var(--at-accent-2);border-color:var(--at-accent-2)}
.sx .sx-btn--ghost{background:transparent;color:var(--at-accent)}
.sx .sx-btn--ghost:hover{background:var(--at-accent-soft)}
.sx :focus-visible{outline:2px solid var(--at-accent);outline-offset:3px;border-radius:6px}

/* ── hero ── */
.sx-hero{padding:96px 0 96px;text-align:center}
.sx-hero .sx-visual{margin:56px auto 0;max-width:920px;text-align:left}
.sx-fine{font-size:14px;color:var(--at-muted);margin-top:16px}
.sx-fine a{color:var(--at-text-2)}

/* ── sections ── */
.sx-sec{padding:150px 0;border-top:1px solid var(--at-line)}
.sx-sec--tint{background:var(--at-surface)}
.sx-center{text-align:center}
.sx-center .sx-body{margin-left:auto;margin-right:auto}
.sx-center .sx-visual{margin:56px auto 0}
.sx-band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.sx-band--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.sx-band--flip .sx-copy{order:2}
.sx-band--flip .sx-visual{order:1}
.sx-visual{min-width:0}
.sx-cap{font-size:13px;line-height:1.5;color:var(--at-muted);text-align:center;margin-top:12px}

/* ── proof strip: every figure is the linked page's own ── */
.sx-proof{padding:8px 0 120px}
.sx-proof ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--at-line);border:1px solid var(--at-line);border-radius:20px;overflow:hidden}
.sx-proof li{background:var(--at-surface)}
.sx-proof a{display:flex;flex-direction:column;gap:8px;height:100%;padding:26px 24px;text-decoration:none;color:var(--at-text);transition:background .2s}
.sx-proof a:hover{background:var(--at-surface-2)}
.sx-proof .n{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--at-text)}
.sx-proof .l{font-size:15px;line-height:1.45;color:var(--at-text-2)}
.sx-proof .s{margin-top:auto;font-size:13px;font-weight:600;color:var(--at-accent)}

/* ── terminal (an illustrative agent session) ── */
.sx-term{border-radius:16px;border:1px solid var(--at-line-2);background:var(--at-bg);box-shadow:0 30px 80px -40px var(--at-shadow);overflow:hidden;font-family:var(--sx-mono)}
.sx-sec--tint .sx-term{background:var(--at-bg)}
.sx-term__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--at-line);background:var(--at-surface)}
.sx-term__dot{width:11px;height:11px;border-radius:50%;flex:none}
.sx-term__dot:nth-child(1){background:#ff5f56}
.sx-term__dot:nth-child(2){background:#ffbd2e}
.sx-term__dot:nth-child(3){background:#27c93f}
.sx-term__title{margin-left:8px;font-size:12px;color:var(--at-muted)}
.sx-code{margin:0;padding:20px 22px;font-family:var(--sx-mono);font-size:13px;line-height:1.75;color:var(--at-text);white-space:pre;overflow-x:auto}
.sx-code .c{color:var(--at-muted)}
.sx-code .p{color:var(--at-accent)}
.sx-code .o{color:var(--at-ok)}

/* ── diagrams ── */
.sx-card{background:var(--at-surface);border:1px solid var(--at-line);border-radius:20px;padding:28px}
.sx-sec--tint .sx-card{background:var(--at-bg)}
.sx-node{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--at-line-2);border-radius:14px;background:var(--at-surface);text-align:center}
.sx-sec--tint .sx-node{background:var(--at-bg)}
.sx-node b{font-size:16px;font-weight:700;color:var(--at-text)}
.sx-node span{font-size:13px;line-height:1.4;color:var(--at-muted)}
.sx-node--key{border-color:var(--at-accent);background:var(--at-accent-soft)}
.sx-sec--tint .sx-node--key{background:var(--at-accent-soft)}
.sx-arrow{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--at-muted);font-family:var(--sx-mono);font-size:12px;line-height:1}
.sx-arrow::before{content:'\2193';font-family:var(--sx-sans);font-size:20px}
.sx-flow{display:grid;gap:12px}
.sx-flow .sx-back{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border:1px dashed var(--at-line-2);border-radius:12px;font-size:14px;color:var(--at-text-2)}
.sx-flow .sx-back b{color:var(--at-text);font-weight:600}
.sx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border:1px solid var(--at-line-2);background:var(--at-surface);font-size:13px;font-weight:500;color:var(--at-text-2)}
.sx-chip--ok{border-color:var(--at-ok);color:var(--at-ok)}
.sx-chip--info{border-color:var(--at-info);color:var(--at-info)}
.sx-chip--crit{border-color:var(--at-crit);color:var(--at-crit)}

/* one server, apps walled apart */
.sx-server{display:grid;gap:14px}
.sx-server__head{display:flex;justify-content:space-between;align-items:center;font-family:var(--sx-mono);font-size:12px;color:var(--at-muted)}
.sx-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sx-app{padding:16px;border:1px solid var(--at-line-2);border-radius:14px;background:var(--at-bg)}
.sx-app b{display:block;font-family:var(--sx-mono);font-size:13px;color:var(--at-text);margin-bottom:10px}
.sx-app ul{list-style:none;display:grid;gap:6px}
.sx-app li{font-size:13px;line-height:1.35;color:var(--at-text-2);padding-left:16px;position:relative}
.sx-app li::before{content:'\25CF';position:absolute;left:2px;top:1px;font-size:9px;color:var(--at-ok)}
.sx-wall{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--at-crit);border-radius:12px;font-size:14px;color:var(--at-text-2)}
.sx-wall b{color:var(--at-crit);font-weight:700}

/* tiles (controls) */
.sx-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sx-tile{display:block;padding:18px 20px;border:1px solid var(--at-line);border-radius:16px;background:var(--at-surface);text-align:left}
.sx-sec--tint .sx-tile{background:var(--at-bg)}
.sx-tile b{display:block;font-size:16px;font-weight:700;color:var(--at-text)}
.sx-tile span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--at-muted)}

/* app icons (catalogue) */
.sx-icons{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sx-icons li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;border:1px solid var(--at-line);border-radius:16px;background:var(--at-surface)}
.sx-sec--tint .sx-icons li{background:var(--at-bg)}
.sx-icons img{width:44px;height:44px;object-fit:contain}
.sx-icons span{font-size:13px;line-height:1.3;color:var(--at-text-2);text-align:center}

/* who runs it: four cards */
.sx-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:left}
.sx .sx-seat{display:flex;flex-direction:column;gap:10px;padding:26px 22px;border:1px solid var(--at-line);border-radius:20px;background:var(--at-surface);text-decoration:none;color:var(--at-text);transition:border-color .2s,transform .2s}
.sx-sec--tint .sx-seat{background:var(--at-bg)}
.sx .sx-seat:hover{border-color:var(--at-accent);transform:translateY(-2px)}
.sx-seat .k{font-family:var(--sx-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--at-accent)}
.sx-seat .t{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.sx-seat .d{font-size:15px;line-height:1.5;color:var(--at-text-2)}

/* figure: a product screenshot */
.sx-shot{margin:0}
.sx-shot img{display:block;width:100%;height:auto;border:1px solid var(--at-line-2);border-radius:12px;background:var(--at-surface);box-shadow:0 30px 80px -40px var(--at-shadow)}
.sx-hero .sx-shot img{box-shadow:0 0 0 1px color-mix(in srgb, var(--at-accent) 8%, transparent),0 40px 100px color-mix(in srgb, var(--at-shadow) 55%, transparent)}

/* install command with a copy button */
.sx-cmd{display:flex;align-items:stretch;max-width:760px;margin:34px auto 0;border:1px solid var(--at-line-2);border-radius:12px;background:var(--at-surface);overflow:hidden;text-align:left}
.sx-cmd code{flex:1;min-width:0;display:block;padding:15px 18px;background:none;border-radius:0;font-size:13.5px;color:var(--at-text);white-space:nowrap;overflow-x:auto}
.sx-cmd code::before{content:'$ ';color:var(--at-accent)}
.sx-copybtn{flex:none;padding:0 18px;border:0;border-left:1px solid var(--at-line);background:none;color:var(--at-muted);font-family:var(--sx-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.sx-copybtn:hover{color:var(--at-accent);background:var(--at-accent-soft)}
.sx-copybtn.copied{color:var(--at-ok)}

/* ── closing call to action ── */
.sx-cta{padding:170px 0;border-top:1px solid var(--at-line);text-align:center}
.sx-cta .sx-h2{font-size:clamp(34px,5vw,60px)}

/* ── a short page beside the scan layer (install) ── */
.sx-doc{padding:8px 0 120px}
.sx-doc h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;margin:64px 0 14px;color:var(--at-text)}
.sx-doc p,.sx-doc li{font-size:17px;line-height:1.7;color:var(--at-text-2)}
.sx-doc p+p{margin-top:12px}
.sx-doc ul,.sx-doc ol{margin:12px 0 0 22px;display:grid;gap:8px}
.sx-doc pre{margin:14px 0;padding:16px 18px;border-radius:12px;background:var(--at-surface-2);font-family:var(--sx-mono);font-size:13px;line-height:1.6;overflow-x:auto;color:var(--at-text)}
.sx-doc .sx-narrow{max-width:760px}

/* ── wide screens: each section close to one screen tall ── */
@media (min-width:961px){
  .sx-sec{min-height:clamp(640px,84vh,880px);display:flex;align-items:center}
  .sx-sec>.sx-wrap{flex:1 1 auto}
}

/* ── narrow screens ── */
@media (max-width:960px){
  .sx-band,.sx-band--flip{grid-template-columns:minmax(0,1fr);gap:40px}
  .sx-band--flip .sx-copy{order:1}
  .sx-band--flip .sx-visual{order:2}
  .sx-proof ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-seats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-icons{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sx-sec{padding:96px 0}
  .sx-cta{padding:110px 0}
}
@media (max-width:640px){
  .sx-hero{padding:64px 0 72px}
  .sx-proof ul,.sx-seats,.sx-tiles,.sx-apps{grid-template-columns:minmax(0,1fr)}
  .sx-icons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-proof .n{font-size:26px}
  .sx-flow .sx-back{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.sx *{transition:none!important}}