/* ═══════════════════════════════════════════════════════════════════
   Signet — shared stylesheet for signetcrm.com
   Deploys to public_html/signet.css

   Used by BOTH index.html and features.html. Edit the design here and
   both pages move together; that is the whole reason this is a file
   instead of two inline <style> blocks that would quietly drift.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Surfaces ─────────────────────────────────────────── */
  --obsidian:#08080a;   /* 0 · page canvas */
  --onyx:#040406;       /* 1 · card surface */
  --carbon:#121317;     /* 2 · elevated panel, inputs */
  --graphite:#1c1d22;   /* 3 · hairline border, icon wells */

  /* ── Structure ────────────────────────────────────────── */
  --slate:#2e3038;
  --smoke:#464853;

  /* ── Type ─────────────────────────────────────────────── */
  --ash:#5e616e;
  --steel:#777a88;
  --fog:#9194a1;
  --mist:#acafb9;
  --silver:#c7c9d1;
  --bone:#e2e3e9;
  --paper:#ffffff;

  /* ── The only chromatic note ──────────────────────────── */
  --copper:#cc9166;
  --sage:#7f9e83;

  --serif:'Playfair Display','Ivy Presto',Georgia,'Times New Roman',serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --max:1216px;
  --gap:160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--obsidian)}
