:root{
  --ink:        #17191B;
  --ink-soft:   #4B5054;
  --paper:      #E9EAE4;
  --paper-lift: #F3F4EF;
  --rule:       #C6C9C0;
  --steel:      #46596A;
  --redline:    #BF3226;
  --redline-lo: rgba(191,50,38,.10);

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, sans-serif;
  --mono:    'Roboto Mono', ui-monospace, monospace;

  --wrap: 1160px;
  --gut: 24px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  background-image:
    linear-gradient(to right, rgba(70,89,106,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(70,89,106,.055) 1px, transparent 1px);
  background-size:28px 28px;
}

img{ max-width:100%; display:block; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gut);
}

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:99;
}
.skip:focus{ left:8px; top:8px; }

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

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.03;
  margin:0;
}

h1{ font-size:clamp(2.5rem, 8vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 5vw, 3rem); margin-bottom:.6em; }
h3{ font-size:1.12rem; font-weight:700; letter-spacing:-.01em; }

p{ margin:0 0 1.1em; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 1.1em;
  padding-bottom:.7em;
  border-bottom:1px solid var(--rule);
}

.lede{
  font-size:1.1rem;
  max-width:46ch;
  color:var(--ink-soft);
}

.section-lede{
  font-size:1.05rem;
  max-width:56ch;
  color:var(--ink-soft);
  margin-bottom:2.4em;
}

.btn{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  text-decoration:none;
  padding:15px 26px;
  border:1.5px solid var(--ink);
  border-radius:2px;
  cursor:pointer;
  transition:transform .12s ease, background .16s ease, color .16s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--ink); color:var(--paper-lift); }
.btn-primary:hover{ background:var(--redline); border-color:var(--redline); }

.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper-lift); }

.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:var(--rule);
}
.btn-ghost:hover{ border-color:var(--ink); }

.masthead{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}

.masthead-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
}

.mark{ text-decoration:none; color:var(--ink); line-height:1.1; }

.mark-name{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-.03em;
}
.mark-pro{ color:var(--redline); }

.mark-sub{
  display:block;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  margin-top:2px;
}

.nav{ display:flex; align-items:center; gap:30px; }

.nav a{
  font-family:var(--display);
  font-weight:500;
  font-size:.95rem;
  color:var(--ink);
  text-decoration:none;
  padding:4px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--redline); }

.nav .nav-login{
  border:1.5px solid var(--ink);
  border-radius:2px;
  padding:9px 18px;
}
.nav .nav-login:hover{
  background:var(--ink);
  color:var(--paper-lift);
  border-bottom-color:var(--ink);
}

.navtoggle{
  display:none;
  width:44px; height:44px;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:2px;
  cursor:pointer;
  padding:0;
}
.navtoggle span{
  display:block;
  width:20px; height:1.5px;
  margin:4px auto;
  background:var(--ink);
  transition:transform .2s ease, opacity .2s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.hero{ padding:72px 0 84px; }

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0 22px;
}

.credential{
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.6;
  color:var(--steel);
  max-width:40ch;
  margin:0;
  padding-left:14px;
  border-left:2px solid var(--redline);
}

.redline{
  margin:0;
  background:var(--paper-lift);
  border:1px solid var(--ink);
  box-shadow:6px 6px 0 rgba(23,25,27,.10);
}

.redline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--ink);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.redline-stamp{
  color:var(--redline);
  border:1.5px solid var(--redline);
  border-radius:2px;
  padding:3px 8px;
  transform:rotate(-3deg);
  white-space:nowrap;
}

.ledger{
  width:100%;
  border-collapse:collapse;
  font-family:var(--mono);
  font-size:.82rem;
}

.ledger th{
  text-align:left;
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel);
  padding:10px 18px;
  border-bottom:1px solid var(--rule);
}
.ledger th:nth-child(2),
.ledger th:nth-child(3),
.ledger th:nth-child(4){ text-align:right; }

.ledger td{
  padding:11px 18px;
  border-bottom:1px solid var(--rule);
}
.ledger td:nth-child(2),
.ledger td:nth-child(3),
.ledger td:nth-child(4){ text-align:right; }

.ledger tbody tr.flagged{
  cursor:pointer;
  background:var(--redline-lo);
}
.ledger tbody tr.flagged:hover,
.ledger tbody tr.flagged.active{
  background:rgba(191,50,38,.18);
}

.ledger tbody tr.flagged td:first-child{
  box-shadow:inset 3px 0 0 var(--redline);
}

.strike{ position:relative; color:var(--redline); }
.strike::after{
  content:"";
  position:absolute;
  left:12%; right:6%;
  top:52%;
  height:1.5px;
  background:var(--redline);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.6,0,.2,1);
}
.redline.marked .strike::after{ transform:scaleX(1); }

.redline-foot{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 18px;
  border-top:1px solid var(--ink);
  min-height:74px;
}

.redline-label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-lift);
  background:var(--redline);
  padding:3px 7px;
  border-radius:2px;
  white-space:nowrap;
  margin-top:2px;
}

.redline-note{
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink-soft);
}

.section{ padding:76px 0; border-top:1px solid var(--rule); }

.cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:16px;
}

