/* ==========================================================================
   SAFE21 — schei.html (the Schèi Wallet presentation page) stylesheet
   ==========================================================================

   Loaded AFTER blog.css, which provides everything shared with the rest of
   the site: the design tokens (dark + light theme), the header, the footer,
   the buttons, the theme toggle, .callout and the closing CTA.

   This file is self-contained on purpose: it does NOT depend on ancora.css.
   The section rhythm, the feature grid, the steps and the FAQ are the same
   patterns as the Àncòra page (same values), repeated here so each landing
   page can change without touching the other. What is new for this page:
   the CSS phone frames around the app screenshots, the hero with two
   phones, the split sections (text + phone) and the three-levels cards.

   The site has no build step: plain CSS, loaded with a <link>.
   ========================================================================== */

/* ---------- Shared section rhythm (same as ancora.css) ---------- */
.band { padding: 72px 0; }
.band-alt {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.3px; }
.section-head .lede { font-size: 17px; color: var(--muted); margin: 14px 0 0; }

.band p { color: var(--body); }
.prose { max-width: 820px; }
.prose p { font-size: 17px; margin: 0 0 20px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--light); font-weight: 600; }
.band a.inline {
  color: var(--teal); text-decoration: underline; text-underline-offset: 3px;
}
.band a.inline:hover { color: var(--accent-hover); }

/* ---------- Phone frame ----------
   A plain CSS frame around a real app screenshot (540x1134 WebP). The
   frame colours are fixed, not themed: a phone is dark in both themes,
   and the warm paper of the app needs a dark edge to stand out on the
   light theme too. */
.phone {
  margin: 0;
  width: 100%; max-width: 270px;
  padding: 8px;
  background: #05080F;
  border: 1px solid #2A3A5A;
  border-radius: 34px;
  box-shadow: 0 18px 40px rgba(4, 8, 16, 0.35);
}
.phone img { width: 100%; height: auto; border-radius: 26px; }

/* ---------- Hero ---------- */
.hero-schei {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding: 64px 0 60px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}
/* App icon + name: the product "signature" above the headline. */
.hero-brand { display: flex; align-items: center; gap: 16px; margin: 6px 0 24px; }
.hero-brand img {
  width: 68px; height: 68px; flex: none;
  border-radius: 16px; box-shadow: 0 0 0 1px var(--line);
}
.hero-brand .name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 34px; letter-spacing: -0.3px; color: var(--light); line-height: 1.1;
}
.hero-brand .name small {
  display: block; font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 14.5px; letter-spacing: 0; color: var(--muted); margin-top: 5px;
}
.hero-schei h1 {
  font-size: 44px; font-weight: 700; letter-spacing: -0.5px; max-width: 560px;
}
.hero-sub { font-size: 19px; color: var(--muted); max-width: 540px; margin: 20px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-facts {
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 1px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin: 26px 0 0;
}
.hero-facts span::after { content: "·"; margin-left: 10px; color: var(--line); }
.hero-facts span:last-child::after { content: ""; }

/* Test-version note: the one Bitcoin-orange accent of the hero. */
.hero-test {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 22px 0 0; padding: 12px 16px; max-width: 540px;
  background: var(--tint-btc-bg); border: 1px solid var(--tint-btc-bd);
  border-radius: 12px;
  font-size: 14.5px; line-height: 1.55; color: var(--body);
}
.hero-test strong { color: var(--orange); font-weight: 600; }

/* Two phones, the second one lower and tucked behind the first. */
.hero-phones { display: flex; justify-content: center; align-items: flex-start; }
.hero-phones .phone { max-width: 250px; position: relative; z-index: 2; }
.hero-phones .phone.back {
  max-width: 220px; margin: 56px 0 0 -46px; z-index: 1; opacity: 0.96;
}

/* ---------- Feature grid (same as ancora.css) ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.features.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--card-shadow);
}
.feature svg { width: 28px; height: 28px; color: var(--teal); margin-bottom: 16px; }
.feature h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.feature p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }

/* ---------- "Come si usa": three steps, each with its screenshot ---------- */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.how-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column;
}
.how-step .num {
  font-family: 'Space Mono', monospace; font-size: 13px;
  color: var(--teal); display: block; margin-bottom: 10px;
}
.how-step h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.how-step p { margin: 0 0 22px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.how-step .phone { margin: auto auto 0; max-width: 230px; }

/* ---------- Split section: text on one side, one phone on the other ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 56px;
  align-items: center;
}
.split .section-head { margin-bottom: 28px; }
.split .phone { justify-self: center; }

/* ---------- Three levels ---------- */
.levels { display: grid; gap: 14px; }
.level {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px;
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--card-shadow);
}
.level .tag {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-align: center;
  color: var(--teal);
  background: var(--tint-teal-bg); border: 1px solid var(--tint-teal-bd);
  border-radius: 8px; padding: 7px 6px;
}
.level .tag small {
  display: block; font-weight: 400; font-size: 11px; letter-spacing: 0;
  color: var(--muted); margin-top: 2px;
}
.level h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.level p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }

