/* Sticky Labels homepage (10 Oct 2026, third design). Scoped to #slh-page.
   Idea: the page is a printer's bench. The builder draws your label to scale on a cutting mat, on the roll or sheet
   it arrives on, next to a job ticket with the live price. Colours are the logo's lime and olive on white;
   headlines use a condensed face that echoes the STICKYLABELS logotype; sizes and ticket fields use a mono face.
   The legacy shell sheets put !important on p, h1-h6, button, input and span and set the root font to 8px,
   so this file uses px only, avoids <span>, and repeats !important where they fight. */
#slh-page {
  --ink: #1b211d;
  --ink-2: #48514b;
  --mute: #7b847e;
  --rule: #e2e6dd;
  --rule-2: #eef1ea;
  --paper: #ffffff;
  --lime: #a9cf34;
  --lime-2: #c6e06a;
  --lime-wash: #f3f8e3;
  --olive: #769938;
  --olive-ink: #4c6a1a;
  --mat: #eef4df;
  --liner: #e9ebe4;
  --amber: #fbf1d3;
  --amber-ink: #6b4d06;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: block;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
#slh-page * { box-sizing: border-box; -webkit-text-fill-color: currentColor; font-family: inherit; }
#slh-page img { max-width: 100%; height: auto; display: block; border: 0; }
#slh-page p { margin: 0 !important; padding: 0 !important; color: inherit; font-size: inherit; line-height: inherit; font-family: inherit !important; }
#slh-page ul, #slh-page ol, #slh-page dl, #slh-page dd, #slh-page dt, #slh-page figure, #slh-page blockquote { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#slh-page li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; }
#slh-page li::before { content: none !important; }
#slh-page a { color: var(--olive-ink) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#slh-page a:hover { color: var(--ink) !important; }
#slh-page h1, #slh-page h2, #slh-page h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--ink) !important; text-transform: none !important; background: none !important; text-align: left !important; font-family: var(--display) !important; text-wrap: balance; }
#slh-page button { font-family: var(--body) !important; cursor: pointer !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none; -webkit-appearance: none; }
#slh-page button i, #slh-page button b, #slh-page button small, #slh-page button strong { font-size: inherit; font-style: normal; }
#slh-page [hidden] { display: none !important; }
#slh-page :focus-visible { outline: 3px solid var(--lime) !important; outline-offset: 2px !important; }
#slh-page .slh-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 28px; }
#slh-page .slh-h2 { font-size: 44px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -.005em !important; }
#slh-page .slh-h3 { font-size: 22px !important; line-height: 1.05 !important; font-weight: 700 !important; }

/* ---------------- header: headline, the facts, and the rolls standing on the builder ---------------- */
#slh-page .slh-hero { padding: 52px 0 84px; position: relative; }
#slh-page .slh-top { position: relative; }
#slh-page .slh-head { display: grid; gap: 16px; max-width: calc(100% - 330px); padding-bottom: 34px !important; }
#slh-page .slh-h1 { font-size: 84px !important; line-height: .9 !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
#slh-page .slh-lede { font-size: 19px !important; line-height: 1.5 !important; color: var(--ink-2) !important; max-width: 50ch; }
#slh-page .slh-usps { display: grid !important; grid-template-columns: repeat(2, max-content); gap: 11px 34px; margin-top: 4px !important; }
#slh-page .slh-usps li { display: flex !important; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); }
#slh-page .slh-tick { width: 20px; height: 20px; flex: 0 0 auto; }
#slh-page .slh-tick circle { fill: var(--lime); }
#slh-page .slh-tick path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#slh-page .slh-head-art { position: absolute; right: 56px; bottom: 0; width: 240px; z-index: 3; pointer-events: none; }
#slh-page .slh-head-art img { width: 240px; height: auto; -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0) 100%); }
#slh-page a[href^="tel:"] { white-space: nowrap; }
#slh-page .slh-head-art::after { content: ""; position: absolute; left: 6%; right: 2%; bottom: -5px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(27, 33, 29, .22), rgba(27, 33, 29, 0)); z-index: -1; }
#slh-page .slh-sticker { position: absolute; left: -64px; top: 47%; width: 116px; height: 116px; border-radius: 50%; display: grid !important; place-content: center; text-align: center; gap: 1px; background: var(--lime); color: var(--ink); transform: rotate(-9deg); box-shadow: 0 0 0 3px #fff, 0 14px 22px -10px rgba(27, 33, 29, .45); }
#slh-page .slh-sticker small { display: block; font-size: 12px; font-weight: 600; line-height: 1.1; }
#slh-page .slh-sticker b { display: block; font: 700 36px/.95 var(--display); letter-spacing: -.01em; }

