@cxpinsight/react-native 0.17.7 → 0.18.0

package/lib/survey/SurveyModal.js

@@ -33,12 +33,18 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SWIPE_DISMISS_VELOCITY = exports.SWIPE_DISMISS_PX = exports.SWIPE_CLAIM_PX = void 0;
 exports.stylePlatformSlice = stylePlatformSlice;
 exports.topInsetForHeight = topInsetForHeight;
 exports.resolvePopupTop = resolvePopupTop;
+exports.shouldClaimSwipe = shouldClaimSwipe;
+exports.swipeOffset = swipeOffset;
+exports.swipeRelease = swipeRelease;
+exports.surfaceScrolls = surfaceScrolls;
 exports.SurveyModal = SurveyModal;
+const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_2 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const types_1 = require("../types");
 const storage = __importStar(require("../core/storage"));
@@ -55,6 +61,7 @@ const MatrixDynamicQuestion_1 = require("./questions/MatrixDynamicQuestion");
 const PanelDynamicQuestion_1 = require("./questions/PanelDynamicQuestion");
 const DateQuestion_1 = require("./questions/DateQuestion");
 const survey_spec_1 = require("@cxpinsight/survey-spec");
+const mobileRecorder_1 = require("../core/mobileRecorder");
 const SignatureQuestion_1 = require("./questions/SignatureQuestion");
 const FileUploadQuestion_1 = require("./questions/FileUploadQuestion");
 const MultiTextQuestion_1 = require("./questions/MultiTextQuestion");
@@ -69,6 +76,7 @@ const validate_1 = require("./validate");
 const pagesFromV1_1 = require("./pagesFromV1");
 const themePalette_1 = require("./themePalette");
 const styleContract_1 = require("./styleContract");
+const fadeGradient_1 = require("./fadeGradient");
 const CXPinsight_1 = require("../CXPinsight");
 // ISO 639-1 codes for right-to-left scripts. When the respondent picks
 // one of these in the language switcher, the modal flips to RTL even if
@@ -145,10 +153,96 @@ function resolvePopupTop(opts) {
     // A card taller than the safe band pins to the top rather than going negative.
     return Math.max(minTop, maxTop > minTop ? Math.min(wanted, maxTop) : minTop);
 }
+/* ── Swipe to dismiss: the decisions, as named rules ───────────────────────
+ *
+ * A push notification goes away when you flick it, and the mobile display
+ * slice drops the ✕ for exactly that reason — so on a notification this
+ * gesture is not a convenience, it is the only way out.
+ *
+ * Every threshold below was wrong at least once, and each one was wrong in a
+ * way that surfaced as the same single report: "the notification doesn't swipe
+ * away". They live out here as named, testable rules rather than as numbers
+ * inside the gesture handler, because that report could not tell them apart.
+ */
+/** Travel, in points, at which a touch stops being a tap and becomes a drag. */
+exports.SWIPE_CLAIM_PX = 8;
+/** Travel at which letting go dismisses, whatever the speed. */
+exports.SWIPE_DISMISS_PX = 40;
+/** Speed at which letting go dismisses, whatever the travel. */
+exports.SWIPE_DISMISS_VELOCITY = 0.3;
+/**
+ * Should the card take this gesture off whatever is underneath it?
+ *
+ * Asked on the CAPTURE phase, which is what makes the whole surface a handle.
+ * On the bubble phase the card is consulted only after some descendant has
+ * already become the responder — and on a notification that means the action
+ * button and nothing else. Touch the title, the thumbnail or the body and no
+ * view claims the touch, so the card was never asked and the banner could only
+ * be dragged by its button.
+ *
+ * The threshold is what keeps a button a button: a press that does not travel
+ * is never claimed here, so it reaches the button untouched.
+ */
+function shouldClaimSwipe(swipeable, dx, dy) {
+    return swipeable && (Math.abs(dx) > exports.SWIPE_CLAIM_PX || Math.abs(dy) > exports.SWIPE_CLAIM_PX);
+}
+/**
+ * Where the card sits while the finger is still down.
+ *
+ * A banner travels off its own edge and no further: dragging a top banner
+ * downwards is a pull, not a dismissal, so it does not follow.
+ */
+function swipeOffset(placement, dx, dy) {
+    if (Math.abs(dx) > Math.abs(dy))
+        return { x: dx, y: 0 };
+    const clamped = placement === 'top' ? Math.min(0, dy)
+        : placement === 'bottom' ? Math.max(0, dy) : dy;
+    return { x: 0, y: clamped };
+}
+/**
+ * Does letting go here dismiss the card?
+ *
+ * 56px with a 0.5 velocity escape assumed the gesture is thrown. A deliberate,
+ * slow drag is just as clear an instruction and was being refused: measured on
+ * a real attempt, 46px of travel at 0.01 velocity — unmistakably someone
+ * pushing the card off screen — sprang back, because it missed both gates.
+ *
+ * 40px is still far enough that a stray touch cannot reach it (a drag is not
+ * even claimed below 8px, and a tap typically travels 2-3), and 0.3 catches a
+ * light flick that covers less ground.
+ */
+function swipeRelease(g) {
+    const horizontal = Math.abs(g.dx) > Math.abs(g.dy);
+    const moved = horizontal ? g.dx : g.dy;
+    const speed = Math.abs(horizontal ? g.vx : g.vy);
+    return {
+        horizontal,
+        moved,
+        dismiss: Math.abs(moved) >= exports.SWIPE_DISMISS_PX || speed > exports.SWIPE_DISMISS_VELOCITY,
+    };
+}
+/**
+ * May the card's body scroll?
+ *
+ * NOT on a notification, and the reason is the swipe rather than the layout.
+ * On iOS that body is a native UIScrollView: once it starts scrolling it owns
+ * the touch and the JS responder cannot take it back, so claiming the gesture
+ * on the card achieved nothing. The travel went into scrolling content that
+ * does not overflow, and the pan saw ~19px at release — under any dismissal
+ * threshold worth having. The give-away was the SDK's own capture: ten
+ * `scroll` events queued between the card claiming the gesture and the release.
+ *
+ * Keyed off the INTERACTION, not off whether a thumbnail was composed. A
+ * notification with no image is still two lines and a button, and gating this
+ * on the image is what left exactly those notifications un-dismissable.
+ */
+function surfaceScrolls(interactionKind) {
+    return String(interactionKind || '').toLowerCase() !== 'notify';
+}
 function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
-    const [responses, setResponses] = (0, react_1.useState)({});
-    const [showThankYou, setShowThankYou] = (0, react_1.useState)(false);
+    const [currentPage, setCurrentPage] = (0, react_2.useState)(0);
+    const [responses, setResponses] = (0, react_2.useState)({});
+    const [showThankYou, setShowThankYou] = (0, react_2.useState)(false);
     // Back-navigation history. Non-linear jumps via branches mean the
     // previous page is NOT always currentPage - 1; the stack records
     // the pages the respondent actually walked through. Matches the
@@ -156,55 +250,74 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // v1.1 multi-flow (spec §28): also records the flow the respondent
     // was on at that point — Back after a fork restores BOTH pieces of
     // state.
-    const [history, setHistory] = (0, react_1.useState)([]);
+    const [history, setHistory] = (0, react_2.useState)([]);
     // Multi-flow state (spec §28). currentFlow tracks which flow the
     // respondent is walking through right now. undefined = root flow.
     // When a fork branch fires we push the origin onto forkStack and
     // switch currentFlow to the branch's target flowId.
-    const [currentFlow, setCurrentFlow] = (0, react_1.useState)(undefined);
-    const [forkStack, setForkStack] = (0, react_1.useState)([]);
+    const [currentFlow, setCurrentFlow] = (0, react_2.useState)(undefined);
+    const [forkStack, setForkStack] = (0, react_2.useState)([]);
     // Per-question validation errors surfaced on Next / Submit.
     // Populated when a required question has no answer; cleared when
     // the respondent supplies one. Keyed by question id/name so a
     // page with multiple required questions can flag several at once.
     // Web renderer keeps a `touched` set to live-re-validate after the
     // first flag; mobile MVP just clears on updateResponse for now.
-    const [errors, setErrors] = (0, react_1.useState)({});
+    const [errors, setErrors] = (0, react_2.useState)({});
     // Set when the server rejects a submit (returns false). Shown near the
     // footer; cleared on retry / navigation / dismiss.
-    const [submitError, setSubmitError] = (0, react_1.useState)('');
+    const [submitError, setSubmitError] = (0, react_2.useState)('');
     // Hands-free voice state. voiceIdxRef walks the current page's questions;
     // voiceDoneRef flips once the last page has been submitted by voice.
-    const voiceIdxRef = react_1.default.useRef(0);
-    const voiceDoneRef = react_1.default.useRef(false);
-    const [voiceActive, setVoiceActive] = (0, react_1.useState)(false);
-    const [voicePhase, setVoicePhase] = (0, react_1.useState)('idle');
-    const [voiceTranscript, setVoiceTranscript] = (0, react_1.useState)('');
+    const voiceIdxRef = react_2.default.useRef(0);
+    const voiceDoneRef = react_2.default.useRef(false);
+    const [voiceActive, setVoiceActive] = (0, react_2.useState)(false);
+    const [voicePhase, setVoicePhase] = (0, react_2.useState)('idle');
+    const [voiceTranscript, setVoiceTranscript] = (0, react_2.useState)('');
     // Selected language for the current session. Initialized to
     // survey.defaultLanguage; the useEffect below hydrates from
     // AsyncStorage on mount so a repeat respondent keeps their
     // previous pick. Only restored if that language is still in the
     // current survey's languages[] — an older stored value that's no
     // longer offered silently falls back to defaultLanguage.
