/* =====================================================================
   SERVICES-MORE (phase 5) — the 14 /services/* pages, the six technology
   pages and /responsive-web-design-company. Loaded after pages/service.css
   (the sv-* template of /web-design-company-dubai); adds the blocks those
   pages need beyond the template, all band-aware (cream / deep / hot / ink):

   .sm-hero__photo   faded topic photo behind the poster type (multiply + mask)
   .sm-intro         long-form intro: sticky H2 beside a reading column
   .sm-grid/.sm-card numbered card grid (meta chips for cost / timeline)
   .sm-rows          big-type rows (title + one line)
   .sm-links         related pages as link tiles; .sm-chips as link pills
   .sm-price         pricing poster card (H2, copy, estimate button)
   .sm-table         kit .cmp table in a band
   .sm-cases         published case studies strip
   .sm-showcase      illustrative Search Console samples on ink
   .sm-p / .sm-note  section copy and the trailing "more in our guide" notes
   ===================================================================== */

/* ---------- hero ---------- */
.sm-hero { --sm-photo: .2; }
.sm-hero .ph__bg { z-index: -1; }
.sm-hero__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sm-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sm-pos, 60% 40%); opacity: var(--sm-photo); mix-blend-mode: multiply; filter: saturate(.5) contrast(1.08); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); }
@media (min-width: 1024px) {
  .sm-hero__photo img { -webkit-mask-image: linear-gradient(calc(90deg * var(--dir)), transparent 22%, #000 58%, #000 100%); mask-image: linear-gradient(calc(90deg * var(--dir)), transparent 22%, #000 58%, #000 100%); }
}
.sm-hero .sv-hero__title.sm-hero__title--md { font-size: clamp(40px, 7.4vw, 116px); }
.sm-hero .sv-hero__title.sm-hero__title--long { font-size: clamp(36px, 6.1vw, 94px); line-height: .95; }
.sm-hero .ph__lead { max-width: 62ch; }

/* ---------- shared bits ---------- */
.sm-page .sv-head .headline { text-wrap: balance; }
.sm-p { max-width: 72ch; color: var(--fg-2); font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.sm-note { max-width: 72ch; margin-top: clamp(22px, 2.6vw, 34px); padding: 14px 18px; border-radius: 14px; font-size: 15.5px; line-height: 1.6; color: var(--fg); background: color-mix(in oklab, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.sm-meta { margin-top: 16px; font: 600 13px/1.4 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
:is(.sm-p, .sm-note, .sm-intro__body, .sm-price__body, .sm-card, .sm-row__d, .sm-rich) a { color: var(--acc); font-weight: 650; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.4vw, 30px); }
/* the template's ticket notches are cut from the orange band: on any band they take the band colour */
.sm-page .sv-ticket__stub::before, .sm-page .sv-ticket__stub::after { background: var(--bg); }
.sm-page .sv-pack.band--deep .sv-ticket, .sm-page .sv-pack:not(.band--hot) .sv-ticket { box-shadow: 0 0 0 1px var(--rule), 0 50px 80px -50px color-mix(in oklab, var(--ink) 70%, transparent); }
.sm-step__lbl { font: 700 12.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--b2); }
.sm-page .sv-step h3 { overflow-wrap: anywhere; }
.sm-page .sv-trust__card h3 { max-width: 20ch; }
.sm-page .sv-pain__card p + p, .sm-page .sv-check p + p { margin-top: 6px; }

/* ---------- intro: sticky H2 + reading column ---------- */
.sm-intro__grid { display: grid; gap: clamp(22px, 3vw, 40px); }
.sm-intro__body { display: grid; gap: 1.05em; max-width: 70ch; }
.sm-intro__body p { color: var(--fg-2); font-size: 17px; line-height: 1.75; }
.sm-intro__body p:first-child { color: var(--fg); font-size: clamp(19px, 1.55vw, 23px); line-height: 1.6; font-weight: 500; letter-spacing: -.01em; }
.sm-intro__body strong { color: var(--fg); }
:root:lang(ar) .sm-intro__body p:first-child { letter-spacing: 0; line-height: 1.85; }
@media (min-width: 1024px) {
  .sm-intro__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 100px); align-items: start; }
  .sm-intro__h { position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* ---------- numbered card grid ---------- */
.sm-grid { counter-reset: smc; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
/* desktop column count follows the item count, so a row never ends with a lone card */
@media (min-width: 1024px) {
  .sm-grid, .sm-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(.sm-grid, .sm-links):is([data-n="2"], [data-n="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.sm-grid, .sm-links)[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
@media (min-width: 1280px) {
  :is(.sm-grid, .sm-links):is([data-n="4"], [data-n="8"], [data-n="12"], [data-n="16"], [data-n="7"], [data-n="11"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sm-card { counter-increment: smc; position: relative; display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 32px); padding-top: clamp(54px, 5vw, 70px); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 26px 44px -38px color-mix(in oklab, var(--ink) 70%, transparent); transition: transform .5s var(--ease), box-shadow .4s; --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--b1-accent); }
.sm-card::before { content: counter(smc, decimal-leading-zero); position: absolute; top: clamp(16px, 1.8vw, 22px); inset-inline-start: clamp(22px, 2.4vw, 32px); font: 400 clamp(30px, 2.6vw, 40px)/1 var(--f-num); color: transparent; -webkit-text-stroke: 1.3px color-mix(in oklab, var(--ink) 38%, transparent); }
.sm-card:has(.sm-card__ico)::before { inset-inline-start: auto; inset-inline-end: clamp(22px, 2.4vw, 32px); }
.sm-card__ico { position: absolute; top: clamp(14px, 1.6vw, 20px); inset-inline-start: clamp(20px, 2.2vw, 30px); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--b2); font-size: 19px; }
.sm-card__lbl { font: 700 12.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--b1-accent); }
.sm-card__t, .sm-card h3 { font: 400 clamp(23px, 1.9vw, 30px)/1.02 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--ink); }
:root:lang(ar) .sm-card h3 { font-weight: 800; line-height: 1.4; font-size: clamp(20px, 1.6vw, 25px); }
.sm-card p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.sm-card .sm-card__meta { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 12px 6px; border-radius: 999px; background: var(--b2); color: var(--ink); font: 700 12px/1.25 var(--f-body); letter-spacing: .05em; text-transform: uppercase; }
.sm-card .sm-card__meta + .sm-card__meta { margin-top: 0; background: var(--deep); color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .sm-card:hover { transform: translateY(-6px) rotate(calc(-.6deg * var(--dir))); box-shadow: 0 0 0 1.5px var(--ink), 0 34px 50px -36px color-mix(in oklab, var(--ink) 80%, transparent); } }
/* on purple: glass cards with cream type */
.band--deep .sm-card, .band--ink .sm-card { background: color-mix(in oklab, var(--cream) 7%, transparent); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-deep); --fg: var(--cream); --fg-2: var(--on-deep-2); --acc: var(--b2-on-deep); }
.band--deep .sm-card::before, .band--ink .sm-card::before { -webkit-text-stroke-color: color-mix(in oklab, var(--b2) 70%, transparent); }
.band--deep :is(.sm-card__t, .sm-card h3), .band--ink :is(.sm-card__t, .sm-card h3) { color: var(--cream); }
.band--deep .sm-card p, .band--ink .sm-card p { color: var(--on-deep-2); }
.band--deep .sm-card__lbl, .band--ink .sm-card__lbl { color: var(--b2-on-deep); }
.band--deep .sm-card__ico, .band--ink .sm-card__ico { background: var(--b2); color: var(--ink); }
.band--deep .sm-card .sm-card__meta + .sm-card__meta { background: var(--cream); color: var(--deep); }
@media (hover: hover) and (pointer: fine) { .band--deep .sm-card:hover, .band--ink .sm-card:hover { box-shadow: inset 0 0 0 1.5px var(--b2); } }
/* on orange: ink cards every third tile keep the grid lively */
.band--hot .sm-card:nth-child(3n+2) { background: var(--ink); color: var(--cream); --fg: var(--cream); --fg-2: color-mix(in oklab, var(--cream) 74%, var(--ink)); --acc: var(--b2-on-deep); }
.band--hot .sm-card:nth-child(3n+2) :is(.sm-card__t, h3) { color: var(--cream); }
.band--hot .sm-card:nth-child(3n+2) p { color: color-mix(in oklab, var(--cream) 74%, var(--ink)); }
.band--hot .sm-card:nth-child(3n+2)::before { -webkit-text-stroke-color: var(--b2); }
.band--hot .sm-card:nth-child(3n+2) .sm-card__ico { background: var(--b2); color: var(--ink); }

/* ---------- big-type rows ---------- */
.sm-rows { border-top: 2px solid var(--fg); }
.sm-row { display: grid; gap: 6px 32px; padding-block: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--rule); }
.sm-row__t { font: 400 clamp(30px, 4.2vw, 64px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--fg); transition: color .3s, translate .6s var(--ease); }
.sm-row__d { color: var(--fg-2); font-size: 16.5px; line-height: 1.6; max-width: 60ch; }
.sm-row .sm-card__meta { justify-self: start; font: 700 12px/1.25 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--acc); }
@media (hover: hover) and (pointer: fine) { .sm-row:hover .sm-row__t { color: var(--acc); translate: calc(10px * var(--dir)) 0; } }
@media (min-width: 900px) { .sm-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; } }

/* ---------- related tiles + pills ---------- */
.sm-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sm-link { position: relative; display: grid; gap: 8px; align-content: start; height: 100%; min-height: 132px; padding: 22px 70px 22px 22px; padding-inline: 22px 70px; border-radius: 20px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: background-color .35s, color .35s, transform .5s var(--ease); }
.sm-link__t { font: 400 clamp(21px, 1.7vw, 26px)/1.05 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
:root:lang(ar) .sm-link__t { font-weight: 800; line-height: 1.4; }
.sm-link__d { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); transition: color .35s; }
.sm-link__go { position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 16px; transition: transform .5s var(--ease), background-color .3s, color .3s; }
.sm-link:hover, .sm-link:focus-visible { background: var(--deep); color: var(--cream); }
.sm-link:hover .sm-link__d, .sm-link:focus-visible .sm-link__d { color: var(--on-deep-2); }
.sm-link:hover .sm-link__go, .sm-link:focus-visible .sm-link__go { background: var(--b2); color: var(--ink); box-shadow: none; transform: rotate(calc(45deg * var(--dir))); }
@media (hover: hover) and (pointer: fine) { .sm-link:hover { transform: translateY(-4px); } }
.band--deep .sm-link, .band--ink .sm-link { background: color-mix(in oklab, var(--cream) 7%, transparent); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-deep); }
.band--deep .sm-link__d, .band--ink .sm-link__d { color: var(--on-deep-2); }
.band--deep .sm-link__go, .band--ink .sm-link__go { box-shadow: inset 0 0 0 1.5px var(--line-deep); }
.band--deep .sm-link:hover, .band--ink .sm-link:hover { background: var(--b2); color: var(--ink); }
.band--deep .sm-link:hover .sm-link__d, .band--ink .sm-link:hover .sm-link__d { color: var(--ink); }
.band--deep .sm-link:hover .sm-link__go, .band--ink .sm-link:hover .sm-link__go { background: var(--ink); color: var(--b2); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 6px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); font: 400 clamp(18px, 1.5vw, 23px)/1 var(--f-display); text-transform: var(--display-case); transition: background-color .3s, color .3s, transform .45s var(--ease); }
.sm-chip i { font-size: 14px; transition: transform .45s var(--ease); }
.sm-chip:hover, .sm-chip:focus-visible { background: var(--ink); color: var(--b2); }
.sm-chip:hover i { transform: rotate(calc(45deg * var(--dir))); }
.band--deep .sm-chip, .band--ink .sm-chip { background: color-mix(in oklab, var(--cream) 8%, transparent); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-deep); }
.band--deep .sm-chip:hover, .band--ink .sm-chip:hover { background: var(--b2); color: var(--ink); }

