/* ClipX website -- design tokens, base reset, and shared chrome (header / nav / footer).
   Colors and type are lifted from the mockups so the look is preserved; the runtime's `style-hover`
   attributes become real :hover rules. IBM Plex is self-hosted instead of loaded from a font CDN. */

/* IBM Plex Sans / Mono -- self-hosted woff2 (OFL). Paths are relative to this stylesheet. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root {
  /* paper / ink */
  --paper:        #FAF8F3;
  --ink:          #20201D;
  --ink-soft:     #3f3c37;
  --muted:        #6E6A62;
  --muted-2:      #5b5750;
  --muted-3:      #8a877f;
  --faint:        #9a978d;
  /* brand */
  --blue:         #2F68E6;
  --blue-dark:    #255AD0;
  /* lines / surfaces */
  --border:       #E4E0D6;
  --border-2:     #E0DCD0;
  --panel:        #F1EEE6;
  --panel-2:      #F6F3EC;
  --accent:       #EEF3FE;
  --accent-line:  #DDE7FB;

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--paper); }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.page { min-height: 100vh; background: var(--paper); }

/* Centered chrome rail. Content sections set their own (narrower) widths in later phases. */
.wrap { max-width: 860px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ---- header ---- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand-logo { width: 26px; height: 26px; display: block; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

.nav {
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--blue); }
.nav a.active { color: var(--ink); border-bottom-color: var(--blue); }

/* ---- footer ---- */
.site-footer { background: var(--panel); border-top: 1px solid var(--border); margin-top: 52px; }
.footer-inner {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}
.footer-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-nav a { color: var(--faint); text-decoration: none; }
.footer-nav a:hover { color: var(--blue); }

/* =========================================================================
   Shared content primitives (used across the ported pages). Page-specific
   widths come from --content-w set on .content per page.
   ========================================================================= */

.content { --content-w: 720px; }
/* width:100% matters only when .content is a flex column (the plugins page): flex would
   otherwise shrink the auto-margined section to fit its text, shifting the title. */
.section { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 28px 32px; }
.section--lead { padding-top: 56px; }
.section--tight { padding-top: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.page-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted-2); }

.prose p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.prose p:first-child { margin-top: 0; }

a.inline-link { color: var(--blue); text-decoration: none; }
a.inline-link:hover { text-decoration: underline; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 7px;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  padding: 13px 22px;
  box-shadow: 0 2px 8px rgba(47, 104, 230, 0.26);
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-mono { font-family: var(--font-mono); }
/* Stacks a smaller second line under the button's label -- the label keeps the row layout (and the
   gap for its arrow) that .btn would otherwise give the whole button. */
.btn-stacked { flex-direction: column; gap: 3px; }
.btn-stacked .btn-label { display: inline-flex; align-items: center; gap: 9px; }
.btn-size { font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: 0.82; }
.btn-textlink {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid #cfcabd;
  padding-bottom: 1px;
}
.btn-textlink:hover { color: var(--blue); }
.btn-outline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid #C9D8F6;
  background: #fff;
  padding: 9px 15px;
  border-radius: 7px;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--accent); }

.cta-row { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.meta-mono { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-3); }

