/* Extracted from an inline <style> in index.html so the site can run a real
   `style-src 'self'` CSP — an inline block forces 'unsafe-inline', which makes
   the directive nearly worthless. Content is unchanged. */
/* Step cards — follow the same card pattern as .contact-item */
      .step-card {
        display: flex;
        gap: 22px;
        align-items: flex-start;
        background: white;
        border: 2px solid #ddd;
        border-left: 5px solid var(--accent-orange);
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 20px;
        box-shadow: 4px 4px 0px 0px #ddd;
        transition: all 0.3s ease;
      }
      .step-card:hover {
        border-color: var(--bitcoin-orange);
        box-shadow: 6px 6px 0px 0px #ccc;
        transform: translate(-2px, -2px);
      }
      .step-number {
        background: var(--accent-orange);
        color: #1a1a1a;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 800;
        flex-shrink: 0;
        box-shadow: 2px 2px 0 #cc8800;
      }
      .step-body { flex: 1; }
      .step-body h3 {
        color: var(--primary-dark);
        font-size: 19px;
        margin: 0 0 10px;
        font-weight: 700;
      }
      .step-body p {
        color: #444;
        font-size: 16px;
        line-height: 1.7;
        margin: 0 0 10px;
      }
      .step-body p:last-child { margin-bottom: 0; }

      /* Inline menu path labels */
      .key {
        display: inline-block;
        background: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 2px 9px;
        font-family: monospace;
        font-size: 14px;
        color: #333;
      }

      /* Config value block */
      .config-block {
        background: #1e1e2e;
        border-radius: 8px;
        padding: 18px 22px;
        margin: 14px 0;
        border: 1px solid #333;
      }
      .config-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 7px 0;
        border-bottom: 1px solid #2a2a3e;
        font-family: monospace;
      }
      .config-row:last-child { border-bottom: none; }
      .config-label { color: #888; font-size: 13px; min-width: 90px; }
      .config-value { color: var(--accent-orange); font-weight: 600; font-size: 15px; }
      .config-value.ok { color: #4caf50; }

      /* Sparrow UI mockup */
      .sparrow-mockup {
        background: #2b2b2b;
        border-radius: 10px;
        border: 1px solid #444;
        box-shadow: 0 16px 40px rgba(0,0,0,0.45);
        overflow: hidden;
        margin: 18px auto;
        max-width: 540px;
        font-family: 'Segoe UI', sans-serif;
        font-size: 13px;
      }
      .sw-bar {
        background: #1a1a1a;
        padding: 9px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #333;
      }
      .sw-dots { display: flex; gap: 6px; }
      .sw-dot { width: 11px; height: 11px; border-radius: 50%; }
      .sw-dot.r { background: #ff5f57; }
      .sw-dot.y { background: #febc2e; }
      .sw-dot.g { background: #28c840; }
      .sw-bar-title { color: #777; font-size: 12px; margin-left: 6px; }
      .sw-body { padding: 18px 20px; }
      .sw-tabs {
        display: flex; gap: 2px; background: #222;
        border-radius: 5px; padding: 3px; margin-bottom: 16px;
      }
      .sw-tab {
        padding: 6px 14px; border-radius: 3px;
        color: #666; cursor: default;
      }
      .sw-tab.on { background: #3c3c3c; color: var(--accent-orange); font-weight: 600; }
      .sw-label { color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; }
      .sw-radios {
        display: flex; gap: 6px; background: #222;
        border-radius: 5px; padding: 5px; margin-bottom: 14px;
      }
      .sw-radio {
        display: flex; align-items: center; gap: 6px;
        padding: 5px 12px; border-radius: 3px; color: #666;
      }
      .sw-radio.on { background: #3c3c3c; color: var(--accent-orange); font-weight: 600; }
      .sw-dot-r {
        width: 13px; height: 13px; border-radius: 50%;
        border: 2px solid #555;
      }
      .sw-radio.on .sw-dot-r {
        border-color: var(--accent-orange);
        background: radial-gradient(circle, var(--accent-orange) 4px, transparent 4px);
      }
      .sw-fields { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
      .sw-field-lbl { color: #777; min-width: 44px; }
      .sw-inp {
        background: #111; border: 1px solid #444; border-radius: 4px;
        padding: 7px 10px; color: var(--accent-orange);
        font-family: monospace; flex: 1;
      }
      .sw-inp.sm { flex: none; width: 64px; text-align: center; }
      .sw-toggle-row {
        display: flex; align-items: center; gap: 10px;
        color: #aaa; margin-bottom: 14px;
      }
      .sw-tgl {
        width: 38px; height: 20px; background: var(--accent-orange);
        border-radius: 10px; position: relative; flex-shrink: 0;
      }
      .sw-tgl::after {
        content: ''; position: absolute;
        width: 14px; height: 14px; background: white;
        border-radius: 50%; top: 3px; right: 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.4);
      }
      .sw-tgl-label { color: var(--accent-orange); font-weight: 700; font-size: 11px; }
      .sw-actions {
        display: flex; justify-content: flex-end; gap: 8px;
        padding-top: 14px; border-top: 1px solid #333; margin-top: 6px;
      }
      .sw-btn { padding: 7px 18px; border-radius: 4px; border: none; font-size: 13px; font-weight: 600; cursor: default; }
      .sw-btn.p { background: var(--accent-orange); color: #111; }
      .sw-btn.s { background: #3c3c3c; color: #aaa; }
      .sw-ok {
        display: flex; align-items: center; gap: 8px; color: #4caf50;
        padding: 8px 10px; background: rgba(76,175,80,0.08);
        border: 1px solid rgba(76,175,80,0.3); border-radius: 5px; margin-top: 10px;
      }
      .sw-ok-dot { width: 7px; height: 7px; background: #4caf50; border-radius: 50%; box-shadow: 0 0 5px #4caf50; flex-shrink: 0; }

      /* HW device cards */
      .hw-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 16px 0;
      }
      .hw-card {
        background: white;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        box-shadow: 3px 3px 0 #ddd;
        transition: all 0.3s;
      }
      .hw-card:hover {
        border-color: var(--accent-orange);
        box-shadow: 4px 4px 0 var(--accent-orange);
        transform: translate(-1px, -1px);
      }
      .hw-icon { font-size: 36px; margin-bottom: 8px; }
      .hw-card h4 { color: var(--primary-dark); font-size: 16px; margin-bottom: 6px; }
      .hw-card p { color: #666; font-size: 14px; line-height: 1.5; margin: 0; }

      /* Callout */
      .callout {
        background: rgba(245, 166, 35, 0.07);
        border: 1px solid rgba(245, 166, 35, 0.35);
        border-radius: 7px;
        padding: 14px 18px;
        margin: 12px 0;
        color: #555;
        font-size: 15px;
        line-height: 1.6;
      }
      .callout strong { color: #b37700; }

      /* Download button — same shadow style as .submit-btn */
      .dl-btn {
        display: inline-block;
        background: var(--primary-dark);
        color: white;
        padding: 13px 34px;
        border: 2px solid black;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 4px 4px 0px 0px var(--accent-orange);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 10px;
      }
      .dl-btn:hover {
        background: var(--accent-orange);
        color: black;
        box-shadow: 6px 6px 0px 0px var(--bitcoin-orange);
        transform: translate(-2px, -2px);
        text-decoration: none;
      }
      .os-pill {
        display: inline-block;
        background: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 20px;
        padding: 4px 13px;
        font-size: 13px;
        color: #555;
        font-weight: 600;
        margin: 4px 3px 0;
      }

      /* Success banner */
      .success-banner {
        background: linear-gradient(135deg, #0f2010 0%, #1a2e1a 100%);
        border: 2px solid #4caf50;
        border-radius: 10px;
        padding: 28px;
        text-align: center;
        box-shadow: 6px 6px 0 rgba(76,175,80,0.25);
        margin-top: 10px;
      }
      .success-banner h3 { color: #4caf50; font-size: 22px; margin-bottom: 10px; }
      .success-banner p { color: #aaa; font-size: 16px; line-height: 1.6; margin: 0; }

      /* A flex/grid item defaults to min-width:auto, so it cannot shrink below its
         content. Combined with the monospace server strings and the non-wrapping
         rows below, that pinned this page's width to 435px no matter how narrow the
         viewport got — the only page on the site that scrolled sideways on a phone. */
      .step-body,
      .config-row,
      .sw-body { min-width: 0; }
      .config-value,
      .sw-field-val { overflow-wrap: anywhere; }
      .sparrow-mockup { max-width: 100%; }

      @media (max-width: 600px) {
        /* Flipping flex-direction also flips which axis align-items governs. The
           card's `align-items: flex-start` is right for the row layout (it top-aligns
           the number badge) but in a column it sizes every child to its MAX-CONTENT
           width instead of the card's — which is what pinned this page at 435px on a
           phone. Stretch the children back; only the badge still wants to hug. */
        .step-card { flex-direction: column; gap: 12px; align-items: stretch; }
        .step-number { align-self: flex-start; }
        .hw-grid { grid-template-columns: 1fr; }
        .sw-radios { flex-direction: column; }
        /* Stack the label above the value instead of forcing them side by side. */
        .config-row { flex-wrap: wrap; gap: 2px 16px; }
        .config-label { min-width: 0; }
        .sw-tabs { flex-wrap: wrap; }
      }

      /* ---- Dark-theme reconciliation ----------------------------------------
         This page predates the shared theme and still used light cards plus a
         few tokens that theme.css doesn't define (--accent-orange etc.). Map the
         stray tokens onto the real accent and repaint the light surfaces so no
         white blocks remain. Placed last so it overrides the rules above. */
      :root {
        --accent-orange: var(--accent);
        --bitcoin-orange: var(--accent-2);
        --primary-dark: var(--ink);
      }
      .step-card,
      .hw-card {
        background: var(--surface-2);
        border: 1px solid var(--line);
        box-shadow: none;
      }
      .step-card { border-left: 3px solid var(--accent); }
      .step-card:hover,
      .hw-card:hover {
        border-color: var(--accent);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        transform: translateY(-2px);
      }
      .step-number { color: #06110f; }
      .step-body h3,
      .hw-card h4 { color: var(--ink); }
      .step-body p,
      .hw-card p { color: var(--ink-soft); }
      .key {
        background: var(--elevate);
        border-color: var(--line-strong);
        color: var(--ink);
      }
      .os-pill {
        background: var(--surface-2);
        border-color: var(--line);
        color: var(--ink-soft);
      }
      .callout { color: var(--ink-soft); }
      .callout strong { color: var(--accent-2); }
      .dl-btn {
        background: var(--accent);
        color: #06110f;
        border: 1px solid transparent;
        box-shadow: none;
      }
      .dl-btn:hover {
        background: var(--accent-2);
        color: #06110f;
        box-shadow: 0 6px 20px var(--accent-soft);
        transform: translateY(-2px);
      }

/* Was a set of inline style= attributes. Those are blocked by `style-src 'self'`
   just like an inline <style> is, so they became classes. 
   Each selector is doubled on purpose: an inline style= outranks any rule, and as
   a single class these lost to more specific ones already in this file (.mono-accent
   came out grey under `.step-body p`). Doubling restores the original outcome. */
.is-ok.is-ok { color:#4caf50; }
.mono-note.mono-note { color:#555;font-size:12px;margin-top:8px;font-family:monospace; }
.mono-accent.mono-accent { font-family:monospace; font-size:17px; color:var(--accent-orange); font-weight:700; }
.fs-16.fs-16 { font-size:16px; }
.mb-0.mb-0 { margin-bottom:0; }
.mt-12.mt-12 { margin-top:12px; }
.mt-14.mt-14 { margin-top:14px; }
.mt-28.mt-28 { margin-top:28px; }
.mockup-narrow.mockup-narrow { max-width:400px; }
.step-number-sm.step-number-sm { width:34px;height:34px;font-size:15px; }