/* ===========================================================
   THE PREP LIST — design tokens
   Palette:
     --ink:      #1D2023  (charcoal, near-black — the board)
     --steel:    #6E7479  (brushed steel — secondary text/lines)
     --paper:    #F3F1EA  (ticket paper — light bg, warm but not cream-cliche)
     --paper-2:  #E7E3D8  (paper shadow / card bg)
     --rail:     #C6402B  (order-rail red — urgent accent)
     --amber:    #E8A93B  (caution tape — secondary accent)
   Type:
     display -> 'Oswald' (condensed, stenciled, signage feel)
     body    -> 'Work Sans' (clean grotesk, readable at length)
     mono    -> 'IBM Plex Mono' (ticket / receipt printer feel)
   =========================================================== */

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

:root{
  --ink:#1D2023;
  --ink-soft:#3A3E42;
  --steel:#6E7479;
  --steel-light:#A7ACB0;
  --paper:#F3F1EA;
  --paper-2:#E7E3D8;
  --rail:#C6402B;
  --amber:#E8A93B;
  --max:1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0 0 0.5em;
  color:var(--ink);
}

a{color:inherit;}

.mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.02em;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* ---------- header / nav ---------- */
.site-header{
  border-bottom:3px solid var(--ink);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand .name-block{display:flex;flex-direction:column;line-height:1.1;}
.brand .tagline{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--steel);
  margin-top:2px;
}
.brand .stamp{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  background:var(--rail);
  color:var(--paper);
  padding:3px 7px;
  border-radius:2px;
  letter-spacing:0.08em;
  transform:rotate(-2deg);
}
.brand .name{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:0.01em;
}
.brand .name span{color:var(--rail);}
.site-nav{display:flex;gap:26px;font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:0.04em;}
.site-nav a{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:3px;}
.site-nav a:hover{border-bottom-color:var(--rail);}

/* ---------- hero ---------- */
.hero{
  border-bottom:3px solid var(--ink);
  background:
    repeating-linear-gradient(135deg, rgba(29,32,35,0.035) 0 2px, transparent 2px 14px),
    var(--paper);
  padding:74px 0 60px;
}
.hero .kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rail);
  margin-bottom:22px;
}
.hero .kicker::before{
  content:"";
  width:9px;height:9px;
  background:var(--rail);
  display:inline-block;
  border-radius:50%;
}
.hero h1{
  font-size:clamp(36px,6vw,64px);
  line-height:1.05;
  max-width:16ch;
  margin-bottom:26px;
}
.hero h1 em{
  font-style:normal;
  color:var(--rail);
}
.hero p.lede{
  max-width:56ch;
  font-size:19px;
  color:var(--ink-soft);
  margin-bottom:30px;
}
.hero-meta{
  display:flex;
  gap:34px;
  flex-wrap:wrap;
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid var(--paper-2);
}
.hero-meta .stat{font-family:'IBM Plex Mono',monospace;}
.hero-meta .stat .n{font-size:26px;font-weight:600;display:block;color:var(--ink);}
.hero-meta .stat .l{font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--steel);}

/* ---------- ticket rail (article list) ---------- */
.rail-section{padding:56px 0 70px;}
.rail-section .head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:34px;
  flex-wrap:wrap;
  gap:10px;
}
.rail-section h2{font-size:30px;}
.rail-section .head p{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.rail{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:22px;
}

.ticket{
  position:relative;
  background:#fff;
  border:1px solid var(--paper-2);
  border-left:4px solid var(--ink);
  padding:22px 22px 26px;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .15s ease, box-shadow .15s ease, border-left-color .15s ease;
  box-shadow:0 1px 0 rgba(29,32,35,0.03);
}
.ticket:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(29,32,35,0.10);
  border-left-color:var(--rail);
}
.ticket::after{
  /* perforated / torn bottom edge */
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:8px;
  background-image:radial-gradient(circle, var(--paper) 2.4px, transparent 2.6px);
  background-size:14px 14px;
  background-position:0 0;
}
.ticket .num{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--rail);
  letter-spacing:0.06em;
  display:flex;
  justify-content:space-between;
}
.ticket h3{
  font-size:19px;
  line-height:1.25;
  text-transform:none;
  letter-spacing:0;
  margin:0;
}
.ticket p{
  font-size:14.5px;
  color:var(--ink-soft);
  margin:0;
  flex-grow:1;
}
.ticket .tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--steel);
  border-top:1px dashed var(--paper-2);
  padding-top:12px;
  margin-top:4px;
}

/* ---------- credibility / about strip ---------- */
.credibility{
  background:var(--ink);
  color:var(--paper);
  padding:60px 0;
}
.credibility .wrap{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px;
  align-items:center;
}
.credibility h2{color:var(--paper);font-size:28px;max-width:14ch;}
.credibility p{color:var(--steel-light);max-width:52ch;}
.credibility .years{
  font-family:'Oswald',sans-serif;
  font-size:96px;
  line-height:0.85;
  color:var(--amber);
  font-weight:600;
}
.credibility .years .lbl{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--steel-light);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-top:10px;
}
@media (max-width:760px){
  .credibility .wrap{grid-template-columns:1fr;}
}