-    const [currentLanguage, setCurrentLanguageRaw] = (0, react_1.useState)(survey.defaultLanguage);
-    const setCurrentLanguage = (0, react_1.useCallback)((next) => {
+    const [currentLanguage, setCurrentLanguageRaw] = (0, react_2.useState)(survey.defaultLanguage);
+    const setCurrentLanguage = (0, react_2.useCallback)((next) => {
         setCurrentLanguageRaw(next);
         // Fire-and-forget — persistence is a "nice to have", never
         // block the switcher UX on a slow storage write.
         storage.set(types_1.STORAGE_KEYS.SURVEY_LANGUAGE, next).catch(() => { });
     }, []);
-    (0, react_1.useEffect)(() => {
+    // THE RECORDING NEEDS A HANDLE ON THIS CARD.
+    //
+    // A <Modal> is its own UIWindow on iOS, and the host's captureScreen returns
+    // the topmost one — so a frame taken while this is up cannot be trusted to
+    // contain either the card or the app behind it. Handing the recorder the
+    // card's own view removes the guesswork. Registered while it is on screen
+    // and cleared on the way out, so no other frame is captured through it.
+    const cardViewRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
+        (0, mobileRecorder_1.registerSurveyView)(cardViewRef);
+        return () => (0, mobileRecorder_1.clearSurveyView)();
+    }, []);
+    (0, react_2.useEffect)(() => {
         let cancelled = false;
         // Device locale → the survey's matching offered language, when the respondent
         // has no saved pick — so an Arabic device opens the survey in Arabic instead of
         // defaultLanguage. A saved manual switch still wins over the device locale.
         let deviceLang;
-        try {
-            const raw = (0, deviceInfo_1.getDeviceInfo)();
-            const primary = (typeof raw.language === 'string' ? raw.language : '').split(/[-_]/)[0].toLowerCase();
-            deviceLang = primary
+        const offered = (tag) => {
+            const primary = (typeof tag === 'string' ? tag : '').split(/[-_]/)[0].toLowerCase();
+            return primary
                 ? survey.languages?.find((l) => l.split(/[-_]/)[0].toLowerCase() === primary)
                 : undefined;
+        };
+        try {
+            // identify({ language }) FIRST, then the device locale. A host that knows
+            // its signed-in reader prefers Arabic has said something more reliable
+            // than the handset's setting, and it was the one signal never asked for
+            // — the same gap theme had, on the other half of the same cascade.
+            deviceLang = offered(CXPinsight_1.CXPinsight._getUserIdentity()?.language)
+                || offered((0, deviceInfo_1.getDeviceInfo)().language);
         }
         catch { /* no locale available → stays defaultLanguage */ }
         storage.get(types_1.STORAGE_KEYS.SURVEY_LANGUAGE).then((saved) => {
@@ -231,7 +344,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     const presentationMode = typeof survey.settings?.presentationMode === 'string'
         ? survey.settings.presentationMode
         : undefined;
-    const pages = (0, react_1.useMemo)(() => {
+    const pages = (0, react_2.useMemo)(() => {
         if (survey.rawQuestions) {
             return (0, pagesFromV1_1.pagesFromV1)({ questions: survey.rawQuestions, sections: survey.rawSections }, currentFlow, presentationMode);
         }
@@ -258,20 +371,24 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     //                   deviceType), for authors keying on layout tier
     // A change listener re-mounts the attribute context on OS theme toggles
     // so mid-session `{{device.theme}}` conditions stay accurate.
-    const [colorScheme, setColorScheme] = (0, react_1.useState)(() => react_native_1.Appearance.getColorScheme() ?? undefined);
-    (0, react_1.useEffect)(() => {
+    const [colorScheme, setColorScheme] = (0, react_2.useState)(() => react_native_1.Appearance.getColorScheme() ?? undefined);
+    (0, react_2.useEffect)(() => {
         const sub = react_native_1.Appearance.addChangeListener((prefs) => {
             setColorScheme(prefs.colorScheme ?? undefined);
         });
         return () => { sub?.remove?.(); };
     }, []);
-    const attributeContext = (0, react_1.useMemo)(() => {
+    const attributeContext = (0, react_2.useMemo)(() => {
         const identity = (CXPinsight_1.CXPinsight._getUserIdentity() ?? {});
         const { id: _omitId, ...userTraits } = identity;
         const raw = (0, deviceInfo_1.getDeviceInfo)();
         const langTag = typeof raw.language === 'string' ? raw.language : 'en';
         const langPrimary = langTag.split(/[-_]/)[0].toLowerCase();
         const screenClass = raw.deviceType || 'mobile';
+        // The triggering event, under the same names web exposes — {{eventName}},
+        // {{eventData.total}}, {{userProperties.plan}} — so one authored string
+        // resolves the same on both runtimes.
+        const trig = survey.triggerContext;
         const deviceSignals = {
             ...raw,
             language: langPrimary, // override wire language with primary tag
@@ -284,9 +401,21 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             user: userTraits,
         });
     }, [colorScheme]);
+    // Merged OVER the attribute floor rather than into it, because the trigger
+    // changes per firing while the floor is memoised on the colour scheme.
+    const interpolationFloor = (0, react_2.useMemo)(() => {
+        const trig = survey.triggerContext;
+        if (!trig)
+            return attributeContext;
+        return {
+            ...attributeContext,
+            ...(trig.eventName != null ? { eventName: trig.eventName } : null),
+            ...(trig.eventData ? { eventData: trig.eventData } : null),
+        };
+    }, [attributeContext, survey]);
     const evalCtx = {
         answers: responses,
-        variables: (0, variablesResolver_1.resolveVariables)(survey.variables, { sdkIdentifyData: CXPinsight_1.CXPinsight._getUserIdentity() }, responses, attributeContext),
+        variables: (0, variablesResolver_1.resolveVariables)(survey.variables, { sdkIdentifyData: CXPinsight_1.CXPinsight._getUserIdentity() }, responses, interpolationFloor),
     };
     // showWhen / hideWhen filter (spec §7). Web renderer semantics:
     // showWhen truthy AND hideWhen falsy → visible. A missing condition
@@ -357,7 +486,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // and the React renderer so a Notify/Offer/Comply template behaves the same
     // on a phone as it does on a website. Suppresses the footer below.
     const impliedNow = (0, survey_spec_1.impliedStepActions)(currentQuestions);
-    const updateResponse = (0, react_1.useCallback)((name, value) => {
+    const updateResponse = (0, react_2.useCallback)((name, value) => {
         setResponses((prev) => ({ ...prev, [name]: value }));
         // Live-clear the error entry the moment the new answer passes
         // validation. Re-runs the same validator handleNext would fire,
@@ -486,6 +615,12 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             return; // keep the survey open for a retry
         }
         setSubmitError('');
+        // See the provider: a notification has no thank-you ending. Skipping the
+        // state entirely also skips the 2.5s window the card would otherwise sit
+        // there re-rendering after the person has already acted.
+        if (String(survey.interactionType || '')
+            .toLowerCase() === 'notify')
+            return;
         setShowThankYou(true);
         const duration = survey.settings?.thankYouDuration ?? 2500;
         setTimeout(() => {
@@ -508,8 +643,8 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
      * them to the problem and they must swipe back through every question before
      * it. Web and link surveys move the cursor; this brings the app in line.
      */
-    const questionRefs = react_1.default.useRef({});
-    const handleNextRef = react_1.default.useRef(() => { });
+    const questionRefs = react_2.default.useRef({});
+    const handleNextRef = react_2.default.useRef(() => { });
     const handleNext = () => {
         const pageErrors = validateCurrentPage();
         if (Object.keys(pageErrors).length > 0) {
@@ -605,7 +740,68 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     };
     // Kept fresh so the memoized pan responder never dismisses through a stale
     // closure — the same reason handleNextRef exists.
-    const handleDismissRef = (0, react_1.useRef)(() => { });
+    /**
+     * WHAT PRESSING AN IMPLIED ACTION DOES — the press, separated from the thing
+     * pressed.
+     *
+     * This lived inside the action button's own `onPress`, so it could only ever
+     * happen if that button was on screen. Hiding it — which is the whole point
+     * of handing the press to the card — left the phone with no way to act on
+     * the interaction at all, because unlike web the card here was never
+     * pressable in the first place. Same defect, one step worse.
+     */
+    const pressImplied = (0, react_2.useCallback)((key, a) => {
+        // "Remind me later" dismisses instead of answering, so the cadence records
+        // a SKIP and brings the interaction back after the author's wait.
+        // Answering would record a decision this person explicitly declined to
+        // make and retire it against maxSubmissions. It does not follow the
+        // action's link either — postponing is not a request to go anywhere.
+        if ((0, survey_spec_1.isDeferChoice)(a, survey.interactionType)) {
+            // A postponement, not a refusal — the server tallies it separately and
+            // the cadence treats it as a skip rather than an answer.
+            handleDismissRef.current('defer');
+            return;
+        }
+        updateResponse(key, a.value);
+        // Deferred a tick so setResponses has flushed before handleNext validates
+        // what it just replaced.
+        setTimeout(() => handleNextRef.current(), 0);
+        // Follow the action's deep link. `myapp://cart` is the point of this on a
+        // phone; Linking refuses a scheme the OS has no handler for, so a bad
+        // target fails quietly rather than crashing the survey. The href already
+        // passed safeActionHref in the shared spec.
+        if (a.href) {
+            react_native_1.Linking.openURL(a.href).catch(() => { });
+        }
+    }, [survey, updateResponse]);
+    const handleDismissRef = (0, react_2.useRef)(() => { });
+    // A PRESS ON A CONTROL IS A PRESS, NOT A DRAG.
+    //
+    // The card's swipe reads raw touch events, and those BUBBLE — a touch that
+    // begins on the action button reaches the card too, so the card followed the
+    // finger while someone was simply pressing "Resume". That is the whole
+    // surface behaving as a handle in the one place it must not.
+    //
+    // `onPressIn`, NOT `onTouchStart`: TouchableOpacity enumerates the props it
+    // passes to its underlying view and onTouchStart is not among them, so a
+    // handler put there is accepted by the type (it extends ViewProps) and then
+    // silently dropped at runtime. onPressIn is consumed by Pressability itself,
+    // which is why it arrives.
+    //
+    // Written so the ORDER of the two events cannot matter, because it is not
+    // guaranteed: if the press registers first the card never starts a swipe, and
+    // if the card gets there first the press takes the swipe back — safely,
+    // because at that point the finger has not travelled and nothing has moved.
+    const pressingControl = (0, react_2.useRef)(false);
+    const touchSwipe = (0, react_2.useRef)(null);
+    const swipeExempt = {
+        onPressIn: () => {
+            pressingControl.current = true;
+            if (touchSwipe.current && !touchSwipe.current.moved)
+                touchSwipe.current = null;
+        },
+        onPressOut: () => { pressingControl.current = false; },
+    };
     /**
      * Whether a compliance interaction currently lets the respondent leave.
      *
@@ -614,7 +810,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
      * would treat "Continue" as consent. Mirrors the web SDK and the survey
      * service; the shared gate makes the decision, this only finds its inputs.
      */
-    const complianceVerdict = (0, react_1.useMemo)(() => {
+    const complianceVerdict = (0, react_2.useMemo)(() => {
         const qs = (survey.rawQuestions ?? []);
         const acts = (0, survey_spec_1.impliedStepActions)(qs) || [];
         let action = null;
@@ -635,7 +831,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             compliance: sv.compliance,
         });
     }, [survey, responses]);
-    const handleDismiss = () => {
+    const handleDismiss = (reason) => {
         // A compliance check that closes on request is not a compliance check.
         // Say why instead of appearing broken — being held with no explanation is
         // indistinguishable from the surface having frozen.
@@ -654,7 +850,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         setSubmitError('');
         setCurrentFlow(undefined);
         setForkStack([]);
-        onDismiss();
+        onDismiss(reason);
     };
     handleDismissRef.current = handleDismiss;
     // Normalize the v1.1 options[] {value,label} and the legacy
@@ -861,43 +1057,46 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                 // can handle.
                 const actions = (0, survey_spec_1.impliedActions)(question, (t) => (0, interpolate_1.interpolatePlain)(t, evalCtx));
                 const list = actions.length ? actions : [{ value: 'acknowledged', label: 'Continue' }];
+                // THE CARD MAY BE CARRYING THE ACTION ALONE.
+                //
+                // One rule, in the shared spec, so the three renderers cannot disagree
+                // about when a button disappears. It refuses the hide unless the whole
+                // card can take the press, so this can never leave a surface with
+                // something to say and no way to say yes to it.
+                if (!(0, survey_spec_1.showActionButton)(display, list))
+                    return null;
                 // Consent choices render identically — see impliedEqualProminence.
                 const equal = (0, survey_spec_1.impliedEqualProminence)([question]);
-                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.impliedActions, children: list.map((a, i) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { 
+                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.impliedActions, children: list.map((a, i) => ((0, react_1.createElement)(react_native_1.TouchableOpacity, { ...swipeExempt, key: a.value || String(i), 
                         // The press is both the answer and the Next — the footer is
                         // hidden on this step. Deferred a tick so setResponses has
                         // flushed before handleNext validates what it just replaced.
-                        onPress: () => {
-                            // "Remind me later" dismisses instead of answering, so the
-                            // cadence records a SKIP and brings the interaction back
-                            // after the author's wait. Answering would record a decision
-                            // this person explicitly declined to make and retire it
-                            // against maxSubmissions. It does not follow the action's
-                            // link either — postponing is not a request to go anywhere.
-                            // Through isDeferChoice, not the raw flag: it is false for a
-                            // compliance check, and a compliance check you postpone by
-                            // pressing a button is one you never have to answer.
-                            if ((0, survey_spec_1.isDeferChoice)(a, survey.interactionType)) {
-                                handleDismissRef.current();
-                                return;
-                            }
-                            updateResponse(key, a.value);
-                            setTimeout(() => handleNextRef.current(), 0);
-                            // Follow the action's deep link. `myapp://cart` is the point
-                            // of this on a phone; Linking refuses a scheme the OS has no
-                            // handler for, so a bad target fails quietly rather than
-                            // crashing the survey. The href already passed
-                            // safeActionHref in the shared spec.
-                            if (a.href) {
-                                react_native_1.Linking.openURL(a.href).catch(() => { });
-                            }
-                        }, accessibilityRole: "button", accessibilityState: { selected: val === a.value }, style: [
+                        // The press is both the answer and the Next — the footer is
+                        // hidden on this step. Its body is pressImplied, so the CARD
+                        // can do exactly the same thing when this button is not drawn.
+                        onPress: () => pressImplied(key, a), accessibilityRole: "button", accessibilityState: { selected: val === a.value }, style: [
                             styles.impliedBtn,
+                            // BESIDE THE TEXT, THE BUTTON IS AS WIDE AS ITS LABEL.
+                            //
+                            // impliedBtn is built for the full-width layout underneath the
+                            // content: flexGrow 1 over a 140pt basis, so two actions share
+                            // the row evenly. Beside the body that basis is most of the
+                            // card, and every point it takes is a point the text wraps
+                            // into. Here it grows from nothing, and its side padding is
+                            // halved — a banner action is a word or two, and 18pt a side
+                            // was sized for a button standing on its own.
+                            notifyBeside && {
+                                flexGrow: 0,
+                                flexBasis: 'auto',
+                                paddingHorizontal: Math.max(6, Math.round(contract.buttonPaddingX / 2)),
+                            },
                             // The first action is the affirmative one. An author who
                             // lists "Decline" first gets it emphasised — their call.
                             (i === 0 && !equal) ? styles.impliedPrimary : styles.impliedSecondary,
+                            (i === 0 && !equal) && authoredBtnBorder ? { borderColor: authoredBtnBorder } : null,
                             val === a.value && styles.impliedChosen,
-                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: (i === 0 && !equal) ? styles.impliedPrimaryLabel : styles.impliedSecondaryLabel, children: a.label }) }, a.value || String(i)))) }));
+                        ] },
+                        (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: (i === 0 && !equal) ? styles.impliedPrimaryLabel : styles.impliedSecondaryLabel, children: a.label })))) }));
             },
             'signature': () => {
                 if (!(0, SignatureQuestion_1.isSignatureAvailable)())
@@ -998,10 +1197,10 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // A ref carries the latest render values so the (stable) controller always
     // reads fresh page/question state — commit advances the page and awaits the
     // re-render before the session reads the next question.
-    const voiceRef = react_1.default.useRef({ currentQuestions: [], isLastPage: false, language: 'en', intro: '', outro: '', updateResponse: () => { }, handleNext: () => { } });
+    const voiceRef = react_2.default.useRef({ currentQuestions: [], isLastPage: false, language: 'en', intro: '', outro: '', updateResponse: () => { }, handleNext: () => { } });
     const voiceLangM = currentLanguage || survey.defaultLanguage || 'en';
     // Voice-only viability across the whole survey (all pages' questions).
-    const voiceAudit = (0, react_1.useMemo)(() => (0, voiceParsers_1.auditVoiceQuestions)(pages.flatMap((p) => p.elements)), [pages]);
+    const voiceAudit = (0, react_2.useMemo)(() => (0, voiceParsers_1.auditVoiceQuestions)(pages.flatMap((p) => p.elements)), [pages]);
     const voiceIntroM = [
         String(survey.title || '').replace(/<[^>]*>/g, '').trim(),
         String(survey.description || '').replace(/<[^>]*>/g, '').trim(),
@@ -1009,7 +1208,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     ].filter(Boolean).join('. ');
     const voiceOutroM = String((survey.settings?.thankYouMessage) || survey.thankYouMessage || '').replace(/<[^>]*>/g, '').trim();
     voiceRef.current = { currentQuestions, isLastPage, language: voiceLangM, intro: voiceIntroM, outro: voiceOutroM, updateResponse, handleNext };
-    const buildVoiceController = (0, react_1.useCallback)(() => {
+    const buildVoiceController = (0, react_2.useCallback)(() => {
         const advance = () => {
             voiceIdxRef.current++;
             const v = voiceRef.current;
@@ -1048,7 +1247,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             onStop: () => { setVoiceActive(false); setVoicePhase('idle'); setVoiceTranscript(''); },
         };
     }, [currentLanguage]); // eslint-disable-line react-hooks/exhaustive-deps
-    const toggleVoice = (0, react_1.useCallback)(() => {
+    const toggleVoice = (0, react_2.useCallback)(() => {
         if ((0, handsFreeVoice_1.isVoiceActive)()) {
             (0, handsFreeVoice_1.stopVoice)();
             return;
@@ -1065,9 +1264,9 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     }, [buildVoiceController, voiceAudit.blocking.length]);
     // Reset the walker when the page changes via MANUAL navigation (voice manages
     // its own index across its advances); always stop voice on unmount.
-    (0, react_1.useEffect)(() => { if (!(0, handsFreeVoice_1.isVoiceActive)())
+    (0, react_2.useEffect)(() => { if (!(0, handsFreeVoice_1.isVoiceActive)())
         voiceIdxRef.current = 0; }, [currentPage, currentFlow]);
-    (0, react_1.useEffect)(() => () => { (0, handsFreeVoice_1.stopVoice)(); }, []);
+    (0, react_2.useEffect)(() => () => { (0, handsFreeVoice_1.stopVoice)(); }, []);
     const voiceOn = (0, handsFreeVoice_1.isVoiceSupported)() && survey.voiceMode !== false;
     const showVoiceMic = voiceOn && !(history.length > 0 || currentPage > 0);
     // branding.typography.fontFamily overrides the system font on every
@@ -1085,10 +1284,21 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // application — see the note in the web SDK's appDefaults().
     const _detached = Boolean(survey.settings?.themeDetached);
     const _asdMobile = _detached ? {} : (survey.applicationSurveyDefaults || {});
+    // The platform slice of branding.style, read early because the font is
+    // resolved above the block that computes it for everything else.
+    const _authoredStyleFont = stylePlatformSlice(survey.branding?.style).fontFamily;
     const _fontByLang = survey.branding?.typography?.fontByLanguage;
     const _langPrimary = (currentLanguage || '').split('-')[0] || '';
     const fontFamily = (_fontByLang && ((currentLanguage ? _fontByLang[currentLanguage] : undefined) || _fontByLang[_langPrimary])) ||
         survey.branding?.typography?.fontFamily ||
+        // …and branding.style.fontFamily, which is what the component editor's
+        // Font family control actually writes. Web has read it all along
+        // (resolveSurveyStyle.fontFamily); mobile read only the older typography
+        // field, so the control moved the preview and left the phone alone.
+        //
+        // AFTER typography, not before: a survey that already set the older field
+        // keeps rendering exactly as it does today.
+        (typeof _authoredStyleFont === 'string' && _authoredStyleFont.trim() ? _authoredStyleFont.trim() : undefined) ||
         _asdMobile.font ||
         undefined;
     const fontStyle = fontFamily ? { fontFamily } : undefined;
@@ -1159,8 +1369,6 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     })();
     const scaled = (n) => Math.round(n * baseScale);
     const fs = baseScale !== 1;
-    const titleFS = fs ? { fontSize: scaled(20) } : undefined;
-    const descFS = fs ? { fontSize: scaled(14) } : undefined;
     const qTitleFS = fs ? { fontSize: scaled(15) } : undefined;
     const qDescFS = fs ? { fontSize: scaled(13) } : undefined;
     const thankYouFS = fs ? { fontSize: scaled(18) } : undefined;
@@ -1218,6 +1426,10 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             comf; // 'comfortable' or undefined
     const padHeader = density ? { padding: dens(16, 24, 32), paddingBottom: dens(8, 12, 16) } : undefined;
     const padBody = density ? { paddingHorizontal: dens(16, 24, 32) } : undefined;
+    // A picture band sits in the same column as the text — the header's
+    // horizontal padding, without its vertical padding (the band carries its own
+    // margin on the side that faces the words).
+    const padBand = density ? { paddingHorizontal: dens(16, 24, 32) } : undefined;
     const padFooter = density ? { padding: dens(16, 24, 32), paddingTop: dens(12, 16, 20) } : undefined;
     const gapQBlock = density ? { marginBottom: dens(12, 20, 28) } : undefined;
     // Theme palette (spec §24). Dark is the SDK default; light flips
@@ -1237,23 +1449,36 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // changes mid-session re-render via the useState/Appearance listener
     // above (attributeContext is memoized on colorScheme too).
     const authorTheme = survey.branding?.theme;
-    // For 'auto'/absent, follow the end-user's preference, highest first:
-    //   1. user.theme — an identify() trait the host keeps in sync with its own
-    //      theme toggle: CXPinsight.identify({ theme: 'light'|'dark' }). Recommended.
-    //   2. init({ theme }) config — still honored for backward compat.
-    //   3. the OS colour scheme (Appearance). init({theme}) is also reported as
-    //      device.theme for analytics/targeting regardless.
-    const _pref = (v) => {
-        const t = typeof v === 'string' ? v.toLowerCase() : '';
-        return t === 'light' || t === 'dark' ? t : undefined;
-    };
-    const _userTheme = _pref(CXPinsight_1.CXPinsight._getUserIdentity()?.theme);
-    const _initTheme = _pref(CXPinsight_1.CXPinsight._getConfig()?.theme);
+    // WHO DECIDES LIGHT OR DARK — the spec answers it, so the phone and the
+    // browser cannot rank the five candidates differently. They did, and the
+    // same card came out white here and dark there. See resolveTheme for why
+    // the device's own setting is last.
+    //
+    // An experiment variation still overrules the lot: it is not a preference,
+    // it is the thing being measured.
+    const _themeDecision = (0, survey_spec_1.resolveThemeDecision)({
+        pinned: authorTheme,
+        user: CXPinsight_1.CXPinsight._getUserIdentity()?.theme,
+        declared: CXPinsight_1.CXPinsight._getConfig()?.theme,
+        appDefault: survey.branding?.themeDefault,
+        device: colorScheme,
+    });
+    // Under `debug`, say WHICH candidate won. From the outside every tier
+    // produces the same two words, so "why is this card light?" is otherwise
+    // answered by guessing — which is how it got answered wrongly twice.
+    if (CXPinsight_1.CXPinsight._getConfig()?.debug) {
+        // eslint-disable-next-line no-console
+        console.log('[CXPinsight] card theme:', _themeDecision.theme, 'from', _themeDecision.from, JSON.stringify({
+            pinned: authorTheme ?? null,
+            user: CXPinsight_1.CXPinsight._getUserIdentity()?.theme ?? null,
+            declared: CXPinsight_1.CXPinsight._getConfig()?.theme ?? null,
+            appDefault: survey.branding?.themeDefault ?? null,
+            device: colorScheme ?? null,
+        }));
+    }
     const resolvedTheme = activeOverrides?.theme === 'light' || activeOverrides?.theme === 'dark'
         ? activeOverrides.theme
-        : authorTheme === 'light' || authorTheme === 'dark'
-            ? authorTheme
-            : (_userTheme || _initTheme || (colorScheme === 'light' ? 'light' : colorScheme === 'dark' ? 'dark' : 'dark'));
+        : _themeDecision.theme;
     const isLight = resolvedTheme === 'light';
     // Layer palette overrides: SDK-init (host app) > survey.branding.palette
     // > built-in defaults. themePalette applies precedence per-key so a
@@ -1287,7 +1512,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // returns a fresh object each call, so an unmemoized value would give
     // `styles` a new identity every render and call StyleSheet.create() every
     // time — which leaks entries in RN's style registry over a long session.
-    const contract = (0, react_1.useMemo)(() => (0, styleContract_1.resolveStyleContract)({
+    const contract = (0, react_2.useMemo)(() => (0, styleContract_1.resolveStyleContract)({
         theme: resolvedTheme,
         primaryColor,
         // survey.branding.palette is written by SurveyPaletteEditor in the
@@ -1314,7 +1539,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     [resolvedTheme, primaryColor,
         JSON.stringify(surveyPaletteOverride), JSON.stringify(initPaletteOverride),
         JSON.stringify(survey.branding?.style)]);
-    const styles = (0, react_1.useMemo)(() => makeStyles(contract), [contract]);
+    const styles = (0, react_2.useMemo)(() => makeStyles(contract), [contract]);
     const themeCard = isLight ? { backgroundColor: palette.card, borderColor: palette.cardBorder } : undefined;
     const themeTextPrimary = isLight ? { color: palette.textPrimary } : undefined;
     const themeTextSecondary = isLight ? { color: palette.textSecondary } : undefined;
@@ -1341,7 +1566,14 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // and (since the parallel fix) the web SDK, and died here. Precedence matches
     // the other two exactly: survey ▶ application ▶ built-in, field by field, with
     // '' meaning inherit rather than override-with-nothing.
-    const display = (0, react_1.useMemo)(() => {
+    // DEFINED AFTER THE CONTRACT, because they now read it. These override
+    // the contract sizes when typography.baseFontSize is set, so they have to
+    // scale the AUTHORED size — scaling a literal threw the author's heading
+    // and body sizes away the moment the coarse control was touched.
+    // (they were scaled(20) and scaled(14), literals.)
+    const titleFS = fs ? { fontSize: scaled(contract.fontSizeHeading) } : undefined;
+    const descFS = fs ? { fontSize: scaled(contract.fontSizeDescription) } : undefined;
+    const display = (0, react_2.useMemo)(() => {
         const a = _asdMobile;
         // Both layers may store display per platform — web and mobile positions are
         // different decisions, and a survey that could only store one made editing
@@ -1376,6 +1608,26 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     const animationType = display?.animation === 'fade' ? 'fade' : display?.animation === 'none' ? 'none' : 'slide';
     const isFullscreen = display?.mode === 'fullscreen';
     const isDrawer = display?.mode === 'modal';
+    /**
+     * A popup does NOT dim the app, and does not take its touches.
+     *
+     * Web has said so for a while — the overlay is `transparent` with
+     * `pointer-events:none` for a popup, and only a modal gets rgba(0,0,0,0.45).
+     * Mobile painted `c.ground` (rgba(0,0,0,0.6) dark, 0.4 light) over the whole
+     * screen for EVERY mode, so a push-style banner dimmed the app behind it and
+     * blocked every tap that was not on the card.
+     *
+     * Visible in the recordings: the same login screen captured 47 seconds apart
+     * is bright at `start` and washed out once a card is up — the lime button
+     * renders dull olive. That darkened frame is what the replay shows, so the
+     * "grey composite" in the timeline and this are one bug.
+     *
+     * box-none rather than none: the container stops capturing touches, the card
+     * inside still receives them. `none` here would make the survey itself
+     * untouchable, which is how web pairs `pointer-events:none` on the overlay
+     * with `auto` on the card.
+     */
+    const isPopupOverlay = !isFullscreen && !isDrawer;
     // Position — previously unread here, which is why a phone could never show a
     // bottom sheet, the one presentation users actually expect on mobile.
     //
@@ -1398,10 +1650,355 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     const allQuestions = (survey.rawQuestions
         || survey.questions
         || []);
-    const notifyImageQ = allQuestions.find((q) => String(q?.id ?? '') === 'notify_image' && String(q?.type ?? '').toLowerCase() === 'image');
-    // Keyed off the composed question, not the type alone: an Ask that happens to
-    // carry an image question must keep rendering it as a question.
-    const isNotifyCard = interactionKind === 'notify' && !!notifyImageQ?.imageUrl;
+    // FOUND BY TYPE, NOT BY THE ID THE BUILDER HAPPENS TO WRITE.
+    //
+    // `notify_image` is one authoring tool's convention, and matching it meant an
+    // offer carrying exactly the same image question composed nothing — the
+    // picture fell through to the question list full-bleed, which is the shape
+    // that started this.
+    const cardImageQ = allQuestions.find((q) => String(q?.type ?? '').toLowerCase() === 'image');
+    // WHERE THE PICTURE GOES — asked once, in the spec, so the phone and the
+    // preview cannot answer it differently. 'none' leaves it to the question
+    // flow, which is still right for an ask: there the image is content the
+    // respondent is being shown, not decoration on a card.
+    const imgD = (0, survey_spec_1.imageDesign)(display, interactionKind, !!cardImageQ?.imageUrl);
+    const imgLayout = imgD.layout;
+    const composesImage = imgLayout !== 'none';
+    const besideImage = imgLayout === 'beside';
+    // THE BANNER'S TYPE SCALE BELONGS TO THE BANNER, NOT TO ITS PICTURE.
+    //
+    // This was keyed off having an image, so a notification without one got the
+    // survey's 20px heading while the preview gave every notification 15px — the
+    // `.cxp-notify` narrowing on web has never cared whether there is a picture.
+    const isNotifyBanner = interactionKind === 'notify';
+    // A BAND — as wide as the card, above the message or below it. Its height is
+    // imageHeight, NOT imageSize: the square's 44 is the right answer to a
+    // different question, and reusing it turned "Above" into a 44px strip.
+    /**
+     * A COVER-CROPPED PICTURE WITH A FOCAL POINT — measured, because React
+     * Native has no object-position.
+     *
+     * The web SDK writes one CSS declaration for this. Here the only exact way
+     * is to work it out: ask the file for its natural size, ask the box for its
+     * laid-out size, scale the way `cover` would, and shift by the part of the
+     * overflow the author asked to keep. Approximating it with a fixed
+     * translation would be a control that is nearly right, which in an editor is
+     * worse than one that is absent.
+     *
+     * Falls back to plain `cover` until both measurements arrive, so the first
+     * paint is the centre crop every renderer already does rather than a blank.
+     */
+    const FocalImage = ({ uri, alt, fit, focusX, focusY, radius }) => {
+        const [box, setBox] = (0, react_2.useState)({ w: 0, h: 0 });
+        const [nat, setNat] = (0, react_2.useState)({ w: 0, h: 0 });
+        (0, react_2.useEffect)(() => {
+            if (!uri || fit !== 'cover')
+                return;
+            let alive = true;
+            // Never throws for a bad URI — it calls the failure handler, and then we
+            // simply stay on the centre crop.
+            react_native_1.Image.getSize(uri, (w, h) => { if (alive)
+                setNat({ w, h }); }, () => { });
+            return () => { alive = false; };
+        }, [uri, fit]);
+        const centred = fit !== 'cover' || !box.w || !box.h || !nat.w || !nat.h
+            || (focusX === 50 && focusY === 50);
+        let inner = null;
+        if (!centred) {
+            const scale = Math.max(box.w / nat.w, box.h / nat.h);
+            const w = nat.w * scale;
+            const h = nat.h * scale;
+            // What cover hides, and how much of it the author wants on each side.
+            inner = {
+                width: w,
+                height: h,
+                left: -(w - box.w) * (focusX / 100),
+                top: -(h - box.h) * (focusY / 100),
+            };
+        }
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: '100%', height: '100%', overflow: 'hidden', borderRadius: radius }, onLayout: (e) => {
+                const { width, height } = e.nativeEvent.layout;
+                setBox((p) => (Math.abs(p.w - width) > 1 || Math.abs(p.h - height) > 1
+                    ? { w: width, h: height } : p));
+            }, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri }, accessibilityLabel: alt || undefined, accessible: !!alt, resizeMode: centred ? fit : 'cover', style: inner
+                    ? { position: 'absolute', ...inner }
+                    : { width: '100%', height: '100%' } }) }));
+    };
+    const cardImageBand = (imgLayout === 'above' || imgLayout === 'below') ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+            // A band narrower than the card can sit left, centre or right — which
+            // is what Alignment means once Width is not always 100%.
+            width: `${imgD.width}%`,
+            height: contract.imageHeight,
+            borderRadius: contract.imageRadius,
+            // Margin only on the side facing the text, so choosing "Below" does not
+            // leave a gap above the picture as well as under it.
+            marginBottom: imgLayout === 'above' ? 12 : 0,
+            marginTop: imgLayout === 'above' ? 0 : 12,
+            alignSelf: imgD.align === 'start' ? 'flex-start'
+                : imgD.align === 'end' ? 'flex-end' : 'center',
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsx)(FocalImage, { uri: cardImageQ?.imageUrl, alt: cardImageQ?.alt, fit: imgD.fit, focusX: imgD.focusX, focusY: imgD.focusY, radius: contract.imageRadius }) })) : null;
+    /**
+     * THE SEAM, SOFTENED — without a gradient primitive.
+     *
+     * React Native has none, and `react-native-svg` is an OPTIONAL peer this SDK
+     * cannot depend on. So the fade is built from what every build has: a short
+     * stack of absolutely-positioned Views in the card's own colour, each a
+     * little more opaque than the last. Eight steps is enough that the banding
+     * is invisible at the sizes a card uses, and it costs eight empty Views.
+     *
+     * The alternative was a Fade control that worked in the preview and did
+     * nothing here, which is the thing this codebase keeps having to undo.
+     */
+    const fadeSteps = (towards) => {
+        if (!imgD.fade)
+            return null;
+        const span = Math.max(2, Math.min(96, imgD.fade)) / 100;
+        const vertical = towards === 'top' || towards === 'bottom';
+        // A REAL GRADIENT WHERE THE APP HAS ONE. react-native-svg is an optional
+        // peer, already loaded this way by the signature question, and it draws
+        // the thing rather than approximating it.
+        if ((0, fadeGradient_1.hasGradient)()) {
+            const { Svg, Defs, LinearGradient, Stop, Rect } = fadeGradient_1.SvgParts;
+            // Runs FROM transparent TO the card colour, so the solid end is the edge
+            // the words are on.
+            const x1 = vertical ? '0' : (towards === 'right' ? '0' : '1');
+            const x2 = vertical ? '0' : (towards === 'right' ? '1' : '0');
+            const y1 = vertical ? (towards === 'bottom' ? '0' : '1') : '0';
+            const y2 = vertical ? (towards === 'bottom' ? '1' : '0') : '0';
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: {
+                    position: 'absolute',
+                    ...(vertical
+                        ? { left: 0, right: 0, height: `${span * 100}%`,
+                            ...(towards === 'bottom' ? { bottom: 0 } : { top: 0 }) }
+                        : { top: 0, bottom: 0, width: `${span * 100}%`,
+                            ...(towards === 'right' ? { right: 0 } : { left: 0 }) }),
+                }, children: (0, jsx_runtime_1.jsxs)(Svg, { width: "100%", height: "100%", children: [(0, jsx_runtime_1.jsx)(Defs, { children: (0, jsx_runtime_1.jsxs)(LinearGradient, { id: "cxpFade", x1: x1, y1: y1, x2: x2, y2: y2, children: [(0, jsx_runtime_1.jsx)(Stop, { offset: "0", stopColor: contract.card, stopOpacity: "0" }), (0, jsx_runtime_1.jsx)(Stop, { offset: "1", stopColor: contract.card, stopOpacity: "1" })] }) }), (0, jsx_runtime_1.jsx)(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#cxpFade)" })] }) }));
+        }
+        // NO SVG IN THIS APP — bands. SLICES, side by side, not rectangles stacked
+        // on top of each other.
+        //
+        // They used to be stacked: band i was `span * (i+1)/n` long, every one
+        // anchored to the same edge, each with a solved opacity. The arithmetic
+        // was right for a stack and the geometry was backwards — the LARGEST
+        // rectangle got the HIGHEST opacity, and band 27 was the full span at
+        // opacity 1/(28-27) = 1. A single opaque card-coloured block over the
+        // whole fade, with twenty-seven invisible bands underneath it. Reported,
+        // exactly, as "not a gradient, just a solid dark cover over the image".
+        //
+        // Slices cannot do that to themselves. Each covers one band of the span
+        // and nothing overlaps, so the alpha at that distance IS the alpha you
+        // write: 1 at the edge the words are on, 0 where the picture takes over.
+        // At 28 steps each one is a 3.6% change, which is under what the eye
+        // picks out against a photograph.
+        const pctOf = (v) => `${v * 100}%`;
+        const thickness = pctOf(span / fadeGradient_1.FADE_STEPS);
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: fadeGradient_1.FADE_STEPS }, (_, i) => {
+                const offset = pctOf((span * i) / fadeGradient_1.FADE_STEPS);
+                // Sampled mid-slice, so the ramp is centred on the band rather than
+                // starting a half-step early.
+                const alpha = 1 - (i + 0.5) / fadeGradient_1.FADE_STEPS;
+                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: {
+                        position: 'absolute',
+                        ...(towards === 'bottom' ? { left: 0, right: 0, bottom: offset, height: thickness }
+                            : towards === 'top' ? { left: 0, right: 0, top: offset, height: thickness }
+                                : towards === 'right' ? { top: 0, bottom: 0, right: offset, width: thickness }
+                                    : { top: 0, bottom: 0, left: offset, width: thickness }),
+                        backgroundColor: contract.card,
+                        opacity: alpha,
+                    } }, i));
+            }) }));
+    };
+    // THE SMALL PRINT, RESOLVED ONCE.
+    //
+    // rewardTerms falls back to the legacy `offer_terms` content question so an
+    // offer made before this keeps its conditions — and that question is still
+    // in the flow, so without the filter below it rendered a SECOND time
+    // underneath, one copy styled as small print and one not. Reported as
+    // duplicated and dimmed. The picture solved the same problem with the same
+    // shape; this needed it too.
+    const cardTerms = (0, survey_spec_1.rewardTerms)(survey);
+    // HALF THE CARD — the picture bleeds to the card's own edges and the words
+    // take the rest. Not a band with a big height: the difference is the bleed,
+    // and it is what makes the image read as the offer rather than as an
+    // illustration of it. `top` turns the row into a column, which is the same
+    // layout rotated and the one a narrow phone usually wants.
+    // HOISTED so a bleeding picture can go above it. On a half card the image
+    // runs to the card's top edge, and a language row rendered before it pushed
+    // the picture down behind a band of empty card — which reads as "only part
+    // of the image is showing" and is invisible in the web preview, because the
+    // web popup has no switcher at all (it takes the browser's language).
+    const langSwitcher = survey.languages && survey.languages.length > 1 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            styles.langSwitcher,
+            isRtl && { paddingRight: 12, paddingLeft: 48, flexDirection: 'row-reverse' },
+        ], children: survey.languages.map((code) => {
+            const isActive = code === currentLanguage;
+            return ((0, react_1.createElement)(react_native_1.TouchableOpacity, { ...swipeExempt, key: code, onPress: () => setCurrentLanguage(code), activeOpacity: 0.7, style: [
+                    styles.langChip,
+                    // Light theme: the chip's default white-on-white border/fill
+                    // is invisible on the light card — repaint from the palette.
+                    isLight && { borderColor: palette.inputBorder, backgroundColor: palette.input },
+                    isActive && { borderColor: primaryColor, backgroundColor: `${primaryColor}1A` },
+                ] },
+                (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                        styles.langChipText,
+                        isLight && { color: palette.textSecondary },
+                        isActive && { color: primaryColor },
+                    ], children: code.toUpperCase() })));
+        }) })) : null;
+    // A SIDE SPLIT IS A SIDE SPLIT, on the phone too.
+    //
+    // This used to rotate: Left and Right both became a band across the top, on
+    // the reasoning that half of a ~360pt card leaves the headline about 150pt
+    // and that is a column of two-word lines rather than a layout. That is a
+    // fair worry and it was not mine to settle by overruling the control — an
+    // author who picks Left and gets a top band has been told something false
+    // about their own card. Share is theirs to set: at 30% the words still get
+    // ~250pt, and if 70% looks cramped that is visible in the frame and fixable
+    // in one drag.
+    const halfSide = imgLayout === 'half' && (imgD.side === 'left' || imgD.side === 'right');
+    // SHARE IN POINTS, NOT PER CENT. The card's width is decided in JS a few
+    // lines up, so the column can be told what it is instead of being handed a
+    // percentage and left to negotiate with a `flex: 1` sibling — which is a
+    // conversation it was losing: Share at 33 was arriving on screen at 13.
+    const cardWidth = isFullscreen
+        ? SCREEN_WIDTH
+        : maxWidth !== undefined
+            ? Math.min(SCREEN_WIDTH * CARD_VIEWPORT_FRACTION, maxWidth)
+            : Math.min(SCREEN_WIDTH - 40, 420);
+    // SHARE MEASURED THE WAY THE WEB CARD MEASURES IT.
+    //
+    // Web puts the picture in the row INSIDE the card's padding — `flex: 0 0
+    // split%` of the content box — and then bleeds it back out to the card's
+    // edge with a negative margin. So the width you see is a share of the
+    // content, plus the padding it reclaims on the outer side. Taking a share of
+    // the whole card instead makes the phone's picture narrower than the frame's
+    // by exactly one padding, which is a column of text roughly one word narrower
+    // — and a description that fits two lines in the preview wrapping onto three.
+    const halfPadL = contract.cardPaddingLeft ?? contract.cardPadding;
+    const halfPadR = contract.cardPaddingRight ?? contract.cardPadding;
+    const halfOuter = imgD.side === 'right' ? halfPadR : halfPadL;
+    const halfWidth = Math.round(((cardWidth - halfPadL - halfPadR) * imgD.split) / 100) + halfOuter;
+    const cardImageHalf = imgLayout === 'half' ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+            position: 'relative',
+            overflow: 'hidden',
+            // HEIGHT ALONE DECIDES THIS, and Share does not touch it.
+            //
+            // Share used to scale it (split/50), so an authored Height of 225 with
+            // Share at 23 quietly became 103 and the picture came back as a strip.
+            // Nobody would guess that from a control called "Share", and across the
+            // top of the card there is no width to share in the first place.
+            // NO NEGATIVE MARGINS. The web card carries its padding on the content
+            // element, so bleeding to the edge there means pulling BACK by it. This
+            // card carries none — padding lives on the header, the body and the
+            // footer — so the same negative margins pushed the picture 16 to 32
+            // points outside the card on three sides, where `overflow: hidden`
+            // clipped it. The picture is already at the card's edge here.
+            ...(halfSide
+                // Beside the words: Share is a width, and the height is whatever the
+                // words next to it come to — `stretch`, exactly as the web card's
+                // `align-self: stretch` does it.
+                ? { width: halfWidth,
+                    // It must not be renegotiated either: a flex sibling may not
+                    // shrink it, and nothing may grow it.
+                    flexGrow: 0, flexShrink: 0, alignSelf: 'stretch' }
+                // Across the top: full width, and Height alone decides the depth.
+                : { width: '100%', height: contract.imageHeight, marginBottom: 12 }),
+        }, children: [halfSide ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, children: (0, jsx_runtime_1.jsx)(FocalImage, { uri: cardImageQ?.imageUrl, alt: cardImageQ?.alt, fit: imgD.fit, focusX: imgD.focusX, focusY: imgD.focusY }) })) : ((0, jsx_runtime_1.jsx)(FocalImage, { uri: cardImageQ?.imageUrl, alt: cardImageQ?.alt, fit: imgD.fit, focusX: imgD.focusX, focusY: imgD.focusY })), imgD.scrim ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [react_native_1.StyleSheet.absoluteFill,
+                    { backgroundColor: contract.card, opacity: imgD.scrim / 100 }] })) : null, fadeSteps(halfSide ? (imgD.side === 'left' ? 'right' : 'left') : 'bottom')] })) : null;
+    // BEHIND EVERYTHING, WITH THE CARD'S OWN COLOUR PAINTED BACK OVER IT.
+    //
+    // Absolute children drawn FIRST, because React Native paints siblings in
+    // order and has no dependable negative z-index — so "behind" is a position
+    // in the tree, not a number. Without the scrim the author has no control that
+    // would make white text readable on a pale photograph, so it is authored
+    // rather than assumed, and defaults to something visible.
+    const cardImageBack = imgLayout === 'background' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: cardImageQ?.imageUrl }, style: react_native_1.StyleSheet.absoluteFill, resizeMode: "cover", accessible: false, importantForAccessibility: "no" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [
+                    react_native_1.StyleSheet.absoluteFill,
+                    { backgroundColor: contract.card, opacity: imgD.scrim / 100 },
+                ] })] })) : null;
+    // THE BUTTON SITS BESIDE THE TEXT WHEN THE AUTHOR SAID SO — ON A PHONE TOO.
+    //
+    // `buttonAlign` is the notification's "Where it sits": 'full' is below the
+    // content, anything else is next to it. Mobile ignored it completely and
+    // always rendered the action down in the question list, so the control moved
+    // the web preview and nothing on the device.
+    //
+    // No fall-back to stacking when the label is long: beside means beside, and
+    // the text takes whatever width is left. An author who wants the full width
+    // for their headline has the other option to choose.
+    const notifyBeside = interactionKind === 'notify'
+        && String(display?.buttonAlign || 'right') !== 'full';
+    const notifyActionQ = notifyBeside
+        ? currentQuestions.find((q) => String(q?.type ?? '').toLowerCase() === 'implied')
+        : undefined;
+    // THE CARD DOES THE BUTTON'S WORK — when there is no button.
+    //
+    // Web has had this for a while and the phone never did, so hiding the action
+    // button here removed the action entirely: no button, no card press, and on a
+    // notification the ✕ is off too. Reported as a notification nothing could
+    // dismiss, which is exactly what it was.
+    //
+    // Both halves of the rule come from the spec, so the two renderers cannot
+    // disagree about when the card takes over: cardIsClickable insists on exactly
+    // ONE action — the notification shape, which excludes every consent choice,
+    // because a stray tap anywhere on a two-action takeover must never
+    // manufacture agreement.
+    const cardImpliedQ = currentQuestions.find((q) => String(q?.type ?? '').toLowerCase() === 'implied');
+    const cardImpliedList = cardImpliedQ
+        ? (() => {
+            const acts = (0, survey_spec_1.impliedActions)(cardImpliedQ, (t) => (0, interpolate_1.interpolatePlain)(t, evalCtx));
+            return acts.length ? acts : [{ value: 'acknowledged', label: 'Continue' }];
+        })()
+        : [];
+    const cardTakesPress = !!cardImpliedQ
+        && !(0, survey_spec_1.showActionButton)(display, cardImpliedList)
+        && (0, survey_spec_1.cardIsClickable)(display, cardImpliedList);
+    const cardImpliedKey = String(cardImpliedQ?.name
+        ?? cardImpliedQ?.id ?? '');
+    // AN EMPTY FOOTER IS STILL A FOOTER — 16pt on top and a card padding below.
+    //
+    // All three of its children can be suppressed at once, and on a notification
+    // they are: no voice mic, no Back on a single page, and the primary hidden
+    // because an implied step's own actions ARE its Next. What was left was a
+    // padded empty row, which is the blank strip under a notification on the
+    // phone that the preview does not have — web renders no footer at all there.
+    //
+    // Asked as "has anything to draw", not "is this a notification", so the same
+    // answer holds for any step that happens to suppress all three.
+    const footerHasContent = showVoiceMic
+        || (display?.showBack !== false && (history.length > 0 || currentPage > 0))
+        || impliedNow.length === 0;
+    // The room the ✕ needs, on the line it actually overlaps. Sized from the
+    // button itself, so shrinking it gives the headline the space back.
+    // WHETHER THE ✕ IS DRAWN, asked once and used twice — by the mark itself and
+    // by the gesture that replaces it.
+    //
+    // This read `showClose !== false` in both places, so an unset notification
+    // kept its ✕ here and lost it in the preview, and — because this display is a
+    // plain merge that leaves the value undefined — never enabled the swipe
+    // either. One authored survey, dismissable two different ways depending on
+    // which screen you were looking at.
+    const closeShown = (0, survey_spec_1.showsClose)(display, interactionKind, survey.delivery);
+    const closeReserve = !closeShown ? null : {
+        [isRtl ? 'paddingLeft' : 'paddingRight']: contract.closeSize + contract.closeInset + 8,
+    };
+    // Whether the BODY may scroll is a different question from whether a
+    // thumbnail was composed: see surfaceScrolls.
+    const bodyScrolls = surfaceScrolls(interactionKind);
+    // AND WHEN IT DOES NOT SCROLL, IT IS NOT A SCROLLVIEW.
+    //
+    // `scrollEnabled={false}` was not enough, and on iOS that is not a cosmetic
+    // distinction: the prop only tells a real UIScrollView to stop scrolling, it
+    // does not take it out of the touch path. A UIScrollView cancels touches it
+    // inherits from inert content while leaving a Touchable's own touch alone,
+    // and that asymmetry is exactly the reported "it only swipes while I am
+    // pressing the button" — the button is the one child that owns its touch, so
+    // the flick survived there and nowhere else on the card.
+    //
+    // Rendering a plain View removes the competitor rather than asking it to
+    // stand down. styles.body carries no flex, so the two lay out identically.
+    const BodyContainer = (bodyScrolls ? react_native_1.ScrollView : react_native_1.View);
     // A NOTIFICATION'S TYPE SITS ONE SIZE DOWN from a survey's — web says so
     // explicitly (notifyFsHeading/notifyFsDesc, defaulting to 15/13), and mobile
     // had no equivalent: it used the survey title and a hardcoded 14 description,
