/* =========================================================
   style.css — SHARED / GLOBAL (used on every page)
   ========================================================= */

:root{
  --paper:#EFEDE4;
  --paper-line:#DAD5C4;
  --ink:#16233F;
  --ink-soft:#4A4A44;
  --proof-red:#C4432B;
  --teal:#2F6F62;
  --white:#FFFFFF;
  --shadow: 0 2px 0 rgba(22,35,63,0.08);
  --panel-bg:#FBFAF6;
  --canvas-a:#F6F5F0;
  --canvas-b:#F1F0EA;
  --scan-muted:#8a8a80;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px);
  background-size: 100% 42px;
}
::selection{ background: var(--proof-red); color:var(--white); }

:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:2px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

a{color:var(--ink);}

/* ---------- Utility classes ---------- */
.hidden{ display:none !important; }
.w-full{ width:100%; }
.mb-8{ margin-bottom:8px; }
.mb-10{ margin-bottom:10px; }
.mb-20{ margin-bottom:20px; }
.mb-30{ margin-bottom:30px; }
.mt-18{ margin-top:18px; }
.mt-20{ margin-top:20px; }
.no-mt{ margin-top:0 !important; }
.center{ text-align:center; }
.max-ch{ max-width:68ch; margin-left:auto; margin-right:auto; }
.tagline{ font-size:15px; color:var(--ink-soft); line-height:1.6; }
.tagline.small{ font-size:13px; }

/* ---------- Shared controls ---------- */
.btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:0.03em;
  padding:13px 22px;
  border-radius:3px;
  border:2px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.small{ padding:8px 14px; font-size:12px; }
.btn.danger{ border-color:var(--proof-red); color:var(--proof-red); background:transparent;}
.btn:disabled{ opacity:0.35; cursor:not-allowed; transform:none; box-shadow:none; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--proof-red);
  display:inline-block;
}
.eyebrow.center{ display:block; }

h2.section-title{
  font-family:'Space Mono', monospace;
  font-size:26px; margin:4px 0 0;
  color:var(--ink);
}
.section-title.center{ text-align:center; }

/* ---------- Shared header helpers ---------- */
header.hero{
  padding: 28px 6vw 64px;
  position:relative;
  border-bottom: 2px solid var(--ink);
}
.ruler{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.04em;
  border-bottom:1px solid var(--paper-line);
  padding-bottom:6px;
  margin-bottom:36px;
}
.ruler > div:last-child{
  white-space:normal;
  line-height:1.6;
}
.brandmark{
  display:flex; align-items:center; gap:10px;
  font-family:'Space Mono', monospace;
  font-weight:700; font-size:15px;
  letter-spacing:0.02em;
  text-decoration:none;
}
.brandmark .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--proof-red);
  box-shadow: 0 0 0 3px rgba(196,67,43,0.18);
}
.brandmark .logo-mark{
  width:28px; height:28px; border-radius:6px; flex-shrink:0; display:block;
}

/* ---------- Shared steps ---------- */
.steps-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.step-num{
  font-family:'Space Mono', monospace; font-weight:700;
  color:var(--proof-red); font-size:13px; letter-spacing:0.08em;
  margin-bottom:8px;
}
.step h3{ font-family:'IBM Plex Sans', sans-serif; font-size:17px; margin:0 0 8px; }
.step p{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0; }

/* ---------- Shared FAQ ---------- */
.faq-list{ max-width:760px; display:flex; flex-direction:column; gap:2px; }
.faq-item{
  border-bottom:1px solid var(--paper-line);
  padding:16px 0;
}
.faq-item summary{
  cursor:pointer; font-family:'IBM Plex Sans', sans-serif;
  font-weight:600; font-size:15px; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  min-height:44px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:'Space Mono', monospace; color:var(--proof-red);
  font-size:20px; margin-left:12px; flex-shrink:0;
}
.faq-item[open] summary::after{ content:'−'; }
.faq-item p{ color:var(--ink-soft); font-size:14.5px; line-height:1.65; margin:12px 0 0; max-width:70ch; }

