[data-section="06-pricing"] { display: flex; flex-direction: column; align-items: center; padding: 96px 32px; background: #0a0d12; }
[data-section="06-pricing"] .pr__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 1060px; }
[data-section="06-pricing"] .pr__h2 { margin: 0 0 16px; font: 700 clamp(42px, 5vw, 64px)/1 var(--f-display); letter-spacing: -0.03em; color: #fff; text-align: center; }
[data-section="06-pricing"] .pr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
[data-section="06-pricing"] .pr__card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 24px; color: inherit; text-decoration: none; }
[data-section="06-pricing"] .pr__vis { filter: grayscale(1); transition: filter .4s; }
[data-section="06-pricing"] .pr__v1, [data-section="06-pricing"] .pr__v2 { height: 300px; background: var(--orange); overflow: hidden; }
[data-section="06-pricing"] .pr__v1 { position: relative; display: flex; align-items: center; justify-content: center; }
[data-section="06-pricing"] .pr__v2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-section="06-pricing"] .pr__stage { position: relative; flex: none; width: 891px; height: 634px; transform: scale(.45) translateX(2px); transform-origin: center center; }
/* .pr__stage nudge and the hand/status/notif offsets stay physical: they sit on a photo asset that is not mirrored (RTL mirror notes) */
[data-section="06-pricing"] .pr__hand { position: absolute; top: -31px; left: -85px; width: 1061px; height: 707px; max-width: none; pointer-events: none; }
[data-section="06-pricing"] .pr__status { position: absolute; left: 321px; top: 54px; width: 249px; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
[data-section="06-pricing"] .pr__status span { font: 600 10.5px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #000; }
[data-section="06-pricing"] .pr__status div { display: flex; gap: 4px; align-items: center; }
[data-section="06-pricing"] .pr__status img { height: 8px; width: auto; }
[data-section="06-pricing"] .pr__status img:nth-child(1) { width: 12px; }
[data-section="06-pricing"] .pr__status img:nth-child(2) { width: 11px; }
[data-section="06-pricing"] .pr__status img:nth-child(3) { width: 17px; }
[data-section="06-pricing"] .pr__notif { position: absolute; left: 340px; top: 115px; width: 211px; height: 442px; padding: 6px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; background: #fff; border-radius: 17px; }
[data-section="06-pricing"] .pr__nrow { display: flex; gap: 9px; align-items: center; flex-shrink: 0; }
[data-section="06-pricing"] .pr__tile { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--orange); border-radius: 10px; }
[data-section="06-pricing"] .pr__tile img { width: 19px; height: 24px; object-fit: contain; }
[data-section="06-pricing"] .pr__ntxt { display: flex; flex-direction: column; gap: 1px; }
[data-section="06-pricing"] .pr__ntxt span:first-child { font: 400 7px/18px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #535862; }
[data-section="06-pricing"] .pr__ntxt span:last-child { margin-top: -2px; font: 500 10.5px/16px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #0a0d12; }
[data-section="06-pricing"] .pr__notif video { flex: 1 1 0; min-height: 0; width: 100%; border-radius: 10px; object-fit: cover; }
[data-section="06-pricing"] .pr__body { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; padding: 32px; }
[data-section="06-pricing"] .pr__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
[data-section="06-pricing"] .pr__head h3 { margin: 0; font: 700 30px/1.2 var(--f-display); color: #0a0d12; }
[data-section="06-pricing"] .pr__price { font: 700 26px var(--f-display); letter-spacing: -.3px; color: #0a0d12; transition: color .4s; }
[data-section="06-pricing"] .pr__desc { margin: 0; font: 400 15px/24px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #535862; }
[data-section="06-pricing"] .pr__list { display: flex; flex-direction: column; gap: 14px; }
[data-section="06-pricing"] .pr__li { display: flex; gap: 12px; align-items: center; }
[data-section="06-pricing"] .pr__li img { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
[data-section="06-pricing"] .pr__li span { font: 400 14px/20px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #0a0d12; }
[data-section="06-pricing"] .pr__btn { width: 100%; margin-top: auto; padding: 14px 24px; font: 600 16px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #fff; text-align: center; background: #0a0d12; border-radius: 12px; transition: background .4s; }
@media (hover: hover) {
  [data-section="06-pricing"] .pr__card:hover .pr__vis { filter: none; }
  [data-section="06-pricing"] .pr__card:hover .pr__price { color: var(--orange); }
  [data-section="06-pricing"] .pr__card:hover .pr__btn { background: var(--orange); }
}
[data-section="06-pricing"] .pr__card.is-active .pr__vis { filter: none; }
[data-section="06-pricing"] .pr__card.is-active .pr__price { color: var(--orange); }
[data-section="06-pricing"] .pr__card.is-active .pr__btn { background: var(--orange); }
@media (max-width: 768px) {
  [data-section="06-pricing"] { padding: 64px 16px; }
  [data-section="06-pricing"] .pr__h2 { font-size: clamp(40px, 11vw, 52px); line-height: 1.1; text-wrap: balance; } /* phone type pass: was 36 */
  [data-section="06-pricing"] .pr__grid { grid-template-columns: 1fr; }
  [data-section="06-pricing"] .pr__v1, [data-section="06-pricing"] .pr__v2 { height: auto; aspect-ratio: 522 / 300; }
  [data-section="06-pricing"] .pr__stage { position: absolute; left: 50%; top: 50%; margin: -317px 0 0 -445.5px; transform: scale(var(--pr-s, .35)) translateX(26px); }
  [data-section="06-pricing"] .pr__body { padding: 24px 20px 32px; }
  [data-section="06-pricing"] .pr__head { flex-direction: column; align-items: flex-start; gap: 4px; } /* phone type pass: title over price in both cards (card 2 needs 347px side by side in a 318px row at 390) */
  [data-section="06-pricing"] .pr__head h3 { font-size: 27px; }   /* was 24 */
  [data-section="06-pricing"] .pr__price { font-size: 22px; }      /* was 20 */
  [data-section="06-pricing"] .pr__desc { font-size: 17px; line-height: 28px; text-wrap: pretty; } /* was 15/24 */
  [data-section="06-pricing"] .pr__li { align-items: flex-start; }
  [data-section="06-pricing"] .pr__li img { margin-top: 3px; }
  [data-section="06-pricing"] .pr__li span { font-size: 17px; line-height: 26px; text-wrap: pretty; } /* was 14/20 */
  [data-section="06-pricing"] .pr__btn { font-size: 17px; padding: 16px 20px; }      /* was 16, 14px 24px */
}
[data-section="06-pricing"] .pr__next { margin: -6px 0 0; font: 400 15px/24px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #535862; text-align: center; text-wrap: balance; } /* mobile CRO r2 N5 */
/* phone-only duplicates (mobile component design 3.1): hidden at every width until the phone block reveals them */
[data-section="06-pricing"] .m-only { display: none; }
/* mobile component design 3.1: phone offer card. Gated at 540 so the 550 tablet view and desktop stay pixel-identical.
   Replaces the r1 M6 and r2 N7 max-width:400 blocks (originals in backups/pre-mcd-offer/06-pricing.css). */
@media (max-width: 540px) {
  [data-section="06-pricing"] { padding: 64px 16px 72px; }
  [data-section="06-pricing"] .m-hide { display: none !important; }
  [data-section="06-pricing"] .pr__desc.m-only, [data-section="06-pricing"] .pr__foot.m-only { display: block; }
  [data-section="06-pricing"] .pr__list.m-only { display: flex; }
  [data-section="06-pricing"] .pr__inner { gap: 40px; }
  [data-section="06-pricing"] .pr__h2 { align-self: stretch; margin: 0; font-size: clamp(34px, 9.5vw, 40px); line-height: 1.2; text-align: start; }
  [data-section="06-pricing"] .pr__v1, [data-section="06-pricing"] .pr__v2 { aspect-ratio: 522 / 200; }
  [data-section="06-pricing"] .pr__stage { transform: scale(calc(var(--pr-s, .35) * .7)) translateX(26px); }
  [data-section="06-pricing"] .pr__v2 img { object-position: 50% 35%; }
  [data-section="06-pricing"] .pr__body { padding: 24px 20px; gap: 16px; }
  [data-section="06-pricing"] .pr__head h3 { font-size: 27px; line-height: 1.25; }
  [data-section="06-pricing"] .pr__price { font-size: 22px; }
  [data-section="06-pricing"] .pr__q { display: none; margin: 0; font: 400 14px/22px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #535862; }
  [data-section="06-pricing"] .pr__desc { font-size: 16px; line-height: 27px; color: #0a0d12; text-wrap: balance; }
  [data-section="06-pricing"] .pr__vat-in { color: #535862; }
  /* owner-decision block (m-price-lead on #pricing): price outranks title, VAT under price */
  .m-price-lead[data-section="06-pricing"] .pr__head h3 { font-size: 20px; line-height: 30px; }
  .m-price-lead[data-section="06-pricing"] .pr__price { font-size: 30px; line-height: 36px; }
  .m-price-lead[data-section="06-pricing"] .pr__q { display: block; }
  .m-price-lead[data-section="06-pricing"] .pr__vat-in { display: none; }
  /* five one-line commitments, one coral tick */
  [data-section="06-pricing"] .pr__list.m-only { flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  [data-section="06-pricing"] .pr__list.m-only .pr__li { gap: 10px; align-items: flex-start; }
  [data-section="06-pricing"] .pr__list.m-only .pr__li::before { content: ""; flex: none; width: 6px; height: 11px; margin: 6px 4px 0; border: solid var(--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  [data-section="06-pricing"] .pr__list.m-only .pr__li span { font-size: 16px; line-height: 27px; white-space: nowrap; }
  [data-section="06-pricing"] .pr__foot { margin: 0; padding-top: 12px; border-top: 1px solid #e9eaeb; font: 400 14px/22px "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; color: #535862; }
  [data-section="06-pricing"] .pr__btn { height: 56px; display: flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 999px; font: 700 17px/1 "thmanyah sans", Inter, "IBM Plex Sans Arabic", sans-serif; }
  [data-section="06-pricing"] .pr__next { margin: -8px 0 0; font-size: 14px; line-height: 22px; }
  /* scroll-driven offer row (NOTES-offer-scroll-driven.md; replaces the native swipe row of NOTES-offer-carousel.md).
     js/sections/06-pricing.js adds .pr--pin at <= 540 px with motion allowed, sets the section height and the --pr-* values,
     and translates .pr__grid from the page scroll. Without .pr--pin (reduced motion, no JS) the cards stack vertically.
     Card width min(440px, 100vw - 64px), 16 px gap, 20 px edge inset: card 2 peeks 28 px at rest, card 1 peeks 28 px at the end. */
  .pr--pin[data-section="06-pricing"] { padding: 0; }
  .pr--pin[data-section="06-pricing"] .pr__inner {
    position: sticky; top: 0; height: 100svh; max-width: none; box-sizing: border-box;
    justify-content: center; gap: var(--pr-gap, 20px); padding: var(--pr-top, 92px) 16px var(--pr-bot, 20px);
    overflow: hidden; overflow: clip;
  }
  .pr--pin[data-section="06-pricing"] .pr__grid {
    display: flex; gap: 16px; align-items: stretch;
    align-self: stretch; width: auto; margin-inline: -16px; padding-inline: 20px;
    will-change: transform;
  }
  .pr--pin[data-section="06-pricing"] .pr__card { flex: 0 0 var(--pr-cw, min(440px, calc(100vw - 64px))); zoom: var(--pr-z, 1); }
}

/* card sub-text lines 2026-10-18 (NOTES-card-subtext-lines.md): phones only. The lead's measure followed the card's layout width
   (W / zoom - 40), which changes with both screen width and the height fit, so the two leads split 2 / 3 lines at some phones.
   The lead now sets in a fixed 17.5em measure with its size tied to that same layout width (16px from a 388px screen at zoom 1,
   down to about 14px at 350 when the card is not zoomed), so both leads break identically everywhere: 2 lines each.
   min-height keeps the 2-line box as an alignment safety net only. Revert: delete this block. */
@media (max-width: 540px) {
  [data-section="06-pricing"] .pr__desc.m-only {
    font-size: min(16px, calc((var(--pr-cw, min(440px, calc(100vw - 32px))) - 40px) / 17.5));
    max-inline-size: 17.5em; min-height: 54px;
  }
}

/* ===== offer reposition 2026-10-18 (NOTES-offer-reposition.md) =====
   Two situations instead of a site-or-app question. Both cards share one light surface (cream body, sand media); they differ in
   WHAT they include (their own five rows; the shared commitments sit in a two-line foot) and in the button colour only:
   web = plum, app = coral. Media = two more instances of the coral hero film (journey 'mini', js/films/boot.js) on the hand photo
   glass: the web card loops its web segment, the app card its app segment.
   Revert: cp backups/pre-offer-reposition/06-pricing.css css/sections/06-pricing.css (+ index.html, 06-pricing.js, boot.js). */
[data-section="06-pricing"] .pr__top { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 0 16px; text-align: center; }
[data-section="06-pricing"] .pr__top .pr__h2 { margin: 0; }
[data-section="06-pricing"] .pr__sub { margin: 0; font: 400 19px/30px var(--f-ui); color: #a4a9b4; text-wrap: balance; }
[data-section="06-pricing"] .pr__card { background: #f5f0e7; }
[data-section="06-pricing"] .pr__v1 { background: #e4d9c6; }
[data-section="06-pricing"] .pr__head { flex-direction: column; align-items: flex-start; gap: 6px; }
[data-section="06-pricing"] .pr__head h3, [data-section="06-pricing"] .pr__price { white-space: nowrap; }
[data-section="06-pricing"] .pr__tag { display: flex; align-items: center; gap: 8px; margin: 0 0 -6px; font: 600 15px/22px var(--f-ui); color: #535862; white-space: nowrap; }
[data-section="06-pricing"] .pr__tic { flex: none; }
[data-section="06-pricing"] .pr__card--web .pr__tic { color: #512d4c; }
[data-section="06-pricing"] .pr__card--app .pr__tic { color: var(--orange); }
[data-section="06-pricing"] .pr__desc.m-hide .pr__dl { display: block; color: #0a0d12; text-wrap: balance; }
[data-section="06-pricing"] .pr__desc.m-hide .pr__dv { display: block; }
[data-section="06-pricing"] .pr__foot { margin: 0; padding-top: 14px; border-top: 1px solid #e3dccf; font: 400 14px/22px var(--f-ui); color: #535862; }
[data-section="06-pricing"] .pr__foot .pr__cl { display: block; white-space: nowrap; }
/* buttons: the only colour split. Web = plum (white label 11.48:1), app = coral (white label 2.96:1, same treatment as every coral pill) */
[data-section="06-pricing"] .pr__card--web .pr__btn,
[data-section="06-pricing"] .pr__card--web:hover .pr__btn,
[data-section="06-pricing"] .pr__card--web.is-active .pr__btn { background: #512d4c; }
[data-section="06-pricing"] .pr__card--app .pr__btn { background: var(--orange); }
@media (hover: hover) { [data-section="06-pricing"] .pr__card--web:hover .pr__price { color: #512d4c; } }
[data-section="06-pricing"] .pr__card--web.is-active .pr__price { color: #512d4c; }
/* card media (round 4, film legibility): no hand photo. Each card shows a window onto the phone screen with the film at about
   1.16x its native size on desktop (smallest film type 9.5 px -> 11 px) and the full media width on phones (about 1x). The window
   is shorter than the screen, so js/films/boot.js pans the film (translateY on .pr__film) to the beat's content. */
/* hand photo restored (2026-10-19f, NOTES-hand-photo.md): the .pr__win window is gone; the film plays on the photo's phone glass
   (hero geometry: 246x542 at 322.5/54.5). The .pr__stage/.pr__hand rules above place the photo. */
[data-section="06-pricing"] .pr__screen { position: absolute; left: 322.5px; top: 54.5px; width: 246px; height: 542px; border-radius: 36.8px; overflow: hidden; background: #fff; }
/* offer films instant (2026-10-18, NOTES-offer-films-instant.md): until the film paints, the glass shows its first frame's colours, not white */
[data-section="06-pricing"] .pr__card--web .pr__screen { background: linear-gradient(180deg, #4a4a4a 0, #404040 20%, #e8e8e8 50%, #f2f2f2 100%); }
[data-section="06-pricing"] .pr__card--app .pr__screen { background: #2e2e2e; }
[data-section="06-pricing"] .pr__island { position: absolute; left: 406.1px; top: 61.7px; width: 78.8px; height: 23.4px; border-radius: 11.7px; background: #0e0e0e; pointer-events: none; }
[data-section="06-pricing"] .pr__film { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 300 / 661; opacity: 0;
  transition: opacity .5s ease, transform .8s cubic-bezier(.45,0,.2,1); will-change: transform; }
[data-section="06-pricing"] .pr__film.is-film { opacity: 1; }
html.reduce-motion [data-section="06-pricing"] .pr__film { transition: none; }
@media (max-width: 768px) {
  [data-section="06-pricing"] .pr__v1 { height: auto; aspect-ratio: 522 / 300; }
  [data-section="06-pricing"] .pr__sub { font-size: 18px; line-height: 28px; }
  [data-section="06-pricing"] .pr__dl .pr__cl { display: block; }   /* stacked cards: the lead breaks at its comma in both cards */
}
@media (max-width: 540px) {
  [data-section="06-pricing"] .pr__top { align-self: stretch; align-items: stretch; gap: 10px; margin: 0; text-align: start; }
  [data-section="06-pricing"] .pr__sub { font-size: 16px; line-height: 25px; text-wrap: wrap; }
  [data-section="06-pricing"] .pr__sub .pr__cl, [data-section="06-pricing"] .pr__desc.m-only .pr__cl { display: block; }
  [data-section="06-pricing"] .pr__tag { margin: 0 0 -8px; font-size: 14px; line-height: 20px; gap: 7px; }
  [data-section="06-pricing"] .pr__tic { width: 16px; height: 16px; }
  [data-section="06-pricing"] .pr__head { gap: 4px; }
  [data-section="06-pricing"] .pr__card--web .pr__list.m-only .pr__li::before { border-color: #512d4c; }
  [data-section="06-pricing"] .pr__foot { padding-top: 12px; border-top-color: #e3dccf; }
  [data-section="06-pricing"] .pr__v1 { height: auto; aspect-ratio: 522 / 230; }
  .pr--pin[data-section="06-pricing"] .pr__v1 { aspect-ratio: 522 / 200; }   /* pinned row: a lower media band buys back the tag line height */
  .pr--pin[data-section="06-pricing"] .pr__body { gap: 13px; }
  .pr--pin[data-section="06-pricing"] .pr__tag { margin-bottom: -5px; }
  .pr--pin[data-section="06-pricing"] .pr__next { margin-top: -6px; }
  /* phone height recovery (owner: phone text must not shrink): title only (the lead shows >= 541 px), the situation line folds
     into the phone lead, and the vertical gaps tighten; type sizes are unchanged */
  [data-section="06-pricing"] .pr__sub, [data-section="06-pricing"] .pr__tag { display: none; }
  .pr--pin[data-section="06-pricing"] .pr__body { gap: 12px; padding: 18px 20px 16px; }
  .pr--pin[data-section="06-pricing"] .pr__list.m-only { gap: 4px; }
  .pr--pin[data-section="06-pricing"] .pr__head { gap: 2px; }
  .pr--pin[data-section="06-pricing"] .pr__foot { padding-top: 10px; }
}

/* offer wash (2026-10-19e): solid colour behind hand + phone on hover / focus / active; no glass */
[data-section="06-pricing"] .pr__v1 { transition: background-color .3s; }
@media (prefers-reduced-motion: reduce) { [data-section="06-pricing"] .pr__v1 { transition: none; } }
@media (hover: hover) and (pointer: fine) {
  [data-section="06-pricing"] .pr__card--web:hover .pr__v1 { background: #512d4c; }
  [data-section="06-pricing"] .pr__card--app:hover .pr__v1 { background: #f26b6c; }
}
[data-section="06-pricing"] .pr__card--web:focus-within .pr__v1, [data-section="06-pricing"] .pr__card--web.is-active .pr__v1, [data-section="06-pricing"] .pr__card--web:active .pr__v1 { background: #512d4c; }
[data-section="06-pricing"] .pr__card--app:focus-within .pr__v1, [data-section="06-pricing"] .pr__card--app.is-active .pr__v1, [data-section="06-pricing"] .pr__card--app:active .pr__v1 { background: #f26b6c; }
[data-section="06-pricing"] .pr__card:focus-within .pr__vis, [data-section="06-pricing"] .pr__card.is-active .pr__vis, [data-section="06-pricing"] .pr__card:active .pr__vis { filter: none; }
/* the film draws its own iOS status bar: the page's one hides once the film is in (as the hero does) */
[data-section="06-pricing"] .pr__screen:has(.is-film) ~ .pr__status { visibility: hidden; }