/* tabs: two folder tabs that sit on the panel */
#slh-page .slh-tabs { display: flex; gap: 6px; position: relative; z-index: 2; margin-bottom: -1px !important; }
#slh-page .slh-tab { display: grid !important; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left !important; width: auto !important; min-width: 300px; height: auto !important; padding: 14px 22px 13px 16px !important; border: 1px solid var(--rule) !important; border-bottom: 0 !important; border-radius: 14px 14px 0 0 !important; background: var(--rule-2) !important; color: var(--ink-2) !important; position: relative; }
#slh-page .slh-tab svg { grid-row: 1 / 3; width: 32px; height: 32px; color: var(--mute); }
#slh-page .slh-tab b { font-family: var(--display) !important; font-size: 25px; line-height: 1; font-weight: 700; color: inherit; }
#slh-page .slh-tab small { font-size: 13px; color: var(--mute); line-height: 1.3; margin-top: 2px; }
#slh-page .slh-tab:hover { color: var(--ink) !important; background: #e6eae1 !important; }
#slh-page .slh-tab[aria-selected="true"] { background: var(--paper) !important; color: var(--ink) !important; }
#slh-page .slh-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: 14px 14px 0 0; background: var(--lime); }
#slh-page .slh-tab[aria-selected="true"] svg { color: var(--olive); }
#slh-page .slh-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--paper); }
#slh-page .slh-panel { border: 1px solid var(--rule); border-radius: 0 18px 18px 18px; background: var(--paper); box-shadow: 0 30px 60px -36px rgba(27, 33, 29, .25); }
#slh-page .slh-panel:focus { outline: none; }

/* ---------------- builder ---------------- */
#slh-page .slh-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
#slh-page .slh-opts { padding: 18px 30px 26px; min-width: 0; }
#slh-page .slh-opts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px !important; border-bottom: 1px solid var(--rule-2); }
#slh-page .slh-opts-head p { font-size: 14px !important; color: var(--mute) !important; }
#slh-page .slh-pop { display: inline-flex !important; align-items: center; gap: 7px; height: 34px !important; width: auto !important; padding: 0 12px !important; border: 1px solid var(--rule) !important; border-radius: 8px !important; background: var(--paper) !important; color: var(--ink-2) !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap; }
#slh-page .slh-pop:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
#slh-page .slh-pop svg { width: 15px; height: 15px; }
#slh-page .slh-pop-close { display: none; }
#slh-page .slh-step { border: 0 !important; margin: 0 !important; padding: 18px 0 !important; min-width: 0; border-bottom: 1px solid var(--rule-2) !important; display: grid; gap: 11px; }
#slh-page .slh-step:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
#slh-page .slh-step legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 10px; padding: 0 !important; margin: 0 0 11px !important; border: 0 !important; font: 700 15px/1.2 var(--body) !important; color: var(--ink) !important; }
#slh-page .slh-step legend small { font: 500 12px/1 var(--mono); color: var(--mute); }
#slh-page .slh-help { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--ink-2) !important; min-height: 20px; max-width: 70ch; }
#slh-page .slh-help b { color: var(--ink); font-weight: 650; }

/* label type buttons */
#slh-page .slh-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#slh-page .slh-type, #slh-page .slh-mat { position: relative; min-width: 0; }
#slh-page .slh-pick { display: grid !important; width: 100% !important; height: 100% !important; text-align: left !important; background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important; color: var(--ink) !important; transition: border-color .15s, background-color .15s; }
#slh-page .slh-pick:hover { border-color: #b8c3ab !important; }
#slh-page .slh-pick[aria-pressed="true"] { border-color: var(--ink) !important; background: var(--lime-wash) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
#slh-page .slh-type .slh-pick { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 10px 34px 10px 10px !important; min-height: 66px; }
#slh-page .slh-fmt { grid-row: 1 / 3; width: 40px; height: 40px; }
#slh-page .slh-fmt-liner { fill: var(--liner); stroke: #c7ccc2; stroke-width: 1.2; }
#slh-page .slh-fmt-label { fill: #fff; stroke: var(--ink-2); stroke-width: 1.3; }
#slh-page .slh-fmt-roll { fill: #fff; stroke: var(--ink-2); stroke-width: 1.3; }
#slh-page .slh-fmt-core { fill: var(--liner); stroke: var(--ink-2); stroke-width: 1.2; }
#slh-page .slh-fmt-line { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linecap: round; }
#slh-page .slh-pick[aria-pressed="true"] .slh-fmt-label, #slh-page .slh-pick[aria-pressed="true"] .slh-fmt-roll { fill: var(--lime-2); }
#slh-page .slh-type strong { font-size: 14.5px; font-weight: 700; line-height: 1.2; align-self: end; }
#slh-page .slh-type small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; align-self: start; margin-top: 2px; }
#slh-page .slh-ink { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #111; flex: 0 0 auto; }
#slh-page .slh-ink-cmyk { width: 30px; height: 9px; border-radius: 5px; background: radial-gradient(circle at 4.5px 4.5px, #00a3e0 4px, transparent 4.5px), radial-gradient(circle at 11.5px 4.5px, #e6007e 4px, transparent 4.5px), radial-gradient(circle at 18.5px 4.5px, #ffe100 4px, transparent 4.5px), radial-gradient(circle at 25.5px 4.5px, #111 4px, transparent 4.5px); }
#slh-page .slh-i { position: absolute !important; top: 7px; right: 7px; width: 21px !important; height: 21px !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid #ccd3c6 !important; background: var(--paper) !important; color: var(--ink-2) !important; font: italic 600 12px/19px Georgia, serif !important; text-align: center !important; z-index: 2; }
#slh-page .slh-i:hover, #slh-page .slh-i[aria-expanded="true"] { border-color: var(--ink) !important; color: var(--ink) !important; }

