/* ===========================================================================
   Engineers Framework — marketing site design system
   Palette: ink navy, teal (shared with the product), cool drafting-paper
   background, oxide-red stamp accent used sparingly for the signature motif.
   Type: Space Grotesk (display) / IBM Plex Sans (body) / IBM Plex Mono (codes)
=========================================================================== */

:root{
  --ink:#13314c; --ink-2:#0f2438; --band:#1e4a6d; --teal:#0f766e; --teal-dark:#0b5b54;
  --paper:#eef2f0; --panel:#ffffff; --line:#d7dee2; --mute:#5b6b7b; --text:#1f2937;
  --stamp:#9a3324; --stamp-ink:#7a2819;
  --green:#15803d; --green-bg:#dcfce7; --amber:#b45309; --amber-bg:#fef3c7; --red:#b91c1c; --red-bg:#fee2e2;
  --radius:10px; --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Space Grotesk",sans-serif; color:var(--ink); font-weight:600; line-height:1.15; margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em;}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}
code, .mono{font-family:"IBM Plex Mono",monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:18px; height:1.5px; background:var(--teal); display:inline-block;}

/* focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ---------- header (title-block strip) ---------- */
header.site{
  background:var(--ink-2); border-bottom:3px solid var(--teal); position:sticky; top:0; z-index:50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:19px;}
.brand .mark{
  width:30px; height:30px; border:1.5px solid var(--teal); border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700; color:var(--teal); flex-shrink:0;
}
.brand a{color:#fff; text-decoration:none; display:flex; align-items:center; gap:10px;}
.navlinks{display:flex; align-items:center; gap:28px;}
.navlinks a{color:#c7d4de; font-size:14.5px; font-weight:500;}
.navlinks a:hover{color:#fff; text-decoration:none;}
.navlinks a.active{color:#fff;}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; padding:10px 18px;
  border-radius:7px; border:1.5px solid transparent; cursor:pointer; font-family:"IBM Plex Sans",sans-serif;
}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-dark); text-decoration:none;}
.btn-ghost{border-color:#3a5972; color:#fff;}
.btn-ghost:hover{border-color:var(--teal); text-decoration:none;}
.btn-stamp{border-color:var(--stamp); color:var(--stamp);}
@media (max-width:760px){ .navlinks{display:none;} }

/* ---------- hero ---------- */
.hero{padding:88px 0 64px; position:relative; overflow:hidden;}
.hero .grid-bg{
  position:absolute; inset:0; background-image:
    linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px; opacity:.35; mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} }
.hero p.lead{font-size:1.15rem; color:var(--mute); max-width:52ch;}
.hero-ctas{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.btn-lg{padding:13px 24px; font-size:15.5px; border-radius:8px;}

/* signature: rotated issue stamp */
.stamp{
  border:2.5px solid var(--stamp); color:var(--stamp); border-radius:8px; padding:18px 22px; transform:rotate(-4deg);
  font-family:"IBM Plex Mono",monospace; background:#fff; box-shadow:0 10px 30px -12px rgba(19,49,76,.25);
  width:fit-content; margin:0 auto;
}
.stamp .l1{font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.85; margin-bottom:6px;}
.stamp .l2{font-size:18px; font-weight:700; letter-spacing:.02em; margin-bottom:6px;}
.stamp .l3{font-size:11.5px; opacity:.85;}
.stamp-wrap{display:flex; justify-content:center; padding:20px;}

/* ---------- sections ---------- */
section{padding:64px 0;}
.section-alt{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.hr-tick{border:0; border-top:1px solid var(--line); position:relative; margin:0 0 48px;}
.center{text-align:center;}
.section-head{max-width:640px; margin:0 auto 40px;}
.section-head.left{margin:0 0 40px;}

/* feature tiles: drawing-sheet cards */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){ .grid-3, .grid-2{grid-template-columns:1fr;} }
.tile{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  position:relative; padding-top:34px;
}
.tile .tag{
  position:absolute; top:14px; left:22px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--mute);
  letter-spacing:.08em;
}
.tile h3{margin-bottom:8px; font-size:1.05rem;}
.tile p{color:var(--mute); font-size:14.5px; margin:0;}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch;}
@media (max-width:980px){ .plans{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .plans{grid-template-columns:1fr;} }
.plan{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px;
  display:flex; flex-direction:column; position:relative;
}
.plan.featured{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal);}
.plan .badge{
  position:absolute; top:-11px; left:20px; background:var(--teal); color:#fff; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:99px; letter-spacing:.05em; text-transform:uppercase;
}
.plan .price{font-family:"Space Grotesk",sans-serif; font-size:1.7rem; font-weight:600; color:var(--ink); margin:10px 0 4px;}
.plan .price small{font-family:"IBM Plex Sans",sans-serif; font-size:13px; font-weight:500; color:var(--mute);}
.plan ul{list-style:none; margin:16px 0 22px; padding:0; flex:1;}
.plan li{font-size:14px; color:var(--text); padding:6px 0 6px 20px; position:relative; border-top:1px solid var(--line);}
.plan li:first-child{border-top:0;}
.plan li::before{content:"—"; position:absolute; left:0; color:var(--teal); font-family:"IBM Plex Mono",monospace;}
.plan .btn{width:100%; justify-content:center;}
.plan-note{font-size:12.5px; color:var(--mute); margin-top:10px;}

/* callouts / notes */
.callout{
  background:#fdf6ee; border:1px solid #ecd9bd; border-radius:var(--radius); padding:18px 20px; font-size:14.5px; color:#7a4e12;
}
.callout.info{background:#eef5f4; border-color:#c9e2de; color:#0b5b54;}

/* footer */
footer.site{background:var(--ink-2); color:#c7d4de; padding:48px 0 28px; margin-top:40px;}
footer.site h4{color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; font-family:"IBM Plex Mono",monospace;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding-bottom:32px; border-bottom:1px solid #2a4a63;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
footer.site a{color:#9db3c2; font-size:14px; display:block; margin-bottom:9px;}
footer.site a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; color:#7c93a3; flex-wrap:wrap; gap:10px;}

/* legal pages */
.legal{max-width:760px; margin:0 auto; padding:56px 24px 90px;}
.legal h1{margin-bottom:6px;}
.legal .updated{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--mute); margin-bottom:34px; display:block;}
.legal h2{font-size:1.2rem; margin-top:38px; padding-top:20px; border-top:1px solid var(--line);}
.legal h3{font-size:1rem; margin-top:22px;}
.legal p, .legal li{color:var(--text); font-size:15px;}
.legal ul, .legal ol{padding-left:22px;}
.legal .disclaimer-box{
  background:#fff6f5; border:1.5px solid #f3c9c4; border-radius:var(--radius); padding:18px 20px; margin:26px 0; font-size:14.5px;
}
.legal .disclaimer-box strong{color:var(--stamp);}

/* about page */
.about-hero{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
@media (max-width:860px){ .about-hero{grid-template-columns:1fr;} }
.timeline{border-left:2px solid var(--line); margin-left:6px; padding-left:26px;}
.timeline .item{position:relative; padding-bottom:26px;}
.timeline .item::before{content:""; position:absolute; left:-32px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--teal); border:2px solid #fff; box-shadow:0 0 0 2px var(--teal);}
.timeline .item .when{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--teal); font-weight:600;}

/* generic buttons row */
.row{display:flex; gap:12px; flex-wrap:wrap;}
.small-muted{color:var(--mute); font-size:13.5px;}