/* ---------- Tick list (safety) ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li {
  position: relative; padding-left: 34px;
  font-size: 16px; color: var(--body); line-height: 1.6;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tint-teal-bg); border: 1px solid var(--tint-teal-bd);
}
.ticks li::after {
  content: ""; position: absolute; left: 7px; top: 7px;
  width: 5px; height: 9px;
  border: solid var(--teal); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ticks strong { color: var(--light); font-weight: 600; }

/* ---------- Languages ---------- */
.langs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.langs span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--light);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px;
  box-shadow: var(--card-shadow);
}
.langs span.star { border-color: var(--tint-btc-bd); background: var(--tint-btc-bg); }
/* One real sentence of the app, in Italian and in Venetian. */
.sample {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  max-width: 820px; margin: 26px 0 0;
}
.sample div {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px;
  box-shadow: var(--card-shadow);
}
.sample .lab {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--teal); margin: 0 0 6px;
}
.sample p { margin: 0; font-size: 16px; color: var(--light); line-height: 1.5; }

/* ---------- Download ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--card-shadow);
}
.step .num {
  font-family: 'Space Mono', monospace; font-size: 13px;
  color: var(--teal); display: block; margin-bottom: 10px;
}
.step h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.step p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }
.steps-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* The warning and the test-app boxes reuse .callout from blog.css. */
.band .callout { margin: 32px 0 0; }
.band .callout ul { margin: 0; padding-left: 20px; }
.band .callout li { font-size: 15.5px; color: var(--body); margin-bottom: 10px; }
.band .callout li:last-child { margin-bottom: 0; }
.band .callout p { font-size: 15.5px; margin: 0 0 10px; }
.band .callout p:last-child { margin-bottom: 0; }
.band .callout strong { color: var(--light); font-weight: 600; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.duo .callout { margin-top: 32px; }

/* ---------- FAQ (same as ancora.css) ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 17px; color: var(--light);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: 'Space Mono', monospace; font-size: 18px; color: var(--teal);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; color: var(--body); line-height: 1.65; }
.faq details p + p, .faq details ul + p { margin-top: -8px; }
.faq details ul { margin: -8px 0 0; padding: 0 22px 20px 44px; font-size: 15.5px; color: var(--body); line-height: 1.65; }
.faq details li { margin-bottom: 6px; }

/* ---------- Origin note (credit to Electrum) ---------- */
.origin {
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted); line-height: 1.7;
  max-width: 820px;
}

/* ---------- Responsive (media queries AFTER the base rules) ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-schei h1 { max-width: none; }
  .features.three { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .how-step .phone { margin-top: 4px; }
  .steps { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .band { padding: 52px 0; }
  .hero-schei { padding: 44px 0 44px; }
  .hero-schei h1 { font-size: 32px; }
  .hero-sub { font-size: 17px; }
  .hero-brand img { width: 56px; height: 56px; border-radius: 13px; }
  .hero-brand .name { font-size: 28px; }
  .section-head h2 { font-size: 26px; }
  .features { grid-template-columns: 1fr; }
  .feature, .step, .how-step { padding: 22px 20px; }
  .hero-phones .phone { max-width: 190px; }
  .hero-phones .phone.back { max-width: 168px; margin: 44px 0 0 -40px; }
  .level { grid-template-columns: 1fr; gap: 12px; }
  .level .tag { justify-self: start; padding: 6px 14px; }
  .level .tag small { display: inline; margin-left: 6px; }
  .sample { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; gap: 0; }
}

/* Small helpers: spacing after the translation sample; the closing CTA
   follows a band-alt section, so it needs no top margin here. */
.prose-after { margin-top: 26px; }
.article-cta.cta-flush { margin-top: 0; border-top: 0; }
/* The header is sticky: keep the "Prova senza rischi" box (target of the
   hero's second button and of a FAQ link) clear of it. */
#prova { scroll-margin-top: 100px; }