/* Service pages: Digital Platforms (and the shared bits the other service pages will reuse). */

/* ---------- Hero scene ---------- */
.pf-scene { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1; max-height: 64vh; }
.pf-scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); transition: opacity .8s var(--ease, ease); }
.pf-scene.is-live .pf-scene__canvas { opacity: 1; }
.pf-scene__fallback { position: absolute; inset: 0; display: none; place-items: center; }
html:not(.hero-3d) .pf-scene__fallback, .pf-scene.is-off .pf-scene__fallback { display: grid; }
.pf-scene__fallback span { position: absolute; border-radius: 18px; border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shadow); }
.pf-scene__fallback span:nth-child(1) { width: 64%; height: 44%; left: 4%; top: 12%; }
.pf-scene__fallback span:nth-child(2) { width: 46%; height: 40%; right: 2%; top: 38%; background: color-mix(in srgb, var(--accent) 12%, var(--glass)); }
.pf-scene__fallback span:nth-child(3) { width: 20%; height: 42%; left: 16%; bottom: 4%; border-radius: 22px; }
html:not(.hero-3d) .pf-scene__canvas, .pf-scene.is-off .pf-scene__canvas { display: none; }

/* ---------- Jump links ---------- */
.pf-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pf-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--hover-weak); color: var(--text); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: border-color .2s, background .2s; }
.pf-jump a:hover { border-color: var(--accent); background: var(--hover); }
.pf-jump a span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--icon-bg); color: var(--icon-ink); font: 700 12px/1 var(--display); }

/* ---------- Plans (extends the home page cards) ---------- */
.pf .plan { position: relative; }
.plan__flag { position: absolute; top: 18px; right: 18px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--btn-bg); color: var(--btn-ink); }
.plan__price small { display: block; font: 500 13px/1.2 var(--display, inherit); color: var(--faint); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.plan__time { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin-top: -6px; }
.pf-note { margin-top: 22px; color: var(--muted); max-width: 70ch; line-height: 1.65; }
.pf .plans + .pf-phones, .pf .plans + .pf-proof { margin-top: clamp(40px, 6vw, 72px); }

/* ---------- Proof: the school we built for ---------- */
.pf-proof { margin: clamp(48px, 7vw, 88px) 0 28px; max-width: 64ch; }
.pf-proof h3 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; margin: 6px 0 10px; }
.pf-proof p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.pf-live { margin-top: 14px; padding-left: 20px; }

/* ---------- Web systems ---------- */
.pf-systems { position: relative; isolation: isolate; overflow: hidden; }
.pf-systems .fx { z-index: -1; opacity: .35; }
.pf-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(48px, 7vw, 88px); }
.pf-split h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; margin: 6px 0 10px; }
.pf-split > div > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; max-width: 52ch; }
.pf-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pf-chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; }
.pf-chips .tick { color: var(--accent); width: 16px; height: 16px; }
.pf-case { border-radius: 26px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--surface); box-shadow: var(--glass-shadow); }
.pf-case .frame { border: 0; border-radius: 0; box-shadow: none; }
.pf-case__body { padding: 20px 24px 24px; }
.pf-case__body h4 { font-size: 18px; letter-spacing: -.01em; }
.pf-case__body p { color: var(--muted); line-height: 1.65; margin-top: 6px; font-size: 15px; }

/* ---------- Apps ---------- */
.pf-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: clamp(16px, 4vw, 48px); align-items: end; }
.pf-phones__item { display: grid; gap: 12px; justify-items: center; text-align: center; color: var(--muted); font-size: 14px; }
.phone-solo { width: 100%; padding: 8px; border-radius: 34px; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform .5s var(--ease, ease); }
.phone-solo .ph { border-radius: 26px; }
.pf-phones__item:nth-child(2) .phone-solo { transform: translateY(-18px); }
@media (hover: hover) and (pointer: fine) { .pf-phones__item:hover .phone-solo { transform: translateY(-10px) rotate(-1.5deg); } .pf-phones__item:nth-child(2):hover .phone-solo { transform: translateY(-28px) rotate(1.5deg); } }
.pf-compare { margin-top: clamp(40px, 6vw, 72px); }
.pf-compare h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.pf-compare > p { color: var(--muted); margin-top: 6px; }
.pf-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.pf-compare__grid .glass { padding: 26px 24px; border-radius: 26px; }
.pf-compare__grid h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.pf-compare__grid h4 svg { color: var(--accent); }