/* ---------- Shared privacy / support sections ---------- */
.section-wrap{
  padding: 70px 6vw;
  border-top:1px solid var(--paper-line);
}
.section{
  padding: 54px 6vw 10px;
}
.section.privacy-guarantee, .section.support-section, .section.legal-section{
  max-width: 1200px;
  margin: 0 auto;
}
.privacy-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin:30px 0 40px;
}
.privacy-card{
  background:var(--panel-bg);
  border:1px solid var(--paper-line);
  border-radius:6px;
  padding:22px 18px;
}
.privacy-icon{
  font-size:30px;
  line-height:1;
  margin-bottom:10px;
}
.privacy-card h3{
  font-family:'Space Mono', monospace;
  font-size:15px;
  margin:0 0 8px;
  color:var(--ink);
}
.privacy-card p{
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.6;
  margin:0;
}

.cookies-disclosure{
  background:linear-gradient(180deg, #FBFAF6 0%, #F6F4EC 100%);
  border:1px dashed var(--teal);
  border-left:4px solid var(--teal);
  border-radius:6px;
  padding:22px 22px;
  max-width:1200px; margin:0 auto;
}
.cookies-disclosure h3{
  font-family:'Space Mono', monospace;
  font-size:17px;
  margin:0 0 10px;
  color:var(--teal);
}
.cookies-disclosure p{
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.65;
  margin:0 0 8px;
}
.cookies-disclosure p:last-child{ margin-bottom:0; }
.cookies-disclosure code{
  background:rgba(47,111,98,0.1);
  color:var(--teal);
  padding:1px 6px;
  border-radius:3px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
}

.support-section{ border-top:1px solid var(--paper-line); }
.support-card{
  max-width:560px;
  margin:0 auto;
}
.support-email-link{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--ink);
  color:var(--paper);
  padding:22px 26px;
  border-radius:8px;
  text-decoration:none;
  border:2px solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
  min-height:44px;
}
.support-email-link:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(22,35,63,0.12);
}
.support-icon{
  font-size:28px;
  line-height:1;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(239,237,228,0.1);
  border-radius:50%;
  flex-shrink:0;
}
.support-label{
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:17px;
  flex:1;
}
.support-arrow{
  font-family:'Space Mono', monospace;
  font-size:22px;
  color:var(--proof-red);
  flex-shrink:0;
}
.support-hours{
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  margin:14px 0 0;
}
.support-hours a{ color:var(--teal); }

.legal-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:24px;
}
.legal-card{
  background:var(--panel-bg);
  border:1px solid var(--paper-line);
  border-radius:6px;
  padding:20px 18px;
}
.legal-card h3{
  font-family:'Space Mono', monospace;
  font-size:15px;
  margin:0 0 8px;
  color:var(--ink);
}
.legal-card p{
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.6;
  margin:0;
}
.legal-card a{ color:var(--teal); }

