/* ============================================================
   DIGITOLY — DESIGN TOKENS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{

  --ink:#141414;
  --red:#E31E24;
  --red-dark:#B8151A;
  --paper:#FAFAFA;
  --paper-raised:#FFFFFF;
  --slate:#6B7280;
  --line:#E5E5E5;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:10px;
  --container:1120px;

}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

*{ box-sizing:border-box; }

body{

  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;

}

a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  margin:0;
}

.mono{ font-family:var(--font-mono); }

/* ============================================================
   LAYOUT SHELLS
   ============================================================ */

.page-shell{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header{

  background:var(--paper-raised);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;

}

.site-header .page-shell{

  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;

}

.brand{

  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:var(--ink);

}

.brand:hover{ text-decoration:none; }

.brand img{

  height:36px;
  width:36px;

}

.main-nav{

  display:flex;
  align-items:center;
  gap:28px;

}

.main-nav a{

  color:var(--ink);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  position:relative;

}

.main-nav a:hover{ color:var(--red); }

.main-nav a.active{ color:var(--red); }

.main-nav a.active::after{

  content:"";
  position:absolute;
  left:0; right:0; bottom:-27px;
  height:3px;
  background:var(--red);

}

.nav-cta{

  background:var(--ink);
  color:white !important;
  padding:9px 18px;
  border-radius:6px;
  font-size:14px !important;
  font-weight:600 !important;

}

.nav-cta:hover{ background:var(--red); text-decoration:none !important; }

.nav-toggle{

  display:none;
  background:none;
  border:none;
  font-size:24px;
  cursor:pointer;
  color:var(--ink);

}

@media (max-width:820px){

  .main-nav{

    display:none;
    position:absolute;
    top:72px;
    left:0; right:0;
    background:var(--paper-raised);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    padding:16px 24px 24px;
    gap:16px;

  }

  .main-nav.open{ display:flex; }

  .main-nav a.active::after{ display:none; }

  .nav-toggle{ display:block; }

}

/* ============================================================
   HERO / SCAN-CORNER MOTIF (the signature element)
   ============================================================ */

.scan-frame{

  position:relative;
  border-radius:var(--radius);

}

.scan-frame::before,
.scan-frame::after,
.scan-frame .corner-tl,
.scan-frame .corner-tr,
.scan-frame .corner-bl,
.scan-frame .corner-br{

  content:"";
  position:absolute;
  width:28px;
  height:28px;
  border:4px solid var(--red);
  pointer-events:none;

}

.scan-frame::before{ /* top-left */
  top:-4px; left:-4px;
  border-right:none; border-bottom:none;
  border-radius:6px 0 0 0;
}

.scan-frame::after{ /* bottom-right */
  bottom:-4px; right:-4px;
  border-left:none; border-top:none;
  border-radius:0 0 6px 0;
}

.scan-frame .corner-tr{
  top:-4px; right:-4px;
  border-left:none; border-bottom:none;
  border-radius:0 6px 0 0;
}

.scan-frame .corner-bl{
  bottom:-4px; left:-4px;
  border-right:none; border-top:none;
  border-radius:0 0 0 6px;
}

.hero{

  padding:72px 0 48px;

}

.hero-grid{

  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  align-items:center;

}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
}

.hero-eyebrow{

  font-family:var(--font-mono);
  font-size:13px;
  color:var(--red);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:14px;

}

.hero h1{

  font-size:46px;
  letter-spacing:-0.01em;
  line-height:1.08;

}

.hero p.lede{

  font-size:18px;
  color:var(--slate);
  max-width:480px;
  margin-top:18px;

}

.hero-actions{

  margin-top:32px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  row-gap:12px;

}

.btn-primary{

  display:inline-block;
  background:var(--red);
  color:white;
  font-weight:600;
  font-size:15px;
  padding:14px 26px;
  border-radius:8px;
  text-decoration:none;

}

.btn-primary:hover{ background:var(--red-dark); text-decoration:none; }

.hero-trust{

  font-family:var(--font-mono);
  font-size:12px;
  color:var(--slate);

}

@media (max-width:640px){
  .hero h1{ font-size:30px; }
}

/* Hero visual - the signature moment: a "photo" going through the same
   scan-corner frame used everywhere else, breaking out into format chips.
   The chips' slight scatter/rotation echoes the little scattered pixel
   squares in the logo itself. */

.hero-visual{

  background:var(--paper-raised);
  border:1px solid var(--line);
  padding:40px 28px;

}

.hero-visual-inner{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;

}

.hero-node{

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--ink);

}

.hero-node svg{ width:44px; height:44px; }

.hero-node span{

  font-family:var(--font-mono);
  font-size:12px;
  color:var(--slate);

}

