/* Approved design, scoped away from all live payment pages. */
#app.approved-flow>.header{height:64px;padding:17px 16px;max-width:none;gap:0}
#app.approved-flow .header .logo{width:88px;height:29px}
#app.approved-flow .header .progress{display:block;flex:none;width:140px;max-width:none;margin:0}
#app.approved-flow .header .claim-total{font-size:12px;max-width:150px;margin-left:auto}
#app.approved-flow .header:has(.claim-total) .progress{display:none}
#app.approved-flow>.screen:not(.checkout-b-screen){inset:64px 0 0}
#app.approved-flow .primary{background:#050505;color:white;font-weight:700}
#app.approved-flow .primary.secondary{color:#111;background:white}
#app.approved-flow .primary:disabled{background:#050505;opacity:.35}
#app.approved-flow .intro .content{padding:4px 16px 0}
#app.approved-flow .intro h1{font-size:28px;line-height:1.08;letter-spacing:-.045em;font-weight:800}
#app.approved-flow .intro .subtitle{font-size:15.2px;line-height:1.48;margin-top:16px}
#app.approved-flow .intro .story-art-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:14px;padding:4px 0 8px}
#app.approved-flow .intro .art{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:0}
#app.approved-flow .intro.folder .art{max-width:90%;max-height:90%}
#app.approved-flow .footer{padding:0 16px max(16px,env(safe-area-inset-bottom))}
#app.approved-flow .reference-trophy .content{overflow:hidden}
#app.approved-flow .reference-trophy .trophy-block{position:absolute;top:calc(50% - 105px);left:16px;right:16px;text-align:center}
#app.approved-flow .reference-trophy .trophy-block img{width:112px;height:114px;object-fit:contain}
#app.approved-flow .reference-trophy .trophy-block h2{font-size:19.3px;line-height:1.2;margin-top:16px;font-weight:800}
#app.approved-flow.brand-bg>.question{top:64px;overflow:visible}
#app.approved-flow .question .counter{position:static;align-self:flex-end;height:40px;min-height:40px;margin:8px 16px 28px;padding:8px 12px;font-size:12.8px;line-height:24px;font-weight:650}
#app.approved-flow .question .card{margin:0 16px;padding:32px 18px 16px;border-radius:24px 24px 0 0;min-height:0;overflow:visible}
#app.approved-flow .question h1{font-size:25.728px;font-weight:800;line-height:1.08;letter-spacing:-.045em}
#app.approved-flow .question .brand-mini{top:-29px;left:8px;width:58px;height:58px;transform:rotate(-6deg)}
#app.approved-flow .question .brand-art{width:66%;max-width:240px;height:auto;max-height:150px;padding:10px;border:1px solid #e3e5ea;border-radius:22px;margin:auto;object-fit:contain;box-shadow:0 8px 22px #11182714}
#app.approved-flow .question .yn{margin:0;padding:14px 0 0;gap:8px;flex-shrink:0}
#app.approved-flow .question .yn button{height:48px;min-height:48px;border:2px solid #dfe2e8;border-radius:15px;font-size:16px;font-weight:650;color:#111827;background:#fff}
#app.approved-flow .question .yn button.selected{background:var(--blue);border-color:var(--blue);color:white}
#app.approved-flow .form-center{display:block;padding:110px 16px 0;max-width:none;text-align:center}
#app.approved-flow .form-center .subtitle{margin:14px 3px 0}
#app.approved-flow .form-center label{margin-top:26px}
#app.approved-flow .field{height:52px;min-height:52px;background:#ededed}
#app.approved-flow .choice{background:#f0edef}
#app.approved-flow .choice.selected{background:var(--blue)}
#app.approved-flow .survey-result .content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
#app.approved-flow .survey-result h1{font-size:28px;font-style:normal}
#app.approved-flow .survey-result .estimate{font-size:88.44px;font-style:normal;margin:26px 0 8px}
#app.approved-flow .survey-result .result-symbol{font-size:60px;margin-bottom:28px}
#app.approved-flow.brand-bg{background:#0047ff}
#app.approved-flow .reference-trophy .trophy-block{padding:0}
#app.approved-flow .reference-trophy .content{padding-top:4px}
#app.approved-flow{--blue:#0047ff;--ink:#111;--muted:#606571}
#app.approved-flow>.header{gap:10px}#app.approved-flow .header .progress{width:110px;margin-left:auto}#app.approved-flow .header .public-login{position:static;margin-left:auto;flex:none}
@media(max-height:700px){#app.approved-flow .form-center{padding-top:40px}#app.approved-flow .question .counter{margin-bottom:16px}#app.approved-flow .question .card{padding-top:24px}}@media(min-width:768px){.device:has(#app.approved-flow){max-width:430px;margin:16px auto;border-radius:24px;overflow:hidden;box-shadow:0 12px 50px #16243922}.device #app.approved-flow{height:calc(100dvh - 32px);min-height:600px}}

/* Match the approved mobile composition; all selectors exclude payment step 34. */
#app.approved-flow>.header{height:64px;padding:17px 16px;gap:0;justify-content:space-between}
#app.approved-flow>.header .progress{width:140px;margin:0}
#app.approved-flow>.screen:not(.checkout-b-screen){inset:64px 0 0}
#app.approved-flow>.screen>.content{padding-left:16px;padding-right:16px}
#app.approved-flow>.screen h1{font-size:28px;line-height:1.08;letter-spacing:-.045em}
#app.approved-flow>.screen>.footer{padding:0 16px max(16px,env(safe-area-inset-bottom))}
#app.approved-flow[data-step="0"]>.screen>.content{display:block;padding-top:4px}
#app.approved-flow[data-step="0"] .trophy-block{position:absolute;top:calc(50% - 105px);left:16px;right:16px;display:block;padding:0}
#app.approved-flow .reference-reviews h1{font-size:23px;line-height:1.08;letter-spacing:-1.05px}
#app.approved-flow .reference-reviews .subtitle{margin-top:9px}
#app.approved-flow .reference-reviews .story-art-wrap{margin-top:8px;padding:4px 0 8px;transform:translateY(-8px)}
#app.approved-flow .reference-reviews .art{width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain}
#app.approved-flow .sample-disclosure{font-size:11px;line-height:1.3;color:#606571;margin:0 0 8px;text-align:center;flex-shrink:0}
#app.approved-flow>.screen>.form-center{padding-top:110px;max-width:none}
@media(min-width:768px){.device:has(#app.approved-flow){max-width:402px;margin:24px auto}.device #app.approved-flow{height:844px;max-height:calc(100dvh - 48px);min-height:600px}}
@media(max-height:700px){#app.approved-flow>.screen>.form-center{padding-top:40px}}
@media(max-height:540px){#app.approved-flow[data-step="0"] .trophy-block{position:static;display:flex;flex:1;top:auto}#app.approved-flow[data-step="0"]>.screen>.content{display:flex}}

/* Keep every review card inside the available space above Continue. */
#app.approved-flow .reference-reviews .content{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0;padding-bottom:0}
#app.approved-flow .reference-reviews .subtitle{font-size:13px;line-height:1.35;margin-top:9px}
#app.approved-flow .reference-reviews .story-art-wrap{display:flex;align-items:center;justify-content:center;min-height:0;margin:14px 0 12px;padding:0;transform:none;overflow:visible}
#app.approved-flow .reference-reviews .art{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;clip-path:inset(.5% .2% .2% .2%)}

/* Feather the outer image canvas into the white page without changing the cards. */
#app.approved-flow .reference-reviews .art{filter:contrast(1.035);mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(to bottom,transparent,#000 1.5%,#000 98.5%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(to bottom,transparent,#000 1.5%,#000 98.5%,transparent);-webkit-mask-composite:source-in}
