:root{
    --paper:#F4F3EF; --ink:#141414; --line:#DBD9D2; --gray:#8B8A83;
    --accent:#2A2CE0; --good:#2A2CE0; --ease:cubic-bezier(.22,1,.36,1);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  body{
    background:var(--paper); color:var(--ink);
    font-family:'IBM Plex Sans',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; position:relative;
  }
  body::before{
    content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity:.03; mix-blend-mode:multiply;
  }
  .wrap{max-width:960px; margin:0 auto; padding:0 24px 80px; position:relative; z-index:2}

  header{display:flex; align-items:baseline; justify-content:space-between; padding:30px 0 0}
  .logo{font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:15px; letter-spacing:.02em}
  .logo span{color:var(--accent)}
  .meta{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gray)}

  .hero{padding:56px 0 30px}
  .hero h1{
    font-family:'Lora',serif; font-weight:400;
    font-size:clamp(48px,8vw,96px); line-height:.98; letter-spacing:-2px; max-width:14ch;
  }
  .hero h1 em{font-style:normal; color:var(--accent)}
  .hero p{margin-top:16px; color:var(--gray); font-size:13.5px; line-height:1.6; max-width:44ch}

  label,.lbl{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gray)}

  .drop{
    margin-top:8px; border:1.5px dashed var(--line); border-radius:0;
    padding:64px 24px; text-align:center; cursor:pointer;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .drop:hover,.drop.over{border-color:var(--accent); background:rgba(232,80,31,.03)}
  .drop .big{font-family:'Lora',serif; font-weight:500; font-size:30px}
  .drop .sub{margin-top:6px; font-size:12.5px; color:var(--gray)}

  .rule{border-top:1.5px solid var(--ink); margin:44px 0 0}
  .controls{display:flex; flex-wrap:wrap; gap:34px 56px; align-items:flex-end; padding:26px 0 8px}
  .seg{display:flex; gap:22px; margin-top:14px}
  .seg button{
    background:none; border:none; cursor:pointer; font-family:'IBM Plex Sans';
    font-size:13px; font-weight:500; color:var(--gray); padding:2px 0;
    border-bottom:1.5px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease);
  }
  .seg button.on{color:var(--ink); border-color:var(--accent)}
  .seg button:hover{color:var(--ink)}
  input[type=range]{width:180px; accent-color:var(--accent); margin-top:14px; display:block}
  .actions{margin-left:auto; display:flex; gap:14px; align-items:center}
  .btn{
    border:none; cursor:pointer; font-family:'IBM Plex Sans'; font-weight:600;
    font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
    padding:15px 26px; border-radius:0;
    transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), opacity .3s;
  }
  .btn:active{transform:scale(.97)}
  .btn.primary{background:var(--ink); color:var(--paper)}
  .btn.primary:hover{background:var(--accent)}
  .btn.primary.is-download{background:var(--accent)}
  .btn.primary.is-download:hover{background:var(--ink)}
  .btn.primary:disabled{opacity:.4; cursor:default}
  .btn.ghost{background:none; color:var(--gray); padding:15px 6px}
  .btn.ghost:hover{color:var(--ink)}

  .files{margin-top:40px}
  .files .head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:22px 0 20px}
  .files h2{font-family:'Lora',serif; font-weight:500; font-size:36px; letter-spacing:-.3px}
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px}
  .card{position:relative}
  .thumb{
    width:100%; max-height:340px; aspect-ratio:auto; background:#E7E3D8 left top/contain no-repeat;
    border:1px solid var(--line); border-radius:0; display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .thumb.pending{background:#E7E3D8}
  .thumb .spin{
    width:22px; height:22px; border:2px solid var(--line); border-top-color:var(--accent);
    border-radius:50%; animation:sp 0.8s linear infinite;
  }
  @keyframes sp{to{transform:rotate(360deg)}}
  .card .cap{display:flex; align-items:baseline; gap:8px; margin-top:9px; border-top:1px solid var(--line); padding-top:7px}
  .card .cap .n{font-family:'Lora',serif; font-size:19px}
  .card .cap .st{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
  .card .cap .st.done{color:var(--good)}
  .card .cap a{margin-left:auto; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-decoration:none; border:1.5px solid var(--accent); padding:6px 14px; border-radius:2px; transition:background .2s var(--ease), color .2s var(--ease)}
  .card .cap a:hover{background:var(--accent); color:var(--paper)}

  .privacy{margin-top:36px; font-size:12px; color:var(--gray)}
  .privacy b{color:var(--ink); font-weight:500}

  /* explainer / SEO body */
  .body{max-width:640px; margin:64px auto 0}
  .body h2{font-family:'Lora',serif; font-weight:500; font-size:34px; letter-spacing:-.6px; margin:30px 0 14px}
  .body p{font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; line-height:1.65; margin-bottom:13px; max-width:60ch; color:#3a3a38}
  .faq dt{font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); margin:22px 0 5px}
  .faq dd{font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; line-height:1.6; margin:0; color:#3a3a38}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{transition:none; transform:none; opacity:1}}

  .hidden{display:none !important}
  @media (max-width:640px){.controls{gap:24px 34px} .actions{margin-left:0; width:100%} .btn.primary{flex:1}}

  /* cross-page nav (matches seg-button treatment) */
  .nav{display:flex; align-items:baseline; gap:0}
  .nav a{font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); text-decoration:none; padding:2px 0; border-bottom:1.5px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease)}
  .nav a:hover{color:var(--ink)}
  .navsep{color:var(--line); margin:0 12px; font-size:11.5px}
  @media (max-width:520px){.navsep{margin:0 8px} .nav a{font-size:10.5px; letter-spacing:.12em}}

  /* related conversions */
  .more{max-width:640px; margin:64px auto 0; border-top:1.5px solid var(--ink); padding-top:22px}
  .more .lbl{display:block; margin-bottom:16px}
  .chips{display:flex; flex-wrap:wrap; gap:12px}
  .chip{font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:12.5px; color:var(--ink); text-decoration:none; border:1.5px solid var(--line); padding:11px 18px; border-radius:0; transition:border-color .25s var(--ease), color .25s var(--ease)}
  .chip:hover{border-color:var(--accent); color:var(--accent)}