@@ -1409,10 +2006,43 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // type there. An authored size still wins, on both.
     const _authoredStyle = stylePlatformSlice(survey.branding?.style);
     const _num = (v) => (typeof v === 'number' && v > 0 ? v : undefined);
-    const notifyTitleFS = isNotifyCard
-        ? { fontSize: _num(_authoredStyle.fontSizeHeading) ?? 15 } : null;
-    const notifyDescFS = isNotifyCard
-        ? { fontSize: _num(_authoredStyle.fontSizeDescription) ?? 13, lineHeight: 18 } : null;
+    // Only an AUTHORED border draws — see styles.impliedPrimary.
+    const authoredBtnBorder = typeof _authoredStyle.primaryBorder === 'string'
+        && _authoredStyle.primaryBorder.trim() ? String(_authoredStyle.primaryBorder).trim() : null;
+    // SHARED VALUE, PROPORTIONATE RENDERING.
+    //
+    // `fontSizeHeading` is stored once for every surface, so a size chosen while
+    // looking at the desktop frame is the size the phone gets too. 24 sits
+    // comfortably in a 485px desktop card and overflows a ~354pt phone one, which
+    // is why the headline wrapped here and not in the preview.
+    //
+    // The number stays shared — one value, as authored — and each surface renders
+    // it in proportion to the card it actually has. Web is unchanged (its card is
+    // at or above the reference), and only a card narrower than the reference
+    // scales down. An unstyled notification keeps web's own banner default of 15
+    // rather than being scaled, because 15 is already a banner size.
+    const REFERENCE_CARD_PT = 480;
+    const notifyCardW = Math.min(SCREEN_WIDTH * CARD_VIEWPORT_FRACTION, typeof maxWidth === 'number' ? maxWidth : SCREEN_WIDTH);
+    const authoredHeadingPt = _num(_authoredStyle.fontSizeHeading);
+    const notifyTitleFS = isNotifyBanner
+        ? {
+            fontSize: authoredHeadingPt != null
+                // Floored so a very narrow card cannot shrink the headline below the
+                // body text and invert the hierarchy.
+                ? Math.max(14, Math.round(authoredHeadingPt * Math.min(1, notifyCardW / REFERENCE_CARD_PT)))
+                : 15,
+        }
+        : null;
+    const notifyDescFS = isNotifyBanner
+        ? (() => {
+            // The banner's own type size, and a line height DERIVED from it rather
+            // than written in — otherwise the Line height control works on a survey
+            // and silently does nothing on the notification, which is the surface
+            // most likely to be tuned.
+            const fs = _num(_authoredStyle.fontSizeDescription) ?? 13;
+            return { fontSize: fs, lineHeight: Math.round(fs * contract.lineHeightBody) };
+        })()
+        : null;
     const rawPos = display?.position;
     const placement = rawPos === 'top' ? 'top'
         : rawPos === 'bottom' ? 'bottom'