/* chips */
#slh-page .slh-chips { display: flex; flex-wrap: wrap; gap: 7px; }
#slh-page .slh-chip { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: 38px !important; padding: 0 13px !important; background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 9px !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap; position: relative; transition: border-color .15s, background-color .15s, color .15s; }
#slh-page .slh-chips-mono .slh-chip { font-family: var(--mono) !important; font-size: 13.5px !important; font-weight: 500 !important; }
#slh-page .slh-chip:hover { border-color: #b8c3ab !important; }
#slh-page .slh-chip[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
#slh-page .slh-chip.is-pop::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
#slh-page .slh-chip-more { color: var(--olive-ink) !important; border-style: dashed !important; font-family: var(--body) !important; }
#slh-page .slh-chips-mono .slh-chip-mono-off { font-family: var(--body) !important; font-size: 13.5px !important; font-weight: 600 !important; }
#slh-page .slh-glyph { display: block; flex: 0 0 auto; border: 1.8px solid currentColor; }
#slh-page .slh-glyph-rectangle { width: 21px; height: 13px; border-radius: 3px; }
#slh-page .slh-glyph-square { width: 15px; height: 15px; border-radius: 3px; }
#slh-page .slh-glyph-circular { width: 16px; height: 16px; border-radius: 50%; }
#slh-page .slh-glyph-oval { width: 22px; height: 14px; border-radius: 50%; }
#slh-page .slh-glyph-custom { width: 17px; height: 17px; border-radius: 60% 40% 45% 20%; border-style: dashed; }
#slh-page .slh-pop-dot { font: 500 11.5px/1 var(--mono); color: var(--mute); display: inline-flex; align-items: center; gap: 5px; }
#slh-page .slh-pop-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

#slh-page .slh-custom { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 14px; background: var(--lime-wash); border: 1px solid #dbe7b9; border-radius: 12px; }
#slh-page .slh-custom label, #slh-page .slh-qty-own { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 0 !important; }
#slh-page .slh-custom > b { color: var(--mute); font-weight: 400; }
#slh-page .slh-custom small { font: 500 12px/1 var(--mono); color: var(--mute); }
#slh-page input.slh-num-in { width: 84px !important; height: 38px !important; padding: 0 10px !important; border: 1px solid #c9d1c2 !important; border-radius: 9px !important; background: var(--paper) !important; color: var(--ink) !important; font: 500 15px/38px var(--mono) !important; box-shadow: none !important; margin: 0 !important; -moz-appearance: textfield; }
#slh-page input.slh-num-in:focus { border-color: var(--ink) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(169, 207, 52, .45) !important; }
#slh-page input.slh-num-in.is-bad { border-color: #c0392b !important; }
#slh-page .slh-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#slh-page .slh-qty-row .slh-chips { flex: 0 1 auto; }

/* material buttons */
#slh-page .slh-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 7px; }
#slh-page .slh-mat .slh-pick { grid-template-columns: 26px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 32px 8px 9px !important; min-height: 50px; }
#slh-page .slh-mat .slh-pick > b { display: grid; gap: 1px; font-weight: 400; min-width: 0; }
#slh-page .slh-mat strong { font-size: 13.5px; font-weight: 650; line-height: 1.2; }
#slh-page .slh-mat small { font: 500 11px/1.2 var(--mono); color: var(--olive-ink); }
#slh-page .slh-mat .slh-sw { width: 26px; height: 26px; border-radius: 50%; }

