/* GENERATED by store/tools/build_css.py from landing/summitsoft.css — edit the landing file, not this one. */
/* ==========================================================================
   summitsoft.com: Summitsoft's own storefront (encbb-server shop 7).
   Layered over broderbund.css. Palette = option A, Syed 2026-10-05 ("slate and signal blue", replacing black + gold):
   the Summitsoft logo's slate (#404852, deepened to #2E343C for bands) + the signal blue summitsoft.com already uses
   (#3E9AE0, deepened to #1F6FB5 for fills and text on white). Photography: the marketing team's grayscale scenes with
   one brand in colour (Teatopia, Fin & Fork, ...). Dark slate only where it is decoration (header, hero bands, footer);
   product, cart and checkout keep the light body.
   Contrast rules this file keeps (measured, WCAG 2.x):
     - buttons: #1F6FB5 fill + white text (5.25:1), hover #185A94 (7.2:1); links on white #1F6FB5 (5.25:1).
     - on the slate bands, accent text is the light blue #8FC3EE (6.7:1; --ss-gold is that token, name kept for history);
       #3E9AE0 itself is only 4.1:1 on slate, so it is never small text there.
     - control borders on light grounds use #7A8594 (3.7:1 on white, the 3:1 non-text minimum).
   Faces: no Summitsoft type guideline exists. Figtree (the live summitsoft.com body face) for body and UI,
   Playfair Display for display.
   ========================================================================== */
:root {
  --ss-black: #2E343C;
  --ss-black-2: #252A31;
  --ss-black-rule: #3D4550;
  --ss-gold: #8FC3EE;
  --ss-gold-hover: #B5D7F4;
  --ss-on-dark: #F3F6F9;
  --ss-on-dark-soft: #C9D1DB;
  --ss-on-dark-muted: #A3AEBB;
  --ss-control: #7A8594;

  --ground: #F4F6F8;
  --paper: #FAFBFC;
  --surface: #ffffff;
  --surface-sunk: #EEF2F6;
  --ink: #1E2329;
  --ink-soft: #404852;
  --muted: #5A6472;
  --rule: #DDE3EA;
  --rule-strong: #A9B3C0;
  --accent: #1F6FB5;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EFFA;
  --accent-text: #1F6FB5;
  --logo: #ffffff;
  --ribbon-red: #1F6FB5;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
}

/* the line tokens the shared library reads on every designed page */
.bb-page[data-line="summitsoft"] {
  --line: #1F6FB5; --line-2: #2E343C; --line-ink: #FFFFFF; --line-soft: #E3EFFA; --line-text: #1F6FB5;
  --line-font: var(--font-display);
}

/* the library's focus ring is var(--accent); gold on a light ground is 2.1:1, so the ring is ink there */
:focus-visible { outline-color: var(--ink); }
.bb-util :focus-visible, .bb-header :focus-visible, .bb-footer :focus-visible, .ss-dark :focus-visible { outline-color: var(--ss-gold); }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
.bb-price, .bb-price b { font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; }
.bb-price b { font-weight: 800; }

