:root {
    --ink: #0c0c0e;        /* warm near-black canvas */
    --panel: #151518;
    --panel-2: #1c1c21;
    --line: #2a2a31;
    --bar: #000000;        /* true redaction black */
    --amber: #f5b83d;      /* the one accent — highlighter amber */
    --amber-deep: #e0a01f;
    --text: #ededea;       /* warm off-white */
    --muted: #8c8c95;
    --radius: 14px;
    --max: 1080px;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--ink); color: var(--text); font-family: var(--sans);
    line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  /* faint document grid */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 48px 48px; opacity: .12;
    mask-image: radial-gradient(circle at 70% 0%, #000 0%, transparent 70%);
  }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

  /* mono label / "classified" stamp */
  .label { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
  .muted { color: var(--muted); }

  /* redaction bar primitive */
  .bar {
    display: inline-block; background: var(--bar); color: transparent; border-radius: 4px;
    padding: 0 .5ch; user-select: none; position: relative;
    box-shadow: inset 0 0 0 1px #20242c;
  }
  .bar.amber { box-shadow: inset 0 0 0 1.5px var(--amber); }

  /* announcement bar */
  .announce { position: relative; z-index: 60; background: var(--amber); color: #1a1303;
        font-family: var(--mono); font-size: 13px; letter-spacing: .02em; text-align: center;
        padding: 9px 40px 9px 16px; }
  .announce a { color: #1a1303; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(26,19,3,.45); }
  .announce a:hover { border-bottom-color: #1a1303; }
  .announce .x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        cursor: pointer; border: none; background: transparent; color: #1a1303; font-size: 16px;
        line-height: 1; opacity: .6; padding: 4px; }
  .announce .x:hover { opacity: 1; }
  .announce.hide { display: none; }
  @media (max-width: 560px){ .announce { font-size: 12px; padding-right: 36px; } }

  /* nav */
  nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px);
        background: rgba(12,12,14,.7); border-bottom: 1px solid var(--line); }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
  .brand svg { width: 26px; height: 26px; border-radius: 7px; }
  .nav-links { display: flex; align-items: center; gap: 26px; }
  .nav-links a.lnk { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .15s ease; }
  .nav-links a.lnk:hover { color: var(--text); }
  .btn {
    display: inline-block; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
    background: var(--amber); color: #1a1303; letter-spacing: .01em;
    transition: transform .15s ease, background .15s ease; border: 0; cursor: pointer;
  }
  .btn:hover { transform: translateY(-1px); background: #ffc859; }
  .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
  .btn.lg { padding: 15px 26px; font-size: 16px; border-radius: 12px; }

  /* hero */
  header { padding: 92px 0 56px; }
  .stamp {
    display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; margin-bottom: 26px;
  }
  .stamp .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
  h1 { font-size: clamp(40px, 6.4vw, 68px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
  h1 .hl { position: relative; white-space: nowrap; }
  h1 .hl::after { content:""; position:absolute; left:-2px; right:-2px; bottom: .08em; height: .34em; background: var(--amber); opacity:.32; z-index:-1; border-radius:2px; }
  .sub { color: var(--muted); font-size: clamp(17px, 2.2vw, 20px); max-width: 600px; margin: 24px 0 30px; }
  .hero-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .hero-cta .tiny { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing:.02em; }

  /* hero code card — the redaction in action */
  .terminal { margin-top: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
  .term-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
  .term-top .tl { width: 11px; height: 11px; border-radius: 50%; background:#3a3a42; }
  .term-top .tt { margin-left: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
  .term-top .live { margin-left:auto; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:#ff5c5c; letter-spacing:.12em; }
  .term-top .live .rec { width:8px; height:8px; border-radius:50%; background:#ff5c5c; animation: blink 1.4s infinite; }
  @keyframes blink { 50% { opacity:.25; } }
  pre.code { margin:0; padding: 24px; font-family: var(--mono); font-size: 14px; line-height: 2; overflow-x:auto; }
  .code .cm { color:#5d5d66; } .code .kw { color: var(--amber); } .code .var { color:#cfcfca; }
  .seal { animation: seal 1s ease both; }
  .seal::after {
    content:"CENSRED"; position:absolute; right:-2px; top:-8px; font-family:var(--mono); font-size:8.5px;
    letter-spacing:.1em; color: var(--amber); background: var(--panel); padding:1px 5px; border-radius:4px;
    border:1px solid var(--line); opacity:0; animation: tag .4s 1s forwards;
  }
  @keyframes seal { from { filter: blur(8px); } to { filter: blur(0); } }
  @keyframes tag { to { opacity:1; } }

  /* trust strip */
  .trust { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: rgba(21,21,24,.4); }
  .trust .wrap { display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; align-items:center; padding:18px 24px; }
  .trust span { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .trust span b { color: var(--text); font-weight:600; }
  .trust .sep { color: var(--amber); }

  /* forms */
  .waitlist { display:flex; gap:10px; flex-wrap:wrap; max-width:480px; }
  .waitlist.center { margin:0 auto; justify-content:center; }
  .waitlist input[type=email] { flex:1 1 240px; padding:14px 16px; border-radius:10px; border:1px solid var(--line);
    background: var(--panel); color: var(--text); font-size:16px; outline:none; font-family:var(--sans); }
  .waitlist input[type=email]:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,184,61,.16); }
  .form-note { font-family: var(--mono); font-size:12px; color:var(--muted); margin-top:14px; letter-spacing:.02em; }
  .formMsg { font-size:14px; margin-top:12px; min-height:20px; }

  /* sections */
  section { padding: 78px 0; }
  .head { max-width: 660px; }
  .head.center { margin:0 auto; text-align:center; }
  h2 { font-size: clamp(28px,4vw,42px); letter-spacing:-.025em; margin:14px 0 10px; font-weight:800; line-height:1.08; }
  .lead { color: var(--muted); }
  code.inline { font-family: var(--mono); font-size:.92em; background: var(--panel-2); padding:1px 6px; border-radius:5px; color: var(--amber); }

  .grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:46px; }
  .card { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:28px; transition: border-color .15s ease, transform .15s ease; }
  .card:hover { border-color:#3a3a44; transform: translateY(-2px); }
  .card .ic { width:38px; height:8px; border-radius:3px; background: var(--bar); box-shadow: inset 0 0 0 1px #24242c; margin-bottom:20px; }
  .card.flag .ic { background: var(--amber); box-shadow:none; }
  .card h3 { font-size:18px; margin-bottom:7px; letter-spacing:-.01em; }
  .card p { color: var(--muted); font-size:15px; }

  .steps { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:46px; counter-reset:s; }
  .step { background: var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
  .step .n { counter-increment:s; font-family:var(--mono); font-size:12px; letter-spacing:.18em; color: var(--amber); }
  .step .n::before { content: "0" counter(s) " / "; }
  .step h3 { font-size:18px; margin:10px 0 5px; }
  .step p { color: var(--muted); font-size:14.5px; }

  /* real app screenshots */
  .shots { display:grid; gap:18px; margin-top:42px; }
  .shot { margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
          background:var(--panel); box-shadow:0 30px 70px rgba(0,0,0,.45); }
  .shot img { display:block; width:100%; height:auto; }
  .shot figcaption { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
                     color:var(--muted); padding:12px 16px; border-top:1px solid var(--line); background:var(--panel-2); }
  .shot-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:760px){ .shot-row{ grid-template-columns:1fr; } }

  /* security checklist */
  .checks { margin-top:34px; display:grid; gap:14px; }
  .chk { display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
  .chk .mk { flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:var(--amber); display:flex; align-items:center; justify-content:center; margin-top:2px; }
  .chk .mk::after { content:""; width:6px; height:11px; border:solid #1a1303; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); margin-top:-2px; }
  .chk b { display:block; margin-bottom:2px; }
  .chk span { color:var(--muted); font-size:14.5px; }

  .who { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
  .pill { font-family: var(--mono); font-size:13px; background: var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 14px; color: var(--muted); }
  .pill b { color: var(--text); font-weight:700; }
  .pill .tag { color: var(--amber); }
  .pill.soon { opacity:.55; }

  /* pricing */
  .price-card { max-width:440px; margin:46px auto 0; background:var(--panel); border:1px solid var(--line); border-radius:20px;
                padding:38px 34px; text-align:center; position:relative;
                box-shadow:0 40px 90px rgba(0,0,0,.5); }
  .price-card .ribbon { display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
                        color:var(--amber); border:1px solid rgba(245,184,61,.4); border-radius:999px; padding:5px 12px; margin-bottom:20px; }
  .price-row { display:flex; align-items:baseline; justify-content:center; gap:12px; }
  .price-row .was { font-size:22px; color:var(--muted); text-decoration:line-through; }
  .price-row .now { font-size:58px; font-weight:800; letter-spacing:-.03em; }
  .price-row .per { color:var(--muted); font-size:14px; }
  .price-sub { color:var(--muted); margin:8px 0 24px; font-size:15px; }
  .price-card .earlybird { background:rgba(245,184,61,.08); border:1px solid rgba(245,184,61,.35); border-radius:12px;
                           padding:14px 16px; margin:0 0 24px; font-size:14.5px; }
  .price-card .earlybird b { color:var(--amber); }
  .price-feat { list-style:none; text-align:left; margin:24px 0 4px; display:grid; gap:11px; }
  .price-feat li { display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:14.5px; }
  .price-feat li::before { content:""; flex:0 0 auto; width:16px; height:9px; border-radius:2px; background:var(--bar); box-shadow:inset 0 0 0 1px #2c2c34; margin-top:6px; }
  .price-feat li:nth-child(2)::before { background:var(--amber); box-shadow:none; }
  .fine { font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:20px; letter-spacing:.02em; line-height:1.7; }

  /* windows */
  .windows { border:1px solid var(--line); border-radius:20px; padding:40px 30px; text-align:center;
             background:radial-gradient(600px 280px at 50% 0%, rgba(245,184,61,.05), transparent 70%); }

  /* faq */
  .faq { margin-top:40px; display:grid; gap:12px; max-width:760px; }
  details { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0 20px; }
  details summary { cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:16.5px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  details summary::-webkit-details-marker { display:none; }
  details summary::after { content:"+"; color:var(--amber); font-size:22px; font-weight:400; line-height:1; }
  details[open] summary::after { content:"–"; }
  details .a { color:var(--muted); padding:0 0 20px; font-size:15px; max-width:64ch; }

  .cta { text-align:center; border:1px solid var(--line); border-radius:20px; padding:60px 24px;
         background: radial-gradient(600px 300px at 50% 0%, rgba(245,184,61,.08), transparent 70%); }

  footer { border-top:1px solid var(--line); padding:38px 0; color: var(--muted); font-family: var(--mono); font-size:12.5px; }
  footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; letter-spacing:.03em; }
  footer .fl { display:flex; gap:20px; flex-wrap:wrap; }
  footer .fl a:hover { color:var(--text); }

  @media (max-width:760px){ .grid,.steps{ grid-template-columns:1fr; } header{ padding:60px 0 40px; } .nav-links .lnk{ display:none; } }

  /* ===== multi-product brand additions ===== */
  /* nav dropdown */
  .has-drop { position: relative; }
  .has-drop > .lnk { cursor: pointer; }
  .has-drop > .lnk::after { content:" ▾"; color: var(--amber); }
  .drop { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
          min-width:220px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px;
          opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease; box-shadow:0 20px 50px rgba(0,0,0,.5); }
  .has-drop:hover .drop, .has-drop:focus-within .drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .drop a { display:block; padding:10px 12px; border-radius:8px; color:var(--text); font-size:14px; }
  .drop a:hover { background:var(--panel-2); }
  .drop a .d { display:block; font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.06em; margin-top:3px; text-transform:uppercase; }

  /* product cards on the brand home */
  .prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
  .prod { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
          display:flex; flex-direction:column; transition:border-color .15s ease, transform .15s ease; }
  .prod:hover { border-color:#3a3a44; transform:translateY(-2px); }
  .prod.soon { background:#101013; }
  .prod .ptop { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  .prod .pname { font-size:21px; font-weight:800; letter-spacing:.02em; }
  .prod.soon .pname { color:#cfcfca; }
  .prod p { color:var(--muted); font-size:14.5px; flex:1; }
  .prod .plink { font-family:var(--mono); font-size:12px; color:var(--amber); margin-top:18px; letter-spacing:.04em; }
  .prod.soon .plink { color:var(--muted); }
  .badge { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
  .badge.live { background:rgba(245,184,61,.15); color:var(--amber); }
  .badge.soon { background:var(--panel-2); color:var(--muted); }
  @media (max-width:760px){ .prod-grid{ grid-template-columns:1fr; } }