/* swatches (shared by the builder, the sample book and the drawing's colours) */
#slh-page .slh-sw { display: block; flex: 0 0 auto; border: 1px solid rgba(27, 33, 29, .16); background: #fbfbf8; position: relative; overflow: hidden; }
#slh-page .slh-sw::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(255,255,255,0) 30%, rgba(255,255,255,var(--gloss, 0)) 48%, rgba(255,255,255,0) 62%); }
#slh-page .slh-sw-MattWhitePaper, #slh-page .slh-sw-PeelableWhitePaper { background: #fafaf6; }
#slh-page .slh-sw-GlossWhitePaper, #slh-page .slh-sw-WhitePaper { background: linear-gradient(160deg, #ffffff, #eef0ee); --gloss: .9; }
#slh-page .slh-sw-BiodegradableWhitePaper { background: radial-gradient(circle at 30% 40%, rgba(140,120,80,.22) .8px, transparent 1.2px) 0 0/6px 6px, radial-gradient(circle at 70% 70%, rgba(140,120,80,.16) .7px, transparent 1.1px) 0 0/7px 7px, #f6f4ec; }
#slh-page .slh-sw-WhitePaperWithAGlossLaminate, #slh-page .slh-sw-GlossWhiteVinyl, #slh-page .slh-sw-GlossWhiteWaterproof, #slh-page .slh-sw-ExtraThickExtraStickyGlossWhiteVinyl { background: linear-gradient(160deg, #ffffff, #e9ecea); --gloss: 1; }
#slh-page .slh-sw-ExtraThickExtraStickyGlossWhiteVinyl { box-shadow: inset 0 -3px 0 rgba(27,33,29,.12); }
#slh-page .slh-sw-WhitePaperWithAMattLaminate, #slh-page .slh-sw-MattWhiteVinyl { background: linear-gradient(160deg, #fbfbf9, #f0f2ef); --gloss: .25; }
#slh-page .slh-sw-GlossClearVinyl, #slh-page .slh-sw-ClearVinyl { background: conic-gradient(#e7eae4 25%, #fff 0 50%, #e7eae4 0 75%, #fff 0) 0 0/10px 10px; --gloss: .9; }
#slh-page .slh-sw-GoldPaper { background: linear-gradient(120deg, #b6872b, #f2dc8f 45%, #a87822); }
#slh-page .slh-sw-SilverPaper, #slh-page .slh-sw-ApplianceSilverVinyl { background: linear-gradient(120deg, #9ea6ae, #eef1f4 45%, #8f979f); }
#slh-page .slh-sw-VoidSilverVinyl { background: repeating-linear-gradient(-35deg, rgba(255,255,255,.35) 0 3px, transparent 3px 7px), linear-gradient(120deg, #a1a8b0, #e2e6ea 45%, #939aa2); }
#slh-page .slh-sw-RadiantRedPaper { background: #ff4b2b; }
#slh-page .slh-sw-RadiantYellowPaper { background: #e9ff3d; }
#slh-page .slh-sw-TamperEvidentWhiteVinyl { background: repeating-linear-gradient(45deg, #fff 0 4px, #f1f2ef 4px 6px); }
#slh-page .slh-sw-YellowVinylWaterproof { background: linear-gradient(160deg, #ffd51a, #f2bf00); --gloss: .8; }

