/* ==========================================================================
   Sciwand landing v2 — section layer
   --------------------------------------------------------------------------
   Depends on tokens defined in v2.css. Covers: the ethos band, the four
   alternating capability rows and their hand-built UI mockups, the
   "works with your stack" grid, FAQ, download, and footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   -1. Reference-manager band
   --------------------------------------------------------------------------
   A light grey card so the white app tiles read as objects sitting on a
   surface. Tried black first: it was too heavy this high on an otherwise
   white page and pulled attention off the demo directly above it.

   The four assurances that used to share this card now live in the hero,
   faint (see .hero-trust) — they are reassurance, not a feature pitch.

   This is the ONE place the no-shadow rule is relaxed: the tiles imitate
   macOS icons, and a macOS icon without a shadow does not read as one.
   -------------------------------------------------------------------------- */
.assure { padding: 0 0 96px; }

.assure-card {
  background: var(--paper-band);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 26px 40px 28px;
}

.assure-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 32px;
}

.assure-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.assure-apps {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px 26px;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 74px;
}

/* macOS app-icon geometry: the corner radius is ~22.4% of the tile, which is
   what makes a rounded square read as an app icon rather than a button.
   Shadow is soft and warm-neutral — a heavy one made for a dark surface
   looks like dirt on light grey. */
.app-tile {
  width: 46px;
  height: 46px;
  border-radius: 10.5px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.07), 0 4px 10px rgba(17, 24, 39, 0.09);
  transition: transform 0.25s var(--ease);
}

.app:hover .app-tile { transform: translateY(-3px); }

.app-tile img { width: 30px; height: 30px; object-fit: contain; }

/* Placeholder slot: a dashed empty tile reads as "space reserved" */
.app-tile--empty {
  background: transparent;
  border: 1.5px dashed #cbd2dc;
  box-shadow: none;
  color: var(--ink-4);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.app b {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-align: center;
}

.app--more { width: 88px; }
.app--more b { color: var(--ink-4); font-weight: 500; white-space: nowrap; }

@media (max-width: 900px) {
  .assure { padding-bottom: 64px; }
  .assure-card { padding: 22px; border-radius: var(--radius-lg); }
  .assure-sync { justify-content: center; text-align: center; }
  .assure-apps { justify-content: center; }
}

@media (max-width: 460px) {
  .app { width: 66px; }
}

/* --------------------------------------------------------------------------
   0. The three targets — search → analyse → write
   --------------------------------------------------------------------------
   Sits directly under the hero. Deliberately compact: it states the scope of
   the product in three beats before the page starts arguing anything.
   -------------------------------------------------------------------------- */
.path { padding: 0 0 96px; }

.path-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 8px;
}

.path-step {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.path-step:hover {
  border-color: var(--violet);
  background: var(--paper-band);
}

/* Step number sits in the corner as a quiet ordinal, not a headline */
.path-num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}

.path-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--violet-wash);
  color: var(--violet-deep);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.path-icon svg { width: 20px; height: 20px; }

.path-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 9px;
}

.path-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.15;
  margin-bottom: 10px;
}

.path-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.path-arrow {
  display: grid;
  place-items: center;
  color: var(--ink-4);
  padding: 0 4px;
}

.path-arrow svg { width: 22px; height: 22px; }

.path-foot {
  margin-top: 26px;
  text-align: center;
  font-size: 15.5px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   1. Ethos band — "you write, AI augments"
   --------------------------------------------------------------------------
   The argumentative heart of the page. Set as an editorial pull-quote so it
   reads as a position, not a feature.
   -------------------------------------------------------------------------- */
.ethos { padding: 72px 0; }

.ethos-inner { max-width: 780px; margin: 0 auto; text-align: center; }

.ethos-quote {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.1vw, 37px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.028em;
  margin: 28px 0 0;
}

.ethos-quote em { font-style: italic; font-weight: 500; }

/* Paired one-liners. Replaced two cards of prose that made this section the
   most text-heavy on the page; same argument, roughly a third of the words. */
.ethos-compare { margin-top: 34px; text-align: left; }

.ethos-heads,
.ethos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ethos-heads { padding: 0 0 12px; border-bottom: 1px solid var(--line); }

.ethos-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ethos-head--no { color: var(--ink-4); }
.ethos-head--yes { color: var(--violet); }

.ethos-rows { margin: 0; }

.ethos-row { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ethos-row:last-child { border-bottom: 0; }

/* dt = the failure mode, dd = what Sciwand does instead */
.ethos-row dt,
.ethos-row dd {
  margin: 0;
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.45;
}

.ethos-row dt { color: var(--ink-4); }
.ethos-row dd { color: var(--ink); font-weight: 500; }

/* Marks are drawn in CSS so the markup stays a clean definition list */
.ethos-row dt::before,
.ethos-row dd::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 15px;
  line-height: 1.45;
}

.ethos-row dt::before { content: "\00d7"; color: var(--ink-4); font-size: 18px; }
.ethos-row dd::before { content: "\2713"; color: var(--violet); font-weight: 700; }

/* --------------------------------------------------------------------------
   2. Capability rows
   -------------------------------------------------------------------------- */
.features { padding: 96px 0 40px; }

.features-head { max-width: 720px; margin: 0 auto 76px; text-align: center; }

.features-head h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 500;
  margin-top: 22px;
}