.col h3{
  padding-bottom:.55em;
  margin-bottom:.8em;
  border-bottom:2px solid var(--ink);
}
.col p{ color:var(--ink-soft); margin:0; }

.tools{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}

.tool{
  background:var(--paper);
  padding:26px 24px 28px;
}

.tool h3{ margin:10px 0 8px; }
.tool p{ margin:0; font-size:.94rem; color:var(--ink-soft); }

.tool-status{
  display:inline-block;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:2px 7px;
}

.tool-live{ background:var(--paper-lift); }
.tool-live .tool-status{
  color:var(--paper-lift);
  background:var(--redline);
  border-color:var(--redline);
}

.plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:start;
}

.plan{
  position:relative;
  background:var(--paper-lift);
  border:1px solid var(--ink);
  padding:30px 26px 32px;
  display:flex;
  flex-direction:column;
}

.plan-featured{
  box-shadow:6px 6px 0 var(--redline);
}

.plan-tag{
  position:absolute;
  top:-11px; left:22px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--redline);
  color:var(--paper-lift);
  padding:3px 9px;
  border-radius:2px;
}

.plan-name{ font-size:1.05rem; }

.plan-price{
  font-family:var(--display);
  font-weight:800;
  font-size:3.1rem;
  line-height:1;
  letter-spacing:-.04em;
  margin:.18em 0 .1em;
}
.plan-price .dollar{
  font-size:1.3rem;
  vertical-align:super;
  margin-right:2px;
}

.plan-for{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--steel);
  margin-bottom:1.3em;
}

.plan-list{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  flex:1;
  border-top:1px solid var(--rule);
}
.plan-list li{
  font-size:.92rem;
  padding:10px 0 10px 20px;
  border-bottom:1px solid var(--rule);
  position:relative;
  color:var(--ink-soft);
}
.plan-list li::before{
  content:"";
  position:absolute;
  left:2px; top:19px;
  width:7px; height:7px;
  border-left:1.5px solid var(--redline);
  border-bottom:1.5px solid var(--redline);
  transform:rotate(-45deg);
}

.plan .btn{ text-align:center; }

.pricing-note{
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.7;
  color:var(--steel);
  max-width:60ch;
  margin-top:30px;
  padding-left:14px;
  border-left:2px solid var(--rule);
}

.login-wrap{ max-width:620px; }

.login-box{
  background:var(--paper-lift);
  border:1px solid var(--ink);
  padding:26px;
}

.login-box label{
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:9px;
}

.login-box input{
  width:100%;
  font-family:var(--body);
  font-size:16px;
  padding:14px;
  background:var(--paper);
  color:var(--ink);
  border:1.5px solid var(--rule);
  border-radius:2px;
  margin-bottom:14px;
}
.login-box input:focus{ border-color:var(--ink); outline:none; }

.login-box .btn{ width:100%; }

.login-msg{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--redline);
  margin:12px 0 0;
  min-height:1.2em;
}

.footer{
  background:var(--ink);
  color:var(--paper);
  padding:52px 0 34px;
}

.footer-inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:26px 40px;
}

.footer-mark{
  font-family:var(--display);
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:-.03em;
  margin:0 0 8px;
}

.footer-line{
  font-size:.92rem;
  color:#9BA1A6;
  max-width:44ch;
  margin:0;
}

.footer-nav{ display:flex; gap:24px; align-items:flex-start; }
.footer-nav a{
  font-family:var(--display);
  font-weight:500;
  font-size:.9rem;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-nav a:hover{ border-bottom-color:var(--redline); }

.copyright{
  grid-column:1 / -1;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:#7C8288;
  margin:18px 0 0;
  padding-top:20px;
  border-top:1px solid #2C3034;
}

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.shown{ opacity:1; transform:none; }

@media (max-width:940px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .cols{ grid-template-columns:1fr 1fr; gap:32px; }
  .tools{ grid-template-columns:1fr 1fr; }
  .plans{ grid-template-columns:1fr; gap:26px; }
  .plan-featured{ box-shadow:5px 5px 0 var(--redline); }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .hero{ padding:48px 0 60px; }
  .section{ padding:56px 0; }

  .navtoggle{ display:block; }

  .nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--ink);
    padding:8px var(--gut) 20px;
  }
  .nav.open{ display:flex; }
  .nav a{
    padding:15px 0;
    border-bottom:1px solid var(--rule);
  }
  .nav a:hover{ border-bottom-color:var(--rule); }
  .nav .nav-login{
    margin-top:16px;
    text-align:center;
    border:1.5px solid var(--ink);
  }

  .cols{ grid-template-columns:1fr; gap:28px; }
  .tools{ grid-template-columns:1fr; }

  .ledger{ font-size:.75rem; }
  .ledger th,
  .ledger td{ padding:10px 12px; }
  .redline-head{ padding:12px; }
  .redline-foot{ padding:12px; }

  .footer-inner{ grid-template-columns:1fr; }
  .footer-nav{ flex-wrap:wrap; gap:18px; }
}

@media (max-width:400px){
  .ledger th:nth-child(3),
  .ledger td:nth-child(3){ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .redline .strike::after{ transform:scaleX(1); }
}