/* Shamus landing page. Tokens and fonts live in base.css.
   Frame: a developer-tool product page set in IBM Plex Sans. A top bar with the wordmark and a
   CLI tag. A left-aligned first screen: headline, one line, then the command next to the
   download, then the PowerShell window across the page as the demo. Everything below sits on
   bordered cards, radius 10. The monospace face is used only where the product itself speaks:
   the terminal, commands, tool names and the file. Flat colour only; cyan is the cursor, what
   the agent does and asks, and the download. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--sans); }
h1, h2, h3, p, ul, ol, dl, dd, pre, figure { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
i, em { font-style: normal; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--cur); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--bg); font-weight: 600; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root { --pad: max(24px, calc((100vw - 1160px) / 2)); --r: 10px; --line-2: rgba(255, 255, 255, .3); --ink: #030404; }

/* ---------- buttons and small pieces ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border: 1px solid var(--cur); border-radius: 8px; background: var(--cur); color: var(--cur-ink); font: 600 16px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s ease-out; }
.btn:hover { border-color: #A6EDFF; background: #A6EDFF; }
.btn:active { transform: scale(.98); }
.btn svg { flex: none; width: 17px; height: 17px; }
.btn--line { background: none; color: var(--cur); }
.btn--line:hover { border-color: var(--cur); background: var(--cur); color: var(--cur-ink); }
.btn--quiet { border-color: var(--line-2); background: none; color: var(--text); }
.btn--quiet:hover { border-color: var(--text); background: none; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.i-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.note { font-size: 14px; color: var(--text-3); }
.cursor { display: inline-block; width: .6em; height: 1.15em; margin-left: .25em; vertical-align: -.2em; background: var(--cur); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.redact { display: inline-block; width: 24ch; height: .8em; border-radius: 2px; background: var(--panel-2); vertical-align: -.05em; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; background: var(--panel-2); font: 500 13px/1 var(--mono); color: var(--text-2); white-space: nowrap; }
.chip i { color: var(--cur); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }

/* The command box: a prompt, the command, a button that copies it. */
.start { display: flex; align-items: stretch; gap: 12px; }
.start .btn { height: auto; min-height: 56px; padding: 0 26px; }
.cmd { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 7px 7px 7px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.cmd__ps, .cmd__text { padding: 8px 0; font: 500 15px/24px var(--mono); }
.cmd__ps { flex: none; color: var(--text-3); }
.cmd__text { flex: 1; min-width: 0; }
.cmd__text span, .cmd__text i { white-space: nowrap; }
.cmd__text i { color: var(--text-2); }
.cmd__text .cursor { height: 20px; vertical-align: -4px; }
.copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 92px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--text-2); font: 500 13.5px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: border-color .15s ease-out, color .15s ease-out; }
.copy:hover { border-color: var(--line-2); color: var(--text); }
.copy svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.copy__ok { display: none; }
.copy.is-copied { border-color: var(--cur); color: var(--cur); }
.copy.is-copied .copy__i { display: none; }
.copy.is-copied .copy__ok { display: block; }

/* ---------- top bar ---------- */

.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 30px; height: 64px; padding: 0 var(--pad); background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s ease-out; }
.nav.is-stuck { border-bottom-color: var(--line); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.logo img { display: block; }
.logo__name { font: 600 17px/1 var(--mono); letter-spacing: -.01em; }
.tag { padding: 4px 6px 3px; border: 1px solid var(--line-2); border-radius: 5px; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; color: var(--text-2); }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; color: var(--text-2); }
.nav__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; transition: color .15s ease-out; }
.nav__links a:hover { color: var(--text); }

/* ---------- first screen ---------- */