@@ -1443,7 +2073,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     const hasPopupY = !isNaN(popupY);
     const effPlacement = hasPopupY ? 'top' : placement;
     // Measured card height; the authored height is the first-frame stand-in.
-    const [measuredCardH, setMeasuredCardH] = (0, react_1.useState)(0);
+    const [measuredCardH, setMeasuredCardH] = (0, react_2.useState)(0);
     const authoredH = Number.parseFloat(String(display?.height ?? ''));
     const estCardH = measuredCardH || (Number.isFinite(authoredH) && authoredH > 0 ? authoredH : 220);
     const overlayPlacement = {
@@ -1468,10 +2098,31 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // is what the card actually uses.
     const needsTopSlide = animationType === 'slide'
         && ((isSheet && placement === 'top') || (!isDrawer && !isFullscreen && effPlacement === 'top'));
-    const modalAnimation = needsTopSlide ? 'none' : animationType;
-    const enterAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
-    (0, react_1.useEffect)(() => {
-        if (!needsTopSlide)
+    // WHERE IT ENTERS FROM, and how long it takes.
+    //
+    // `animationFrom` names the EDGE IT COMES FROM; the travel is its opposite,
+    // so entering from the left means moving right. 'auto' keeps the old
+    // behaviour exactly — its own nearest edge — so no existing survey moves.
+    //
+    // RN's <Modal animationType="slide"> only knows bottom-up and has no duration,
+    // so anything the author actually chose has to be animated here instead. We
+    // take over only when they HAVE chosen: an explicit edge, an explicit
+    // duration, or the top case that already needed its own animation.
+    const _disp = display;
+    const animFromRaw = String(_disp?.animationFrom || 'auto').toLowerCase();
+    const animEdgeAuthored = ['top', 'right', 'bottom', 'left'].includes(animFromRaw);
+    const _msRaw = Number(_disp?.animationDuration);
+    const animMsAuthored = Number.isFinite(_msRaw) && _msRaw > 0;
+    const animMs = animMsAuthored ? Math.max(80, Math.min(1000, Math.round(_msRaw))) : 280;
+    const slideEdge = animEdgeAuthored
+        ? animFromRaw
+        : (effPlacement === 'top' ? 'top' : 'bottom');
+    const customSlide = animationType === 'slide'
+        && (needsTopSlide || animEdgeAuthored || animMsAuthored);
+    const modalAnimation = customSlide ? 'none' : animationType;
+    const enterAnim = (0, react_2.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_2.useEffect)(() => {
+        if (!customSlide)
             return;
         if (!visible) {
             enterAnim.setValue(0);
@@ -1480,13 +2131,13 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         enterAnim.setValue(0);
         react_native_1.Animated.timing(enterAnim, {
             toValue: 1,
-            duration: 280,
+            duration: animMs,
             easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
             // Transform and opacity only, so this runs off the JS thread and does not
             // stutter while the survey's first page is still laying out.
             useNativeDriver: true,
         }).start();
-    }, [visible, needsTopSlide, enterAnim]);
+    }, [visible, customSlide, animMs, enterAnim]);
     // ── Swipe to dismiss ────────────────────────────────────────────────
     //
     // A push notification goes away when you flick it. The mobile display slice
@@ -1496,55 +2147,124 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // canSwipeToDismiss requires a popup and vetoes `mustShow`, which is what
     // keeps a compliance takeover — showClose:false for the OPPOSITE reason —
     // from ever becoming flickable.
-    const swipeable = (0, survey_spec_1.canSwipeToDismiss)(display, survey.delivery);
-    const swipeXY = (0, react_1.useRef)(new react_native_1.Animated.ValueXY({ x: 0, y: 0 })).current;
-    const swipeResponder = (0, react_1.useMemo)(() => react_native_1.PanResponder.create({
-        onStartShouldSetPanResponder: () => false,
-        // Claim the gesture only once it is clearly a drag, so a tap on the action
-        // button still presses the button.
-        //
-        // CAPTURE, not bubble. The card's content sits in a ScrollView, and a
-        // ScrollView claims a vertical drag first — so the flick that is supposed
-        // to dismiss a notification was being consumed as a scroll of content that
-        // does not even overflow, and the banner could not be swiped away at all.
-        // The 8px threshold still protects the button: a tap never reaches here.
-        onMoveShouldSetPanResponderCapture: (_e, g) => {
-            const claim = swipeable && (Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8);
-            // TEMP-DIAG
-            if (__DEV__ && (Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8)) {
-                // eslint-disable-next-line no-console
-                console.log('[CXP-SWIPE]', JSON.stringify({ swipeable, dx: Math.round(g.dx), dy: Math.round(g.dy), claim }));
-            }
-            return claim;
-        },
-        onMoveShouldSetPanResponder: (_e, g) => swipeable && (Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8),
-        onPanResponderMove: (_e, g) => {
-            const horizontal = Math.abs(g.dx) > Math.abs(g.dy);
-            // A top banner travels up, never down — dragging it down is a pull.
-            const dy = placement === 'top' ? Math.min(0, g.dy) : placement === 'bottom' ? Math.max(0, g.dy) : g.dy;
-            swipeXY.setValue(horizontal ? { x: g.dx, y: 0 } : { x: 0, y: dy });
-        },
-        onPanResponderRelease: (_e, g) => {
-            const horizontal = Math.abs(g.dx) > Math.abs(g.dy);
-            const moved = horizontal ? g.dx : g.dy;
-            const fast = Math.abs(horizontal ? g.vx : g.vy) > 0.5;
-            if (Math.abs(moved) >= 56 || fast) {
-                const to = moved < 0 ? -SCREEN_HEIGHT : SCREEN_HEIGHT;
-                react_native_1.Animated.timing(swipeXY, {
-                    toValue: horizontal ? { x: moved < 0 ? -SCREEN_WIDTH : SCREEN_WIDTH, y: 0 } : { x: 0, y: to },
-                    duration: 180, useNativeDriver: true,
-                }).start(() => { swipeXY.setValue({ x: 0, y: 0 }); handleDismissRef.current(); });
-                return;
+    // RESOLVED, not raw: canSwipeToDismiss asks for `showClose === false`, and an
+    // unset notification is exactly the case that has to reach it as false.
+    const swipeable = (0, survey_spec_1.canSwipeToDismiss)({ ...(display || {}), showClose: !closeShown }, survey.delivery);
+    // ── TEMPORARY: swipe diagnosis ──────────────────────────────────────────
+    //
+    // The report ("it only swipes while I press the button") has survived three
+    // fixes, each aimed at a different candidate. These five lines separate the
+    // candidates in ONE pass on a device, because the order they appear in is
+    // itself the answer:
+    //
+    //   no `touch` at all      → the gesture never reaches the card; the problem
+    //                            is hit-testing, not the responder
+    //   `touch` but no `ask`   → the card is not in the negotiation
+    //   `ask claim=false`      → dx/dy never crossed the claim threshold
+    //   `ask claim=true`, no `grant` → something else won the responder
+    //   `grant` then `terminate`     → it was taken back mid-drag
+    //   `grant` then `release`       → read the numbers; it is the threshold
+    //
+    // Remove once the cause is known.
+    const swipeXY = (0, react_2.useRef)(new react_native_1.Animated.ValueXY({ x: 0, y: 0 })).current;
+    // RAW TOUCH, NOT PanResponder.
+    //
+    // PanResponder was the idiomatic choice and it does not work here. Measured
+    // on the device: `onTouchStart` fires on this card for a touch anywhere on
+    // it, and `onMoveShouldSetPanResponderCapture` is then never called even
+    // once — the card receives the touch and is never asked for the gesture. The
+    // one place the gesture did work was the action button, because a Touchable
+    // claims the responder itself and the negotiation that follows does reach
+    // this card.
+    //
+    // So the swipe is driven by the events we can prove arrive. Touch events
+    // bubble from whatever was touched up to this card independently of the
+    // responder system, which is exactly the property the gesture needs: the
+    // whole surface becomes the handle without anything having to win a
+    // negotiation first.
+    //
+    // Nothing here claims the responder, so a press on the action button is
+    // untouched — it presses. A press that travels moves the card as well, and
+    // past the dismissal threshold the card leaves and takes the press with it.
+    const onCardTouchStart = (e) => {
+        engagedRef.current = true;
+        const n = e.nativeEvent;
+        // TRACKED FOR A TAP TOO, not only for a drag. This returned early unless
+        // the card could be swiped, so on a card that only needed to be PRESSED
+        // nothing was ever recorded and the press could not be recognised.
+        if (!swipeable && !cardTakesPress)
+            return;
+        // A control already owns this touch — it is a press, not a drag.
+        if (pressingControl.current)
+            return;
+        touchSwipe.current = { x0: n.pageX, y0: n.pageY, t0: Date.now(), moved: false };
+    };
+    const onCardTouchMove = (e) => {
+        const st = touchSwipe.current;
+        if (!st)
+            return;
+        const n = e.nativeEvent;
+        const dx = n.pageX - st.x0;
+        const dy = n.pageY - st.y0;
+        // Below the claim threshold this is still a press, so the card stays put.
+        if (!st.moved && !shouldClaimSwipe(true, dx, dy))
+            return;
+        // Travelled far enough to be a drag. On a card that cannot be swiped that
+        // only means "this was not a tap" — the card must not follow the finger.
+        st.moved = true;
+        if (!swipeable)
+            return;
+        swipeXY.setValue(swipeOffset(placement, dx, dy));
+    };
+    const onCardTouchEnd = (e) => {
+        const st = touchSwipe.current;
+        touchSwipe.current = null;
+        pressingControl.current = false;
+        if (!st)
+            return;
+        // A TAP ON THE CARD IS THE BUTTON'S PRESS. It never travelled, so it was
+        // never a drag — and the threshold that decides is the same one the swipe
+        // uses, which is what keeps a deliberate flick from also counting as a tap.
+        if (!st.moved) {
+            if (cardTakesPress && cardImpliedList.length) {
+                pressImplied(cardImpliedKey, cardImpliedList[0]);
             }
-            react_native_1.Animated.spring(swipeXY, { toValue: { x: 0, y: 0 }, useNativeDriver: true, bounciness: 6 }).start();
-        },
-    }), [swipeable, placement, swipeXY]);
+            return;
+        }
+        if (!swipeable)
+            return;
+        const n = e.nativeEvent;
+        const dx = n.pageX - st.x0;
+        const dy = n.pageY - st.y0;
+        // px/ms, the same unit PanResponder reports, so the tuned threshold carries
+        // over unchanged. Floored so a very fast flick cannot divide by ~0.
+        const dt = Math.max(16, Date.now() - st.t0);
+        const { dismiss, horizontal, moved } = swipeRelease({ dx, dy, vx: dx / dt, vy: dy / dt });
+        if (dismiss) {
+            react_native_1.Animated.timing(swipeXY, {
+                toValue: horizontal
+                    ? { x: moved < 0 ? -SCREEN_WIDTH : SCREEN_WIDTH, y: 0 }
+                    : { x: 0, y: moved < 0 ? -SCREEN_HEIGHT : SCREEN_HEIGHT },
+                duration: 180, useNativeDriver: true,
+            }).start(() => { swipeXY.setValue({ x: 0, y: 0 }); handleDismissRef.current('swipe'); });
+            return;
+        }
+        react_native_1.Animated.spring(swipeXY, { toValue: { x: 0, y: 0 }, useNativeDriver: true, bounciness: 6 }).start();
+    };
+    const onCardTouchCancel = () => {
+        const st = touchSwipe.current;
+        touchSwipe.current = null;
+        pressingControl.current = false;
+        if (!st || !st.moved)
+            return;
+        react_native_1.Animated.spring(swipeXY, { toValue: { x: 0, y: 0 }, useNativeDriver: true, bounciness: 6 }).start();
+    };
     // Auto-dismiss. Same rule as web (autoDismissMs vetoes fullscreen and
     // mustShow, clamps to 2s). Cancelled for good once the respondent touches
     // anything — a timer that fires after someone has started answering would
     // pull the survey out from under them.
     // Which ending this interaction gets — see the render block below.
-    const endingKind = (0, react_1.useMemo)(() => {
+    const endingKind = (0, react_2.useMemo)(() => {
         const sv = survey;
         const qs = (survey.rawQuestions ?? []);
         const acts = (0, survey_spec_1.impliedStepActions)(qs) || [];
@@ -1560,14 +2280,16 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         });
     }, [survey, responses]);
     const dismissMs = (0, survey_spec_1.autoDismissMs)(display, survey.delivery);
-    const engagedRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
+    const engagedRef = (0, react_2.useRef)(false);
+    (0, react_2.useEffect)(() => {
         if (!visible || !dismissMs)
             return;
         engagedRef.current = false;
         const t = setTimeout(() => {
+            // NOBODY HOME IS NOT A DISMISSAL — the card left on a timer. Named so
+            // the cadence does not spend an attempt on a showing nobody saw.
             if (!engagedRef.current)
-                handleDismissRef.current();
+                handleDismissRef.current('auto');
         }, dismissMs);
         return () => clearTimeout(t);
     }, [visible, dismissMs]);
@@ -1576,22 +2298,30 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // REPLACES an earlier one rather than merging. That was harmless while only
     // sheets animated themselves, but a notification is both top-placed and
     // swipeable, so the entrance translate would have been silently dropped.
-    const enterStyle = needsTopSlide
-        ? {
-            opacity: enterAnim,
-            transform: [
-                {
-                    translateY: enterAnim.interpolate({
-                        inputRange: [0, 1],
-                        // Its own height is not known before layout, so it travels a screen
-                        // third — far enough to read as entering from off-screen, short
-                        // enough that the easing still lands crisply.
-                        outputRange: [-SCREEN_HEIGHT / 3, 0],
-                    }),
-                },
-                ...(swipeable ? swipeXY.getTranslateTransform() : []),
-            ],
-        }
+    const enterStyle = customSlide
+        ? (() => {
+            // Its own size is not known before layout, so it travels a screen third
+            // (or a width third sideways) — far enough to read as entering from
+            // off-screen, short enough that the easing still lands crisply.
+            const dY = SCREEN_HEIGHT / 3;
+            const dX = SCREEN_WIDTH / 3;
+            const OFFSET = {
+                top: { x: 0, y: -dY }, bottom: { x: 0, y: dY },
+                left: { x: -dX, y: 0 }, right: { x: dX, y: 0 },
+            };
+            const off = OFFSET[slideEdge] || OFFSET.bottom;
+            const travel = (v) => enterAnim.interpolate({ inputRange: [0, 1], outputRange: [v, 0] });
+            return {
+                opacity: enterAnim,
+                transform: [
+                    ...(off.y !== 0 ? [{ translateY: travel(off.y) }] : []),
+                    ...(off.x !== 0 ? [{ translateX: travel(off.x) }] : []),
+                    // The swipe transform rides LAST and on the same array — a second
+                    // `transform` entry would replace this one rather than compose.
+                    ...(swipeable ? swipeXY.getTranslateTransform() : []),
+                ],
+            };
+        })()
         : null;
     const sheetRadius = cornerRadius !== undefined ? cornerRadius : 16;
     const sheetStyle = isSheet ? {
@@ -1762,9 +2492,9 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
      * At zero it stops rendering rather than sitting at 0:00 beside a button that
      * no longer works.
      */
-    const [nowTs, setNowTs] = (0, react_1.useState)(() => Date.now());
+    const [nowTs, setNowTs] = (0, react_2.useState)(() => Date.now());
     const countdown = (0, survey_spec_1.deadlineCountdown)(survey, display, nowTs);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (!countdown)
             return undefined;
         // Ticking every second only while the TEXT CONTAINS SECONDS, which
@@ -1785,8 +2515,22 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                         styles.progressBarFill,
                         { width: `${((currentPage + 1) / totalPages) * 100}%`, backgroundColor: primaryColor },
                     ] }) })] })) : null;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: modalAnimation, onRequestClose: handleDismiss, children: (0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView, { style: [
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: modalAnimation, 
+        // Android's back gesture. Wrapped rather than passed: the handler now
+        // takes a reason and this prop hands it a native event, which would
+        // arrive as the reason and be recorded as one.
+        onRequestClose: () => handleDismiss('close'), children: (0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView
+        // The OVERLAY, not the card — a screen-shaped image with the card in
+        // its real position, rather than a card-shaped one the replay player
+        // would stretch across the whole device frame.
+        , { 
+            // The OVERLAY, not the card — a screen-shaped image with the card in
+            // its real position, rather than a card-shaped one the replay player
+            // would stretch across the whole device frame.
+            ref: (v) => { cardViewRef.current = v; }, pointerEvents: isPopupOverlay ? 'box-none' : 'auto', style: [
                 styles.overlay,
+                // Transparent for a popup — the app behind it is not being taken over.
+                isPopupOverlay && { backgroundColor: 'transparent' },
                 overlayPlacement,
                 // The authored coordinate, resolved to points. Before the sheet and
                 // fullscreen overrides so those keep winning.
@@ -1794,36 +2538,49 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                 // A sheet sits flush against its edge, so the overlay loses its gutter.
                 isSheet && { paddingHorizontal: 0, paddingTop: 0, paddingBottom: 0 },
                 isFullscreen && styles.overlayFullscreen,
-            ], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { onTouchStart: () => { engagedRef.current = true; }, 
+            ], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View
+                // Explicit, because the overlay above is `box-none` on a popup so the
+                // host app keeps its touches. That makes hit-testing on this subtree
+                // worth stating rather than inheriting: the card must be a target, or
+                // a flick that starts on the title falls straight through it.
+                , { 
+                    // Explicit, because the overlay above is `box-none` on a popup so the
+                    // host app keeps its touches. That makes hit-testing on this subtree
+                    // worth stating rather than inheriting: the card must be a target, or
+                    // a flick that starts on the title falls straight through it.
+                    pointerEvents: "auto", onTouchStart: onCardTouchStart, onTouchMove: onCardTouchMove, onTouchEnd: onCardTouchEnd, onTouchCancel: onCardTouchCancel, 
                     // Feeds the authored-coordinate maths above. Only tracked when a
                     // coordinate is actually in play, and only on a real change, so the
                     // common case costs nothing and this cannot loop.
                     onLayout: hasPopupY ? (e) => {
                         const h = Math.round(e.nativeEvent.layout.height);
                         setMeasuredCardH((prev) => (Math.abs(prev - h) > 1 ? h : prev));
-                    } : undefined, ...(swipeable ? swipeResponder.panHandlers : {}), style: [
+                    } : undefined, style: [
                         styles.card,
                         themeCard,
                         enterStyle,
-                        swipeable && !needsTopSlide && { transform: swipeXY.getTranslateTransform() },
+                        swipeable && !customSlide && { transform: swipeXY.getTranslateTransform() },
                         maxWidth !== undefined && !isFullscreen && { width: Math.min(SCREEN_WIDTH * CARD_VIEWPORT_FRACTION, maxWidth), maxWidth },
                         cornerRadius !== undefined && !isFullscreen && { borderRadius: cornerRadius },
                         // cardFullscreen fills; an explicit content height/width below OVERRIDES
                         // the fill so a fullscreen survey can be contained to that size.
                         isFullscreen && styles.cardFullscreen,
+                        // The background picture is a child, so the card must clip it or it
+                        // squares off the corners the author rounded.
+                        imgLayout === 'background' && { overflow: 'hidden' },
                         sheetStyle,
                         heightStyle,
                         widthStyle,
                         safePad,
-                    ], children: [display?.showClose !== false && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                    ], children: [cardImageBack, closeShown && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ...swipeExempt, style: [
                                 styles.closeButton,
-                                isRtl ? { left: 12 } : { right: 12 },
-                            ], onPress: handleDismiss, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.closeText, themeTextSecondary], children: "\u2715" }) })), showThankYou && endingKind !== 'thanks' ? (() => {
+                                isRtl ? { left: contract.closeInset } : { right: contract.closeInset },
+                            ], onPress: () => handleDismiss('close'), activeOpacity: 0.7, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.closeGlyph, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.closeBar, { transform: [{ rotate: '45deg' }] }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.closeBar, { transform: [{ rotate: '-45deg' }] }] })] }) })), showThankYou && endingKind !== 'thanks' && (0, survey_spec_1.showsConfirmation)(survey) ? (() => {
                             const rw = (0, survey_spec_1.rewardToShow)(survey);
                             const comp = survey.compliance;
                             if (endingKind === 'fulfil' && rw) {
                                 const exp = rw.expiresAt ? new Date(rw.expiresAt) : null;
-                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary], children: "It\u2019s yours" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: "Use this at checkout." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: true, style: [styles.rewardCode, fontStyle, themeTextPrimary], children: rw.value }), !!rw.whereValid && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: rw.whereValid })), !!exp && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: ["Expires ", exp.toLocaleString()] }))] }));
+                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary], children: (0, survey_spec_1.confirmationText)(survey, 'It’s yours') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: true, style: [styles.rewardCode, fontStyle, themeTextPrimary], children: rw.value }), !!rw.whereValid && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: rw.whereValid })), !!exp && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: ["Expires ", exp.toLocaleString()] }))] }));
                             }
                             if (endingKind === 'hold') {
                                 return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, accessibilityLiveRegion: "polite", children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary], children: comp?.reviewRequired ? 'Under review' : 'Not completed' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: comp?.blockedMessage