body{
  background:var(--obsidian);color:var(--bone);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ── Serif register — 28px and above, never below ───────── */
h1,h2,.serif{
  font-family:var(--serif);font-weight:400;color:var(--paper);
  letter-spacing:.01em;
}
h1{font-size:clamp(32px,4.2vw,52px);line-height:1.08}
h2{font-size:clamp(34px,4.6vw,52px);line-height:1.13}
.band-title{
  font-family:var(--serif);font-weight:400;color:var(--paper);
  letter-spacing:.01em;font-size:clamp(30px,3.6vw,44px);line-height:1.2;
}

/* ── Sans register — below 28px, never above 48px ───────── */
.eyebrow{
  font-size:13px;font-weight:600;line-height:1;letter-spacing:-.02em;
  color:var(--copper);display:block;margin-bottom:20px;
}
.eyebrow-muted{color:var(--fog)}
.lede{font-size:20px;font-weight:400;line-height:1.38;letter-spacing:-.8px;color:var(--fog)}
.body-sm{font-size:18px;font-weight:300;line-height:1.38;letter-spacing:-.36px;color:var(--mist)}
p{font-size:16px;line-height:1.5;color:var(--bone)}
.muted{color:var(--fog)}

/* ── Buttons — every control is a pill ──────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:500;
  border-radius:9999px;padding:10px 20px;cursor:pointer;
  border:1px solid transparent;transition:background .16s,border-color .16s,color .16s;
  white-space:nowrap;
}
/* The scarce resource — one per viewport */
.btn-white{background:var(--paper);color:#000;border-color:var(--paper)}
.btn-white:hover{background:var(--silver);border-color:var(--silver)}
.btn-ghost{background:transparent;border-color:var(--paper);color:var(--paper)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-tag{
  background:transparent;border-color:var(--steel);color:var(--paper);
  font-size:12px;padding:6px 10px;
}

/* Copper is for editorial links only — never a button */
.link-copper{color:var(--copper);font-size:14px;font-weight:500;letter-spacing:-.02em}
.link-copper:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Nav ────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.86);backdrop-filter:blur(14px)}
.nav-in{max-width:var(--max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:24px;font-weight:500;color:var(--paper);letter-spacing:.01em}
.nav-menu{display:flex;align-items:center;gap:2px;margin-left:32px}
.nav-menu a{padding:6px 10px;font-size:14px;color:var(--fog);border-radius:2px}
.nav-menu a:hover{color:var(--paper)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ── Hero ───────────────────────────────────────────────── */
.hero{padding:96px 0 clamp(72px,10vw,140px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:64px;align-items:center}
.hero h1{margin-bottom:24px}
.hero .lede{max-width:460px}

/* Email capture — input and button read as one unit */
.capture{display:flex;align-items:center;gap:8px;margin-top:40px;max-width:440px}
.capture input{
  flex:1;min-width:0;background:transparent;border:1px solid var(--paper);
  border-radius:9999px;padding:10px 10px 10px 20px;
  font-family:var(--sans);font-size:14px;color:var(--paper);outline:none;
}
.capture input::placeholder{color:var(--steel)}
.capture input:focus{border-color:var(--paper);box-shadow:rgba(255,255,255,.2) 0 0 0 1px}
.hero-note{margin-top:16px;font-size:14px;color:var(--ash)}

/* ── Cards ──────────────────────────────────────────────── */
.card{background:var(--onyx);border-radius:10px;padding:24px}
.panel{background:var(--carbon);border-radius:10px;padding:20px}

/* Product UI card in the hero */
.ui-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.ui-label{font-size:14px;color:var(--fog)}
.ui-figure{font-size:48px;font-weight:500;color:var(--paper);letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums}
.ui-delta{font-size:14px;color:var(--sage);margin-top:6px}
.filter{display:flex;gap:6px}
.filter span{
  border:1px solid var(--graphite);border-radius:9999px;padding:4px 10px;
  font-size:12px;color:var(--fog);
}
.filter span.on{border-color:var(--steel);color:var(--paper)}
.chart{margin:20px 0 4px}
.chart svg{display:block;width:100%;height:110px}

/* Dense data rows — hairline dividers, no containers */
.rows{margin-top:20px}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--graphite)}
.row:last-child{border-bottom:none}
.well{
  width:32px;height:32px;border-radius:9999px;border:1px solid var(--slate);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:12px;font-weight:600;color:var(--fog);
}
.row .who{flex:1;min-width:0}
.row .who b{display:block;font-size:15px;font-weight:400;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .who span{display:block;font-size:13px;color:var(--fog);margin-top:2px}
.row .amt{font-size:15px;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill-state{
  border:1px solid var(--sage);color:var(--sage);border-radius:9999px;
  padding:2px 10px;font-size:12px;font-weight:500;white-space:nowrap;
}
.pill-state.wait{border-color:var(--steel);color:var(--mist)}

/* ── Sections ───────────────────────────────────────────── */
section{padding:clamp(72px,11vw,var(--gap)) 0}
.sec-head{max-width:640px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-bottom:20px}

/* ── Stat callout ───────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;text-align:center}
.stat .n{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.13;letter-spacing:.01em;color:var(--paper)}
.stat .c{font-size:14px;color:var(--fog);margin-top:8px}

/* ── Two-column bands ───────────────────────────────────── */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.band + .band{margin-top:clamp(72px,11vw,var(--gap))}
.band.flip .band-copy{order:2}
.band-copy .band-title{margin-bottom:20px}
.band-copy .body-sm{margin-bottom:28px}
.checks{display:flex;flex-direction:column;gap:14px}
.checks div{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--bone);line-height:1.5}
.checks .m{color:var(--copper);flex-shrink:0;font-size:13px;font-weight:600;padding-top:3px}

/* Signature plate */
.sig{border-bottom:1px solid var(--graphite);padding:8px 0 20px;margin-bottom:16px;display:flex;justify-content:center}
.sig svg{width:210px;height:70px}
.sig path{fill:none;stroke:var(--paper);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sig-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sig-foot .nm{font-size:16px;font-weight:500;color:var(--paper)}
.sig-foot .dt{font-size:13px;color:var(--fog);margin-top:2px}

/* Quoted form text */
.quote{font-size:16px;line-height:1.6;color:var(--mist)}
.quote b{color:var(--paper);font-weight:500}

/* ── Three-column feature grid ──────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px}
.feat .k{font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--copper);margin-bottom:10px}
.feat h3{font-size:20px;font-weight:500;line-height:1.38;letter-spacing:-.02em;color:var(--paper);margin-bottom:8px}
.feat p{font-size:16px;color:var(--fog);line-height:1.5}

/* ── Tag strip ──────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:8px}

/* ── Closing CTA ────────────────────────────────────────── */
.close{text-align:center;max-width:680px;margin:0 auto}
.close h2{margin-bottom:20px}
.close .lede{margin:0 auto 40px;max-width:520px}
.close .capture{margin:0 auto}

/* ── Footer ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--graphite);padding:48px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-brand .logo{margin-bottom:12px}
.foot-brand p{font-size:14px;color:var(--ash);max-width:260px}
.foot-col h4{font-size:13px;font-weight:600;color:var(--paper);margin-bottom:14px;letter-spacing:-.02em}
.foot-col a{display:block;font-size:14px;color:var(--fog);padding:5px 0}
.foot-col a:hover{color:var(--paper)}
.foot-base{border-top:1px solid var(--graphite);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ash)}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:960px){
  .hero-grid,.band{grid-template-columns:minmax(0,1fr);gap:48px}
  .band.flip .band-copy{order:0}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-menu{display:none}
}
@media(max-width:640px){
  .hero{padding:56px 0 72px}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr);gap:36px}
  .capture{flex-direction:column;align-items:stretch;max-width:none}
  .capture input{width:100%}
  .card{padding:18px}
  .row .amt{font-size:14px}
  .foot-grid{grid-template-columns:1fr}
}

/* ══ FEATURES PAGE ═══════════════════════════════════════════════════
   Built from the same .band / .card / .rows components the landing page
   uses, so the two pages read as one site. Everything below is either a
   layout wrapper or a small mock element; no new colours or fonts.
   ═══════════════════════════════════════════════════════════════════ */

/* Page intro */
.page-head{padding:88px 0 0}
.page-head h1{max-width:15ch;margin-bottom:20px}
.page-head .lede{max-width:560px}

/* One stage of the job */
.stage{padding:80px 0}
.stage + .stage{border-top:1px solid var(--graphite)}
.stage-head{max-width:620px;margin-bottom:56px}
.stage-head h2{margin:14px 0 14px}
.stage-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--copper);
  color:var(--copper);font-size:12px;font-weight:600;margin-right:10px;
}

/* Smaller features that don't warrant their own mock */
.stage-grid{margin-top:64px;padding-top:40px;border-top:1px solid var(--graphite)}
.stage-grid-label{font-size:11px;font-weight:600;letter-spacing:-.02em;color:var(--fog);text-transform:uppercase;margin-bottom:24px}

/* Honest caveat under a band */
.note{
  display:block;margin-top:18px;padding-left:12px;
  border-left:2px solid var(--graphite);
  font-size:13px;line-height:1.6;color:var(--ash);
}

/* ── Mock: a named repair section ──────────────────────────────── */
.m-sec{border:1px solid var(--graphite);border-radius:var(--r);overflow:hidden}
.m-sec + .m-sec{margin-top:10px}
.m-sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;background:var(--carbon);font-size:12.5px;color:var(--bone);font-weight:500;
}
.m-sec-body{padding:4px 12px 10px}
.m-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px;color:var(--mist)}
.m-line span:last-child{color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-sub{display:flex;justify-content:space-between;padding:7px 12px 0;margin:0 -12px;border-top:1px solid var(--graphite);font-size:12px;color:var(--fog)}
.m-sub b{color:var(--bone);font-weight:500;font-variant-numeric:tabular-nums}

/* Declined section — struck through and dimmed */
.m-sec.declined .m-sec-body{opacity:.45}
.m-sec.declined .m-line span{text-decoration:line-through}

/* ── Mock: approve / decline control ───────────────────────────── */
.m-toggle{display:flex;border:1px solid var(--graphite);border-radius:var(--r);overflow:hidden;flex-shrink:0}
.m-toggle span{padding:3px 9px;font-size:11px;color:var(--steel)}
.m-toggle span + span{border-left:1px solid var(--graphite)}
.m-toggle .on-yes{background:rgba(127,158,131,.14);color:var(--sage);font-weight:600}
.m-toggle .on-no{background:rgba(217,100,90,.14);color:#d9645a;font-weight:600}

/* ── Mock: mini workflow board ─────────────────────────────────── */
.m-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-col-head{display:flex;align-items:center;gap:5px;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--fog);margin-bottom:7px}
.m-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.m-card{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r);padding:8px;margin-bottom:6px}
.m-card-num{font-size:9px;color:var(--copper);margin-bottom:3px}
.m-card-name{font-size:11.5px;color:var(--bone);line-height:1.3;margin-bottom:2px}
.m-card-sub{font-size:10px;color:var(--fog);line-height:1.35}
.m-card-amt{font-size:11px;color:var(--bone);margin-top:5px;font-variant-numeric:tabular-nums}

