/* ===========================================================================
   site.css — Nonprofit Complete

   Layout:
     1. Design tokens
     2. Base / reset
     3. Tetromino icon component  (.tetro)
     4. Background decoration     (.deco-field)
     5. Site header + nav
     6. Site footer
     7. Shared page furniture     (eyebrow, titles, buttons)
     8. Home page
     9. Products page
    10. Services page
    11. Support page
    12. About page
    13. Contact page

   The block-drop page transition lives in css/transition.css.
   =========================================================================== */


/* ===========================================================================
   1. Design tokens
   =========================================================================== */

:root {
  /* Neutrals */
  --bg:            #f7f6f2;   /* page background                */
  --surface:       #fbfaf7;   /* cards, tiles, panels           */
  --surface-hover: #ffffff;
  --ink:           #14161a;   /* headings, strong text          */
  --body:          #3d4148;   /* long-form body copy            */
  --body-soft:     #4a4e56;
  --muted:         #5c6068;   /* secondary copy                 */
  --muted-2:       #6d717a;
  --faint:         #7b7f88;   /* footer, captions               */
  --faint-2:       #8a8e96;   /* eyebrows, kickers              */

  /* Hairlines */
  --line:        rgba(20, 22, 26, .12);
  --line-soft:   rgba(20, 22, 26, .10);
  --line-faint:  rgba(20, 22, 26, .06);

  /* Block palette — also the tetromino colors */
  --cyan:   #17b8c9;
  --yellow: #edc12e;
  --brown:  #a52a2a;
  --purple: #8258d6;
  --green:  #3aa96a;
  --red:    #dc4b47;
  --orange: #ef8a2b;
  --blue:   #3f6ae0;

  /* Type */
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Rhythm */
  --gutter:   clamp(20px, 5vw, 72px);
  --radius:   14px;
  --radius-s: 10px;
}


/* ===========================================================================
   2. Base / reset
   =========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 106, 224, .35);
}

a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Page content sits above the fixed background decoration. */
.main {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--gutter) 96px;
}


/* ===========================================================================
   3. Tetromino icon component

   Markup is always the same shape — a .tetro with one <i> per block:

     <span class="tetro tetro--t tetro--purple"><i></i><i></i><i></i><i></i></span>

   Shape modifier picks the arrangement, color modifier picks the color.
   Shapes are named after the tetromino they resemble.
   =========================================================================== */

.tetro {
  display: grid;
  gap: 3px;
  /* Three rows for every shape — see the shape notes below. Each shape
     modifier sets only its column count. */
  grid-template-rows: repeat(3, var(--tetro-size));
  --tetro-size: 12px;
  --tetro-color: var(--cyan);
}

.tetro > i {
  background: var(--tetro-color);
  border-radius: 2px;
}

/* --- Colors --- */
.tetro--cyan   { --tetro-color: var(--cyan); }
.tetro--yellow { --tetro-color: var(--yellow); }
.tetro--purple { --tetro-color: var(--purple); }
.tetro--green  { --tetro-color: var(--green); }
.tetro--orange { --tetro-color: var(--orange); }
.tetro--brown  { --tetro-color: var(--brown); }
.tetro--red    { --tetro-color: var(--red); }

/* --- Sizes --- */
.tetro--lg { --tetro-size: 13px; }

/* --- Shapes ---------------------------------------------------------------
   Every shape is drawn on the same three-row box, padded with blank rows at
   the bottom where the shape itself is shorter. L is the only one that fills
   all three; the rest leave one or two empty. That keeps the icons a uniform
   height, so text sitting directly beneath them lines up across tiles.

   I  ####          O  ##          T   #           T-DOWN  ###
                       ##            ###                    #

   J  #             S   ##          L  #
      ###              ##              #
                                       ##
--------------------------------------------------------------------------- */

/* I — four in a row */
.tetro--i {
  grid-template-columns: repeat(4, var(--tetro-size));
}
.tetro--i > i { grid-row: 1; }

/* O — 2x2 square */
.tetro--o {
  grid-template-columns: repeat(2, var(--tetro-size));
}

/* T — nub on top, three across the bottom */
.tetro--t {
  grid-template-columns: repeat(3, var(--tetro-size));
}
.tetro--t > i:nth-child(1) { grid-area: 1 / 2; }
.tetro--t > i:nth-child(2) { grid-area: 2 / 1; }
.tetro--t > i:nth-child(3) { grid-area: 2 / 2; }
.tetro--t > i:nth-child(4) { grid-area: 2 / 3; }