/* side: drawing + job ticket */
#slh-page .slh-side { display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 16px 0; position: sticky; top: 12px; align-self: start; }
#slh-page .slh-proof { display: flex; flex-direction: column; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--mat); border: 1px solid #dfe8c6; border-bottom: 0; }
#slh-page .slh-proof-art { position: relative; aspect-ratio: 16 / 10; }
#slh-page .slh-proof svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#slh-page .slh-proof figcaption { padding: 8px 12px 9px; font: 500 11.5px/1.35 var(--mono); color: var(--ink-2); background: #e4edcb; }
#slh-page .slh-ticket { position: relative; padding: 20px 20px 18px; background: var(--paper); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 12px 12px; display: grid; gap: 12px; }
#slh-page .slh-ticket::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; border-top: 2px dashed #d3d9cc; }
#slh-page .slh-ticket-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
#slh-page .slh-ticket-list div { display: grid; gap: 1px; min-width: 0; }
#slh-page .slh-ticket-list dt { font: 500 11.5px/1.2 var(--mono); color: var(--mute); }
#slh-page .slh-ticket-list dd { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
#slh-page .slh-ticket-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
#slh-page .slh-ticket-list { padding-top: 12px !important; border-top: 1px solid var(--rule-2) !important; }
#slh-page .slh-price { font: 800 60px/.9 var(--display) !important; letter-spacing: -.01em; color: var(--ink) !important; font-variant-numeric: tabular-nums; transition: opacity .2s; }
#slh-page .slh-ticket.is-busy .slh-price { opacity: .35; }
#slh-page .slh-per { display: grid; justify-items: end; gap: 2px; text-align: right; }
#slh-page .slh-per b { font: 600 14px/1.2 var(--mono); color: var(--ink); }
#slh-page .slh-per small { font-size: 12px; color: var(--mute); }
#slh-page .slh-del-wrap { display: grid; gap: 6px; }
#slh-page .slh-del { font-size: 13px !important; font-weight: 600 !important; color: var(--ink-2) !important; }
#slh-page .slh-del.is-free { color: var(--olive-ink) !important; }
#slh-page .slh-del-bar { display: block; height: 6px; border-radius: 3px; background: var(--rule-2); overflow: hidden; }
#slh-page .slh-del-bar b { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--lime); transition: width .35s ease; }
#slh-page .slh-tiers { display: grid; gap: 6px; }
#slh-page .slh-tiers-title { font-size: 12.5px !important; font-weight: 700 !important; color: var(--ink-2) !important; }
#slh-page .slh-tier-list { display: grid; gap: 4px; }
#slh-page .slh-tier { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100% !important; height: auto !important; padding: 7px 10px !important; border: 1px solid var(--rule-2) !important; border-radius: 8px !important; background: #f8faf5 !important; color: var(--ink) !important; font: 500 13px/1.2 var(--mono) !important; text-align: left !important; }
#slh-page .slh-tier:hover { border-color: var(--ink) !important; background: var(--paper) !important; }
#slh-page .slh-tier strong { font-weight: 600; }
#slh-page .slh-tier small { color: var(--ink-2); font-size: 12.5px; }
#slh-page .slh-tier em { font: 700 12px/1 var(--body); font-style: normal; color: var(--olive-ink); background: var(--lime-wash); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
#slh-page .slh-goal { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--amber-ink); background: var(--amber); border-radius: 8px; padding: 7px 10px; }
#slh-page .slh-goal b { font-weight: 600; }
#slh-page .slh-goal button { flex: 0 0 auto; height: 28px !important; width: auto !important; padding: 0 10px !important; border: 0 !important; border-radius: 7px !important; background: var(--ink) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; }
#slh-page .slh-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
#slh-page .slh-cta { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: 52px !important; padding: 0 16px !important; border: 0 !important; border-radius: 11px !important; background: var(--lime) !important; color: var(--ink) !important; font-size: 16px !important; font-weight: 750 !important; transition: background-color .15s; }
#slh-page .slh-cta:hover:not(:disabled) { background: var(--lime-2) !important; }
#slh-page .slh-cta svg { width: 18px; height: 18px; }
#slh-page .slh-cta2 { display: inline-flex !important; align-items: center; justify-content: center; width: 100% !important; height: 52px !important; padding: 0 14px !important; border: 1px solid var(--ink) !important; border-radius: 11px !important; background: var(--paper) !important; color: var(--ink) !important; font-size: 15px !important; font-weight: 650 !important; }
#slh-page .slh-cta2:hover:not(:disabled) { background: var(--ink) !important; color: #fff !important; }
#slh-page .slh-cta:disabled, #slh-page .slh-cta2:disabled { opacity: .4 !important; cursor: wait !important; }
#slh-page .slh-fine { font-size: 12.5px !important; line-height: 1.45 !important; color: var(--mute) !important; }

#slh-page .slh-up { display: grid; gap: 10px; padding: 14px !important; background: #f8faf5; border: 1px solid var(--rule); border-radius: 12px; }
#slh-page .slh-up-head { display: flex; align-items: center; justify-content: space-between; }
#slh-page .slh-up-head p { font-weight: 700; font-size: 15px; }
#slh-page .slh-up-x { width: 30px !important; height: 30px !important; padding: 0 !important; border: 1px solid var(--rule) !important; border-radius: 50% !important; background: var(--paper) !important; color: var(--ink-2) !important; font-size: 18px !important; line-height: 1 !important; }
#slh-page .slh-up-req { font-size: 12.5px !important; color: var(--ink-2) !important; }
#slh-page .slh-up-note { font-size: 13px !important; font-weight: 600 !important; color: var(--amber-ink) !important; background: var(--amber); border-radius: 8px; padding: 8px 10px !important; }
#slh-page .slh-drop { width: 100% !important; height: auto !important; min-height: 80px; padding: 16px !important; border: 2px dashed #c9d2c4 !important; border-radius: 12px !important; background: var(--paper) !important; color: var(--ink-2) !important; font-size: 14px !important; font-weight: 600 !important; }
#slh-page .slh-drop.is-over, #slh-page .slh-drop:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
#slh-page .slh-up-ok { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
#slh-page .slh-up-ok img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rule); }
#slh-page .slh-up-err { font-size: 13px !important; color: #b42318 !important; background: #fef3f2; border-radius: 8px; padding: 8px 10px !important; }