.features-head p {
  margin-top: 20px;
  font-size: 18px;
  color: var(--ink-2);
}

.feature {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 72px;
  align-items: center;
  padding: 60px 0;
}

/* Alternate the visual to the left on every other row */
.feature--flip .feature-copy { order: 2; }
.feature--flip .feature-visual { order: 1; }

.feature-index {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--violet);
  margin-bottom: 16px;
}

.feature h3 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.028em;
}

.feature-lead {
  margin-top: 18px;
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

.feature-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* The tick is absolutely positioned rather than a flex item on purpose: as a
   flex container, every text node and inline element in the li (<strong>, the
   "Coming soon" badge) would become its own flex item and lay out in columns.
   This keeps the bullet a normal block so inline markup flows as prose. */
.feature-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.feature-list li strong { color: var(--ink); font-weight: 700; }

.feature-list svg {
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  color: var(--violet);
}

/* --------------------------------------------------------------------------
   3. Mockup chrome shared by all four visuals
   -------------------------------------------------------------------------- */
.mock {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 13px;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  background: var(--paper-band);
  border-bottom: 1px solid var(--line-soft);
}

.mock-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8dbe2;
  flex: none;
}

.mock-bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-4);
}

.mock-body { padding: 20px; }

/* Reusable atoms inside mockups */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--paper-band);
  white-space: nowrap;
}

.chip--on {
  background: var(--violet-wash);
  border-color: rgba(79, 57, 246, 0.28);
  color: var(--violet-deep);
}

/* Citation badge — the "every claim is anchored" signal */
.cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--violet-wash);
  color: var(--violet-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

/* Skeleton text lines, used to imply content without faking specifics */
.line {
  height: 7px;
  border-radius: 4px;
  background: #e8eaee;
}

/* --- 3a. Search mockup ---------------------------------------------------- */
.mock-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--violet);
  border-radius: 12px;
  padding: 11px 14px;
  background: #fff;
}

.mock-search-field svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }

.mock-search-field span { font-size: 14px; color: var(--ink); font-weight: 500; }

/* Blinking caret sells the "someone is typing this" idea */
.caret {
  display: inline-block;
  width: 1.5px;
  height: 15px;
  background: var(--violet);
  vertical-align: -3px;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.mock-dbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.mock-results { margin-top: 16px; display: grid; gap: 9px; }

.mock-result {
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 11px 13px;
  background: var(--paper-band);
}

.mock-result b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}

.mock-result .line { width: 84%; }

.mock-result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* --- 3b. Column grid mockup ---------------------------------------------- */
.mock-grid { width: 100%; border-collapse: collapse; font-size: 12px; }

.mock-grid th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.mock-grid th:first-child { padding-left: 0; }

.mock-grid td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--ink-2);
}

.mock-grid td:first-child { padding-left: 0; }

.mock-grid tr:last-child td { border-bottom: 0; }

.mock-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
}

.mock-doc svg { width: 14px; height: 14px; color: var(--ink-4); flex: none; }

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
}

.pill--yes { background: var(--teal-wash); color: var(--teal); }
.pill--no  { background: #eef0f3; color: var(--ink-3); }

/* Score bar: fill width is set inline per row so the markup stays readable */
.score { display: flex; align-items: center; gap: 8px; }

/* Both need an explicit display: they are spans, and width/transform are
   ignored on non-replaced inline boxes. The track is blockified by the flex
   parent, but the fill is not — it must declare it itself. */
.score-track {
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #e8eaee;
  overflow: hidden;
  flex: none;
}

.score-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--violet);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease);
}

.is-in .score-fill { transform: scaleX(1); }