/* T-DOWN — three across the top, nub below */
.tetro--t-down {
  grid-template-columns: repeat(3, var(--tetro-size));
}
.tetro--t-down > i:nth-child(1) { grid-area: 1 / 1; }
.tetro--t-down > i:nth-child(2) { grid-area: 1 / 2; }
.tetro--t-down > i:nth-child(3) { grid-area: 1 / 3; }
.tetro--t-down > i:nth-child(4) { grid-area: 2 / 2; }

/* J — corner on the left, three across the bottom */
.tetro--j {
  grid-template-columns: repeat(3, var(--tetro-size));
}
.tetro--j > i:nth-child(1) { grid-area: 1 / 1; }
.tetro--j > i:nth-child(2) { grid-area: 2 / 1; }
.tetro--j > i:nth-child(3) { grid-area: 2 / 2; }
.tetro--j > i:nth-child(4) { grid-area: 2 / 3; }

/* S — offset pair */
.tetro--s {
  grid-template-columns: repeat(3, var(--tetro-size));
}
.tetro--s > i:nth-child(1) { grid-area: 1 / 2; }
.tetro--s > i:nth-child(2) { grid-area: 1 / 3; }
.tetro--s > i:nth-child(3) { grid-area: 2 / 1; }
.tetro--s > i:nth-child(4) { grid-area: 2 / 2; }

/* L — three tall with a foot */
.tetro--l {
  grid-template-columns: repeat(2, var(--tetro-size));
}
.tetro--l > i:nth-child(1) { grid-area: 1 / 1; }
.tetro--l > i:nth-child(2) { grid-area: 2 / 1; }
.tetro--l > i:nth-child(3) { grid-area: 3 / 1; }
.tetro--l > i:nth-child(4) { grid-area: 3 / 2; }

/* Brand mark: a two-tone T-DOWN. It sits in the header rather than above a
   block of text, so it keeps a tight two-row box instead of the padded three. */
.brand-mark {
  --tetro-size: 11px;
  gap: 2px;
  grid-template-rows: repeat(2, var(--tetro-size));
}
.brand-mark > i:nth-child(4) { background: var(--orange); }


/* ===========================================================================
   4. Background decoration

   The faint outlined tetrominoes scattered behind the page. Built by
   js/layout.js from the DECORATIONS table — nothing here is content.
   =========================================================================== */

.deco-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;      /* shapes near an edge stop at the viewport */
  pointer-events: none;
}

.deco {
  position: absolute;
  display: grid;
}

.deco > i {
  border: 2px solid var(--deco-line);
  background: var(--deco-fill);
}


/* ===========================================================================
   5. Site header + nav
   =========================================================================== */

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 0;
  color: inherit;
}

.brand:hover {
  color: inherit;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint-2);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
}

.nav-link {
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 0;
}

.nav-link:hover {
  color: var(--cyan);
}

/* Underline bar on the current page. */
.nav-link.is-current::after {
  content: '';
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--cyan);
}

.nav-cta {
  padding: 10px 18px;
  border-radius: 8px;
  border-bottom: 0;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
}

.nav-cta:hover {
  background: var(--blue);
  color: var(--bg);
}


/* ===========================================================================
   6. Site footer
   =========================================================================== */

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 26px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.site-footer a {
  color: var(--faint);
  border-bottom-color: rgba(123, 127, 136, .35);
}

.site-footer a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.footer-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}


/* ===========================================================================
   7. Shared page furniture
   =========================================================================== */

/* Small uppercase mono label above a page title. */
.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint-2);
}

/* Standard interior-page title + intro paragraph. */
.page-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.page-lede {
  max-width: 620px;
  margin: 0 0 48px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--body);
}

/* Buttons. These are real links, styled as blocks. */
.btn {
  display: inline-block;
  border-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-s);
}

.btn--accent {
  padding: 16px 30px;
  background: var(--cyan);
  color: #0b1113;
}

.btn--accent:hover {
  background: var(--bg);
  color: #0b1113;
}

.btn--dark {
  align-self: flex-start;
  padding: 15px 28px;
  background: var(--ink);
  color: var(--bg);
}

.btn--dark:hover {
  background: var(--blue);
  color: var(--bg);
}

/* Inline code / UI-path chip. */
.code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--line-faint);
  font-family: var(--font-mono);
  font-size: 13px;
}


/* ===========================================================================
   8. Home page
   =========================================================================== */

.hero .eyebrow {
  margin-bottom: 24px;
}