/* tooltip (appended to body, outside #slh-page) */
.slh-tip { position: fixed; z-index: 1000002; max-width: 300px; padding: 10px 12px; border-radius: 10px; background: #1b211d; color: #fff; -webkit-text-fill-color: #fff; font: 500 13px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); pointer-events: none; }
.slh-tip[hidden] { display: none !important; }

/* full screen */
body.slh-locked { overflow: hidden !important; }
#slh-page .slh-builder.is-full { position: fixed; inset: 0; z-index: 1000001; background: var(--paper); overflow: auto; overscroll-behavior: contain; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
#slh-page .slh-builder.is-full .slh-opts { padding: 22px 40px 40px max(32px, calc((100vw - 1400px) / 2)); }
#slh-page .slh-builder.is-full .slh-side { top: 0; padding: 20px 24px 20px 0; }
#slh-page .slh-builder.is-full .slh-pop-open { display: none; }
#slh-page .slh-builder.is-full .slh-pop-close { display: inline; }

/* mobile price bar */
#slh-page .slh-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: #fff; }
#slh-page .slh-mbar p { display: grid; line-height: 1.15 !important; }
#slh-page .slh-mbar strong { font: 800 28px/1 var(--display); }
#slh-page .slh-mbar small { font: 500 11.5px/1.3 var(--mono); color: #c9d1c6; }
#slh-page .slh-mbar button { height: 42px !important; width: auto !important; padding: 0 16px !important; border: 0 !important; border-radius: 10px !important; background: var(--lime) !important; color: var(--ink) !important; font-size: 15px !important; font-weight: 750 !important; }

/* ---------------- tab 2: labels by use ---------------- */
#slh-page .slh-panel-use { padding: 22px; }
#slh-page .slh-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#slh-page .slh-use { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none !important; color: var(--ink) !important; background: var(--mat); aspect-ratio: 4 / 3; }
#slh-page .slh-use img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
#slh-page .slh-use:hover img { transform: scale(1.04); }
#slh-page .slh-use-tag { position: absolute; left: 10px; bottom: 10px; right: 10px; display: grid; gap: 1px; padding: 9px 12px 10px; background: var(--paper); border-radius: 10px; box-shadow: 0 4px 12px rgba(27, 33, 29, .14); font-weight: 400; max-width: max-content; }
#slh-page .slh-use-tag strong { font: 700 21px/1 var(--display); color: var(--ink); }
#slh-page .slh-use-tag small { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
#slh-page .slh-use:hover .slh-use-tag { background: var(--lime); }
#slh-page .slh-use-all { margin-top: 16px !important; font-weight: 600; font-size: 15px; }

/* ---------------- help with the order (design online, artwork, proofs, priority) ---------------- */
#slh-page .slh-services-sec { padding: 0 0 92px; }
#slh-page .slh-sec-head { display: grid; gap: 12px; margin-bottom: 28px !important; max-width: 760px; }
#slh-page .slh-sec-head > p { font-size: 17px !important; line-height: 1.55 !important; color: var(--ink-2) !important; max-width: 62ch; }
#slh-page .slh-services { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#slh-page .slh-svc { display: grid !important; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; align-items: center; min-height: 262px; padding: 28px 24px 28px 32px !important; border-radius: 20px; }
#slh-page .slh-svc-design { background: #edf5d6 !important; }
#slh-page .slh-svc-file { background: #fdf0c6 !important; }
#slh-page .slh-svc-proof { background: #e2eef6 !important; }
#slh-page .slh-svc-fast { background: #fde6d8 !important; }
#slh-page .slh-svc-copy { display: grid; gap: 10px; align-content: center; min-width: 0; }
#slh-page .slh-svc .slh-h3 { font-size: 31px !important; line-height: 1 !important; }
#slh-page .slh-svc-copy > p { font-size: 15px !important; line-height: 1.55 !important; color: var(--ink-2) !important; }
#slh-page .slh-svc-copy p a { color: var(--ink) !important; }
#slh-page a.slh-svc-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 6px !important; padding-bottom: 2px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink) !important; text-decoration: none !important; border-bottom: 2px solid currentColor; }
#slh-page .slh-arrow { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
#slh-page a:hover .slh-arrow { transform: translateX(3px); }
#slh-page .slh-svc-art { display: block; width: 100%; height: auto; }

/* ---------------- the family firm + reviews ---------------- */
#slh-page .slh-family { padding: 88px 0; background: #f4f6f1; }
#slh-page .slh-family-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
#slh-page .slh-family-copy { display: grid; gap: 18px; }
#slh-page .slh-family-copy > p { font-size: 16.5px !important; line-height: 1.6 !important; color: var(--ink-2) !important; max-width: 52ch; }
#slh-page .slh-contact { display: grid !important; border-top: 1px solid var(--rule); }
#slh-page .slh-contact div { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 0 !important; border-bottom: 1px solid var(--rule); }
#slh-page .slh-contact dt { font-size: 13.5px; font-weight: 600; color: var(--mute); }
#slh-page .slh-contact dd { font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
#slh-page .slh-contact dd a { color: var(--ink) !important; text-decoration: none !important; }
#slh-page .slh-contact div:first-child dd { font-size: 24px; font-weight: 700; letter-spacing: -.005em; }
#slh-page .slh-rev { display: grid; gap: 20px; min-width: 0; }
#slh-page .slh-rev-scores { display: flex !important; flex-wrap: wrap; gap: 10px 32px; }
#slh-page .slh-rev-scores a { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2) !important; text-decoration: none !important; }
#slh-page .slh-rev-scores a:hover { color: var(--ink) !important; }
#slh-page .slh-rev-scores strong { color: var(--ink); font-weight: 700; }
#slh-page .slh-stars { display: block; width: 85px; height: 17px; flex: 0 0 auto; fill: #f1ac1b; }
#slh-page .slh-quotes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#slh-page .slh-quotes li { display: grid !important; }
#slh-page .slh-quotes blockquote { display: grid; gap: 12px; align-content: start; padding: 22px 22px 20px !important; background: #fff !important; border: 0 !important; border-radius: 16px; box-shadow: 0 1px 2px rgba(27, 33, 29, .06); quotes: none; }
#slh-page .slh-quotes .slh-stars { width: 80px; height: 16px; }
#slh-page .slh-quotes p { font-size: 15.5px !important; line-height: 1.55 !important; color: var(--ink) !important; font-style: normal !important; }
#slh-page .slh-quotes footer { font-size: 14px; font-weight: 700; color: var(--ink-2); background: none !important; padding: 0 !important; }

/* ---------------- FAQ ---------------- */
#slh-page .slh-faq { padding: 88px 0 100px; }
#slh-page .slh-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
#slh-page .slh-faq-grid > div:first-child { display: grid; gap: 14px; position: sticky; top: 20px; }
#slh-page .slh-faq-side { font-size: 15.5px !important; color: var(--ink-2) !important; }
#slh-page .slh-faq-list { border-top: 1px solid var(--rule); }
#slh-page .slh-faq-list details { border-bottom: 1px solid var(--rule); }
#slh-page .slh-faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 2px; font-size: 17px; font-weight: 650; color: var(--ink); }
#slh-page .slh-faq-list summary::-webkit-details-marker { display: none; }
#slh-page .slh-faq-list summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
#slh-page .slh-faq-list details[open] summary::after { transform: translateY(3px) rotate(225deg); }
#slh-page .slh-faq-a { padding: 0 2px 22px; max-width: 70ch; }
#slh-page .slh-faq-a p { font-size: 15.5px !important; line-height: 1.65 !important; color: var(--ink-2) !important; }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  #slh-page .slh-h1 { font-size: 74px !important; }
  #slh-page .slh-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #slh-page .slh-svc { grid-template-columns: minmax(0, 1fr) 160px; padding: 24px !important; }
  #slh-page .slh-family-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1000px) {
  #slh-page .slh-head { max-width: calc(100% - 200px); }
  #slh-page .slh-h1 { font-size: 64px !important; }
  #slh-page .slh-usps { grid-template-columns: 1fr; gap: 9px; }
  #slh-page .slh-head-art { right: 4px; top: 0; bottom: auto; width: 150px; }
  #slh-page .slh-head-art img { width: 150px; }
  #slh-page .slh-head-art::after { display: none; }
  #slh-page .slh-sticker { width: 90px; height: 90px; left: -26px; top: 58%; }
  #slh-page .slh-sticker b { font-size: 28px; }
  #slh-page .slh-sticker small { font-size: 10px; }
  #slh-page .slh-builder, #slh-page .slh-builder.is-full { display: flex; flex-direction: column; }
  #slh-page .slh-side, #slh-page .slh-builder.is-full .slh-side { display: contents; }
  #slh-page .slh-proof { order: 1; margin: 14px 14px 0 !important; border-radius: 12px 12px 0 0; }
  #slh-page .slh-ticket { order: 2; margin: 0 14px 4px !important; border-radius: 0 0 12px 12px; }
  #slh-page .slh-opts { order: 3; }
  #slh-page .slh-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #slh-page .slh-services { grid-template-columns: 1fr; }
  #slh-page .slh-faq-grid { grid-template-columns: 1fr; gap: 20px; }
  #slh-page .slh-faq-grid > div:first-child { position: static; }
}
@media (max-width: 720px) {
  #slh-page .slh-wrap { padding: 0 16px; }
  #slh-page .slh-hero { padding: 24px 0 56px; }
  #slh-page .slh-head { max-width: none; gap: 12px; padding-bottom: 22px !important; }
  #slh-page .slh-h1 { font-size: 46px !important; max-width: calc(100% - 92px); }
  #slh-page .slh-head-art { right: 0; top: -4px; width: 84px; }
  #slh-page .slh-head-art img { display: none; }
  #slh-page .slh-sticker { position: relative; left: auto; top: auto; width: 84px; height: 84px; transform: rotate(-8deg); }
  #slh-page .slh-sticker b { font-size: 25px; }
  #slh-page .slh-sticker small { font-size: 9.5px; }
  #slh-page .slh-lede { font-size: 16.5px !important; }
  #slh-page .slh-usps { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
  #slh-page .slh-usps li { align-items: flex-start; font-size: 13.5px; }
  #slh-page .slh-tick { width: 18px; height: 18px; }
  #slh-page .slh-h2 { font-size: 34px !important; }
  #slh-page .slh-tabs { gap: 4px; }
  #slh-page .slh-tab { min-width: 0; flex: 1 1 0; grid-template-columns: 1fr; padding: 12px 12px 11px !important; }
  #slh-page .slh-tab svg { display: none; }
  #slh-page .slh-tab b { font-size: 21px; }
  #slh-page .slh-tab small { font-size: 12px; }
  #slh-page .slh-panel { border-radius: 0 0 16px 16px; }
  #slh-page .slh-opts { padding: 12px 16px 18px; }
  #slh-page .slh-opts-head p { display: none; }
  #slh-page .slh-opts-head { justify-content: flex-end; padding-bottom: 6px !important; }
  #slh-page .slh-types { grid-template-columns: 1fr; gap: 6px; }
  #slh-page .slh-type .slh-pick { min-height: 58px; }
  #slh-page .slh-mats { grid-template-columns: 1fr 1fr; }
  #slh-page .slh-ticket { padding: 16px; }
  #slh-page .slh-price { font-size: 52px !important; }
  #slh-page .slh-actions { grid-template-columns: 1fr; }
  #slh-page .slh-panel-use { padding: 14px; }
  #slh-page .slh-uses { grid-template-columns: 1fr 1fr; gap: 10px; }
  #slh-page .slh-use-tag { left: 6px; right: 6px; bottom: 6px; padding: 7px 9px 8px; }
  #slh-page .slh-use-tag strong { font-size: 17px; }
  #slh-page .slh-use-tag small { display: none; }
  #slh-page .slh-services-sec { padding-bottom: 60px; }
  #slh-page .slh-sec-head > p { font-size: 16px !important; }
  #slh-page .slh-svc { grid-template-columns: minmax(0, 1fr) 96px; align-items: start; gap: 12px; min-height: 0; padding: 20px 18px !important; border-radius: 16px; }
  #slh-page .slh-svc-copy { display: contents; }
  #slh-page .slh-svc .slh-h3 { grid-column: 1; grid-row: 1; align-self: center; font-size: 26px !important; }
  #slh-page .slh-svc-art { grid-column: 2; grid-row: 1; }
  #slh-page .slh-svc-copy > p, #slh-page a.slh-svc-go { grid-column: 1 / -1; }
  #slh-page .slh-family { padding: 56px 0; }
  #slh-page .slh-quotes { grid-template-columns: 1fr; gap: 10px; }
  #slh-page .slh-rev-scores { display: grid !important; gap: 8px; }
  #slh-page .slh-faq { padding: 56px 0 64px; }
}
@media (max-width: 380px) {
  #slh-page .slh-mats { grid-template-columns: 1fr; }
  #slh-page .slh-pop b { display: none; }
  #slh-page .slh-h1 { font-size: 42px !important; }
  #slh-page .slh-usps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #slh-page *, #slh-page *::before, #slh-page *::after { transition: none !important; animation: none !important; }
}