.hero-arrow{ color:var(--red); flex-shrink:0; }

.hero-arrow svg{ width:28px; height:28px; }

.hero-chips{

  display:flex;
  flex-direction:column;
  gap:10px;

}

.chip{

  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  background:var(--ink);
  color:white;
  padding:6px 14px;
  border-radius:5px;
  text-align:center;

}

.chip-1{ transform:rotate(-2deg); }
.chip-2{ transform:rotate(1.5deg); background:var(--red); }
.chip-3{ transform:rotate(-1deg); }
.chip-4{ transform:rotate(2deg); background:var(--red); }

@media (max-width:640px){
  .hero-visual-inner{ gap:14px; }
  .hero-arrow{ transform:rotate(90deg); }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{

  border-top:1px solid var(--line);
  margin-top:80px;
  padding:48px 0 32px;
  background:var(--paper-raised);

}

.footer-grid{

  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:32px;

}

@media (max-width:720px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

.footer-brand{

  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  margin-bottom:10px;

}

.footer-brand img{ height:28px; width:28px; }

.footer-tagline{

  color:var(--slate);
  font-size:14px;
  max-width:280px;

}

.footer-col h4{

  font-family:var(--font-body);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--slate);
  margin-bottom:12px;

}

.footer-col a{

  display:block;
  color:var(--ink);
  font-size:14px;
  margin-bottom:10px;

}

.footer-bottom{

  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--slate);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;

}

/* ============================================================
   GENERIC SECTION / CARD PATTERNS (used across pages)
   ============================================================ */

.section{ padding:56px 0; }

.section h2{ font-size:30px; margin-bottom:8px; }

.section .section-lede{ color:var(--slate); font-size:16px; max-width:560px; margin-bottom:36px; }

.card-grid{

  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;

}

@media (max-width:900px){
  .card-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .card-grid{ grid-template-columns:1fr; }
}

.feature-card{

  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  transition:transform 0.15s ease, box-shadow 0.15s ease;

}

.feature-card:hover{

  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(20,20,20,0.06);

}

.feature-icon{

  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  margin-bottom:16px;

}

.feature-icon svg{ width:20px; height:20px; }

.badge{

  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  background:var(--paper);
  color:var(--slate);
  border:1px solid var(--line);
  padding:3px 8px;
  border-radius:4px;
  margin-bottom:12px;

}

.badge.live{ color:var(--red); border-color:var(--red); }

.feature-card h3{ font-size:18px; margin-bottom:8px; }

.feature-card p{ color:var(--slate); font-size:14px; margin:0; }

/* Pricing cards */

.pricing-grid{

  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  align-items:stretch;

}

@media (max-width:900px){
  .pricing-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .pricing-grid{ grid-template-columns:1fr; }
}

.price-card{

  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 22px;
  display:flex;
  flex-direction:column;

}

.price-card.featured{

  border-color:var(--red);
  box-shadow:0 0 0 1px var(--red);
  position:relative;

}

.price-card .plan-name{ font-size:14px; color:var(--slate); margin-bottom:6px; }

.price-card .plan-price{

  font-family:var(--font-display);
  font-size:34px;
  font-weight:700;
  margin-bottom:2px;

}

.price-card .plan-price span{

  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  color:var(--slate);

}

.price-card .plan-quota{ font-family:var(--font-mono); font-size:13px; color:var(--slate); margin-bottom:20px; }

.price-card ul{ list-style:none; padding:0; margin:0 0 24px; flex-grow:1; }

.price-card li{ font-size:14px; padding:6px 0; border-top:1px solid var(--line); }

.price-card li:first-child{ border-top:none; }

.price-card .plan-cta{

  display:block;
  text-align:center;
  padding:11px;
  border-radius:6px;
  background:var(--ink);
  color:white;
  font-weight:600;
  font-size:14px;
  border:none;
  cursor:pointer;
  width:100%;

}

.price-card.featured .plan-cta{ background:var(--red); }

.price-card .plan-cta:hover{ background:var(--red-dark); }

/* FAQ accordion */

.faq-item{

  border-bottom:1px solid var(--line);

}

.faq-question{

  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:18px 0;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;

}

.faq-question .plus{

  font-family:var(--font-mono);
  font-size:20px;
  color:var(--red);
  transition:transform 0.15s ease;
  flex-shrink:0;

}

.faq-item.open .faq-question .plus{ transform:rotate(45deg); }

.faq-answer{

  max-height:0;
  overflow:hidden;
  transition:max-height 0.2s ease;
  color:var(--slate);
  font-size:15px;
  line-height:1.6;

}

.faq-item.open .faq-answer{ max-height:400px; }

.faq-answer p{ margin:0 0 18px; }