/* ---------- pricing poster card ---------- */
.sm-price__card { position: relative; display: grid; gap: clamp(18px, 2.2vw, 28px); padding: clamp(28px, 4vw, 60px); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); overflow: clip; box-shadow: 0 0 0 1px var(--line), 0 50px 80px -56px color-mix(in oklab, var(--ink) 80%, transparent); --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--b1-accent); --rule: var(--line); }
.sm-price__card::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: clamp(10px, 1.4vw, 18px); background: repeating-linear-gradient(180deg, var(--b2) 0 14px, transparent 14px 26px); opacity: .9; }
.sm-price__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sm-price__ico { width: 58px; height: 58px; flex: none; border-radius: 18px; display: grid; place-items: center; background: var(--deep); color: var(--b2); font-size: 24px; transform: rotate(calc(-6deg * var(--dir))); }
.sm-price__body { display: grid; gap: .9em; max-width: 74ch; }
.sm-price__body p { font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.7; color: var(--ink-2); }
.sm-price__body strong { color: var(--ink); font-weight: 750; background: linear-gradient(transparent 62%, color-mix(in oklab, var(--b2) 55%, transparent) 62%); padding-inline: .1em; }
.sm-price .sm-actions { margin-top: 0; }
@media (min-width: 1024px) {
  .sm-price__card { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .sm-price__head { flex-direction: column; align-items: flex-start; }
  .sm-price .sm-actions { grid-column: 2; }
}
.band--deep .sm-price__card, .band--ink .sm-price__card { box-shadow: 0 50px 80px -50px color-mix(in oklab, #000 70%, transparent); }

/* ---------- tables ---------- */
.sm-table { margin-top: 4px; }
.sm-table + .sm-note, .sm-table + .sm-p { margin-top: 22px; }
@media (min-width: 640px) { .sm-table .cmp { min-width: 640px; } }
.sm-table .cmp td a, .sm-table .cmp th a { color: var(--b1-accent); font-weight: 650; }
.band--deep .sm-table, .band--ink .sm-table { box-shadow: none; }

/* ---------- case studies strip ---------- */
.sm-cases__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 30px; margin-bottom: clamp(20px, 2.4vw, 32px); padding-top: clamp(8px, 1.4vw, 18px); }
.sm-cases__head .lede { margin-top: 10px; max-width: 60ch; }
.sm-cases__list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sm-case { position: relative; display: grid; gap: 14px; height: 100%; padding: 12px 12px 18px; border-radius: 22px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease), box-shadow .35s; }
.sm-case__img { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--cream-2); }
.sm-case__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.sm-case__body { display: grid; gap: 4px; padding-inline: 6px 52px; }
.sm-case__body strong { font-size: 16.5px; line-height: 1.3; }
.sm-case__body small { font-size: 13.5px; color: var(--ink-2); }
.sm-case__go { position: absolute; bottom: 18px; inset-inline-end: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--b2); font-size: 15px; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sm-case:hover { transform: translateY(-5px); box-shadow: 0 0 0 1.5px var(--ink), 0 30px 50px -36px color-mix(in oklab, var(--ink) 70%, transparent); }
  .sm-case:hover .sm-case__img img { transform: scale(1.05); }
  .sm-case:hover .sm-case__go { transform: rotate(calc(45deg * var(--dir))); }
}