.score b { font-family: var(--font-mono); font-size: 11px; color: var(--ink); }

/* Evidence panel appended beneath the grid, inside the same mockup, showing
   what a cell resolves to. Tinted so it reads as a separate surface. */
.mock-proof {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-band);
}

.mock-proof .mock-link { margin-top: 14px; }

/* --- 3c. Cited-answer mockup --------------------------------------------- */
.mock-answer { font-size: 13.5px; line-height: 1.72; color: var(--ink-2); }

.mock-answer strong { color: var(--ink); font-weight: 600; }

.mock-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--violet);
}

.mock-link svg { width: 13px; height: 13px; }

.mock-link::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(79, 57, 246, 0.3), transparent);
}

/* The PDF page the citation resolves to */
.mock-page {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px 17px;
}

.mock-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  margin-bottom: 12px;
}

.mock-page .line { margin-bottom: 8px; }
.mock-page .line:nth-child(3) { width: 96%; }
.mock-page .line:nth-child(6) { width: 72%; }

/* The sentence the answer was drawn from, highlighted in place */
.mock-hit {
  background: var(--marker);
  border-radius: 4px;
  padding: 5px 7px;
  margin: 4px 0 9px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  box-decoration-break: clone;
}

/* --- 3d. Writer mockup ---------------------------------------------------- */
.mock-writer { display: grid; grid-template-columns: 1fr 168px; gap: 0; }

.mock-doc-pane { padding: 20px; border-right: 1px solid var(--line-soft); }

.mock-doc-pane h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 13px;
}

.mock-para {
  font-size: 12.5px;
  line-height: 1.78;
  color: var(--ink-2);
}

/* Ghost text = the AI suggestion; the human decides whether to accept */
.ghost { color: var(--ink-4); }

.mock-accept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}

.mock-accept kbd {
  font-family: var(--font-mono);
  font-size: 9.5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--paper-band);
  color: var(--ink-2);
}

.mock-side { padding: 18px 15px; background: var(--paper-band); }

.mock-side-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 11px;
}

.mock-src {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: #fff;
  padding: 9px 10px;
  margin-bottom: 8px;
}

.mock-src b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}

.mock-src .line { height: 5px; }
.mock-src .line + .line { margin-top: 5px; width: 78%; }

/* --------------------------------------------------------------------------
   3b. Full capability inventory
   --------------------------------------------------------------------------
   Three columns matching the three targets. Deliberately dense and plainly
   set — this section is for the reader who has decided they are interested
   and now wants to know exactly what they get.
   -------------------------------------------------------------------------- */
.caps { padding: 40px 0 100px; }

.caps-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }

.caps-head h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 500;
  margin-top: 22px;
}

.caps-head p { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); }

.caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Columns are divided by the grid's own rules, not by card borders */
.caps-col { padding: 28px 30px 32px; }
.caps-col + .caps-col { border-left: 1px solid var(--line); }

.caps-col-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.022em;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.caps-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--violet);
}

.caps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

/* Same absolutely-positioned-marker approach as .feature-list, and for the
   same reason: these items carry inline markup (the "Coming soon" badge). */
.caps-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.caps-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet);
}

/* --------------------------------------------------------------------------
   4. "Works with your stack"
   -------------------------------------------------------------------------- */
.stack { padding: 100px 0; }

.stack-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }

.stack-head h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 500;
  margin-top: 22px;
}

.stack-head p { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); }

.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.stack-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.stack-card:hover { border-color: var(--ink-4); background: var(--paper-band); }

.stack-card h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 9px;
}

.stack-card p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.stack-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--violet-wash);
  color: var(--violet-deep);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.stack-icon svg { width: 19px; height: 19px; }

/* Honest "not shipped yet" marker. Muted rather than violet — an unreleased
   feature should not compete with the ones that work today. */
.soon {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-band);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4b. Comparison table
   --------------------------------------------------------------------------
   A real <table> — this is tabular data, and screen readers need the row and
   column headers. The Sciwand column is tinted rather than filled solid so it
   reads as emphasis, not as a sales block shouting over the others.
   -------------------------------------------------------------------------- */
.compare { padding: 100px 0; }

.compare-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }

.compare-head h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 500;
  margin-top: 22px;
}

.compare-head p { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); }

/* Table is the widest element on the page; let it scroll rather than squash */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-card);
}

/* separate (not collapse) so the highlighted column can carry a radius —
   collapsed tables ignore border-radius on cells. Only bottom borders are
   used, so nothing doubles up. */
