/* ---------- Audience ---------- */
  .aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media(max-width:820px){ .aud-grid{ grid-template-columns:1fr;} }
  .aud { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; transition:transform .18s ease, box-shadow .18s ease; }
  .aud:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
  .aud .ic { width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;margin-bottom:16px;background:linear-gradient(135deg,var(--primary),var(--primary-light));box-shadow:var(--shadow-sm); }
  .aud .ic.green{ background:linear-gradient(135deg,var(--accent),#6cc24a);}
  .aud .ic svg{width:24px;height:24px;}
  .aud h3{font-size:1.18rem;margin-bottom:8px;}
  .aud p{margin:0;font-size:.96rem;}

  /* ---------- Steps ---------- */
  .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media(max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr);} }
  @media(max-width:520px){ .steps{ grid-template-columns:1fr;} }
  .step { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
  .step .num { width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:14px; }
  .step h4 { margin:0 0 8px; font-size:1.02rem; color:var(--ink); }
  .step p { margin:0 0 10px; font-size:.92rem; }
  .step code { display:block; background:var(--bg-deep); color:#cfe6ff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; padding:9px 11px; border-radius:8px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }

  /* ---------- Hash-Chain ---------- */
  .chain { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center; }
  .block { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; min-width:215px; box-shadow:var(--shadow-sm); }
  .block .bn { font-weight:800; color:var(--ink); font-size:.95rem; }
  .block .bd { color:var(--muted); font-size:.82rem; margin-bottom:11px; }
  .block .bh { font-family:ui-monospace,Menlo,monospace; font-size:.77rem; color:var(--ink-soft); display:flex; gap:8px; line-height:1.7; }
  .block .bh span { color:var(--muted); width:36px; flex:none; }
  .block .bh.cur { color:var(--accent-dark); font-weight:700; }
  .chain .lnk { display:flex; align-items:center; color:var(--primary); font-size:1.5rem; padding:0 8px; }
  @media(max-width:720px){ .chain{ flex-direction:column; align-items:center; } .chain .lnk{ transform:rotate(90deg); padding:8px 0; } }
  .chain-note { text-align:center; max-width:680px; margin:28px auto 0; color:var(--ink-soft); font-size:1.02rem; }
  .chain-note b { color:var(--danger); }

  /* footer 2nd row */
  .foot2 { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center; justify-content:center; font-size:.88rem; color:var(--muted); }
  .foot2 a { color:var(--ink-soft); font-weight:600; }
  .foot2 a:hover { color:var(--primary); }
  .foot2 .sep { color:var(--line); }

  /* reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
    html { scroll-behavior:auto; }
  }

  :root {
    --primary: #1f6aa5;        /* OpenNIT Blau */
    --primary-dark: #155080;
    --primary-light: #3c8dbc;
    --accent: #4ba832;         /* OpenNIT Grün (NIT) */
    --accent-dark: #3a8527;
    --ink: #1a2330;
    --ink-soft: #475467;
    --muted: #6b7787;
    --line: #e4e9f0;
    --bg: #ffffff;
    --bg-alt: #f4f7fb;
    --bg-deep: #0f2438;
    --warning: #f39c12;
    --danger: #dd4b39;
    --shadow: 0 18px 50px -20px rgba(15, 36, 56, 0.35);
    --shadow-sm: 0 6px 20px -10px rgba(15, 36, 56, 0.30);
    --radius: 16px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.01em; }
  p { margin: 0 0 1em; color: var(--ink-soft); }
  a { color: var(--primary); text-decoration: none; }

  .wrap { width: min(1180px, 92vw); margin-inline: auto; }

  /* ---------- Header / Nav ---------- */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
  .nav img { height: 38px; width: auto; display: block; }
  .nav nav { display: flex; gap: 28px; align-items: center; }
  .nav nav a { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
  .nav nav a:hover { color: var(--primary); }
  .btn {
    display: inline-block; font-weight: 700; border-radius: 10px;
    padding: 11px 22px; transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
  .btn-primary:hover { transform: translateY(-2px); }
  .btn-ghost { border: 1.5px solid var(--line); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
  @media (max-width: 760px){ .nav nav a:not(.btn){ display:none; } }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; overflow: hidden;
    background:
      radial-gradient(1100px 500px at 80% -10%, rgba(75,168,50,.10), transparent 60%),
      radial-gradient(900px 500px at 5% 0%, rgba(31,106,165,.12), transparent 55%),
      var(--bg-alt);
    padding: 84px 0 64px;
    border-bottom: 1px solid var(--line);
  }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1.15fr; gap: 56px; align-items: center; }
  @media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; gap: 36px; } }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--line); color: var(--primary-dark);
    font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
  }
  .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
  .hero h1 .grad { color: var(--accent); }
  .hero .lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 36ch; }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
  .hero-points { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; }
  .hero-points span { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); font-size: .95rem; }
  .check {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px;
  }

  /* Hero screenshot frame */
  .frame {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    border: 1px solid var(--line); background: #fff;
    transform: perspective(1600px) rotateY(-4deg) rotateX(2deg);
  }
  .frame .bar {
    display: flex; gap: 7px; align-items: center; padding: 10px 14px;
    background: #f0f3f8; border-bottom: 1px solid var(--line);
  }
  .frame .bar i { width: 11px; height: 11px; border-radius: 50%; background: #cdd5e0; display:block; }
  .frame .bar i:nth-child(1){ background:#ff5f57; } .frame .bar i:nth-child(2){ background:#febc2e; } .frame .bar i:nth-child(3){ background:#28c840; }
  .ratio { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
  .ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

  /* ---------- Stats strip ---------- */
  .stats { background: var(--bg-deep); color: #fff; padding: 30px 0; }
  .stats .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
  @media (max-width: 760px){ .stats .row{ grid-template-columns: repeat(2,1fr); gap: 28px; } }
  .stat b { display: block; font-size: 2rem; color: #fff; font-weight: 800; letter-spacing: -.02em; }
  .stat span { color: #9fb3c8; font-size: .95rem; font-weight: 600; }
  .stat b em { color: var(--accent); font-style: normal; }

  /* ---------- Sections ---------- */
  section { padding: 78px 0; }
  .section-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
  .section-head .kicker { color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
  .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: 10px; }
  .section-head p { font-size: 1.1rem; }
  .alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

  /* Feature cards */
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 940px){ .features{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 620px){ .features{ grid-template-columns: 1fr;} }
  .card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 26px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cfe0ef; }
  .ico {
    width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff;
    margin-bottom: 18px; box-shadow: var(--shadow-sm);
  }
  .ico.green { background: linear-gradient(135deg, var(--accent), #6cc24a); }
  .ico svg { width: 26px; height: 26px; }
  .card h3 { font-size: 1.2rem; }
  .card p { margin: 0; font-size: .98rem; }

  /* ---------- Spotlight (Module im Detail) ---------- */
  .spot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; margin-bottom: 68px; }
  .spot-row:last-child { margin-bottom: 0; }
  .spot-row.flip .spot-media { order: 2; }
  @media (max-width: 900px){ .spot-row{ grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; } .spot-row.flip .spot-media{ order: 0; } }
  .spot-tag {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .07em; color: var(--primary); margin-bottom: 12px;
  }
  .spot-tag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .spot-text h3 { font-size: 1.6rem; margin-bottom: 12px; }
  .spot-text > p { font-size: 1.05rem; margin-bottom: 16px; }
  .spot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
  .spot-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); font-size: .98rem; }
  .spot-list li b { color: var(--ink); font-weight: 700; }
  .spot-list .ck {
    flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(75,168,50,.13);
    color: var(--accent-dark); display: grid; place-items: center; font-size: 11px; margin-top: 2px;
  }
  .spot-media { cursor: zoom-in; }

  /* ---------- Gallery ---------- */
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  @media (max-width: 940px){ .gallery{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 620px){ .gallery{ grid-template-columns: 1fr;} }
  .shot {
    border-radius: var(--radius); overflow: hidden; background: #fff;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: zoom-in;
  }
  .shot:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
  .shot .cap { padding: 14px 18px; }
  .shot .cap b { display: block; font-size: 1.02rem; color: var(--ink); }
  .shot .cap span { font-size: .9rem; color: var(--muted); }

  /* ---------- Module list ---------- */
  .modules { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 980px; margin: 0 auto; }
  .pill {
    display: inline-flex; align-items: center; gap: 8px; background: #fff;
    border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px;
    font-weight: 600; color: var(--ink); font-size: .95rem; box-shadow: var(--shadow-sm);
    transition: transform .15s ease, border-color .15s ease, color .15s ease;
  }
  .pill:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); }
  .pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

  /* ---------- Security band ---------- */
  .secband { background: linear-gradient(135deg, var(--bg-deep), #14304b); color: #fff; }
  .secband .section-head h2 { color: #fff; }
  .secband .section-head p { color: #b9cadb; }
  .secgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
  @media (max-width: 940px){ .secgrid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 520px){ .secgrid{ grid-template-columns: 1fr;} }
  .secitem { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 22px; }
  .secitem b { color: #fff; display: block; font-size: 1.05rem; margin-bottom: 6px; }
  .secitem span { color: #aebfd0; font-size: .92rem; }
  .secitem .tag { color: var(--accent); font-weight: 800; letter-spacing: .05em; font-size: .75rem; text-transform: uppercase; }

  /* ---------- CTA ---------- */
  .cta { text-align: center; }
  .cta .box {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 22px; padding: 56px 32px; color: #fff; box-shadow: var(--shadow);
    background-image:
      radial-gradient(600px 240px at 90% 0%, rgba(75,168,50,.35), transparent 60%),
      linear-gradient(135deg, var(--primary), var(--primary-dark));
  }
  .cta h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .cta p { color: #dceaf6; font-size: 1.12rem; max-width: 50ch; margin-inline: auto; }
  .cta .btn-primary { background: #fff; color: var(--primary-dark); margin-top: 14px; }
  .cta .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; margin-top: 14px; }

  /* ---------- Footer ---------- */
  footer { padding: 38px 0; border-top: 1px solid var(--line); }
  .foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
  .foot img { height: 30px; }
  .foot span { color: var(--muted); font-size: .9rem; }
  .badges { display: flex; gap: 8px; flex-wrap: wrap; }
  .badge { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }

  /* ---------- Why ---------- */
  .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media(max-width:940px){ .why-grid{ grid-template-columns:repeat(2,1fr);} }
  @media(max-width:620px){ .why-grid{ grid-template-columns:1fr;} }
  .why-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:transform .18s ease, box-shadow .18s ease; }
  .why-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
  .why-card .n { font-size:.82rem; font-weight:800; color:var(--accent-dark); letter-spacing:.08em; }
  .why-card h3 { font-size:1.15rem; margin:10px 0 8px; }
  .why-card p { margin:0; font-size:.96rem; }

  /* ---------- Feature detail ---------- */
  .fcat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  @media(max-width:820px){ .fcat-grid{ grid-template-columns:1fr;} }
  .fcat { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; }
  .fcat .fhead { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
  .fcat .fhead .ic { width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(135deg,var(--primary),var(--primary-light)); box-shadow:var(--shadow-sm); }
  .fcat .fhead .ic.green{ background:linear-gradient(135deg,var(--accent),#6cc24a);}
  .fcat .fhead .ic svg{ width:23px;height:23px; }
  .fcat .fhead h3 { margin:0; font-size:1.18rem; }
  .fcat ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .fcat li { display:flex; gap:10px; font-size:.95rem; color:var(--ink-soft); line-height:1.45; }
  .fcat li::before { content:"\2713"; color:var(--accent-dark); font-weight:800; flex:none; }

  /* ---------- Integrations ---------- */
  .integ-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media(max-width:820px){ .integ-grid{ grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .integ-grid{ grid-template-columns:1fr;} }
  .integ { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
  .integ b { display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--primary); margin-bottom:11px; font-weight:800;}
  .integ .tags { display:flex; flex-wrap:wrap; gap:7px; }
  .integ .tags span { background:var(--bg-alt); border:1px solid var(--line); border-radius:7px; padding:4px 10px; font-size:.85rem; font-weight:600; color:var(--ink); }

  /* ---------- Spec (tech + requirements) ---------- */
  .spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
  @media(max-width:820px){ .spec-grid{ grid-template-columns:1fr;} }
  .spec { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
  .spec h3 { font-size:1.2rem; margin-bottom:18px; }
  .spec dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:11px 20px; }
  .spec dt { color:var(--muted); font-weight:600; font-size:.92rem; }
  .spec dd { margin:0; color:var(--ink); font-weight:600; font-size:.92rem; text-align:right; }
  .spec table { width:100%; border-collapse:collapse; font-size:.92rem; }
  .spec th, .spec td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
  .spec td:not(:first-child), .spec th:not(:first-child) { text-align:center; }
  .spec th { color:var(--muted); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
  .spec tr:last-child td { border-bottom:none; }
  .spec .note { margin:16px 0 0; font-size:.86rem; color:var(--muted); }

  /* ---------- FAQ ---------- */
  .faq { max-width:840px; margin-inline:auto; display:grid; gap:12px; }
  .faq details { background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 22px; }
  .faq summary { cursor:pointer; list-style:none; padding:18px 0; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:1.02rem; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; color:var(--primary); font-size:1.5rem; font-weight:400; line-height:1; transition:transform .2s; flex:none; }
  .faq details[open] summary::after { transform:rotate(45deg); }
  .faq details p { padding:0 0 18px; margin:0; font-size:.97rem; }

  /* anchor offset for sticky header */
  section[id] { scroll-margin-top: 78px; }

  /* keyboard focus */
  .shot:focus-visible, .spot-media:focus-visible, .lb .x:focus-visible,
  .gallery .shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

  /* ---------- Tool-Zoo comparison ---------- */
  .toolzoo { background: linear-gradient(135deg, #eef4fb, #edf6f0); border-block: 1px solid var(--line); }
  .swap-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  @media(max-width:820px){ .swap-grid{ grid-template-columns:1fr;} }
  .swap { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-sm); }
  .swap .old { flex:1; display:flex; flex-wrap:wrap; gap:6px; }
  .swap .old s { color:var(--muted); text-decoration-color:var(--danger); background:var(--bg-alt); border:1px solid var(--line); border-radius:7px; padding:3px 9px; font-size:.83rem; font-weight:600; }
  .swap .arr { color:var(--primary); font-size:1.25rem; flex:none; }
  .swap .new { flex:none; display:inline-flex; align-items:center; gap:7px; font-weight:800; color:var(--ink); font-size:.98rem; background:linear-gradient(135deg, rgba(31,106,165,.10), rgba(75,168,50,.10)); border:1px solid #d7e6f2; border-radius:9px; padding:8px 13px; }
  .swap .new .d { width:7px;height:7px;border-radius:50%;background:var(--accent); flex:none; }
  .tz-note { text-align:center; margin-top:28px; color:var(--ink-soft); font-size:1.02rem; }

  /* ---------- Lightbox ---------- */
  .lb { position: fixed; inset: 0; background: rgba(10,22,36,.92); display: none; place-items: center; z-index: 100; padding: 4vw; }
  .lb.open { display: grid; }
  .lb img { max-width: 94vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .lb .x { position: absolute; top: 22px; right: 28px; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; opacity: .85; background: none; border: none; padding: 4px 10px; font-family: inherit; }
  .lb .x:hover { opacity: 1; }

  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }

/* ====================================================
   Multi-page additions (Beta · Bugtracker · Features)
   ==================================================== */
/* Dev/Beta top banner */
.topbar{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;text-align:center;font-weight:600;font-size:.92rem;padding:9px 16px;}
.topbar a{color:#fff;text-decoration:underline;font-weight:800;}

/* nav: brand link + responsive (override mobile hiding for multi-page) */
.nav .brand{display:inline-flex;align-items:center;}
@media(max-width:760px){ .nav nav a:not(.btn){display:inline-flex!important;} .nav nav{flex-wrap:wrap;gap:10px 14px;justify-content:flex-end;} .nav nav a{font-size:.9rem;} }

/* beta tag */
.beta-tag{display:inline-block;background:var(--warning);color:#3a2a00;font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:6px;vertical-align:middle;margin-left:8px;}

/* sub-page hero */
.subhero{background:radial-gradient(900px 420px at 90% -20%,rgba(75,168,50,.10),transparent 60%),radial-gradient(800px 420px at -5% 0%,rgba(31,106,165,.12),transparent 55%),var(--bg-alt);border-bottom:1px solid var(--line);padding:58px 0 44px;}
.subhero .kicker{color:var(--primary);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;}
.subhero h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:10px 0 14px;}
.subhero p{font-size:1.12rem;max-width:62ch;}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:16px;}
.crumbs a{color:var(--ink-soft);font-weight:600;}

/* feedback layout: form + aside */
.feedback-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:36px;align-items:start;}
@media(max-width:900px){.feedback-grid{grid-template-columns:1fr;}}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);}
.field{margin-bottom:18px;}
.field>label{display:block;font-weight:700;color:var(--ink);font-size:.92rem;margin-bottom:6px;}
.field .req{color:var(--danger);}
.field .hint{font-weight:400;color:var(--muted);font-size:.84rem;margin-left:4px;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,106,165,.15);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.row2{grid-template-columns:1fr;}}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px;}
.form-note{font-size:.86rem;color:var(--muted);margin-top:14px;}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}
.btn-accent:hover{transform:translateY(-2px);}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}
.copied{color:var(--accent-dark);font-weight:700;font-size:.9rem;}

/* aside cards */
.aside-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.aside-card h3{font-size:1.05rem;margin-bottom:12px;}
.aside-card ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;}
.aside-card li{display:flex;gap:9px;font-size:.93rem;color:var(--ink-soft);}
.aside-card li::before{content:"\2192";color:var(--primary);font-weight:800;flex:none;}

/* status board / roadmap */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:820px){.board{grid-template-columns:1fr;}}
.bcol{background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:16px;}
.bcol h3{font-size:1rem;display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.bcol .cnt{background:#fff;border:1px solid var(--line);border-radius:999px;font-size:.78rem;padding:1px 9px;color:var(--muted);font-weight:700;margin-left:auto;}
.bitem{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.bitem:last-child{margin-bottom:0;}
.bitem b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:3px;}
.bitem p{margin:0;font-size:.85rem;color:var(--muted);}
.bitem .tags{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);}
.chip.sev-high{background:#fdecea;border-color:#f5c2c0;color:#c0392b;}
.chip.sev-med{background:#fff4e0;border-color:#f3d29a;color:#b9770e;}
.chip.sev-low{background:#eef6ee;border-color:#bfe0bf;color:#2e7d32;}
.dot-s{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;}
.dot-open{background:#dd4b39;}.dot-prog{background:#f39c12;}.dot-done{background:#00a65a;}.dot-plan{background:#6c757d;}

/* perks grid (tester) */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:820px){.perks{grid-template-columns:1fr;}}

/* ====================================================
   Disclaimer / Acknowledgement / Credits
   ==================================================== */
/* notice / disclaimer */
.notice{background:#fff8e9;border:1px solid #f3d79a;border-left:4px solid var(--warning);border-radius:12px;padding:20px 22px;margin-bottom:20px;}
.notice h3{display:flex;align-items:center;gap:9px;font-size:1.05rem;margin:0 0 8px;color:#7a4f00;}
.notice p{margin:0 0 10px;color:#5b4a2a;font-size:.93rem;}
.notice ul{margin:0 0 4px;padding:0;list-style:none;display:grid;gap:7px;}
.notice li{display:flex;gap:9px;font-size:.92rem;color:#5b4a2a;}
.notice li::before{content:"\2022";color:#c98a14;font-weight:800;flex:none;}
.notice .fine{font-size:.82rem;color:#7a6a48;margin:8px 0 0;}
.notice a{color:#9a6400;font-weight:700;}

/* acknowledgement checkbox */
.ack{display:flex;gap:11px;align-items:flex-start;background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:18px;}
.ack input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--primary);}
.ack label{font-size:.92rem;color:var(--ink);font-weight:600;line-height:1.4;}

/* credits */
.credit-group{margin-bottom:42px;}
.credit-group:last-child{margin-bottom:0;}
.credit-group>h2{font-size:1.3rem;margin-bottom:18px;}
.credits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.credits{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.credits{grid-template-columns:1fr;}}
.credit{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;}
.credit:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.credit .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;}
.credit h3{font-size:1.0rem;margin:0;}
.credit h3 a{color:var(--ink);}
.credit h3 a:hover{color:var(--primary);}
.credit .lic{font-size:.7rem;font-weight:700;color:var(--ink-soft);background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap;}
.credit p{margin:0;font-size:.88rem;color:var(--muted);}