/* ---------- SEO showcase (partials.seo-showcase on ink) ---------- */
.sm-cases .sm-case { box-shadow: none; }
.sm-cases.band--deep .link-arrow { color: var(--b2-on-deep); }
.sm-showcase .seo-showcase { margin: 0; }
.sm-showcase .seo-showcase__inner { max-width: none; }
.sm-showcase .seo-showcase__note { color: var(--fg-2); font-size: 14.5px; }
.sm-showcase .seo-showcase__tag { background: var(--b2); color: var(--ink); }
.sm-showcase .seo-showcase__item { border-color: var(--line-deep); border-radius: 18px; }

/* ---------- FAQ: answers with links ---------- */
.sm-faq .faq__a p { max-width: 68ch; }

/* phones */
@media (max-width: 559px) {
  .sm-card { padding-top: 58px; }
  .sm-link { min-height: 0; }
  .sm-price__card::after { width: 8px; }
}

/* ---------- paragraph columns (blocks of "<strong>Lead-in.</strong> text" paragraphs) ---------- */
.sm-cols { display: grid; gap: 14px; }
.sm-cols .sm-p { margin: 0; max-width: none; padding: clamp(20px, 2.2vw, 28px); border-radius: 20px; background: color-mix(in oklab, var(--fg) 5%, transparent); box-shadow: inset 0 0 0 1px var(--rule); font-size: 16px; line-height: 1.65; }
.sm-cols .sm-p strong { display: block; margin-bottom: 6px; color: var(--fg); font: 400 clamp(21px, 1.7vw, 26px)/1.05 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.band--hot .sm-cols .sm-p { background: var(--paper); color: var(--ink-2); box-shadow: none; }
.band--hot .sm-cols .sm-p strong { color: var(--ink); }
@media (min-width: 900px) {
  .sm-cols[data-n="2"], .sm-cols[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-cols[data-n="3"], .sm-cols[data-n="5"], .sm-cols[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- dense grid (long checklists: 30 diagnostics) ---------- */
.sm-grid--dense { gap: 10px; }
.sm-grid--dense .sm-card { padding: 18px 20px 20px; padding-top: 46px; gap: 6px; border-radius: 18px; }
.sm-grid--dense .sm-card::before { top: 14px; inset-inline-start: 20px; font-size: 24px; }
.sm-grid--dense .sm-card__t { font-size: clamp(19px, 1.45vw, 22px); }
.sm-grid--dense .sm-card p { font-size: 14.5px; line-height: 1.55; }
@media (min-width: 1280px) { .sm-grid--dense.sm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- linked cards (starter packages) + card notes ---------- */
.sm-card--link { padding: 0; }
.sm-card__a { display: grid; gap: 10px; align-content: start; height: 100%; padding: clamp(22px, 2.4vw, 32px); padding-top: clamp(54px, 5vw, 70px); padding-inline-end: 64px; color: inherit; text-decoration: none; border-radius: inherit; }
.sm-card__go { position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 16px; transition: transform .5s var(--ease); }
.sm-card--link:hover .sm-card__go { transform: rotate(calc(45deg * var(--dir))); }
.sm-card .sm-card__note { font-size: 14px; color: var(--fg-2); padding-top: 10px; border-top: 1px dashed var(--rule); }
.sm-grid--starter { margin-bottom: 14px; }
.sm-grid--starter .sm-card { background: var(--b2); color: var(--ink); box-shadow: none; --fg-2: var(--ink); --rule: color-mix(in oklab, var(--ink) 30%, transparent); }
.sm-grid--starter .sm-card :is(.sm-card__t, p, .sm-card__lbl) { color: var(--ink); }
.sm-grid--starter .sm-card::before { -webkit-text-stroke-color: color-mix(in oklab, var(--ink) 45%, transparent); }
.sm-grid--starter .sm-card__go { background: var(--ink); color: var(--b2); }

/* ---------- technology pages: the live intro (no heading) as a deep statement band ---------- */
.sm-lead__in { display: grid; gap: clamp(18px, 2.4vw, 30px); max-width: 1100px; }
.sm-lead__big { font: 500 clamp(21px, 2.3vw, 34px)/1.4 var(--f-body); letter-spacing: -.015em; color: var(--fg); max-width: 38em; }
.sm-lead__big strong { color: var(--b2-on-deep); font-weight: 650; }
.sm-lead__p { color: var(--fg-2); font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.7; max-width: 66ch; }
@media (min-width: 1024px) { .sm-lead__p { margin-inline-start: clamp(80px, 12vw, 220px); } }
.sm-tech .sv-answer + .sm-lead { padding-top: clamp(40px, 5vw, 76px); }

/* ---------- responsive page: definition prose + UAE stat cards ---------- */
.rw-what__prose { display: grid; gap: 1em; max-width: 72ch; }
.rw-what__prose p { color: var(--fg-2); font-size: 17px; line-height: 1.75; }
.rw-what__prose strong { color: var(--fg); }
.rw-what__cards { margin-block: clamp(26px, 3vw, 40px); }
.rw-what__cards code { font: .92em var(--f-mono); background: color-mix(in oklab, var(--ink) 8%, transparent); padding: .1em .35em; border-radius: 6px; }
.sm-page .sm-card p.rw-stat__v { font: 400 clamp(54px, 5.6vw, 92px)/.9 var(--f-num); color: var(--b2-on-deep); letter-spacing: .005em; margin-top: 4px; }
.band--deep .rw-stat::before { display: none; }
.sm-page .sv-pain__tape span[data-w]::before { content: attr(data-w); }
/* cards with an icon: the icon sits in the top band, the title starts below it at every width */
.sm-card:has(.sm-card__ico) { padding-top: 78px; }
.sm-grid--dense .sm-card:has(.sm-card__ico) { padding-top: 70px; }