.ctab {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.ctab th,
.ctab td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.ctab tbody tr:last-child th,
.ctab tbody tr:last-child td { border-bottom: 0; }

/* Column heads */
.ctab thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  padding-top: 18px;
  padding-bottom: 14px;
}

.ctab thead .ctab-us {
  color: var(--violet-deep);
  font-weight: 700;
}

/* Row heads carry the capability name */
.ctab tbody th {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  width: 42%;
}

/* Value columns are centred; the capability column stays left-aligned */
.ctab td { text-align: center; width: 19.33%; }

/* The Sciwand column reads as ONE continuous band, so no rules run through
   it — the row lines stop at its edges and pick up again on the far side.
   Leaving them in chopped the highlight into eight disconnected cells and
   defeated the point of highlighting it. */
.ctab .ctab-us {
  background: var(--violet-wash);
  border-bottom-color: transparent;
  box-shadow: inset 1px 0 0 rgba(79, 57, 246, 0.18),
              inset -1px 0 0 rgba(79, 57, 246, 0.18);
}

/* Cap the band top and bottom so it terminates deliberately */
.ctab thead .ctab-us {
  border-bottom-color: transparent;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: inset 1px 1px 0 rgba(79, 57, 246, 0.18),
              inset -1px 0 0 rgba(79, 57, 246, 0.18);
}

.ctab tbody tr:last-child .ctab-us {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: inset 1px 0 0 rgba(79, 57, 246, 0.18),
              inset -1px -1px 0 rgba(79, 57, 246, 0.18);
}

.ctab-i { width: 19px; height: 19px; display: inline-block; }
.ctab-i.yes { color: var(--violet); }
.ctab-i.no  { color: var(--ink-4); }

.ctab-txt { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.ctab-txt.muted { color: var(--ink-3); }
.ctab-us .ctab-txt { color: var(--violet-deep); font-weight: 600; }

.compare-note {
  margin: 22px auto 0;
  max-width: 74ch;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-4);
}

.compare-note a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

/* Visually hidden, still read aloud — carries Yes/No for the icon cells */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. FAQ
   -------------------------------------------------------------------------- */
.faq { padding: 100px 0; }

.faq-head { text-align: center; margin-bottom: 48px; }

.faq-head h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 500;
  margin-top: 22px;
}

.faq-list { max-width: 800px; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.018em;
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--violet-deep); }

.faq-sign {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-3);
}

.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}

.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0deg); }
.faq-item[open] summary { color: var(--violet-deep); }

.faq-answer {
  padding: 0 4px 26px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 66ch;
}

