/* ==========================================================================
   Sub-service pages: includes/templates/sub.php
   Loaded after pillar.css (hero form, marquee, cards, process). Prefix: sb-.
   ========================================================================== */

/* ---------- hero: longer keyword headings than the pillar pages ---------- */
.sb-hero__h { font-size: clamp(2.5rem, 4.7vw, 5rem); line-height: .98; }

/* ---------- the basics: interactive mock-up card ---------- */
.sb-mock { display: grid; align-content: start; gap: 14px; padding: clamp(16px, 2vw, 22px); border-radius: 28px; color: #111; background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.sb-mock__top { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: #66666f; }
.sb-mock__top span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #111; }
.sb-mock__note { font-size: 13.5px; color: #66666f; }
.sb-mock__tog { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #f0f0f3; }
html:not(.js) .sb-mock__tog { display: none; }
.sb-mock__tog button { flex: 1; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #4d4d55; background: none; transition: background .25s, color .25s; }
.sb-mock__tog button[aria-pressed="true"] { color: #fff; background: #111; }
.sb-mock__tog button:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.sb-pane { display: grid; gap: 10px; }
.sb-pane[hidden] { display: none; }
.sb-pane__h { font-size: 10.5px; color: #66666f; }
.js .sb-mock.is-on .sb-pane__h { display: none; }
html:not(.js) .sb-pane + .sb-pane { padding-top: 14px; border-top: 1px solid #e6e6ec; }
.sb-q { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; background: #f4f4f6; }
.sb-q .icon { width: 17px; height: 17px; flex: none; color: #66666f; }
.sb-ans { display: grid; gap: 8px; padding: 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; background: linear-gradient(135deg, rgba(123, 77, 255, .1), rgba(58, 141, 255, .08)); }
.sb-ans__ai { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: #4d4d55; }
.sb-rows { display: grid; gap: 8px; }
.sb-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: #f4f4f6; }
.motion .sb-pane:not([hidden]) .sb-rows li { animation: up .5s var(--ease) both; animation-delay: calc(var(--j) * 80ms); }
.sb-rows__t { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.sb-rows__t b { font-size: 14px; font-weight: 600; }
.sb-rows__t small { font-size: 12.5px; color: #66666f; }
.sb-rows__st { padding: 4px 10px; border-radius: 999px; font-size: 9.5px; white-space: nowrap; }
.sb-rows .is-ok .sb-rows__st { color: #0b5c33; background: #d9f5e5; }
.sb-rows .is-bad .sb-rows__st { color: #8a1c1c; background: #fde2e2; }
.sb-cites__l { font-size: 10px; color: #66666f; }
.sb-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-cites li { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; background: #f4f4f6; }
.sb-cites .is-you { color: #fff; background: #111; }
.sb-pane__f { font-size: 13.5px; color: #4d4d55; }

/* live search-result preview */
.sb-serp__in { display: grid; gap: 6px; }
.sb-serp__in .mono { font-size: 10px; color: #66666f; }
.sb-serp__in input, .sb-serp__in textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; color: #111; background: #f4f4f6; resize: vertical; }
.sb-serp__in input:focus-visible, .sb-serp__in textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.sb-serp__out { display: grid; gap: 4px; padding: 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px #e2e2e8; overflow-wrap: anywhere; }
.sb-serp__url { font-size: 11px; color: #4d4d55; }
.sb-serp__t { font-size: 1.15rem; line-height: 1.3; color: #1a0dab; }
.sb-serp__d { font-size: 14px; line-height: 1.5; color: #4d4d55; }
.sb-serp__n { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 10.5px; color: #66666f; }
.sb-serp__n b { font-weight: 500; color: #111; }
.sb-serp__n .is-over b { color: #b42318; }

/* ---------- types / what we do: tabs ---------- */
.sb-tabs__list { display: flex; gap: 6px; margin-bottom: 18px; padding: 6px; overflow-x: auto; border-radius: 999px; background: var(--card); scrollbar-width: none; }
.sb-tabs__list::-webkit-scrollbar { display: none; }
.sb-tabs__list[hidden] { display: none; }
.sb-tab { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--fg); background: none; transition: background .25s, color .25s; }
.sb-tab .mono { font-size: 10px; color: var(--mut); }
.sb-tab:hover { background: var(--glass); }
.sb-tab[aria-selected="true"] { color: #fff; background: #111; }
.sb-tab[aria-selected="true"] .mono { color: #a3a3ad; }
.sb-tab:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.sb-tp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 28px clamp(28px, 4vw, 64px); padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: var(--card); }
.sb-tp[hidden] { display: none; }
.sb-tp + .sb-tp { margin-top: 14px; }
.sb-tabs.is-on .sb-tp + .sb-tp { margin-top: 0; }
.motion .sb-tabs.is-on .sb-tp:not([hidden]) { animation: up .5s var(--ease) both; }
.sb-tp:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sb-tp__txt { display: grid; align-content: start; gap: 14px; }
.sb-tp__n { font-size: 10.5px; color: var(--mut); }
.sb-tp h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.sb-tp__txt > p:not(.mono) { max-width: 58ch; color: var(--mut); }
.sb-tp__pts { margin-top: 8px; grid-template-columns: minmax(0, 1fr); }
.sb-ex { display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: 22px; color: #111; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(17, 17, 17, .45); }
.sb-ex__t { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }

/* ---------- client work on a light/grey background ---------- */
.sb-work__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sb-work .pl-case { box-shadow: 0 0 0 1px var(--line); }
.sb-work .pl-case__b { -webkit-text-stroke: 1.2px rgba(17, 17, 17, .55); }
.sb-case__t { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.sb-case__s { font-size: 14.5px; color: var(--mut); }
.sb-quote { margin-top: 14px; background: radial-gradient(120% 90% at 100% 0%, rgba(123, 77, 255, .14), transparent 60%), var(--card); }

/* ---------- the real problem + self-check ---------- */
.sb-check__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: start; gap: 48px clamp(40px, 6vw, 96px); }
.sb-quiz { display: grid; gap: 18px; padding: clamp(20px, 2.4vw, 30px); border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(17, 17, 17, .55); }
.sb-quiz fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sb-quiz__t { display: grid; gap: 10px; padding: 0; font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.sb-quiz__t .mono { display: inline-flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 400; letter-spacing: 0; color: var(--mut); }
.sb-quiz__lead { margin-top: 8px; font-size: 14.5px; color: var(--mut); }
.sb-quiz__list { display: grid; gap: 8px; margin-top: 16px; }
.sb-qi { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .25s, box-shadow .25s; }
.sb-qi input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-qi__box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 8px; color: transparent; box-shadow: inset 0 0 0 1.5px var(--line2); transition: background .25s, color .25s, box-shadow .25s; }
.sb-qi__box .icon { width: 14px; height: 14px; }
.sb-qi__tx { display: grid; gap: 3px; line-height: 1.35; }
.sb-qi__tx b { font-size: 14.5px; font-weight: 500; }
.sb-qi__tx small { font-size: 12.5px; color: var(--mut); }
.sb-qi:hover { background: #222226; }
.sb-qi:has(input:checked) { box-shadow: inset 0 0 0 1px rgba(255, 122, 0, .6); }
.sb-qi input:checked + .sb-qi__box { color: #111; background: var(--grad-warm); box-shadow: none; }
.sb-qi input:focus-visible + .sb-qi__box { outline: 2px solid var(--pink); outline-offset: 2px; }
.sb-quiz__res { display: grid; gap: 10px; }
.sb-quiz__res[hidden], .sb-quiz__msg[hidden] { display: none; }
.sb-quiz__score { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--mut); }
.sb-quiz__score b { font-weight: 500; color: var(--fg); }
.sb-quiz__bar { display: block; height: 6px; overflow: hidden; border-radius: 6px; background: var(--line2); }
.sb-quiz__bar i { display: block; height: 100%; background: var(--grad-warm); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .5s var(--ease); }
.sb-quiz__msg { font-size: 14.5px; }
.sb-quiz > .btn { justify-self: start; }

/* ---------- why Webincline (dark) ---------- */
.sb-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sb-why__card { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.sb-why__n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; font-size: 11px; color: #111; background: var(--grad-warm); }
.sb-why__card h3 { font-size: 1.35rem; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.sb-why__card p { font-size: 15px; color: var(--mut); }

/* ---------- what is included: six cards in three columns ---------- */
.sb-inc .pl-dl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- smaller screens ---------- */
/* ---------- platform logos: hero row, marquee chips, tools grid (logos in brand colour on white) ---------- */
.sb-logos { display: grid; gap: 10px; margin-top: 28px; }
.sb-logos__l { font-size: 10.5px; color: var(--mut); }
.sb-logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb-logos li { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 12px 26px -16px rgba(0, 0, 0, .3); }
.sb-logos img { width: 32px; height: 32px; object-fit: contain; }
.sb-logos .is-main { display: flex; gap: 12px; width: auto; height: 64px; padding: 0 20px 0 12px; border-radius: 20px; }
.sb-logos .is-main img { width: 40px; height: 40px; }
.sb-logos .is-main b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.pl-mq__lg { flex: none; width: 1.6em; height: 1.6em; padding: .26em; border-radius: 50%; object-fit: contain; background: #fff; }
.sb-tools__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.sb-tool { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 24px; background: var(--card); transition: transform .35s var(--ease), box-shadow .35s; }
.sb-tool:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .4); }
.sb-tool__lg { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sb-tool__lg img { width: 52px; height: 52px; object-fit: contain; }
.sb-tool h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.sb-tool p { font-size: 14px; line-height: 1.5; color: var(--mut); }
.sb-tool.is-main { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; color: #f5f5f5; background: #111; }
.sb-tool.is-main .sb-tool__lg { grid-row: span 2; width: 128px; height: 128px; margin: 0; border-radius: 32px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.sb-tool.is-main .sb-tool__lg img { width: 80px; height: 80px; }
.sb-tool.is-main h3 { align-self: end; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.sb-tool.is-main p { align-self: start; color: #a3a3ad; }
.sb-tools__note { margin-top: 18px; font-size: 10.5px; color: var(--mut); }

@media (max-width: 1180px) {
  .sb-inc .pl-dl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .sb-check__grid, .sb-tp { grid-template-columns: minmax(0, 1fr); }
  .sb-mock, .sb-quiz { max-width: 620px; }
  .sb-why__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .sb-logos li { width: 48px; height: 48px; border-radius: 14px; }
  .sb-logos img { width: 28px; height: 28px; }
  .sb-logos .is-main { height: 56px; }
  .sb-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sb-tool { padding: 16px; }
  .sb-tool__lg { width: 64px; height: 64px; border-radius: 18px; }
  .sb-tool__lg img { width: 40px; height: 40px; }
  .sb-tool p { font-size: 13px; }
  .sb-tool.is-main { column-gap: 16px; }
  .sb-tool.is-main .sb-tool__lg { width: 88px; height: 88px; border-radius: 24px; }
  .sb-tool.is-main .sb-tool__lg img { width: 56px; height: 56px; }
  .sb-hero__h { font-size: clamp(2.2rem, 10vw, 3rem); }
  .sb-inc .pl-dl__grid { grid-template-columns: minmax(0, 1fr); }
  .sb-tabs__list { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); border-radius: 0; background: none; }
  .sb-tab { background: var(--card); }
  .sb-tp { padding: 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-quiz__bar i, .sb-tab, .sb-mock__tog button { transition: none; }
}

/* "read more" link under the basics */
.sb-more { margin-top: 26px; }
.sb-more a { display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; font-size: 15px; font-weight: 500; background: linear-gradient(90deg, #FF7A00, #FF3D81) 0 100% / 100% 2px no-repeat; }
.sb-more .icon { width: 15px; height: 15px; }

/* process on a grey background: the dimmed step headings need a darker grey for 4.5:1 */
.sec-grey.pl-pr.is-live .pl-ps:not(.is-act):not(.is-done) h3 { color: #66666f; }