/* Public community pages only; shared and protected-page styles are untouched. */
body[data-page="home"] {
  --bg: #f8f6f0;
  --surface: #fffefb;
  --surface-soft: #f2f3ec;
  --surface-hover: #e9eee5;
  --text: #21362c;
  --muted: #667269;
  --subtle: #737e74;
  --border: #e0e4d9;
  --primary: #245940;
  --primary-hover: #19472f;
  --primary-soft: #eaf0e5;
  --primary-text: #325f43;
  --accent: #bb632d;
  --accent-soft: #faead8;
  --pink: #bb632d;
  --pink-soft: #faead8;
  --warning: #89611f;
  --warning-soft: #f8efdc;
  --success: #326b4d;
  --success-soft: #e9f2e7;
  --error: #9a4d36;
  --error-soft: #fff0e9;
  --shadow: 0 5px 20px #243b2805;
  --welfare-ease: cubic-bezier(.22, .75, .24, 1);
  --welfare-lift-shadow: 0 16px 36px #1b392917, 0 4px 12px #1b39290b;
  --welfare-button-shadow: 0 8px 20px #1b392924;
  --welfare-inline-origin: left center;
  --welfare-halo-x: 82%;
  --welfare-wash-x: 20%;
  --welfare-trace-from: -64px;
  --welfare-trace-to: 210px;
  --welfare-sweep-to: 310%;
  --landscape-start: #1b402e;
  --landscape-end: #456447;
  --on-primary: #ffffff;
  --hero-glow-warm: #faead8;
  --hero-glow-cool: #eaf0e5;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-size: 15px;
  line-height: 1.75;
  color-scheme: light;
}
:root[data-theme="dark"] body[data-page="home"] {
  --bg: #161a1c;
  --surface: #1e2425;
  --surface-soft: #262e2e;
  --surface-hover: #303a38;
  --text: #e5e7e0;
  --muted: #abb4ae;
  --subtle: #a0aaa4;
  --border: #35413c;
  --primary: #3e6954;
  --primary-hover: #49765e;
  --primary-soft: #273930;
  --primary-text: #a6c5b0;
  --on-primary: #f2f4ef;
  --accent: #c4ac82;
  --accent-soft: #322e26;
  --pink: #c4ac82;
  --pink-soft: #322e26;
  --warning: #d8b98a;
  --warning-soft: #332d24;
  --success: #a5c9af;
  --success-soft: #26372e;
  --error: #e2aa9e;
  --error-soft: #352b29;
  --shadow: 0 8px 28px #00000024;
  --welfare-lift-shadow: 0 16px 36px #00000036, 0 4px 12px #00000020;
  --welfare-button-shadow: 0 8px 20px #00000040;
  --landscape-start: #203329;
  --landscape-end: #334638;
  --hero-glow-warm: rgba(180, 145, 94, .08);
  --hero-glow-cool: rgba(85, 126, 103, .12);
  color-scheme: dark;
}
body[data-page="home"] :is(h1, h2, h3, h4, p, a, button, label, code, bdi, dd) { overflow-wrap: anywhere; }
body[data-page="home"] :is(button, a, select, input) { outline-offset: 4px; }
body[data-page="home"] :focus-visible { outline: 3px solid var(--primary-text); outline-offset: 4px; }
body[data-page="home"] .skip-link { background: var(--primary); color: var(--on-primary); }
body[data-page="home"] ::selection { background: var(--primary); color: var(--on-primary); }
body[data-page="home"] .site-header { position: sticky; inset-block-start: 0; z-index: 30; background: var(--bg); border-block-end: 1px solid var(--border); transition: box-shadow 220ms ease, border-color 220ms ease; }
body[data-page="home"] .site-header.is-scrolled { border-color: var(--subtle); box-shadow: 0 8px 28px #142b1912; }
body[data-page="home"] :is(.header-inner, .welfare-main, .site-footer) { inline-size: min(1160px, calc(100% - 64px)); margin-inline: auto; min-inline-size: 0; }
body[data-page="home"] .header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; min-block-size: 88px; padding-block: 15px; }
body[data-page="home"] .brand { flex: 0 1 300px; max-inline-size: 35%; min-inline-size: 0; align-items: center; gap: 10px; }
body[data-page="home"] .brand-mark { inline-size: 38px; block-size: 42px; flex-shrink: 0; color: var(--primary-text); }
body[data-page="home"] .brand-mark svg { inline-size: 33px; block-size: 33px; }
body[data-page="home"] .brand-word { display: block; min-inline-size: 0; font-size: 19px; font-weight: 750; letter-spacing: -.5px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
body[data-page="home"] .primary-nav { display: flex; flex: 1; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; min-inline-size: 0; }
body[data-page="home"] .primary-nav a { position: relative; min-block-size: 44px; padding: 10px 13px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 550; text-align: center; transition: color 180ms ease, background-color 180ms ease; }
body[data-page="home"] .primary-nav a::after { content: ""; position: absolute; inset-inline: 13px; inset-block-end: 5px; block-size: 2px; border-radius: 1px; background: currentColor; opacity: 0; scale: .35 1; transform-origin: var(--welfare-inline-origin); pointer-events: none; transition: scale 240ms var(--welfare-ease), opacity 180ms ease; }
body[data-page="home"] .primary-nav a:focus-visible { color: var(--text); background: var(--surface-hover); }
body[data-page="home"] .primary-nav a:is(:focus-visible, .is-active)::after { opacity: 1; scale: 1; }
body[data-page="home"] .primary-nav a.is-active { color: var(--surface); background: var(--primary); font-weight: 650; }
body[data-page="home"] .primary-nav a.is-active::after { background: var(--accent); }
:root[data-theme="dark"] body[data-page="home"] .primary-nav a.is-active { color: var(--primary-text); background: var(--primary-soft); }
:root[data-theme="dark"] body[data-page="home"] .primary-nav a.is-active::after { background: currentColor; opacity: .7; }
:root[data-theme="dark"] body[data-page="home"] .site-header.is-scrolled { border-color: var(--border); box-shadow: 0 8px 24px #00000026; }
body[data-page="home"] .header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-inline-start: auto; min-inline-size: 0; }
body[data-page="home"] .header-logout { max-inline-size: 180px; }
body[data-page="home"] .header-session-help { order: 4; flex-basis: 100%; margin: 0; font-size: 13px; color: var(--error); }
body[data-page="home"] .language-control { gap: 6px; }
body[data-page="home"] .language-control select { max-inline-size: 132px; min-block-size: 42px; font-size: 14px; }
body[data-page="home"] .icon-button { inline-size: 42px; block-size: 42px; }
body[data-page="home"] .theme-toggle { background: transparent; }
body[data-page="home"] .menu-toggle { display: none; }
body[data-page="home"] .welfare-main { flex: 1; padding-block-end: 64px; }
body[data-page="home"] .welfare-view { min-inline-size: 0; }
body[data-page="home"] .eyebrow { color: var(--primary-text); font-size: 12px; font-weight: 650; letter-spacing: 1.1px; }
body[data-page="home"] .hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 66px; min-block-size: 530px; padding-block: 68px 62px; }
body[data-page="home"] .hero::before { content: ""; position: absolute; z-index: -1; inset-block: 18px 10px; inset-inline: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse 38% 45% at var(--welfare-halo-x) 42%, var(--hero-glow-warm), transparent 100%), radial-gradient(ellipse 42% 42% at var(--welfare-wash-x) 70%, var(--hero-glow-cool), transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%); opacity: .85; }
body[data-page="home"] .hero-copy { min-inline-size: 0; padding: 0; }
body[data-page="home"] .hero-eyebrow { gap: 11px; font-size: 12px; line-height: 1.8; }
body[data-page="home"] .tiny-spark { inline-size: 9px; block-size: 9px; flex-shrink: 0; border-radius: 1px; background: var(--accent); transform: rotate(45deg); }
body[data-page="home"] .hero h1 { margin-block-start: 23px; font-size: clamp(40px, 4.4vw, 58px); font-weight: 760; letter-spacing: -1.8px; line-height: 1.24; white-space: normal; text-wrap: balance; }
/* Text stays selectable and visible; WAAPI owns each line's entry, CSS only its ink. */
body[data-page="home"] .hero-title-line { display: block; position: relative; isolation: isolate; inline-size: fit-content; max-inline-size: 100%; }
body[data-page="home"] .hero-title-line + .hero-title-line { margin-block-start: .04em; color: var(--accent); }
body[data-page="home"] .hero-title-line + .hero-title-line::after { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-block-end: .05em; inline-size: min(78%, 6.75em); block-size: .15em; border-radius: 2px; background: var(--accent-soft); transform-origin: var(--welfare-inline-origin); pointer-events: none; }
:root[data-theme="dark"] body[data-page="home"] .hero-title-line + .hero-title-line { color: var(--primary-text); }
:root[data-theme="dark"] body[data-page="home"] .hero-title-line + .hero-title-line::after { block-size: .07em; background: #bcaa8133; }
body[data-page="home"] .hero-description { max-inline-size: 535px; margin-block-start: 25px; font-size: 16px; line-height: 1.95; }
body[data-page="home"] .hero-actions { margin-block-start: 30px; gap: 24px; }
body[data-page="home"] .hero-note { display: flex; align-items: flex-start; gap: 8px; margin-block-start: 22px; color: var(--muted); font-size: 12px; line-height: 1.75; }
body[data-page="home"] .hero-note .icon { inline-size: 15px; block-size: 15px; margin-block-start: 3px; color: var(--primary-text); }
/* Individual translate composes with WAAPI transform entry; never transition transform. */
body[data-page="home"] .button { min-block-size: 46px; max-inline-size: 100%; padding: 11px 19px; border-radius: 8px; font-size: 14px; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, translate 220ms var(--welfare-ease), box-shadow 220ms var(--welfare-ease); }
body[data-page="home"] .button-primary:hover:not(:disabled) { transform: none; }
body[data-page="home"] :is(.button, .icon-button, .platform-filter):focus-visible:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--welfare-button-shadow); }
body[data-page="home"] :is(.button, .icon-button, .platform-filter):is(:disabled, [aria-disabled="true"]) { translate: none; transform: none; box-shadow: none; }
body[data-page="home"] .icon-button, body[data-page="home"] .platform-filter { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, translate 200ms var(--welfare-ease), box-shadow 200ms var(--welfare-ease); }
body[data-page="home"] :is(.button, .text-link) .arrow-icon { transition: translate 200ms var(--welfare-ease); }
body[data-page="home"] .button-primary { box-shadow: 0 4px 10px #2459400b; }
:root[data-theme="dark"] body[data-page="home"] .button-primary { color: var(--on-primary); border-color: #628c72; box-shadow: 0 4px 14px #00000028; }
:root[data-theme="dark"] body[data-page="home"] .button-primary:disabled { color: var(--subtle); background: var(--surface-soft); border-color: var(--border); }
:root[data-theme="dark"] body[data-page="home"] .account-avatar { border-color: var(--border); }
body[data-page="home"] .button-small { min-block-size: 42px; padding: 9px 14px; font-size: 14px; }
body[data-page="home"] .button-quiet { padding-inline: 10px; }
body[data-page="home"] .text-link { min-block-size: 42px; font-size: 14px; line-height: 1.6; gap: 8px; }
body[data-page="home"] .card { border-radius: 16px; }
body[data-page="home"] .host-card { align-self: center; position: relative; overflow: hidden; border-color: var(--border); border-radius: 18px; box-shadow: 0 18px 45px #263c2912; }
body[data-page="home"] .host-landscape { position: relative; block-size: 210px; overflow: hidden; background: linear-gradient(145deg, var(--landscape-start), var(--landscape-end)); isolation: isolate; pointer-events: none; }
body[data-page="home"] .host-landscape::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--welfare-halo-x) 12%, #d8c78930, transparent 58%), linear-gradient(0deg, #10281e24, transparent 60%); }
body[data-page="home"] .host-landscape::after { content: ""; position: absolute; z-index: 1; inset-block: -35%; inset-inline-start: -55%; inline-size: 52%; background: linear-gradient(105deg, transparent 15%, #ecdeb81c 48%, #ecdeb836 50%, transparent 78%); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
body[data-page="home"] .landscape-grid { position: absolute; inset: -28px; background: repeating-linear-gradient(90deg, transparent 0 37px, #c4dcc423 37px 38px), repeating-linear-gradient(0deg, transparent 0 37px, #c4dcc41a 37px 38px); transform: rotate(-12deg) scale(1.2); }
body[data-page="home"] .landscape-block { position: absolute; z-index: 2; inline-size: 60px; block-size: 60px; background: linear-gradient(140deg, #a4b58a, #79966b 65%); transform: rotate(-30deg) skew(25deg); border: 1px solid #dce4bc55; box-shadow: inset 0 1px #edf1c84d, 14px 24px 24px #0c231a36; }
body[data-page="home"] .landscape-block::before { content: ""; position: absolute; inset-inline-start: -15px; inset-block-start: 4px; inline-size: 15px; block-size: 100%; background: linear-gradient(#617c51, #3e5d40); transform: skewY(-30deg); }
body[data-page="home"] .landscape-block::after { content: ""; position: absolute; inset-inline-start: -8px; inset-block-end: -9px; inline-size: 100%; block-size: 10px; background: #5e7d52; transform: skewX(-58deg); }
body[data-page="home"] .block-a { inset-inline-start: 48%; inset-block-start: 91px; }
body[data-page="home"] .block-b { inline-size: 98px; block-size: 98px; inset-inline-end: -12px; inset-block-start: 143px; background: linear-gradient(140deg, #b9c59a, #94aa7d 75%); }
body[data-page="home"] .block-c { inline-size: 36px; block-size: 36px; inset-inline-end: 17%; inset-block-start: 48px; background: linear-gradient(140deg, #f3c688, #dfa059 75%); }
body[data-page="home"] .block-c::before { background: #b47539; }
body[data-page="home"] .block-c::after { background: #c58742; }
body[data-page="home"] .landscape-sun { position: absolute; z-index: 1; inline-size: 11px; block-size: 11px; inset-inline-end: 12%; inset-block-start: 114px; background: #f1bf83; transform: rotate(12deg); box-shadow: 0 0 22px #f1bf833b, -100px -76px 0 -3px #d6dfb5; }
body[data-page="home"] .landscape-line { position: absolute; z-index: 1; inline-size: 230px; block-size: 230px; border: 1px solid #abc69752; inset-inline-end: -35px; inset-block-start: -100px; transform: rotate(45deg); }
body[data-page="home"] .landscape-line::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -1px; inline-size: 64px; block-size: 2px; background: linear-gradient(90deg, transparent, #ffe0a5, transparent); box-shadow: 0 0 12px #e7bc7359; opacity: 0; pointer-events: none; }
body[data-page="home"] .landscape-caption { position: absolute; z-index: 3; inset-block-start: 30px; inset-inline-start: 28px; max-inline-size: 47%; color: #e2ecd7; font-size: 11px; font-weight: 600; letter-spacing: 2px; line-height: 1.9; }
:root[data-theme="dark"] body[data-page="home"] .host-card { box-shadow: 0 18px 40px #00000026; }
:root[data-theme="dark"] body[data-page="home"] .host-landscape::before { background: radial-gradient(ellipse at var(--welfare-halo-x) 12%, #b7ad8220, transparent 58%), linear-gradient(0deg, #101a1826, transparent 60%); }
:root[data-theme="dark"] body[data-page="home"] .landscape-grid { opacity: .65; }
:root[data-theme="dark"] body[data-page="home"] .landscape-block { background: linear-gradient(140deg, #8e9d7c, #6c8066 65%); border-color: #b6c3a233; box-shadow: inset 0 1px #d9e0c526, 14px 24px 24px #080f1236; }
:root[data-theme="dark"] body[data-page="home"] .landscape-block::before { background: linear-gradient(#546b50, #3e5541); }
:root[data-theme="dark"] body[data-page="home"] .landscape-block::after { background: #536c51; }
:root[data-theme="dark"] body[data-page="home"] .block-b { background: linear-gradient(140deg, #a1ae88, #819776 75%); }
:root[data-theme="dark"] body[data-page="home"] .block-c { background: linear-gradient(140deg, #c6a579, #a98356 75%); }
:root[data-theme="dark"] body[data-page="home"] .block-c::before { background: #826442; }
:root[data-theme="dark"] body[data-page="home"] .block-c::after { background: #967448; }
:root[data-theme="dark"] body[data-page="home"] .landscape-sun { background: #c2ad86; box-shadow: 0 0 22px #c2ad861a, -100px -76px 0 -3px #bbc3a0; }
:root[data-theme="dark"] body[data-page="home"] .landscape-caption { color: #c9d2c8; }
body[data-page="home"] .host-card-content { position: relative; padding: 0 28px 22px; }
body[data-page="home"] .host-avatar { position: relative; inline-size: 96px; block-size: 96px; flex-shrink: 0; border-radius: 24px; border: 5px solid var(--surface); color: var(--primary-text); background: var(--primary-soft); overflow: hidden; }
body[data-page="home"] .host-card .host-avatar { margin-block: -43px 15px; box-shadow: 0 3px 10px #2038220b; }
body[data-page="home"] .host-avatar img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
body[data-page="home"] .host-avatar-fallback { display: grid; place-items: center; inline-size: 100%; block-size: 100%; font-size: 26px; font-weight: 650; line-height: 1; }
body[data-page="home"] .host-avatar-fallback svg { inline-size: 53%; block-size: 53%; }
body[data-page="home"] .host-card h2 { font-size: 25px; font-weight: 650; letter-spacing: -.4px; margin-block-start: 4px; line-height: 1.5; }
body[data-page="home"] .host-card [data-host-label] { font-size: 11px; color: var(--muted); }
body[data-page="home"] .host-note { margin-block-start: 9px; color: var(--muted); font-size: 13px; }
body[data-page="home"] .host-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 15px; margin-block-start: 18px; padding-block-start: 13px; border-block-start: 1px solid var(--border); }
body[data-page="home"] .host-community { color: var(--muted); font-size: 12px; letter-spacing: .4px; }
body[data-page="home"] .recent-activities { border-block-start: 1px solid var(--border); padding-block-start: 27px; }
body[data-page="home"] .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-block: 0 22px; padding-block: 6px 8px; }
body[data-page="home"] .section-heading > div { max-inline-size: 760px; min-inline-size: 0; }
body[data-page="home"] .section-heading h2 { font-size: 28px; font-weight: 650; letter-spacing: -.6px; }
body[data-page="home"] .section-heading .eyebrow { color: var(--accent); margin-block-end: 9px; font-size: 11px; }
body[data-page="home"] .section-heading p:not(.eyebrow) { max-inline-size: 640px; font-size: 14px; margin-block-start: 10px; }
body[data-page="home"] .section-heading > a { flex-shrink: 0; }
body[data-page="home"] .activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body[data-page="home"] .activity-card { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; transition: border-color 220ms ease, box-shadow 260ms var(--welfare-ease), translate 260ms var(--welfare-ease); }
body[data-page="home"] .activity-card:focus-within { border-color: var(--primary-text); box-shadow: var(--welfare-lift-shadow); }
body[data-page="home"] .activity-card :is(img, .activity-mark svg) { transition: scale 320ms var(--welfare-ease); }
body[data-page="home"] .activity-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 24px 24px 0; }
body[data-page="home"] .activity-mark { display: grid; place-items: center; inline-size: 46px; block-size: 46px; flex-shrink: 0; background: var(--primary-soft); color: var(--primary-text); border-radius: 11px; }
body[data-page="home"] .activity-mark svg { inline-size: 28px; block-size: 28px; }
body[data-page="home"] .platform-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-inline-size: 0; }
body[data-page="home"] .activity-card-top .platform-badges { flex: 1 1 100px; }
body[data-page="home"] .platform-badge { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-soft); color: var(--text); font-size: 12px; font-weight: 550; line-height: 1.6; overflow-wrap: anywhere; }
body[data-page="home"] .badge { max-inline-size: 50%; padding: 4px 8px; border-radius: 5px; font-size: 11px; line-height: 1.6; white-space: normal; }
body[data-page="home"] .badge-soft { color: var(--primary-text); background: var(--primary-soft); }
body[data-page="home"] .activity-copy { flex: 1; padding: 21px 24px 22px; min-inline-size: 0; }
body[data-page="home"] .activity-copy h2 { font-size: 23px; line-height: 1.45; letter-spacing: -.4px; }
body[data-page="home"] .activity-description { margin-block-start: 12px; color: var(--muted); font-size: 14px; line-height: 1.85; white-space: pre-line; }
body[data-page="home"] .activity-reward { margin-block-start: 22px; padding-inline-start: 12px; border-inline-start: 2px solid var(--accent); }
body[data-page="home"] .activity-reward .field-label { font-size: 11px; }
body[data-page="home"] .activity-reward p { margin-block-start: 4px; color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-line; }
body[data-page="home"] .activity-card-footer { padding: 12px 24px; border-block-start: 1px solid var(--border); }
body[data-page="home"] .activity-card-footer > a { inline-size: 100%; justify-content: space-between; }
body[data-page="home"] .activity-card-footer .card-footnote { margin-block: 0 8px; }
body[data-page="home"] .collection-empty { display: flex; align-items: center; gap: 22px; padding: 35px; min-block-size: 170px; background: var(--surface); }
body[data-page="home"] .collection-empty > div { min-inline-size: 0; }
body[data-page="home"] .empty-block { display: grid; place-items: center; inline-size: 65px; block-size: 65px; flex-shrink: 0; color: var(--primary-text); background: var(--primary-soft); border-radius: 16px; }
body[data-page="home"] .empty-block svg { inline-size: 37px; block-size: 37px; }
body[data-page="home"] .collection-empty :is(h2, h3) { font-size: 21px; font-weight: 600; line-height: 1.5; }
body[data-page="home"] .collection-empty p { margin-block-start: 7px; color: var(--muted); font-size: 14px; line-height: 1.8; }
body[data-page="home"] .shop-promotion { display: flex; flex-wrap: wrap; align-items: center; gap: 17px; margin-block-start: 30px; padding: 22px 0 0; border-block-start: 1px solid var(--border); }
body[data-page="home"] .shop-promotion > .shop-copy { flex: 1; min-inline-size: 0; }
body[data-page="home"] .shop-promotion h2 { font-size: 15px; }
body[data-page="home"] .shop-promotion p { color: var(--muted); font-size: 14px; margin-block-start: 4px; }
body[data-page="home"] .shop-promotion small { display: block; color: var(--muted); font-size: 12px; margin-block-start: 5px; }
body[data-page="home"] .shop-promotion .shop-mark { inline-size: 40px; block-size: 40px; flex-shrink: 0; color: var(--accent); background: var(--accent-soft); }
body[data-page="home"] .shop-promotion > a { max-inline-size: 25%; }
body[data-page="home"] .shop-promotion [aria-disabled="true"] { color: var(--muted); cursor: not-allowed; text-decoration: none; border: 1px dashed var(--border); border-radius: 8px; padding: 9px 14px; }
body[data-page="home"] .shop-featured { padding: 24px; border: 1px solid var(--border); border-block-start: 4px solid #f4cf35; border-radius: 16px; background: var(--surface); }
:root[data-theme="dark"] body[data-page="home"] .shop-featured { border-block-start: 2px solid #655a45; }
body[data-page="home"] .shop-featured h2 { font-size: 22px; }
body[data-page="home"] .shop-catalog-message { flex: 1 1 100%; padding: 20px; border: 1px dashed var(--border); border-radius: 10px; }
body[data-page="home"] .shop-product-grid { display: grid; flex: 1 1 100%; min-inline-size: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body[data-page="home"] .shop-product-card { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 220ms ease, box-shadow 260ms var(--welfare-ease), translate 260ms var(--welfare-ease); }
body[data-page="home"] .shop-product-card:focus-visible { border-color: var(--accent); box-shadow: var(--welfare-lift-shadow); outline: 3px solid var(--primary-text); outline-offset: 3px; }
body[data-page="home"] .shop-product-cover { display: grid; place-items: center; position: relative; inline-size: 100%; aspect-ratio: 1; overflow: hidden; background: var(--surface-soft); }
body[data-page="home"] .shop-product-cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 380ms var(--welfare-ease); }
body[data-page="home"] .shop-image-placeholder { padding: 15px; color: var(--muted); text-align: center; font-size: 13px; }
body[data-page="home"] .shop-product-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-block-size: 3.2em; margin: 12px 12px 8px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
body[data-page="home"] .shop-product-price { margin: auto 12px 14px; font-size: 23px; font-weight: 750; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body[data-page="home"] .shop-price-missing { margin: auto 12px 14px; color: var(--muted); font-size: 13px; }
body[data-page="home"] .page-heading { padding-block: 50px 31px; max-inline-size: 800px; }
body[data-page="home"] .page-heading h1 { margin-block-start: 12px; font-size: clamp(36px, 4vw, 48px); font-weight: 700; line-height: 1.24; letter-spacing: -1.3px; }
body[data-page="home"] .page-heading > p:not(.eyebrow) { margin-block-start: 17px; color: var(--muted); font-size: 16px; line-height: 1.85; }
body[data-page="home"] .platform-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 25px; }
body[data-page="home"] .platform-filter { min-block-size: 43px; padding: 9px 17px; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; font-size: 14px; line-height: 1.6; }
body[data-page="home"] .platform-filter:hover { color: var(--text); background: var(--surface-hover); }
body[data-page="home"] .platform-filter[aria-pressed="true"] { color: var(--primary-text); border-color: var(--primary-text); background: var(--primary-soft); }
body[data-page="home"] .rewards-card { min-block-size: 420px; padding: 27px; }
body[data-page="home"] .rewards-status { padding: 32px; color: var(--muted); }
body[data-page="home"] .rewards-status h2 { color: var(--text); font-size: 22px; }
body[data-page="home"] .rewards-status p { margin-block: 12px 22px; line-height: 1.85; }
body[data-page="home"] .rewards-auth-card > .empty-block { margin-block-end: 20px; }
body[data-page="home"] .rewards-auth-card > h2 { font-size: clamp(23px, 3vw, 29px); line-height: 1.45; }
body[data-page="home"] .rewards-auth-card > .body-note { margin-block-start: 12px; color: var(--muted); }
body[data-page="home"] .rewards-auth-card > .card-footnote { margin-block-start: 22px; color: var(--muted); }
body[data-page="home"] .rewards-identity { padding-block: 20px; border-block-end: 1px solid var(--border); overflow-wrap: anywhere; }
body[data-page="home"] .rewards-identity h3 { margin-block: 7px 12px; font-size: 20px; }
body[data-page="home"] .rewards-identity code { display: inline-block; max-inline-size: 100%; margin-block-start: 6px; white-space: normal; }
body[data-page="home"] .rewards-card .empty-state > .empty-block { margin: 0 auto 20px; }
body[data-page="home"] .rewards-card .platform-option [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
body[data-page="home"] .verify-view { max-inline-size: 860px; margin-inline: auto; padding-block-start: 30px; }
body[data-page="home"] .verify-view .claim-heading .page-heading { max-inline-size: 650px; }
body[data-page="home"] .verify-status { padding: 24px 28px; margin-block-end: 22px; color: var(--muted); }
body[data-page="home"] .verify-status .text-link { margin-block-start: 12px; }
body[data-page="home"] #verify-platform { display: inline-block; margin-block-end: 16px; }
body[data-page="home"] :is(#verify-account-mount, #claim-account-mount) { min-inline-size: 0; }
body[data-page="home"] #verify-account-mount .step-tag { display: none; }
body[data-page="home"] #verify-continue { margin-block-start: 16px; }
body[data-page="home"] #verify-continue[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
body[data-page="home"] .card-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; }
body[data-page="home"] .card-heading :is(h2, h3) { display: flex; align-items: baseline; gap: 10px; flex: 1; font-size: 18px; }
body[data-page="home"] .empty-state { padding: 37px 12px; }
body[data-page="home"] .empty-illustration { inline-size: 100px; block-size: 100px; }
body[data-page="home"] .empty-state h3 { font-size: 25px; }
body[data-page="home"] .empty-state > p { max-inline-size: 560px; font-size: 15px; }
body[data-page="home"] .guide-grid { gap: 20px; }
body[data-page="home"] .guide-card { padding: 28px; }
body[data-page="home"] .guide-card h2 { font-size: 21px; line-height: 1.5; }
body[data-page="home"] .guide-card p { font-size: 15px; }
body[data-page="home"] .guide-card .card-footnote { padding-block-start: 15px; border-block-start: 1px solid var(--border); margin-block-start: 22px; font-size: 13px; }
body[data-page="home"] .guide-card .text-link { margin-block-start: 20px; }
body[data-page="home"] .step-number { color: var(--accent); opacity: .65; }
body[data-page="home"] .guide-icon { border-radius: 10px; }
body[data-page="home"] .claim-back { margin-block-start: 24px; }
body[data-page="home"] .claim-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body[data-page="home"] .claim-heading .page-heading { padding-block: 17px 28px; }
body[data-page="home"] .claim-heading > .button { flex-shrink: 0; }
body[data-page="home"] .claim-empty { padding: 42px 24px; }
body[data-page="home"] .claim-empty .empty-block { margin: 0 auto 20px; }
body[data-page="home"] .claim-empty h2 { font-size: 24px; }
body[data-page="home"] .selected-activity { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 27px 30px; margin-block-end: 24px; }
body[data-page="home"] .selected-activity-copy { flex: 1; min-inline-size: 0; }
body[data-page="home"] .selected-activity h2 { font-size: 26px; line-height: 1.5; margin-block-start: 7px; }
body[data-page="home"] #selected-activity-description { color: var(--muted); font-size: 15px; margin-block-start: 10px; white-space: pre-line; }
body[data-page="home"] .activity-facts { display: flex; flex-wrap: wrap; gap: 13px 32px; margin: 19px 0 0; }
body[data-page="home"] .activity-facts > div { min-inline-size: 0; }
body[data-page="home"] .activity-facts dt { font-size: 12px; color: var(--muted); }
body[data-page="home"] .activity-facts dd { margin: 4px 0 0; font-size: 14px; font-weight: 550; white-space: pre-line; }
body[data-page="home"] .host-compact { display: flex; align-items: center; gap: 15px; flex-basis: 285px; max-inline-size: 38%; min-inline-size: 0; padding-inline-start: 28px; border-inline-start: 1px solid var(--border); }
body[data-page="home"] .host-compact .host-avatar { inline-size: 64px; block-size: 64px; border: 0; border-radius: 17px; }
body[data-page="home"] .host-compact .host-avatar-fallback { font-size: 22px; }
body[data-page="home"] .host-profile-copy { min-inline-size: 0; }
body[data-page="home"] .host-profile-copy .field-label { font-size: 12px; }
body[data-page="home"] .host-profile-copy h3 { font-size: 18px; margin-block-start: 3px; }
body[data-page="home"] .host-profile-copy .text-link { font-size: 13px; }
body[data-page="home"] .change-platform { margin-block-start: 12px; }
body[data-page="home"] .platform-choice { padding: 28px 30px; margin-block-end: 24px; }
body[data-page="home"] .platform-choice > h2 { font-size: 22px; line-height: 1.5; }
body[data-page="home"] .platform-choice > .body-note { margin-block-start: 8px; }
body[data-page="home"] .platform-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block-start: 22px; }
body[data-page="home"] .platform-option { display: flex; align-items: flex-start; flex-direction: column; min-inline-size: 0; gap: 12px; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
body[data-page="home"] .platform-option h3 { font-size: 18px; }
body[data-page="home"] .platform-option .body-note { flex: 1; color: var(--muted); }
body[data-page="home"] .platform-option .button { inline-size: 100%; }
body[data-page="home"] .platform-option-unavailable { border-style: dashed; background: var(--surface-soft); }
body[data-page="home"] .claim-unavailable { padding: 28px 30px; color: var(--muted); font-size: 15px; }
body[data-page="home"] .claim-unavailable .text-link { margin-block-start: 14px; }
body[data-page="home"] .claim-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
body[data-page="home"] .claim-checks { display: grid; gap: 24px; min-inline-size: 0; }
body[data-page="home"] :is(.account-card, .follow-card, .delivery-card) { padding: 28px; }
body[data-page="home"] .step-tag { color: var(--accent); font: 13px/1.5 var(--mono); flex-shrink: 0; }
body[data-page="home"] .status-dot-label { padding-block-start: 4px; font-size: 12px; }
body[data-page="home"] .guest-view { text-align: start; padding-block: 23px 16px; }
body[data-page="home"] .guest-view h3 { margin: 0; font-size: 17px; }
body[data-page="home"] .guest-view p { max-inline-size: none; margin-block-start: 10px; font-size: 14px; }
body[data-page="home"] .verification-intro { margin-block: 4px 0; }
body[data-page="home"] .verification-intro .form-field { margin-block-end: 20px; }
body[data-page="home"] .form-field label { display: block; margin-block-end: 8px; font-size: 14px; font-weight: 550; }
body[data-page="home"] .form-field input { font-size: 16px; min-block-size: 48px; letter-spacing: .6px; background: var(--surface); }
body[data-page="home"] .verification-intro .card-footnote { margin-block: 8px 0; font-size: 13px; }
body[data-page="home"] .uid-guide { margin-block: 0 22px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
body[data-page="home"] .uid-guide summary { color: var(--primary-text); font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.7; }
body[data-page="home"] .uid-guide ol { margin-block: 12px 0; padding-inline-start: 20px; color: var(--muted); font-size: 13px; line-height: 1.85; }
body[data-page="home"] .uid-guide li + li { margin-block-start: 8px; }
body[data-page="home"] .uid-guide p { margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
body[data-page="home"] .checkbox-field { gap: 11px; font-size: 13px; line-height: 1.85; }
body[data-page="home"] .checkbox-field input { inline-size: 18px; block-size: 18px; margin-inline: 0; }
body[data-page="home"] .verification-intro > .button { margin-block-start: 21px; }
body[data-page="home"] .field-label { font-size: 13px; }
body[data-page="home"] .user-view { padding-block: 25px; }
body[data-page="home"] .user-view code { font-size: 14px; }
body[data-page="home"] .account-avatar { border-color: var(--border); border-radius: 16px; transform: none; background: var(--primary-soft); color: var(--primary-text); }
body[data-page="home"] .account-avatar svg { transform: none; }
body[data-page="home"] .account-card > .button { font-size: 14px; }
body[data-page="home"] .login-help { font-size: 14px; line-height: 1.8; }
body[data-page="home"] .alternate-login { margin-block-start: 12px; }
body[data-page="home"] .privacy-note p { font-size: 13px; }
body[data-page="home"] .privacy-note .icon { inline-size: 17px; block-size: 17px; }
body[data-page="home"] .verification-panel { padding: 20px; }
body[data-page="home"] .verification-panel :is(p, code) { font-size: 14px; }
body[data-page="home"] .verification-panel h3 { font-size: 18px; }
body[data-page="home"] .verification-send-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-block: 14px; }
body[data-page="home"] .verification-send-actions .button { min-inline-size: 0; max-inline-size: 100%; white-space: normal; text-align: center; }
body[data-page="home"] .verification-send-actions [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
body[data-page="home"] #verification-open-note { margin-block: 9px 14px; color: var(--muted); line-height: 1.75; }
body[data-page="home"] .verification-message { white-space: pre-wrap; user-select: all; line-height: 1.8; }
body[data-page="home"] .clipboard-fallback { position: fixed; inset-block-start: 0; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; padding: 0; border: 0; font-size: 16px; }
body[data-page="home"] .manual-copy-panel { margin-block: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
body[data-page="home"] .manual-copy-panel label { display: block; font-size: 14px; line-height: 1.8; margin-block-end: 10px; }
body[data-page="home"] .manual-copy-panel textarea { display: block; inline-size: 100%; min-block-size: 160px; font-size: 16px; line-height: 1.65; white-space: pre-wrap; resize: vertical; user-select: text; }
body[data-page="home"] .manual-copy-panel button { margin-block-start: 12px; }
body[data-page="home"] .admin-access-main { max-inline-size: 800px; padding-block: 44px; }
body[data-page="home"] .admin-access-card { padding: clamp(22px, 4vw, 38px); }
body[data-page="home"] .admin-access-card h1 { margin-block: 18px; font-size: clamp(26px, 4vw, 37px); line-height: 1.35; }
body[data-page="home"] .admin-access-card p { margin-block: 16px; color: var(--muted); }
body[data-page="home"] .admin-access-card pre { padding: 18px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
body[data-page="home"] .admin-access-card .button { margin-block: 6px 12px; }
body[data-page="home"] .admin-access-toolbar { display: flex; justify-content: flex-end; margin-block-end: 20px; }
body[data-page="home"] .verification-recipient bdi { display: block; font-size: 17px; font-weight: 600; margin-block-start: 4px; }
body[data-page="home"] .verification-panel .message-warning { padding-inline-start: 12px; border-inline-start: 2px solid var(--accent); font-size: 13px; }
body[data-page="home"] .verification-expiry { font-size: 13px; }
body[data-page="home"] .inline-warning { font-size: 14px; }
body[data-page="home"] .body-note { font-size: 14px; line-height: 1.85; }
body[data-page="home"] .follow-card > .body-note, body[data-page="home"] .delivery-card > .body-note { margin-block-start: 18px; }
body[data-page="home"] .card-footnote { font-size: 13px; }
body[data-page="home"] .activity-account-link { margin-block: 8px 14px; }
body[data-page="home"] .task-grid li { padding: 15px; }
body[data-page="home"] .task-grid li > div { display: block; }
body[data-page="home"] .task-name { font-size: 14px; }
body[data-page="home"] .task-status { font-size: 13px; margin-block-start: 4px; text-align: start; }
body[data-page="home"] .follow-actions { margin-block-start: 20px; }
body[data-page="home"] .follow-actions .body-note { margin-block-start: 10px; }
body[data-page="home"] .delivery-card > button { margin-block-start: 19px; }
/* The native dialog owns focus; only its bounded advertisement viewport is observed. */
body[data-page="home"].ad-modal-open { overflow: hidden; }
body[data-page="home"] .ad-dialog { inline-size: min(760px, calc(100% - 24px)); max-inline-size: calc(100% - 24px); max-block-size: calc(100dvh - 24px); margin: auto; padding: clamp(16px, 3vw, 28px); border: 2px solid var(--accent); border-radius: 16px; background: var(--surface); color: var(--text); overflow: auto; overscroll-behavior: contain; box-shadow: 0 20px 80px #0006; }
body[data-page="home"] .ad-dialog::backdrop { background: #08170dcc; }
body[data-page="home"] .ad-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; position: sticky; inset-block-start: -1px; z-index: 1; background: var(--surface); padding-block-end: 10px; }
body[data-page="home"] .ad-dialog-heading h2 { font-size: clamp(18px, 3vw, 23px); line-height: 1.5; }
body[data-page="home"] #ad-close { flex-shrink: 0; max-inline-size: 40%; white-space: normal; }
body[data-page="home"] .ad-dialog > .body-note { margin-block: 10px; }
body[data-page="home"] .ad-display-viewport { min-inline-size: 0; max-block-size: min(450px, 55vh); max-height: min(450px, 55vh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
body[data-page="home"] .ad-item-mount { min-inline-size: 0; }
body[data-page="home"] .ad-item-mount { padding: 16px; }
body[data-page="home"] .ad-product-single { max-inline-size: 300px; margin-inline: auto; }
body[data-page="home"] .ad-shop-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-page="home"] .ad-shop-preview-label { margin-block-end: 12px; color: var(--muted); font-size: 13px; }
body[data-page="home"] .ad-product-unavailable { display: grid; align-content: center; gap: 14px; min-block-size: 200px; padding: 12px; overflow-wrap: anywhere; }
body[data-page="home"] .ad-product-unavailable h3 { font-size: 20px; }
body[data-page="home"] .ad-product-unavailable p { color: var(--muted); font-size: 14px; }
body[data-page="home"] .ad-unconfigured { display: grid; align-content: center; min-block-size: min(220px, 35vh); padding: 20px; color: var(--muted); }
body[data-page="home"] #ad-retry { margin-block: 12px; }
body[data-page="home"] .activity-time { margin-block: 8px 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
body[data-page="home"] .activity-stock { margin-block: 16px; }
body[data-page="home"] .activity-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
body[data-page="home"] .activity-stats dt { font-size: 12px; color: var(--muted); }
body[data-page="home"] .activity-stats dd { margin: 3px 0 0; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
body[data-page="home"] [data-stock-progress] { display: block; inline-size: 100%; block-size: 8px; border: 0; border-radius: 5px; overflow: hidden; accent-color: var(--primary); background: var(--surface-soft); }
body[data-page="home"] [data-stock-progress]::-webkit-progress-bar { background: var(--surface-soft); }
body[data-page="home"] [data-stock-progress]::-webkit-progress-value { background: var(--primary); }
body[data-page="home"] [data-stock-progress]::-moz-progress-bar { background: var(--primary); }
body[data-page="home"] .footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-block-start: 28px; color: var(--muted); font-size: 13px; }
body[data-page="home"] .footer-legal a { min-block-size: 42px; display: inline-flex; align-items: center; }
body[data-page="home"] #claim-history-mount { margin-block-start: 24px; }
body[data-page="home"] #claim-identity-link { margin-inline-end: 20px; }
body[data-page="home"] .ad-disclosure { display: inline-block; padding: 3px 9px; margin-block-end: 6px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
body[data-page="home"] #ad-shop-link { margin-block-start: 10px; }
body[data-page="home"] .ad-countdown { display: grid; gap: 8px; margin-block-start: 20px; min-inline-size: 0; color: var(--primary-text); font-variant-numeric: tabular-nums; }
body[data-page="home"] #ad-progress { display: block; inline-size: 100%; block-size: 10px; border: 0; border-radius: 5px; overflow: hidden; accent-color: var(--primary); background: var(--surface-soft); }
body[data-page="home"] #ad-progress::-webkit-progress-bar { background: var(--surface-soft); }
body[data-page="home"] #ad-progress::-webkit-progress-value { background: var(--primary); }
body[data-page="home"] #ad-progress::-moz-progress-bar { background: var(--primary); }
/* Private rewards have their own full-width code, history grid and non-modal copy fallback. */
body[data-page="home"] .reward-state { margin-block: 20px; line-height: 1.85; color: var(--muted); }
body[data-page="home"] .reward-state .button { margin-block-start: 12px; }
body[data-page="home"] .reward-stock { margin-block-start: 18px; font-weight: 600; color: var(--primary-text); }
body[data-page="home"] .reward-history-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; margin-block: 24px; }
body[data-page="home"] .reward-record { display: grid; align-content: start; gap: 12px; min-inline-size: 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow-wrap: anywhere; }
body[data-page="home"] .reward-record :is(h3, h4) { font-size: 18px; line-height: 1.6; }
body[data-page="home"] .reward-record .body-note { white-space: pre-wrap; }
body[data-page="home"] .reward-record-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
body[data-page="home"] .reward-code { display: block; inline-size: 100%; min-inline-size: 0; padding: 15px; border: 1px solid var(--border); border-radius: 8px; font: 15px/1.8 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; user-select: text; text-align: start; unicode-bidi: isolate; }
body[data-page="home"] .reward-record > .button { justify-self: start; max-inline-size: 100%; white-space: normal; }
body[data-page="home"] #claim-result { margin-block-start: 20px; }
body[data-page="home"] .reward-history-link { display: inline-block; margin-block-start: 18px; }
body[data-page="home"] .reward-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-block-start: 18px; border-block-start: 1px solid var(--border); }
body[data-page="home"] .reward-pagination p { flex: 1 1 180px; text-align: center; color: var(--muted); font-size: 14px; }
body[data-page="home"] .reward-copy-feedback { margin-block-start: 20px; }
body[data-page="home"] .reward-copy-feedback > p:empty { display: none; }
body[data-page="home"] #reward-manual-panel { max-inline-size: 760px; margin-inline: auto; }
body[data-page="home"] #reward-manual-code { min-block-size: 110px; overflow-wrap: anywhere; word-break: break-all; }
body[data-page="home"] :is(.reward-code, #reward-manual-code):focus-visible { outline: 2px solid var(--primary-text); outline-offset: 3px; }
body[data-page="home"] .notice { margin-block-start: 22px; flex-wrap: wrap; }
body[data-page="home"] .notice > p { flex-basis: 180px; font-size: 14px; }
body[data-page="home"] .site-footer { display: block; padding: 35px 0 26px; font-size: 14px; }
body[data-page="home"] .site-footer > .footer-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 28px 44px; min-inline-size: 0; }
body[data-page="home"] .footer-about { flex: 1.7 1 300px; max-inline-size: 430px; min-inline-size: 0; margin-inline-end: auto; }
body[data-page="home"] .footer-brand { display: inline-flex; align-items: center; gap: 8px; max-inline-size: 100%; font-size: 18px; font-weight: 700; letter-spacing: -.3px; line-height: 1.5; color: var(--text); }
body[data-page="home"] .footer-brand > [data-brand-name] { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
body[data-page="home"] .footer-brand .brand-mark { inline-size: 31px; block-size: 34px; }
body[data-page="home"] .footer-brand svg { inline-size: 29px; block-size: 29px; }
body[data-page="home"] .footer-about > p { max-inline-size: 340px; margin-block-start: 13px; font-size: 13px; line-height: 1.9; }
body[data-page="home"] .footer-group { display: flex; flex: 1 1 120px; flex-direction: column; align-items: flex-start; min-inline-size: 0; max-inline-size: 220px; gap: 2px; }
body[data-page="home"] .footer-group h2 { margin-block: 5px 10px; color: var(--text); font-size: 13px; font-weight: 650; }
body[data-page="home"] .footer-group a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 38px; max-inline-size: 100%; font-size: 13px; transition: color 160ms ease; }
body[data-page="home"] .footer-group a .icon { inline-size: 13px; block-size: 13px; }
body[data-page="home"] .footer-group a:is(:hover, .is-active) { color: var(--primary-text); text-decoration: underline; text-underline-offset: 5px; }
body[data-page="home"] .footer-group p { margin-block-start: 8px; font-size: 11px; }
body[data-page="home"] .site-footer > .footer-bottom { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; margin-block-start: 32px; padding-block-start: 19px; border-block-start: 1px solid var(--border); }
body[data-page="home"] .footer-bottom > p { flex: 1 1 320px; font-size: 11px; }
body[data-page="home"] .footer-signature { display: inline-flex; align-items: center; gap: 8px; color: var(--subtle); font-size: 9px; letter-spacing: 1.1px; }
body[data-page="home"] .footer-signature > span { inline-size: 6px; block-size: 6px; flex-shrink: 0; background: var(--accent); }
:root[dir="rtl"] body[data-page="home"] { --welfare-inline-origin: right center; --welfare-halo-x: 18%; --welfare-wash-x: 80%; --welfare-trace-from: 64px; --welfare-trace-to: -210px; --welfare-sweep-to: -310%; }
:root[dir="rtl"] body[data-page="home"] :is(.hero h1, .hero-title-line, .page-heading h1, .eyebrow, .host-card h2, .activity-copy h2) { letter-spacing: 0; }

/* One-shot decorative choreography only: the last light settles at 3.5s.
   Keep motion-ready when suspending; play-state resumes the same timeline.
   No CSS entry, hidden state or transform transition belongs to a WAAPI text/card target. */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"].motion-ready .hero::before { animation: welfare-halo 1800ms var(--welfare-ease) 1; }
  body[data-page="home"].motion-ready .hero-title-line + .hero-title-line::after { animation: welfare-ink 780ms var(--welfare-ease) 420ms 1 backwards; }
  body[data-page="home"].motion-ready .landscape-grid { animation: welfare-grid 1350ms var(--welfare-ease) 100ms 1 backwards; }
  body[data-page="home"].motion-ready .landscape-block { animation: welfare-block-settle 1250ms var(--welfare-ease) 220ms 1 backwards; }
  body[data-page="home"].motion-ready .block-b { animation-delay: 360ms; }
  body[data-page="home"].motion-ready .block-c { animation-delay: 490ms; }
  body[data-page="home"].motion-ready .landscape-sun { animation: welfare-sunlight 1800ms var(--welfare-ease) 480ms 1 backwards; }
  body[data-page="home"].motion-ready .landscape-line { animation: welfare-orbit 1400ms var(--welfare-ease) 180ms 1 backwards; }
  body[data-page="home"].motion-ready .host-landscape::after { animation: welfare-light-sweep 2400ms var(--welfare-ease) 1100ms 1; }
  body[data-page="home"].motion-ready .landscape-line::after { animation: welfare-trace 1750ms var(--welfare-ease) 1050ms 1; }
}
@keyframes welfare-halo { from { opacity: .3; scale: .93; } to { opacity: .85; scale: 1; } }
@keyframes welfare-ink { from { scale: .12 1; opacity: .3; } to { scale: 1; opacity: 1; } }
@keyframes welfare-grid { from { opacity: .3; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes welfare-block-settle { 0% { opacity: .5; translate: 0 24px; } 65% { opacity: 1; translate: 0 -4px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes welfare-sunlight { from { opacity: .45; scale: .72; } to { opacity: 1; scale: 1; } }
@keyframes welfare-orbit { from { opacity: .35; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes welfare-light-sweep { 0% { translate: 0 0; opacity: 0; } 20%, 65% { opacity: .8; } 100% { translate: var(--welfare-sweep-to) 0; opacity: 0; } }
@keyframes welfare-trace { 0% { translate: var(--welfare-trace-from) 0; opacity: 0; } 18%, 70% { opacity: .9; } 100% { translate: var(--welfare-trace-to) 0; opacity: 0; } }

/* Opening feedback never moves/fades the observed advertisement or its controls. */
body[data-page="home"] .notice:not([hidden]):not([data-motion]) { animation: welfare-surface-open 180ms var(--welfare-ease) 1; }
body[data-page="home"] .ad-dialog[open] { animation: welfare-dialog-open 200ms ease-out 1; }
body[data-page="home"] .ad-dialog[open]::backdrop { animation: welfare-backdrop-open 180ms ease-out 1; }
@keyframes welfare-surface-open { from { opacity: .72; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes welfare-dialog-open { from { border-color: var(--border); box-shadow: 0 12px 35px #0003; } to { border-color: var(--accent); box-shadow: 0 20px 80px #0006; } }
@keyframes welfare-backdrop-open { from { background: #08170d80; } to { background: #08170dcc; } }

/* Optional real loading states: one background pass, no fake data, overlay or added height. */
body[data-page="home"].is-content-loading :is(.collection-empty, .rewards-status, .shop-catalog-message)[role="status"]:not([hidden]),
body[data-page="home"] [data-loading]:not([data-loading="false"]):not([hidden]):not([role="alert"]):not(.notice):not([data-tone="error"]) { background-image: linear-gradient(105deg, transparent 35%, var(--primary-soft) 50%, transparent 65%); background-size: 240% 100%; background-repeat: no-repeat; background-position: -100% 0; animation: welfare-loading-sweep 1600ms ease-in-out 1; }
@keyframes welfare-loading-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
body[data-page="home"] .is-refreshing { animation-duration: 700ms; animation-iteration-count: 3; }

/* Suspend without dropping an animation name: tab visibility changes do not restart it. */
body[data-page="home"].motion-suspended *,
body[data-page="home"].motion-suspended *::before,
body[data-page="home"].motion-suspended *::after,
body[data-page="home"].motion-suspended .ad-dialog::backdrop { animation-play-state: paused !important; }

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .primary-nav a:hover:not(.is-active):not([aria-disabled="true"]) { color: var(--text); background: var(--surface-hover); }
  body[data-page="home"] .primary-nav a:hover:not([aria-disabled="true"])::after { opacity: 1; scale: 1; }
  body[data-page="home"] :is(.button, .icon-button, .platform-filter):hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--welfare-button-shadow); }
  body[data-page="home"] :is(.activity-card, .shop-product-card):not(.ad-dialog *):hover:not([aria-disabled="true"]) { border-color: var(--primary-text); box-shadow: var(--welfare-lift-shadow); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body[data-page="home"] :is(.button, .icon-button, .platform-filter):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { translate: 0 -2px; }
  body[data-page="home"] :is(.button, .icon-button, .platform-filter):active:not(:disabled):not([aria-disabled="true"]) { translate: 0 0; box-shadow: none; }
  body[data-page="home"] :is(.activity-card, .shop-product-card):not(.ad-dialog *):is(:hover, :focus-visible):not([aria-disabled="true"]) { translate: 0 -5px; }
  body[data-page="home"] .activity-card:not(.ad-dialog *):hover:not([aria-disabled="true"]) :is(img, .activity-mark svg) { scale: 1.035; }
  body[data-page="home"] .shop-product-card:not(.ad-dialog *):is(:hover, :focus-visible):not([aria-disabled="true"]) .shop-product-cover img { scale: 1.035; }
  body[data-page="home"] :is(.button, .text-link):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .arrow-icon { translate: 3px 0; }
  :root[dir="rtl"] body[data-page="home"] :is(.button, .text-link):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .arrow-icon { translate: -3px 0; }
}
@media (max-width: 1040px) {
  body[data-page="home"] .header-inner { gap: 12px; min-block-size: 78px; }
  body[data-page="home"] .brand { flex: 1 1 240px; max-inline-size: 58%; }
  body[data-page="home"] .primary-nav { order: 3; flex-basis: 100%; justify-content: flex-start; padding-block-start: 12px; border-block-start: 1px solid var(--border); }
  body[data-page="home"] .primary-nav:not([hidden]):not([data-motion]) { animation: welfare-surface-open 180ms var(--welfare-ease) 1; }
  body[data-page="home"] .primary-nav a { flex: 1; min-block-size: 46px; }
  body[data-page="home"] .menu-toggle[aria-expanded="true"] { color: var(--primary-text); background: var(--primary-soft); border-color: var(--primary-text); }
  body[data-page="home"] .menu-toggle { display: inline-grid; }
  body[data-page="home"] .hero { gap: 35px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  body[data-page="home"] .hero h1 { font-size: 43px; }
  body[data-page="home"] .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="home"] .guide-grid { grid-template-columns: 1fr; }
  body[data-page="home"] .guide-card h2 { margin-block-start: 18px; }
  body[data-page="home"] .host-compact { flex-basis: 230px; padding-inline-start: 22px; gap: 12px; }
}
@media (max-width: 700px) {
  body[data-page="home"] :is(.header-inner, .welfare-main, .site-footer) { inline-size: calc(100% - 40px); }
  body[data-page="home"] .header-inner { padding-block: 13px; }
  body[data-page="home"] .brand { max-inline-size: 55%; flex-basis: 200px; }
  body[data-page="home"] .brand-word { font-size: 18px; }
  body[data-page="home"] .language-control select { max-inline-size: 102px; }
  body[data-page="home"] .language-control > .icon { display: none; }
  body[data-page="home"] .header-actions { gap: 5px; }
  body[data-page="home"] .welfare-main { padding-block-end: 40px; }
  body[data-page="home"] .hero { grid-template-columns: 1fr; gap: 30px; padding-block: 40px; min-block-size: 0; }
  body[data-page="home"] .hero::before { inset-block: 12px 0; background: radial-gradient(ellipse 48% 38% at var(--welfare-halo-x) 72%, var(--hero-glow-warm), transparent 100%), radial-gradient(ellipse 48% 32% at var(--welfare-wash-x) 20%, var(--hero-glow-cool), transparent 100%); }
  body[data-page="home"] .hero-description { max-inline-size: 600px; font-size: 15px; }
  body[data-page="home"] .hero h1 { font-size: clamp(36px, 6.8vw, 46px); }
  body[data-page="home"] .host-card { inline-size: 100%; }
  body[data-page="home"] .host-landscape { block-size: 164px; }
  body[data-page="home"] .landscape-caption { inset-block-start: 23px; }
  body[data-page="home"] .host-card-content { padding: 0 24px 14px; }
  body[data-page="home"] .host-card .host-avatar { inline-size: 78px; block-size: 78px; margin-block: -36px 10px; border-radius: 21px; }
  body[data-page="home"] .host-card h2 { font-size: 23px; }
  body[data-page="home"] .host-card-footer { margin-block-start: 12px; padding-block-start: 8px; }
  body[data-page="home"] .section-heading { align-items: flex-start; }
  body[data-page="home"] .section-heading h2 { font-size: 24px; }
  body[data-page="home"] .activity-grid { grid-template-columns: 1fr; gap: 16px; }
  body[data-page="home"] .activity-copy h2 { font-size: 23px; }
  body[data-page="home"] .collection-empty { padding: 26px 22px; gap: 16px; }
  body[data-page="home"] .collection-empty .empty-block { inline-size: 51px; block-size: 51px; border-radius: 13px; }
  body[data-page="home"] .collection-empty .empty-block svg { inline-size: 31px; block-size: 31px; }
  body[data-page="home"] .collection-empty :is(h2, h3) { font-size: 19px; }
  body[data-page="home"] .shop-promotion { gap: 12px; padding-block-start: 18px; flex-wrap: wrap; }
  body[data-page="home"] .shop-featured { padding: 16px; }
  body[data-page="home"] .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body[data-page="home"] .shop-product-title { margin-inline: 10px; font-size: 14px; }
  body[data-page="home"] .shop-product-price { margin-inline: 10px; font-size: 21px; }
  body[data-page="home"] .shop-promotion > .shop-copy { flex-basis: calc(100% - 52px); }
  body[data-page="home"] .shop-promotion > a { max-inline-size: 100%; margin-inline-start: 52px; }
  body[data-page="home"] .page-heading { padding-block: 35px 26px; }
  body[data-page="home"] .page-heading h1 { font-size: 37px; }
  body[data-page="home"] .page-heading > p:not(.eyebrow) { font-size: 15px; }
  body[data-page="home"] .claim-heading { display: block; }
  body[data-page="home"] .claim-heading > button { margin-block-end: 20px; }
  body[data-page="home"] .claim-layout { grid-template-columns: 1fr; gap: 20px; }
  body[data-page="home"] .platform-choice { padding: 23px; }
  body[data-page="home"] .platform-options { grid-template-columns: 1fr; gap: 14px; }
  body[data-page="home"] .platform-option { padding: 19px; }
  body[data-page="home"] .claim-checks { gap: 20px; }
  body[data-page="home"] .selected-activity { align-items: stretch; flex-direction: column; gap: 22px; padding: 23px; }
  body[data-page="home"] .selected-activity h2 { font-size: 24px; }
  body[data-page="home"] .host-compact { flex-basis: auto; max-inline-size: none; border-inline-start: 0; padding: 20px 0 0; border-block-start: 1px solid var(--border); }
  body[data-page="home"] :is(.account-card, .follow-card, .delivery-card) { padding: 23px; }
  body[data-page="home"] .site-footer { padding-block-start: 28px; }
  body[data-page="home"] .site-footer > .footer-top { gap: 24px 28px; }
  body[data-page="home"] .footer-about { flex-basis: 100%; max-inline-size: none; }
  body[data-page="home"] .footer-about > p { max-inline-size: 480px; }
  body[data-page="home"] .footer-group { flex-basis: calc(50% - 14px); max-inline-size: none; }
  body[data-page="home"] .footer-group a { min-block-size: 42px; }
  body[data-page="home"] .site-footer > .footer-bottom { gap: 12px; margin-block-start: 26px; }
}
@media (max-width: 480px) {
  body[data-page="home"] :is(.header-inner, .welfare-main, .site-footer) { inline-size: calc(100% - 32px); }
  body[data-page="home"] .header-inner { gap: 7px; }
  body[data-page="home"] .brand { flex-basis: 100%; max-inline-size: 100%; gap: 6px; }
  body[data-page="home"] .brand-word { font-size: 18px; }
  body[data-page="home"] .brand-mark { inline-size: 28px; }
  body[data-page="home"] .brand-mark svg { inline-size: 28px; block-size: 28px; }
  body[data-page="home"] .header-actions { flex-basis: 100%; justify-content: flex-end; }
  body[data-page="home"] .language-control { margin-inline-end: auto; }
  body[data-page="home"] .language-control select { max-inline-size: 170px; }
  body[data-page="home"] .primary-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body[data-page="home"] .primary-nav a { text-align: start; }
  body[data-page="home"] .hero { padding-block-start: 27px; }
  body[data-page="home"] .hero-eyebrow { font-size: 11px; letter-spacing: .6px; }
  body[data-page="home"] .hero h1 { font-size: clamp(30px, 7.8vw, 38px); line-height: 1.35; letter-spacing: -1px; margin-block-start: 19px; }
  body[data-page="home"] .hero-description { margin-block-start: 19px; }
  body[data-page="home"] .hero-actions { gap: 10px 18px; margin-block-start: 22px; }
  body[data-page="home"] .hero-actions .button { padding-inline: 15px; }
  body[data-page="home"] .section-heading { gap: 12px; flex-wrap: wrap; }
  body[data-page="home"] .collection-empty { align-items: flex-start; }
  body[data-page="home"] :is(.account-card, .follow-card, .delivery-card, .guide-card, .rewards-card) { padding: 21px; }
  body[data-page="home"] .activity-card-top { padding: 21px 21px 0; }
  body[data-page="home"] .activity-copy { padding: 18px 21px 21px; }
  body[data-page="home"] .activity-card-footer { padding-inline: 21px; }
  body[data-page="home"] .verification-panel { padding: 14px; }
  body[data-page="home"] .card-heading :is(h2, h3) { font-size: 17px; }
  body[data-page="home"] .empty-state h3 { font-size: 23px; }
  body[data-page="home"] .rewards-card .empty-state { padding-inline: 0; }
}
/* The JS preference class and the media query both settle content immediately.
   Explicit [hidden] and closed-dialog semantics are intentionally never overridden. */
body[data-page="home"].motion-reduced,
body[data-page="home"].motion-reduced *,
body[data-page="home"].motion-reduced *::before,
body[data-page="home"].motion-reduced *::after,
body[data-page="home"].motion-reduced .ad-dialog::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body[data-page="home"].motion-reduced [data-motion] { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; clip-path: none !important; }
body[data-page="home"].motion-reduced :is(.button, .icon-button, .platform-filter, .activity-card, .shop-product-card, .arrow-icon, .activity-card img, .activity-mark svg, .shop-product-cover img) { translate: none !important; scale: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body[data-page="home"], body[data-page="home"] *, body[data-page="home"] *::before, body[data-page="home"] *::after, body[data-page="home"] .ad-dialog::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body[data-page="home"] [data-motion] { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; clip-path: none !important; }
  body[data-page="home"] :is(.button, .icon-button, .platform-filter, .activity-card, .shop-product-card, .arrow-icon, .activity-card img, .activity-mark svg, .shop-product-cover img) { translate: none !important; scale: none !important; }
}
@media (forced-colors: active) {
  body[data-page="home"] :is(.primary-nav a.is-active, .platform-filter[aria-pressed="true"], .host-avatar, .empty-block) { border: 1px solid CanvasText; }
  body[data-page="home"] .host-landscape { background: Canvas; border-block-end: 1px solid CanvasText; }
  body[data-page="home"] .landscape-block { border-color: CanvasText; }
}