@@ -1846,145 +2603,189 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                             const imgSrc = firstImageSrc(rawThankYou);
                             const thankYouText = stripHtml(rawThankYou);
                             return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, children: [imgSrc ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: imgSrc }, style: styles.thankYouImage, resizeMode: "contain" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouEmoji, { color: primaryColor }], children: "\u2713" })), thankYouText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, dirText, fontStyle, themeTextPrimary, thankYouFS], children: thankYouText })) : null] }));
-                        })() : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [survey.languages && survey.languages.length > 1 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                                        styles.langSwitcher,
-                                        isRtl && { paddingRight: 12, paddingLeft: 48, flexDirection: 'row-reverse' },
-                                    ], children: survey.languages.map((code) => {
-                                        const isActive = code === currentLanguage;
-                                        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setCurrentLanguage(code), activeOpacity: 0.7, style: [
-                                                styles.langChip,
-                                                // Light theme: the chip's default white-on-white border/fill
-                                                // is invisible on the light card — repaint from the palette.
-                                                isLight && { borderColor: palette.inputBorder, backgroundColor: palette.input },
-                                                isActive && { borderColor: primaryColor, backgroundColor: `${primaryColor}1A` },
-                                            ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-                                                    styles.langChipText,
-                                                    isLight && { color: palette.textSecondary },
-                                                    isActive && { color: primaryColor },
-                                                ], children: code.toUpperCase() }) }, code));
-                                    }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                                        styles.header,
-                                        padHeader,
-                                        isRtl && { paddingLeft: 48, paddingRight: 24 },
-                                        // Thumbnail beside the text, as `.cxp-notify-row` does on web.
-                                        isNotifyCard && { flexDirection: 'row', alignItems: 'center' },
-                                    ], children: [((survey.branding?.showLogo !== false && survey.branding?.logo)
-                                            || survey.branding?.brandName) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                                                styles.brandRow,
-                                                // Logo position, same rule as the other two renderers.
-                                                (survey.branding?.logoAlign === 'center'
-                                                    ? { justifyContent: 'center' }
-                                                    : survey.branding?.logoAlign === 'right'
-                                                        ? { justifyContent: 'flex-end' }
-                                                        : null),
-                                            ], children: [survey.branding?.showLogo !== false && survey.branding?.logo ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: survey.branding.logo }, style: styles.brandLogo, resizeMode: "contain", accessible: !!survey.branding.brandName, accessibilityLabel: survey.branding.brandName })) : null, survey.branding?.brandName ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.brandName, dirText, fontStyle, themeTextSecondary], children: survey.branding.brandName })) : null] })), isNotifyCard ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: notifyImageQ?.imageUrl }, accessibilityLabel: notifyImageQ?.alt || undefined, accessible: !!notifyImageQ?.alt, style: {
-                                                width: contract.imageSize,
-                                                height: contract.imageSize,
-                                                borderRadius: contract.imageRadius,
-                                                marginRight: 12,
-                                                flexShrink: 0,
-                                            }, resizeMode: "cover" })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: isNotifyCard ? { flex: 1, minWidth: 0 } : undefined, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, dirText, fontStyle, themeTextPrimary, titleFS, notifyTitleFS,
-                                                        survey.titleAlign
-                                                            ? { textAlign: survey.titleAlign }
-                                                            : null], children: (0, interpolate_1.interpolatePlain)(
-                                                    // Title is plain text; strip any stray rich-text markup +
-                                                    // decode &nbsp; so it never shows literal HTML on native.
-                                                    String((0, translationLookup_1.surveyText)(survey, currentLanguage, 'title', survey.title) || '')
-                                                        .replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' '), evalCtx) }), (() => {
-                                                    // Description is authored as rich HTML; native Text can't render
-                                                    // markup, so strip tags + decode &nbsp; to plain text.
-                                                    const descRaw = (0, translationLookup_1.surveyText)(survey, currentLanguage, 'description', survey.description);
-                                                    const desc = String(descRaw || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' ').trim();
-                                                    return desc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, dirText, fontStyle, themeTextSecondary, descFS, notifyDescFS], children: (0, interpolate_1.interpolatePlain)(desc, evalCtx) })) : null;
-                                                })()] }), deadlineEl, showProgressTop && progressEl] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: [styles.body, padBody, fsContent], showsVerticalScrollIndicator: false, children: currentQuestions.filter((q) => {
-                                        // The notification's thumbnail is drawn in the header above;
-                                        // leaving it here too would render it twice, once full-bleed.
-                                        if (isNotifyCard && String(q?.id ?? '') === 'notify_image')
-                                            return false;
-                                        return true;
-                                    }).map((q) => {
-                                        // v1.1 uses `id`+`required`; legacy uses `name`+`isRequired`.
-                                        // The provider normalizes both onto the same object so
-                                        // either lookup works.
-                                        const rowKey = q.id || q.name;
-                                        // Through forValidation, so requiredWhen counts. A question
-                                        // that becomes required part-way through was previously
-                                        // marked with nothing at all.
-                                        const isRequired = !!forValidation(q).required
-                                            || q.required || q.isRequired;
-                                        // An implied question has no prompt: its ACTIONS are the UI,
-                                        // and its `text` is bookkeeping the author never meant to
-                                        // show. Web renders the whole block display:none and lifts
-                                        // the buttons into the nav bar; here the buttons render in
-                                        // place, so only the label and description are suppressed.
-                                        // Without this the stray authoring text ("tte") appeared as a
-                                        // question above the notification's own button.
-                                        const isImplied = String(q?.type ?? '').toLowerCase() === 'implied';
-                                        const qLabel = (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx);
-                                        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: (el) => { questionRefs.current[rowKey] = el; }, style: [styles.questionBlock, gapQBlock], children: [isImplied ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.questionTitle, dirText, fontStyle, themeTextPrimary, qTitleFS], 
-                                                    // The asterisk below is decoration: a screen reader
-                                                    // reads it as "star", or skips it, so a required
-                                                    // question sounded exactly like an optional one until
-                                                    // submitting failed. The label says the word.
-                                                    accessibilityLabel: isRequired ? `${qLabel}, required` : qLabel, children: [questionNumberById[rowKey] ? `Q${questionNumberById[rowKey]}. ` : '', (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx), isRequired && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.required, children: " *" })] })), (() => {
-                                                    if (isImplied)
-                                                        return null;
-                                                    const qDesc = (0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'description', q.description);
-                                                    return qDesc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.questionDesc, dirText, fontStyle, themeTextMuted, qDescFS], children: (0, interpolate_1.interpolatePlain)(qDesc, evalCtx) })) : null;
-                                                })(), renderQuestion(q), errors[rowKey] ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, dirText, fontStyle], 
-                                                    // Announced when it appears, and reachable afterwards:
-                                                    // a message that is only spoken once leaves someone who
-                                                    // moves back to the field with no way to find out what
-                                                    // was wrong with their answer.
-                                                    accessibilityRole: "alert", accessibilityLiveRegion: "polite", children: errors[rowKey] })) : null] }, rowKey));
-                                    }) }), submitError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.submitError, dirText, fontStyle], 
-                                    // Announced, not merely displayed. A respondent who cannot see
-                                    // the panel is otherwise held with no way to discover why.
-                                    accessibilityRole: "alert", accessibilityLiveRegion: "polite", children: submitError })) : null, showProgressBottom && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: padFooter, children: progressEl }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                                        styles.footer,
-                                        padFooter,
-                                        // Flip button order for RTL so the primary (Next / Submit)
-                                        // action sits on the left where an Arabic reader
-                                        // expects to find the forward affordance in their
-                                        // text-flow direction.
-                                        isRtl && { flexDirection: 'row-reverse' },
-                                        footerAlign,
-                                    ], children: [showVoiceMic && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
-                                                styles.voiceMic,
-                                                { backgroundColor: voiceActive ? '#ef4444' : primaryColor },
-                                                buttonAlign === 'right' && { marginRight: 'auto' },
-                                            ], onPress: toggleVoice, accessibilityLabel: voiceActive ? 'Stop hands-free voice' : 'Answer with voice', activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.voiceMicGlyph, children: "\uD83C\uDFA4" }) })), display?.showBack !== false && (history.length > 0 || currentPage > 0) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
-                                                styles.backButton,
-                                                isLight && { backgroundColor: palette.input, borderColor: palette.inputBorder },
-                                                btnAutoWidth,
-                                                // Right-align parity with web: Back hugs the left edge while
-                                                // Next/Submit sits on the right (web uses margin-right:auto).
-                                                buttonAlign === 'right' && { marginRight: 'auto' },
-                                            ], onPress: handleBack, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.backButtonText, fontStyle, themeTextSecondary, buttonFS], children: "Back" }) })), impliedNow.length > 0 ? null : (() => {
-                                            // Reflect the actual outcome of pressing Next: if a
-                                            // branch resolves to __end__ we're submitting even
-                                            // when we're not on the last page. Cheap to evaluate
-                                            // here — same call handleNext will make.
-                                            const target = resolveNextTarget();
-                                            // Reflect the actual outcome of pressing Next. A __end__
-                                            // branch always submits. A fork branch or a page/linear-
-                                            // next never submits. Otherwise: last-page + no fork
-                                            // frame left on the stack = submit.
-                                            const willSubmit = target?.kind === 'end' ||
-                                                (target == null && isLastPage && forkStack.length === 0);
-                                            const isSingleButton = history.length === 0 && currentPage === 0;
-                                            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity
-                                            // Full-width ONLY when alignment is unset (native default) or
-                                            // explicitly 'full'. When the author picked right/center/left,
-                                            // respect it even on the first page (was forced full-width,
-                                            // so mobile ignored the setting on page 1 — unlike web).
-                                            , { 
-                                                // Full-width ONLY when alignment is unset (native default) or
-                                                // explicitly 'full'. When the author picked right/center/left,
-                                                // respect it even on the first page (was forced full-width,
-                                                // so mobile ignored the setting on page 1 — unlike web).
-                                                style: [styles.nextButton, ((isSingleButton && !alignsAuto) || buttonAlign === 'full') && styles.nextButtonFull, btnAutoWidth, { backgroundColor: primaryColor }], onPress: handleNext, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.nextButtonText, fontStyle, buttonFS], children: willSubmit ? 'Submit' : 'Next' }) }));
-                                        })()] })] }))] }), (0, jsx_runtime_1.jsx)(handsFreeVoice_1.VoiceOverlay, { visible: voiceActive, phase: voicePhase, transcript: voiceTranscript, onStop: () => (0, handsFreeVoice_1.stopVoice)() })] }) }));
+                        })() : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: halfSide
+                                ? { flexDirection: imgD.side === 'right' ? 'row-reverse' : 'row',
+                                    alignItems: 'stretch' }
+                                : undefined, children: [imgLayout === 'half' ? cardImageHalf : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: halfSide
+                                        ? {
+                                            flex: 1,
+                                            // minWidth 0, or one long unbroken word in the headline
+                                            // refuses to shrink and shoves the picture off its share.
+                                            minWidth: 0,
+                                            // THE WORDS SIT 12 FROM THE PICTURE, as they do on the web
+                                            // card — `.cxp-half-text` carries `padding-left:12px` and
+                                            // nothing else, because the card's own padding is already
+                                            // spent on the far side. Here the header, body and footer
+                                            // each carry the full card padding, so the text column
+                                            // started a whole padding further in and came out 12pt
+                                            // narrower than the frame beside it. That is about one word
+                                            // per line — enough to wrap a two-line description onto
+                                            // three, which is exactly how it was reported.
+                                            ...(imgD.side === 'right'
+                                                ? { marginRight: 12 - halfPadR }
+                                                : { marginLeft: 12 - halfPadL }),
+                                        }
+                                        : undefined, children: [langSwitcher, imgLayout === 'above' ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: padBand, children: cardImageBand }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                                styles.header,
+                                                padHeader,
+                                                // No ✕ reservation here in either direction — the title carries
+                                                // it now (closeReserve), so the row below is free for the action.
+                                                // Thumbnail beside the text, as `.cxp-notify-row` does on web.
+                                                // A row for the thumbnail, and equally for a button that sits
+                                                // beside the text — a notification with no image still needs
+                                                // one if its action is next to the content.
+                                                (besideImage || notifyBeside) && { flexDirection: 'row', alignItems: 'center' },
+                                            ], children: [((survey.branding?.showLogo !== false && survey.branding?.logo)
+                                                    || survey.branding?.brandName) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                                        styles.brandRow,
+                                                        // Logo position, same rule as the other two renderers.
+                                                        (survey.branding?.logoAlign === 'center'
+                                                            ? { justifyContent: 'center' }
+                                                            : survey.branding?.logoAlign === 'right'
+                                                                ? { justifyContent: 'flex-end' }
+                                                                : null),
+                                                    ], children: [survey.branding?.showLogo !== false && survey.branding?.logo ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: survey.branding.logo }, style: styles.brandLogo, resizeMode: "contain", accessible: !!survey.branding.brandName, accessibilityLabel: survey.branding.brandName })) : null, survey.branding?.brandName ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.brandName, dirText, fontStyle, themeTextSecondary], children: survey.branding.brandName })) : null] })), besideImage ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: cardImageQ?.imageUrl }, accessibilityLabel: cardImageQ?.alt || undefined, accessible: !!cardImageQ?.alt, style: {
+                                                        width: contract.imageSize,
+                                                        height: contract.imageSize,
+                                                        borderRadius: contract.imageRadius,
+                                                        marginRight: 12,
+                                                        flexShrink: 0,
+                                                        // A square beside the text sits level with the headline
+                                                        // it belongs to unless the author says otherwise.
+                                                        alignSelf: imgD.align === 'start' ? 'flex-start'
+                                                            : imgD.align === 'end' ? 'flex-end' : 'center',
+                                                    }, resizeMode: imgD.fit })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: (besideImage || notifyBeside) ? { flex: 1, minWidth: 0 } : undefined, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, dirText, fontStyle, themeTextPrimary, titleFS, notifyTitleFS,
+                                                                closeReserve,
+                                                                survey.titleAlign
+                                                                    ? { textAlign: survey.titleAlign }
+                                                                    : null], children: (0, interpolate_1.interpolatePlain)(
+                                                            // Title is plain text; strip any stray rich-text markup +
+                                                            // decode &nbsp; so it never shows literal HTML on native.
+                                                            String((0, translationLookup_1.surveyText)(survey, currentLanguage, 'title', survey.title) || '')
+                                                                .replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' '), evalCtx) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: notifyBeside ? {
+                                                                flexDirection: 'row',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'space-between',
+                                                            } : undefined, children: [(() => {
+                                                                    // Description is authored as rich HTML; native Text can't render
+                                                                    // markup, so strip tags + decode &nbsp; to plain text.
+                                                                    const descRaw = (0, translationLookup_1.surveyText)(survey, currentLanguage, 'description', survey.description);
+                                                                    const desc = String(descRaw || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' ').trim();
+                                                                    return desc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, dirText, fontStyle, themeTextSecondary, descFS, notifyDescFS,
+                                                                            // Takes the width the button leaves, and no more.
+                                                                            notifyBeside && { flex: 1, minWidth: 0, marginTop: 2 }], children: (0, interpolate_1.interpolatePlain)(desc, evalCtx) })) : null;
+                                                                })(), notifyActionQ ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexShrink: 0, marginLeft: 12 }, children: renderQuestion(notifyActionQ) })) : null] })] }), deadlineEl, (() => {
+                                                    const terms = cardTerms;
+                                                    return terms ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            styles.description, dirText, fontStyle, themeTextMuted,
+                                                            { fontSize: Math.round((_num(_authoredStyle.fontSizeDescription) ?? 14) * 0.85),
+                                                                marginTop: 6 },
+                                                        ], children: (0, interpolate_1.interpolatePlain)(terms, evalCtx) })) : null;
+                                                })(), showProgressTop && progressEl] }), imgLayout === 'below' ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: padBand, children: cardImageBand }) : null, (0, jsx_runtime_1.jsx)(BodyContainer, { style: [styles.body, padBody, fsContent], showsVerticalScrollIndicator: false, children: currentQuestions.filter((q) => {
+                                                // The card composes the picture itself — beside the text, in
+                                                // a band, or behind everything. Leaving it here too would
+                                                // render it twice, the second time full-bleed.
+                                                if (composesImage && cardImageQ && q === cardImageQ)
+                                                    return false;
+                                                // Drawn as the offer's conditions above — see cardTerms.
+                                                if (cardTerms && String(q?.id ?? '') === 'offer_terms'
+                                                    && String(q?.type ?? '').toLowerCase() === 'content')
+                                                    return false;
+                                                // Drawn up in the header row instead — leaving it here too
+                                                // would render the action twice.
+                                                if (notifyActionQ && q === notifyActionQ)
+                                                    return false;
+                                                return true;
+                                            }).map((q) => {
+                                                // v1.1 uses `id`+`required`; legacy uses `name`+`isRequired`.
+                                                // The provider normalizes both onto the same object so
+                                                // either lookup works.
+                                                const rowKey = q.id || q.name;
+                                                // Through forValidation, so requiredWhen counts. A question
+                                                // that becomes required part-way through was previously
+                                                // marked with nothing at all.
+                                                const isRequired = !!forValidation(q).required
+                                                    || q.required || q.isRequired;
+                                                // An implied question has no prompt: its ACTIONS are the UI,
+                                                // and its `text` is bookkeeping the author never meant to
+                                                // show. Web renders the whole block display:none and lifts
+                                                // the buttons into the nav bar; here the buttons render in
+                                                // place, so only the label and description are suppressed.
+                                                // Without this the stray authoring text ("tte") appeared as a
+                                                // question above the notification's own button.
+                                                const isImplied = String(q?.type ?? '').toLowerCase() === 'implied';
+                                                const qLabel = (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx);
+                                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: (el) => { questionRefs.current[rowKey] = el; }, style: [
+                                                        styles.questionBlock, gapQBlock,
+                                                        // A NOTIFICATION'S ACTION IS NOT A QUESTION IN A LIST.
+                                                        //
+                                                        // questionBlock carries `marginBottom: sectionGap` so
+                                                        // consecutive questions breathe. On a notification the
+                                                        // only "question" is the implied action, so that gap
+                                                        // landed UNDER the button as dead space at the bottom of
+                                                        // the card — the reported extra room the preview does not
+                                                        // have. Web spends 12px above the action and nothing
+                                                        // below it (`.cxp-notify-action-below`); this matches.
+                                                        isNotifyBanner && { marginTop: 12, marginBottom: 0 },
+                                                    ], children: [!(0, survey_spec_1.showsQuestionLabel)(q) ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.questionTitle, dirText, fontStyle, themeTextPrimary, qTitleFS], 
+                                                            // The asterisk below is decoration: a screen reader
+                                                            // reads it as "star", or skips it, so a required
+                                                            // question sounded exactly like an optional one until
+                                                            // submitting failed. The label says the word.
+                                                            accessibilityLabel: isRequired ? `${qLabel}, required` : qLabel, children: [questionNumberById[rowKey] ? `Q${questionNumberById[rowKey]}. ` : '', (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx), isRequired && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.required, children: " *" })] })), (() => {
+                                                            if (isImplied)
+                                                                return null;
+                                                            const qDesc = (0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'description', q.description);
+                                                            return qDesc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.questionDesc, dirText, fontStyle, themeTextMuted, qDescFS], children: (0, interpolate_1.interpolatePlain)(qDesc, evalCtx) })) : null;
+                                                        })(), renderQuestion(q), errors[rowKey] ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, dirText, fontStyle], 
+                                                            // Announced when it appears, and reachable afterwards:
+                                                            // a message that is only spoken once leaves someone who
+                                                            // moves back to the field with no way to find out what
+                                                            // was wrong with their answer.
+                                                            accessibilityRole: "alert", accessibilityLiveRegion: "polite", children: errors[rowKey] })) : null] }, rowKey));
+                                            }) }), submitError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.submitError, dirText, fontStyle], 
+                                            // Announced, not merely displayed. A respondent who cannot see
+                                            // the panel is otherwise held with no way to discover why.
+                                            accessibilityRole: "alert", accessibilityLiveRegion: "polite", children: submitError })) : null, showProgressBottom && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: padFooter, children: progressEl }), footerHasContent && (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                                styles.footer,
+                                                padFooter,
+                                                // Flip button order for RTL so the primary (Next / Submit)
+                                                // action sits on the left where an Arabic reader
+                                                // expects to find the forward affordance in their
+                                                // text-flow direction.
+                                                isRtl && { flexDirection: 'row-reverse' },
+                                                footerAlign,
+                                            ], children: [showVoiceMic && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ...swipeExempt, style: [
+                                                        styles.voiceMic,
+                                                        { backgroundColor: voiceActive ? '#ef4444' : primaryColor },
+                                                        buttonAlign === 'right' && { marginRight: 'auto' },
+                                                    ], onPress: toggleVoice, accessibilityLabel: voiceActive ? 'Stop hands-free voice' : 'Answer with voice', activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.voiceMicGlyph, children: "\uD83C\uDFA4" }) })), display?.showBack !== false && (history.length > 0 || currentPage > 0) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ...swipeExempt, style: [
+                                                        styles.backButton,
+                                                        isLight && { backgroundColor: palette.input, borderColor: palette.inputBorder },
+                                                        btnAutoWidth,
+                                                        // Right-align parity with web: Back hugs the left edge while
+                                                        // Next/Submit sits on the right (web uses margin-right:auto).
+                                                        buttonAlign === 'right' && { marginRight: 'auto' },
+                                                    ], onPress: handleBack, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.backButtonText, fontStyle, themeTextSecondary, buttonFS], children: "Back" }) })), impliedNow.length > 0 ? null : (() => {
+                                                    // Reflect the actual outcome of pressing Next: if a
+                                                    // branch resolves to __end__ we're submitting even
+                                                    // when we're not on the last page. Cheap to evaluate
+                                                    // here — same call handleNext will make.
+                                                    const target = resolveNextTarget();
+                                                    // Reflect the actual outcome of pressing Next. A __end__
+                                                    // branch always submits. A fork branch or a page/linear-
+                                                    // next never submits. Otherwise: last-page + no fork
+                                                    // frame left on the stack = submit.
+                                                    const willSubmit = target?.kind === 'end' ||
+                                                        (target == null && isLastPage && forkStack.length === 0);
+                                                    const isSingleButton = history.length === 0 && currentPage === 0;
+                                                    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ...swipeExempt, 
+                                                        // Full-width ONLY when alignment is unset (native default) or
+                                                        // explicitly 'full'. When the author picked right/center/left,
+                                                        // respect it even on the first page (was forced full-width,
+                                                        // so mobile ignored the setting on page 1 — unlike web).
+                                                        style: [styles.nextButton, ((isSingleButton && !alignsAuto) || buttonAlign === 'full') && styles.nextButtonFull, btnAutoWidth, { backgroundColor: primaryColor }], onPress: handleNext, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.nextButtonText, fontStyle, buttonFS], children: willSubmit ? 'Submit' : 'Next' }) }));
+                                                })()] })] })] }))] }), (0, jsx_runtime_1.jsx)(handsFreeVoice_1.VoiceOverlay, { visible: voiceActive, phase: voicePhase, transcript: voiceTranscript, onStop: () => (0, handsFreeVoice_1.stopVoice)() })] }) }));
 }
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
 /** Web draws a popup at `width:90vw`; the card matches so both read the same. */
