/* ============================================================
   inner.css — about, download, contact
   ============================================================ */

/* ============================================================
   ABOUT — editorial layout
   ============================================================ */
.pullquote {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 4.2vw, 4.2rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  color: var(--ink-50);
}
.pullquote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 4em; line-height: .5;
  color: var(--gold-600);
  opacity: .5;
  margin-bottom: .12em;
}
.about-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.about-open .prose { max-width: 62ch; }

/* Alternating image + text rail */
.rail-row {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-line-soft);
}
.rail-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.rail-row:nth-child(even) .rail-art { order: 2; }
/* The plinth's ambient aura is inset -26% horizontally and deliberately
   bleeds past the handset. Clip it at the rail so that soft glow cannot
   widen the document on narrow screens. */
.rail-rows { overflow: hidden; }
.rail-art { display: flex; justify-content: center; }
.rail-art .plinth { --dev-w: 250px; }
.rail-copy h3 { margin-bottom: var(--sp-3); }
.rail-copy p { color: var(--ink-200); font-size: var(--fs-sm); }
.rail-copy p + p { margin-top: .95em; }
.rail-n {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 500;
  color: transparent; -webkit-text-stroke: 1px var(--gold-600);
  line-height: 1; display: block; margin-bottom: var(--sp-3);
}

.why-callout {
  padding: clamp(1.6rem, 1rem + 2.5vw, 3rem);
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 70% 90% at 15% 0%, rgba(201,169,97,.12), transparent 62%),
    var(--ink-850);
}
.why-callout h2 { margin-bottom: var(--sp-4); }
.why-callout p { color: var(--ink-200); }

.standards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line-soft);
  border: 1px solid var(--ink-line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.standard {
  background: var(--ink-obsidian);
  padding: var(--sp-6);
  transition: background-color var(--t) var(--ease);
}
.standard:hover { background: var(--ink-850); }
.standard-n {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  color: transparent; -webkit-text-stroke: .8px var(--gold-600);
  display: block; margin-bottom: var(--sp-3);
}
.standard h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.standard p { font-size: var(--fs-sm); color: var(--ink-300); }

/* ============================================================
   DOWNLOAD
   ============================================================ */
.dl-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(ellipse 80% 60% at 72% 30%, rgba(196,30,58,.16), transparent 64%),
    var(--ink-obsidian);
}
.dl-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.platforms { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.platform {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1.05rem;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  background: var(--ink-850);
  transition: all var(--t) var(--ease);
}
.platform:hover { border-color: var(--gold-hair); transform: translateY(-2px); }
.platform svg { width: 22px; height: 22px; color: var(--gold-400); flex: none; }
.platform b {
  display: block; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-50);
}
.platform span { display: block; font-size: 10px; letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-400); }

/* Install guides, side by side */
.guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.guide { padding: var(--sp-6); }
.guide-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ink-line);
}
.guide-head svg { width: 24px; height: 24px; color: var(--gold-400); flex: none; }
.guide-head h3 { font-size: var(--fs-h4); margin: 0; }
.guide-head span { display: block; font-size: 11px; color: var(--ink-400); }

/* Safety: do / never */
.safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.safety-col { padding: var(--sp-6); border-radius: var(--radius); border: 1px solid var(--ink-line); }
.safety-do { background: rgba(79,183,131,.05); border-color: rgba(79,183,131,.3); }
.safety-never { background: rgba(224,90,76,.05); border-color: rgba(224,90,76,.3); }
.safety-col h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-4); }
.safety-col h3 svg { width: 20px; height: 20px; flex: none; }
.safety-do h3 { color: var(--state-ok); }
.safety-never h3 { color: var(--state-bad); }
.safety-col li {
  position: relative;
  padding-left: 1.6rem;
  padding-block: .55rem;
  font-size: var(--fs-sm);
  color: var(--ink-200);
  border-top: 1px solid var(--ink-line-soft);
}
.safety-col li:first-child { border-top: 0; }
.safety-col li::before {
  position: absolute; left: 0; top: .62rem;
  font-size: .85rem; font-weight: 700;
}
.safety-do li::before { content: "✓"; color: var(--state-ok); }
.safety-never li::before { content: "✕"; color: var(--state-bad); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.contact-form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-850);
}
.contact-form h2 { margin-bottom: .5rem; }
.contact-form > p { color: var(--ink-300); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.field-row .field { margin-bottom: var(--sp-5); }

.channel {
  padding: var(--sp-5);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
}
.channel-support {
  background: linear-gradient(150deg, rgba(34,158,217,.14), rgba(34,158,217,.03));
  border: 1px solid rgba(34,158,217,.34);
}
.channel-community {
  background: linear-gradient(150deg, rgba(196,30,58,.14), rgba(196,30,58,.03));
  border: 1px solid rgba(224,48,76,.34);
}
.channel-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.channel-head h3 { font-size: var(--fs-h4); margin: 0; }
.channel-ico { width: 40px; height: 40px; display: grid; place-items: center; flex: none; color: #fff; }
.channel-support .channel-ico { border-radius: 50%; background: linear-gradient(135deg, var(--tg-blue), var(--tg-blue-2)); }
.channel-community .channel-ico { border-radius: var(--radius-sm); background: var(--grad-ruby); }
.channel-ico svg { width: 20px; height: 20px; }
.channel p { font-size: var(--fs-sm); color: var(--ink-200); margin-bottom: var(--sp-4); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .about-open { grid-template-columns: minmax(0, 1fr); }
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .standards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .guides, .safety { grid-template-columns: minmax(0, 1fr); }
  .rail-row,
  .rail-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .rail-row:nth-child(even) .rail-art { order: 0; }
}
@media (max-width: 560px) {
  .standards { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}