/* ---------- Estimator ---------- */
.pf-est__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 20px; align-items: start; }
.pf-est__form { padding: clamp(20px, 3vw, 34px); border-radius: 28px; display: grid; gap: 26px; }
.pf-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.pf-field legend { padding: 0; font: 600 15px/1.3 var(--display); letter-spacing: -.01em; margin-bottom: 4px; }
.pf-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-seg label { position: relative; }
.pf-seg input, .pf-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pf-seg span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--muted); font-weight: 600; font-size: 15px; transition: all .2s; text-align: center; }
.pf-seg label:hover span { border-color: var(--accent); color: var(--text); }
.pf-seg input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.pf-seg input:focus-visible + span, .pf-opt input:focus-visible + .pf-opt__body { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.pf-opts { display: grid; gap: 10px; }
.pf-opt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--raised); transition: border-color .2s, background .2s; }
.pf-opt:hover { border-color: var(--accent); }
.pf-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--raised)); }
.pf-opt__body { display: grid; gap: 2px; min-width: 0; border-radius: 10px; }
.pf-opt__body b { font-weight: 600; font-size: 15px; line-height: 1.35; }
.pf-opt__body small { color: var(--faint); font-size: 13px; }
.pf-opt__price { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.pf-est__out { padding: clamp(22px, 3vw, 32px); border-radius: 28px; display: grid; gap: 14px; position: sticky; top: 110px; }
.pf-est__sum { font: 700 clamp(30px, 4vw, 42px)/1.1 var(--display); letter-spacing: -.03em; margin: 0; }
.pf-est__time { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; margin: 0; }
.pf-est__lines { list-style: none; margin: 4px 0 6px; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14.5px; }
.pf-est__lines li { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
.pf-est__lines b { color: var(--text); font-weight: 600; white-space: nowrap; }
.pf-est__out .btn { justify-content: center; width: 100%; }

/* ---------- Includes and care ---------- */
.pf-incl { margin-top: clamp(40px, 6vw, 64px); padding: clamp(24px, 4vw, 40px); border-radius: 30px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.pf-incl h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.pf-incl__care { padding: 24px; border-radius: 22px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--glass-border); }
.pf-incl__price { font: 600 20px/1.3 var(--display); margin: 8px 0; }
.pf-incl__price b { color: var(--accent); }
.pf-incl__care p:last-child { color: var(--muted); line-height: 1.6; }
.pf-next { margin-top: 20px; color: var(--muted); }
.pf-next a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Quote pop-up extras ---------- */
.qm__pick { margin: 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--accent); font-weight: 600; font-size: 14.5px; line-height: 1.5; }
.qm .acm__head p { color: var(--muted); }

@media (max-width: 1000px) {
  .pf-split, .pf-est__grid, .pf-incl { grid-template-columns: 1fr; }
  .pf-est__out { position: static; }
  .pf-scene { max-width: 420px; max-height: none; }
}
@media (max-width: 700px) {
  .pf-compare__grid { grid-template-columns: 1fr; }
  .pf-phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .phone-solo { padding: 5px; border-radius: 22px; }
  .phone-solo .ph { border-radius: 17px; }
  .phone-solo .ph__cap span, .phone-solo .ph__cap svg { display: none; }
  .pf-phones__item:nth-child(2) .phone-solo { transform: translateY(-10px); }
}
@media (max-width: 560px) {
  .pf-seg { grid-template-columns: 1fr; }
  .pf-opt { grid-template-columns: 1fr; gap: 4px; }
  .pf-jump a { flex: 1 1 calc(50% - 10px); justify-content: center; }
  .pf-est__sum { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .phone-solo, .pf-scene__canvas { transition: none; } }

/* ============================================================================
   Pages added with Payments, Data/AI/Security and Advisory
   ============================================================================ */
.pf-seg--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-chips { margin-top: 28px; }

/* ---------- Sample dashboard (data) ---------- */
.dd { margin-top: clamp(34px, 5vw, 56px); padding: clamp(18px, 3vw, 30px); border-radius: 28px; border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shadow); }
.dd__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dd__stat { padding: 14px 16px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); display: grid; gap: 4px; }
.dd__stat small { color: var(--muted); font-size: 13px; }
.dd__stat b { font: 700 clamp(24px, 3.4vw, 34px)/1.1 var(--display); letter-spacing: -.03em; }
.dd__bars { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 14px); height: clamp(120px, 20vw, 190px); margin-top: 20px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.dd__bars i { flex: 1; height: var(--h); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease, ease) var(--d, 0ms); }
.dd.is-in .dd__bars i, .no-js .dd__bars i { transform: scaleY(1); }
.dd__cap { margin: 12px 0 0; color: var(--faint); font-size: 13px; }

