/* Accepted R08–R22. Page-scoped presentation only; existing actions and facts retain authority. */
body[data-design-page] {
  --service-orange: #c64c24;
  --service-peach: #fce8d4;
  --service-border: #eadbc9;
  --service-paper: #fffdfa;
  --service-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23be612c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7h17l7 7v27H13zM29 7v9h8M19 23h12M19 29h12M19 35h8'/%3E%3C/svg%3E");
  --service-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8642d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 20c0 10-12 21-12 21S12 30 12 20a12 12 0 1 1 24 0Z'/%3E%3Ccircle cx='24' cy='20' r='4'/%3E%3C/svg%3E");
  --service-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23f8d697' stroke='%23b47b29' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='m24 6 5.5 11.5 12.5 2-9 9 2 13-11-6-11 6 2-13-9-9 12.5-2Z'/%3E%3C/svg%3E");
  --service-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8642d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='12' width='30' height='29' rx='4'/%3E%3Cpath d='M16 7v10M32 7v10M9 23h30M17 29h3M28 29h3M17 35h3'/%3E%3C/svg%3E");
  --service-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23c78932' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='9' fill='%23f8dba3'/%3E%3Cpath d='M24 3v6M24 39v6M3 24h6M39 24h6M9 9l4 4M35 35l4 4M9 39l4-4M35 13l4-4'/%3E%3C/svg%3E");
  --service-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23996534' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 19h24v10a10 10 0 0 1-10 10h-4a10 10 0 0 1-10-10ZM34 21h3a6 6 0 0 1 0 12h-4M8 42h30M17 7c-4 4 4 4 0 8M25 7c-4 4 4 4 0 8'/%3E%3C/svg%3E");
  --service-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8642d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 18h32v9H8zM11 27v15h26V27M24 18v24M24 18C5 18 13 1 20 9l4 9Zm0 0c19 0 11-17 4-9l-4 9Z'/%3E%3C/svg%3E");
  --service-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23ad885e' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='34' cy='33' r='19' fill='%23fffaf2'/%3E%3Cpath d='m48 48 18 19M23 29a12 12 0 0 1 12-9'/%3E%3C/svg%3E");
  --service-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8642d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='4'/%3E%3Ccircle cx='36' cy='37' r='4'/%3E%3Cpath d='M12 15v14a8 8 0 0 0 16 0V19a8 8 0 0 1 8-8M32 7l4 4-4 4'/%3E%3C/svg%3E");
}
body:is([data-design-page="news"], [data-design-page="notifications"], [data-design-page="weather"], [data-design-page="rewards"], [data-design-page="coupons"]) .page-head { margin: 0 0 20px; padding: 12px 16px 0; background: none; border: 0; box-shadow: none; }
body:is([data-design-page="news"], [data-design-page="notifications"], [data-design-page="weather"], [data-design-page="rewards"], [data-design-page="coupons"]) .page-head h1 { font-size: clamp(28px, 6.8vw, 34px); line-height: 1.4; }
body:is([data-design-page="news"], [data-design-page="notifications"], [data-design-page="weather"], [data-design-page="rewards"], [data-design-page="coupons"]) .screen-stage { background: none; border: 0; box-shadow: none; }
body[data-design-page="news"] .ux14-news-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
body[data-design-page="news"] [data-news-type] { white-space: normal; min-height: 46px; }
body[data-design-page="news"] .ux14-news-filter { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; mask-image: none; }
body[data-design-page="news"] .ux14-news-row { border: 1px solid var(--service-border); border-radius: 22px; overflow: hidden; background: var(--service-paper); box-shadow: 0 4px 14px #79512a08; }
body[data-design-page="news"] .ux14-news-link { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 0; background: none; box-shadow: none; }
body[data-design-page="news"] .ux14-news-row:not(.ux14-news-row--activity) .ux14-news-link::before { content: ""; flex: 0 0 62px; height: 72px; border-radius: 14px; background: var(--service-document) center / 44px no-repeat, var(--service-peach); }
body[data-design-page="news"] .ux14-news-row--activity .ux14-news-link { display: block; padding: 0; }
body[data-design-page="news"] .ux14-news-photo { aspect-ratio: 16 / 9; height: auto; border-radius: 0; }
body[data-design-page="news"] .ux14-news-row--activity .news-body { padding: 16px 18px 20px; }
body[data-design-page="news"] .news-kicker { display: table; padding: 4px 10px; border-radius: 20px; background: #fff0dd; color: #8e572d; font-size: 12px; margin-bottom: 8px; }
body[data-design-page="news"] .news-headline { font-size: 19px; line-height: 1.55; }
body[data-design-page="news"] .news-summary--row { font-size: 14px; line-height: 1.65; margin-top: 7px; }
body[data-design-page="news"] .ux14-news-schedule { margin-top: 8px; font-size: 13px; }
body[data-design-page="news-article"] .article .screen-stage { padding: 0; background: none; box-shadow: none; }
body[data-design-page="news-article"] .article-photo { margin: 0 -16px; width: calc(100% + 32px); border: 0; border-radius: 0; aspect-ratio: 16 / 10; overflow: hidden; }
body[data-design-page="news-article"] .article-photo img { width: 100%; height: 100%; object-fit: cover; }
body[data-design-page="news-article"] .article-photo--notice { aspect-ratio: auto; min-height: 108px; margin-bottom: 12px; padding: 20px; }
body[data-design-page="news-article"] .article-head { position: relative; margin: -14px 0 0; padding: 22px 16px 18px; border-radius: 24px 24px 0 0; background: #fffaf2; }
body[data-design-page="news-article"] .article-head h1 { font-size: clamp(27px, 6.7vw, 34px); line-height: 1.5; margin-top: 8px; }
body[data-design-page="news-article"] .article-summary { font-size: 16px; line-height: 1.8; }
body[data-design-page="news-article"] .article-facts { margin-top: 8px; }
body[data-design-page="news-article"] .fact-sheet { border: 1px solid var(--service-border); border-radius: 20px; padding: 4px 16px; background: var(--service-paper); }
body[data-design-page="news-article"] .fact-row { position: relative; display: block; padding: 16px 0 16px 53px; border-color: var(--service-border); }
body[data-design-page="news-article"] .fact-row::before { content: ""; position: absolute; left: 0; top: 18px; width: 40px; height: 40px; border-radius: 50%; background: var(--service-document) center / 28px no-repeat, var(--service-peach); }
body[data-design-page="news-article"] .fact-row:first-child::before { background-image: var(--service-calendar); }
body[data-design-page="news-article"] .fact-row:nth-child(2)::before { background-image: var(--service-pin); }
body[data-design-page="news-article"] .fact-row dt { font-size: 13px; margin-bottom: 3px; font-weight: 400; }
body[data-design-page="news-article"] .fact-row dd { font-size: 16px; margin: 0; }
body[data-design-page="news-article"] .article-body { font-size: 16px; line-height: 1.9; }
body[data-design-page="news-article"] .article-actions { display: block; }
body[data-design-page="news-article"] .article-related .news-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
body[data-design-page="news-article"] .article-related .news-body { min-width: 0; }
body[data-design-page="news-article"] .article-related .news-headline { white-space: normal; overflow-wrap: anywhere; }
body[data-design-page="news-article"] [data-action="share"] { width: 100%; min-height: 52px; background: var(--service-orange); border-color: var(--service-orange); color: #fff; border-radius: 14px; }
body[data-design-page="notifications"] .notifications-preview-heading { margin-top: -8px; }
body[data-design-page="notifications"] .notifications-preview-read-all { padding: 6px 12px; color: var(--service-orange); background: transparent; }
body[data-design-page="notifications"] .notifications-preview-list { gap: 14px; }
body[data-design-page="notifications"] .notifications-preview-row__card { position: relative; padding: 17px 16px 16px 78px; border: 1px solid var(--service-border); border-radius: 20px; background: var(--service-paper); box-shadow: 0 4px 14px #79512a08; }
body[data-design-page="notifications"] .notifications-preview-row[data-state="unread"] .notifications-preview-row__card { border: 1.5px solid #dfaa7d; background: var(--service-paper); }
body[data-design-page="notifications"] .notifications-preview-row__card::before { content: ""; position: absolute; left: 15px; top: 18px; width: 48px; height: 48px; border-radius: 14px; background: var(--service-document) center / 32px no-repeat, var(--service-peach); }
body[data-design-page="notifications"] [data-kind="weather"] .notifications-preview-row__card::before { background-image: var(--service-sun); }
body[data-design-page="notifications"] [data-kind="event"] .notifications-preview-row__card::before { background-image: var(--service-calendar); }
body[data-design-page="notifications"] [data-kind="points"] .notifications-preview-row__card::before { background-image: var(--service-star); }
body[data-design-page="notifications"] .notifications-preview-row__head { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
body[data-design-page="notifications"] .notifications-preview-row__type { padding: 3px 9px; border-radius: 20px; background: #fff0df; color: #976335; }
body[data-design-page="notifications"] .notifications-preview-row__state { font-size: 11px; color: #6e827a; }
body[data-design-page="notifications"] .notifications-preview-row__link { padding: 8px 0 0; min-height: 44px; }
body[data-design-page="notifications"] .notifications-preview-row__title { font-size: 17px; line-height: 1.55; }
body[data-design-page="notifications"] .notifications-preview-row__body { font-size: 14px; line-height: 1.7; }
body[data-design-page="notifications"] .notifications-preview-row__date { margin-top: 8px; font-size: 12px; }
body[data-design-page="notifications"] .notifications-preview-row__toggle { min-height: 44px; max-width: 100%; padding: 8px 12px; font-size: 12px; white-space: normal; border-radius: 12px; color: var(--service-orange); border-color: #dfba94; }
body[data-design-page="weather"] .page-head { display: block; text-align: center; }
body[data-design-page="weather"] .page-head > * { width: 100%; }
body[data-design-page="weather"] .ux14-weather-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--service-border); border-radius: 26px; padding: 8px 24px; background: var(--service-paper); box-shadow: 0 7px 24px #79512a09; }
body[data-design-page="weather"] .ux14-weather-card { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 28px 0; text-align: center; }
body[data-design-page="weather"] .ux14-weather-card + .ux14-weather-card { border-top: 1px solid var(--service-border); }
body[data-design-page="weather"] .ux14-weather-card::before { content: ""; display: block; margin: 0 auto 12px; width: 76px; height: 76px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23b66630' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M25 39V15a7 7 0 0 1 14 0v24a13 13 0 1 1-14 0Z'/%3E%3Cpath d='M32 21v26' stroke='%23dc8444' stroke-width='5'/%3E%3Ccircle cx='32' cy='49' r='6' fill='%23dc8444' stroke='none'/%3E%3Cpath d='M43 18h5M43 27h5M43 36h5'/%3E%3C/svg%3E") center / 60px no-repeat, #fff0da; }
body[data-design-page="weather"] .ux14-weather-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23e9bf78' stroke='%23b18644' stroke-width='2'%3E%3Ccircle cx='20' cy='21' r='5'/%3E%3Ccircle cx='39' cy='17' r='4'/%3E%3Ccircle cx='32' cy='35' r='6'/%3E%3Ccircle cx='15' cy='45' r='4'/%3E%3Ccircle cx='49' cy='39' r='5'/%3E%3Ccircle cx='38' cy='53' r='3'/%3E%3C/svg%3E"); }
body[data-design-page="weather"] .ux14-weather-card__head { display: block; }
body[data-design-page="weather"] .ux14-weather-card__head h2 { font-size: 19px; }
body[data-design-page="weather"] .ux14-weather-value { margin: 6px 0 0; color: var(--service-orange); font-size: clamp(56px, 15vw, 72px); line-height: 1.3; font-weight: 700; }
body[data-design-page="weather"] .ux14-weather-value--pm span { display: block; font-size: 22px; font-weight: 400; color: #61736a; }
body[data-design-page="sos"] .sos-call--danger { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; padding: 20px 16px; border-radius: 20px; background: #fff0ed; color: #9a2f2c; border: 1px solid #e9bcb5; }
body[data-design-page="sos"] .sos-emergency li:first-child .sos-call--danger,
body[data-design-page="sos"] .sos-call-list li:first-child .sos-call--danger { background: #a4302f; color: #fff; border-color: #a4302f; }
body[data-design-page="sos"] .sos-call--danger .sos-call__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
body[data-design-page="sos"] .sos-call--danger .sos-call__copy > span { font-size: 16px; line-height: 1.65; }
body[data-design-page="sos"] .sos-call--danger .sos-call__copy strong { margin: 0; padding-left: 12px; border-left: 1px solid currentColor; font-size: 26px; white-space: nowrap; }
body[data-design-page="sos"] .sos-call--danger .sos-call__phone { display: none; }
body[data-design-page="sos"] .sos-call__mark { background: #ffffff36; }
body[data-design-page="sos"] .sos-position { margin: 20px 16px; border: 1px solid var(--service-border); border-radius: 22px; padding: 20px; background: var(--service-paper); }
body[data-design-page="sos"] .sos-position__card { padding: 0; border: 0; box-shadow: none; background: none; }
body[data-design-page="sos"] .sos-action { background: var(--service-orange); border-color: var(--service-orange); border-radius: 13px; }
body[data-design-page="sos"] .sos-call--city { border: 1px solid var(--service-border); border-radius: 20px; padding: 18px; background: var(--service-paper); }
body[data-design-page="sos"] .sos-guidance { margin: 20px 16px; padding: 20px; border: 1px solid var(--service-border); border-radius: 20px; background: var(--service-paper); }
body[data-design-page="sos"] .sos-steps { line-height: 1.85; }
/* Search states share real input/filter controls; decorative state art is silent. */
body[data-design-page="search"] #search-title { font-size: clamp(28px, 7vw, 34px); }
body[data-design-page="search"] .search-types { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; }
body[data-design-page="search"] .search-type { min-height: 46px; padding: 8px 16px; white-space: normal; }
body[data-design-page="search"] .search-state { padding: 30px 20px; border: 1px solid var(--service-border); border-radius: 23px; background: var(--service-paper); box-shadow: 0 5px 16px #79512a07; text-align: center; }
body[data-design-page="search"] .search-state::before { content: ""; display: block; width: 112px; height: 112px; margin: 0 auto 20px; border-radius: 50%; background: var(--service-search) center / 78px no-repeat, #fff1df; }
body[data-design-page="search"] .search-state__title { font-size: 22px; line-height: 1.55; }
body[data-design-page="search"] .search-state__body { font-size: 15px; line-height: 1.8; margin-top: 8px; }
body[data-design-page="search"] .search-state__actions { justify-content: center; margin-top: 23px; }
body[data-design-page="search"] .search-state__action { min-height: 48px; border-radius: 13px; padding: 10px 18px; }
body[data-design-page="search"] [data-search-state="empty"] .search-state,
body[data-design-page="search"] [data-search-state="filter-empty"] .search-state { background: none; box-shadow: none; border-color: transparent; padding-top: 36px; }
body[data-design-page="search"] [data-search-state="unavailable"] .search-state::before { width: 96px; height: 96px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c3833b' stroke-width='3.5' stroke-linecap='round'%3E%3Ccircle cx='40' cy='40' r='23'/%3E%3Cpath d='M40 25v19M40 53v1'/%3E%3C/svg%3E"); }
body[data-design-page="search"] [data-search-state="unavailable"][data-search-connectivity="offline"] .search-state { background: none; border-color: transparent; box-shadow: none; }
body[data-design-page="search"] [data-search-connectivity="offline"] .search-state::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23a8845c' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M14 28a41 41 0 0 1 52 0M23 40a27 27 0 0 1 34 0M32 51a13 13 0 0 1 16 0M17 15l46 49'/%3E%3Ccircle cx='40' cy='62' r='3' fill='%23a8845c' stroke='none'/%3E%3C/svg%3E"); }
body[data-design-page="search"] [data-search-state="unavailable"] .search-state__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
body[data-design-page="search"] [data-search-state="unavailable"] [data-search-retry] { background: var(--service-orange); border-color: var(--service-orange); color: #fff; }
body[data-design-page="search"] [data-search-state="resolving"] .search-state { background: none; border: 0; box-shadow: none; padding: 20px 0; }
body[data-design-page="search"] [data-search-state="resolving"] .search-state::before { width: 52px; height: 52px; background: none; border: 5px solid #ecdcca; border-top-color: var(--service-orange); }
body[data-design-page="search"] .approved-search-skeletons { display: grid; gap: 14px; margin-top: 32px; }
body[data-design-page="search"] .approved-search-skeleton { height: 94px; border-radius: 18px; border: 1px solid var(--service-border); background: linear-gradient(#f0e7d8 0 0) 80px 23px / 52% 13px no-repeat, linear-gradient(#f0e7d8 0 0) 80px 50px / 37% 10px no-repeat, linear-gradient(#f0e7d8 0 0) 16px 20px / 48px 50px no-repeat, var(--service-paper); }
body[data-design-page="search"] .search-group { overflow: hidden; border: 1px solid var(--service-border); border-radius: 20px; background: var(--service-paper); margin-bottom: 18px; }
body[data-design-page="search"] .search-group__head { background: #fff0dc; padding: 14px 16px; margin: 0; }
body[data-design-page="search"] .search-list { gap: 0; padding: 0 14px; }
body[data-design-page="search"] .search-result { border: 0; border-radius: 0; box-shadow: none; background: none; }
body[data-design-page="search"] .search-result + .search-result { border-top: 1px solid #f1e5d6; }
body[data-design-page="search"] .search-result__link { display: flex; gap: 12px; align-items: center; padding: 16px 0; border: 0; background: none; box-shadow: none; }
body[data-design-page="search"] .search-result__link::before { content: ""; flex: 0 0 48px; height: 52px; border-radius: 12px; background: var(--service-pin) center / 32px no-repeat, #fff0dc; }
body[data-design-page="search"] .search-result[data-kind="route"] .search-result__link::before { background-image: var(--service-route); }
body[data-design-page="search"] .search-result[data-kind="business"] .search-result__link::before { background-image: var(--service-cup); }
body[data-design-page="search"] .search-result[data-kind="event"] .search-result__link::before { background-image: var(--service-calendar); }
body[data-design-page="search"] .search-result__copy { min-width: 0; flex: 1; }
body[data-design-page="search"] .search-result__title { font-size: 17px; line-height: 1.6; }
body[data-design-page="search"] .search-result__title mark { background: none; color: var(--service-orange); }
body[data-design-page="search"] .search-group__more { margin: 6px 14px 16px; }
/* Local Preview progress and tickets. No new redemption or merchant controls. */
body[data-design-page="rewards"] .balance-card { position: relative; padding: 24px 20px 24px 100px; border: 1px solid #e5c89e; border-radius: 22px; background: #fff0d8; box-shadow: none; }
body[data-design-page="rewards"] .balance-card::before { content: ""; position: absolute; left: 20px; top: 34px; width: 60px; height: 60px; border-radius: 50%; background: var(--service-star) center / 46px no-repeat, #fff8e9; }
body[data-design-page="rewards"] .balance-value { color: var(--service-orange); font-size: 35px; line-height: 1.4; }
body[data-design-page="rewards"] .mission-list { margin-inline: 16px; gap: 0; background: var(--service-paper); border: 1px solid var(--service-border); border-radius: 20px; padding: 0 16px; }
body[data-design-page="rewards"] .mission-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding: 18px 0; border-radius: 0; box-shadow: none; background: none; }
body[data-design-page="rewards"] .mission-row + .mission-row { border-top: 1px solid var(--service-border); }
body[data-design-page="rewards"] .mission-row::before { content: ""; flex: 0 0 42px; height: 48px; background: var(--service-pin) center / 36px no-repeat; }
body[data-design-page="rewards"] .mission-row:nth-child(2)::before { background-image: var(--service-route); }
body[data-design-page="rewards"] .mission-row:nth-child(3)::before { background-image: var(--service-star); }
body[data-design-page="rewards"] .mission-row__name { font-size: 16px; line-height: 1.6; }
body[data-design-page="rewards"] .mission-row .chip { flex-shrink: 0; font-size: 11px; }
body[data-design-page="rewards"] .mission-bar { height: 6px; margin-top: 9px; }
body[data-design-page="rewards"] .reward-item { grid-template-columns: 56px minmax(0, 1fr) minmax(90px, 30%); gap: 12px; border: 1px solid var(--service-border); padding: 18px 12px; border-radius: 20px; background: var(--service-paper); box-shadow: none; }
body[data-design-page="rewards"] .reward-photo { width: 56px; height: 56px; border-radius: 50%; background: var(--service-gift) center / 38px no-repeat, #fff0da; }
body[data-design-page="rewards"] [data-preview-offer="coffee-30"] .reward-photo { background-image: var(--service-cup); }
body[data-design-page="rewards"] .reward-photo img { visibility: hidden; }
body[data-design-page="rewards"] .reward-name { font-size: 16px; line-height: 1.55; }
body[data-design-page="rewards"] .reward-shop,
body[data-design-page="rewards"] .reward-meta { font-size: 12px; line-height: 1.7; }
body[data-design-page="rewards"] .reward-cta { border-radius: 13px; padding: 10px 8px; font-size: 12px; min-height: 48px; white-space: normal; }
body[data-design-page="rewards"] .reward-body { padding-right: 10px; border-right: 1px dashed #dec7a9; }
body[data-design-page="coupons"] .ticket-list { gap: 16px; }
body[data-design-page="coupons"] .ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 20px 16px 20px 88px; border: 1px solid var(--service-border); border-radius: 22px; background: var(--service-paper); box-shadow: 0 4px 14px #79512a07; }
body[data-design-page="coupons"] .ticket::before { content: ""; position: absolute; top: 20px; left: 16px; width: 58px; height: 64px; border-radius: 14px; background: var(--service-gift) center / 39px no-repeat, #fff0dc; }
body[data-design-page="coupons"] [data-preview-coupon="coffee-30"]::before { background-image: var(--service-cup); }
body[data-design-page="coupons"] .ticket__head { grid-column: 1 / -1; display: block; padding: 0; }
body[data-design-page="coupons"] .ticket__name { font-size: 20px; line-height: 1.5; }
body[data-design-page="coupons"] .ticket__shop { font-size: 14px; }
body[data-design-page="coupons"] .ticket[data-preview-coupon] .ticket__code { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px 8px; border: 0; padding: 0; background: none; text-align: left; }
body[data-design-page="coupons"] .ticket__code-text,
body[data-design-page="coupons"] .ticket__receipt-label { margin: 0; font-size: 12px; line-height: 1.6; }
body[data-design-page="coupons"] .ticket__expiry { grid-column: 1 / -1; margin: 0; font-size: 12px; }
body[data-design-page="coupons"] [data-coupon-detail] { grid-column: 1 / -1; justify-self: end; width: auto; padding: 9px 17px; min-height: 44px; border-radius: 12px; background: #fffaf3; border: 1px solid #d8aa80; color: var(--service-orange); font-size: 14px; }
body[data-design-page="coupons"] .ticket-sheet { padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); background: #29393466; backdrop-filter: blur(3px); align-items: center; }
body[data-design-page="coupons"] .ticket-sheet__card { width: min(100%, 410px); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid var(--service-border); border-radius: 26px; padding: 24px; background: var(--service-paper); }
body[data-design-page="coupons"] .ticket-sheet[data-offer="coffee-30"] .ticket-sheet__card::before { background-image: var(--service-cup); }
body[data-design-page="coupons"] .ticket-sheet__card h2 { font-size: 24px; line-height: 1.55; }
body[data-design-page="coupons"] .ticket__qr--large { width: 156px; height: 156px; margin: 22px auto; border: 12px solid #fff2df; outline: 1px solid #dfc8a7; border-radius: 12px; background: repeating-linear-gradient(45deg, #dfc38e 0 5px, #fff5e2 5px 11px); box-shadow: none; }
body[data-design-page="coupons"] .ticket-sheet__code { display: table; margin: 0 auto 16px; padding: 8px 24px; border: 1px solid #e4ceb0; border-radius: 12px; background: #fff4e3; }
body[data-design-page="coupons"] .ticket-sheet__note { font-size: 13px; line-height: 1.8; }
body[data-design-page="coupons"] [data-coupons="sheet-close"] { width: 100%; min-height: 48px; border-radius: 13px; border-color: #d8aa80; color: var(--service-orange); margin-top: 16px; }
body[data-design-page="not-found"] .entity-state { min-height: 570px; padding: 32px 16px 48px; }
body[data-design-page="not-found"] .entity-state__card { padding: 0; border: 0; background: none; box-shadow: none; }
body[data-design-page="not-found"] .entity-state__card::before { content: ""; display: block; width: 220px; height: 180px; max-width: 100%; margin: 0 auto 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 190' fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cellipse cx='119' cy='169' rx='89' ry='10' fill='%23eddfc5'/%3E%3Cpath d='m32 58 57-18 57 21 55-19-4 115-53 17-57-20-57 17Z' fill='%23fff1d9' stroke='%23cfab73' stroke-width='2.5'/%3E%3Cpath d='m89 40-2 114m59-93-2 113' stroke='%23dfc298' stroke-width='2'/%3E%3Cpath d='m41 135 26-25 38 9 24-33 30 13 31-24' stroke='%23d8af72' stroke-width='3' stroke-dasharray='5 7'/%3E%3Cpath d='M169 41c0 28-32 56-32 56s-32-28-32-56a32 32 0 1 1 64 0Z' fill='%23edb366' stroke='%23bf8446' stroke-width='2.5'/%3E%3Cpath d='M128 31c0-13 21-13 21 0 0 8-12 7-12 16m0 10v1' stroke='%23fffaf0' stroke-width='6'/%3E%3C/svg%3E") center / contain no-repeat; }
body[data-design-page="not-found"] .entity-state__title { font-size: 30px; }
body[data-design-page="not-found"] .entity-state__actions { margin-top: 26px; gap: 12px; }
body[data-design-page="not-found"] .entity-state__actions a { border-radius: 14px; min-height: 50px; }
/* Standalone 404 intentionally has no app input-mode bootstrap. */
body[data-design-page="not-found"] a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (min-width: 700px) {
  body[data-design-page="news"] .ux14-news-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-design-page="news"] .ux14-news-row:first-child { grid-column: 1 / -1; }
  body[data-design-page="news"] .ux14-news-row:first-child .ux14-news-photo { max-height: 360px; }
  body[data-design-page="weather"] .ux14-weather-grid { max-width: 580px; margin-inline: auto; }
  body[data-design-page="notifications"] .notifications-preview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-design-page="news-article"] .article { max-width: 780px; margin-inline: auto; }
  body[data-design-page="news-article"] .article-photo { max-height: 430px; }
}
@media (max-width: 370px) {
  body[data-design-page="rewards"] .reward-item { grid-template-columns: 46px minmax(0, 1fr) 88px; gap: 8px; }
  body[data-design-page="rewards"] .reward-photo { width: 46px; height: 48px; }
  body[data-design-page="rewards"] .mission-row::before { flex-basis: 30px; background-size: 28px; }
  body[data-design-page="sos"] .sos-call--danger { padding: 18px 12px; grid-template-columns: 36px minmax(0, 1fr); }
  body[data-design-page="sos"] .sos-call--danger .sos-call__copy strong { font-size: 23px; padding-left: 8px; }
}
html[data-easy="on"] body[data-design-page="rewards"] .reward-item { grid-template-columns: 48px minmax(0, 1fr); }
html[data-easy="on"] body[data-design-page="rewards"] .reward-cta { grid-column: 1 / -1; font-size: 16px; }
html[data-easy="on"] body[data-design-page="notifications"] .notifications-preview-row__body { font-size: 17px; }
html[data-easy="on"] body[data-design-page="sos"] .sos-call--danger .sos-call__copy { grid-template-columns: 1fr; }
html[data-easy="on"] body[data-design-page="sos"] .sos-call--danger .sos-call__copy strong { border: 0; padding: 0; }

/* ===== P17 fidelity (2026-09-14): R08 news feed. ===== */
body[data-design-page="news"] .page-head h1 { font-size: 1.85rem; line-height: 1.45; color: #0e3f44; }
body[data-design-page="news"] .news-filter .filter-chip { min-height: 40px; padding-inline: 16px; border: 0; border-radius: 999px; background: #fbe3d5; color: #0e3f44; font-size: .95rem; font-weight: 700; box-shadow: none; }
body[data-design-page="news"] .news-filter .filter-chip[aria-pressed="true"] { background: #c0512f; color: #fff; }
body[data-design-page="news"] .ux14-news-count { font-size: .95rem; color: #6f7a80; }
body[data-design-page="news"] .news-kicker { display: inline-flex; width: fit-content; padding: 4px 12px; border-radius: 999px; background: #fbe3d5; color: #c0512f; font-size: .82rem; font-weight: 700; }
body[data-design-page="news"] .news-headline { font-size: 1.2rem; line-height: 1.45; color: #0e3f44; }
body[data-design-page="news"] .ux14-news-schedule { font-size: .95rem; font-weight: 700; color: #c0512f; }
body[data-design-page="news"] .news-summary { font-size: .95rem; line-height: 1.6; color: #4d5c62; }

/* ===== P18 fidelity (2026-09-14): R09 news article. ===== */
body[data-design-page="news-article"] .article-kicker { font-size: .95rem; font-weight: 700; color: #c0512f; }
body[data-design-page="news-article"] .article-head h1 { font-size: 1.6rem; line-height: 1.45; color: #0e3f44; }
body[data-design-page="news-article"] .article-summary { font-size: 1rem; line-height: 1.65; color: #4d5c62; }
body[data-design-page="news-article"] .article-facts > h2 { font-size: 1.15rem; color: #0e3f44; }
body[data-design-page="news-article"] .fact-row dt, body[data-design-page="news-article"] .fact-row strong { font-size: 1rem; font-weight: 700; color: #0e3f44; }
body[data-design-page="news-article"] .fact-row dd, body[data-design-page="news-article"] .fact-row span:last-child { font-size: .95rem; font-weight: 400; color: #4d5c62; }
body[data-design-page="news-article"] .article-body p { font-size: 1rem; line-height: 1.7; color: #37464b; }

/* ===== P19 fidelity (2026-09-14): R10 notifications inbox. ===== */
body[data-design-page="notifications"] .page-head h1 { font-size: 1.85rem; line-height: 1.45; color: #0e3f44; }
body[data-design-page="notifications"] .notifications-preview-heading .ghost-button { min-height: 0; padding: 0; border: 0; background: none; color: #c0512f; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
body[data-design-page="notifications"] .notifications-preview-filters .filter-chip { min-height: 40px; padding-inline: 18px; border: 1px solid #eddbcb; border-radius: 999px; background: #fffdf9; color: #0e3f44; font-weight: 700; }
body[data-design-page="notifications"] .notifications-preview-filters .filter-chip[aria-pressed="true"] { border-color: #c0512f; background: #c0512f; color: #fff; }
body[data-design-page="notifications"] .notifications-preview-summary { padding: 0; background: none; font-size: .95rem; color: #4d5c62; }
body[data-design-page="notifications"] .notifications-preview-row { border: 1px solid #f2e0d2; border-left-width: 1px; border-radius: 18px; background: #fffdf9; }
body[data-design-page="notifications"] .notifications-preview-row[data-read="false"], body[data-design-page="notifications"] .notifications-preview-row.is-unread { background: #fdf3ec; border-color: #f0cdb6; }
body[data-design-page="notifications"] .notifications-preview-row__state, body[data-design-page="notifications"] .notifications-preview-row__status { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: #4d5c62; }
body[data-design-page="notifications"] .notifications-preview-row__state::before, body[data-design-page="notifications"] .notifications-preview-row__status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #c0512f; }
body[data-design-page="notifications"] .notifications-preview-row__button, body[data-design-page="notifications"] .notifications-preview-row .ghost-button { min-height: 44px; padding-inline: 18px; border: 0; border-radius: 14px; background: #c0512f; color: #fff; font-weight: 700; }
body[data-design-page="notifications"] .notifications-preview-row__title { font-size: 1.1rem; line-height: 1.45; color: #0e3f44; }
/* ===== P20 fidelity (2026-09-14): R11 weather and particulate values. ===== */
body[data-design-page="weather"] .ux14-weather-card::before { width: 92px; height: 92px; background-color: transparent; background-size: 82px; }
body[data-design-page="weather"] .ux14-weather-card__head h2 { font-size: 1.35rem; color: #0e3f44; }
body[data-design-page="weather"] .ux14-weather-value { font-size: 4rem; line-height: 1.2; color: #c0512f; }

/* ===== P21 fidelity (2026-09-14): R12 emergency help. ===== */
body[data-design-page="sos"] .sos-call__mark { width: 58px; height: 58px; }
body[data-design-page="sos"] .sos-call__mark .icon { width: 34px; height: 34px; stroke-width: 2; }
body[data-design-page="sos"] .sos-call--danger .sos-call__mark { background: rgb(255 255 255 / 18%); color: #fff; }
body[data-design-page="sos"] .sos-call__copy { font-size: 1.05rem; line-height: 1.45; }
body[data-design-page="sos"] .sos-steps { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: sos-step; }
body[data-design-page="sos"] .sos-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; counter-increment: sos-step; font-size: 1rem; line-height: 1.5; color: #0e3f44; }
body[data-design-page="sos"] .sos-steps li::before { content: counter(sos-step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fbe3d5; color: #c0512f; font-weight: 700; }
body[data-design-page="sos"] .sos-state-icon { width: 58px; height: 58px; }
body[data-design-page="sos"] .sos-state-icon .icon { width: 32px; height: 32px; }
/* ===== P22 fidelity (2026-09-14): R13 search before typing, R14 results. ===== */
body[data-design-page="search"] .search-type { min-height: 44px; padding-inline: 18px; border: 0; border-radius: 999px; background: #fbe3d5; color: #0e3f44; font-size: 1rem; font-weight: 700; box-shadow: none; }
body[data-design-page="search"] .search-type[aria-pressed="true"] { background: #c0512f; color: #fff; }
body[data-design-page="search"] .search-state__title { font-size: 1.35rem; color: #0e3f44; }
body[data-design-page="search"] .search-state__body { font-size: 1rem; line-height: 1.6; color: #4d5c62; }
body[data-design-page="search"] .search-state .icon, body[data-design-page="search"] .search-state__mark .icon { color: #c0512f; }
body[data-design-page="search"] .search-result__link { position: relative; padding-right: 34px; }
body[data-design-page="search"] .search-result__link::after { content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0512f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 18px no-repeat; }
body[data-design-page="search"] .search-result__title { font-size: 1.05rem; color: #0e3f44; }
body[data-design-page="search"] .search-result__title mark { background: none; color: #c0512f; font-weight: 700; }
/* ===== P23 fidelity (2026-09-14): R15 points, missions and reward tickets. ===== */
body[data-design-page="rewards"] .balance-card::before { background: #c0512f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='m12 3.2 2.7 5.6 6.1.8-4.5 4.2 1.2 6-5.5-3-5.5 3 1.2-6L3.2 9.6l6.1-.8z'/%3E%3C/svg%3E") center / 34px no-repeat; }
body[data-design-page="rewards"] .balance-value { font-size: 2.3rem; color: #c0512f; }
body[data-design-page="rewards"] .mission-row .chip--soon { background: #fbe3d5; color: #b04426; }
body[data-design-page="rewards"] .mission-row .chip--done, body[data-design-page="rewards"] .mission-row .chip--open { background: #dcefe9; color: #0b5359; }
body[data-design-page="rewards"] .mission-row__name { font-size: 1.05rem; color: #0e3f44; }
/* ===== P24 fidelity (2026-09-14): R16 coupon wallet. ===== */
body[data-design-page="coupons"] .page-head .section-swash { display: none; }
body[data-design-page="coupons"] .page-head h1 { font-size: 1.9rem; line-height: 1.45; color: #0e3f44; }
body[data-design-page="coupons"] .ticket__name { font-size: 1.25rem; color: #0e3f44; }
body[data-design-page="coupons"] .ticket__shop { font-size: 1rem; color: #6f7a80; }
body[data-design-page="coupons"] .ticket__expiry, body[data-design-page="coupons"] .ticket [data-preview-coupon-expiry] { color: #c0512f; font-weight: 700; }
body[data-design-page="coupons"] .ticket__mark, body[data-design-page="coupons"] .ticket .icon-tile { width: 72px; height: 72px; border-radius: 18px; }

/* ===== P25 fidelity (2026-09-14): R18 page not found. ===== */
body[data-design-page="not-found"] .entity-state__card::before { width: 240px; height: 190px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cellipse cx='60' cy='88' rx='40' ry='5' fill='%23f2e0cf'/%3E%3Cpath d='M12 22 44 12v62L12 84z' fill='%23fbe3d5' stroke='%23c0512f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M44 12 76 22v62L44 74z' fill='%23fdf1e8' stroke='%23c0512f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M76 22 108 12v62L76 84z' fill='%23fbe3d5' stroke='%23c0512f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M30 52c8-10 16 6 24-4s14 4 22-6' fill='none' stroke='%23e2a684' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='62' r='22' fill='%230e4747'/%3E%3Ctext x='88' y='72' text-anchor='middle' font-family='Arial, sans-serif' font-size='30' font-weight='700' fill='%23ffffff'%3E?%3C/text%3E%3C/svg%3E") center / contain no-repeat; }
body[data-design-page="not-found"] .entity-state__title { font-size: 1.9rem; line-height: 1.45; color: #0e3f44; }
body[data-design-page="not-found"] .entity-state__card > p { font-size: 1rem; color: #4d5c62; }
body[data-design-page="not-found"] .entity-state__actions .ghost-button { color: #c0512f; border-color: #c0512f; font-weight: 700; }

/* P22, R19: the no-results state takes its own illustration; the before-typing state keeps its mark. */
body[data-design-page="search"] .search-state:has(.search-state__actions)::before { width: 210px; height: 165px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 110'%3E%3Cellipse cx='70' cy='99' rx='44' ry='6' fill='%23f4e3d4'/%3E%3Crect x='14' y='26' width='62' height='46' rx='8' fill='%23fbe6d8' transform='rotate(-8 45 49)'/%3E%3Crect x='52' y='20' width='72' height='52' rx='9' fill='%23fdf3ec' stroke='%23f3ded0' stroke-width='2'/%3E%3Crect x='62' y='34' width='42' height='5' rx='2.5' fill='%23f1ddcd'/%3E%3Crect x='62' y='46' width='52' height='5' rx='2.5' fill='%23f1ddcd'/%3E%3Crect x='62' y='58' width='34' height='5' rx='2.5' fill='%23f1ddcd'/%3E%3Ccircle cx='74' cy='56' r='21' fill='none' stroke='%230e4747' stroke-width='6'/%3E%3Cpath d='M62 50a12 12 0 0 1 9-9' fill='none' stroke='%23eebfa4' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M89 71 106 88' stroke='%23c0512f' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M112 24 120 16M118 34l10-4M116 46l9 2' stroke='%23f0b48c' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
body[data-design-page="search"] .search-state__action { min-height: 46px; padding-inline: 24px; border: 1.5px solid #e6b79a; border-radius: 999px; background: #fdeee4; color: #c0512f; font-size: 1.05rem; font-weight: 700; }

/* ===== Tap areas (2026-09-14) =====
 * The fidelity pass shrank these controls to the size in the accepted images. A transparent
 * block border restores a 44px target without changing a single painted pixel. */
body[data-design-page="news"] .news-filter .filter-chip { box-sizing: border-box; min-block-size: 44px; border-block: 2px solid transparent; background-clip: padding-box; }

/* ===== Tap areas, second pass (2026-09-14) =====
 * Same transparent-border treatment for the controls the first pass missed. */
body[data-design-page="notifications"] .notifications-preview-filters .filter-chip { box-sizing: border-box; min-block-size: 44px; border-block: 2px solid transparent; background-clip: padding-box; }
body[data-design-page="notifications"] .notifications-preview-heading .ghost-button { box-sizing: border-box; min-block-size: 44px; border-block: 9px solid transparent; background-clip: padding-box; }

/* ===== P21 round 1 (2026-09-14), from the independent review of the emergency image =====
 * The reviewer scored 68: the numbers carried no handset mark and were set at body size, where
 * the image makes them the loudest thing on the screen. The shared phone glyph the markup
 * already carries moves in front of the number and both grow to the image's scale. */
body[data-design-page="sos"] .sos-call__copy { display: grid; gap: 2px; }
body[data-design-page="sos"] .sos-call__copy > span { font-size: 1rem; line-height: 1.4; }
body[data-design-page="sos"] .sos-call__copy strong { display: flex; align-items: center; gap: 10px; font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; }
body[data-design-page="sos"] .sos-call__phone { order: -1; width: 30px; height: 30px; margin-inline-end: 0; }
body[data-design-page="sos"] .sos-call { align-items: center; gap: 12px; }
body[data-design-page="sos"] .sos-call--danger .sos-call__phone { color: #fff; }
body[data-design-page="sos"] .sos-state-heading { display: flex; align-items: center; gap: 12px; }
body[data-design-page="sos"] .sos-state-heading .sos-state-icon { width: 44px; height: 44px; }
body[data-design-page="sos"] .sos-state-heading .sos-state-icon .icon { width: 24px; height: 24px; }
body[data-design-page="sos"] .sos-action .icon { display: none; }

/* the handset sits directly in front of the number, as the image shows */
body[data-design-page="sos"] .sos-call__phone { display: none; }
body[data-design-page="sos"] .sos-call__copy strong::before { content: ""; flex: none; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b8250e'%3E%3Cpath d='M6.6 3.4h3.2l1.6 4.2-2.1 1.6a12.6 12.6 0 0 0 5.5 5.5l1.6-2.1 4.2 1.6v3.2a2.1 2.1 0 0 1-2.3 2.1A17.3 17.3 0 0 1 4.5 5.7 2.1 2.1 0 0 1 6.6 3.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
body[data-design-page="sos"] .sos-call--danger .sos-call__copy strong::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 3.4h3.2l1.6 4.2-2.1 1.6a12.6 12.6 0 0 0 5.5 5.5l1.6-2.1 4.2 1.6v3.2a2.1 2.1 0 0 1-2.3 2.1A17.3 17.3 0 0 1 4.5 5.7 2.1 2.1 0 0 1 6.6 3.4z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the municipality line is a contact card, not an emergency number: keep it one line */
body[data-design-page="sos"] .sos-call--city .sos-call__copy strong { font-size: 1.35rem; white-space: nowrap; }
body[data-design-page="sos"] .sos-call--city .sos-call__copy strong::before { width: 22px; height: 22px; }

/* ===== P23 round 1 and P22 round 1 (2026-09-14), from the independent reads ===== */
/* missions: the image puts the progress bar under the title and the caption last, with no rules */
body[data-design-page="rewards"] .mission-row { border-bottom: 0; }
body[data-design-page="rewards"] .mission-row__body { display: grid; gap: 4px; }
body[data-design-page="rewards"] .mission-row__name { order: 1; }
body[data-design-page="rewards"] .mission-bar { order: 2; }
body[data-design-page="rewards"] .mission-row__meta { order: 3; }
body[data-design-page="rewards"] .missions .section-heading h2 { font-size: 1.15rem; }
/* search results: each group reads as its own card with space between groups */
body[data-design-page="search"] .search-results { display: grid; gap: 14px; }
body[data-design-page="search"] .search-group { border-radius: 18px; background: #fffdf9; box-shadow: 0 2px 10px rgb(90 55 30 / 6%); overflow: hidden; }
body[data-design-page="search"] .search-group__head { padding: 10px 14px; background: #fbe3d5; }
body[data-design-page="search"] .search-group__title { font-size: 1.05rem; color: #0e3f44; }
body[data-design-page="search"] .search-group__count { font-size: .85rem; color: #8a6350; }
body[data-design-page="search"] .search-list { padding: 4px 6px 8px; }

/* ===== P21 round 2 (2026-09-14), second and final round on this image ===== */
/* the intro line sits with the title, the state line becomes the image chip, and the
 * location heading shares its row with the pin as the image shows */
body[data-design-page="sos"] .sos-intro { margin-block: 2px 10px; }
body[data-design-page="sos"] .sos-state-title { display: inline-flex; align-items: center; width: fit-content; padding: 4px 12px; border-radius: 999px; background: #e4efe9; color: #0b5359; font-size: .92rem; font-weight: 700; }
body[data-design-page="sos"] .sos-position { display: grid; }
body[data-design-page="sos"] .sos-position > h2 { order: 1; margin-block-end: 8px; font-size: 1.35rem; color: #0e3f44; }
body[data-design-page="sos"] .sos-position__card { order: 2; }
body[data-design-page="sos"] .sos-state-heading { align-items: center; gap: 12px; }

/* ===== Final round from the third independent read (2026-09-14) ===== */
/* emergency: the numbers are the loudest thing on the card, the location heading carries the
   pin the image shows, the municipality card reads left with its mark first, and the primary
   card's mark sits on a solid plate */
body[data-design-page="sos"] .sos-call--danger .sos-call__copy strong { font-size: 2.2rem; padding-left: 14px; }
body[data-design-page="sos"] .sos-call:not(.sos-call--city) .sos-call__copy strong { font-size: 2.2rem; }
body[data-design-page="sos"] .sos-position > h2 { display: flex; align-items: center; gap: 10px; }
body[data-design-page="sos"] .sos-position > h2::before { content: ""; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230e4747'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.4a2.4 2.4 0 1 1 0-4.8 2.4 2.4 0 0 1 0 4.8z'/%3E%3C/svg%3E") center / 22px no-repeat; }
body[data-design-page="sos"] .sos-call--city { text-align: start; }
body[data-design-page="sos"] .sos-call--danger .sos-call__mark { background: #fff; color: #b8250e; }
/* search: each group header takes the mark for its kind and the count matches the heading */
body[data-design-page="search"] .page-head::after, body[data-design-page="search"] .search-stage::before { display: none; }
body[data-design-page="search"] .search-group__head { display: flex; align-items: center; gap: 10px; }
body[data-design-page="search"] .search-group__head::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e4747' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.4 7-11.6A7 7 0 0 0 5 9.4C5 14.6 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.4' r='2.4'/%3E%3C/svg%3E") center / 18px no-repeat; }
body[data-design-page="search"] .search-group[data-search-group="shop"] .search-group__head::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e4747' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v7a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3V2'/%3E%3Cpath d='M8 2v20'/%3E%3Cpath d='M20 22v-9h-2.4a1.6 1.6 0 0 1-1.6-1.6V8a6 6 0 0 1 4-5.7V22'/%3E%3C/svg%3E") center / 18px no-repeat; }
body[data-design-page="search"] .search-group[data-search-group="route"] .search-group__head::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e4747' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19a3 3 0 1 1 0-6h9a3 3 0 1 0 0-6H9'/%3E%3Ccircle cx='6' cy='16' r='1.2'/%3E%3Ccircle cx='18' cy='7' r='1.2'/%3E%3C/svg%3E") center / 18px no-repeat; }
body[data-design-page="search"] .search-group[data-search-group="event"] .search-group__head::before, body[data-design-page="search"] .search-group[data-search-group="news"] .search-group__head::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e4747' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5' width='16.8' height='15.4' rx='2.6'/%3E%3Cpath d='M3.6 9.8h16.8M8.4 3.4v3.2M15.6 3.4v3.2'/%3E%3C/svg%3E") center / 18px no-repeat; }
body[data-design-page="search"] .search-group__count { margin-inline-start: auto; font-weight: 700; color: #0e3f44; }
/* rewards: the points card takes the image's richer peach and loses the heading swash */
body[data-design-page="rewards"] .balance-card { border: 0; background: #fbdccb; }
body[data-design-page="rewards"] .page-head .section-swash { display: none; }

/* ===== correction round (2026-09-14) =====
 * Two of my own changes went too far. The 2.2rem number squeezed the card label into one word
 * per line, and wrapping each result group in a single outlined card lost the image's separate
 * rows. Both are pulled back toward the images. */
body[data-design-page="sos"] .sos-call--danger .sos-call__copy strong, body[data-design-page="sos"] .sos-call:not(.sos-call--city) .sos-call__copy strong { font-size: 1.5rem; }
body[data-design-page="sos"] .sos-call__copy > span { font-size: .95rem; line-height: 1.35; }
body[data-design-page="sos"] .sos-call { grid-template-columns: 52px minmax(0, 1fr) auto; }
body[data-design-page="sos"] .sos-call__mark { width: 52px; height: 52px; }
body[data-design-page="sos"] .sos-call__mark .icon { width: 30px; height: 30px; }
body[data-design-page="search"] .search-group { border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
body[data-design-page="search"] .search-group__head { padding: 6px 4px; background: transparent; }
body[data-design-page="search"] .search-list { display: grid; gap: 8px; padding: 0; }
body[data-design-page="search"] .search-result { border-radius: 16px; background: #fffdf9; box-shadow: 0 2px 10px rgb(90 55 30 / 6%); }
body[data-design-page="search"] .search-result + .search-result { border-top: 0; }
body[data-design-page="search"] .search-output__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* the number keeps its own line break rules so the label can use the width it needs */
body[data-design-page="sos"] .sos-call--danger .sos-call__copy strong { padding-left: 12px; }
body[data-design-page="sos"] .sos-call__copy > span { font-size: .92rem; }
body[data-design-page="sos"] .sos-call { column-gap: 10px; }

/* ===== search round 3 and onboarding round 1 (2026-09-14), from the independent reads ===== */
/* every result is its own floating card, the page ornament behind the title goes, and the
   clear control regains the grey disc the image shows */
body[data-design-page="search"] .search-stage::after, body[data-design-page="search"] .search-stage::before, body[data-design-page="search"] .page-head::before, body[data-design-page="search"] .page-head::after { content: none; }
body[data-design-page="search"] .search-output, body[data-design-page="search"] .search-output__head { border: 0; background: transparent; }
body[data-design-page="search"] .search-results { gap: 16px; }
body[data-design-page="search"] .search-list { gap: 10px; }
body[data-design-page="search"] .search-result { border: 0; border-radius: 18px; box-shadow: 0 3px 12px rgb(90 55 30 / 8%); overflow: hidden; }
body[data-design-page="search"] .search-result + .search-result { border-top: 0; }
body[data-design-page="search"] .search-result__link { padding: 12px 34px 12px 12px; }
body[data-design-page="search"] .search-clear { width: 34px; height: 34px; border-radius: 50%; background: #e6e2db; color: #4d5c62; }
/* onboarding: the policy row leads with a document mark and ends with a chevron, and this
   step's primary control carries no trailing chevron */

/* ===== P24 round 1 for the detail sheet (2026-09-14), from the independent read =====
 * The accepted image draws a ticket: notches cut into both edges beside the code panel, a rule
 * above the close control, a square pale placeholder and a full pill for the serial. */
body[data-design-page="coupons"] .ticket-sheet__shop { font-size: 1.05rem; font-weight: 700; color: #0e3f44; }
body[data-design-page="coupons"] .ticket__qr--large { border-radius: 4px; background-color: #fdeee4; }
body[data-design-page="coupons"] .ticket-sheet__code { display: inline-block; width: fit-content; margin-inline: auto; padding: 8px 22px; border-radius: 999px; background: #fbe3d5; color: #0e3f44; font-size: 1.05rem; font-weight: 700; }
body[data-design-page="coupons"] .ticket-sheet__note { padding-block-end: 14px; border-bottom: 1px solid #efe2d6; }
body[data-design-page="coupons"] [data-coupons="sheet-close"] { margin-block-start: 14px; }

/* the notches are cut with a mask so the card keeps the coffee mark it draws in ::before */
body[data-design-page="coupons"] .ticket-sheet__card { -webkit-mask-image: radial-gradient(circle 13px at 0 56%, transparent 13px, #000 13.5px), radial-gradient(circle 13px at 100% 56%, transparent 13px, #000 13.5px); mask-image: radial-gradient(circle 13px at 0 56%, transparent 13px, #000 13.5px), radial-gradient(circle 13px at 100% 56%, transparent 13px, #000 13.5px); -webkit-mask-composite: source-in; mask-composite: intersect; }
body[data-design-page="coupons"] .ticket__qr--large { background-color: #fffdf9; background-image: repeating-linear-gradient(45deg, #f7dccb 0 9px, #fffdf9 9px 18px); }

/* the sheet mark: the per-offer rule supplies the glyph, this gives it its disc */
body[data-design-page="coupons"] .ticket-sheet__card::before { content: ""; display: block; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background-color: #fbe3d5; background-repeat: no-repeat; background-position: center; background-size: 44px; }

/* ===== P22 states R20 offline / R21 loading (2026-09-14), from the accepted images =====
 * The empty-result illustration must not leak into the offline state: that state draws a peach
 * disc with a struck-through signal mark, and its two controls sit side by side. */
body[data-design-page="search"] [data-search-state="unavailable"][data-search-connectivity="offline"] .search-state:has(.search-state__actions)::before { width: 136px; height: 136px; margin-bottom: 30px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c0512f' stroke-width='7.5' stroke-linecap='round'%3E%3Cpath d='M15 29a40 40 0 0 1 50 0'/%3E%3Cpath d='M24 41a26 26 0 0 1 32 0'/%3E%3Cpath d='M33 52a12 12 0 0 1 14 0'/%3E%3Cpath d='M40 63v.5'/%3E%3Cpath d='M18 16 62 63'/%3E%3C/svg%3E") center / 84px no-repeat, #fbe1d0; }
body[data-design-page="search"] [data-search-state="unavailable"][data-search-connectivity="offline"] .search-state__title { font-size: 1.4rem; }
body[data-design-page="search"] [data-search-state="unavailable"][data-search-connectivity="offline"] .search-state__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
body[data-design-page="search"] [data-search-state="unavailable"][data-search-connectivity="offline"] .search-state__action { min-height: 48px; padding-inline: 10px; border-radius: 14px; border: 1.5px solid #f0d9c9; background: #fffdfa; color: #0e3f44; font-size: 1.05rem; font-weight: 700; }
body[data-design-page="search"] [data-search-state="unavailable"][data-search-connectivity="offline"] [data-search-retry] { border-color: #c0512f; background: #c0512f; color: #fff; }
/* loading: a thicker ring over a peach track, then the three placeholder rows the image shows */
body[data-design-page="search"] [data-search-state="resolving"] .search-state::before { width: 50px; height: 50px; margin-bottom: 26px; border-width: 6px; border-color: #f7dfd0; border-top-color: #c0512f; border-right-color: #c0512f; rotate: 32deg; }
body[data-design-page="search"] .approved-search-skeletons { gap: 14px; }
body[data-design-page="search"] .approved-search-skeleton { position: relative; height: 92px; border: 0; border-radius: 16px; background: linear-gradient(#e3e0dc 0 0) 100px 16px / 64% 12px no-repeat, linear-gradient(#e3e0dc 0 0) 100px 40px / 45% 12px no-repeat, linear-gradient(#e3e0dc 0 0) 100px 62px / 31% 12px no-repeat, #fdfbf7; }
body[data-design-page="search"] .approved-search-skeleton::before { content: ""; position: absolute; inset-block-start: 12px; inset-inline-start: 14px; width: 68px; height: 68px; border-radius: 12px; background: #e3e0dc; }

/* ===== P22 state R22, the load error (2026-09-14), from the accepted image =====
 * Online this state is a card, not a centred illustration: a ringed warning mark sits beside the
 * heading, the copy runs left, and the two controls stack full width. */
body[data-design-page="search"] [data-search-state="unavailable"]:not([data-search-connectivity="offline"]) .search-state { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 15px; padding: 22px 19px 12px; border-radius: 24px; text-align: start; }
body[data-design-page="search"] [data-search-state="unavailable"]:not([data-search-connectivity="offline"]) .search-state::before { grid-column: 1; grid-row: 1; align-self: center; width: 38px; height: 38px; margin: 0; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23c0512f' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='20'/%3E%3Cpath d='M24 13v14'/%3E%3Cpath d='M24 34v.5'/%3E%3C/svg%3E") center / 38px no-repeat; }
body[data-design-page="search"] [data-search-state="unavailable"]:not([data-search-connectivity="offline"]) .search-state__title { grid-column: 2; grid-row: 1; font-size: 1.28rem; line-height: 1.5; }
body[data-design-page="search"] [data-search-state="unavailable"]:not([data-search-connectivity="offline"]) .search-state__body { grid-column: 2; grid-row: 2; margin-top: 2px; line-height: 1.65; }
body[data-design-page="search"] [data-search-state="unavailable"]:not([data-search-connectivity="offline"]) .search-state__actions { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 21px; }
body[data-design-page="search"] [data-search-state="unavailable"]:not([data-search-connectivity="offline"]) .search-state__action { min-height: 45px; border-radius: 12px; border: 1.5px solid #c0512f; background: #fffdfa; color: #c0512f; }
body[data-design-page="search"] [data-search-state="unavailable"]:not([data-search-connectivity="offline"]) [data-search-retry] { background: #c0512f; color: #fff; }