:root{
    --paper:#EEEEE4;
    --paper-alt:#E4E4D6;
    --ink:#16223B;
    --ink-soft:#4A5468;
    --line:#C7C7B4;
    --stamp:#B8433C;
    --stamp-soft:#f0d9d3;
    --approve:#2E6B4F;
    --white:#FAFAF4;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.5;
  }
  h1,h2,h3,.wordmark{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em; }
  .mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em; }

  a{ color:inherit; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:20;
    background:var(--paper);
    border-bottom:2px solid var(--ink);
  }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1080px; margin:0 auto; }
  .wordmark{ font-size:22px; font-weight:700; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); }
  .wordmark .dot{ width:9px; height:9px; background:var(--stamp); border-radius:50%; display:inline-block; }
  nav{ display:flex; gap:28px; }
  nav a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-soft); }
  nav a:hover{ color:var(--ink); }
  @media (max-width:640px){ nav{ display:none; } }

  /* ---------- hero ---------- */
  .hero{ padding:72px 0 56px; position:relative; }
  .hero .wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
  .stamp-badge{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; font-weight:500;
    color:var(--stamp);
    border:2px solid var(--stamp);
    padding:6px 14px;
    border-radius:999px;
    transform:rotate(-3deg);
    display:inline-block;
    letter-spacing:0.08em;
  }
  h1{
    font-size:clamp(36px,6vw,60px);
    font-weight:700;
    margin:0;
    max-width:760px;
    line-height:1.05;
  }
  h1 .accent{ color:var(--stamp); }
  .hero p.sub{
    font-size:18px; color:var(--ink-soft); max-width:520px; margin:0;
  }
  .hero-note{
    font-size:13px; color:var(--ink-soft);
    display:flex; align-items:center; gap:8px;
  }
  .hero-note::before{ content:"—"; color:var(--line); }

  /* ---------- tool tabs ---------- */
  .tools-section{ padding:24px 0 80px; }
  .tab-row{ display:flex; gap:8px; margin-bottom:0; border-bottom:2px solid var(--ink); }
  .tab-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px; font-weight:500;
    background:none; border:none; cursor:pointer;
    padding:12px 18px; color:var(--ink-soft);
    border-bottom:3px solid transparent; margin-bottom:-2px;
  }
  .tab-btn.active{ color:var(--ink); border-bottom-color:var(--stamp); }
  .panel{ display:none; background:var(--white); border:2px solid var(--ink); border-top:none; padding:40px; }
  .panel.active{ display:block; }
  .panel h2{ font-size:24px; margin:0 0 6px; }
  .panel .desc{ color:var(--ink-soft); font-size:14px; margin:0 0 28px; }

  .dropzone{
    border:2px dashed var(--line);
    border-radius:var(--radius);
    padding:44px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .dropzone:hover, .dropzone.drag{ border-color:var(--stamp); background:var(--stamp-soft); }
  .dropzone .arrow{ font-size:26px; color:var(--stamp); display:block; margin-bottom:10px; }
  .dropzone p{ margin:0; font-size:14px; color:var(--ink-soft); }
  .dropzone p b{ color:var(--stamp); text-decoration:underline; }

  .filelist{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:8px; }
  .filelist li{
    font-family:'IBM Plex Mono',monospace; font-size:13px;
    display:flex; align-items:center; justify-content:between; gap:12px;
    padding:10px 14px; background:var(--paper-alt); border:1px solid var(--line);
  }
  .filelist li span.name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .filelist li button{ background:none; border:none; color:var(--stamp); cursor:pointer; font-size:15px; }

  .field-row{ margin-top:20px; }
  .field-row label{ font-size:13px; color:var(--ink-soft); display:block; margin-bottom:6px; }
  .field-row input[type=text]{
    width:100%; padding:10px 12px; border:2px solid var(--ink); font-family:'IBM Plex Mono',monospace;
    font-size:14px; background:var(--white); border-radius:var(--radius);
  }

  .btn{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600; font-size:15px;
    background:var(--ink); color:var(--white);
    border:none; padding:13px 26px; cursor:pointer;
    border-radius:var(--radius);
    margin-top:22px;
  }
  .btn:hover{ background:var(--stamp); }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .status{ margin-top:16px; font-size:13px; font-family:'IBM Plex Mono',monospace; }
  .status.ok{ color:var(--approve); }
  .status.err{ color:var(--stamp); }

  /* ---------- how it works ---------- */
  .steps{ padding:60px 0; border-top:2px solid var(--ink); }
  .steps h2{ font-size:28px; margin:0 0 32px; }
  .step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media (max-width:800px){ .step-grid{ grid-template-columns:1fr; } }
  .step{ padding:0; }
  .step .num{ font-family:'IBM Plex Mono',monospace; color:var(--stamp); font-size:13px; margin-bottom:8px; display:block; }
  .step h3{ font-size:17px; margin:0 0 6px; }
  .step p{ font-size:14px; color:var(--ink-soft); margin:0; }

  /* ---------- faq ---------- */
  .faq{ padding:60px 0 80px; border-top:2px solid var(--ink); }
  .faq h2{ font-size:28px; margin:0 0 28px; }
  .faq-item{ border-bottom:1px solid var(--line); padding:20px 0; }
  .faq-item h3{ font-size:16px; margin:0 0 8px; }
  .faq-item p{ font-size:14px; color:var(--ink-soft); margin:0; }

  footer{ border-top:2px solid var(--ink); padding:28px 0; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
  footer p{ font-size:13px; color:var(--ink-soft); margin:0; }
  footer .mono{ font-size:12px; color:var(--line); }

  ::selection{ background:var(--stamp-soft); }

/* ---------- simple content pages (about/privacy/terms/contact) ---------- */
.page-hero{ padding:56px 0 24px; border-bottom:2px solid var(--ink); }
.page-hero h1{ font-size:clamp(30px,5vw,44px); margin:0 0 10px; }
.page-hero p{ color:var(--ink-soft); font-size:15px; margin:0; max-width:560px; }
.content{ padding:48px 0 80px; }
.content h2{ font-size:20px; margin:32px 0 10px; }
.content h2:first-child{ margin-top:0; }
.content p{ font-size:15px; color:var(--ink-soft); max-width:680px; margin:0 0 14px; }
.content ul{ font-size:15px; color:var(--ink-soft); max-width:680px; padding-left:20px; margin:0 0 14px; }
.content a.inline{ color:var(--stamp); text-decoration:underline; }
.contact-box{
  border:2px solid var(--ink); background:var(--white); padding:28px;
  max-width:420px; margin-top:24px;
}
.contact-box .row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.contact-box .row:last-child{ border-bottom:none; }
.contact-box .row span:first-child{ color:var(--ink-soft); }
footer nav{ display:flex; gap:20px; }
footer nav a{ font-size:13px; color:var(--ink-soft); text-decoration:none; }
footer nav a:hover{ color:var(--ink); }
footer .wrap{ flex-wrap:wrap; row-gap:14px; }