.hero-title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero-lede {
  max-width: 640px;
  margin: 0 0 44px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

/* Three linked tiles: Consult / Customize / Train. The 2px grid gap plus the
   container background is what draws the hairlines between tiles. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  margin-bottom: 72px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--line-soft);
  overflow: hidden;
}

.tile {
  display: block;
  padding: 30px 28px 34px;
  background: var(--surface);
  border-bottom: 0;
  color: inherit;
}

.tile:hover {
  background: var(--surface-hover);
  color: inherit;
}

.tile .tetro {
  margin-bottom: 20px;
}

.tile-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.02em;
}

.tile p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* Three short value propositions below the tiles. */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 56px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.value-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}

.value-grid p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Dark call-to-action band. */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 72px;
  padding: clamp(32px, 5vw, 56px);
  border-radius: 16px;
  background: var(--ink);
  color: var(--bg);
}

.cta-band > div {
  max-width: 560px;
}

.cta-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.02em;
}

.cta-band p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247, 246, 242, .72);
}


/* ===========================================================================
   9. Products page
   =========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s ease;
}

/* Each card picks up its product's accent color on hover. */
.card--green:hover  { border-color: var(--green); }
.card--purple:hover { border-color: var(--purple); }
.card--orange:hover { border-color: var(--orange); }
.card--cyan:hover   { border-color: var(--cyan); }
.card--yellow:hover { border-color: var(--yellow); }
.card--brown:hover  { border-color: var(--brown); }
.card--red:hover    { border-color: var(--red); }

.card .tetro {
  margin-bottom: 18px;
}

.card-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.02em;
}

.card-points {
  margin: 0 0 24px;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.price--free {
  color: var(--green);
}

.card-foot a {
  font-size: 14px;
  font-weight: 600;
}


/* ===========================================================================
   10. Services page
   =========================================================================== */

/* Stacked rows sharing one rounded frame, hairlines drawn by the 2px gap. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--line-soft);
  overflow: hidden;
}

.stack-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 28px;
  align-items: start;
  padding: clamp(26px, 3vw, 40px);
  background: var(--surface);
}

.stack-row .tetro {
  margin-bottom: 16px;
}

.stack-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.02em;
}

.stack-row p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body-soft);
  text-wrap: pretty;
}

.stack-row p + a {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
}


/* ===========================================================================
   11. Support page
   =========================================================================== */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 56px;
}

.doc-card {
  display: block;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s ease;
}

.doc-card:hover {
  color: var(--ink);
}

.doc-card--green:hover  { border-color: var(--green); }
.doc-card--purple:hover { border-color: var(--purple); }
.doc-card--orange:hover { border-color: var(--orange); }
.doc-card--cyan:hover   { border-color: var(--cyan); }
.doc-card--yellow:hover { border-color: var(--yellow); }
.doc-card--brown:hover  { border-color: var(--brown); }
.doc-card--red:hover    { border-color: var(--red); }

.doc-kicker {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint-2);
}

.doc-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}

.support-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.col-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
}

.support-cols p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.support-cols p:last-child {
  margin-bottom: 0;
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.link-list a {
  align-self: flex-start;
}

/* The "email us" link that closes a support column. */
.support-cols > div > a {
  font-weight: 600;
}


/* ===========================================================================
   12. About page
   =========================================================================== */

.about-title {
  margin-bottom: 48px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: start;
}

/* Diagonal hatch used by the photo and logo placeholders. */
.placeholder {
  background: repeating-linear-gradient(
    135deg,
    rgba(20, 22, 26, .05) 0 10px,
    rgba(20, 22, 26, 0) 10px 20px
  );
}

.photo-frame {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 18px;
  border: 1px solid rgba(20, 22, 26, .16);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}

.logo-label {
  margin: 24px 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint-2);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.logo-chip {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 4px;
  border: 1px solid rgba(20, 22, 26, .14);
  border-radius: 8px;
  background: repeating-linear-gradient(
    135deg,
    rgba(20, 22, 26, .04) 0 8px,
    rgba(20, 22, 26, 0) 8px 16px
  );
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: center;
  color: var(--faint);
}

.about-prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
}

.about-prose p {
  margin: 0;
}

/* "If you are about to start a new project..." panel. */
.fit-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 16px;
}

.fit-card strong {
  font-weight: 600;
}

.fit-card .fit-aside {
  color: var(--muted-2);
}


/* ===========================================================================
   13. Contact page
   =========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--line-soft);
  overflow: hidden;
}

.contact-cell {
  padding: 34px 30px;
  background: var(--surface);
}

.contact-cell .tetro {
  margin-bottom: 20px;
}

.contact-kicker {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint-2);
}

.contact-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  border-bottom-color: rgba(20, 22, 26, .2);
}

.contact-value--email {
  font-size: 19px;
  overflow-wrap: anywhere;
}

.contact-address {
  font-style: normal;   /* <address> is italic by default */
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}