/* ---------- Shared cookie banner ---------- */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  padding:14px 20px;
  background:rgba(22,35,63,0.97);
  color:var(--paper);
  border-top:3px solid var(--proof-red);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
  animation: cookieSlideUp .4s cubic-bezier(.2,.9,.3,1.2);
}
.cookie-banner.hidden-banner{ display:none; }
@keyframes cookieSlideUp{
  from{ transform: translateY(110%); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
.cookie-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.cookie-text{
  flex:1;
  min-width:280px;
  font-size:13px;
  line-height:1.55;
  color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
}
.cookie-text strong{ color:#fff; }
.cookie-text code{
  background:rgba(255,255,255,0.15);
  padding:1px 6px;
  border-radius:3px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
}
.cookie-text a{
  color:var(--proof-red);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-actions{
  display:flex;
  gap:10px;
  flex-shrink:0;
  flex-wrap:wrap;
}
.cookie-actions .btn{
  background:var(--proof-red);
  border-color:var(--proof-red);
  color:#fff;
  min-height:44px;
}
.cookie-actions .btn.ghost{
  background:transparent;
  border-color:rgba(255,255,255,0.4);
  color:var(--paper);
}
.cookie-actions .btn.ghost:hover{
  background:rgba(255,255,255,0.08);
}

/* ---------- Shared footer ---------- */
footer.site-footer{
  background:var(--ink);
  color:var(--paper);
  padding:44px 6vw 28px;
  margin-top:30px;
}
.site-footer a{ color:var(--paper); }
.footer-inner{
  max-width:1200px;
  margin:0 auto 30px;
  display:grid;
  grid-template-columns: 1.1fr 2fr;
  gap:40px;
}
.footer-brand .brandmark{
  color:var(--paper);
  gap:12px;
  font-size:18px;
  margin-bottom:10px;
}
.footer-brand-name{
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:18px;
  color:#fff;
}
.footer-brand-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:rgba(239,237,228,0.65);
  letter-spacing:0.02em;
  margin-top:2px;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.footer-col h4{
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--proof-red);
  margin:0 0 14px;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.footer-col li{
  font-size:13px;
  color:rgba(239,237,228,0.82);
  line-height:1.5;
}
.footer-col li a{
  color:rgba(239,237,228,0.82);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.footer-col li a:hover{
  color:#fff;
  border-bottom-color:var(--proof-red);
}
.footer-col li em{
  color:var(--teal);
  font-style:normal;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
}
.footer-bottom{
  max-width:1200px;
  margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer-copy{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:rgba(239,237,228,0.65);
}
.footer-copy a{
  color:#fff;
  text-decoration:none;
}
.footer-badges{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.footer-badges span{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:rgba(239,237,228,0.7);
  padding:5px 10px;
  background:rgba(255,255,255,0.06);
  border-radius:3px;
  border:1px solid rgba(255,255,255,0.1);
}
.footer-badges a{
  color:#fff;
  text-decoration:none;
}

/* ---------- Shared top navigation (both pages) ---------- */
nav.top-nav{
  position:sticky; top:0; z-index:80;
  background:rgba(239,237,228,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}
.top-nav-inner{
  max-width:1200px; margin:0 auto;
  padding:14px 6vw;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.top-nav .brandmark{ color:var(--ink); }
.top-nav .brandmark .logo-mark{
  width:36px; height:36px; border-radius:8px;
}
.nav-links{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.nav-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  padding:10px 14px;
  border-radius:4px;
  text-decoration:none;
  color:var(--ink);
  letter-spacing:0.04em;
  min-height:44px;
  display:inline-flex; align-items:center;
  transition: background .12s ease, color .12s ease;
}
.nav-link:hover{ background:var(--ink); color:var(--paper); }
.nav-link.active{ background:var(--ink); color:var(--paper); }
.nav-cta{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  padding:10px 18px;
  border-radius:4px;
  background:var(--proof-red);
  color:#fff;
  border:2px solid var(--proof-red);
  text-decoration:none;
  letter-spacing:0.04em;
  min-height:44px;
  display:inline-flex; align-items:center;
  font-weight:700;
  transition: transform .12s ease, box-shadow .12s ease;
}
.nav-cta:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

/* =========================================================
   RESPONSIVE BREAKPOINTS (shared rules only)
   ========================================================= */
@media (max-width: 1100px){
  main.app{ padding: 32px 4vw 70px; }
}

@media (max-width: 900px){
  .privacy-grid{ grid-template-columns:repeat(2, 1fr); }
  .legal-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
  .footer-cols{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .stamp{ display:none; }
}

@media (max-width: 700px){
  .steps-grid{ grid-template-columns:1fr; gap:26px; }
}

@media (max-width: 600px){
  body{ background-size: 100% 34px; }
  header.hero{ padding: 20px 5vw 40px; }
  .ruler{ font-size:9.5px; margin-bottom:24px; gap:8px 12px; }
  .ruler > div:last-child{ font-size:9.5px; }

  .top-nav-inner{ padding:12px 5vw; }
  .nav-links{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .nav-link, .nav-cta{ font-size:12px; padding:10px 12px; white-space:nowrap; }

  .btn{ padding:14px 20px; }
  .btn, .mode-tab, .toggle-btn, .tool-btn, .page-thumb, .upload-zone,
  .faq-item summary, .support-email-link{ min-height:44px; }
  .privacy-grid{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .cookie-banner{ padding:12px 14px; }
  .cookie-inner{ gap:12px; }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn{ flex:1; }
  footer.site-footer{ padding:34px 5vw 24px; }
}