/* ── Mock: hours progress ──────────────────────────────────────── */
.m-hours{margin-top:6px}
.m-hours-row{display:flex;justify-content:space-between;font-size:9.5px;color:var(--fog);margin-bottom:3px}
.m-hours-row b{color:var(--mist);font-weight:500;font-variant-numeric:tabular-nums}
.m-track{height:3px;background:var(--slate);border-radius:99px;overflow:hidden}
.m-fill{display:block;height:100%;border-radius:99px;background:var(--sage)}
.m-fill.over{background:#d9645a}

/* ── Mock: inspection items ────────────────────────────────────── */
.m-insp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-insp-item{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r);overflow:hidden}
.m-photo{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--graphite);color:var(--smoke)}
.m-photo svg{width:20px;height:20px}
.m-insp-body{padding:8px 10px}
.m-insp-name{font-size:11.5px;color:var(--bone);margin-bottom:5px}
.m-tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:9.5px;font-weight:600}
.m-tag.pass{background:rgba(127,158,131,.14);color:var(--sage)}
.m-tag.warn{background:rgba(204,145,102,.14);color:var(--copper)}
.m-tag.fail{background:rgba(217,100,90,.14);color:#d9645a}

/* ── Mock: profit bars ─────────────────────────────────────────── */
.m-bars{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.m-bar-row{display:grid;grid-template-columns:30px 1fr 58px;gap:10px;align-items:center}
.m-bar-row span:first-child{font-size:10px;color:var(--fog)}
.m-bar-row span:last-child{font-size:10.5px;color:var(--mist);text-align:right;font-variant-numeric:tabular-nums}
.m-bar-track{height:5px;background:var(--slate);border-radius:99px;overflow:hidden}
.m-bar-fill{display:block;height:100%;border-radius:99px;background:var(--fog)}
.m-bar-row:last-child .m-bar-fill{background:var(--copper)}

@media(max-width:900px){
  .page-head{padding:56px 0 0}
  .stage{padding:56px 0}
  .stage-head{margin-bottom:36px}
  .m-insp{grid-template-columns:1fr}
  .m-board{grid-template-columns:1fr}
  .m-board > div:nth-child(n+3){display:none}
}