.hero { padding: 56px var(--pad) 0; }
h1 { font-size: clamp(38px, 5.5vw, 78px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
h1 span { color: var(--text-3); }
.lede { max-width: 38em; margin-top: 22px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.hero .start { margin-top: 34px; }
.hero .note { margin-top: 14px; }

/* ---------- the terminal ---------- */

.demo { padding: 40px var(--pad) 0; }
.term { border: 1px solid var(--line); border-radius: var(--r); background: var(--ink); overflow: hidden; }
.term:focus-visible { outline-offset: 2px; border-radius: var(--r); }
.term__bar { display: flex; align-items: flex-end; height: 42px; padding-left: 8px; background: var(--panel-2); font: 400 12.5px/1 var(--sans); color: var(--text-2); }
.term__bar svg { flex: none; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; }
.term__tab { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px; border-radius: 8px 8px 0 0; background: var(--ink); color: var(--text); }
.term__tab svg:first-child { width: 16px; height: 16px; stroke-linecap: round; stroke-linejoin: round; }
.term__tab svg:last-child { width: 9px; height: 9px; margin-left: 26px; color: var(--text-2); }
.term__add { display: flex; align-items: center; gap: 16px; height: 34px; padding: 0 16px; }
.term__ctl { display: flex; align-self: stretch; margin-left: auto; }
.term__ctl i { display: grid; place-items: center; width: 46px; }
.term__body { min-height: 524px; padding: 22px 26px 26px; font: 400 15px/1.75 var(--mono); }
.ln { min-height: 1.75em; white-space: pre-wrap; overflow-wrap: anywhere; animation: show .2s ease-out; }
.ln--cmd i { color: var(--text-3); }
.ln--info { color: var(--text-3); }
.ln--think { padding-left: 2ch; color: var(--text-2); }
.ln--think::before { content: '· '; }
.ln--tool { display: grid; grid-template-columns: 2ch 12ch minmax(0, 36ch) minmax(0, 1fr); }
.ln--tool i, .ln--tool b { color: var(--cur); }
.ln--tool span { color: var(--text-2); }
.ln--tool em { color: var(--text); }
.ln--tool.is-wide span { grid-column: 3 / -1; }
.ln--tool.is-busy i { animation: blink .5s steps(1) infinite; }
.ln--ask { margin-top: 1.75em; }
.ln--ask > i:first-child { margin-right: 1ch; font-weight: 600; color: var(--cur); }
.keys { white-space: nowrap; }
.key { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 30px; margin: -3px 0; padding: 0 10px; border: 1px solid var(--cur); border-radius: 6px; background: none; color: var(--cur); font: 600 15px/1 var(--mono); vertical-align: middle; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.key::after { content: ''; position: absolute; left: -1px; right: -1px; top: -6px; bottom: -6px; }
.key:hover { background: var(--cur); color: var(--cur-ink); }
.key + .key { margin-left: 8px; }
.key + .cursor { margin-left: 12px; }
.ln--stop { margin-top: 1.75em; color: var(--text-2); }
.ln--stop i { margin-right: 1ch; color: var(--cur); }
.sheet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 20px; padding: 18px 18px 18px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font: 16px/1.45 var(--sans); white-space: normal; animation: rise .35s cubic-bezier(.2, .8, .2, 1); }
.sheet[hidden] { display: none; }
.sheet p { color: var(--text-2); }
.sheet p b { display: block; font-size: 19px; letter-spacing: -.01em; color: var(--text); }
.sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sheet .btn { height: 48px; }
@keyframes show { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 8px; } }

/* ---------- two cards under the window ---------- */

.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px var(--pad) 0; }
.say { display: flex; flex-direction: column; padding: 30px 32px 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.say h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.say p { max-width: 34em; margin-top: 10px; color: var(--text-2); text-wrap: pretty; }
.say .legend { margin-top: auto; padding-top: 24px; }

/* ---------- sections ---------- */

h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; }
.sec { padding: 128px var(--pad) 0; }
.head { display: grid; gap: 12px; margin-bottom: 36px; }
.lead { font-size: 19px; color: var(--text-2); }

.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tools div { padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.tools dt { font: 600 16px/1.4 var(--mono); }
.tools dt::before { content: '▸'; margin-right: 1ch; color: var(--cur); }
.tools dd { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }

.runs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.run { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 180px; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease-out; }
.run:hover { border-color: var(--line-2); }
.run[aria-pressed="true"] { border-color: var(--cur); }
.run__cmd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1ch; font: 500 15px/1.55 var(--mono); overflow-wrap: anywhere; }
.run__cmd::before { content: '>'; color: var(--text-3); }
.run__plan { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.run__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); transition: color .15s ease-out; }
.run__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.run:hover .run__go { color: var(--text); }
.run[aria-pressed="true"] .run__go { color: var(--cur); }