@@ -2002,7 +2803,9 @@ const CARD_VIEWPORT_FRACTION = 0.9;
 const makeStyles = (c) => react_native_1.StyleSheet.create({
     overlay: {
         flex: 1,
-        backgroundColor: c.ground,
+        // The scrim, not the page. See SurveyStyleContract.overlay — this used to
+        // read `ground`, which web spends on the widget surface instead.
+        backgroundColor: c.overlay,
         justifyContent: 'center',
         alignItems: 'center',
         padding: 20,
@@ -2011,7 +2814,12 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         width: Math.min(SCREEN_WIDTH - 40, 420),
         maxHeight: '85%',
         backgroundColor: c.card,
-        borderRadius: c.cardRadius,
+        // FOUR CORNERS, each falling back to the single value — so unlinking one
+        // corner cannot silently square the other three.
+        borderTopLeftRadius: c.cardRadiusTopLeft ?? c.cardRadius,
+        borderTopRightRadius: c.cardRadiusTopRight ?? c.cardRadius,
+        borderBottomRightRadius: c.cardRadiusBottomRight ?? c.cardRadius,
+        borderBottomLeftRadius: c.cardRadiusBottomLeft ?? c.cardRadius,
         borderWidth: 1,
         borderColor: c.cardBorder,
         overflow: 'hidden',
@@ -2031,20 +2839,35 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
     },
     closeButton: {
         position: 'absolute',
-        top: 12,
+        // From the contract now — see SurveyStyleContract.closeSize. At the old
+        // hardcoded 12 the circle sat a third of the way into the header's own
+        // padding, so it read as part of the text block rather than as the card's
+        // own control; 8 is the default it ships with.
+        top: c.closeInset,
         // left / right applied inline based on survey.direction — see
         // the closeButton render site above.
         zIndex: 10,
-        width: 32,
-        height: 32,
-        borderRadius: 16,
+        width: c.closeSize,
+        height: c.closeSize,
+        borderRadius: c.closeRadius,
         backgroundColor: c.closeBg,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    closeText: {
-        color: c.closeText,
-        fontSize: 16,
+    // The two bars that make the cross. Sized off the button, not off a font.
+    // Sized off the disc, so a smaller button keeps its proportions.
+    closeGlyph: {
+        width: Math.round(c.closeSize * 0.38),
+        height: Math.round(c.closeSize * 0.38),
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    closeBar: {
+        position: 'absolute',
+        width: Math.round(c.closeSize * 0.38),
+        height: 1.5,
+        borderRadius: 1,
+        backgroundColor: c.closeText,
     },
     header: {
         // Per-side padding maps onto the three stacked regions this modal already
@@ -2054,9 +2877,15 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         paddingTop: c.cardPaddingTop ?? c.cardPadding,
         paddingLeft: c.cardPaddingLeft ?? c.cardPadding,
         paddingBottom: 12,
-        // 48 is the room the close button needs; a larger authored right padding
-        // wins, a smaller one would put the title under the ✕.
-        paddingRight: Math.max(48, c.cardPaddingRight ?? c.cardPadding),
+        // THE ✕'s ROOM IS THE TITLE'S PROBLEM, NOT THE HEADER'S.
+        //
+        // This reserved 48pt on the whole header so a title could not slide under
+        // the close button. That was right while the header held only text — and
+        // wrong once a notification's action moved up into it, because the
+        // reservation then squeezed the BUTTON as well, and moving the ✕ visibly
+        // shifted an action sitting nowhere near it. Web has always reserved on the
+        // title alone (`titlePad`); this now matches.
+        paddingRight: c.cardPaddingRight ?? c.cardPadding,
     },
     // Branding row above the title — logo image + optional brand name
     // caption. Center-aligned; the logo is capped small enough that
@@ -2079,6 +2908,14 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         marginTop: 6,
     },
     title: {
+        // Unset is transparent — see SurveyStyleContract.titleBackground.
+        ...(c.titleBackground ? {
+            backgroundColor: c.titleBackground,
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            borderRadius: 4,
+            overflow: 'hidden',
+        } : null),
         color: c.headingColor,
         fontSize: c.fontSizeHeading,
         // 600, matching web's `.cxp-widget-title`. At 700 the same string is about
@@ -2089,10 +2926,26 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         fontWeight: '600',
     },
     description: {
+        // A RATIO, from the contract. Web multiplies lineHeightBody by the font
+        // size; mobile had 20 written in, so the builder's Line height control
+        // moved one renderer and not the other. Rounded because RN wants points.
+        lineHeight: Math.round(c.fontSizeDescription * c.lineHeightBody),
+        ...(c.descriptionBackground ? {
+            backgroundColor: c.descriptionBackground,
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            borderRadius: 4,
+            overflow: 'hidden',
+        } : null),
         color: c.descriptionColor,
-        fontSize: 14,
+        // FROM THE CONTRACT, like the title two rules up. This was 14, written in,
+        // so `fontSizeDescription` reached the web card and the notification's own
+        // scale and nothing else: an offer authored at heading 11 / body 10 drew
+        // the heading at 11 and the body at 14, which is a body LARGER than its
+        // own headline. The authored numbers were never wrong; one of the two was
+        // simply not being read.
+        fontSize: c.fontSizeDescription,
         marginTop: 6,
-        lineHeight: 20,
     },
     progress: {
         color: c.progressText,
@@ -2185,7 +3038,14 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
     // weight rather than looking like an option list.
     impliedActions: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginTop: 4 },
     impliedBtn: {
-        flexGrow: 1, flexBasis: 140, paddingVertical: 13, paddingHorizontal: 18,
+        // flexShrink so a long label narrows the button rather than pushing the
+        // text off the card when the action sits beside the content.
+        flexGrow: 1, flexShrink: 1, flexBasis: 140, minWidth: 0,
+        // ALL THREE SIZE CONTROLS, from the contract. Back and Next have read
+        // buttonPaddingY and buttonFontSize throughout; this button carried its own
+        // literals, so the builder's Size group moved the preview and left the
+        // action a notification actually offers exactly where it was.
+        paddingVertical: c.buttonPaddingY, paddingHorizontal: c.buttonPaddingX,
         // From the contract, like every other button. A literal 8 here meant an
         // authored button radius applied to Next and Back but not to the action a
         // notification actually offers.
@@ -2194,11 +3054,27 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
     // The brand accent, not a hardcoded blue. `#2b6cb0` ignored primaryColor
     // entirely, so a notification's only action was off-brand on every survey —
     // the same button renders in the authored accent on web.
+    // borderColor too: the button carries a 1px border (transparent by default),
+    // so an authored border colour has somewhere to land.
+    // NO borderColor HERE. `primaryBorder` is derived from the brand colour when
+    // none is authored, so setting it unconditionally drew a border on every
+    // button — while web draws one only when the author asked for it. The
+    // authored value is applied at the render site instead, where "authored" can
+    // still be told apart from "derived". impliedBtn's transparent edge stands
+    // otherwise, so the 1px reserves its space without showing.
     impliedPrimary: { backgroundColor: c.primaryBg },
-    impliedSecondary: { backgroundColor: 'transparent', borderColor: c.inputBorder },
+    // THE SECOND BUTTON READS THE CONTRACT, like the first.
+    //
+    // The contract has carried secondaryBg/Text/Border all along and this drew
+    // from `transparent` and the INPUT border instead — so an offer's decline
+    // action was the one thing on the card an author could not colour, while the
+    // panel showed a single button's settings for a card with two.
+    impliedSecondary: { backgroundColor: c.secondaryBg, borderColor: c.secondaryBorder },
     impliedChosen: { opacity: 0.75 },
-    impliedPrimaryLabel: { color: c.primaryText, fontWeight: '600', fontSize: 15 },
-    impliedSecondaryLabel: { color: c.textPrimary, fontWeight: '600', fontSize: 15 },
+    // fontSize from the contract for the same reason — its default IS 15, so an
+    // unstyled notification renders identically and an authored one now moves.
+    impliedPrimaryLabel: { color: c.primaryText, fontWeight: '600', fontSize: c.buttonFontSize },
+    impliedSecondaryLabel: { color: c.secondaryText, fontWeight: '600', fontSize: c.buttonFontSize },
     desktopHint: {
         color: c.hintText,
         fontSize: 13,