/* The S3 server-rendered shell, shared by all three tool pages.
 *
 * It lived in gs-v28/v28-skin.css, which only the gang builder loads. The DTF
 * page uses site-v28 and merch uses merch3d-v28, so the same markup would have
 * rendered unstyled on two of the three pages - and keeping three copies of one
 * block is how /pricing/ drifted. One file, enqueued by the plugin.
 */
/* ── S3 · the server-rendered shell ───────────────────────────────────────
   Sits below the app. It must not compete with the builder for attention, and
   it must not affect the canvas: the 3D/Fabric stages size themselves from
   their own elements, and this section is outside them.
   #151310 on #efe9db is 15.32:1; the muted note is 6.26:1. Both AA. */
.gs-seo-shell { background: #efe9db; border-top: 2.5px solid #151310; padding: 44px 20px; }
/* v28 ALIGNMENT, 2026-09-11. The shell was 760px inside a 1240px site, so it
   read as a narrow document column dropped into a wide page — the single
   loudest "this isn't the same site" cue. It now uses the site's .wrap measure.
   Long-form copy still gets a reading measure of its own (below): widening the
   SHELL is right, widening a paragraph to 1240px is not. */
.gs-seo-shell__inner { max-width: 1240px; margin: 0 auto; }
.gs-seo-shell h2 {
  font-family: var(--f-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(26px, 3.5vw, 40px); color: #151310; margin: 0 0 14px;
  text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance;
}
/* The .tag idiom: a CMYK rule under the section head. This block had ZERO brand
   accent anywhere in it — measured cyan 0 / magenta 0 / yellow 0 — while every
   sibling section uses them. */
.gs-seo-shell__inner > h2 + .gs-seo-shell__lead { margin-top: 18px; }
.gs-seo-shell h2::after {
  content: ""; display: block; width: 132px; height: 6px; margin: 14px 0 0;
  background: linear-gradient(to right,
    var(--cyan, #00a7e1) 0 33.34%, var(--mag, #ec1e79) 33.34% 66.67%, var(--yel, #ffd400) 66.67% 100%);
}
/* Reading measure — the shell is wide now, the prose is not. */
.gs-seo-shell__lead { color: #5b5346; line-height: 1.65; margin: 0 0 22px; max-width: 68ch; font-size: 16.5px; }
.gs-seo-shell__note { color: #5b5346; font-size: 13.5px; line-height: 1.6; margin: 14px 0 0; max-width: 80ch; }

/* The no-JS message is the ONLY thing a visitor without JavaScript can act on,
   so it is loud rather than quiet — and it offers a route to ordering instead of
   just apologising. */
.gs-noscript { background: #ffd400; border-top: 2.5px solid #151310; border-bottom: 2.5px solid #151310; padding: 26px 20px; color: #151310; }
.gs-noscript h2 { font-family: var(--f-display, 'Syne', sans-serif); font-weight: 800; font-size: 20px; margin: 0 0 8px; }
.gs-noscript p { max-width: 70ch; margin: 0 auto 8px; line-height: 1.6; }
.gs-noscript > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.gs-noscript a { color: #151310; text-decoration: underline; }

/* The price table moved here from site-v28/css/pages.css on 2026-08-28.
 * That stylesheet is NOT loaded on the builder routes, so the table inside
 * the S3 shell rendered as raw unstyled HTML on /gang-sheet-builder/ — which
 * I shipped because I verified the shell by COUNTING ROWS instead of looking
 * at it. This file is enqueued on every front-end page, so the component and
 * its styles now travel together. */
/* ─── Component · [ifd_price_table] ───────────────────────────────────────
   MATCHED TO THE SITE, 2026-09-01. The first version used 1px hairlines, no
   outer border, no stripes and body-font sentence-case names — a documentation
   table dropped into a brutalist page. v28's own .ptable/.prow is the reference:
   a 2.5px ink box, 2px ink row rules, alternating --paper-2, names in Syne
   uppercase and dimensions in mono.

   It stays a real <table> with row headers, which .prow (a stack of divs) is
   not — a screen reader announces "Armful, 60 × 60 cm — $14" instead of three
   loose cells. Same look, better semantics. */
/* The shadow lives on the WRAP, not the table: the wrap is the scroll container,
   so a shadow on the table would be clipped by its own overflow at narrow
   widths. The wrap is the visible frame either way. */
/* Capped, unlike the section around it. A two-column price list stretched to
   the full 1240px leaves ~650px of dead space between a size and its price, and
   the eye loses the row on the way across. The SECTION matches the site; the
   TABLE keeps a scannable measure. */
.ifd-ptable-wrap { overflow-x: auto; max-width: 940px; box-shadow: 6px 6px 0 var(--ink, #151310); margin-bottom: 6px; }
.ifd-ptable { width: 100%; border-collapse: collapse; border: 2.5px solid var(--ink, #151310); }
.ifd-ptable thead th {
  font-family: var(--f-mono, 'Space Mono', monospace); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper, #efe9db); text-align: left;
  padding: 12px 22px; border-bottom: 2.5px solid var(--ink, #151310); background: var(--ink, #151310);
}
.ifd-ptable tbody tr { border-bottom: 2px solid var(--ink, #151310); }
.ifd-ptable tbody tr:last-child { border-bottom: 0; }
.ifd-ptable tbody tr:nth-child(odd) { background: var(--paper-2, #e6dfcd); }
.ifd-ptable tbody th, .ifd-ptable tbody td { padding: 16px 22px; text-align: left; vertical-align: baseline; }
.ifd-ptable__name {
  font-family: var(--f-display, 'Syne', sans-serif); font-weight: 700; text-transform: uppercase;
  font-size: 17px; letter-spacing: -.01em; color: var(--ink, #151310);
}
.ifd-ptable tbody th small {
  display: block; font-family: var(--f-mono, 'Space Mono', monospace); font-size: 11px; font-weight: 400;
  letter-spacing: .06em; color: #4a443a; text-transform: none; margin-top: 2px;
}
.ifd-ptable__price {
  font-family: var(--f-display, 'Syne', sans-serif); font-weight: 800; font-size: 24px;
  white-space: nowrap; color: var(--mag-ground, #c91a67);
}
.ifd-ptable__per {
  font-family: var(--f-mono, 'Space Mono', monospace); font-size: 12px; color: #4a443a; white-space: nowrap;
}
.ifd-ptable__prov { font-family: var(--f-mono, 'Space Mono', monospace); font-size: 12px; color: #4a443a; margin: 14px 0 0; line-height: 1.55; }
.ifd-ptable__err { border-left: 3px solid var(--mag, #ec1e79); padding-left: 12px; color: var(--ink, #151310); }

/* ─── Component · tool facts ──────────────────────────────────────────────
   Same correction. Headings are the site's mono-uppercase label over a 2.5px
   ink rule — the .tag idiom — not a thin grey underline. */
/* v28 ALIGNMENT, 2026-09-11. These were four bare text columns sitting in a
   page built entirely from bordered, shadowed cards — on-palette but carrying
   none of the site's construction. They now use the SAME idiom as .stepsrow .s
   (2.5px ink box, paper ground, 6px offset shadow) with the .chip's accent
   cycle expressed as a bar over each label, since these blocks have no number
   to put in a chip. 40px column gap leaves room for the 6px shadow. */
.ifd-toolfacts { display: grid; gap: 34px 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 40px 0 0; }
.ifd-toolfacts__block {
  border: 2.5px solid var(--ink, #151310); background: var(--paper, #efe9db);
  padding: 22px 22px 24px; box-shadow: 6px 6px 0 var(--ink, #151310);
}
.ifd-toolfacts__block h3 {
  font-family: var(--f-mono, 'Space Mono', monospace); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink, #151310); margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2.5px solid var(--ink, #151310);
}
.ifd-toolfacts__block h3::before {
  content: ""; display: block; width: 46px; height: 12px; margin: 0 0 12px;
  border: 2.5px solid var(--ink, #151310);
}
.ifd-toolfacts__block:nth-child(1) h3::before { background: var(--cyan, #00a7e1); }
.ifd-toolfacts__block:nth-child(2) h3::before { background: var(--mag-ground, #c91a67); }
.ifd-toolfacts__block:nth-child(3) h3::before { background: var(--yel, #ffd400); }
.ifd-toolfacts__block:nth-child(4) h3::before { background: var(--ink, #151310); }
/* auto-fit alone drops to 3-across in the mid range and strands the 4th card
   alone on its own row. There are always four blocks, so 2x2 is the honest
   intermediate step. */
@media (min-width: 660px) and (max-width: 1119px) {
  .ifd-toolfacts { grid-template-columns: repeat(2, 1fr); }
}
.ifd-toolfacts__steps { margin: 0; padding-left: 1.1em; color: #4a443a; font-size: 14px; line-height: 1.6; }
.ifd-toolfacts__steps li { margin-bottom: 7px; }
.ifd-toolfacts__specs { margin: 0; font-size: 14px; line-height: 1.6; }
.ifd-toolfacts__specs dt {
  font-family: var(--f-display, 'Syne', sans-serif); font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .02em; color: var(--ink, #151310); margin-top: 12px;
}
.ifd-toolfacts__specs dt:first-child { margin-top: 0; }
.ifd-toolfacts__specs dd { margin: 0; color: #4a443a; font-family: var(--f-mono, 'Space Mono', monospace); font-size: 12.5px; }
.ifd-toolfacts__qs { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.65; }
.ifd-toolfacts__qs li { margin-bottom: 7px; }
.ifd-toolfacts__qs a, .ifd-toolfacts__more a { color: var(--ink, #151310); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ifd-toolfacts__more { margin: 14px 0 0; font-family: var(--f-mono, 'Space Mono', monospace); font-size: 12px; }