.filecard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.filecard__text { display: flex; flex-direction: column; padding: 44px 44px 40px; }
.filecard__text > p:not(.legend) { margin-top: 16px; font-size: 18px; color: var(--text-2); text-wrap: pretty; }
.filecard__text .legend { margin-top: auto; padding-top: 28px; }
.file { border-left: 1px solid var(--line); background: var(--ink); }
.file figcaption { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.file figcaption svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.file figcaption b { font: 600 13.5px/1 var(--mono); color: var(--text); }
.file pre { padding: 26px 26px 30px; font: 400 14px/1.85 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.file pre b { color: var(--text); }
.file pre i { color: var(--cur); }

/* ---------- questions: one column of cards ---------- */

.faq__list { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 14px 24px 14px 28px; border-radius: var(--r); font-size: 19px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s ease-out, stroke .15s ease-out; }
.faq summary:hover svg { stroke: var(--text); }
.faq details[open] summary svg { rotate: 180deg; }
.faq details p { max-width: 68ch; padding: 0 28px 26px; color: var(--text-2); text-wrap: pretty; }

/* ---------- closing card ---------- */

.close__card { padding: 64px 56px 48px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.close h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; }
.close .start { margin-top: 36px; }
.close .cmd { background: var(--ink); }
.close .note { margin-top: 16px; color: var(--text-2); }

.foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 40px; margin-top: 96px; padding: 24px var(--pad) 44px; border-top: 1px solid var(--line); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 26px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.foot__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; transition: color .15s ease-out; }
.foot__links a:hover { color: var(--text); }
.foot p { grid-column: 1 / -1; max-width: 78ch; font-size: 13.5px; color: var(--text-3); }

.js [data-reveal] { opacity: 0; translate: 0 14px; transition: opacity .6s ease-out, translate .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- smaller screens ---------- */

@media (max-width: 1040px) {
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .runs { grid-template-columns: minmax(0, 1fr); }
  .run { min-height: 0; }
  .filecard { grid-template-columns: minmax(0, 1fr); }
  .file { border-left: 0; border-top: 1px solid var(--line); }
  .term__body { font-size: 14px; }
  .ln--tool { grid-template-columns: 2ch 11ch minmax(0, 26ch) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --pad: 20px; }
  body { font-size: 16px; }
  .nav { height: 60px; gap: 16px; }
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding-top: 32px; }
  .lede { margin-top: 16px; }
  .hero .start { margin-top: 26px; }
  .start { flex-direction: column; }
  .cmd { padding-left: 14px; gap: 10px; }
  .copy { position: relative; min-width: 40px; padding: 0; }
  .copy__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cmd__ps, .cmd__text { font-size: 13.5px; }
  .demo { padding: 28px 12px 0; }
  .term__add { display: none; }
  .term__body { min-height: 440px; padding: 16px 14px 18px; font-size: 12.5px; }
  .ln--tool { grid-template-columns: 2ch 9ch minmax(0, 1fr); }
  .ln--tool span, .ln--tool em { grid-column: 3; }
  .ln--tool.is-wide span { grid-column: 3; }
  .key { font-size: 14px; }
  .sheet { padding: 16px; }
  .sheet__actions, .sheet .btn { width: 100%; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 12px 0; }
  .say { padding: 24px 22px 22px; }
  .say h3 { font-size: 21px; }
  .sec { padding-top: 88px; }
  .head { margin-bottom: 26px; }
  .lead { font-size: 17px; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tools div { padding: 14px 14px 16px; }
  .tools dt, .tools dd { font-size: 14px; }
  .runs { gap: 8px; }
  .run { padding: 18px 18px 14px; }
  .run__cmd { font-size: 13.5px; }
  .filecard__text { padding: 28px 22px 26px; }
  .filecard__text > p:not(.legend) { font-size: 16px; }
  .file figcaption { padding: 8px 16px; }
  .file pre { padding: 18px 16px 22px; font-size: 12.5px; }
  .redact { width: 14ch; }
  .faq summary { min-height: 60px; padding: 12px 16px 12px 20px; font-size: 17px; }
  .faq details p { padding: 0 20px 22px; }
  .close__card { padding: 36px 20px 28px; }
  .close .start { margin-top: 26px; }
  .foot { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
  .foot__links { justify-content: flex-start; gap: 0 16px; font-size: 14px; }
  .foot__links a { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .term__body { min-height: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor, .ln--tool.is-busy i { animation: none; }
  .ln, .sheet { animation: none; }
  .btn, .key, .copy { transition: none; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1600px) { :root { --pad: max(24px, calc((100vw - min(1160px + (100vw - 1600px) * 0.9473, 1682px)) / 2)); } }
@media (min-width: 1600px) {
  h1 { font-size: clamp(78px, 31.2px + 2.925vw, 97.5px); }
  h2 { font-size: clamp(46px, 25.3px + 1.294vw, 55.2px); }
  .lede { font-size: clamp(21px, 14.7px + 0.3937vw, 24.15px); }
}
/* ---------- end every screen size ---------- */