:root{
    --ink-900:#1B1A17;
    --ink-800:#242320;
    --ink-700:#38352E;
    --paper-050:#F7F4EC;
    --paper-100:#EFEAD9;
    --line:#DCD5C2;
    --line-soft:#E7E1D0;
    --seal:#9A2F22;
    --seal-dark:#7A2419;
    --seal-soft:#F0DAD3;
    --brass:#A9863E;
    --brass-soft:#DCC98B;
    --ok:#3F6B4C;
    --ok-soft:#DCE7DE;
    --canvas-bg:#E9E5D8;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, #262420 0%, transparent 60%),
      var(--ink-900);
    color:var(--paper-050);
    font-family:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height:100vh;
  }
  a{ color:inherit; }
  .page{ max-width:920px; margin:0 auto; padding:0 20px 80px; }

  /* --- Site nav --- */
  .site-nav{
    max-width:920px; margin:0 auto; padding:26px 20px 0;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .site-nav .brand{
    font-family:'Fraunces', serif; font-weight:600; font-size:18px; color:#FBF9F3;
    text-decoration:none; display:flex; align-items:center; gap:9px;
  }
  .site-nav .brand .brand-seal{
    width:22px;height:22px;border-radius:50%;flex:none;
    background:radial-gradient(circle at 32% 28%, #B5442F, var(--seal-dark) 70%);
    box-shadow:0 0 0 2px rgba(247,244,236,0.15);
  }
  .site-nav .links{ display:flex; gap:22px; flex-wrap:wrap; }
  .site-nav .links a{
    font-family:'Public Sans', sans-serif; font-size:13.5px; font-weight:600;
    color:#C9C4B6; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent;
  }
  .site-nav .links a:hover, .site-nav .links a.active{ color:#FBF9F3; border-bottom-color:var(--seal); }
  header.hero{ margin:36px 0 40px; padding-top:4px; }

  /* --- Content pages (how it works / faq / about / privacy) --- */
  .content-card h2{
    font-family:'Fraunces', serif; font-weight:600; font-size:19px; color:var(--ink-900); margin:0 0 10px;
  }
  .content-card p, .content-card li{ font-size:14.5px; line-height:1.7; color:var(--ink-700); }
  .content-card ul, .content-card ol{ margin:0; padding-left:20px; }
  .content-card + .content-card{ margin-top:0; }
  .step-list{ counter-reset:step; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
  .step-list li{
    counter-increment:step; position:relative; padding-left:40px; font-size:14.5px; line-height:1.65; color:var(--ink-700);
  }
  .step-list li::before{
    content:counter(step); position:absolute; left:0; top:0; width:26px;height:26px;border-radius:50%;
    background:var(--paper-100); border:1px solid var(--line); color:var(--ink-900);
    font-family:'IBM Plex Mono',monospace; font-size:13px; display:flex;align-items:center;justify-content:center;
  }
  .step-list li strong{ color:var(--ink-900); }
  .faq-item{ border-bottom:1px solid var(--line-soft); padding:18px 0; }
  .faq-item:first-child{ padding-top:0; }
  .faq-item:last-child{ border-bottom:none; padding-bottom:0; }
  .faq-item h3{ font-family:'Public Sans',sans-serif; font-size:15px; font-weight:700; color:var(--ink-900); margin:0 0 8px; }
  .faq-item p{ margin:0; }
  .cta-row{ margin-top:8px; }
  .cta-row .btn{ text-decoration:none; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--brass-soft);
    background:rgba(169,134,62,0.12); border:1px solid rgba(169,134,62,0.35);
    padding:5px 10px; border-radius:999px; margin-bottom:18px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(63,107,76,0.25);}
  h1{
    font-family:'Fraunces', Georgia, serif; font-weight:600;
    font-size:clamp(30px, 7vw, 52px); line-height:1.05;
    margin:0 0 14px; color:#FBF9F3;
  }
  h1 em{ font-style:italic; font-weight:500; color:var(--seal); }
  .lede{ font-size:16px; line-height:1.6; color:#C9C4B6; max-width:56ch; margin:0; }
  .promise-strip{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
  .promise-pill{
    font-family:'IBM Plex Mono', monospace; font-size:12px; color:#DCE7DE;
    background:rgba(63,107,76,0.16); border:1px solid rgba(63,107,76,0.4);
    padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
  }
  .promise-pill::before{ content:'✓'; color:var(--ok); font-weight:700; }
  .desk{ display:flex; flex-direction:column; gap:22px; }
  .card{
    background:var(--paper-050); color:var(--ink-800);
    border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 18px 40px -20px rgba(0,0,0,0.6);
    padding:26px 26px 28px;
  }
  .card-head{ display:flex; align-items:center; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
  .seal-badge{
    flex:none; width:34px;height:34px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #B5442F, var(--seal-dark) 70%);
    color:#F6E7D8; display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces', serif; font-weight:600; font-size:15px;
    box-shadow:0 0 0 3px var(--paper-050), 0 0 0 4px var(--line), 0 3px 6px rgba(0,0,0,0.25);
  }
  .card-head h2{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; margin:0; color:var(--ink-900); }
  .card-head .status{ margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:12px; color:#8C8672; }
  .card-head .status.ready{color:var(--ok);}
  .card-sub{ margin:0 0 18px 48px; font-size:14px; color:#7A7566; line-height:1.5; }
  .card-body{margin-left:48px;}
  .stage-hint{ font-size:13.5px; color:#7A7566; margin:0 0 14px; }
  @media (max-width:600px){
    .page{padding:32px 16px 60px;}
    .card{padding:20px 18px 24px;}
    .card-body, .card-sub{margin-left:0;}
  }

  /* --- Upload dropzones --- */
  .source-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
  .dropzone{
    flex:1 1 220px;
    border:1.5px dashed var(--line); border-radius:8px; background:var(--paper-100);
    padding:20px; display:flex; align-items:center; gap:14px; cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .dropzone:hover, .dropzone.drag{ border-color:var(--seal); background:#F5EEE0; }
  .dropzone input{display:none;}
  .dz-icon{
    flex:none; width:38px;height:38px; border-radius:6px; background:var(--paper-050);
    border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--seal);
  }
  .dz-text strong{display:block;font-size:14px;color:var(--ink-900);}
  .dz-text span{font-size:12.5px;color:#8C8672;}
  .camera-btn{
    flex:0 0 auto; min-height:64px; padding:0 22px;
    display:flex; align-items:center; gap:10px; justify-content:center;
  }
  @media (max-width:600px){
    .source-row{flex-direction:column;}
    .camera-btn{width:100%;}
  }
  .file-chip{
    display:flex; align-items:center; gap:10px; margin-top:12px;
    font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-700);
    background:var(--paper-100); border:1px solid var(--line); padding:8px 12px; border-radius:6px;
  }
  .file-chip .ok-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;}
  .error-line{
    margin-top:12px; font-size:13px; color:var(--seal); background:var(--seal-soft);
    border:1px solid #E0BBAF; padding:8px 12px; border-radius:6px;
  }

  /* --- Saved signature banner --- */
  .saved-sig-banner{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:var(--ok-soft); border:1px solid #BFD4C6; border-radius:8px;
    padding:14px 16px; margin-bottom:18px; font-size:13.5px; color:var(--ink-800);
  }
  .saved-sig-actions{ display:flex; gap:10px; flex:none; }
  .btn-small{ padding:8px 14px; font-size:13px; min-height:auto; }

  /* --- Crop stage --- */
  .crop-wrap{
    position:relative; width:100%; max-width:520px; margin:0 auto;
    background:var(--canvas-bg); border:1px solid var(--line); border-radius:6px;
    overflow:hidden; touch-action:none; line-height:0;
  }
  .crop-wrap img{ display:block; width:100%; height:auto; }
  .crop-box{
    position:absolute; border:2px dashed var(--seal);
    box-shadow:0 0 0 9999px rgba(20,18,15,0.55);
    cursor:grab; touch-action:none;
  }
  .crop-box:active{cursor:grabbing;}
  .crop-box .handle{
    position:absolute; right:-8px; bottom:-8px; width:16px;height:16px;
    border-radius:50%; background:var(--seal); border:2px solid var(--paper-050);
    cursor:nwse-resize; box-shadow:0 1px 3px rgba(0,0,0,0.4);
  }
  .crop-box .handle::before{
    content:''; position:absolute; inset:-10px;
  }

  /* --- Controls --- */
  .control-row{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
  .control-row label{ font-size:13px; color:var(--ink-700); display:flex; align-items:center; gap:10px; min-width:150px; }
  input[type=range]{
    -webkit-appearance:none; flex:1; min-width:140px; height:4px; border-radius:2px;
    background:var(--line); outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:17px;height:17px; border-radius:50%; background:var(--seal);
    border:2px solid var(--paper-050); box-shadow:0 0 0 1px var(--seal); cursor:pointer; margin-top:-6.5px;
  }
  input[type=range]::-moz-range-thumb{
    width:17px;height:17px;border-radius:50%; background:var(--seal);border:2px solid var(--paper-050);
    box-shadow:0 0 0 1px var(--seal);cursor:pointer;
  }
  .ink-row{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
  .ink-row > span{ font-size:13px; color:var(--ink-700); min-width:150px; }
  .ink-pills{ display:flex; gap:8px; flex-wrap:wrap; }
  .ink-pill{
    display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 9px;
    border-radius:999px; border:1.5px solid var(--line); background:var(--paper-100);
    cursor:pointer; font-size:12.5px; color:var(--ink-700); font-family:'Public Sans',sans-serif;
  }
  .ink-pill .dot{ width:14px;height:14px;border-radius:50%; border:1px solid rgba(0,0,0,0.15); flex:none; }
  .ink-pill.selected{ border-color:var(--seal); background:#F5EEE0; color:var(--ink-900); font-weight:600; }

  .preview-pair{ display:flex; gap:20px; align-items:flex-start; margin-top:20px; flex-wrap:wrap; }
  .swatch{
    flex:none; width:150px;height:100px; border-radius:6px; border:1px solid var(--line);
    background-image:
      linear-gradient(45deg, #ddd8c8 25%, transparent 25%),
      linear-gradient(-45deg, #ddd8c8 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ddd8c8 75%),
      linear-gradient(-45deg, transparent 75%, #ddd8c8 75%);
    background-size:14px 14px; background-position:0 0, 0 7px, 7px -7px, -7px 0px;
    background-color:#f2efe4; display:flex;align-items:center;justify-content:center; overflow:hidden;
  }
  .swatch img, .swatch canvas{max-width:92%;max-height:92%;object-fit:contain;}
  .swatch .empty{font-size:12px;color:#A39D8B;font-family:'IBM Plex Mono',monospace;}
  .swatch-label{ font-size:11.5px; color:#8C8672; font-family:'IBM Plex Mono',monospace; margin-top:6px; display:block; text-align:center; }

  /* --- Step 3 workspace --- */
  .empty-state{
    border:1.5px dashed var(--line); border-radius:8px; padding:34px 20px; text-align:center;
    color:#8C8672; font-size:14px; background:var(--paper-100);
  }
  .workspace{ display:flex; flex-direction:column; gap:14px; }
  .page-nav{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-700); }
  .page-nav button{
    font-family:'IBM Plex Mono', monospace; background:var(--paper-100); border:1px solid var(--line);
    color:var(--ink-800); border-radius:5px; padding:6px 12px; cursor:pointer; font-size:12.5px; min-height:34px;
  }
  .page-nav button:disabled{opacity:.4;cursor:not-allowed;}
  .canvas-wrap{
    position:relative; display:inline-block; max-width:100%; background:var(--canvas-bg);
    border:1px solid var(--line); border-radius:6px; box-shadow:0 10px 26px -16px rgba(0,0,0,0.45);
    line-height:0; touch-action:none;
  }
  .canvas-wrap canvas{display:block;max-width:100%;height:auto;border-radius:5px;}
  .sig-overlay{ position:absolute; cursor:grab; touch-action:none; outline:none; }
  .sig-overlay img{width:100%;height:100%;display:block;pointer-events:none;user-select:none;}
  .sig-overlay:active{cursor:grabbing;}
  .sig-overlay:focus-visible{ box-shadow:0 0 0 2px var(--paper-050), 0 0 0 4px var(--seal); border-radius:3px; }
  .sig-overlay .handle{
    position:absolute; right:-8px;bottom:-8px; width:16px;height:16px; border-radius:50%;
    background:var(--seal); border:2px solid var(--paper-050); cursor:nwse-resize;
    box-shadow:0 1px 3px rgba(0,0,0,0.4);
  }
  .sig-overlay .handle::before{ content:''; position:absolute; inset:-10px; }
  @keyframes stampPress{ 0%{transform:scale(1);} 35%{transform:scale(0.94);} 100%{transform:scale(1);} }
  .sig-overlay.pressed{animation:stampPress .28s ease;}
  @media (prefers-reduced-motion:reduce){ .sig-overlay.pressed{animation:none;} }

  .size-row{ display:flex;align-items:center;gap:12px; font-size:13px; color:var(--ink-700); flex-wrap:wrap; }
  .size-row input[type=range]{max-width:220px;}

  .extra-controls{
    margin-top:6px; padding-top:16px; border-top:1px solid var(--line-soft);
  }
  .toggle-row{
    display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-700); cursor:pointer; user-select:none;
  }
  .toggle-row input[type=checkbox]{ width:16px;height:16px; accent-color:var(--seal); }
  .toggle-row em{ font-style:normal; color:#A39D8B; }
  .text-fields{ margin-top:10px; padding-left:26px; display:flex; flex-direction:column; gap:10px; max-width:320px; }
  .text-fields input[type=text]{
    font-family:'Public Sans',sans-serif; font-size:13.5px; padding:9px 12px;
    border:1px solid var(--line); border-radius:6px; background:var(--paper-100); color:var(--ink-900);
  }
  .text-fields input[type=text]:focus{ outline:2px solid var(--seal); outline-offset:1px; }
  .field-block{ margin-top:14px; max-width:340px; }
  .field-label{ font-size:13.5px; color:var(--ink-700); display:block; margin-bottom:8px; }
  .field-label em{ font-style:normal; color:#A39D8B; }
  .field-hint{ font-size:12px; color:#A39D8B; margin:6px 0 0; }

  .text-overlay{
    position:absolute; cursor:grab; touch-action:none; outline:none;
    white-space:nowrap; font-family:'IBM Plex Mono', monospace; font-weight:500;
    padding:2px 4px; user-select:none;
  }
  .text-overlay:active{cursor:grabbing;}
  .text-overlay:focus-visible{ box-shadow:0 0 0 2px var(--paper-050), 0 0 0 4px var(--seal); border-radius:3px; }

  .btn{
    font-family:'Public Sans', sans-serif; font-weight:600; font-size:14.5px; border:none;
    border-radius:7px; padding:12px 20px; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
    transition:transform .1s ease, box-shadow .15s ease; min-height:44px;
  }
  .btn-primary{
    background:linear-gradient(180deg, #AF3D2C, var(--seal-dark)); color:#FBEEE7;
    box-shadow:0 8px 20px -8px rgba(154,47,34,0.6);
  }
  .btn-primary:hover{transform:translateY(-1px);}
  .btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
  .btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--ink-700); }
  .btn-ghost:hover{border-color:var(--seal);color:var(--seal);}

  .actions-row{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin-top:16px; }
  .success-line{ display:none; align-items:center;gap:8px; font-size:13.5px;color:var(--ok); font-family:'IBM Plex Mono', monospace; }
  .success-line.show{display:inline-flex;}

  footer.legal{
    margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08);
    font-size:12.5px; line-height:1.7; color:#8C8672; max-width:70ch;
  }
  footer.legal strong{color:#C9C4B6;}

  .cdn-error{
    display:none; background:var(--seal-soft); border:1px solid #E0BBAF; color:var(--seal-dark);
    padding:14px 16px; border-radius:8px; font-size:13.5px; margin-bottom:24px;
  }
  .cdn-error.show{display:block;}