.faq-answer a { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   6. Download / final CTA
   -------------------------------------------------------------------------- */
.cta { padding: 104px 0; text-align: center; }

.cta h2 {
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 500;
  margin-top: 22px;
}

.cta p {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: 18px;
  color: var(--ink-2);
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 820px;
  margin: 44px auto 0;
}

.dl-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 19px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.dl-btn:hover {
  border-color: var(--ink-4);
  background: var(--paper-band);
}

/* The button matching the visitor's OS, flagged by v2.js */
.dl-btn.is-primary {
  border-color: var(--violet);
  background: var(--violet-wash);
}

.dl-btn svg { width: 22px; height: 22px; flex: none; color: var(--ink); }

.dl-main { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.dl-sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.cta-meta {
  margin-top: 26px;
  font-size: 14px;
  color: var(--ink-3);
}

.cta-meta a { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
/* Deeper than --paper-band so the footer separates from the CTA band
   above it rather than merging into one continuous beige block. */
.foot {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  background: var(--paper-band);
}

.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.foot-brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  color: var(--ink-3);
}

.foot-links a { transition: color 0.18s ease; }
.foot-links a:hover { color: var(--ink); }

.foot-copy { font-size: 13.5px; color: var(--ink-4); width: 100%; }

/* --------------------------------------------------------------------------
   8. Responsive — sections
   -------------------------------------------------------------------------- */
/* Arrows are the first thing to go — they carry no information the numbered
   order does not already give. */
@media (max-width: 1040px) {
  .path-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .path-arrow { display: none; }
  .path-step { padding: 22px 20px 24px; }
  .path-title { font-size: 21px; }
}

@media (max-width: 760px) {
  .path { padding-bottom: 64px; }
  .path-grid { grid-template-columns: 1fr; }
}

/* Columns stack: the left rule becomes a top rule so the divisions survive */
@media (max-width: 980px) {
  .caps-grid { grid-template-columns: 1fr; }
  .caps-col + .caps-col { border-left: 0; border-top: 1px solid var(--line); }
  .feature {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 46px 0;
  }

  /* Visual always follows the copy once stacked, regardless of flip */
  .feature--flip .feature-copy,
  .feature--flip .feature-visual { order: initial; }

  .stack-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .caps { padding: 24px 0 70px; }
  .caps-head { margin-bottom: 34px; }
  .caps-col { padding: 24px 22px 26px; }
  .compare { padding: 70px 0; }
  .compare-head { margin-bottom: 34px; }
  .ctab th, .ctab td { padding: 13px 14px; }
  .ctab tbody th { font-size: 14.5px; }
  .ethos { padding: 56px 0; }
  /* Stack the pairs, and repeat the labels inline so each line still says
     which side it belongs to once the columns are gone. */
  .ethos-heads { display: none; }
  .ethos-row { grid-template-columns: 1fr; gap: 6px; }
  .ethos-compare { margin-top: 32px; }
  .features { padding: 64px 0 24px; }
  .features-head { margin-bottom: 46px; }
  .stack, .faq { padding: 70px 0; }
  .stack-grid { grid-template-columns: 1fr; }
  .dl-grid { grid-template-columns: 1fr; }
  .cta { padding: 70px 0; }
  .mock-writer { grid-template-columns: 1fr; }
  .mock-doc-pane { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .faq-item summary { font-size: 18px; }
  .foot-inner { flex-direction: column; align-items: flex-start; }
}

/* Grid mockup is the widest thing on the page — let it scroll on phones
   rather than squashing the columns into illegibility. */
@media (max-width: 520px) {
  .mock-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mock-grid { min-width: 420px; }
}

/* --------------------------------------------------------------------------
   9. Ported components: Linux arch chooser, signup, community
   --------------------------------------------------------------------------
   Markup and behaviour come from the live page (so the Worker contract and
   Turnstile flow stay identical), but the styling is rewritten in the v2
   language — flat white, 1px borders, no shadows — rather than carried over
   from the old warm theme.
   -------------------------------------------------------------------------- */

/* --- Linux architecture chooser ----------------------------------------- */
.arch-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(17, 24, 39, 0.45);
  display: grid;
  place-items: center;
  padding: 24px;
}

.arch-dialog-backdrop[hidden] { display: none; }

.arch-dialog {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 460px;
  text-align: left;
}

.arch-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.arch-dialog-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.arch-dialog-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px;
  border-radius: 8px;
  line-height: 0;
}

.arch-dialog-close:hover { color: var(--ink); background: var(--paper-band); }
.arch-dialog-close svg { width: 18px; height: 18px; fill: currentColor; }

.arch-dialog-sub { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.arch-dialog-options { display: grid; gap: 10px; margin-top: 18px; }
.arch-dialog-options .dl-btn { width: 100%; }

.arch-help { margin-top: 16px; font-size: 13px; color: var(--ink-3); }

.arch-help code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--paper-band);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

/* .dl-text wraps the label pair in the dialog's buttons; the CTA buttons use
   a bare <span> for the same job. */
.dl-text { display: block; }

/* --- Mailing-list signup -------------------------------------------------- */
.signup { padding: 56px 0 96px; text-align: center; }

.signup-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.signup-sub { margin-top: 12px; font-size: 16px; color: var(--ink-2); }

.signup-form { max-width: 460px; margin: 24px auto 0; }

.signup-row { display: flex; gap: 10px; flex-wrap: wrap; }

.input {
  flex: 1 1 220px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
}

.input::placeholder { color: var(--ink-4); }

.input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.12);
}

.signup-form .btn-primary { flex: none; }
.signup-form .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.signup-captcha { display: flex; justify-content: center; margin-top: 14px; }
.signup-captcha:empty { margin-top: 0; }

.msg { font-size: 14px; margin-top: 12px; min-height: 1.2em; }
.msg.error { color: #b91c1c; }
.msg.success { color: var(--teal); }

/* --- Community ------------------------------------------------------------ */
.community { margin-top: 40px; }

.community-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.community-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.community-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 18px;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.community-btn:hover {
  border-color: var(--ink-4);
  background: var(--paper-band);
  color: var(--ink);
}

.community-btn svg { width: 17px; height: 17px; flex: none; }

@media (max-width: 860px) {
  .signup { padding-bottom: 64px; }
  .signup-form .btn-primary { width: 100%; }
}

/* Reserves its line so the form does not jump when a message appears */
.signup-msg { min-height: 1.2em; }