/* ---------- Sample AI chat ---------- */
.chat { padding: clamp(18px, 3vw, 28px); border-radius: 26px; display: grid; gap: 12px; }
.chat p { margin: 0; line-height: 1.55; }
.chat__q { justify-self: end; max-width: 88%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid var(--accent); font-size: 15px; }
.chat__a { justify-self: start; max-width: 92%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--raised); border: 1px solid var(--line); font-size: 15px; }
.chat__a small { display: block; margin-top: 6px; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.chat__a--hand { border-style: dashed; }
.chat__cap { color: var(--faint); font-size: 13px; }

/* ---------- Security readiness check ---------- */
.rd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: start; }
.rd__list { list-style: none; margin: 0; padding: 10px; border-radius: 28px; display: grid; gap: 4px; }
.rd__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 56px; padding: 10px 14px; border-radius: 18px; cursor: pointer; line-height: 1.45; font-size: 15.5px; transition: background .2s; position: relative; }
.rd__item:hover { background: var(--hover-weak); }
.rd__item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rd__box { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 1.5px solid var(--line-strong); background: var(--raised); color: transparent; transition: all .2s; }
.rd__box .tick { width: 16px; height: 16px; }
.rd__item input:checked + .rd__box { background: var(--accent); border-color: var(--accent); color: var(--btn-ink, #04222f); }
.rd__item input:focus-visible + .rd__box { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.rd__out { padding: clamp(22px, 3vw, 30px); border-radius: 28px; display: grid; gap: 14px; position: sticky; top: 110px; }
.rd__score { margin: 0; font: 700 clamp(34px, 4vw, 46px)/1 var(--display); letter-spacing: -.03em; }
.rd__score span { font-size: .45em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.rd__bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rd__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }
.rd__bar.is-low i { background: #e5484d; }
.rd__bar.is-mid i { background: #f0a020; }
.rd__bar.is-high i { background: #2fb36b; }
.rd__msg { margin: 0; color: var(--muted); line-height: 1.6; }
.rd__gaps { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; color: var(--muted); max-height: 260px; overflow: auto; }
.rd__gaps li { padding-left: 18px; position: relative; line-height: 1.45; }
.rd__gaps li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.rd__out .btn { justify-content: center; width: 100%; }

/* ---------- Advisory: weekly rhythm and open sessions ---------- */
.adv-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.adv-week li { padding: 20px 20px 22px; border-radius: 22px; border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shadow); display: grid; gap: 6px; align-content: start; }
.adv-week li span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.adv-week li b { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; }
.adv-week li p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.adv-open { margin-top: clamp(40px, 6vw, 72px); padding: clamp(20px, 3vw, 34px); border-radius: 30px; border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shadow); display: grid; gap: 20px; }
.adv-open > header { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.adv-open h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; margin-top: 4px; }
.adv-open__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adv-open__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); }
.adv-open__list .date { display: grid; place-items: center; min-width: 58px; padding: 8px 6px; border-radius: 14px; background: var(--icon-bg); color: var(--icon-ink); font-size: 12px; line-height: 1.1; text-transform: uppercase; }
.adv-open__list .date b { font: 700 22px/1 var(--display); }
.adv-open__list li div b { display: block; font-weight: 600; line-height: 1.35; }
.adv-open__list li div small { color: var(--muted); font-size: 13.5px; }
.adv-open__none { margin: 0; color: var(--muted); }
.adv-open__links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }

@media (max-width: 1000px) {
  .rd { grid-template-columns: 1fr; }
  .rd__out { position: static; }
  .adv-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dd__top { grid-template-columns: 1fr; }
  .dd__stat { grid-template-columns: 1fr auto; align-items: center; }
  .adv-week { grid-template-columns: 1fr; }
  .adv-open__list li { grid-template-columns: auto minmax(0, 1fr); }
  .adv-open__list li .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dd__bars i { transition: none; transform: scaleY(1); } }

/* ============================================================================
   Sector pages and the Work page
   ============================================================================ */
.sx-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--icon-bg); color: var(--icon-ink); flex: none; }
.sx-start { padding: clamp(20px, 3vw, 30px); border-radius: 28px; display: grid; gap: 14px; align-self: center; }
.sx-start ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sx-start li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); }
.sx-start li b { display: block; font-weight: 600; line-height: 1.3; }
.sx-start li small { color: var(--accent); font-weight: 600; font-size: 14px; }
.sx-start__note { margin: 0; color: var(--faint); font-size: 13.5px; }
.sx-pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-pains article { padding: 22px; border-radius: 24px; display: grid; gap: 8px; align-content: start; }
.sx-pains h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.sx-pains p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.sx-builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sx-builds article { padding: 24px; border-radius: 26px; display: grid; gap: 10px; align-content: start; transition: border-color .2s, transform .25s var(--ease, ease); }
.sx-builds article:hover { border-color: var(--accent); transform: translateY(-3px); }
.sx-builds h3 { font-size: 20px; letter-spacing: -.02em; }
.sx-builds p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.sx-builds .sx-builds__price { color: var(--text); font: 700 20px/1.2 var(--display); letter-spacing: -.02em; }
.sx-builds__price small { font: 500 13px var(--display); color: var(--muted); }
.sx-real { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sx-eg { max-width: 780px; margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: 32px; display: grid; gap: 14px; }
.sx-eg h2 { font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.02em; }
.sx-eg p { margin: 0; color: var(--muted); line-height: 1.75; }
.sx-eg .sx-eg__note { font-size: 14px; color: var(--faint); }
.sx-eg .sx-eg__note a { color: var(--accent); }
.pf-next a { margin-inline: 2px; }

/* Work page */
.wk-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.wk-filter button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--hover-weak); color: var(--text); font: 600 14.5px var(--display); cursor: pointer; transition: all .2s; }
.wk-filter button:hover { border-color: var(--accent); }
.wk-filter button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wk-card { border-radius: 26px; overflow: hidden; display: grid; align-content: start; transition: border-color .2s, transform .25s var(--ease, ease); }
.wk-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.wk-card[hidden] { display: none; }
.wk-card .ph, .wk-card img { border-radius: 0; }
.wk-card__body { padding: 20px 22px 24px; display: grid; gap: 8px; }
.wk-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-card h3 { font-size: 20px; letter-spacing: -.02em; }
.wk-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.wk-none { margin: 20px 0 0; color: var(--muted); }
.wk-case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.wk-case article { padding: 24px; border-radius: 24px; display: grid; gap: 8px; align-content: start; }
.wk-case h3 { font-size: 18px; }
.wk-case p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 15px; }

@media (max-width: 1000px) {
  .sx-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-builds, .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-case { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sx-pains, .sx-builds, .sx-real, .wk-grid { grid-template-columns: 1fr; }
}
.sx .ac-stats + .section, .sx > .container + .section { padding-top: clamp(48px, 7vw, 88px); }