.feature-detail{

  display:flex;
  gap:24px;
  align-items:flex-start;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px;
  margin-bottom:24px;
  position:relative;

}

.feature-detail-icon{

  width:56px;
  height:56px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);

}

.feature-detail-icon svg{ width:26px; height:26px; }

.feature-detail h2{ font-size:22px; margin:8px 0 10px; }

.feature-detail p{ color:var(--slate); font-size:15px; line-height:1.7; margin:0; }

@media (max-width:640px){
  .feature-detail{ flex-direction:column; gap:16px; }
}



.legal-content{ max-width:720px; }

.legal-content h2{ font-size:22px; margin-top:36px; margin-bottom:10px; }

.legal-content p, .legal-content li{ color:#333; font-size:15px; line-height:1.7; }

.legal-updated{ font-family:var(--font-mono); font-size:13px; color:var(--slate); margin-bottom:32px; }

.legal-note{

  background:#FFF6F6;
  border:1px solid #FBD3D3;
  border-radius:var(--radius);
  padding:16px 18px;
  font-size:14px;
  color:#7A1F1F;
  margin-bottom:32px;

}

/* Contact page */

.contact-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;

}

@media (max-width:720px){
  .contact-grid{ grid-template-columns:1fr; }
}

.form-field{ margin-bottom:16px; }

.form-field label{

  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;

}

.form-field input,
.form-field textarea{

  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:var(--font-body);
  font-size:15px;
  background:var(--paper-raised);

}

.form-field textarea{ min-height:120px; resize:vertical; }

.contact-submit{

  background:var(--red);
  color:white;
  border:none;
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;

}

.contact-submit:hover{ background:var(--red-dark); }

.contact-detail{ margin-bottom:20px; }

.contact-detail h4{

  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--slate);
  margin:0 0 6px;

}

.contact-detail p{ margin:0; font-size:15px; }

/* ============================================================
   CONVERTER APP (existing tool, restyled)
   ============================================================ */

.converter-shell{

  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px;
  margin-top:8px;

}

.auth{

  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin-bottom:20px;
  max-width:420px;

}

#loggedInBar.auth{

  flex-direction:row;
  align-items:center;
  max-width:none;

}

.auth-row{

  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;

}

.auth button.btn-google{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:white;
  color:var(--ink);
  border:1px solid var(--line);
  padding:10px 16px;
  border-radius:6px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;

}

.auth button.btn-google:hover{ background:var(--paper); }
.auth button.btn-google svg{ margin-right:2px; }

.auth-divider{

  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--slate);
  position:relative;

}

.auth-divider::before,
.auth-divider::after{

  content:"";
  position:absolute;
  top:50%;
  width:38%;
  height:1px;
  background:var(--line);

}

.auth-divider::before{ left:0; }
.auth-divider::after{ right:0; }

.auth input{

  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--line);
  width:auto;
  font-family:var(--font-body);
  font-size:14px;

}

.auth button{

  width:auto;
  padding:10px 18px;
  border-radius:6px;
  border:none;
  background:var(--ink);
  color:white;
  font-weight:600;
  font-size:14px;
  cursor:pointer;

}

.auth button:hover{ background:var(--red); }

.controls-hint{

  font-size:13px;
  color:var(--slate);
  margin:0 0 14px;
  line-height:1.5;

}

.controls-note{

  font-family:var(--font-mono);
  font-size:12px;
  color:var(--red);
  background:#FFF6F6;
  border:1px solid #FBD3D3;
  border-radius:6px;
  padding:8px 12px;
  margin:-6px 0 16px;

}

.control-group{

  display:flex;
  flex-direction:column;
  gap:6px;

}

.control-group label{

  font-size:12px;
  font-weight:600;
  color:var(--slate);
  text-transform:uppercase;
  letter-spacing:0.03em;

}

.control-row{

  display:flex;
  gap:10px;
  flex-wrap:wrap;

}

.controls-disabled{

  opacity:0.45;

}

.controls select:disabled{

  cursor:not-allowed;

}

.controls{

  display:flex;
  gap:24px;
  margin-bottom:10px;
  flex-wrap:wrap;
  align-items:flex-start;

}

.controls select{

  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:13px;
  background:var(--paper-raised);
  color:var(--ink);

}

#dropZone{

  border:2px dashed var(--line);
  padding:40px 20px;
  border-radius:var(--radius);
  margin-bottom:20px;
  text-align:center;
  color:var(--slate);
  font-family:var(--font-mono);
  font-size:14px;
  position:relative;
  transition:border-color 0.15s ease, background 0.15s ease;

}

#dropZone:hover{

  border-color:var(--red);
  background:var(--paper);

}

.dropzone-icon{

  width:28px;
  height:28px;
  color:var(--slate);
  margin-bottom:10px;

}

