/* Construct — storefront brand system
   Pulled from the live construct-ent.com (GoDaddy Website Builder) on 2026-07-19:
   Squada One (display) + Share (body), dark charcoal #161616, monochrome, sharp
   (0-radius) corners. The main site alternates DARK bands with WHITE content
   sections — this store is mostly dark with white bands behind pricing. */

:root{
  /* ---- dark system (the site's dark bands) ---- */
  --bg:#161616;          /* primary dark (site's dominant bg) */
  --bg-deep:#111111;     /* deeper sections */
  --header:#0d0d0d;      /* near-black header — matches main site */
  --surface:#1d1d1d;     /* cards */
  --surface-2:#232323;   /* hover / raised */
  --ink:#f7f7f7;         /* primary text on dark */
  --muted:#a4a4a4;       /* secondary text on dark */
  --dim:#6f7070;         /* tertiary / links-at-rest */
  --line:#2b2b2b;        /* borders on dark */
  --line-2:#3a3a3a;
  --white:#ffffff;       /* CTA / emphasis on dark */

  /* ---- paper system (the site's white content sections) ---- */
  --paper:#ffffff;       /* white band bg */
  --paper-ink:#1b1b1b;   /* headings on white (matches site h1 #1b1b1b) */
  --paper-body:#2a2a2a;  /* body text on white */
  --paper-muted:#5c5c5c; /* secondary text on white */
  --paper-line:#e4e4e4;  /* borders on white */
  --paper-line-2:#cfcfcf;

  --head:'Squada One','Oswald','Arial Narrow',sans-serif;
  --body:'Share','Arial',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.site{border-bottom:1px solid var(--line);background:var(--header)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.wordmark{display:flex;align-items:center;gap:11px;font-family:var(--head);font-size:26px;letter-spacing:.06em;line-height:1}
.wordmark .mk-logo{height:38px;width:38px;display:block;flex:none}
.wordmark .sub{font-family:var(--body);font-size:11px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;font-weight:700;align-self:center}
.site nav{display:flex;gap:22px;align-items:center;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.site nav a{color:var(--muted)}
.site nav a:hover,.site nav a.active{color:var(--ink)}
.backlink{color:var(--dim)!important;font-size:12px}

/* ---------- hero (dark, text-only) ---------- */
.hero{padding:70px 0 40px;border-bottom:1px solid var(--line)}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:6px 12px}
.hero h1{font-family:var(--head);font-weight:400;font-size:clamp(40px,7vw,76px);line-height:.98;letter-spacing:.01em;margin:22px 0 16px;text-transform:uppercase}
.hero h1 .thin{color:var(--muted)}

/* ---------- product-family suffix ----------
   The display faces are all-caps, which mashes the camel-case in the "-WorkZ"
   names into SHOWWORKZ. Setting the shared suffix a step back in the greyscale
   keeps the caps system intact, restores the read, and makes the family tie
   visible: SHOW·WORKZ, PAPER·WORKZ, RIG·WORKZ. ND-Pi has no suffix and is
   deliberately left alone. */
.wz{color:var(--muted)}
.band-paper .wz{color:var(--paper-muted)}
/* nav sits a step darker at rest, so the suffix steps down from there */
.site nav .wz{color:var(--dim)}
.site nav a:hover .wz,.site nav a.active .wz{color:var(--muted)}
.lead{font-size:19px;color:var(--muted);max-width:60ch;margin:0}
.byline{margin-top:10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hero-feats{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px 34px;max-width:760px}
.hero-feats li{font-size:15px;color:var(--ink);padding-left:20px;position:relative;line-height:1.45}
.hero-feats li::before{content:"—";position:absolute;left:0;color:var(--muted)}

/* ---------- product grid (hub, dark) ---------- */
.section-label{font-family:var(--head);font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:54px 0 20px}
.products{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pcard{background:var(--bg);padding:30px 26px;display:flex;flex-direction:column;min-height:220px;transition:background .12s}
.pcard:hover{background:var(--surface)}
.pcard .lane{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pcard h3{font-family:var(--head);font-weight:400;font-size:30px;text-transform:uppercase;letter-spacing:.02em;margin:14px 0 6px}
.pcard p{color:var(--muted);font-size:15px;margin:0 0 auto}
.pcard .go{margin-top:22px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.pcard .go .arw{transition:transform .12s}
.pcard:hover .go .arw{transform:translateX(4px)}

/* ---------- paper band (white content section — e.g. pricing) ---------- */
.band-paper{background:var(--paper);color:var(--paper-body);padding:52px 0 60px}
.band-paper .section-label{color:var(--paper-ink);margin:0 0 4px}
.band-paper .band-sub{color:var(--paper-muted);font-size:14.5px;margin:0 0 4px;max-width:70ch}

/* ---------- pricing tiers ---------- */
.tiers{display:grid;gap:16px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tier{background:var(--surface);border:1px solid var(--line);padding:26px 22px;display:flex;flex-direction:column;position:relative}
.tier.pop{border-color:var(--white)}
.badge{position:absolute;top:0;right:0;background:var(--white);color:var(--bg-deep);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px}
.badge.free{background:var(--dim);color:var(--ink)}
.tier .name{font-family:var(--head);font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.tier .desc{color:var(--muted);font-size:13px;min-height:34px;margin-top:4px}
.tier .price{font-family:var(--head);font-size:44px;line-height:1;margin:18px 0 2px}
.tier .price .per{font-family:var(--body);font-size:14px;color:var(--muted)}
.tier .subline{color:var(--muted);font-size:12.5px;min-height:16px}
.feat{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.feat li{font-size:13.5px;color:var(--ink);padding-left:20px;position:relative}
.feat li::before{content:"—";position:absolute;left:0;color:var(--muted)}
.cta{margin-top:20px;display:block;text-align:center;border:1px solid var(--line-2);color:var(--ink);
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:12px;cursor:pointer;transition:background .12s}
.cta:hover{background:var(--surface-2)}
.cta.solid{background:var(--white);color:var(--bg-deep);border-color:var(--white)}
.cta.solid:hover{background:#e6e6e6}

/* ---- pricing tiers inside a white band (inverted, monochrome) ---- */
.band-paper .tier{background:var(--paper);border:1px solid var(--paper-line)}
.band-paper .tier.pop{border-color:var(--paper-ink);box-shadow:inset 0 0 0 1px var(--paper-ink)}
.band-paper .tier .name{color:var(--paper-ink)}
.band-paper .tier .desc,.band-paper .tier .subline,.band-paper .tier .price .per{color:var(--paper-muted)}
.band-paper .tier .price{color:var(--paper-ink)}
.band-paper .feat li{color:var(--paper-body)}
.band-paper .feat li::before{color:var(--paper-muted)}
.band-paper .badge{background:var(--paper-ink);color:#fff}
.band-paper .badge.free{background:#9a9a9a;color:#fff}
.band-paper .cta{border-color:var(--paper-line-2);color:var(--paper-ink)}
.band-paper .cta:hover{background:#f2f2f2}
.band-paper .cta.solid{background:var(--paper-ink);color:#fff;border-color:var(--paper-ink)}
.band-paper .cta.solid:hover{background:#000}

/* ---------- ribbons / notes ---------- */
.ribbon{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill{font-size:12.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line-2);padding:7px 12px}
.pill.hot{color:var(--ink);border-color:var(--ink)}
.note{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;max-width:70ch}
.note b{color:var(--ink)}
.band-paper .note{color:var(--paper-muted);border-top:1px solid var(--paper-line)}
.band-paper .note b{color:var(--paper-ink)}
.draft{background:#221a0c;border-bottom:1px solid #3a2e12;color:#d9b877;text-align:center;font-size:12px;letter-spacing:.04em;padding:7px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:70px;padding:40px 0;color:var(--dim);font-size:13px;background:var(--bg)}
.band-paper + footer{margin-top:0}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}

@media(max-width:640px){
  .site nav{display:none}
  .hero{padding:48px 0 32px}
  .band-paper{padding:40px 0 46px}
}