/* App-style interface: only inside the installed app (html.yl-app, set in inc/app-ui.php), phone and tablet widths. */
.yl-tabbar, .yl-more, .yl-apphome { display: none; }

@media (max-width: 899px) {
  html.yl-app body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* slimmer top bar: logo, language, bell. The menu lives in the bottom bar */
  html.yl-app .site-header { padding-top: env(safe-area-inset-top, 0px); }
  html.yl-app .site-header .container { padding-block: 6px; }
  html.yl-app .site-logo img { height: 36px; }
  html.yl-app .nav-toggle, html.yl-app .primary-nav, html.yl-app .mobile-nav, html.yl-app .header-actions > .btn { display: none !important; }
  html.yl-app .site-footer { display: none; }

  /* page heroes: shorter, so the content starts sooner */
  html.yl-app .ph-hero { min-height: 150px; }
  html.yl-app .ph-in { padding-block: var(--sp-5) calc(var(--sp-5) + 24px); }
  html.yl-app .ev-hero { padding-top: var(--sp-4); }

  /* bottom tab bar */
  html.yl-app .yl-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 240; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--color-border); box-shadow: 0 -2px 12px rgba(26, 34, 30, .06); }
  html.yl-app .yl-tabbar a, html.yl-app .yl-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 8px 2px 6px; border: 0; background: none; color: var(--color-muted); font: inherit; font-size: 0.6875rem; font-weight: 600; line-height: 1.15; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.yl-app .yl-tabbar .btn-ic { width: 24px; height: 24px; }
  html.yl-app .yl-tabbar .is-on { color: var(--color-primary); }
  html.yl-app .yl-tabbar .is-on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-accent); }
  html.yl-app .yl-tabbar a:active, html.yl-app .yl-tabbar button:active { background: var(--green-50); }

  /* "More" sheet */
  html.yl-app .yl-more { display: block; position: fixed; inset: 0; z-index: 260; }
  html.yl-app .yl-more[hidden] { display: none; }
  html.yl-app .yl-more-bg { position: absolute; inset: 0; background: rgba(15, 42, 33, .5); opacity: 0; transition: opacity .2s ease; }
  html.yl-app .yl-more.is-open .yl-more-bg { opacity: 1; }
  html.yl-app .yl-more-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; background: var(--color-surface); border-radius: 22px 22px 0 0; padding: 10px var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .22s ease; }
  html.yl-app .yl-more.is-open .yl-more-sheet { transform: none; }
  html.yl-app .yl-more-grab { display: block; width: 40px; height: 4px; margin: 0 auto var(--sp-4); border-radius: 2px; background: var(--color-border); }
  html.yl-app .yl-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  html.yl-app .yl-more-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: var(--sp-2); border-radius: var(--radius-lg); background: var(--green-50); color: var(--color-primary); font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
  html.yl-app .yl-more-grid a:active { background: var(--green-100); }
  html.yl-app .yl-more-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
  html.yl-app .yl-more-act { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-primary); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
  html.yl-app .yl-more-act[hidden] { display: none; }
  html.yl-app .yl-more-links { margin-top: var(--sp-3); }
  html.yl-app .yl-more-links a { font-size: 0.875rem; color: var(--color-muted); }
  html.yl-app .yl-more-credit { display: block; width: 100%; margin-top: var(--sp-3); padding: var(--sp-2) 0 0; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: 0.875rem; font-weight: 600; text-align: center; cursor: pointer; }

  /* things that used to sit at the very bottom now sit above the bar */
  html.yl-app .toast, html.yl-app .yd-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* App home screen: latest news first, then quick tiles and the next event. Replaces the long website homepage inside the app. */
@media (max-width: 899px) {
  html.yl-app body.home #main > *:not(.yl-apphome) { display: none !important; }
  html.yl-app .yl-apphome { display: block; padding: var(--sp-4) var(--sp-4) var(--sp-5); background: var(--color-background); }
  .yl-apphome .ah-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-2) 0 var(--sp-3); }
  .yl-apphome h2 { font-size: 1.125rem; color: var(--color-primary); }
  .yl-apphome .ah-head a { font-size: 0.875rem; font-weight: 700; color: var(--color-secondary); text-decoration: none; }
  .yl-apphome .ah-news { display: grid; gap: var(--sp-2); }
  .yl-apphome .ah-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); text-decoration: none; }
  .yl-apphome .ah-item:first-child { grid-template-columns: minmax(0, 1fr); padding: 0 0 var(--sp-3); overflow: hidden; }
  .yl-apphome .ah-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--green-100); }
  .yl-apphome .ah-item:first-child .ah-img { aspect-ratio: 16 / 9; border-radius: 0; }
  .yl-apphome .ah-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .yl-apphome .ah-txt { display: grid; gap: 4px; min-width: 0; padding-right: var(--sp-2); }
  .yl-apphome .ah-item:first-child .ah-txt { padding: 0 var(--sp-3); }
  .yl-apphome .ah-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 0.75rem; color: var(--color-muted); }
  .yl-apphome .ah-txt b { font-size: 0.9375rem; line-height: 1.3; color: var(--color-primary); overflow-wrap: anywhere; }
  .yl-apphome .ah-item:first-child .ah-txt b { font-size: 1.125rem; }
  .yl-apphome .ah-empty { padding: var(--sp-4); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); font-size: 0.875rem; color: var(--color-muted); text-align: center; }
  .yl-apphome .ah-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .yl-apphome .ah-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: var(--sp-3) var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-primary); font: inherit; font-size: 0.875rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .yl-apphome .ah-tile:active { background: var(--green-50); }
  .yl-apphome .ah-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-100); color: var(--color-secondary); }
  .yl-apphome .ah-ic .btn-ic { width: 22px; height: 22px; }
  .yl-apphome .ah-event { display: block; padding: var(--sp-3) var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-lg); color: var(--color-text); text-decoration: none; }
  .yl-apphome .ah-event small { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-secondary); }
  .yl-apphome .ah-event b { display: block; margin: 2px 0; font-size: 0.9375rem; color: var(--color-primary); }
  .yl-apphome .ah-event span { font-size: 0.875rem; color: var(--color-muted); }
  .yl-apphome section + section { margin-top: var(--sp-4); }
}

/* app home: the site's big section padding must not apply to its blocks (it left empty gaps) */
@media (max-width: 899px) {
  html.yl-app .yl-apphome { padding-top: var(--sp-3); }
  html.yl-app .yl-apphome > section { padding: 0 !important; margin: 0; background: none; border: 0; min-height: 0; }
  html.yl-app .yl-apphome > section + section { margin-top: var(--sp-5); }
}

/* app home: a divider between sections, the photo strip and the emergency numbers */
@media (max-width: 899px) {
  html.yl-app .yl-apphome > section + section { margin-top: var(--sp-5); padding-top: var(--sp-5) !important; border-top: 1px solid var(--color-border); }
  .yl-apphome .ah-photos { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4); padding-bottom: 4px; scrollbar-width: none; }
  .yl-apphome .ah-photos::-webkit-scrollbar { display: none; }
  .yl-apphome .ah-photos a { flex: 0 0 132px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--green-100); scroll-snap-align: start; }
  .yl-apphome .ah-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .yl-apphome .ah-sos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .yl-apphome .ah-sos a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-1); border-radius: var(--radius-lg); background: var(--green-50); border: 1px solid var(--green-100); color: var(--color-primary); text-decoration: none; }
  .yl-apphome .ah-sos b { font-size: 1.125rem; line-height: 1.1; }
  .yl-apphome .ah-sos span { font-size: 0.6875rem; font-weight: 600; color: var(--color-muted); text-align: center; }
}

/* app home: urgent notice banner and the welcome card */
@media (max-width: 899px) {
  .yl-apphome .ah-alert { display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--radius-lg); background: var(--color-secondary); color: #fff; font: inherit; text-align: left; cursor: pointer; }
  .yl-apphome .ah-alert--important { background: var(--color-accent); color: var(--green-900); }
  .yl-apphome .ah-alert-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.22); }
  .yl-apphome .ah-alert-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
  .yl-apphome .ah-alert-t small { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
  .yl-apphome .ah-alert-t b { font-size: 0.9375rem; line-height: 1.3; overflow-wrap: anywhere; }
  .yl-apphome .ah-w-box { padding: var(--sp-4); border: 1px solid var(--green-100); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--green-50), var(--gold-100)); }
  .yl-apphome .ah-w-top { display: flex; align-items: center; gap: var(--sp-3); }
  .yl-apphome .ah-w-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary); color: var(--gold-light); }
  .yl-apphome .ah-w-top b { display: block; font-size: 1.125rem; color: var(--color-primary); }
  .yl-apphome .ah-w-top small { display: block; font-size: 0.75rem; font-weight: 600; color: var(--color-secondary); }
  .yl-apphome .ah-w-desc { margin: var(--sp-3) 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); }
  .yl-apphome .ah-w-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
  .yl-apphome .ah-w-chips li { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid var(--green-100); font-size: 0.75rem; color: var(--color-muted); }
  .yl-apphome .ah-w-chips b { color: var(--color-primary); font-size: 0.875rem; }
  .yl-apphome .ah-welcome.is-compact .ah-w-desc, .yl-apphome .ah-welcome.is-compact .ah-w-chips { display: none; }
  .yl-apphome .ah-welcome.is-compact .ah-w-box { padding: var(--sp-2) var(--sp-3); }
  .yl-apphome .ah-welcome.is-compact .ah-w-ic { width: 34px; height: 34px; }
}