/* placeholder screenshot block (aspect-ratio set inline per use) */
.ph-shot {
  background: repeating-linear-gradient(135deg, #ECEAE2 0 9px, #F4F2EA 9px 18px);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph-shot span { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); text-align: center; }
.shot-caption { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-2); }

/* Lightbox and small gallery helpers */
.revival-lightbox { display: block; text-decoration: none; }
.ph-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lightbox overlay */
#lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:9999; }
#lightbox-overlay[hidden]{ display:none !important; }
.lightbox-shell{ max-width:90vw; max-height:90vh; position:relative; display:flex; flex-direction:column; align-items:center; }
.lightbox-img{ max-width:100%; max-height:calc(90vh - 80px); object-fit:contain; box-shadow:0 8px 30px rgba(0,0,0,.6); border-radius:4px; }
.lightbox-caption{ margin-top:8px; color:#ddd; font-size:0.95rem; text-align:center; max-width:90vw; }
.lightbox-close{ position:absolute; top:-8px; right:-8px; background:#111; color:#fff; border:0; padding:8px 10px; border-radius:999px; cursor:pointer; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; background:transparent; border:0; font-size:2rem; padding:8px 10px; cursor:pointer; }
.lightbox-prev{ left:8px; }
.lightbox-next{ right:8px; }
body.lightbox-open { overflow: hidden; }

/* small focus outline for keyboard users */
.lightbox-close:focus, .lightbox-nav:focus{ outline:2px solid #fff; }

/* centered quote */
.quote-center { text-align: center; }
.quote-center p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.quote-attrib { margin-top: 13px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-3); }
.quote-attrib a { color: var(--blue); text-decoration: none; }
.quote-attrib a:hover { text-decoration: underline; }

/* small uppercase mono section label */
.section-label {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* a bordered call-to-action / contact card */
.cta-card {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.cta-card h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cta-card p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }

/* =========================================================================
   Home
   ========================================================================= */
.hero-logo { width: 72px; height: 72px; display: block; margin-bottom: 24px; }
.hero .page-title { font-size: 35px; line-height: 1.16; letter-spacing: -0.024em; }
.hero .accent { color: var(--blue); }
.hero .lead { font-size: 16.5px; margin-top: 20px; }
.shots-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.shots-more { grid-column: 1 / -1; margin: -8px 0 0; text-align: center; font-size: 13.5px; }
/* =========================================================================
   What's new in 2.0
   ========================================================================= */
.whats-new-feature { padding-top: 8px; padding-bottom: 8px; }
.whats-new-shot {
  display: block;
  width: 700px;
  max-width: 100%;
  height: auto;
  margin: 16px auto 0;
  /* outline, not border: the section's content area is exactly 700px, and a border would
     shrink the pixel-exact screenshots and blur them. Outlines take no layout space. */
  outline: 1px solid var(--border-2);
  border-radius: 5px;
}
.whats-new-copy { margin-top: 24px; }
.whats-new-copy .eyebrow { margin-bottom: 10px; }
.whats-new-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.whats-new-copy p {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted-2);
}
.whats-new-closing {
  margin-top: 18px;
  text-align: center;
}
.whats-new-closing p {
  margin: 24px 0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
}

@media (max-width: 560px) {
  .whats-new-feature { padding-top: 4px; padding-bottom: 4px; }
  .whats-new-copy h2 { font-size: 21px; }
  .whats-new-copy p { font-size: 15px; }
  .whats-new-closing p { font-size: 16px; }
}

/* =========================================================================
   About
   ========================================================================= */
.license-pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  white-space: pre-wrap;
}
.thanks-list { margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9; color: var(--ink-soft); }
.thanks-list .accent { color: var(--blue); }

/* =========================================================================
   Changelog
   ========================================================================= */
.cl-entry { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--border); }
.cl-entry--latest { border-top: 2px solid var(--blue); }
.cl-ver { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.cl-entry--latest .cl-ver { color: var(--blue); }
.cl-date { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 3px; }
.cl-section { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-3); }
.cl-body ul { margin: 6px 0 0; padding-left: 18px; }
.cl-body ul ul { margin-top: 0; }
.cl-body li { font-size: 13.5px; line-height: 1.7; color: var(--muted-2); }
.cl-banner { margin: 0; padding: 22px 0; border-top: 1px solid var(--border); font-size: 15px; font-weight: 600; color: var(--ink); }
.cl-note {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--faint);
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
code.inline-code { font-family: var(--font-mono); font-size: 12px; background: var(--panel); padding: 1px 6px; border-radius: 4px; }

/* =========================================================================
   FAQ
   ========================================================================= */
/* Questions read as questions: sentence-case ink headings, unlike the mono chrome labels. */
.faq-question { margin: 0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.featured { border: 1px solid var(--accent-line); background: var(--accent); border-radius: 10px; padding: 34px; }
.featured p { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.featured .src { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: #6c89c8; }
.featured .src a { color: #6c89c8; text-decoration: none; }
.featured .src a:hover { text-decoration: underline; }
.q-masonry { column-count: 2; column-gap: 20px; }
@media (max-width: 640px) { .q-masonry { column-count: 1; } }
.q-card { break-inside: avoid; margin-bottom: 20px; border: 1px solid var(--border); background: #fff; border-radius: 9px; padding: 20px 22px; }
.q-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.q-card .src { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted-3); }
.q-card .src a { color: var(--muted-3); text-decoration: none; }
.q-card .src a:hover { color: var(--blue); }
.closing-note { margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--faint); }

/* =========================================================================
   Plugins
   ========================================================================= */
.browser-frame { border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; background: #fff; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.browser-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.browser-title { margin-left: 8px; font-family: var(--font-mono); font-size: 10.5px; color: #b3afa4; }
.divider { height: 1px; background: var(--border); margin-bottom: 8px; }
.plugin-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #E9E5DB;
  align-items: start;
}
.plugin-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plugin-name { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.plugin-tag { font-family: var(--font-mono); font-size: 11px; color: var(--muted-3); }
.plugin-desc { margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.cta-card--panel { background: var(--panel-2); }

/* Plugin screenshot/icon sizing */
.plugin-media-link { display: block; }
.plugin-shot { width: 100%; }
.plugin-shot-image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* If a plugin has no screenshot and falls back to icon, keep it square and compact. */
.plugin-media-link--icon { width: 64px; }
.plugin-shot--icon {
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
}
.plugin-shot-image--icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* =========================================================================
   Download
   ========================================================================= */
.dl-card { border: 1px solid var(--border-2); border-radius: 10px; background: #fff; overflow: hidden; }
.dl-card-top { padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dl-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dl-sub { margin-top: 7px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-3); }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.req-grid ul { margin: 0; padding-left: 18px; }
.req-grid li { font-size: 13.5px; line-height: 1.7; color: var(--muted-2); }
.req-grid p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }
/* A list of downloadable builds, one row per (version, arch): standalone for the beta section,
   nested inside the download card for stable. */
.build-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-family: var(--font-mono); font-size: 12.5px; background: #fff; }
.build-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 13px 18px; border-bottom: 1px solid #EDE9E0; }
.build-row:last-child { border-bottom: 0; }
.build-row .size { color: var(--faint); }
.build-row a { color: var(--blue); text-decoration: none; }
.build-row a:hover { text-decoration: underline; }
.build-row .muted { color: var(--faint); }
/* Nested in the download card, the rows extend the card instead of forming a second box below it.
   The card draws the outer border and clips the corners, so the list keeps only the seam above its
   first row. The rows take the card's wider gutter to line up with the title above them. */
.dl-card .build-list { border: 0; border-radius: 0; border-top: 1px solid #EDE9E0; }
.dl-card .build-row { padding-left: 28px; padding-right: 28px; }
.dl-foot-note { margin: 13px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-3); }
.dl-section-link { margin: 10px 2px 0; font-family: var(--font-mono); font-size: 12px; }

/* =========================================================================
   Donate
   ========================================================================= */
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.amount {
  position: relative;
  display: block;
  text-align: center;
  border: 1px solid var(--border-2);
  background: #fff;
  border-radius: 9px;
  padding: 18px 0;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
}
.amount input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.amount:hover { border-color: var(--blue); color: var(--blue); }
.amount:has(input:checked) { background: var(--blue); border-color: var(--blue); color: #fff; }
.amount:focus-within { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.amount--other { font-size: 15px; }
.donate-actions { margin-top: 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.donate-note { margin: 14px 0 0; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.wig-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.wig { text-align: center; }
.wig-h { font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.wig p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* =========================================================================
   Feedback
   ========================================================================= */
.feedback-form { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 24px; }
.feedback-field { display: block; margin-bottom: 18px; }
.feedback-field > span { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; }
.feedback-field small { color: var(--faint); font-weight: 400; }
.feedback-field input,
.feedback-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: 7px;
  background: #fff;
  padding: 10px 12px;
  color: var(--ink);
  font: 14px/1.5 var(--font-sans);
}
.feedback-field textarea { resize: vertical; min-height: 180px; }
.feedback-field input:focus,
.feedback-field textarea:focus { outline: 2px solid var(--accent-line); border-color: var(--blue); }
.feedback-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feedback-alert,
.feedback-unavailable,
.feedback-success { border-radius: 8px; padding: 16px 18px; }
.feedback-alert { margin-bottom: 18px; border: 1px solid #e4b5b5; background: #fff2f2; color: #7d2929; }
.feedback-alert ul { margin: 8px 0 0; padding-left: 20px; }
.feedback-unavailable { border: 1px solid var(--border); background: var(--panel); color: var(--muted-2); }
.feedback-success { border: 1px solid var(--accent-line); background: var(--accent); }
.feedback-success h2 { margin: 0; font-size: 20px; }
.feedback-success p { margin: 6px 0 0; color: var(--muted-2); }
.feedback-captcha { overflow-x: auto; overflow-y: hidden; }
.feedback-actions { margin-top: 18px; }
.feedback-actions button { border: 0; cursor: pointer; }
.feedback-actions button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 560px) { .feedback-contact-fields { grid-template-columns: 1fr; gap: 0; } }