/* ---------- signup ---------- */
.signup{padding:60px 0 70px;}
.signup-box{
  border:2px solid var(--ink);
  padding:40px;
  background:#fff;
  display:flex;
  gap:34px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.signup-box h2{font-size:24px;margin-bottom:8px;}
.signup-box p{color:var(--steel);max-width:44ch;margin:0;}
.signup-form{display:flex;gap:0;flex:0 0 auto;}
.signup-form input{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  padding:14px 16px;
  border:2px solid var(--ink);
  border-right:none;
  min-width:230px;
  background:var(--paper);
}
.signup-form button{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:14px 20px;
  background:var(--rail);
  color:#fff;
  border:2px solid var(--ink);
  cursor:pointer;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:3px solid var(--ink);
  padding:34px 0;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  color:var(--steel);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- article page ---------- */
.article-header{
  border-bottom:3px solid var(--ink);
  padding:50px 0 40px;
}
.article-header .num{
  font-family:'IBM Plex Mono',monospace;
  color:var(--rail);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:16px;
  display:block;
}
.article-header h1{font-size:clamp(30px,5vw,46px);max-width:22ch;line-height:1.1;}
.article-header .sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--steel);
  margin-top:18px;
}
.article-body{
  max-width:66ch;
  margin:0 auto;
  padding:50px 28px 30px;
}
.article-body h2{
  font-size:24px;
  margin-top:2.1em;
  padding-top:0.2em;
  border-top:2px solid var(--paper-2);
}
.article-body h2:first-child{border-top:none;margin-top:0;}
.article-body p{margin:0 0 1.2em;}
.article-body ul, .article-body ol{margin:0 0 1.2em;padding-left:1.3em;}
.article-body li{margin-bottom:0.4em;}
.article-body blockquote{
  border-left:3px solid var(--rail);
  margin:1.6em 0;
  padding:0.4em 0 0.4em 1.2em;
  font-style:normal;
  color:var(--ink-soft);
  background:var(--paper-2);
}
.article-body strong{color:var(--ink);}
.article-body em{
  display:block;
  margin-top:2.4em;
  padding-top:1.6em;
  border-top:1px dashed var(--paper-2);
  color:var(--steel);
  font-style:normal;
  font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;
}
.article-body hr{
  border:none;
  border-top:1px dashed var(--paper-2);
  margin:2em 0;
}
.article-nav{
  max-width:66ch;
  margin:0 auto;
  padding:0 28px 70px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.article-nav a{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  text-decoration:none;
  border:1px solid var(--ink);
  padding:12px 18px;
}
.article-nav a:hover{background:var(--ink);color:var(--paper);}

@media (max-width:640px){
  .site-nav{display:none;}
  .signup-box{flex-direction:column;align-items:flex-start;}
  .signup-form{width:100%;}
  .signup-form input{flex:1;min-width:0;}
}

/* ---------- guide cards (comparisons / buyer's guides — not sequential) ---------- */
.guide-rail{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:22px;
}
.guide-card{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:26px 24px 24px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.guide-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(29,32,35,0.22);
}
.guide-card .kicker-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amber);
}
.guide-card h3{
  font-size:19px;
  line-height:1.25;
  text-transform:none;
  letter-spacing:0;
  margin:0;
  color:var(--paper);
}
.guide-card p{
  font-size:14.5px;
  color:var(--steel-light);
  margin:0;
  flex-grow:1;
}
.guide-card .go{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--paper);
  border-top:1px solid rgba(243,241,234,0.15);
  padding-top:12px;
  margin-top:4px;
}

/* ---------- resource hub page ---------- */
.hub-header{
  border-bottom:3px solid var(--ink);
  padding:50px 0 40px;
}
.hub-header .kicker{
  font-family:'IBM Plex Mono',monospace;
  color:var(--rail);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:16px;
  display:block;
}
.hub-header h1{font-size:clamp(30px,5vw,46px);max-width:20ch;line-height:1.1;}
.hub-header p.lede{
  font-size:17px;
  color:var(--ink-soft);
  max-width:60ch;
  margin-top:18px;
}

.tool-card{
  border:1px solid var(--paper-2);
  border-left:4px solid var(--rail);
  background:#fff;
  padding:28px;
  margin-bottom:20px;
}
.tool-card h3{font-size:21px;text-transform:none;letter-spacing:0;margin-bottom:10px;}
.tool-card p{color:var(--ink-soft);margin:0 0 14px;}
.tool-card .links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  text-decoration:none;
  border-bottom:2px solid var(--rail);
  margin-right:22px;
  padding-bottom:2px;
}

.hub-body{max-width:74ch;margin:0 auto;padding:50px 28px 30px;}
.hub-body h2{font-size:22px;margin-top:2em;}
.hub-body p{color:var(--ink-soft);margin-bottom:1.2em;}
.hub-disclosure{
  max-width:74ch;
  margin:0 auto;
  padding:0 28px 60px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  color:var(--steel);
  border-top:1px dashed var(--paper-2);
  padding-top:20px;
}