/* buttons: blue fill + white text (--line-ink, was the gold-era ink); the ghost keeps blue text on hover - the shared hover rule would turn it white on pale blue */
.bb-page[data-line="summitsoft"].imsi-designed .bb-btn:hover { background: #185A94; border-color: #185A94; color: #FFFFFF; }
.bb-page[data-line="summitsoft"].imsi-designed .bb-btn--ghost { border-color: currentColor; }
.bb-page[data-line="summitsoft"].imsi-designed .bb-btn--ghost:hover { background: var(--accent-soft); border-color: currentColor; color: var(--line-text); }
.bb-btn svg { width: 1.1em; height: 1.1em; }

/* ---------- chrome: dark is decoration ---------- */
.bb-util { background: #252A31; color: var(--ss-on-dark-soft); border-bottom: 1px solid var(--ss-black-rule); }
.bb-util a { color: var(--ss-on-dark); }
.bb-header { background: var(--ss-black); border-bottom: 1px solid var(--ss-black-rule); }
.bb-header .bb-nav { border-top-color: var(--ss-black-rule); }
.bb-logo { width: clamp(150px, 15vw, 196px); color: #fff; }
.bb-logo img { display: block; width: 100%; height: auto; }
.bb-header .bb-nav a { color: var(--ss-on-dark); }
.bb-header .bb-nav a:hover { border-bottom-color: var(--ss-gold); }
.bb-header .bb-nav a[aria-current="page"] { border-bottom-color: var(--ss-gold); color: var(--ss-gold); }
.bb-header .bb-search { background: var(--ss-black-2); border-color: #6E7A8A; color: var(--ss-on-dark-muted); }
.bb-header .bb-search input { color: var(--ss-on-dark); }
.bb-header .bb-search input::placeholder { color: var(--ss-on-dark-muted); }
.bb-header .bb-search:focus-within { outline-color: var(--ss-gold); }
.bb-header .bb-icon-btn { color: var(--ss-on-dark); }
.bb-header .bb-icon-btn:hover { background: var(--ss-black-rule); }
.bb-cart-count { background: var(--ss-gold); color: var(--ss-black); }
.ss-nav-out::after { content: " \2197"; }
@media (max-width: 960px) {
  .bb-header .bb-nav.is-open { background: var(--ss-black); border-bottom-color: var(--ss-black-rule); }
}

.bb-news { background: var(--ss-gold); color: var(--ss-black); }
.bb-news p { opacity: 1; }
.bb-news .bb-btn { background: var(--ss-black); border-color: var(--ss-black); color: var(--ss-on-dark); }
.bb-news input { background: #fff; color: var(--ss-black); border-color: var(--ss-black); }

.bb-footer { background: var(--ss-black); color: var(--ss-on-dark-soft); border-top: 0; }
.bb-footer h2 { color: #fff; font-family: var(--font-ui); }
.bb-footer a { color: var(--ss-on-dark); }
.bb-footer a:hover { color: var(--ss-gold); }
.bb-footer .bb-logo { width: 150px; }
.bb-footer .bb-legal { border-top-color: var(--ss-black-rule); color: var(--ss-on-dark-muted); }

/* ---------- dark hero bands ---------- */
.ss-dark {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(245, 163, 0, 0.10), transparent 55%),
    var(--ss-black);
  color: var(--ss-on-dark);
  --ink: var(--ss-on-dark); --ink-soft: var(--ss-on-dark-soft); --muted: var(--ss-on-dark-muted);
  --rule: var(--ss-black-rule); --surface: var(--ss-black-2); --surface-sunk: var(--ss-black-2);
}
.bb-page[data-line="summitsoft"].imsi-designed .ss-dark a:not(.bb-btn):not(.bb-product):not(.bb-brand) { color: var(--ss-gold); }
.bb-page[data-line="summitsoft"].imsi-designed .ss-dark .bb-eyebrow { color: var(--ss-gold); }
.bb-page[data-line="summitsoft"].imsi-designed .ss-dark .bb-btn--ghost { color: var(--ss-on-dark); }
.bb-page[data-line="summitsoft"].imsi-designed .ss-dark .bb-btn--ghost:hover { background: var(--ss-black-rule); color: var(--ss-on-dark); }
.ss-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.ss-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ss-hero h1 { font-size: var(--step-4); font-weight: 700; line-height: 1.05; margin-top: 0.9rem; max-width: 16ch; color: #fbf7ee; }
.ss-hero h1 em { font-style: italic; font-weight: 600; color: var(--ss-gold); }
.ss-hero__lede { margin-top: 1.1rem; max-width: 52ch; font-size: var(--step-1); line-height: 1.55; color: var(--ss-on-dark-soft); }
.ss-hero .bb-hero__actions { margin-top: 1.7rem; }
.ss-hero .ln-facts { color: var(--ss-on-dark-soft); }
.ss-hero .ln-facts svg { color: var(--ss-gold); }
.ss-rule { display: block; width: 56px; height: 3px; background: var(--ss-gold); border: 0; margin: 0; }
.ss-hero--page { padding-block: clamp(2rem, 5vw, 3.5rem); }
.ss-hero--page h1 { max-width: 20ch; }
.ss-outlink { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1.1rem; font: 600 0.95rem var(--font-ui); }

/* the mosaic: brands and end results, never box shots */
.ss-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(72px, 7.6vw, 104px); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ss-tile { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: #F4F6F8; display: grid; place-items: center; }
.ss-tile svg { width: 100%; height: 100%; display: block; }
.ss-tile img { width: 100%; height: 100%; object-fit: cover; }
.ss-tile--contain img { object-fit: contain; padding: 6%; }
.ss-tile--black { background: #252A31; box-shadow: inset 0 0 0 1px var(--ss-black-rule); }
.ss-tile--gold { background: var(--ss-gold); }
.ss-tile--white { background: #fff; }
.ss-tile--w2 { grid-column: span 2; } .ss-tile--w3 { grid-column: span 3; } .ss-tile--w4 { grid-column: span 4; }
.ss-tile--h2 { grid-row: span 2; }
.ss-tile figcaption {
  position: absolute; left: 6px; bottom: 6px; padding: 0.15rem 0.45rem; border-radius: 3px;
  background: rgba(12, 11, 9, 0.82); color: #f6f1e6; font: 600 0.68rem/1.3 var(--font-ui); letter-spacing: 0.02em;
}
.ss-mosaic-note { margin-top: 0.75rem; font-size: 0.78rem; color: var(--ss-on-dark-muted); max-width: 60ch; }

/* ---------- three pillars ---------- */
.ss-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.ss-pillar { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ss-pillar__art { aspect-ratio: 16 / 10; background: var(--surface-sunk); display: grid; place-items: center; overflow: hidden; border-bottom: 3px solid var(--ss-gold); }
.ss-pillar__art img { width: 100%; height: 100%; object-fit: cover; }
.ss-pillar__body { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
.ss-pillar__num { font: 700 0.78rem var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ss-pillar h3 { font-size: var(--step-2); }
.ss-pillar p { color: var(--ink-soft); font-size: 0.97rem; }
.ss-pillar ul { margin: 0.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.ss-pillar li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.4rem; }
.ss-pillar li svg { width: 1rem; height: 1rem; margin-top: 0.28rem; color: var(--ink); }
.ss-pillar .bb-btn { justify-self: start; margin-top: 0.4rem; }

/* ---------- product cards ---------- */
.ss-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.ss-products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ss-card__art { display: grid; place-items: center; background: var(--surface-sunk); padding: 1.25rem 0.75rem 1rem; }
.ss-card__art img { width: auto; max-width: 70%; max-height: 190px; filter: drop-shadow(0 10px 12px rgba(20, 19, 16, 0.18)); }
.ss-card__body { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: 0.5rem; align-content: start; grid-template-rows: auto auto 1fr auto; }
.ss-card h3 { font-size: 1.2rem; }
.ss-card p { color: var(--ink-soft); font-size: 0.93rem; }
.ss-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.ss-card__buy .bb-price b { font-size: 1.15rem; }
.ss-tag { display: inline-block; justify-self: start; padding: 0.2rem 0.55rem; border-radius: 99px; background: var(--accent-soft); color: var(--ink); font: 700 0.7rem var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.ss-tag--gold { background: var(--ss-gold); color: var(--ss-black); }

/* editions (Logo Design Studio) */
.ss-editions .ln-path { grid-template-columns: 150px minmax(0, 1fr); }
.ss-editions .ln-path img { width: 150px; }
.ss-editions .ln-path--pick { border: 2px solid var(--ink); }

/* ---------- commercial fonts band (light: it carries a price and a form) ---------- */
.ss-b2b { background: var(--accent-soft); }
.ss-b2b__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ss-b2b h2 { font-size: var(--step-3); }
.ss-b2b__offer { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ss-b2b__offer img { width: 110px; filter: drop-shadow(0 10px 12px rgba(20, 19, 16, 0.2)); }
.ss-b2b__offer h3 { font-size: 1.3rem; }
.ss-b2b__offer .bb-price { margin-top: 0.6rem; }
.ss-b2b__offer .bb-hero__actions { margin-top: 0.9rem; }

/* quote form placeholder (replaced in the store by the imsistore form, plan section 6 option F1) */
.ss-quote { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.ss-form { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.75rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.ss-form label { display: grid; gap: 0.35rem; font: 600 0.9rem var(--font-ui); color: var(--ink); }
.ss-form .ss-full { grid-column: 1 / -1; }
.ss-form input, .ss-form select, .ss-form textarea {
  width: 100%; min-width: 0; padding: 0.7rem 0.8rem; border-radius: var(--radius); border: 1.5px solid var(--ss-control);
  background: var(--surface); color: var(--ink); font: 400 1rem var(--font-body);
}
.ss-form textarea { min-height: 7.5rem; resize: vertical; }
.ss-form input:focus, .ss-form select:focus, .ss-form textarea:focus { outline: 3px solid var(--ink); outline-offset: 1px; }
.ss-form .ss-req { color: var(--muted); font-weight: 500; }
.ss-form .ss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ss-form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.ss-form__status { flex-basis: 100%; min-height: 1.3em; font: 500 0.9rem var(--font-ui); color: var(--ink-soft); }
.ss-form__note { font-size: 0.85rem; color: var(--muted); }

/* ---------- end results ---------- */
.ss-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.ss-results figure { margin: 0; display: grid; gap: 0.55rem; align-content: start; }
.ss-results img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); background: #fff; }
.ss-results figcaption { font: 600 0.9rem var(--font-ui); color: var(--ink); }
.ss-results figcaption span { display: block; font-weight: 500; font-size: 0.84rem; color: var(--muted); }

/* LDS feature art on the dark hero: the product's own gold-ringed tiles */
.ss-feature-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ss-feature-tiles li { position: relative; border-radius: var(--radius); overflow: hidden; background: #252A31; box-shadow: inset 0 0 0 1px var(--ss-black-rule); aspect-ratio: 1; }
.ss-feature-tiles img, .ss-feature-tiles svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-feature-tiles .ss-tile figcaption, .ss-feature-tiles figcaption { position: absolute; left: 6px; bottom: 6px; padding: 0.15rem 0.45rem; border-radius: 3px; background: rgba(12, 11, 9, 0.85); color: #f6f1e6; font: 600 0.72rem var(--font-ui); }
.ss-feature-tiles figure { margin: 0; height: 100%; }

/* specs, support cards */
.ss-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.ss-specs div { border-top: 2px solid var(--ink); padding-top: 0.6rem; }
.ss-specs dt { font: 700 0.95rem var(--font-ui); }
.ss-specs dd { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.93rem; }
.ss-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.ss-help li { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.3rem 1.4rem; display: grid; gap: 0.55rem; align-content: start; }
.ss-help svg { width: 26px; height: 26px; color: var(--ink); }
.ss-help h3 { font-size: 1.2rem; }
.ss-help p { color: var(--ink-soft); font-size: 0.95rem; }
.ss-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.ss-figures div { border-top: 3px solid var(--ss-gold); padding-top: 0.7rem; }
.ss-figures dt { font: 700 var(--step-3)/1 var(--font-display); font-variant-numeric: lining-nums; }
.ss-figures dd { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.ss-prose { max-width: 66ch; display: grid; gap: 1rem; color: var(--ink-soft); }
.ss-prose h2 { color: var(--ink); font-size: var(--step-3); }
.ss-also { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font: 600 0.95rem var(--font-ui); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .ss-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ss-hero__grid, .ss-b2b__grid, .ss-quote { grid-template-columns: minmax(0, 1fr); }
  .ss-pillars, .ss-help { grid-template-columns: minmax(0, 1fr); }
  .ss-products--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-specs, .ss-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-hero h1 { max-width: 20ch; }
}
@media (max-width: 600px) {
  .ss-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 8px; }
  .ss-mosaic .ss-tile--w3 { grid-column: span 2; }
  .ss-mosaic .ss-tile--w4 { grid-column: span 4; }
  .ss-products, .ss-products--3, .ss-results { grid-template-columns: minmax(0, 1fr); }
  .ss-form { grid-template-columns: minmax(0, 1fr); }
  .ss-b2b__offer { grid-template-columns: 76px minmax(0, 1fr); padding: 1.1rem; }
  .ss-b2b__offer img { width: 76px; }
  .ss-editions .ln-path { grid-template-columns: 84px minmax(0, 1fr); }
  .ss-editions .ln-path img { width: 84px; }
  .ss-specs { grid-template-columns: minmax(0, 1fr); }
}

/* Japanese page (japan.html, 2026-10-05): Playfair Display and Figtree have no Japanese glyphs, so Japanese text falls
   back to the visitor's own Japanese system faces (no web-font download). Latin words inside keep the brand faces. */
.ss-ja, :lang(ja) { font-family: "Figtree", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; }
.ss-ja h1, .ss-ja h2, .ss-ja h3, .ss-ja .ln-h2 { font-family: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; line-break: strict; word-break: normal; overflow-wrap: anywhere; }
.ss-ja-note { padding-top: 0; }