.actions{

  display:flex;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;

}

.actions button{

  flex:1;
  min-width:120px;
  padding:11px;
  border-radius:6px;
  border:none;
  background:var(--ink);
  color:white;
  font-weight:600;
  font-size:14px;
  cursor:pointer;

}

.actions button:hover{ background:var(--red); }

#usageStatus{

  font-family:var(--font-mono);
  font-size:13px;
  color:var(--slate);
  margin:0 0 6px;

}

#stats{ font-family:var(--font-mono); font-size:13px; color:var(--slate); margin-bottom:16px; }

#preview{

  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:16px;

}

.card{

  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
  border-radius:var(--radius);
}

.thumb{

  width:100%;
  height:130px;
  object-fit:contain;
  background:var(--ink);
  border-radius:6px;

}

button{

  width:100%;
  margin-top:6px;
  padding:9px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;

}

.convert{ background:var(--ink); color:white; }
.convert:hover{ background:var(--red); }

.converted{ background:#1E8E3E; color:white; }

.download{ background:var(--red); color:white; }
.download:hover{ background:var(--red-dark); }

.remove{ background:transparent; color:var(--slate); border:1px solid var(--line); }
.remove:hover{ background:#f4f4f4; }

.progress{

  width:100%;
  height:5px;
  background:var(--line);
  border-radius:5px;
  margin-top:8px;
  overflow:hidden;

}

.progressInner{

  height:5px;
  width:0%;
  background:var(--red);
  transition:width 0.2s ease;

}

#history{ font-family:var(--font-mono); font-size:13px; color:var(--slate); }

.modal{

  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(20,20,20,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;

}

.modalBox{

  background:var(--paper-raised);
  padding:32px;
  border-radius:var(--radius);
  max-width:420px;
  width:90%;

}

.modalBox h3{ font-size:20px; margin-bottom:10px; }

.modalBox p{ color:var(--slate); font-size:14px; margin-bottom:16px; }

.planList{

  display:flex;
  flex-direction:column;
  gap:10px;
  margin:16px 0;

}

.planBtn{

  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  font-weight:600;
  padding:12px;
  text-align:left;

}

.planBtn:hover{ background:var(--ink); color:white; }

/* ============================================================
   PDF TOOLS PAGE
   ============================================================ */

.pdf-dropzone{

  border:2px dashed var(--line);
  padding:32px 20px;
  border-radius:var(--radius);
  margin-bottom:20px;
  text-align:center;
  color:var(--slate);
  font-family:var(--font-mono);
  font-size:14px;
  position:relative;
  transition:border-color 0.15s ease, background 0.15s ease;

}

.pdf-dropzone:hover{ border-color:var(--red); background:var(--paper); }

.pdf-thumb-grid{

  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
  margin-bottom:20px;

}

.pdf-thumb{

  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
  cursor:pointer;
  transition:border-color 0.15s ease;

}

.pdf-thumb:hover{ border-color:var(--red); }

.pdf-thumb.selected{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }

.pdf-thumb img{

  width:100%;
  height:150px;
  object-fit:contain;
  background:white;
  border-radius:4px;
  display:block;

}

.pdf-thumb-controls{

  display:flex;
  gap:4px;
  margin-top:6px;

}

.pdf-thumb-controls button{

  flex:1;
  padding:6px 4px;
  font-size:12px;
  background:var(--ink);
  color:white;
  border:none;
  border-radius:4px;
  cursor:pointer;

}

.pdf-thumb-controls button:hover{ background:var(--red); }

.pdf-page-editor{

  position:relative;
  display:inline-block;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;

}

.pdf-page-editor img{

  display:block;
  max-width:100%;
  cursor:crosshair;

}

#annotateOverlay{

  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  pointer-events:none;

}

.annotate-marker{

  position:absolute;
  transform:translate(-2px,-2px);
  background:rgba(227,30,36,0.15);
  border:1.5px dashed var(--red);
  color:var(--red-dark);
  font-family:var(--font-mono);
  font-size:12px;
  padding:2px 6px;
  border-radius:4px;
  white-space:nowrap;

}

/* ============================================================
   AUTH PROMPT (compact button that opens the shared login modal)
   AND PAY-PER-USE (inside the upgrade modal)
   ============================================================ */

.auth-prompt{

  margin-bottom:20px;

}

.pay-per-use{

  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);

}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */

.acct-stat-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;

}

@media (max-width:480px){
  .acct-stat-grid{ grid-template-columns:1fr; }
}

.acct-stat{

  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;

}

.acct-stat-label{

  font-family:var(--font-mono);
  font-size:12px;
  color:var(--slate);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:6px;

}

.acct-stat-value{

  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--ink);

}