@media (max-width: 899px) {
  .yl-apphome .ah-w-ic { background: #fff; overflow: hidden; padding: 0; border: 1px solid var(--green-100); }
  .yl-apphome .ah-w-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* ===== every page in app style (installed app, phone/tablet widths) ===== */
@media (max-width: 899px) {
  /* one smaller type scale, tighter spacing, flatter cards: the site's own tokens, so every page follows */
  html.yl-app {
    --xs: 0.6875rem; --small: 0.875rem; --body: 0.9375rem; --lead: 0.9375rem;
    --h4: 1rem; --h3: 1.125rem; --h2: 1.25rem; --h1: 1.5rem; --hero: 1.625rem;
    --lh-prose: 1.6;
    --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 56px;
    --radius-lg: 10px; --radius-xl: 12px;
    --shadow: 0 1px 2px rgba(26, 34, 30, .06); --shadow-lift: 0 1px 3px rgba(26, 34, 30, .1);
  }

  /* page header: a compact title banner, no big photo */
  html.yl-app .ph-hero { min-height: 0; }
  html.yl-app .ph-hero .ph-bg { display: none; }
  html.yl-app .ph-hero::before { background: radial-gradient(circle at 92% 0%, rgba(217,164,65,.22), transparent 46%); }
  html.yl-app .ph-hero::after { display: none; }
  html.yl-app .ph-in { padding-block: var(--sp-4) calc(var(--sp-4) + 30px); }
  html.yl-app .ph-hero h1 { font-size: var(--h1); text-shadow: none; }
  html.yl-app .ph-hero h1::after { margin-top: var(--sp-3); width: 56px; height: 3px; }
  html.yl-app .ph-lead { font-size: 0.875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html.yl-app .ph-actions { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
  html.yl-app .ph-actions .btn { width: auto; min-height: 38px; padding: 0 14px; font-size: var(--small); }

  /* news, blog and related lists: compact rows with a small photo */
  html.yl-app .news-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  html.yl-app .news-card:not(.event-card) { flex-direction: row; border-top: 0; border-left: 4px solid var(--c, var(--color-accent)); }
  html.yl-app .news-card:not(.event-card) .img-placeholder { flex: 0 0 104px; aspect-ratio: auto; min-height: 104px; height: auto; align-self: stretch; }
  html.yl-app .news-card:not(.event-card) .news-body { padding: var(--sp-3); gap: 4px; justify-content: center; }
  html.yl-app .news-card:not(.event-card) .link, html.yl-app .news-card .nl-ex, html.yl-app .news-card .news-author { display: none; }
  html.yl-app .nv-toggle { display: none !important; }
  html.yl-app .filter-bar { padding: var(--sp-3); }

  /* posts and event pages */
  html.yl-app .art-card { border-top: 0; padding: var(--sp-4); }
  html.yl-app .art-wrap { padding-bottom: var(--sp-5); }
  html.yl-app .ev-card { padding: var(--sp-4); }

  /* app bar on inner pages: back arrow and the page title replace the logo */
  html.yl-app body:not(.home) .site-header .site-logo { display: none; }
  html.yl-app .yl-back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: -8px; border: 0; border-radius: 50%; background: none; color: var(--color-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.yl-app .yl-back:active { background: var(--green-50); }
  html.yl-app .yl-bar-title { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.yl-app .yl-bar-title .lang-en, html.yl-app .yl-bar-title .lang-te { font-size: inherit; }
}

/* ===== app look, round 2: no logo, no hero banners, chip-style filters, one type scale ===== */
@media (max-width: 899px) {
  /* type scale (px at 16 root): caption 12, secondary 14, body 15, card title 16, section 18, page title 22 */
  html.yl-app {
    --xs: 0.75rem; --small: 0.875rem; --body: 0.9375rem; --lead: 1rem;
    --h4: 1rem; --h3: 1.125rem; --h2: 1.125rem; --h1: 1.375rem; --hero: 1.375rem;
    --lh-body: 1.55; --lh-prose: 1.6;
  }
  html.yl-app body { font-size: var(--body); line-height: var(--lh-body); }

  /* top bar: text only, like a native app bar (no logo) */
  html.yl-app .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: none; }
  html.yl-app .site-header::after { display: none; }
  html.yl-app .site-header .container { min-height: 52px; padding-block: 4px; gap: var(--sp-2); }
  html.yl-app .site-logo, html.yl-app body:not(.home) .site-header .site-logo { display: none !important; }
  html.yl-app .yl-bar-brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
  html.yl-app .yl-bar-brand small { margin-left: 6px; font-size: 0.875rem; font-weight: 600; color: var(--color-secondary); }
  html.yl-app .yl-bar-title { font-size: 1.125rem; }
  html.yl-app .header-actions { gap: var(--sp-2); }

  /* no big banner: the page title is in the app bar. Posts keep a flat title block */
  html.yl-app .ph-hero:not(.ph-hero--article) { display: none; }
  html.yl-app .ph-hero + main.standalone-page > :first-child, html.yl-app .ph-hero + :not(main) { margin-top: 0 !important; border-radius: 0 !important; }
  html.yl-app .ph-hero--article { display: block; min-height: 0; background: var(--color-background); color: var(--color-text); }
  html.yl-app .ph-hero--article::before { display: none; }
  html.yl-app .ph-hero--article .ph-in { padding-block: var(--sp-4) var(--sp-3); }
  html.yl-app .ph-hero--article h1 { color: var(--color-primary); font-size: var(--h1); line-height: 1.25; }
  html.yl-app .ph-hero--article h1::after { display: none; }
  html.yl-app .ph-hero--article .ph-lead, html.yl-app .ph-hero--article .ph-meta, html.yl-app .ph-hero--article .ph-meta * { color: var(--color-muted); text-shadow: none; }
  html.yl-app [class*="back-link"] { display: none !important; } /* the app bar has the back arrow */
  html.yl-app .ev-hero { padding-top: var(--sp-3); }

  /* filters: a rounded search bar and chip-style options, like Play Store / Instagram */
  html.yl-app .filter-bar, html.yl-app .ev-side .filter-bar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--sp-4); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  html.yl-app .filter-field { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; gap: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; box-shadow: none; }
  html.yl-app .filter-field:hover { border-color: var(--color-border); }
  html.yl-app .filter-field:focus-within { border-color: var(--color-primary); box-shadow: none; }
  html.yl-app .filter-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html.yl-app .filter-field .ff-ic { width: 20px; height: 20px; margin-left: 14px; background: none; color: var(--color-muted); border-radius: 0; }
  html.yl-app .filter-field:not(.filter-field--search) .ff-ic { display: none; }
  html.yl-app .filter-field .cs-btn { padding: 8px 12px 8px 16px; font-size: var(--small); font-weight: 600; }
  html.yl-app .filter-field .cs { position: relative; }
  html.yl-app .filter-field .cs-list { left: 0; right: auto; min-width: 210px; max-width: calc(100vw - 32px); top: calc(100% + 6px); }
  html.yl-app .filter-field:nth-last-of-type(-n+2) .cs-list { left: auto; right: 0; }
  html.yl-app .filter-field--search, html.yl-app .nl-bar .filter-field--search { flex: 1 1 100%; background: var(--color-surface); }
  html.yl-app .filter-field--search input { padding: 11px 16px 11px 8px; font-size: 1rem; font-weight: 500; }
  html.yl-app .filter-bar .btn { min-height: 36px; padding: 0 14px; font-size: var(--small); }
  html.yl-app .filter-bar .link, html.yl-app .nl-clear { font-size: var(--small); padding: 6px 4px; }
}

/* ===== app look, round 3: logo back in the bar, app-style heroes, no footer band, gradient background, simple filters ===== */
@media (max-width: 899px) {
  /* soft gradient instead of the square grid pattern */
  html.yl-app { --color-background: transparent; --pat-grid: linear-gradient(transparent, transparent); --pat-dots: linear-gradient(transparent, transparent); --grad-soft: linear-gradient(transparent, transparent); background-color: #F4F6EF; }
  html.yl-app body { background: linear-gradient(180deg, #E9F3EC 0%, #F5F5EC 45%, #FBF2DA 100%); background-attachment: fixed; }

  /* top bar: the logo is back on every page; inner pages add a back arrow before it */
  html.yl-app .site-logo, html.yl-app body:not(.home) .site-header .site-logo { display: flex !important; }
  html.yl-app .site-logo img { height: 34px; }
  html.yl-app .yl-bar-title, html.yl-app .yl-bar-brand { display: none !important; }
  html.yl-app .site-header .container { justify-content: space-between; }
  html.yl-app .yl-back { margin-left: -6px; margin-right: 2px; }

  /* page header: a shorter hero with the photo, rounded at the bottom, title on the photo */
  html.yl-app .ph-hero, html.yl-app .ph-hero:not(.ph-hero--article), html.yl-app .ph-hero--article { display: flex; align-items: flex-end; min-height: 168px; background: var(--grad-primary); color: #fff; border-radius: 0 0 24px 24px; }
  html.yl-app .ph-hero .ph-bg { display: block; }
  html.yl-app .ph-hero::before, html.yl-app .ph-hero--article::before { display: block; background: linear-gradient(0deg, rgba(6, 16, 11, .86) 0%, rgba(6, 16, 11, .4) 62%, rgba(6, 16, 11, .12) 100%); }
  html.yl-app .ph-in, html.yl-app .ph-hero--article .ph-in { padding-block: var(--sp-6) var(--sp-5); }
  html.yl-app .ph-hero h1, html.yl-app .ph-hero--article h1 { color: #fff; font-size: var(--h1); line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
  html.yl-app .ph-hero h1::after, html.yl-app .ph-hero--article h1::after { display: none; }
  html.yl-app .ph-hero .ph-lead, html.yl-app .ph-hero--article .ph-lead, html.yl-app .ph-hero--article .ph-meta, html.yl-app .ph-hero--article .ph-meta * { color: rgba(255, 255, 255, .92); }
  html.yl-app .ph-hero .ph-lead { -webkit-line-clamp: 2; margin-top: var(--sp-1); }
  html.yl-app .ph-hero + main.standalone-page > :first-child, html.yl-app .ph-hero + :not(main) { margin-top: 0 !important; border-radius: 0 !important; }
  html.yl-app .ph-hero + main.standalone-page > :first-child { padding-top: var(--sp-4); }

  /* no green call-to-action band at the end of pages (the tab bar is the navigation) */
  html.yl-app .cta { display: none !important; }

  /* filters: search bar on top, then the options as tidy two-column dropdowns (the phone's own picker opens) */
  html.yl-app .filter-bar, html.yl-app .ev-side .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; margin: 0 0 var(--sp-4); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  html.yl-app .filter-field { display: flex; align-items: center; flex: initial; position: relative; min-width: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: none; }
  html.yl-app .filter-field:focus-within { border-color: var(--color-primary); box-shadow: none; }
  html.yl-app .filter-field--search, html.yl-app .nl-bar .filter-field--search { grid-column: 1 / -1; order: -1; }
  html.yl-app .filter-field .ff-ic { flex: none; width: 20px; height: 20px; margin-left: 14px; background: none; color: var(--color-muted); border-radius: 0; }
  html.yl-app .filter-field:not(.filter-field--search) .ff-ic { display: none; }
  html.yl-app .filter-field--search input { width: 100%; padding: 12px 14px 12px 10px; font-size: 1rem; font-weight: 500; }
  html.yl-app .filter-field .cs { display: block; position: static; width: 100%; }
  html.yl-app .filter-field .cs-btn, html.yl-app .filter-field .cs-list { display: none !important; }
  html.yl-app .filter-field select.cs-native, html.yl-app .filter-field select { position: static; display: block; opacity: 1; pointer-events: auto; width: 100%; height: auto; min-height: 44px; padding: 10px 32px 10px 14px; border: 0; border-radius: 12px; background-color: transparent; font: inherit; font-size: var(--small); font-weight: 600; color: var(--color-text); text-overflow: ellipsis; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2356625B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
  html.yl-app .filter-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html.yl-app .filter-bar > .link, html.yl-app .filter-bar > .btn, html.yl-app .nl-clear { grid-column: 1 / -1; justify-self: start; font-size: var(--small); padding: 4px 2px; }
}

/* ===== app home, redesigned: photo hero with search, nine colour tiles, then the feed ===== */
@media (max-width: 899px) {
  html.yl-app .yl-apphome { padding: 0; background: none; }
  html.yl-app .ah-hero { position: relative; display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4) 56px; color: #fff; background: linear-gradient(0deg, rgba(6,16,11,.78) 0%, rgba(6,16,11,.38) 55%, rgba(6,16,11,.18) 100%), var(--ah-img) center / cover no-repeat, var(--grad-primary); border-radius: 0 0 28px 28px; }
  .yl-apphome .ah-hello { margin: 0; font-size: 0.875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light); }
  .yl-apphome .ah-name { margin: 2px 0 0; color: #fff; font-size: 2.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
  [data-lang="te"] .yl-apphome .ah-name { font-size: 2.25rem; line-height: 1.2; }
  .yl-apphome .ah-sub { margin: var(--sp-2) 0 var(--sp-4); max-width: 30ch; font-size: 0.9375rem; line-height: 1.45; color: rgba(255,255,255,.95); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
  .yl-apphome .ah-search { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); background: #fff; color: var(--color-muted); border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.22); }
  .yl-apphome .ah-search input { flex: 1; min-width: 0; padding: 13px 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--color-text); }
  .yl-apphome .ah-search input:focus { outline: none; }
  .yl-apphome .ah-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
  .yl-apphome .ah-chips li { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); font-size: 0.75rem; color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .yl-apphome .ah-chips b { font-size: 0.875rem; }

  /* tiles overlap the hero like a card */
  .yl-apphome .ah-gridwrap { position: relative; z-index: 2; margin: -38px var(--sp-3) 0; }
  .yl-apphome .ah-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-1); padding: var(--sp-4) var(--sp-2); background: var(--color-surface); border-radius: 20px; box-shadow: 0 8px 26px rgba(26, 34, 30, .14); }
  .yl-apphome .ah-gt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; border: 0; background: none; color: var(--color-text); font: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .yl-apphome .ah-gt:active .ah-gi { transform: scale(.94); }
  .yl-apphome .ah-gi { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; box-shadow: 0 4px 10px rgba(26, 34, 30, .2); transition: transform .12s ease; }
  .yl-apphome .ah-gi .btn-ic { width: 26px; height: 26px; }
  .yl-apphome .ah-gl { font-size: 0.75rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--color-primary); overflow-wrap: anywhere; }
  .ah-g-lotus { background: linear-gradient(135deg, #C94A80, #A3305F); }
  .ah-g-green { background: linear-gradient(135deg, #2F7A58, #1B4D3A); }
  .ah-g-marigold { background: linear-gradient(135deg, #F29A33, #D9741A); }
  .ah-g-terra { background: linear-gradient(135deg, #C26A44, #A8512D); }
  .ah-g-tank { background: linear-gradient(135deg, #3A93A6, #2A7A8C); }
  .ah-g-gold { background: linear-gradient(135deg, #E6B04E, #C98A2E); }
  .ah-g-indigo { background: linear-gradient(135deg, #4F6DB0, #2A3F7F); }
  .ah-g-brown { background: linear-gradient(135deg, #9A6340, #7A4A2B); }
  .ah-g-deep { background: linear-gradient(135deg, #3C7A5A, #256349); }

  html.yl-app .ah-body { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  html.yl-app .ah-body > section { padding: 0; }
  html.yl-app .ah-body > section + section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }
}

/* ===== app home, round 2: the hero carries the logo; no ticker; no top bar on Home ===== */
@media (max-width: 899px) {
  html.yl-app .ticker { display: none !important; }
  html.yl-app body.home .site-header { display: none; }
  html.yl-app .ah-hero { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .yl-apphome .ah-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin-bottom: var(--sp-5); }
  .yl-apphome .ah-logo { justify-self: center; display: grid; place-items: center; padding: 6px 20px; background: rgba(255, 255, 255, .94); border-radius: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
  .yl-apphome .ah-logo img { height: 44px; width: auto; display: block; }
  .yl-apphome .ah-bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; }
  .yl-apphome .ah-bell b { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--color-secondary); color: #fff; font-size: 0.6875rem; line-height: 18px; text-align: center; }
  .yl-apphome .ah-hero { padding-bottom: 52px; }
}

/* ===== app home header like the mockup: the logo straight on the photo, in white, with a dark fade behind it ===== */
@media (max-width: 899px) {
  html.yl-app .ah-hero { background: linear-gradient(180deg, rgba(6, 16, 11, .82) 0%, rgba(6, 16, 11, .45) 22%, rgba(6, 16, 11, .22) 45%, rgba(6, 16, 11, .45) 70%, rgba(6, 16, 11, .86) 100%), var(--ah-img) center / cover no-repeat, var(--grad-primary); }
  .yl-apphome .ah-logo { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .yl-apphome .ah-logo img { height: 56px; width: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); }
  .yl-apphome .ah-top { margin-bottom: var(--sp-6); }
}

@media (max-width: 899px) {
  html.yl-app body { min-height: 100vh; }
  html.yl-app .news-card.nl-card.is-feature .news-meta .yl-upd-badge { display: none; }
}

/* ===== app home, mock redesign: photo behind the glass tiles, glass search, readable news cards, rounded tab bar ===== */
@media (max-width: 899px) {
  html.yl-app .ah-hero { padding-bottom: var(--sp-5); background: linear-gradient(180deg, rgba(6, 16, 11, .5) 0%, rgba(6, 16, 11, .1) 24%, rgba(6, 16, 11, 0) 42%, rgba(6, 16, 11, .3) 100%), var(--ah-img) center / cover no-repeat, var(--grad-primary); border-radius: 0 0 30px 30px; }
  .yl-apphome .ah-hello, .yl-apphome .ah-name, .yl-apphome .ah-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

  /* glass search */
  .yl-apphome .ah-search { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 18px rgba(0, 0, 0, .18); color: var(--color-primary); }
  .yl-apphome .ah-search input { color: var(--color-text); }
  .yl-apphome .ah-search input::placeholder { color: rgba(26, 34, 30, .62); }
  .yl-apphome .ah-mic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--color-primary); cursor: pointer; }
  .yl-apphome .ah-mic[hidden] { display: none; }

  /* glass tiles inside the photo */
  .yl-apphome .ah-hero .ah-gridwrap { position: static; margin: var(--sp-4) 0 0; }
  .yl-apphome .ah-hero .ah-grid { gap: 8px; padding: 10px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .6); border-radius: 24px; box-shadow: 0 8px 26px rgba(0, 0, 0, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .yl-apphome .ah-hero .ah-gt { gap: 6px; padding: 12px 4px 10px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; }
  .yl-apphome .ah-hero .ah-gi { width: 60px; height: 60px; }
  .yl-apphome .ah-hero .ah-gl { font-size: 0.8125rem; font-weight: 700; color: #123b2b; }

  /* latest news: clear cards */
  html.yl-app .ah-body { padding-top: var(--sp-5); }
  .yl-apphome .ah-head h2 { font-size: 1.375rem; }
  .yl-apphome .ah-head a { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; background: rgba(27, 77, 58, .1); color: var(--color-primary); font-size: 0.875rem; }
  .yl-apphome .ah-news { gap: 12px; }
  .yl-apphome .ah-item, .yl-apphome .ah-item:first-child { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: stretch; padding: 10px; background: var(--color-surface); border: 0; border-radius: 18px; box-shadow: 0 2px 10px rgba(26, 34, 30, .08); overflow: visible; }
  .yl-apphome .ah-item .ah-img, .yl-apphome .ah-item:first-child .ah-img { aspect-ratio: auto; min-height: 112px; height: 100%; border-radius: 14px; }
  .yl-apphome .ah-item .ah-txt, .yl-apphome .ah-item:first-child .ah-txt { gap: 4px; padding: 0 40px 0 0; align-content: start; }
  .yl-apphome .ah-item .ah-txt b, .yl-apphome .ah-item:first-child .ah-txt b { font-size: 1rem; line-height: 1.3; }
  .yl-apphome .ah-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.875rem; line-height: 1.4; color: var(--color-muted); }
  .yl-apphome .ah-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.8125rem; color: var(--color-muted); }
  .yl-apphome .ah-go { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff; }

  /* floating, rounded tab bar with a filled active tab (all app pages) */
  html.yl-app .yl-tabbar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; border-top: 0; box-shadow: 0 -4px 22px rgba(26, 34, 30, .12); gap: 4px; }
  html.yl-app .yl-tabbar a, html.yl-app .yl-tabbar button { min-height: 56px; border-radius: 18px; }
  html.yl-app .yl-tabbar .is-on { background: var(--color-primary); color: #fff; }
  html.yl-app .yl-tabbar .is-on::before { display: none; }
  html.yl-app .yl-tabbar a:active, html.yl-app .yl-tabbar button:active { background: var(--green-50); }
  html.yl-app .yl-tabbar .is-on:active { background: var(--color-primary-light); }
}

/* ===== News and Blog page in the app (mock design): photo header, glass search, chips, rounded cards, filter drawer ===== */
@media (max-width: 899px) {
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .site-header, html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ticker { display: none; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* photo header with the title and description from the page */
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero { display: block; position: relative; overflow: hidden; }

  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-in { position: relative; z-index: 2; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero h1 { color: #fff; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero h1::after { display: none; }
  
  html.yl-app .nl-top { position: absolute; left: var(--sp-4); right: var(--sp-4); z-index: 4; display: grid; align-items: center; }
  html.yl-app .nl-gb { position: relative; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.yl-app .nl-bell i { position: absolute; top: 8px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; border: 2px solid rgba(255, 255, 255, .9); }
  html.yl-app .nl-logo { justify-self: center; }
  html.yl-app .nl-logo img { display: block; width: auto; }
  /* the list starts over the bottom of the photo */
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero + main.standalone-page { position: relative; z-index: 3; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero + main.standalone-page > :first-child { padding-top: 0; }

  /* search, filter button, chips */
  
  html.yl-app .nl-asearch { flex: 1; min-width: 0; display: flex; align-items: center; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; color: var(--color-primary); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  html.yl-app .nl-asearch input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--color-text); }
  html.yl-app .nl-asearch input:focus { outline: none; }
  html.yl-app .nl-mic { display: grid; place-items: center; flex: none; border: 0; background: none; color: var(--color-primary); cursor: pointer; }
  html.yl-app .nl-mic[hidden] { display: none; }
  html.yl-app .nl-fbtn { position: relative; flex: none; display: inline-flex; align-items: center; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.yl-app .nl-fbtn .nl-fab-dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); border: 2px solid #1B4D3A; }
  html.yl-app .nl-fab-dot[hidden] { display: none; }
  html.yl-app .nl-chips { display: flex; overflow-x: auto; margin: 0 calc(-1 * var(--sp-4)) var(--sp-2); padding: 2px var(--sp-4) 8px; scrollbar-width: none; }
  html.yl-app .nl-chips::-webkit-scrollbar { display: none; }
  html.yl-app .nl-chip { flex: none; display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(255, 255, 255, .68); color: var(--color-primary); font: inherit; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  
  html.yl-app .nl-chip.is-on { background: linear-gradient(135deg, #2F7A58, #1B4D3A); border-color: transparent; color: #fff; }
  html.yl-app .nl-fab, html.yl-app .nl-count, html.yl-app .nv-toggle { display: none !important; }

  /* total, sort, list / grid */
  html.yl-app .nl-row { display: flex; align-items: center; }
  html.yl-app .nl-total { min-width: 0; }
  
  html.yl-app .nl-sortw { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .7); color: var(--color-primary); }
  html.yl-app .nl-sortw select { border: 0; background: none; font: inherit; font-weight: 600; color: var(--color-primary); -webkit-appearance: none; appearance: none; padding-right: 4px; }
  html.yl-app .nl-vt { display: inline-flex; background: rgba(255, 255, 255, .7); }
  html.yl-app .nl-vt button { display: grid; place-items: center; border: 0; background: none; color: var(--color-muted); cursor: pointer; }
  html.yl-app .nl-vt button.is-on { background: var(--color-primary); color: #fff; }

  /* the cards */
  
  html.yl-app .nl .news-card.nl-card { position: relative; display: grid; align-items: stretch; border: 0 !important; background: rgba(255, 255, 255, .9) !important; background-image: none !important; box-shadow: 0 2px 12px rgba(26, 34, 30, .08); transform: none !important; overflow: visible; }
  html.yl-app .nl .news-card.nl-card .img-placeholder { position: relative; display: block; flex: none; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; overflow: hidden; align-self: stretch; }
  html.yl-app .nl .news-card.nl-card .img-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .nl .news-card.nl-card.is-feature .img-placeholder::before { content: "LATEST"; position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: var(--color-secondary); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: .05em; }
  html[data-lang="te"] .nl .news-card.nl-card.is-feature .img-placeholder::before { content: "తాజా"; }
  html.yl-app .nl .news-card.nl-card .news-body { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 2px 2px 40px 0; background: none; color: var(--color-text); }
  html.yl-app .nl .news-card.nl-card .news-meta { order: 0; display: flex; align-items: center; justify-content: space-between; margin: 0; color: var(--color-muted); }
  html.yl-app .nl .news-card.nl-card .news-meta .badge { display: inline-flex; border-radius: 999px; background: #FCE9D6; color: #B5601A; font-weight: 700; letter-spacing: 0; text-transform: none; }
  html.yl-app .nl .news-card.nl-card[data-ci="0"] .news-meta .badge { background: #FCE9D6; color: #B5601A; }
  html.yl-app .nl .news-card.nl-card[data-ci="1"] .news-meta .badge { background: #DDF0E3; color: #1F6B45; }
  html.yl-app .nl .news-card.nl-card[data-ci="2"] .news-meta .badge { background: #F9DCE0; color: #B0243A; }
  html.yl-app .nl .news-card.nl-card[data-ci="3"] .news-meta .badge { background: #E7DFF7; color: #5B3AA6; }
  html.yl-app .nl .news-card.nl-card[data-ci="4"] .news-meta .badge { background: #D9EDF2; color: #1F6F82; }
  html.yl-app .nl .news-card.nl-card .news-meta time { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  html.yl-app .nl .news-card.nl-card .news-meta time::before { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356625B' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4m8-4v4'/%3E%3C/svg%3E") center / contain no-repeat; }
  html.yl-app .nl .news-card.nl-card .news-body h3 { order: 1; margin: 0; line-height: 1.3; color: var(--color-primary); }
  html.yl-app .nl .news-card.nl-card .news-body h3 a { color: inherit; text-shadow: none; }
  html.yl-app .nl .news-card.nl-card .nl-ex { order: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; line-height: 1.4; color: var(--color-muted); }
  html.yl-app .nl .news-card.nl-card .news-author, html.yl-app .nl .news-card.nl-card .link { display: none; }
  html.yl-app .nl .news-card.nl-card::after { content: ""; position: absolute; border-radius: 50%; background: #1B4D3A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat; }
  html.yl-app .nl .news-card.nl-card::before { display: none; }
  html.yl-app .nl-more, html.yl-app #nl-more { margin-top: var(--sp-3); }

  /* grid view */
  
  html.yl-app .nl[data-av="grid"] .news-card.nl-card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html.yl-app .nl[data-av="grid"] .news-card.nl-card .img-placeholder { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  html.yl-app .nl[data-av="grid"] .news-card.nl-card .news-body { padding-bottom: 8px; }
  html.yl-app .nl[data-av="grid"] .news-card.nl-card .nl-ex, html.yl-app .nl[data-av="grid"] .news-card.nl-card::after { display: none; }
  html.yl-app .nl[data-av="grid"] .news-card.nl-card .news-body h3 { font-size: 0.9375rem; }
  html.yl-app .nl[data-av="grid"] .news-card.nl-card .news-meta { flex-wrap: wrap; }

  /* the filter drawer */
  html.yl-app .nl-sheet-bg { display: block; position: fixed; inset: 0; z-index: 265; background: rgba(15, 42, 33, .5); backdrop-filter: blur(1px); }
  html.yl-app .nl-sheet-bg[hidden] { display: none; }
  html.yl-app .nl-side { position: fixed; top: 0; bottom: 0; left: auto; right: 0; z-index: 270; width: min(88vw, 360px); height: 100%; max-height: none; display: flex; flex-direction: column; padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-radius: 26px 0 0 26px; background: linear-gradient(180deg, #F2F8F3 0%, #FBF6E6 100%); box-shadow: -10px 0 34px rgba(0, 0, 0, .22); transform: translateX(105%); transition: transform .26s ease, visibility 0s linear .26s; visibility: hidden; }
  html.yl-app .nl-side.is-open { transform: none; visibility: visible; transition: transform .26s ease; }
  html.yl-app .nl-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: var(--sp-4); }
  html.yl-app .nl-sh-t { display: flex; align-items: center; gap: 10px; }
  html.yl-app .nl-sh-ic { display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: #fff; }
  html.yl-app .nl-sh-t b { display: block; color: var(--color-primary); }
  html.yl-app .nl-sh-t small { display: block; font-size: 0.8125rem; color: var(--color-muted); }
  html.yl-app .nl-sheet-head > button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(27, 77, 58, .1); color: var(--color-primary); cursor: pointer; }
  html.yl-app .nl-side .nl-bar { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; overflow-y: auto; background: none; border: 0; box-shadow: none; }
  html.yl-app .nl-side .filter-field--search { display: none; }
  html.yl-app .nl-side .filter-field { display: block; background: none; border: 0; padding: 0; border-radius: 0; }
  html.yl-app .nl-side .filter-field .ff-ic { display: none; }
  html.yl-app .nl-side .filter-field label { position: static; width: auto; height: auto; clip-path: none; display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-primary); }
  html.yl-app .nl-side .filter-field select.cs-native, html.yl-app .nl-side .filter-field select { min-height: 48px; padding: 12px 36px 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background-color: #fff; }
  html.yl-app .nl-side .nl-clear { display: none; }
  html.yl-app .nl-sheet-btns { display: grid; gap: 10px; margin-top: var(--sp-3); }
  html.yl-app .nl-sheet-btns .btn { width: 100%; justify-content: center; border-radius: 999px; }
  html.yl-app .nl-sheet-btns .btn-primary { background: linear-gradient(135deg, #2F7A58, #1B4D3A); color: #fff; }
  html.yl-app .nl-sheet-btns .btn-secondary { background: #fff; color: var(--color-primary); border: 1px solid var(--color-border); }
}

/* ===== News page in the app: fixes (no hero buttons, one-line chips, tidy total row, filter drawer like the mock) ===== */
@media (max-width: 899px) {
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-actions { display: none !important; }
  html.yl-app .nl-chips { flex-wrap: nowrap !important; }
  html.yl-app .nl-chip { white-space: nowrap; }

  html.yl-app .nl-total { flex: none; white-space: nowrap; }
  html.yl-app .nl-total * { white-space: nowrap; }
  html.yl-app .nl-sortw { flex: 1; min-width: 0; justify-content: space-between; }
  html.yl-app .nl-sortw select { flex: 1; width: 100%; min-width: 0; text-overflow: ellipsis; }

  /* drawer: no duplicate search, original dropdowns replaced by a tick list (category) and chips (month) */
  html.yl-app .nl-side .filter-field.filter-field--search { display: none !important; }
  html.yl-app .nl-side .filter-field .cs, html.yl-app .nl-side .filter-field select { display: none !important; }
  html.yl-app .nl-side .filter-bar.nl-bar { display: flex; flex-direction: column; gap: var(--sp-5); }
  html.yl-app .nl-catlist { display: grid; overflow: hidden; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; }
  html.yl-app .nl-ci { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--color-border); background: none; font: inherit; color: var(--color-text); text-align: left; cursor: pointer; }
  html.yl-app .nl-ci:first-child { border-top: 0; }
  html.yl-app .nl-ci::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid #B7C4BC; border-radius: 6px; }
  html.yl-app .nl-ci.is-on::before { border-color: #1B4D3A; background: #1B4D3A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
  html.yl-app .nl-monlist { display: flex; flex-wrap: wrap; gap: 8px; }
  html.yl-app .nl-mi { border: 1px solid var(--color-border); border-radius: 999px; background: #fff; font: inherit; font-weight: 600; color: var(--color-primary); cursor: pointer; }
  html.yl-app .nl-mi.is-on { border-color: #1B4D3A; background: #1B4D3A; color: #fff; }
}

/* News page in the app: last touches */
@media (max-width: 899px) {
  html.yl-app .nl-sheet-done { display: inline-flex; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero::before { background: linear-gradient(180deg, rgba(6, 16, 11, .62) 0%, rgba(6, 16, 11, .42) 42%, rgba(6, 16, 11, .28) 62%, rgba(6, 16, 11, .5) 100%); }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero h1, html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero .ph-lead { text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
  
  html.yl-app .nl .news-card.nl-card .news-meta { flex-wrap: wrap; gap: 4px 8px; }
  html.yl-app .nl .news-card.nl-card .news-meta .badge { white-space: nowrap; }
  html.yl-app .nl .news-card.nl-card .news-meta time { margin-left: 0; }
  
}

/* ===== News page in the app: calm gradient header (no photo, no animation) and smaller, consistent controls ===== */
@media (max-width: 899px) {
  /* header: plain gradient, nothing moves */
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero, html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero *, html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero::before, html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero::after { animation: none !important; transition: none !important; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero .ph-in > *, html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero h1, html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero .ph-lead { opacity: 1 !important; transform: none !important; filter: none !important; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero .ph-bg { display: none !important; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero { min-height: 0; background: radial-gradient(circle at 92% 0%, rgba(217, 164, 65, .3) 0%, rgba(217, 164, 65, 0) 46%), linear-gradient(150deg, #0E3326 0%, #1B4D3A 52%, #2C6F52 100%); }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero::before { display: none !important; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero::after { top: auto; bottom: 0; height: 34%; background: linear-gradient(0deg, #E9F3EC 0%, rgba(233, 243, 236, 0) 100%); }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-in { padding: calc(env(safe-area-inset-top, 0px) + 68px) var(--sp-4) 74px; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero h1 { font-size: 1.5rem; line-height: 1.2; text-shadow: none; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero .ph-lead { margin-top: 6px; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, .9); text-shadow: none; }
  html.yl-app .nl-top { top: calc(env(safe-area-inset-top, 0px) + 10px); grid-template-columns: 40px minmax(0, 1fr) 40px; }
  html.yl-app .nl-gb { width: 40px; height: 40px; }
  html.yl-app .nl-logo img { height: 38px; filter: brightness(0) invert(1); }

  /* controls: 44 px for search and filters, 34 px for chips, sort and view switch */
  
  html.yl-app .nl-asearch { padding: 0 4px 0 14px; gap: 6px; box-shadow: 0 2px 10px rgba(26, 34, 30, .08); }
  html.yl-app .nl-asearch input { padding: 11px 0; font-size: 0.9375rem; }
  html.yl-app .nl-mic { width: 34px; height: 34px; }
  html.yl-app .nl-fbtn { height: 44px; padding: 0 14px; gap: 6px; font-size: 0.875rem; }
  html.yl-app .nl-fbtn .btn-ic { width: 18px; height: 18px; }
  html.yl-app .nl-chips { gap: 6px; margin-bottom: 4px; padding-bottom: 6px; }
  html.yl-app .nl-chip { gap: 6px; padding: 6px 12px; font-size: 0.8125rem; box-shadow: none; }
  html.yl-app .nl-chip .btn-ic { width: 16px; height: 16px; }
  html.yl-app .nl-row { gap: 6px; margin-bottom: 10px; }
  
  html.yl-app .nl-sortw { height: 34px; padding: 0 8px; border-radius: 10px; }
  html.yl-app .nl-sortw select { font-size: 0.8125rem; }
  html.yl-app .nl-vt { padding: 2px; border-radius: 10px; }
  html.yl-app .nl-vt button { width: 32px; height: 30px; border-radius: 8px; }
  html.yl-app .nl-vt .btn-ic { width: 16px; height: 16px; }

  /* cards */
  
  html.yl-app .nl .news-card.nl-card { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: 18px; }
  html.yl-app .nl .news-card.nl-card .img-placeholder { border-radius: 12px; }
  html.yl-app .nl .news-card.nl-card .news-body { gap: 4px; }
  html.yl-app .nl .news-card.nl-card .news-body h3 { font-size: 0.9375rem; }
  html.yl-app .nl .news-card.nl-card .nl-ex { font-size: 0.8125rem; }
  html.yl-app .nl .news-card.nl-card .news-meta { font-size: 0.75rem; }
  html.yl-app .nl .news-card.nl-card .news-meta .badge { padding: 2px 10px; font-size: 0.6875rem; }
  html.yl-app .nl .news-card.nl-card .img-placeholder::before, html.yl-app .nl .news-card.nl-card.is-feature .img-placeholder::before { padding: 2px 8px; font-size: 0.625rem; }
  html.yl-app .nl .news-card.nl-card::after { right: 10px; bottom: 10px; width: 32px; height: 32px; background-size: 16px; }

  /* drawer controls match */
  html.yl-app .nl-sheet-btns .btn { min-height: 44px; font-size: 0.875rem; }
  html.yl-app .nl-sh-ic { width: 36px; height: 36px; }
  html.yl-app .nl-sh-t b { font-size: 1rem; }
  html.yl-app .nl-ci { padding: 10px 14px; font-size: 0.875rem; }
  html.yl-app .nl-mi { padding: 6px 12px; font-size: 0.8125rem; }
}

/* News in the app: search and Filters sit on the gradient, categories live only in the drawer, gold Filters button, full description */
@media (max-width: 899px) {
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .nl-chips { display: none !important; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero { border-radius: 0 0 26px 26px; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero::after { display: none !important; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-in { padding-bottom: 94px; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero .ph-lead { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: none; }
  html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .ph-hero + main.standalone-page { margin-top: -66px; }
  html.yl-app .nl-fbtn { background: linear-gradient(135deg, #E8B954, #D9A441); color: #2B1F05; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
  html.yl-app .nl-fbtn .btn-ic { color: #2B1F05; }
}
html.yl-app body:is(:has(#nl), :has(#ys-grid), :has(#ev-form)) .nl-sec { background: none !important; }

/* News in the app: icon-only toolbar (search, filters, view), sort lives in the drawer, titles only */
@media (max-width: 899px) {
  html.yl-app .nl-appbar { display: flex; flex-direction: column; gap: 8px; }
  html.yl-app .nl-acts { display: flex; align-items: center; gap: 8px; }
  html.yl-app .nl-ibtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 50%; }
  html.yl-app .nl-sbtn { border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .2); color: #fff; font: inherit; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent; }
  html.yl-app .nl-fbtn .btn-ic, html.yl-app .nl-sbtn .btn-ic { width: 20px; height: 20px; }
  html.yl-app .nl-appbar .nl-vt { background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
  html.yl-app .nl-appbar .nl-asearch { display: none; width: 100%; background: #fff; }
  html.yl-app .nl-appbar.is-search .nl-asearch { display: flex; }
  html.yl-app .nl-row { justify-content: flex-start; }
  html.yl-app .nl .news-card.nl-card .nl-ex { display: none !important; }
  html.yl-app .nl .news-card.nl-card .img-placeholder { min-height: 96px; }
  html.yl-app .nl .news-card.nl-card .news-body { padding-bottom: 8px; }
  html.yl-app .nl-side .filter-field--sort { display: block; }
}

/* News in the app: the total is a small pill under the header */
@media (max-width: 899px) {
  
  html.yl-app .nl-total { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
  
}
html.yl-app .nl .news-card.nl-card .news-body h3 { padding-right: 38px; }

/* News in the app: the total pill sits in the header, level with the icon buttons */
@media (max-width: 899px) {
  html.yl-app .nl-row { position: relative; z-index: 1; margin: -35px 0 43px; pointer-events: none; }
  html.yl-app .nl-total { text-transform: capitalize; border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .18); box-shadow: none; color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  html.yl-app .nl-total b { color: #fff; }
}

/* News in the app: the total pill is part of the icon row, same height as the buttons */
@media (max-width: 899px) {
  html.yl-app .nl-appbar { align-items: stretch; margin-bottom: 34px; }
  html.yl-app .nl-acts { width: 100%; }
  html.yl-app .nl-acts .nl-total { margin-right: auto; height: 44px; padding: 0 16px; font-size: 0.8125rem; }
}

/* ===== Single News in the app: green header, photo card, title block, tabs, share bar (mock design) ===== */
@media (max-width: 899px) {
  html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .site-header, html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ticker { display: none; }
  html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero.ph-hero--article, html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article * { animation: none !important; }
  html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article { position: relative; display: block; min-height: 0; overflow: visible; margin-bottom: 120px; background: radial-gradient(circle at 92% 0%, rgba(217, 164, 65, .28) 0%, rgba(217, 164, 65, 0) 46%), linear-gradient(160deg, #0E3326 0%, #1B4D3A 55%, #2C6F52 100%); border-radius: 0 0 28px 28px; }
  html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article::before, html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article::after, html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article .ph-bg { display: none !important; }
  html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article .ph-in { padding: calc(env(safe-area-inset-top, 0px) + 66px) var(--sp-4) 0; }
  html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article .ph-meta, html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article .ph-title, html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article .ph-lead, html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article .ph-actions { display: none; }
  html.yl-app .yl-sa-photo { position: relative; z-index: 2; height: 224px; margin: 0 0 -112px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .75); border-radius: 22px; background: #cfe0d4; box-shadow: 0 10px 28px rgba(14, 51, 38, .28); }
  html.yl-app .yl-sa-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .yl-sa-cat { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 244, 222, .95); color: #8A5A12; font-size: 0.75rem; font-weight: 700; }
  html.yl-app .yl-sa-cat .btn-ic { width: 14px; height: 14px; }
  html.yl-app .yl-sa-count { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 12px; background: rgba(14, 20, 17, .62); color: #fff; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
  html.yl-app .yl-sa-count[hidden], html.yl-app .yl-sa-tabs [hidden] { display: none; }

  html.yl-app .yl-sa-head { padding: 0 var(--sp-4); }
  html.yl-app .yl-sa-title { margin: 0 0 8px; color: var(--color-primary); font-size: 1.375rem; font-weight: 800; line-height: 1.25; }
  html.yl-app .yl-sa-lead { margin: 0 0 12px; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.5; }
  html.yl-app .yl-sa-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  html.yl-app .yl-sa-date { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: 0.8125rem; }
  html.yl-app .yl-sa-date .btn-ic { width: 16px; height: 16px; }
  html.yl-app .yl-sa-fs { display: inline-flex; gap: 6px; }
  html.yl-app .yl-sa-fs button { min-width: 38px; height: 34px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }

  html.yl-app .yl-sa-tabs { display: flex; gap: 8px; margin: 0 0 12px; padding: 2px var(--sp-4) 6px; overflow-x: auto; scrollbar-width: none; }
  html.yl-app .yl-sa-tabs::-webkit-scrollbar { display: none; }
  html.yl-app .yl-sa-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
  html.yl-app .yl-sa-tabs button .btn-ic { width: 16px; height: 16px; }
  html.yl-app .yl-sa-tabs button.is-on { border-color: #1B4D3A; background: #1B4D3A; color: #fff; box-shadow: 0 2px 8px rgba(27, 77, 58, .3); }

  /* one panel at a time */
  html.yl-app .yl-sa .art-card, html.yl-app .yl-sa .yl-updates, html.yl-app .yl-sa .yl-photos, html.yl-app .yl-sa .related-stories { display: none; }
  html.yl-app .yl-sa[data-act="details"] .art-card, html.yl-app .yl-sa[data-act="updates"] .yl-updates, html.yl-app .yl-sa[data-act="photos"] .yl-photos, html.yl-app .yl-sa[data-act="more"] .related-stories { display: block; }
  html.yl-app .yl-sa .entry-content { font-size: calc(1rem * var(--yl-fs, 1)); }
  html.yl-app .yl-ph-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.yl-app .yl-ph-grid .yl-tile { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; }
  html.yl-app .yl-ph-grid .yl-tile img { width: 100%; height: 100%; object-fit: cover; }

  html.yl-app .yl-sa-share { display: flex; align-items: center; gap: 8px; margin: 16px var(--sp-4); padding: 10px 12px 10px 16px; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px rgba(26, 34, 30, .08); }
  html.yl-app .yl-sa-sh-l { margin-right: auto; color: var(--color-primary); font-size: 0.875rem; font-weight: 700; }
  html.yl-app .yl-sh { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
  html.yl-app .yl-sh .btn-ic { width: 20px; height: 20px; }
  html.yl-app .yl-sh--wa { background: #25D366; }
  html.yl-app .yl-sh--fb { background: #1877F2; }
  html.yl-app .yl-sh--x { background: #14171A; }
  html.yl-app .yl-sh--cp { background: #6B7C74; }
  html.yl-app .yl-sh--cp.is-ok { background: #1B4D3A; }
}
@media (max-width: 899px) {
  html.yl-app .yl-sa-photo, html.yl-app .yl-sa-head { display: block; }
}
@media (max-width: 899px) {
  html.yl-app body:is(.single-village_news, .single-post, .single-village_event, .single-village_course) .ph-hero--article { border-radius: 0; background: radial-gradient(circle at 92% 0%, rgba(217, 164, 65, .24) 0%, rgba(217, 164, 65, 0) 46%), linear-gradient(180deg, #0E3326 0%, #1B4D3A 42%, rgba(44, 111, 82, .55) 72%, rgba(233, 243, 236, 0) 100%); }
}

@media (max-width: 899px) {
  html.yl-app .yl-sa-by { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; color: var(--color-muted); font-size: 0.8125rem; }
  html.yl-app .yl-sa-by span { display: inline-flex; align-items: center; gap: 6px; }
  html.yl-app .yl-sa-by .btn-ic { width: 16px; height: 16px; }
  html.yl-app .yl-sa .cta { display: none; }
}

/* ===== Store in the app: same header, toolbar, cards and filter drawer as News, a + button and a bottom-sheet form ===== */
@media (max-width: 899px) {
  html.yl-app .ys-sec { padding: 0 0 var(--sp-5); background: none; }
  html.yl-app .ys-sec .nl-appbar { position: relative; z-index: 2; margin-top: -66px; }
  html.yl-app .ys-mainc > h2, html.yl-app .ys-count, html.yl-app .ys-view, html.yl-app .ys-side .nl-clear { display: none; }
  html.yl-app .ys-layout { display: block; }
  html.yl-app .ys-mainc { padding: 0; }
  html.yl-app .yellanda-store-page .ys-grid { gap: 10px; }
  html.yl-app .yellanda-store-page .ys-grid.is-list { grid-template-columns: minmax(0, 1fr); }
  html.yl-app .yellanda-store-page .ys-grid.is-list .ys-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(26, 34, 30, .07); transform: none; }
  html.yl-app .yellanda-store-page .ys-grid.is-list .ys-img { width: 100px; height: 100px; flex: none; border-radius: 12px; }
  html.yl-app .yellanda-store-page .ys-grid.is-list .ys-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; }
  html.yl-app .yellanda-store-page .ys-grid.is-list .ys-snip { display: none; }
  html.yl-app .yellanda-store-page .ys-grid.is-list .ys-detail { grid-column: 1 / -1; margin: 4px 0 0; }
  html.yl-app .yellanda-store-page .ys-grid:not(.is-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.yl-app .yellanda-store-page .ys-card { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(26, 34, 30, .07); overflow: hidden; }
  html.yl-app .ys-tag { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #E3F0E7; color: var(--color-primary); font-size: 0.6875rem; font-weight: 700; }
  html.yl-app .ys-body h3 { margin: 0; font-size: 0.9375rem; line-height: 1.3; color: var(--color-primary); }
  html.yl-app .ys-price { margin: 0; color: #1B4D3A; font-size: 0.9375rem; font-weight: 800; }
  html.yl-app .ys-meta { margin: 0; color: var(--color-muted); font-size: 0.75rem; }
  html.yl-app .ys-contact { margin-top: 4px; }
  html.yl-app .ys-contact .ys-report { display: none; }
  html.yl-app .ys-contact .ys-open { min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 0.8125rem; }

  html.yl-app .ys-fab { display: inline-flex; align-items: center; justify-content: center; position: fixed; left: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); z-index: 235; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #E8B954, #D9A441); color: #2B1F05; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); -webkit-tap-highlight-color: transparent; }
  html.yl-app .ys-fab .btn-ic { width: 26px; height: 26px; }
  html.ys-lock .ys-fab { display: none; }

  /* the post form as a bottom sheet */
  html.yl-app .ys-pop { z-index: 290; padding: 0; place-items: end center; }
  html.yl-app .ys-pop-box { width: 100%; max-height: 92vh; margin: 0; padding: 18px 14px calc(env(safe-area-inset-bottom, 0px) + 18px); overflow-y: auto; border: 0; border-radius: 26px 26px 0 0; background: #EEF5F0; opacity: 1; transform: translateY(100%); transition: transform .28s ease; }
  html.yl-app .ys-pop.is-open .ys-pop-box { transform: none; }
  html.yl-app .ys-pop-box > h2 { margin: 0 0 4px; padding-right: 44px; color: var(--color-primary); font-size: 1.25rem; }
  html.yl-app .ys-pop-box > p { margin: 0 0 12px; font-size: 0.8125rem; }
  html.yl-app .ys-pop-box .ys-x { top: 14px; right: 14px; width: 36px; height: 36px; font-size: 1.3rem; }
  html.yl-app .ys-form.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; }
  html.yl-app .ys-form fieldset { gap: 12px; padding: 14px; border: 1px solid var(--color-border); border-radius: 18px; background: #fff; }
  html.yl-app .ys-form legend { float: left; width: 100%; margin-bottom: 4px; color: var(--color-primary); font-size: 0.9375rem; font-weight: 700; }
  html.yl-app .ys-form legend + * { clear: both; }
  html.yl-app .ys-n { width: 24px; height: 24px; background: #1B4D3A; color: #fff; font-size: 0.75rem; }
  html.yl-app .ys-form label, html.yl-app .ys-form .ys-lbl { font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); }
  html.yl-app .ys-form input[type="text"], html.yl-app .ys-form input[type="search"], html.yl-app .ys-form select, html.yl-app .ys-form textarea { min-height: 46px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: #F8FBF9; font-size: 0.9375rem; }
  html.yl-app .ys-form .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html.yl-app .ys-phone span { border-radius: 14px 0 0 14px; background: #E3F0E7; }
  html.yl-app .ys-phone input { border-radius: 0 14px 14px 0 !important; }
  html.yl-app .ys-drop { min-height: 120px; border-radius: 16px; border-color: #B7C4BC; background: #F8FBF9; }
  html.yl-app .ys-form > button { width: 100%; min-height: 50px; justify-content: center; border: 0; border-radius: 999px; background: linear-gradient(135deg, #2F7A58, #1B4D3A); color: #fff; font-weight: 700; }
  html.yl-app .ys-form .ys-agree { font-size: 0.75rem; }
  html.yl-app .ys-wa { font-size: 0.75rem; }
}
@media (max-width: 899px) {
  html.yl-app .ys-body { text-align: left; align-items: flex-start; }
  html.yl-app .ys-contact { justify-content: flex-start; }
  html.yl-app .ys-body h3 { text-align: left; }
}

/* Store in the app: cards show the photo, title and date; the whole card opens the details sheet */
@media (max-width: 899px) {
  html.yl-app .ys-card { position: relative; cursor: pointer; }
  html.yl-app .ys-card .ys-tag, html.yl-app .ys-card .ys-price, html.yl-app .ys-card .ys-meta, html.yl-app .ys-card .ys-snip, html.yl-app .ys-card .ys-contact { display: none; }
  html.yl-app .ys-card .ys-date { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--color-muted); font-size: 0.75rem; }
  html.yl-app .ys-card .ys-date .btn-ic { width: 14px; height: 14px; }
  html.yl-app .yellanda-store-page .ys-grid.is-list .ys-body { justify-content: center; align-self: stretch; padding-right: 36px; }
  html.yl-app .yellanda-store-page .ys-grid.is-list .ys-card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: #1B4D3A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat; }

  html.yl-app .ys-vs { display: block; position: fixed; inset: 0; z-index: 295; overflow-y: auto; overscroll-behavior: contain; background: rgba(15, 42, 33, 0); transition: background .25s ease; }
  html.yl-app .ys-vs[hidden] { display: none; }
  html.yl-app .ys-vs.is-open { background: rgba(15, 42, 33, .55); }
  html.yl-app .ys-vs-bg { position: fixed; inset: 0; }
  html.yl-app .ys-vs-box { position: relative; margin-top: 14vh; min-height: 86vh; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 24px); border-radius: 26px 26px 0 0; background: #EEF5F0; transform: translateY(100%); transition: transform .28s ease; }
  html.yl-app .ys-vs.is-open .ys-vs-box { transform: none; }
  html.yl-app .ys-vs .ys-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; background: rgba(255, 255, 255, .92); font-size: 1.3rem; }
  html.yl-app .ys-vs-img { overflow: hidden; border-radius: 26px 26px 0 0; background: #cfe0d4; }
  html.yl-app .ys-vs-img[hidden] { display: none; }
  html.yl-app .ys-vs-img img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
  html.yl-app .ys-vs-body { display: grid; gap: 10px; padding: 16px 16px 0; }
  html.yl-app .ys-vs-tag { justify-self: start; margin: 0; padding: 3px 12px; border-radius: 999px; background: #E3F0E7; color: var(--color-primary); font-size: 0.75rem; font-weight: 700; }
  html.yl-app .ys-vs-t { margin: 0; color: var(--color-primary); font-size: 1.25rem; line-height: 1.25; }
  html.yl-app .ys-vs-price { margin: 0; color: #1B4D3A; font-size: 1.125rem; font-weight: 800; }
  html.yl-app .ys-vs-tag[hidden], html.yl-app .ys-vs-price[hidden] { display: none; }
  html.yl-app .ys-vs .ys-detail { display: grid; gap: 12px; padding: 0; border: 0; background: none; }
  html.yl-app .ys-vs .ys-d-facts { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 16px; background: #fff; }
  html.yl-app .ys-vs .ys-d-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.yl-app .ys-vs .ys-d-acts .btn { justify-content: center; min-height: 46px; border-radius: 999px; }
  html.yl-app .ys-vs .ys-d-acts .btn-danger { grid-column: 1 / -1; }
}

/* ===== Events in the app: same header, toolbar, tabs, cards and filter drawer as News ===== */
@media (max-width: 899px) {
  html.yl-app .ev-appwrap { position: relative; z-index: 2; padding: 0; }
  
  html.yl-app .yellanda-events-page .ev-views, html.yl-app .yellanda-events-page .ev-wrap, html.yl-app .yellanda-events-page .ev-sec, html.yl-app .yellanda-events-page .ev-alt { background: none; padding-block: 0; }
  html.yl-app .ev-layout { display: block; }
  html.yl-app .ev-main .ev-head, html.yl-app .ev-main .nl-count, html.yl-app .ev-side .ev-toggle, html.yl-app .ev-side .nl-clear, html.yl-app .yellanda-events-page .cta { display: none; }
  html.yl-app .ev-tabs { display: flex; gap: 8px; margin: 0 0 12px; padding: 0 var(--sp-4); overflow-x: auto; scrollbar-width: none; }
  html.yl-app .ev-tabs::-webkit-scrollbar { display: none; }
  html.yl-app .ev-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
  html.yl-app .ev-tabs button[aria-selected="true"] { border-color: #1B4D3A; background: #1B4D3A; color: #fff; box-shadow: 0 2px 8px rgba(27, 77, 58, .3); }
  html.yl-app .ev-tabs button b { padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 0.75rem; }
  html.yl-app .yellanda-events-page .ev-in { padding: 0 var(--sp-4); }
  html.yl-app .yellanda-events-page .news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.yl-app .yellanda-events-page .ev-views[data-view="card"] .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.yl-app .event-month { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; color: var(--color-primary); font-size: 0.9375rem; }
  html.yl-app .event-card { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; padding: 8px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(26, 34, 30, .07); overflow: hidden; }
  html.yl-app .event-card .img-placeholder { width: 108px; min-height: 108px; height: 100%; border-radius: 12px; overflow: hidden; }
  html.yl-app .event-card .img-placeholder img { width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .event-card .news-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 34px 0 0; justify-content: center; }
  html.yl-app .event-card h3 { margin: 0; font-size: 0.9375rem; line-height: 1.3; color: var(--color-primary); }
  html.yl-app .event-card h3 a::after { content: ""; position: absolute; inset: 0; }
  html.yl-app .event-card .event-date { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--color-muted); font-size: 0.75rem; }
  html.yl-app .event-card .event-venue { margin: 0; color: var(--color-muted); font-size: 0.75rem; }
  html.yl-app .event-card .event-venue ~ .event-venue, html.yl-app .event-card .event-rec, html.yl-app .event-card .link { display: none; }
  html.yl-app .event-card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: #1B4D3A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat; }
  html.yl-app .yellanda-events-page .ev-views[data-view="card"] .event-card { grid-template-columns: minmax(0, 1fr); }
  html.yl-app .yellanda-events-page .ev-views[data-view="card"] .event-card .img-placeholder { width: 100%; height: 120px; min-height: 0; }
  html.yl-app .yellanda-events-page .ev-views[data-view="card"] .event-card .news-body { padding: 0 0 30px; }
}

/* Blog, Events and Store in the app: the header fades into the page at the bottom; Events toolbar and tabs tidied */
@media (max-width: 899px) {
  html.yl-app body:not(#yl-x):is(:has(#nl), :has(.yellanda-events-page), :has(.yellanda-store-page)) .ph-hero { border-radius: 0; background: radial-gradient(circle at 92% 0%, rgba(217, 164, 65, .26) 0%, rgba(217, 164, 65, 0) 46%), linear-gradient(180deg, #0E3326 0%, #1B4D3A 45%, #2C6F52 calc(100% - 70px), rgba(233, 243, 236, 0) 100%); }
  html.yl-app body:not(#yl-x):is(:has(#nl), :has(.yellanda-events-page), :has(.yellanda-store-page)) .ph-in { padding-bottom: 132px; }
  html.yl-app body:not(#yl-x):is(:has(#nl), :has(.yellanda-events-page)) .ph-hero + main.standalone-page { margin-top: -104px; }
  html.yl-app .yellanda-store-page .ys-sec .nl-appbar { margin-top: -104px; }
  html.yl-app body:not(#yl-x):is(:has(#nl), :has(.yellanda-events-page), :has(.yellanda-store-page)) .nl-appbar { margin-bottom: 60px; }
  html.yl-app .ev-appwrap { padding: 0 var(--sp-4); }
  html.yl-app .ev-appwrap .nl-appbar { margin-bottom: 60px; }
  html.yl-app .ev-tabs { display: flex; gap: 8px; margin: 0 0 14px; padding: 2px var(--sp-4) 4px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  html.yl-app .ev-tabs button { flex: 1 1 0; justify-content: center; min-height: 40px; }
  html.yl-app .ev-main { padding: 0; }
}

/* ===== Single Event in the app: same layout as a single News post ===== */
@media (max-width: 899px) {
  html.yl-app .yellanda-event-page .ev-hero { display: none; }
  html.yl-app .yellanda-event-page .ev-body { padding: 0; background: none; }
  html.yl-app .yellanda-event-page .ev-grid { display: block; padding: 0 var(--sp-4); }
  html.yl-app .yellanda-event-page .ev-main { display: block; }
  html.yl-app .yl-sa .ev-main .ev-card, html.yl-app .yl-sa .ev-col > .ev-card, html.yl-app .yl-sa .ev-side { display: none; }
  html.yl-app .yl-sa[data-act="details"] .ev-main .ev-card, html.yl-app .yl-sa[data-act="details"] .ev-col > .ev-card, html.yl-app .yl-sa[data-act="more"] .ev-side { display: block; }
  html.yl-app .yl-sa[data-act="photos"] .ev-main .yl-photos, html.yl-app .yl-sa[data-act="updates"] .ev-main .yl-updates, html.yl-app .yl-sa[data-act="updates"] .ev-col .yl-updates { display: block; }
  html.yl-app .yl-sa-facts { display: grid; gap: 0; margin: 0 0 12px; padding: 4px 14px; list-style: none; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(26, 34, 30, .07); }
  html.yl-app .yl-sa-facts li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--color-border); color: var(--color-text); font-size: 0.875rem; font-weight: 600; }
  html.yl-app .yl-sa-facts li:first-child { border-top: 0; }
  html.yl-app .yl-sa-facts .btn-ic { flex: none; width: 20px; height: 20px; color: #1B4D3A; }
  html.yl-app .yl-sa-meta { justify-content: flex-end; }

  /* event cards in the list: no coloured edge, badges wrap, date and venue stay small */
  html.yl-app .yellanda-events-page .event-card.event-card { border: 0 !important; }
  html.yl-app .event-card .news-meta { display: flex; flex-wrap: wrap; gap: 4px; }
  html.yl-app .event-card .news-meta .badge, html.yl-app .event-card .news-meta .yl-upd-badge { padding: 2px 8px; font-size: 0.6875rem; }
  html.yl-app .event-card .event-date { align-items: flex-start; line-height: 1.3; }
  html.yl-app .event-card .event-date svg { flex: none; margin-top: 1px; }
  html.yl-app .event-card h3 { font-size: 0.9375rem; }
}
@media (max-width: 899px) {
  html.yl-app .yellanda-event-page .ev-hero ~ .ev-body { margin-top: 0; padding: 0; border-radius: 0; background: none; }
  html.yl-app .yellanda-event-page .yl-sa-meta { display: none; }
  html.yl-app .yellanda-event-page .yl-sa-facts { margin-bottom: 14px; }
  html.yl-app .yellanda-event-page .yl-sa-tabs { margin-bottom: 14px; }
  html.yl-app .yellanda-event-page .ev-main, html.yl-app .yellanda-event-page .ev-col { display: grid; gap: 12px; }
  html.yl-app .yellanda-event-page .ev-main .ev-card, html.yl-app .yellanda-event-page .ev-col > .ev-card, html.yl-app .yellanda-event-page .ev-side .ev-card { margin: 0; padding: 16px; border-top: 0; border-radius: 18px; box-shadow: 0 2px 10px rgba(26, 34, 30, .07); }
  html.yl-app .yellanda-event-page .ev-card h2 { margin: 0 0 10px; font-size: 1.0625rem; color: var(--color-primary); }
  html.yl-app .yellanda-event-page .yl-sa-share { margin-top: 14px; }
}

/* Events in the app: cards follow the News card styles; Upcoming / Completed are icon buttons in the toolbar */
@media (max-width: 899px) {
  html.yl-app .yellanda-events-page .ev-in { padding: 0; }
  html.yl-app .yellanda-events-page .ev-main { padding: 0; }
  html.yl-app .ev-appwrap .nl-total { display: none; }
  html.yl-app .ev-appwrap .nl-acts { justify-content: flex-end; }
  html.yl-app .nl-acts .ev-tabs { display: inline-flex; gap: 2px; margin: 0 auto 0 0; padding: 3px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; background: rgba(255, 255, 255, .18); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  html.yl-app .nl-acts .ev-tabs button { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; box-shadow: none; color: #fff; font-size: 0.8125rem; font-weight: 700; }
  html.yl-app .nl-acts .ev-tabs button .lang-en, html.yl-app .nl-acts .ev-tabs button .lang-te { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html.yl-app .nl-acts .ev-tabs button b { padding: 0; background: none; color: inherit; font-size: 0.8125rem; }
  html.yl-app .nl-acts .ev-tabs button[aria-selected="true"] { background: #fff; color: #1B4D3A; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); }
  html.yl-app .nl-acts .ev-tabs .btn-ic { width: 18px; height: 18px; }
  html.yl-app .nl .nl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.yl-app .nl[data-av="grid"] .nl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.yl-app .nl .event-card .event-date { order: 2; margin: 0; font-size: 0.8125rem; }
  html.yl-app .nl .event-card .event-venue { order: 3; }
  html.yl-app .nl .event-card .news-body { padding: 2px 2px 40px 0; }
  html.yl-app .nl[data-av="grid"] .event-card .news-body { padding-bottom: 8px; }
}

/* List pages in the app: the title and description sit in a glass card; Store cards show their category */
@media (max-width: 899px) {
  html.yl-app body:not(#yl-x):is(:has(#nl), :has(.yellanda-events-page), :has(.yellanda-store-page)) .ph-card { max-width: none; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); box-shadow: 0 6px 20px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  html.yl-app .ph-card .ph-title { margin: 0 0 6px; }
  html.yl-app .ph-card .ph-lead { margin: 0; max-width: none; }
  html.yl-app .ys-card .ys-tag { display: inline-flex; }
}

/* Hero card colours: a tint per page, dark enough at the bottom edge to keep the white text sharp */
@media (max-width: 899px) {
  html.yl-app body:not(#yl-x):has(#nl) .ph-card { background: linear-gradient(135deg, rgba(217, 164, 65, .55), rgba(14, 51, 38, .72)); border-color: rgba(255, 224, 160, .5); }
  html.yl-app body.blog:not(#yl-x):has(#nl) .ph-card { background: linear-gradient(135deg, rgba(196, 102, 48, .58), rgba(14, 51, 38, .74)); border-color: rgba(255, 196, 160, .5); }
  html.yl-app body:not(#yl-x):has(#ev-form) .ph-card { background: linear-gradient(135deg, rgba(40, 140, 160, .58), rgba(14, 51, 38, .74)); border-color: rgba(170, 230, 240, .5); }
  html.yl-app body:not(#yl-x):is(:has(#nl), :has(.yellanda-events-page)) .ph-card .ph-title { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
  html.yl-app body:not(#yl-x):is(:has(#nl), :has(.yellanda-events-page)) .ph-card .ph-lead { color: rgba(255, 255, 255, .97); text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
}
@media (max-width: 899px) {
  html.yl-app body:not(#yl-x):has(#ys-grid) .ph-card { background: linear-gradient(135deg, rgba(128, 86, 184, .6), rgba(14, 51, 38, .74)); border-color: rgba(214, 190, 248, .5); }
  html.yl-app body:not(#yl-x):has(#ys-grid) .ph-card .ph-title { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
  html.yl-app body:not(#yl-x):has(#ys-grid) .ph-card .ph-lead { color: rgba(255, 255, 255, .97); text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
}

/* App home: a green band behind the logo that fades away downwards, and a more colourful photo */
@media (max-width: 899px) {
  html.yl-app .ah-hero { isolation: isolate; overflow: hidden; background: var(--grad-primary); }
  html.yl-app .ah-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ah-img) center / cover no-repeat; filter: saturate(1.55) contrast(1.06) brightness(1.05); }
  html.yl-app .ah-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #0E3326 0%, rgba(27, 77, 58, .9) 13%, rgba(27, 77, 58, .55) 27%, rgba(27, 77, 58, 0) 45%, rgba(6, 16, 11, 0) 72%, rgba(6, 16, 11, .3) 100%); }
  html.yl-app .ah-hero > * { position: relative; z-index: 1; }
}

/* ===== About page in the app (mock layout): photo header, About card with photo, tiles, place card, figures, green banner ===== */
@media (max-width: 899px) {
  html.yl-app body:not(#yl-x):has(.pg-about) .site-header, html.yl-app body:not(#yl-x):has(.pg-about) .ticker { display: none; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 0; background: #0E3326; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero * { animation: none !important; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero .ph-bg { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.45) contrast(1.05); transform: none; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero::before { content: ""; display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 51, 38, .78) 0%, rgba(14, 51, 38, .18) 34%, rgba(6, 16, 11, .38) 68%, #E9F3EC 100%); }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero::after { display: none; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-in { z-index: 3; padding: calc(env(safe-area-inset-top, 0px) + 76px) var(--sp-4) 78px; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-title { color: #fff; font-size: 1.75rem; line-height: 1.2; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-lead { max-width: none; margin-top: 6px; color: #fff; font-size: 0.9375rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-actions, html.yl-app body:not(#yl-x):has(.pg-about) .ph-meta { display: none; }

  html.yl-app .pg-about { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin-top: -58px; padding: 0 var(--sp-4) var(--sp-5); background: none; }
  html.yl-app :is(.pg-about, .pl-page, .va-page, .os-page) .pg-sec { padding: 0; background: none; border: 0; }
  html.yl-app .pg-about .container { padding: 0; width: 100%; max-width: none; }
  html.yl-app .pg-about .ab-intro { order: 1; } html.yl-app .pg-about .ab-live { order: 2; } html.yl-app .pg-about .ab-where { order: 3; } html.yl-app .pg-about .ab-stats { order: 4; } html.yl-app .pg-about .cta { order: 5; }
  html.yl-app .pg-about .ab-intro .container, html.yl-app .pg-about .ab-where .container, html.yl-app .pg-about .ab-stats .container { padding: 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); }
  html.yl-app :is(.pg-about, .pl-page) .pg-head { margin: 0 0 8px; text-align: left; }
  html.yl-app .pg-about .pg-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--color-primary); font-size: 1.25rem; line-height: 1.2; }
  html.yl-app .pg-about .pg-head h2::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #E3F0E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4D3A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14 0 9-5 14-14 14zM5 19c3-5 6-8 10-10'/%3E%3C/svg%3E") center / 20px no-repeat; }
  html.yl-app .pg-about .pg-head p { margin: 6px 0 0; font-size: 0.8125rem; color: var(--color-muted); }
  html.yl-app .pg-about .pg-text p { margin: 0 0 8px; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); }

  html.yl-app .pg-about .ab-intro .pg-split { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 12px; align-items: start; }
  html.yl-app .pg-about .ab-intro .pg-art { display: none; }
  html.yl-app .pg-about .ab-intro .pg-actions { display: none; }
  html.yl-app .pg-about .ab-ph { display: block; overflow: hidden; border-radius: 16px; background: #cfe0d4; }
  html.yl-app .pg-about .ab-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .pg-about .ab-intro .ab-ph { align-self: stretch; min-height: 150px; }
  html.yl-app .pg-about .ab-ph--wide { height: 130px; margin-bottom: 12px; }

  /* tiles */
  html.yl-app .pg-about .ab-live .pg-head { display: none; }
  html.yl-app .pg-about .ab-live .pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.yl-app .pg-about .ab-live .pg-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(26, 34, 30, .07); text-decoration: none; }
  html.yl-app .pg-about .ab-live .pg-card::after { content: ""; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: #E3F0E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231B4D3A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
  html.yl-app .pg-about .ab-live .pg-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FCE9D6; color: #B5601A; }
  html.yl-app .pg-about .ab-live .pg-card:nth-child(2) .pg-ic { background: #DDF0E3; color: #1F6B45; }
  html.yl-app .pg-about .ab-live .pg-card:nth-child(3) .pg-ic { background: #E7DFF7; color: #5B3AA6; }
  html.yl-app .pg-about .ab-live .pg-card:nth-child(4) .pg-ic { background: #D9EDF2; color: #1F6F82; }
  html.yl-app .pg-about .ab-live .pg-card h3 { margin: 0; color: var(--color-primary); font-size: 0.9375rem; line-height: 1.25; }
  html.yl-app .pg-about .ab-live .pg-card p { margin: 0; color: var(--color-muted); font-size: 0.75rem; line-height: 1.4; }

  /* place card */
  html.yl-app .pg-about .ab-where .pg-facts { display: grid; gap: 0; margin: 0 0 10px; }
  html.yl-app .pg-about .ab-where .pg-facts > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 0.8125rem; }
  html.yl-app .pg-about .ab-where .pg-facts > div:first-child { border-top: 0; }
  html.yl-app .pg-about .ab-where .pg-facts dt { color: var(--color-muted); }
  html.yl-app .pg-about .ab-where .pg-facts dd { margin: 0; font-weight: 700; color: var(--color-primary); text-align: right; }
  html.yl-app .pg-about .ab-where .pg-sub { margin: 4px 0 8px; font-size: 0.9375rem; color: var(--color-primary); }
  html.yl-app .pg-about .ab-where .pg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
  html.yl-app .pg-about .ab-where .pg-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #E3F0E7; color: var(--color-primary); font-size: 0.75rem; font-weight: 600; }
  html.yl-app .pg-about .ab-where .pg-chips .btn-ic { width: 12px; height: 12px; }
  html.yl-app .pg-about .ab-where .pg-actions .btn { width: 100%; justify-content: center; min-height: 44px; border-radius: 999px; }

  /* figures */
  html.yl-app .pg-about .ab-stats .pg-head h2 { font-size: 1.125rem; }
  html.yl-app .pg-about .ab-stats .pg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.yl-app .pg-about .ab-stats .pg-stat { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; background: #E3F0E7; text-align: center; }
  html.yl-app .pg-about .ab-stats .pg-stat:nth-child(2) { background: #FFF1D6; } html.yl-app .pg-about .ab-stats .pg-stat:nth-child(3) { background: #DCEBFA; } html.yl-app .pg-about .ab-stats .pg-stat:nth-child(4) { background: #FCE3DA; }
  html.yl-app .pg-about .ab-si { display: inline-flex; color: #1B4D3A; }
  html.yl-app .pg-about .ab-stats .pg-stat strong { color: var(--color-primary); font-size: 1.125rem; }
  html.yl-app .pg-about .ab-stats .pg-stat span:not(.ab-si) { color: var(--color-muted); font-size: 0.75rem; }

  /* green banner */
  html.yl-app :is(.pg-about, .pl-page, .pg-gallery, .va-page, .os-page) .cta { margin: 0; padding: 20px 16px; border-radius: 22px; background: linear-gradient(135deg, #1B4D3A, #2C6F52); text-align: center; }
  html.yl-app :is(.pg-about, .pl-page, .pg-gallery, .va-page, .os-page) .cta .container { padding: 0; }
  html.yl-app :is(.pg-about, .pl-page, .pg-gallery, .va-page, .os-page) .cta h2 { margin: 0 0 6px; color: #fff; font-size: 1.125rem; }
  html.yl-app :is(.pg-about, .pl-page, .pg-gallery, .va-page, .os-page) .cta p { margin: 0 0 12px; color: rgba(255, 255, 255, .92); font-size: 0.8125rem; }
  html.yl-app :is(.pg-about, .pl-page, .pg-gallery, .va-page, .os-page) .cta .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  html.yl-app :is(.pg-about, .pl-page, .pg-gallery, .va-page, .os-page) .cta .btn { min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 0.875rem; }
}
@media (max-width: 899px) {
  html.yl-app :is(.pg-about, .va-page, .os-page) .pg-head h2::after { display: none; }
  html.yl-app .pg-about .ab-intro .ab-ph { align-self: start; height: 170px; min-height: 0; }
  html.yl-app .pg-about .ab-where .pg-facts { grid-template-columns: minmax(0, 1fr); }
  html.yl-app .pg-about .ab-where .pg-facts > div { padding: 8px 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: none; box-shadow: none; }
  html.yl-app .pg-about .ab-where .pg-facts > div:first-child { border-top: 0; }
  html.yl-app .pg-about .ab-where .pg-facts dt { margin: 0; }
  html.yl-app .pg-about .ab-live .pg-card .pg-more, html.yl-app .pg-about .ab-live .pg-card span:not(.pg-ic) { font-size: 0.75rem; }
}

/* About in the app: plain green header that fades into the page, no animation, title and description fully visible */
@media (max-width: 899px) {
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero { background: radial-gradient(circle at 92% 0%, rgba(217, 164, 65, .26) 0%, rgba(217, 164, 65, 0) 46%), linear-gradient(180deg, #0E3326 0%, #1B4D3A 50%, #2C6F52 calc(100% - 56px), rgba(233, 243, 236, 0) 100%); }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero .ph-bg, html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero::before { display: none !important; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero *, html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero *::before, html.yl-app body:not(#yl-x):has(.pg-about) .ph-hero *::after { animation: none !important; transition: none !important; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-in > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-in { padding: calc(env(safe-area-inset-top, 0px) + 74px) var(--sp-4) 86px; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-title { overflow: visible; text-overflow: clip; white-space: normal; }
  html.yl-app body:not(#yl-x):has(.pg-about) .ph-lead { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: none; text-shadow: none; }
  html.yl-app .pg-about { margin-top: -44px; }
  html.yl-app .pg-about .pg-text, html.yl-app .pg-about .pg-text p, html.yl-app .pg-about .pg-head, html.yl-app .pg-about .pg-card p { text-align: left; text-justify: auto; hyphens: manual; }
  html.yl-app .pg-about .pg-text { min-width: 0; }
}
@media (max-width: 899px) {
  html.yl-app .pg-about .ab-intro .pg-split { grid-template-columns: minmax(0, 1fr); }
  html.yl-app .pg-about .ab-intro .ab-ph { align-self: stretch; width: 100%; height: 170px; margin-top: 4px; }
}
@media (max-width: 899px) {
  html.yl-app .pg-about .ab-live .pg-go { display: none; }
}

/* ===== Places in the app (mock layout): gradient header, search and chips card, place cards with category badge, banner ===== */
@media (max-width: 899px) {
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .site-header, html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ticker { display: none; }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-hero { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 0; background: radial-gradient(circle at 92% 0%, rgba(217, 164, 65, .26) 0%, rgba(217, 164, 65, 0) 46%), linear-gradient(180deg, #0E3326 0%, #1B4D3A 50%, #2C6F52 calc(100% - 56px), rgba(233, 243, 236, 0) 100%); }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-hero .ph-bg, html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-hero::before, html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-hero::after { display: none !important; }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-hero *, html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-hero *::before, html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-hero *::after { animation: none !important; transition: none !important; }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-in > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-in { padding: calc(env(safe-area-inset-top, 0px) + 74px) var(--sp-4) 78px; }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-actions, html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-meta { display: none; }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-card { max-width: none; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 22px;  box-shadow: 0 6px 20px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-card .ph-title { margin: 0 0 6px; color: #fff; font-size: 1.5rem; line-height: 1.2; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
  html.yl-app body:not(#yl-x):is(:has(.pl-page), :has(.pg-gallery), :has(.contact-page), :has(.va-page), :has(.os-page), :has(.privacy-page), :has(.yl-search)) .ph-card .ph-lead { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: none; margin: 0; color: rgba(255, 255, 255, .97); font-size: 0.875rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
  html.yl-app body:not(#yl-x):has(.pl-page) .ph-card { background: linear-gradient(135deg, rgba(190, 70, 95, .58), rgba(14, 51, 38, .74)); border-color: rgba(255, 190, 200, .5); }
  html.yl-app body:not(#yl-x):has(.pg-gallery) .ph-card { background: linear-gradient(135deg, rgba(70, 100, 200, .6), rgba(14, 51, 38, .74)); border-color: rgba(190, 205, 255, .5); }
  html.yl-app body:not(#yl-x):has(.contact-page) .ph-card { background: linear-gradient(135deg, rgba(30, 150, 130, .6), rgba(14, 51, 38, .74)); border-color: rgba(170, 240, 225, .5); }
  html.yl-app body:not(#yl-x):has(.va-page) .ph-card { background: linear-gradient(135deg, rgba(120, 150, 40, .6), rgba(14, 51, 38, .74)); border-color: rgba(220, 240, 170, .5); }
  html.yl-app body:not(#yl-x):has(.os-page) .ph-card { background: linear-gradient(135deg, rgba(176, 112, 50, .6), rgba(14, 51, 38, .74)); border-color: rgba(250, 215, 170, .5); }
  html.yl-app body:not(#yl-x):has(.privacy-page) .ph-card { background: linear-gradient(135deg, rgba(60, 110, 170, .6), rgba(14, 51, 38, .74)); border-color: rgba(180, 215, 250, .5); }
  html.yl-app body:not(#yl-x):has(.yl-search) .ph-card { background: linear-gradient(135deg, rgba(40, 130, 120, .6), rgba(14, 51, 38, .74)); border-color: rgba(170, 235, 225, .5); }

  html.yl-app .pl-page { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; margin-top: -44px; padding: 0 var(--sp-4) var(--sp-5); background: none; }
  
  html.yl-app :is(.pl-page, .pg-gallery, .contact-page, .va-page, .privacy-page, .os-page) .container { width: 100%; max-width: none; padding: 0; }
  html.yl-app .pl-page #explore { display: none; }
  html.yl-app .pl-tools { display: block; padding: 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); }
  html.yl-app .pl-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 999px; background: #F8FBF9; color: var(--color-muted); }
  html.yl-app .pl-search input { flex: 1; min-width: 0; padding: 11px 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; color: var(--color-text); outline: none; }
  html.yl-app .pl-chips { display: flex; gap: 8px; margin: 10px -12px 0; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; }
  html.yl-app .pl-chips::-webkit-scrollbar { display: none; }
  html.yl-app .pl-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--pb, #E3F0E7); border-radius: 999px; background: var(--pb, #E3F0E7); color: var(--pc, #1B4D3A); font: inherit; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
  html.yl-app .pl-chip .btn-ic { width: 16px; height: 16px; }
  html.yl-app .pl-chip.is-on { border-color: #1B4D3A; background: #1B4D3A; color: #fff; }
  html.yl-app .pl-empty { display: block; margin: 0; padding: 16px; border-radius: 18px; background: #fff; color: var(--color-muted); text-align: center; }
  html.yl-app .pl-empty[hidden] { display: none; }

  html.yl-app .pl-cat-sec .pg-head { display: none; }
  html.yl-app .pl-page .pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.yl-app .pl-page .pg-pl-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(26, 34, 30, .07); opacity: 1; transform: none; }
  html.yl-app .pl-page .pg-pl-card[hidden] { display: none; }
  html.yl-app .pl-page .pg-pl-img { position: relative; width: 112px; height: 112px; margin: 0; overflow: hidden; border-radius: 12px; background: #cfe0d4; }
  html.yl-app .pl-page .pg-pl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .pl-page .pg-pl-body { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; }
  html.yl-app .pl-page .pg-pl-body h3 { margin: 0; padding-right: 0; color: var(--color-primary); font-size: 0.9375rem; line-height: 1.3; }
  html.yl-app .pl-page .pl-cat { display: inline-flex; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--pb, #E3F0E7); color: var(--pc, #1B4D3A); font-size: 0.6875rem; font-weight: 700; }
  html.yl-app .pl-page .pg-loc { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--color-muted); font-size: 0.75rem; }
  html.yl-app .pl-page .pg-pl-body p { margin: 0; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.yl-app .pl-page .pg-pl-body .pg-loc { display: flex; -webkit-line-clamp: unset; }
  html.yl-app .pl-page .pg-pl-body .pg-go { margin-top: 2px; color: #1B4D3A; font-size: 0.8125rem; font-weight: 700; }

  html.yl-app .pl-page #map .container, html.yl-app .pl-page #nearby .container { padding: 14px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); }
  html.yl-app .pl-page #map .pg-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  
  html.yl-app .pl-page .pg-head h2 { margin: 0; color: var(--color-primary); font-size: 1.125rem; }
  html.yl-app .pl-page .pg-head p { margin: 4px 0 0; font-size: 0.8125rem; color: var(--color-muted); }
  html.yl-app .pl-page .pg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
  html.yl-app .pl-page #nearby .pg-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #E3F0E7; color: var(--color-primary); font-size: 0.75rem; font-weight: 600; }
  html.yl-app .pl-page .pg-actions .btn { width: 100%; justify-content: center; min-height: 44px; border-radius: 999px; }
}
@media (max-width: 899px) {
  html.yl-app .pl-tools { padding: 0; border: 0 !important; border-radius: 0; background: none; box-shadow: none; outline: 0; }
  html.yl-app .pl-search { background: #fff; box-shadow: 0 2px 10px rgba(26, 34, 30, .08); }
  html.yl-app .pl-chips { margin: 10px calc(-1 * var(--sp-4)) 0; padding: 0 var(--sp-4) 2px; }
}

/* ===== Gallery in the app: gradient header, search, chips, photo cards ===== */
@media (max-width: 899px) {

  html.yl-app .pg-gallery { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; margin-top: -44px; padding: 0 var(--sp-4) var(--sp-5); background: none; }
  html.yl-app .pg-gallery #gallery { padding: 0; background: none; }
  
  html.yl-app .pg-gallery .section-head { display: none; }
  html.yl-app .gl-search { display: flex; margin: 0 0 10px; background: #fff; box-shadow: 0 2px 10px rgba(26, 34, 30, .08); }
  html.yl-app .pg-gallery .gallery-tabs { flex-wrap: nowrap; gap: 8px; margin: 0 calc(-1 * var(--sp-4)) 12px; padding: 0 var(--sp-4) 2px; overflow-x: auto; scrollbar-width: none; }
  html.yl-app .pg-gallery .gallery-tabs::-webkit-scrollbar { display: none; }
  html.yl-app .pg-gallery .gallery-tabs button { flex: none; padding: 7px 14px; border: 1px solid #E3F0E7; background: #E3F0E7; color: #1B4D3A; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
  html.yl-app .pg-gallery .gallery-tabs button:nth-child(5n+2) { border-color: #FCE9D6; background: #FCE9D6; color: #B5601A; }
  html.yl-app .pg-gallery .gallery-tabs button:nth-child(5n+3) { border-color: #DDF0E3; background: #DDF0E3; color: #1F6B45; }
  html.yl-app .pg-gallery .gallery-tabs button:nth-child(5n+4) { border-color: #E7DFF7; background: #E7DFF7; color: #5B3AA6; }
  html.yl-app .pg-gallery .gallery-tabs button:nth-child(5n+5) { border-color: #D9EDF2; background: #D9EDF2; color: #1F6F82; }
  html.yl-app .pg-gallery .gallery-tabs button[aria-pressed="true"] { border-color: #1B4D3A; background: #1B4D3A; color: #fff; }
  html.yl-app .pg-gallery .masonry { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.yl-app .pg-gallery .masonry .tile { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 6px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(26, 34, 30, .07); text-align: left; }
  html.yl-app .pg-gallery .masonry .tile[hidden] { display: none; }
  html.yl-app .pg-gallery .masonry .tile .img-placeholder { aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden; }
  html.yl-app .pg-gallery .masonry .tile .img-placeholder img { width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .gl-cap { display: grid; gap: 4px; padding: 0 4px 4px; }
  html.yl-app .gl-cap b { color: var(--color-primary); font-size: 0.8125rem; line-height: 1.3; font-weight: 700; }
  html.yl-app .gl-cap i { justify-self: start; padding: 1px 8px; border-radius: 999px; background: #E3F0E7; color: #1B4D3A; font-size: 0.6875rem; font-style: normal; font-weight: 700; }
}

/* ===== Contact in the app (mock layout): gradient header, topic tiles, form card, details and location cards ===== */
@media (max-width: 899px) {

  html.yl-app .contact-page { position: relative; z-index: 2; margin-top: -44px; padding: 0 var(--sp-4) var(--sp-5); background: none; }
  html.yl-app .contact-page .page-content { padding: 0; background: none; }
  
  html.yl-app .contact-page .ct-grid { display: flex; flex-direction: column; gap: 12px; }

  html.yl-app .contact-page .ct-form, html.yl-app .contact-page .ct-map { padding: 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); }
  html.yl-app .ct-fh, html.yl-app .ct-ih { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  html.yl-app .ct-fi { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #E3F0E7; color: #1B4D3A; }
  html.yl-app .ct-fh b, html.yl-app .ct-ih b { display: block; color: var(--color-primary); font-size: 1.125rem; line-height: 1.2; }
  html.yl-app .ct-fh small { color: var(--color-muted); font-size: 0.8125rem; }
  html.yl-app .contact-page .contact-form .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.yl-app .contact-page .contact-form .form-field { margin: 0 0 10px; }
  html.yl-app .contact-page .contact-form label { margin-bottom: 4px; color: var(--color-primary); font-size: 0.8125rem; font-weight: 600; }
  html.yl-app .contact-page .contact-form input[type="text"], html.yl-app .contact-page .contact-form input[type="email"], html.yl-app .contact-page .contact-form textarea { min-height: 46px; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: #F8FBF9; font-size: 0.9375rem; }
  html.yl-app .contact-page .contact-form textarea { min-height: 110px; }
  html.yl-app .contact-page .contact-form .btn-primary { width: 100%; min-height: 50px; justify-content: center; border: 0; border-radius: 999px; background: linear-gradient(135deg, #2F7A58, #1B4D3A); color: #fff; font-weight: 700; }

  html.yl-app .ct-info { display: grid; gap: 0; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }
  html.yl-app .ct-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); color: inherit; text-decoration: none; }
  html.yl-app .ct-row > div { min-width: 0; }
  html.yl-app .ct-row b { display: block; color: var(--color-primary); font-size: 0.8125rem; }
  html.yl-app .ct-row span:not(.ct-ri) { display: block; color: var(--color-text); font-size: 0.8125rem; overflow-wrap: anywhere; }
  html.yl-app .ct-ri { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #E3F0E7; color: #1B4D3A; }
  html.yl-app .contact-page .ct-map .eyebrow { display: none; }
  html.yl-app .contact-page .ct-map h2 { margin: 0 0 10px; color: var(--color-primary); font-size: 1.0625rem; }
  html.yl-app .contact-page .ct-map-art { overflow: hidden; border-radius: 16px; }
  html.yl-app .contact-page .ct-map-art img { display: block; width: 100%; height: auto; }
  html.yl-app .contact-page .ct-legend { display: grid; gap: 4px; margin: 10px 0; padding: 0; list-style: none; font-size: 0.75rem; }
  html.yl-app .contact-page .ct-map-actions { display: grid; gap: 8px; }
  html.yl-app .contact-page .ct-map-actions .btn { width: 100%; min-height: 46px; justify-content: center; border-radius: 999px; }
  html.yl-app .contact-page .fb-track .container { padding: 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); }
  html.yl-app .contact-page .fb-track { margin-top: 12px; }
}
@media (max-width: 899px) {
  html.yl-app .contact-page .contact-form select { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 14px; background-color: #F8FBF9; font-size: 0.9375rem; }
}

/* ===== Village Administration in the app (mock layout): gradient header, jump chips, section cards ===== */
@media (max-width: 899px) {

  html.yl-app .va-page { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin-top: -44px; padding: 0 var(--sp-4) var(--sp-5); background: none; }

  html.yl-app :is(.va-page, .os-page) .pg-sec[data-ad] > .container { padding: 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); }
  html.yl-app .ad-chips { display: flex; gap: 8px; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) 2px; overflow-x: auto; scrollbar-width: none; }
  html.yl-app .ad-chips::-webkit-scrollbar { display: none; }
  html.yl-app .ad-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--color-primary); font: inherit; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(26, 34, 30, .08); cursor: pointer; }
  html.yl-app .ad-chip .btn-ic { width: 18px; height: 18px; }
  html.yl-app .ad-chip.is-on { border-color: #1B4D3A; background: #1B4D3A; color: #fff; }

  html.yl-app :is(.va-page, .os-page) .pg-head { margin: 0 0 12px; text-align: left; }
  html.yl-app :is(.va-page, .os-page) .pg-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--color-primary); font-size: 1.125rem; line-height: 1.2; }
  html.yl-app .va-page .pg-head h2::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #E3F0E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4D3A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6'/%3E%3C/svg%3E") center / 18px no-repeat; }
  html.yl-app :is(.va-page, .os-page) .pg-head p { margin: 6px 0 0; color: var(--color-muted); font-size: 0.8125rem; }

  html.yl-app .va-page .pg-sos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.yl-app .va-page .pg-sos a { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; background: #E3F0E7; color: var(--color-primary); text-align: center; text-decoration: none; }
  html.yl-app .va-page .pg-sos a:nth-child(2) { background: #FFEBD6; } html.yl-app .va-page .pg-sos a:nth-child(3) { background: #DCEBFA; } html.yl-app .va-page .pg-sos a:nth-child(4) { background: #F9DCE0; } html.yl-app .va-page .pg-sos a:nth-child(5) { background: #E7DFF7; } html.yl-app .va-page .pg-sos a:nth-child(6) { background: #D9EDF2; }
  html.yl-app .va-page .pg-sos strong { font-size: 1.25rem; }
  html.yl-app .va-page .pg-sos span { font-size: 0.75rem; color: var(--color-muted); }

  html.yl-app .va-page .pg-lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.yl-app .va-page .pg-lead-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 12px 8px; border: 1px solid var(--color-border); border-radius: 16px; background: #F8FBF9; font: inherit; text-align: center; cursor: pointer; }
  html.yl-app .va-page .pg-lead-photo { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: #E3F0E7; }
  html.yl-app .va-page .pg-lead-photo img, html.yl-app .va-page .pg-lead-img { width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .va-page .pg-lead-info { display: grid; gap: 2px; }
  html.yl-app .va-page .pg-lead-info strong { color: var(--color-primary); font-size: 0.875rem; line-height: 1.25; }
  html.yl-app .va-page .pg-role { color: var(--color-muted); font-size: 0.75rem; }
  html.yl-app .va-page .pg-lead .pg-go { color: #1B4D3A; font-size: 0.75rem; font-weight: 700; }
  html.yl-app .va-page .pg-profile { margin-top: 6px; padding: 12px; border-radius: 16px; background: #E3F0E7; text-align: center; }
  html.yl-app .va-page .pg-profile[hidden] { display: none; }

  html.yl-app .va-page .pg-sub { margin: 14px 0 8px; color: var(--color-primary); font-size: 0.9375rem; }
  html.yl-app .va-page .pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html.yl-app .va-page .pg-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--color-border); border-radius: 16px; background: #F8FBF9; text-decoration: none; box-shadow: none; }
  html.yl-app .va-page .pg-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F0E7; color: #1B4D3A; }
  html.yl-app .va-page .pg-card h3 { margin: 0; color: var(--color-primary); font-size: 0.9375rem; }
  html.yl-app .va-page .pg-card p { margin: 0; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.4; }
  html.yl-app .va-page .pg-table-wrap { overflow-x: auto; border-radius: 14px; }
  html.yl-app .va-page .pg-table { width: 100%; font-size: 0.8125rem; }

  html.yl-app .va-page .news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html.yl-app .va-page .news-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px; border: 1px solid var(--color-border); border-radius: 16px; background: #F8FBF9; box-shadow: none; }
  html.yl-app .va-page .news-card .img-placeholder { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; }
  html.yl-app .va-page .news-card .img-placeholder img { width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .va-page .news-card .news-body { padding: 0; gap: 4px; }
  html.yl-app .va-page .news-card h3 { margin: 0; font-size: 0.9375rem; color: var(--color-primary); }
  html.yl-app .va-page .news-card .link { font-size: 0.8125rem; }
  html.yl-app .va-page .pg-more .btn, html.yl-app .va-page .pg-guide .btn { width: 100%; justify-content: center; min-height: 44px; border-radius: 999px; }

  html.yl-app .va-page .pg-guides { display: grid; gap: 8px; margin-bottom: 14px; }
  html.yl-app .va-page .pg-guide { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 16px; background: #F8FBF9; }
  html.yl-app .va-page .pg-guide summary { color: var(--color-primary); font-size: 0.9375rem; font-weight: 700; cursor: pointer; }
  html.yl-app .va-page .pg-portals { display: grid; gap: 8px; }
  html.yl-app .va-page .pg-portal { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 16px; background: #F8FBF9; text-decoration: none; }
  html.yl-app .va-page .pg-portal > span:nth-child(2) { flex: 1; min-width: 0; }
  html.yl-app .va-page .pg-portal h3 { margin: 0; color: var(--color-primary); font-size: 0.9375rem; }
  html.yl-app .va-page .pg-portal p { margin: 0; color: var(--color-muted); font-size: 0.75rem; }
  html.yl-app .va-page .pg-note { margin: 10px 0 0; color: var(--color-muted); font-size: 0.75rem; }

}

/* Ward members in the app: one card per member (photo, name, area, ward badge, call button) */
@media (max-width: 899px) {
  html.yl-app .va-page .pg-table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  html.yl-app .va-page .pg-table, html.yl-app .va-page .pg-table tbody { display: block; }
  html.yl-app .va-page .pg-table thead { display: none; }
  html.yl-app .va-page .pg-table tbody { display: grid; gap: 8px; }
  html.yl-app .va-page .pg-table tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "photo member ward" "photo area ward" "phone phone phone"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px; border: 1px solid var(--color-border); border-radius: 16px; background: #F8FBF9; }
  html.yl-app .va-page .pg-table td { display: block; padding: 0; border: 0; }
  html.yl-app .va-page .pg-table td::before { display: none; }
  html.yl-app .va-page .pg-table .pg-td-photo { grid-area: photo; }
  html.yl-app .va-page .pg-table .pg-td-photo img, html.yl-app .va-page .pg-table .pg-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  html.yl-app .va-page .pg-table td:nth-child(2) { grid-area: ward; justify-self: end; padding: 4px 12px; border-radius: 999px; background: #1B4D3A; color: #fff; font-size: 0.75rem; }
  html.yl-app .va-page .pg-table td:nth-child(2)::before { content: attr(data-label) " "; display: inline; color: rgba(255, 255, 255, .85); font-weight: 600; }
  html.yl-app .va-page .pg-table td:nth-child(2) strong { color: #fff; }
  html.yl-app .va-page .pg-table td:nth-child(3) { grid-area: area; color: var(--color-muted); font-size: 0.8125rem; }
  html.yl-app .va-page .pg-table td:nth-child(3)::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356625B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  html.yl-app .va-page .pg-table td:nth-child(4) { grid-area: member; color: var(--color-primary); font-size: 0.9375rem; font-weight: 700; }
  html.yl-app .va-page .pg-table td:nth-child(5) { grid-area: phone; margin-top: 8px; }
  html.yl-app .va-page .pg-table td:nth-child(5) a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 999px; background: #E3F0E7; color: #1B4D3A; font-size: 0.875rem; font-weight: 700; text-decoration: none; }
}

/* ===== Privacy Policy in the app (same look as About): gradient header, jump chips, section cards ===== */
@media (max-width: 899px) {

  html.yl-app .standalone-page:has(.privacy-page) { position: relative; z-index: 2; margin-top: -44px; padding: 0 var(--sp-4) var(--sp-5); background: none; }
  html.yl-app .privacy-page { padding: 0; background: none; }
  
  html.yl-app .privacy-page .pv-updated { margin: 0 0 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--color-muted); font-size: 0.75rem; text-align: center; box-shadow: 0 2px 8px rgba(26, 34, 30, .06); }
  html.yl-app .privacy-page .pv-layout { display: flex; flex-direction: column; gap: 12px; }
  html.yl-app .privacy-page .pv-toc { position: static; max-height: none; padding: 0; border: 0; background: none; box-shadow: none; }
  html.yl-app .privacy-page .pv-toc-h { display: none; }
  html.yl-app .privacy-page .pv-toc ol, html.yl-app .privacy-page .pv-toc ul { display: flex; gap: 8px; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) 2px; overflow-x: auto; list-style: none; scrollbar-width: none; }
  html.yl-app .privacy-page .pv-toc ol::-webkit-scrollbar, html.yl-app .privacy-page .pv-toc ul::-webkit-scrollbar { display: none; }
  html.yl-app .privacy-page .pv-toc a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--color-primary); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; text-decoration: none; box-shadow: 0 2px 8px rgba(26, 34, 30, .08); }
  html.yl-app .privacy-page .pv-num { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #E3F0E7; color: #1B4D3A; font-size: 0.75rem; font-weight: 800; }
  html.yl-app .privacy-page .pv-main { display: flex; flex-direction: column; gap: 12px; }
  html.yl-app .privacy-page .pv-card { padding: 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); scroll-margin-top: 14px; }
  html.yl-app .privacy-page .pv-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--color-primary); font-size: 1.0625rem; line-height: 1.25; }
  html.yl-app .privacy-page .pv-card p, html.yl-app .privacy-page .pv-card li { color: var(--color-text); font-size: 0.875rem; line-height: 1.55; text-align: left; }
  html.yl-app .privacy-page .pv-card ul { padding-left: 18px; }
  html.yl-app .privacy-page .pv-contact { background: linear-gradient(135deg, #1B4D3A, #2C6F52); }
  html.yl-app .privacy-page .pv-contact h2, html.yl-app .privacy-page .pv-contact p, html.yl-app .privacy-page .pv-contact a { color: #fff; }
}

/* ===== Our Story in the app (mock layout): gradient header, jump chips, timeline and tiles ===== */
@media (max-width: 899px) {

  html.yl-app .os-page { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin-top: -44px; padding: 0 var(--sp-4) var(--sp-5); background: none; }

  

  html.yl-app .os-page .pg-head h2::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #E3F0E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4D3A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 18px no-repeat; }

  html.yl-app .os-page .pg-timeline { position: relative; display: grid; gap: 12px; padding-left: 18px; }
  html.yl-app .os-page .pg-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: #BFD9C8; }
  html.yl-app .os-page .pg-tl { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; box-shadow: none; }
  html.yl-app .os-page .pg-tl::before { content: ""; position: absolute; left: -18px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #1B4D3A; }
  html.yl-app .os-page .pg-tl--open::before { background: #D9A441; }
  html.yl-app .os-page .pg-year { justify-self: start; padding: 4px 12px; border-radius: 999px; background: #E3F0E7; color: #1B4D3A; font-size: 0.8125rem; font-weight: 800; }
  html.yl-app .os-page .pg-tl h3 { margin: 2px 0 0; color: var(--color-primary); font-size: 0.9375rem; }
  html.yl-app .os-page .pg-tl p { margin: 0; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.5; text-align: left; }
  html.yl-app .os-page .pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.yl-app .os-page .pg-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; background: #F8FBF9; text-decoration: none; box-shadow: 0 2px 10px rgba(26, 34, 30, .06); }
  html.yl-app .os-page .pg-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FCE9D6; color: #B5601A; }
  html.yl-app .os-page .pg-card:nth-child(2) .pg-ic { background: #DDF0E3; color: #1F6B45; } html.yl-app .os-page .pg-card:nth-child(3) .pg-ic { background: #E7DFF7; color: #5B3AA6; } html.yl-app .os-page .pg-card:nth-child(4) .pg-ic { background: #D9EDF2; color: #1F6F82; }
  html.yl-app .os-page .pg-card h3 { margin: 0; color: var(--color-primary); font-size: 0.9375rem; line-height: 1.25; }
  html.yl-app .os-page .pg-card p { margin: 0; color: var(--color-muted); font-size: 0.75rem; line-height: 1.4; }
}

/* App home: Next event as a photo card */
@media (max-width: 899px) {
  html.yl-app .yl-apphome .ah-event.ah-event--card { position: relative; display: flex; align-items: flex-end; min-height: 190px; padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: linear-gradient(135deg, #1B4D3A, #2C6F52); box-shadow: 0 6px 20px rgba(26, 34, 30, .18); text-decoration: none; }
  html.yl-app .ah-ev-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2); }
  html.yl-app .ah-event--card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 51, 38, .1) 0%, rgba(14, 51, 38, .35) 45%, rgba(8, 28, 20, .86) 100%); }
  html.yl-app .ah-ev-over { position: relative; z-index: 1; display: grid; gap: 6px; width: 100%; padding: 14px 58px 14px 14px; }
  html.yl-app .ah-ev-top { display: flex; flex-wrap: wrap; gap: 6px; }
  html.yl-app .ah-ev-top em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 0.6875rem; font-style: normal; font-weight: 800; letter-spacing: .02em; }
  html.yl-app .ah-ev-date { background: #D9A441; color: #2B1F05; }
  html.yl-app .ah-ev-date .btn-ic { width: 13px; height: 13px; }
  html.yl-app .ah-ev-type { background: rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  html.yl-app .ah-ev-title { color: #fff; font-size: 1.1875rem; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
  html.yl-app .ah-ev-venue { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .92); font-size: 0.8125rem; }
  html.yl-app .ah-ev-venue .btn-ic { width: 14px; height: 14px; }
  html.yl-app .ah-ev-go { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1B4D3A; }
  html.yl-app .ah-ev-go .btn-ic { width: 18px; height: 18px; }
}

/* More sheet: YouTube link, app version hidden */
@media (max-width: 899px) {
  html.yl-app .yl-more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  html.yl-app .yl-more-links a.yl-more-yt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #FDE4E1; color: #C4302B; font-weight: 700; text-decoration: none; }
}
@media (max-width: 899px) {
  html.yl-app .ah-event--card::before { display: none; }
  html.yl-app .ah-event--card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8, 28, 20, .25) 0%, rgba(8, 28, 20, .45) 38%, rgba(8, 28, 20, .9) 100%); pointer-events: none; }
  html.yl-app .yl-apphome .ah-event--card .ah-ev-over span, html.yl-app .yl-apphome .ah-event--card .ah-ev-title span { color: inherit; font-size: inherit; }
  html.yl-app .yl-apphome .ah-event--card .ah-ev-title { display: block; color: #fff; font-size: 1.1875rem; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
  html.yl-app .yl-apphome .ah-event--card .ah-ev-venue { color: #fff; font-size: 0.8125rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
  html.yl-app .yl-apphome .ah-event--card .ah-ev-type { background: rgba(0, 0, 0, .45); color: #fff; font-size: 0.6875rem; }
  html.yl-app .yl-apphome .ah-event--card .ah-ev-date { color: #2B1F05; font-size: 0.6875rem; }
}

@media (max-width: 899px) {
  html.yl-app .yl-tabbar a > span, html.yl-app .yl-tabbar button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; }
}

/* ===== Search results in the app: gradient header, pill search bar, result cards ===== */
@media (max-width: 899px) {

  html.yl-app .standalone-page:has(.yl-search) { position: relative; z-index: 2; margin-top: -44px; padding: 0 var(--sp-4) var(--sp-5); background: none; }
  html.yl-app .standalone-page:has(.yl-search) .page-content { padding: 0; background: none; }
  html.yl-app .standalone-page:has(.yl-search) .container { width: 100%; max-width: none; padding: 0; }
  html.yl-app .yl-search { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 5px 5px 14px; border: 1px solid #fff; border-radius: 999px; background: #fff; box-shadow: 0 3px 14px rgba(26, 34, 30, .1); }
  html.yl-app .yl-search-ic { display: inline-flex; color: var(--color-muted); }
  html.yl-app .yl-search input[type="search"] { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: var(--color-text); font: inherit; font-size: 0.9375rem; outline: none; box-shadow: none; }
  html.yl-app .yl-search .btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #2F7A58, #1B4D3A); color: #fff; font-size: 0.875rem; font-weight: 700; box-shadow: none; }
  html.yl-app .standalone-page:has(.yl-search) .news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.yl-app .standalone-page:has(.yl-search) .news-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(26, 34, 30, .07); overflow: hidden; }
  html.yl-app .standalone-page:has(.yl-search) .news-card .img-placeholder { width: 96px; height: 96px; min-height: 0; border-radius: 12px; overflow: hidden; }
  html.yl-app .standalone-page:has(.yl-search) .news-card .img-placeholder img { width: 100%; height: 100%; object-fit: cover; }
  html.yl-app .standalone-page:has(.yl-search) .news-card .news-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 34px 0 0; }
  html.yl-app .standalone-page:has(.yl-search) .news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 0.75rem; color: var(--color-muted); }
  html.yl-app .standalone-page:has(.yl-search) .news-meta .badge { padding: 2px 10px; border-radius: 999px; background: #E3F0E7; color: #1B4D3A; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
  html.yl-app .standalone-page:has(.yl-search) .news-card h3 { margin: 0; font-size: 0.9375rem; line-height: 1.3; }
  html.yl-app .standalone-page:has(.yl-search) .news-card h3 a { color: var(--color-primary); text-decoration: none; }
  html.yl-app .standalone-page:has(.yl-search) .news-card h3 a::after { content: ""; position: absolute; inset: 0; }
  html.yl-app .standalone-page:has(.yl-search) .news-card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: #1B4D3A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 15px no-repeat; }
  html.yl-app .standalone-page:has(.yl-search) .events-empty { padding: 18px; border-radius: 18px; background: #fff; color: var(--color-muted); text-align: center; }
  html.yl-app .standalone-page:has(.yl-search) .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
  html.yl-app .standalone-page:has(.yl-search) .page-numbers { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--color-primary); font-weight: 700; text-decoration: none; }
  html.yl-app .standalone-page:has(.yl-search) .page-numbers.current { background: #1B4D3A; color: #fff; }
}

/* app: the gold buttons get the same richer gold */
html.yl-app .nl-fbtn, html.yl-app .ys-fab { background: linear-gradient(180deg, #F7CB55 0%, #E6A82B 55%, #D18E19 100%) !important; color: #1F1604 !important; box-shadow: 0 6px 16px rgba(201, 138, 46, .42), inset 0 1px 0 rgba(255, 255, 255, .55) !important; }
html.yl-app .nl-fbtn .btn-ic, html.yl-app .ys-fab .btn-ic { color: #1F1604 !important; }
html.yl-app .ev-hero--post { display: none; }

/* ---------- App home tiles, as in the design: a big glossy coin with leaves behind it, the label, a tinted chevron, a faint leaf ---------- */
@media (max-width: 899px) {
html.yl-app .yl-apphome .ah-hero .ah-grid { gap: 10px; padding: 12px; background: rgba(255, 255, 255, .34); border: 1px solid rgba(255, 255, 255, .65); border-radius: 26px; backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); box-shadow: 0 12px 34px rgba(0, 0, 0, .2); }
html.yl-app .yl-apphome .ah-hero .ah-gt { position: relative; isolation: isolate; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 118px; padding: 12px 10px 12px 12px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 70'><g fill='%23A9C58A' fill-opacity='.3'><path d='M52 6C28 12 12 30 10 58c24-6 38-24 42-52Z'/></g><path d='M52 6C38 24 24 42 10 58' stroke='%23fff' stroke-opacity='.7' stroke-width='1.5' fill='none'/></svg>") right 6px top 6px / 30px 36px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(246, 249, 238, .88)); box-shadow: 0 6px 16px rgba(30, 60, 40, .12); text-align: left; }
html.yl-app .yl-apphome .ah-hero .ah-gt::before { content: ""; position: absolute; left: 2px; top: 22px; width: 24px; height: 30px; z-index: -1; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 70'><defs><linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2377B24A'/><stop offset='1' stop-color='%231F6B3D'/></linearGradient></defs><path d='M30 6C10 12 4 32 8 50c18-4 28-18 22-44Z' fill='url(%23a)'/><path d='M22 66C10 52 12 36 26 26c14 14 12 30-4 40Z' fill='url(%23a)' fill-opacity='.9'/><path d='M30 8C22 22 16 34 10 48' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' fill='none'/></svg>") center / contain no-repeat; }
html.yl-app .yl-apphome .ah-hero .ah-gt::after { content: "\203A"; position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tb, #E0F0E6); color: var(--tc, #1F6B45); font-size: 1.25rem; font-weight: 800; line-height: 1; padding-bottom: 2px; box-sizing: border-box; }
html.yl-app .yl-apphome .ah-hero .ah-gi { width: 50px; height: 50px; margin-left: 6px; box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(26, 34, 30, .25), inset 0 1px 0 rgba(255, 255, 255, .35); }
html.yl-app .yl-apphome .ah-hero .ah-gi .btn-ic { width: 24px; height: 24px; }
html.yl-app .yl-apphome .ah-hero .ah-gl { margin-top: auto; padding-right: 22px; font-size: .875rem; font-weight: 800; line-height: 1.2; text-align: left; color: #14543A; }
html[data-lang="te"].yl-app .yl-apphome .ah-hero .ah-gl { font-size: 1rem; line-height: 1.3; }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-lotus) { --tc: #B8386F; --tb: #FBE3EE; }
html.yl-app .yl-apphome .ah-hero .ah-g-lotus { background: radial-gradient(circle at 35% 25%, #E0559B 0%, #B0306E 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-green) { --tc: #1F6B45; --tb: #E0F0E6; }
html.yl-app .yl-apphome .ah-hero .ah-g-green { background: radial-gradient(circle at 35% 25%, #2F8A62 0%, #1B5A3E 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-marigold) { --tc: #D9741A; --tb: #FDEBD0; }
html.yl-app .yl-apphome .ah-hero .ah-g-marigold { background: radial-gradient(circle at 35% 25%, #FBA83C 0%, #E5740F 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-terra) { --tc: #B5532E; --tb: #F9E3D8; }
html.yl-app .yl-apphome .ah-hero .ah-g-terra { background: radial-gradient(circle at 35% 25%, #E27A4A 0%, #B9501F 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-tank) { --tc: #1F7C8F; --tb: #D9EEF3; }
html.yl-app .yl-apphome .ah-hero .ah-g-tank { background: radial-gradient(circle at 35% 25%, #4DB4D1 0%, #1C7098 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-gold) { --tc: #C98A2E; --tb: #FBEFD0; }
html.yl-app .yl-apphome .ah-hero .ah-g-gold { background: radial-gradient(circle at 35% 25%, #F2B84A 0%, #D18A1F 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-indigo) { --tc: #5B3AA6; --tb: #E8E3F6; }
html.yl-app .yl-apphome .ah-hero .ah-g-indigo { background: radial-gradient(circle at 35% 25%, #8B5BD6 0%, #4B2A9A 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-brown) { --tc: #8A5232; --tb: #F2E4D9; }
html.yl-app .yl-apphome .ah-hero .ah-g-brown { background: radial-gradient(circle at 35% 25%, #B0693E 0%, #7A4326 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-deep) { --tc: #2A7A52; --tb: #DFF0E6; }
html.yl-app .yl-apphome .ah-hero .ah-g-deep { background: radial-gradient(circle at 35% 25%, #3C9A6A 0%, #256349 100%); }
}

/* ---------- App home tiles, version 2: each tile is tinted in its own colour with a soft wave, a glossy coin, a faint outline icon and a white chevron (no leaves) ---------- */
@media (max-width: 899px) {
html.yl-app .yl-apphome .ah-hero .ah-gt { overflow: hidden; background: linear-gradient(180deg, var(--t1, #E8F4EA) 0%, var(--t2, #CFE8D3) 100%); border: 1px solid rgba(255, 255, 255, .9); min-height: 124px; }
html.yl-app .yl-apphome .ah-hero .ah-gt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 44%; width: auto; height: auto; z-index: -1; background: var(--wv, #B5DBBC); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><path d='M0 46C34 30 62 36 96 56S164 78 200 40V100H0Z' fill='black'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><path d='M0 46C34 30 62 36 96 56S164 78 200 40V100H0Z' fill='black'/></svg>") center / 100% 100% no-repeat; }
html.yl-app .yl-apphome .ah-hero .ah-gt::after { background: #fff; color: var(--tc, #1F6B45); box-shadow: 0 3px 8px rgba(30, 60, 40, .2); }
html.yl-app .yl-apphome .ah-hero .ah-ghost { position: absolute; top: 8px; right: 10px; z-index: 0; display: block; width: 34px; height: 34px; color: var(--tc, #1F6B45); opacity: .22; pointer-events: none; }
html.yl-app .yl-apphome .ah-hero .ah-ghost svg { width: 100%; height: 100%; }
html.yl-app .yl-apphome .ah-hero .ah-gi { position: relative; z-index: 1; width: 54px; height: 54px; margin-left: 2px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 8px 14px rgba(26, 34, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .4); }
html.yl-app .yl-apphome .ah-hero .ah-gl { position: relative; z-index: 1; }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-lotus) { --tc: #B8386F; --t1: #FCEAF2; --t2: #F6CFE0; --wv: #F2BCD3; }
html.yl-app .yl-apphome .ah-hero .ah-g-lotus { background: radial-gradient(circle at 35% 25%, #E0559B 0%, #A62A66 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-green) { --tc: #1F6B45; --t1: #E8F4EA; --t2: #CFE8D3; --wv: #B5DBBC; }
html.yl-app .yl-apphome .ah-hero .ah-g-green { background: radial-gradient(circle at 35% 25%, #2F9A62 0%, #176A44 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-marigold) { --tc: #D9741A; --t1: #FEF2DC; --t2: #F7E0B2; --wv: #F1D08E; }
html.yl-app .yl-apphome .ah-hero .ah-g-marigold { background: radial-gradient(circle at 35% 25%, #FBA83C 0%, #DF6F0C 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-terra) { --tc: #B5532E; --t1: #FCEDE0; --t2: #F3D6BB; --wv: #EBC49C; }
html.yl-app .yl-apphome .ah-hero .ah-g-terra { background: radial-gradient(circle at 35% 25%, #E27A4A 0%, #A94A1B 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-tank) { --tc: #1F7C8F; --t1: #E6F4FA; --t2: #C4E4F2; --wv: #A2D4EA; }
html.yl-app .yl-apphome .ah-hero .ah-g-tank { background: radial-gradient(circle at 35% 25%, #3AA6CC 0%, #14639A 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-gold) { --tc: #C98A2E; --t1: #FEF3D8; --t2: #F7E1A9; --wv: #F0D48C; }
html.yl-app .yl-apphome .ah-hero .ah-g-gold { background: radial-gradient(circle at 35% 25%, #F2B84A 0%, #C98017 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-indigo) { --tc: #5B3AA6; --t1: #F3EBFB; --t2: #DCCBF3; --wv: #C9B0EC; }
html.yl-app .yl-apphome .ah-hero .ah-g-indigo { background: radial-gradient(circle at 35% 25%, #9A66E0 0%, #4B2A9A 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-brown) { --tc: #8A5232; --t1: #F8EDE3; --t2: #EBD5C1; --wv: #DEC0A6; }
html.yl-app .yl-apphome .ah-hero .ah-g-brown { background: radial-gradient(circle at 35% 25%, #B0693E 0%, #74401F 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-deep) { --tc: #2A7A52; --t1: #E8F4EA; --t2: #CFE8D3; --wv: #B5DBBC; }
html.yl-app .yl-apphome .ah-hero .ah-g-deep { background: radial-gradient(circle at 35% 25%, #3C9A6A 0%, #1F6B45 100%); }
}
@media (max-width: 899px) {
html.yl-app .yl-apphome .ah-hero .ah-gt::after { display: none; }
html.yl-app .yl-apphome .ah-hero .ah-gl { padding-right: 0; }
}

/* App home: all nine tiles are visible above the bottom menu bar without scrolling (the layout shrinks to the screen height); the faint outline icons are gone */
@media (max-width: 899px) {
  html.yl-app .yl-apphome .ah-ghost { display: none !important; }
  html.yl-app .yl-apphome .ah-hero { min-height: calc(100svh - 62px - env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
  html.yl-app .yl-apphome .ah-top { margin-bottom: clamp(4px, 1.2svh, 12px); }
  html.yl-app .yl-apphome .ah-name { font-size: clamp(1.75rem, 4.6svh, 2.5rem); }
  html[data-lang="te"].yl-app .yl-apphome .ah-name { font-size: clamp(1.6rem, 4.2svh, 2.25rem); }
  html.yl-app .yl-apphome .ah-sub { margin: 2px 0 clamp(6px, 1.4svh, 14px); font-size: .875rem; }
  html.yl-app .yl-apphome .ah-search input { padding-block: clamp(9px, 1.5svh, 13px); }
  html.yl-app .yl-apphome .ah-hero .ah-gridwrap { flex: 1 1 auto; display: flex; min-height: 0; max-height: 520px; margin-top: clamp(8px, 1.6svh, 16px); }
  html.yl-app .yl-apphome .ah-hero .ah-grid { flex: 1; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.1svh, 10px); padding: clamp(8px, 1.3svh, 12px); }
  html.yl-app .yl-apphome .ah-hero .ah-gt { min-height: 0; padding: clamp(6px, 1.2svh, 12px) 10px; justify-content: space-between; }
  html.yl-app .yl-apphome .ah-hero .ah-gi { width: clamp(38px, 6.6svh, 54px); height: clamp(38px, 6.6svh, 54px); }
  html.yl-app .yl-apphome .ah-hero .ah-gi .btn-ic { width: clamp(18px, 3svh, 24px); height: clamp(18px, 3svh, 24px); }
  html.yl-app .yl-apphome .ah-hero .ah-gl { margin-top: 0; font-size: clamp(.75rem, 1.7svh, .875rem); }
  html[data-lang="te"].yl-app .yl-apphome .ah-hero .ah-gl { font-size: clamp(.8125rem, 1.9svh, 1rem); }
}
@media (max-width: 899px) and (max-height: 700px) { html.yl-app .yl-apphome .ah-sub { display: none; } }

/* App home: the wide "Courses" tile under the nine tiles */
@media (max-width: 899px) {
html.yl-app .yl-apphome .ah-hero .ah-g-teal { background: radial-gradient(circle at 35% 25%, #2BB3A3 0%, #0E6F66 100%); }
html.yl-app .yl-apphome .ah-hero .ah-gt:has(.ah-g-teal) { --tc: #0E6F66; --t1: #E4F5F2; --t2: #C6E8E3; --wv: #A9DAD3; }
html.yl-app .yl-apphome .ah-hero .ah-gt--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 8px 16px; }
html.yl-app .yl-apphome .ah-hero .ah-gt--wide .ah-gl { margin: 0; display: grid; gap: 1px; text-align: left; }
html.yl-app .yl-apphome .ah-hero .ah-gt--wide .ah-gs { color: #3F5A52; font-size: .75rem; font-weight: 500; line-height: 1.2; }
html.yl-app .yl-apphome .ah-hero .ah-grid:has(.ah-gt--wide) { grid-template-rows: repeat(3, minmax(0, 1fr)) minmax(0, .55fr); }
}

/* App: a single course looks like a single News post (photo header, title and facts, tabs); the website hero is hidden */
@media (max-width: 899px) {
html.yl-app .yellanda-course-page .cr-hero { display: none; }
html.yl-app .yellanda-course-page .cr-body-wrap { margin-top: 0; padding: 0 0 var(--sp-5); border-radius: 0; background: none; }
html.yl-app .yellanda-course-page .cr-grid2 { display: block; padding: 0 var(--sp-4); }
html.yl-app .yellanda-course-page .cr-left, html.yl-app .yellanda-course-page .cr-right { display: grid; gap: 12px; }
html.yl-app .yl-sa .cr-left > .cr-card2, html.yl-app .yl-sa .cr-right { display: none; }
html.yl-app .yl-sa[data-act="details"] .cr-left > .cr-card2:not(.cr-lessons), html.yl-app .yl-sa[data-act="lessons"] .cr-left > .cr-lessons { display: block; }
html.yl-app .yl-sa[data-act="enrol"] .cr-right { display: grid; }
html.yl-app .yellanda-course-page .cr-card2, html.yl-app .yellanda-course-page .cr-enrol { padding: 16px; border-radius: 18px; box-shadow: 0 2px 10px rgba(26, 34, 30, .07); }
html.yl-app .yellanda-course-page .cr-card2 h2, html.yl-app .yellanda-course-page .cr-enrol h2 { margin: 0 0 10px; font-size: 1.0625rem; }
html.yl-app .yellanda-course-page .cr-share { display: none; }
html.yl-app .yellanda-course-page .yl-sa-meta { display: none; }
html.yl-app .yellanda-course-page .yl-sa-facts { margin-bottom: 14px; }
html.yl-app .yellanda-course-page .yl-sa-tabs { margin-bottom: 14px; }
html.yl-app .yellanda-course-page .yl-sa-share { margin: 14px var(--sp-4) 0; }
}

/* ---------- App feel: pages slide in and out like a phone app ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html.yl-app .yl-tabbar { view-transition-name: yl-tabbar; }
  ::view-transition-group(yl-tabbar) { animation: none; }
  ::view-transition-old(root) { animation: yl-pg-out .30s cubic-bezier(.4, 0, .2, 1) both; }
  ::view-transition-new(root) { animation: yl-pg-in .34s cubic-bezier(.2, .8, .2, 1) both; }
  html:active-view-transition-type(back)::view-transition-old(root) { animation: yl-pg-back-out .30s cubic-bezier(.4, 0, .2, 1) both; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation: yl-pg-back-in .34s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes yl-pg-in { from { transform: translateX(34%); opacity: .4; } to { transform: none; opacity: 1; } }
  @keyframes yl-pg-out { to { transform: translateX(-14%); opacity: .55; } }
  @keyframes yl-pg-back-in { from { transform: translateX(-14%); opacity: .55; } to { transform: none; opacity: 1; } }
  @keyframes yl-pg-back-out { to { transform: translateX(34%); opacity: 0; } }
  /* a press on a card or tile gives a small "push" */
  html.yl-app .ah-gt, html.yl-app .news-card, html.yl-app .cr-card, html.yl-app .event-card, html.yl-app .ys-card, html.yl-app .yl-tabbar a, html.yl-app .yl-tabbar button { transition: transform .14s ease; }
  html.yl-app .ah-gt:active, html.yl-app .news-card:active, html.yl-app .cr-card:active, html.yl-app .event-card:active, html.yl-app .ys-card:active { transform: scale(.97); }
  html.yl-app .yl-tabbar a:active, html.yl-app .yl-tabbar button:active { transform: scale(.92); }
}
/* browsers without page transitions: a short fade-in of the page instead */
@supports not (view-transition-name: x) {
  @media (prefers-reduced-motion: no-preference) { html.yl-app main { animation: yl-pg-fade .28s ease both; } @keyframes yl-pg-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }
}
html.yl-app a, html.yl-app button { -webkit-tap-highlight-color: transparent; }

/* app: no thin progress line at the top, and a clean background behind the home tiles instead of the village photo */
html.yl-app .scroll-progress { display: none !important; }
html.yl-app .ah-hero { background: linear-gradient(180deg, #0E3326 0%, #1B4D3A 40%, #E9F3EC 72%, #E9F3EC 100%) !important; border-radius: 0 !important; }
html.yl-app .ah-hero::before, html.yl-app .ah-hero::after { display: none !important; }
html.yl-app .yl-apphome .ah-hero .ah-grid { background: #fff !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 8px 26px rgba(26, 34, 30, .12) !important; }