/* ==========================================================================
   UzbekBoards — portal styles
   Brand tokens: navy / brand blue / gold / teal
   ========================================================================== */

:root {
  --radius: 0.5rem;
  --navy: oklch(27% 0.062 259);
  --navy-deep: oklch(21% 0.055 259);
  --navy-fg: oklch(98% 0.005 255);
  --brand: oklch(56% 0.168 255);
  --brand-hover: oklch(51% 0.168 255);
  --brand-fg: oklch(99% 0.005 255);
  --brand-soft: oklch(56% 0.168 255 / 0.1);
  --gold: oklch(82% 0.16 82);
  --gold-fg: oklch(26% 0.06 259);
  --gold-soft: oklch(82% 0.16 82 / 0.2);
  --gold-ink: oklch(50% 0.12 70);
  --teal: oklch(48% 0.1 172);
  --teal-soft: oklch(48% 0.1 172 / 0.12);
  --danger: oklch(57.7% 0.2 27);
  --danger-soft: oklch(57.7% 0.2 27 / 0.1);
  --background: oklch(97.5% 0.006 245);
  --foreground: oklch(24% 0.04 259);
  --card: oklch(100% 0 0);
  --muted: oklch(95.5% 0.008 245);
  --muted-fg: oklch(52% 0.03 255);
  --accent: oklch(93% 0.03 250);
  --border: oklch(90% 0.012 250);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --shadow-sm: 0 1px 2px oklch(24% 0.04 259 / 0.06);
  --shadow-md: 0 12px 32px -14px oklch(24% 0.04 259 / 0.28);
  --container: 80rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); margin: 0; line-height: 1.22; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
svg.icon { width: 1em; height: 1em; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted-fg); }
.small { font-size: 0.85rem; }
.stack { display: flex; flex-direction: column; gap: 1.5rem; }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy-deep); color: var(--navy-fg); font-size: 0.75rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
.topbar__meta { display: flex; align-items: center; gap: 0.5rem; opacity: 0.9; min-width: 0; }
.topbar__meta span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__motto { display: none; font-family: var(--font-display); font-style: italic; font-size: 0.875rem; }
.topbar__social { display: flex; align-items: center; gap: 0.8rem; opacity: 0.9; font-size: 0.9rem; }
.topbar__social a:hover { color: var(--gold); }
@media (min-width: 768px) { .topbar__motto { display: block; } }

/* ---------- Header ---------- */
.header { background: var(--card); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.logo { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.logo__mark { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--teal)); color: var(--brand-fg); font-weight: 700; font-size: 1.1rem; }
.logo__word { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--navy); }
.logo__word b { color: var(--brand); font-weight: 800; }
.logo__tag { display: block; margin-top: 0.3rem; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted-fg); }
.header__search { display: none; flex: 1; max-width: 26rem; position: relative; }
.header__search input { width: 100%; padding: 0.7rem 1rem 0.7rem 2.5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--muted); outline: none; transition: border-color 0.15s, background 0.15s; }
.header__search input:focus { border-color: var(--brand); background: var(--card); }
.header__search .icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); }
.header__right { display: flex; align-items: center; gap: 0.6rem; }
.header__auth { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .logo__word { font-size: 1.875rem; } }
@media (min-width: 900px) { .header__search { display: block; } }

.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); }
.lang button { border: 0; background: transparent; color: var(--muted-fg); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; padding: 0.38rem 0.7rem; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.lang button[aria-pressed="true"] { background: var(--navy); color: var(--navy-fg); }

.icon-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--navy); font-size: 1.15rem; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.menu-btn { display: grid; }
@media (min-width: 1100px) { .menu-btn { display: none; } }

.user-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.user-chip:hover { border-color: var(--brand); }
.avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
.avatar--lg { width: 4rem; height: 4rem; font-size: 1.4rem; }
.avatar--muted { background: var(--accent); color: var(--navy); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius); padding: 0.7rem 1.15rem; font-weight: 600; font-size: 0.9rem; border: 0; white-space: nowrap; transition: background 0.15s, opacity 0.15s, border-color 0.15s, color 0.15s; }
.btn--sm { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
.btn--brand { background: var(--brand); color: var(--brand-fg); }
.btn--brand:hover { background: var(--brand-hover); }
.btn--navy { background: var(--navy); color: var(--navy-fg); }
.btn--navy:hover { background: var(--navy-deep); }
.btn--gold { background: var(--gold); color: var(--gold-fg); font-weight: 700; }
.btn--gold:hover { opacity: 0.9; }
.btn--outline { background: var(--card); color: var(--navy); box-shadow: inset 0 0 0 1px var(--border); }
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.btn--ghost { background: oklch(100% 0 0 / 0.1); color: var(--navy-fg); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.28); }
.btn--ghost:hover { background: oklch(100% 0 0 / 0.18); }
.btn--block { width: 100%; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline-flex; } }

/* ---------- Nav ---------- */
.nav { background: var(--navy); color: var(--navy-fg); position: sticky; top: 0; z-index: 40; }
.nav .container { display: flex; align-items: stretch; justify-content: space-between; }
.nav__list { display: none; flex-direction: column; width: 100%; padding-block: 0.5rem; }
.nav.is-open .nav__list { display: flex; }
.nav__list a { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.75rem; font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: background 0.15s; }
.nav__list a:hover, .nav__list a.is-active { background: var(--brand); }
.nav__cta { display: none; align-items: center; gap: 0.5rem; background: var(--brand); padding: 0 1.2rem; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.nav__cta:hover { background: var(--brand-hover); }
.nav__mobile { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; font-weight: 600; font-size: 0.9rem; }
.nav.is-open .nav__mobile { display: none; }
.nav__mobile-search { padding: 0.5rem 0 0.75rem; position: relative; }
.nav__mobile-search input { width: 100%; padding: 0.65rem 1rem 0.65rem 2.4rem; border-radius: var(--radius); border: 0; background: oklch(100% 0 0 / 0.12); color: var(--navy-fg); outline: none; }
.nav__mobile-search input::placeholder { color: oklch(98% 0.005 255 / 0.6); }
.nav__mobile-search .icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-65%); opacity: 0.7; }
@media (min-width: 1100px) {
  .nav__mobile, .nav__mobile-search { display: none !important; }
  .nav__list { display: flex; flex-direction: row; width: auto; padding: 0; }
  .nav__list a { padding: 0.9rem 0.7rem; font-size: 0.88rem; }
  .nav__cta { display: flex; }
}
@media (min-width: 1280px) { .nav__list a { padding-inline: 0.85rem; } }

/* ---------- Layout ---------- */
main { padding-block: 1.5rem 3rem; min-height: 60vh; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.home-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.two-col { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.side-col { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) {
  .home-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1.05fr); }
  .two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.grid { display: grid; gap: 1rem; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 0.25rem; }
.sec-head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; font-weight: 700; min-width: 0; }
.sec-head h2 .icon { color: var(--brand); }
.sec-head a { display: flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--brand); white-space: nowrap; }
.sec-head a:hover { text-decoration: underline; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; font-size: 0.78rem; color: var(--muted-fg); }
.meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---------- Hero ---------- */
.hero { padding-top: 1.5rem; }
.hero__card { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 20rem; background: linear-gradient(110deg, var(--navy-deep) 0%, var(--navy) 50%, oklch(45% 0.14 255) 100%); color: var(--navy-fg); }
.hero__sky { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 85% 110%, oklch(82% 0.16 82 / 0.45), transparent 70%), radial-gradient(ellipse 50% 60% at 65% 100%, oklch(65% 0.18 30 / 0.35), transparent 70%); }
.hero__pattern { position: absolute; inset: 0; opacity: 0.07; }
.hero__skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(21% 0.055 259 / 0.9), oklch(21% 0.055 259 / 0.55) 55%, transparent); }
.hero__body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 2rem 1.5rem; min-height: 20rem; max-width: 44rem; }
.hero h1 { color: var(--navy-fg); font-size: clamp(1.75rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.02em; }
.hero__lead { color: oklch(98% 0.005 255 / 0.86); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hero__motto { position: absolute; right: 1.5rem; bottom: 1.25rem; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; opacity: 0.9; display: none; }
.hero__search { position: relative; max-width: 30rem; }
.hero__search input { width: 100%; padding: 0.85rem 7rem 0.85rem 2.6rem; border-radius: var(--radius); border: 0; background: var(--card); color: var(--foreground); outline: none; box-shadow: var(--shadow-md); }
.hero__search > .icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); }
.hero__search button { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); }
@media (min-width: 640px) { .hero__body { padding: 2.5rem; min-height: 24rem; } .hero__card { min-height: 24rem; } }
@media (min-width: 1024px) { .hero__motto { display: block; } }

/* ---------- Covers (generated artwork for news) ---------- */
.cover { position: relative; overflow: hidden; border-radius: var(--radius); display: grid; place-items: center; color: oklch(100% 0 0 / 0.92); isolation: isolate; aspect-ratio: 16 / 10; }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 3l4.5 12.5L37 20l-12.5 4.5L20 37l-4.5-12.5L3 20l12.5-4.5z' fill='none' stroke='white' stroke-opacity='.14'/%3E%3C/svg%3E"); }
.cover .icon { font-size: 2.4rem; filter: drop-shadow(0 4px 12px oklch(0% 0 0 / 0.25)); }
.cover--brand { background: linear-gradient(135deg, oklch(62% 0.16 250), oklch(40% 0.12 262)); }
.cover--navy { background: linear-gradient(135deg, oklch(38% 0.08 258), oklch(20% 0.05 262)); }
.cover--teal { background: linear-gradient(135deg, oklch(60% 0.11 175), oklch(38% 0.08 200)); }
.cover--gold { background: linear-gradient(135deg, oklch(80% 0.15 80), oklch(58% 0.15 45)); }
.cover--sm .icon { font-size: 1.6rem; }
.cover__tag { position: absolute; left: 0.6rem; top: 0.6rem; padding: 0.15rem 0.5rem; border-radius: 4px; background: oklch(0% 0 0 / 0.28); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- News ---------- */
.news-lead { display: grid; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.news-lead .cover { aspect-ratio: 16 / 9; }
.news-lead h3 { font-size: 1.2rem; margin-top: 0.25rem; }
.news-lead p { margin-top: 0.5rem; font-size: 0.93rem; color: var(--muted-fg); }
.news-lead .meta { margin-top: 0.6rem; }
@media (min-width: 640px) { .news-lead { grid-template-columns: 220px minmax(0, 1fr); } .news-lead .cover { aspect-ratio: auto; height: 100%; min-height: 10rem; } }
.news-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.news-row:last-child { border-bottom: 0; padding-bottom: 0; }
.news-row .cover { aspect-ratio: auto; height: 5rem; }
.news-row h3 { font-size: 0.95rem; margin-top: 0.2rem; }
.news-row .meta { margin-top: 0.4rem; }
@media (min-width: 640px) { .news-row { grid-template-columns: 120px minmax(0, 1fr); } .news-row h3 { font-size: 1rem; } }
a.news-lead:hover h3, a.news-row:hover h3, .news-card:hover h3 { color: var(--brand); }

.news-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-card .cover { border-radius: 0; }
.news-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.news-card h3 { font-size: 1.02rem; }
.news-card p { font-size: 0.88rem; color: var(--muted-fg); }
.news-card .meta { margin-top: auto; padding-top: 0.35rem; }

/* Category list (sidebar) */
.cat-list a { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem; border-radius: var(--radius); }
.cat-list a:hover { background: var(--muted); }
.cat-list strong { display: block; font-size: 0.9rem; color: var(--brand); }
.cat-list small { display: block; font-size: 0.78rem; color: var(--muted-fg); }
.bubble { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 1.15rem; }
.bubble--teal { background: var(--teal-soft); color: var(--teal); }
.bubble--gold { background: var(--gold-soft); color: var(--gold-ink); }
.bubble--navy { background: var(--accent); color: var(--navy); }
.bubble--danger { background: var(--danger-soft); color: var(--danger); }

/* Promo cards */
.promo { border-radius: var(--radius); padding: 1.5rem; background: linear-gradient(135deg, var(--navy), var(--brand)); color: var(--navy-fg); }
.promo h2 { color: var(--navy-fg); font-size: 1.2rem; }
.promo p { margin-top: 0.4rem; font-size: 0.9rem; color: oklch(98% 0.005 255 / 0.85); }
.promo .btn { margin-top: 1rem; }
.promo--teal { background: linear-gradient(135deg, var(--teal), oklch(38% 0.08 200)); }
.promo__row { display: flex; justify-content: space-between; gap: 1rem; }
.promo__icon { font-size: 2.2rem; opacity: 0.85; }

.biz-list a { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.biz-list li:last-child a { border-bottom: 0; padding-bottom: 0; }
.biz-list a:hover strong { color: var(--brand); }
.biz-list strong { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--navy); }
.biz-list small { display: block; font-size: 0.78rem; color: var(--muted-fg); }
.biz-list .chev { margin-left: auto; color: var(--muted-fg); }
.initials { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: var(--radius); background: var(--accent); color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; }
.initials--lg { width: 3.2rem; height: 3.2rem; font-size: 1.05rem; }
.verified { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--teal); font-size: 0.75rem; font-weight: 700; }

/* Alert banner */
.alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1.1rem; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid oklch(82% 0.16 82 / 0.5); font-size: 0.9rem; color: var(--navy); }
.alert > .icon { color: var(--gold-ink); font-size: 1.2rem; margin-top: 0.1rem; }
.alert a { color: var(--brand); font-weight: 700; white-space: nowrap; }
.alert--info { background: var(--accent); border-color: transparent; }
.alert--info > .icon { color: var(--brand); }

/* Audience portals */
.aud-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.15rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.aud-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand); }
.aud-card h3 { font-size: 1rem; }
.aud-card p { font-size: 0.85rem; color: var(--muted-fg); }
.aud-card .link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--brand); }
.aud-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .aud-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Guides */
.guide-card { display: flex; gap: 0.9rem; padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); transition: border-color 0.15s, box-shadow 0.2s; }
.guide-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.guide-card h3 { font-size: 0.98rem; }
.guide-card p { font-size: 0.84rem; color: var(--muted-fg); margin-top: 0.2rem; }
.guide-card .meta { margin-top: 0.45rem; }
.steps { counter-reset: step; display: flex; flex-direction: column; }
.steps li { position: relative; display: flex; gap: 1rem; padding-bottom: 1.1rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 999px; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; z-index: 1; }
.steps li::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--border); }
.steps li:last-child::after { display: none; }
.steps li span { padding-top: 0.25rem; font-size: 0.95rem; }

/* Law list */
.law-list a { display: flex; gap: 0.8rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.law-list li:last-child a { border-bottom: 0; }
.law-list a:hover h3 { color: var(--brand); }
.law-list h3 { font-size: 0.95rem; }

/* Forum */
.thread { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; padding: 0.95rem 0; border-bottom: 1px solid var(--border); }
.thread:last-child { border-bottom: 0; }
.thread h3 { font-size: 0.97rem; }
a.thread:hover h3 { color: var(--brand); }
.thread .meta { margin-top: 0.35rem; }
.thread__stats { display: none; text-align: right; font-size: 0.8rem; color: var(--muted-fg); white-space: nowrap; }
.thread__stats strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); }
@media (min-width: 640px) { .thread { grid-template-columns: auto minmax(0, 1fr) auto; } .thread__stats { display: block; } }
.post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.post:last-child { border-bottom: 0; }
.post__author { font-weight: 700; color: var(--navy); font-size: 0.92rem; }
.post__text { margin-top: 0.35rem; font-size: 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-cats a { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.forum-cats a > span { display: flex; align-items: center; gap: 0.6rem; }
.forum-cats a .icon { color: var(--brand); }
.forum-cats a:hover, .forum-cats a.is-active { background: var(--accent); }
.count { font-size: 0.75rem; font-weight: 700; color: var(--muted-fg); background: var(--muted); padding: 0.1rem 0.5rem; border-radius: 999px; }

/* Communities */
.group-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 0; border-bottom: 1px solid var(--border); }
.group-card:last-child { border-bottom: 0; }
.group-card h3 { font-size: 0.95rem; }
.group-card .btn { margin-left: auto; }
.tg { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 999px; background: #229ED9; color: #fff; font-size: 1.05rem; }
.event { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.event:last-child { border-bottom: 0; }
.event__date { display: grid; place-items: center; width: 3.2rem; padding: 0.35rem 0; border-radius: var(--radius); background: var(--navy); color: var(--navy-fg); text-align: center; line-height: 1.1; }
.event__date b { font-family: var(--font-display); font-size: 1.25rem; }
.event__date small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.event h3 { font-size: 0.95rem; }
.hub { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.15rem; border-radius: var(--radius); color: var(--navy-fg); background: linear-gradient(135deg, var(--navy), var(--brand)); min-height: 9rem; }
.hub:nth-child(2) { background: linear-gradient(135deg, var(--navy-deep), var(--teal)); }
.hub:nth-child(3) { background: linear-gradient(135deg, var(--navy), oklch(58% 0.15 45)); }
.hub:nth-child(4) { background: linear-gradient(135deg, var(--navy-deep), oklch(48% 0.14 290)); }
.hub h3 { color: var(--navy-fg); font-size: 1.2rem; }
.hub p { font-size: 0.87rem; color: oklch(98% 0.005 255 / 0.85); }
.hub .kicker { color: var(--gold); }

/* Official sources */
.official { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .official { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.official a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); transition: border-color 0.15s; }
.official a:hover { border-color: var(--brand); }
.official strong { font-family: var(--font-display); color: var(--navy); display: flex; align-items: center; gap: 0.3rem; }
.official strong .icon { font-size: 0.8em; color: var(--muted-fg); }
.official small { font-size: 0.78rem; color: var(--muted-fg); }

/* Quick links */
.quick { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
@media (min-width: 640px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .quick { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.quick a { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
@media (min-width: 1024px) { .quick a { border-bottom: 0; border-right: 1px solid var(--border); } .quick li:last-child a { border-right: 0; } }
.quick a:hover { background: var(--muted); }
.quick strong { display: block; font-size: 0.9rem; color: var(--navy); }
.quick small { display: block; font-size: 0.78rem; color: var(--muted-fg); }

/* ---------- Page header ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.crumbs { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--muted-fg); margin-bottom: 0.5rem; }
.crumbs a:hover { color: var(--brand); }
.page-head h1 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.6rem; }
.page-head h1 .icon { color: var(--brand); }
.page-head p { color: var(--muted-fg); margin-top: 0.35rem; max-width: 40rem; }
.banner { position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.75rem 1.5rem; margin-bottom: 1.5rem; color: var(--navy-fg); background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, var(--brand)); }
.banner h1 { color: var(--navy-fg); font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; display: flex; align-items: center; gap: 0.6rem; }
.banner p { color: oklch(98% 0.005 255 / 0.85); margin-top: 0.4rem; max-width: 42rem; }
.banner .crumbs { color: oklch(98% 0.005 255 / 0.7); }
.banner__icon { position: absolute; right: -1rem; bottom: -2rem; font-size: 10rem; opacity: 0.08; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.25rem; }
.field-search { position: relative; flex: 1 1 16rem; }
.field-search input { width: 100%; padding: 0.65rem 0.9rem 0.65rem 2.4rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); outline: none; }
.field-search input:focus { border-color: var(--brand); }
.field-search .icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); }
.select { padding: 0.65rem 2rem 0.65rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center; appearance: none; outline: none; min-width: 0; }
.select:focus { border-color: var(--brand); }
.toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 600; color: var(--navy); cursor: pointer; user-select: none; }
.toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
.pills { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1.25rem; scrollbar-width: thin; }
.pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 0.85rem; font-weight: 600; color: var(--navy); transition: all 0.15s; }
.pill:hover { border-color: var(--brand); color: var(--brand); }
.pill.is-active { background: var(--navy); border-color: var(--navy); color: var(--navy-fg); }
.result-count { font-size: 0.85rem; color: var(--muted-fg); margin-bottom: 0.75rem; }

/* ---------- Directory ---------- */
.pro { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.15rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); transition: box-shadow 0.2s; }
.pro:hover { box-shadow: var(--shadow-md); }
.pro__head { display: flex; gap: 0.8rem; align-items: flex-start; }
.pro h3 { font-size: 1rem; }
.pro__type { font-size: 0.78rem; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 0.3rem; }
.pro__spec { font-size: 0.9rem; }
.pro__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.stars { color: var(--gold-ink); font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; color: var(--navy); }
.chip--brand { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.chip--teal { background: var(--teal-soft); border-color: transparent; color: var(--teal); }
.chip--gold { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); }
.phone { font-family: var(--font-display); font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---------- Listings ---------- */
.listing { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding: 1.1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); transition: box-shadow 0.2s; }
.listing:hover { box-shadow: var(--shadow-md); }
.listing h3 { font-size: 1rem; }
.listing__price { font-family: var(--font-display); font-weight: 800; color: var(--teal); font-size: 1.05rem; }
.listing__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
@media (min-width: 640px) { .listing { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .listing__foot { grid-column: auto; flex-direction: column; align-items: flex-end; } }

/* ---------- Article ---------- */
.article { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.article .cover { aspect-ratio: 21 / 9; border-radius: 0; }
.article .cover .icon { font-size: 4rem; }
.article__body { padding: 1.5rem 1.25rem 2rem; }
@media (min-width: 640px) { .article__body { padding: 2rem 2.5rem 2.5rem; } }
.article h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.015em; margin: 0.4rem 0 0.8rem; }
.article__lead { font-size: 1.1rem; color: var(--muted-fg); margin-bottom: 1.25rem; }
.article__text p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.1rem; }
.article__foot { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.source-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--brand); }
.source-link:hover { text-decoration: underline; }

/* ---------- Profile ---------- */
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.profile-head h1 { font-size: 1.6rem; }

/* ---------- Empty / 404 ---------- */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted-fg); }
.empty .icon { font-size: 2.5rem; color: var(--border); margin-bottom: 0.5rem; }

/* ---------- Forms & dialogs ---------- */
dialog { border: 0; padding: 0; border-radius: 0.9rem; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); box-shadow: 0 30px 80px -20px oklch(0% 0 0 / 0.45); color: var(--foreground); background: var(--card); }
dialog::backdrop { background: oklch(21% 0.055 259 / 0.6); backdrop-filter: blur(3px); }
dialog[open] { animation: pop 0.22s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.dlg__head { position: relative; padding: 1.5rem 1.5rem 0; }
.dlg__head h2 { font-size: 1.3rem; padding-right: 2rem; }
.dlg__head p { font-size: 0.88rem; color: var(--muted-fg); margin-top: 0.35rem; }
.dlg__close { position: absolute; right: 1rem; top: 1rem; }
.dlg__body { padding: 1.25rem 1.5rem 1.5rem; }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; margin: 1rem 1.5rem 0; background: var(--muted); border-radius: var(--radius); }
.tabs2 button { border: 0; background: transparent; padding: 0.55rem; border-radius: calc(var(--radius) - 2px); font-weight: 700; font-size: 0.9rem; color: var(--muted-fg); }
.tabs2 button[aria-selected="true"] { background: var(--card); color: var(--navy); box-shadow: var(--shadow-sm); }
.form { display: flex; flex-direction: column; gap: 0.9rem; }
.form-row { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .form-row { grid-template-columns: 1.4fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.field input, .field select, .field textarea { width: 100%; padding: 0.65rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.field select { appearance: none; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.field small { font-size: 0.75rem; color: var(--muted-fg); }
.check { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.85rem; cursor: pointer; }
.check input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--brand); flex-shrink: 0; }
.form-error { display: none; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-size: 0.85rem; font-weight: 600; }
.form-error.is-visible { display: block; }
.form-switch { text-align: center; font-size: 0.87rem; color: var(--muted-fg); }
.form-switch button { border: 0; background: none; color: var(--brand); font-weight: 700; padding: 0; }
.form-note { display: flex; gap: 0.4rem; align-items: center; font-size: 0.75rem; color: var(--muted-fg); }

/* Members-only gate */
.gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--accent); }
.gate p { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--navy); font-size: 0.92rem; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none; width: calc(100% - 2rem); }
.toast { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.1rem; border-radius: 999px; background: var(--navy); color: var(--navy-fg); font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow-md); animation: toastIn 0.25s ease; max-width: 100%; }
.toast .icon { color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: var(--navy-fg); margin-top: 1rem; }
.footer__grid { display: grid; gap: 2rem; padding-block: 2.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }
.footer h2 { color: var(--navy-fg); font-size: 0.95rem; margin-bottom: 0.85rem; }
.footer__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.footer__brand b { color: oklch(72% 0.13 255); }
.footer__motto { font-family: var(--font-display); font-style: italic; color: var(--gold); margin: 0.2rem 0 0.75rem; }
.footer p, .footer li { color: oklch(98% 0.005 255 / 0.72); font-size: 0.9rem; }
.footer li { padding: 0.2rem 0; }
.footer a:hover { color: var(--navy-fg); text-decoration: underline; }
.footer__social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer__social a { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: oklch(100% 0 0 / 0.1); }
.footer__social a:hover { background: var(--brand); text-decoration: none; }
.newsletter { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.newsletter input { flex: 1; min-width: 0; padding: 0.65rem 0.8rem; border-radius: var(--radius); border: 1px solid oklch(100% 0 0 / 0.18); background: oklch(100% 0 0 / 0.08); color: var(--navy-fg); outline: none; }
.newsletter input::placeholder { color: oklch(98% 0.005 255 / 0.55); }
.newsletter input:focus { border-color: var(--brand); }
.footer__bottom { border-top: 1px solid oklch(100% 0 0 / 0.1); }
.footer__bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1rem; font-size: 0.8rem; color: oklch(98% 0.005 255 / 0.6); }
.footer__bottom a { margin-left: 1rem; }

/* ---------- Motion ---------- */
.page-enter { animation: pageIn 0.3s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 479px) {
  .header .container { gap: 0.5rem; }
  .logo { gap: 0.5rem; }
  .logo__mark { width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }
  .logo__word { font-size: 1.15rem; }
  .logo__tag { display: none; }
  .header__right { gap: 0.4rem; }
  .lang button { padding: 0.32rem 0.55rem; }
}
@media (max-width: 420px) {
  .logo__mark { width: 2.2rem; height: 2.2rem; font-size: 0.85rem; }
  .logo__word { font-size: 1rem; }
  .logo > span:last-child { min-width: 0; overflow: hidden; }
  .header__right .icon-btn { width: 2.3rem; height: 2.3rem; }
}

/* ==========================================================================
   Photos & marketplace
   ========================================================================== */
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__card .hero__shade { background: linear-gradient(90deg, oklch(21% 0.055 259 / 0.88), oklch(21% 0.055 259 / 0.55) 55%, oklch(21% 0.055 259 / 0.1)); }
.cover--img { background: var(--muted); }
.cover--img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cover--img::before { display: none; }
a:hover .cover--img img { transform: scale(1.04); }

.sec-head--plain { border-bottom: 0; padding-bottom: 0; }
.pills--tight { margin: 0.75rem 0 1rem; }

/* Avatars */
.avatar-img { width: 2.75rem; height: 2.75rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; background: var(--accent); }
.avatar-img--initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff; font-weight: 700; }
.avatar-img--sm { width: 2.4rem; height: 2.4rem; font-size: 0.8rem; }
.avatar-img--xl { width: 7rem; height: 7rem; border: 4px solid var(--card); box-shadow: var(--shadow-md); font-size: 2rem; }
.verified { vertical-align: middle; }
.biz-list img.avatar-img { margin: 0; }

/* Pro card (Contra-style) */
.pro-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 0.8rem; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.pro-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pro-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--muted); overflow: hidden; }
.pro-card__media img, .pro-card__media .cover { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
.pro-card:hover .pro-card__media img { transform: scale(1.04); }
.pro-card__media img { transition: transform 0.4s ease; }
.pro-card__avail { position: absolute; left: 0.6rem; top: 0.6rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: oklch(100% 0 0 / 0.92); color: var(--navy); font-size: 0.72rem; font-weight: 700; }
.pro-card__avail i, .avail-dot::before { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: oklch(65% 0.17 150); display: inline-block; content: ""; }
.avail-dot { display: inline-flex; align-items: center; gap: 0.35rem; color: oklch(45% 0.12 150); font-weight: 700; }
.pro-card__body { padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.pro-card__who { display: flex; align-items: flex-end; gap: 0.7rem; margin-top: -1.4rem; }
.pro-card__who .avatar-img { width: 3.4rem; height: 3.4rem; border: 3px solid var(--card); box-shadow: var(--shadow-sm); position: relative; }
.pro-card__who h3 { font-size: 1rem; display: flex; align-items: center; gap: 0.3rem; }
.pro-card__cat { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--brand); }
.pro-card__headline { font-size: 0.9rem; color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pro-card__stats { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--muted-fg); }
.pro-card__stats > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.pro-card__rate { margin-left: auto; font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: 0.95rem; }
.pro-card__rate small { font-family: var(--font-body); font-weight: 500; color: var(--muted-fg); font-size: 0.75rem; }

/* Business card */
.biz-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 0.8rem; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.biz-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.biz-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--muted); }
.biz-card__media img, .biz-card__media .cover { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; transition: transform 0.4s ease; }
.biz-card:hover .biz-card__media img { transform: scale(1.04); }
.biz-card__status { position: absolute; right: 0.6rem; top: 0.6rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: oklch(0% 0 0 / 0.55); color: #fff; font-size: 0.72rem; font-weight: 700; }
.biz-card__status.is-open { background: oklch(55% 0.15 150); }
.biz-card__offer { position: absolute; left: 0; bottom: 0.7rem; display: inline-flex; align-items: center; gap: 0.3rem; max-width: 90%; padding: 0.3rem 0.7rem 0.3rem 0.6rem; border-radius: 0 999px 999px 0; background: var(--gold); color: var(--gold-fg); font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-card__body { padding: 0.9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.biz-card__body .kicker { display: flex; align-items: center; gap: 0.3rem; }
.biz-card h3 { font-size: 1.02rem; display: flex; align-items: center; gap: 0.3rem; }
.biz-card__tag { font-size: 0.87rem; color: var(--muted-fg); }
.biz-card .meta { margin-top: auto; padding-top: 0.3rem; }

/* Marketplace hero */
.market-hero { position: relative; overflow: hidden; display: grid; gap: 1.5rem; align-items: center; border-radius: var(--radius); padding: 1.75rem 1.5rem; margin-bottom: 1.25rem; background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, var(--brand)); color: var(--navy-fg); }
.market-hero h1 { color: var(--navy-fg); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.015em; }
.market-hero p { color: oklch(98% 0.005 255 / 0.85); margin-top: 0.4rem; max-width: 38rem; }
.market-hero .crumbs { color: oklch(98% 0.005 255 / 0.7); }
.market-hero__points { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.market-hero__points span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: oklch(100% 0 0 / 0.1); font-size: 0.82rem; font-weight: 600; }
.market-hero__points .icon { color: var(--gold); }
.market-hero__faces { display: none; }
@media (min-width: 900px) {
  .market-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 2.25rem 2rem; }
  .market-hero__faces { display: grid; grid-template-columns: repeat(3, 4.5rem); gap: 0.6rem; transform: rotate(-4deg); }
  .market-hero__faces img { width: 4.5rem; height: 4.5rem; border-radius: 1rem; object-fit: cover; border: 3px solid oklch(100% 0 0 / 0.25); }
  .market-hero__faces img:nth-child(even) { transform: translateY(1rem); }
}

.join-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-radius: var(--radius); margin-top: 1.5rem; background: linear-gradient(120deg, var(--teal), oklch(40% 0.09 220)); color: #fff; }
.join-strip h2 { color: #fff; font-size: 1.25rem; }
.join-strip p { color: oklch(100% 0 0 / 0.85); margin-top: 0.3rem; max-width: 40rem; }
.stack > .join-strip { margin-top: 0; }

/* Profile page */
.profile-hero { margin-top: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.8rem; overflow: hidden; }
.profile-hero__cover { height: 11rem; background: linear-gradient(120deg, var(--navy), var(--brand)); }
.profile-hero__cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.profile-hero__main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; padding: 0 1.25rem 1.25rem; margin-top: -3.5rem; position: relative; }
.profile-hero__who { flex: 1 1 18rem; min-width: 0; padding-top: 3.75rem; }
.profile-hero__who h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.profile-hero__headline { font-size: 1.02rem; margin: 0.25rem 0 0.5rem; }
.profile-hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 640px) { .profile-hero__cover { height: 14rem; } .profile-hero__main { padding: 0 1.75rem 1.5rem; } }
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.stat-row > div { padding: 0.9rem 1.25rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-row strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); }
.stat-row span { font-size: 0.78rem; color: var(--muted-fg); }
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stat-row > div { border-bottom: 0; } .stat-row > div:last-child { border-right: 0; } }

.svc-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--border); }
.svc-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-list h3 { font-size: 0.97rem; }
.svc-list .meta { margin-top: 0.25rem; }
.svc-list__right { display: flex; align-items: center; gap: 0.75rem; }
.svc-list__right strong { font-family: var(--font-display); color: var(--teal); font-size: 1.05rem; }

.gallery { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--muted); }
.gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery figure:hover img { transform: scale(1.04); }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }

.sticky-card { position: sticky; top: 4rem; }
.big-price { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--navy); margin-top: 0.2rem; }
.big-price small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--muted-fg); }
.contact-box { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

.review { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; }
.review .stars { letter-spacing: 1px; }
.review-form { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--border); }
.star-input { position: relative; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; }
.star-input input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.7rem; line-height: 1; color: var(--border); cursor: pointer; transition: color 0.1s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--gold); }
.star-input input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 4px; }

/* Business page */
.biz-hero { position: relative; overflow: hidden; margin-top: 0.75rem; border-radius: 0.8rem; min-height: 18rem; display: flex; align-items: flex-end; color: #fff; background: var(--navy); }
.biz-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.biz-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, oklch(18% 0.05 259 / 0.92), oklch(18% 0.05 259 / 0.35) 60%, transparent); }
.biz-hero__body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; padding: 1.5rem; }
.biz-hero h1 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.biz-hero p { color: oklch(100% 0 0 / 0.88); }
.biz-hero .meta { color: oklch(100% 0 0 / 0.85); margin-top: 0.5rem; }
.biz-hero .stars { color: var(--gold); }
.biz-hero .muted { color: oklch(100% 0 0 / 0.7); }
.biz-hero__logo { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 1rem; background: var(--card); color: var(--navy); font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; box-shadow: var(--shadow-md); flex-shrink: 0; }
@media (min-width: 640px) { .biz-hero { min-height: 22rem; } .biz-hero__body { padding: 2rem; } }
.offer-box { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--gold-soft); border: 1px dashed var(--gold-ink); color: var(--navy); }
.offer-box > .icon { font-size: 1.5rem; color: var(--gold-ink); }
.info-list li { display: flex; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.info-list li:last-child { border-bottom: 0; }
.info-list li > .icon { color: var(--brand); margin-top: 0.2rem; }
.info-list strong { font-size: 0.8rem; color: var(--muted-fg); font-weight: 600; }
.info-list p { font-weight: 600; color: var(--navy); }

.banner--photo { background-size: cover; background-position: center; }

/* Discover banner */
.discover { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 16rem; display: flex; align-items: center; }
.discover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.discover__shade { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(21% 0.055 259 / 0.9), oklch(21% 0.055 259 / 0.35) 70%, transparent); }
.discover__body { position: relative; padding: 2rem 1.5rem; max-width: 34rem; color: var(--navy-fg); display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.discover h2 { color: var(--navy-fg); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
.discover__tag { color: var(--gold); font-weight: 700; font-size: 0.9rem; }
.discover p { color: oklch(98% 0.005 255 / 0.88); }
.discover .btn { margin-top: 0.5rem; }

/* Join / onboarding */
.eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.join-hero { display: grid; gap: 2rem; align-items: center; padding: 2rem 1.5rem; border-radius: 0.8rem; color: var(--navy-fg); background: radial-gradient(ellipse at 80% 20%, oklch(56% 0.168 255 / 0.6), transparent 60%), linear-gradient(120deg, var(--navy-deep), var(--navy)); }
.join-hero h1 { color: var(--navy-fg); font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 900; letter-spacing: -0.025em; margin-top: 0.6rem; }
.join-hero p { color: oklch(98% 0.005 255 / 0.85); margin-top: 0.6rem; max-width: 36rem; font-size: 1.05rem; }
.join-hero__cards { display: flex; flex-direction: column; gap: 0.75rem; }
.mini-pro { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-radius: 0.8rem; background: var(--card); color: var(--navy); box-shadow: var(--shadow-md); }
.mini-pro strong { display: block; font-size: 0.92rem; }
.mini-pro small { color: var(--muted-fg); font-size: 0.78rem; }
.mini-pro .stars { margin-left: auto; }
@media (min-width: 900px) {
  .join-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 3rem 2.5rem; }
  .mini-pro:nth-child(2) { transform: translateX(-1.5rem); }
}
.feature { display: flex; flex-direction: column; gap: 0.6rem; }
.feature h2 { font-size: 1.05rem; }
.feature p { font-size: 0.9rem; }
.path-card { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 0.8rem; border: 1px solid var(--border); background: var(--card); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.path-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--brand); }
.path-card > img { width: 100%; height: 11rem; object-fit: cover; }
.path-card > div { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.path-card h2 { font-size: 1.2rem; }
.path-card p { color: var(--muted-fg); font-size: 0.92rem; }
.path-card .link { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--brand); font-weight: 700; font-size: 0.9rem; }
.path-card--compact > img { height: 7rem; }
.how { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; counter-reset: none; }
@media (min-width: 720px) { .how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how li { display: flex; align-items: center; gap: 0.75rem; }
.how li span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 999px; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 800; }
.how li p { font-weight: 600; color: var(--navy); font-size: 0.92rem; }

.join-form { max-width: 48rem; margin: 0 auto; padding: 1.5rem; }
@media (min-width: 640px) { .join-form { padding: 2rem; } }
.form-section { font-size: 1rem; padding-top: 0.5rem; margin-top: 0.4rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.form-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.chip-check { cursor: pointer; user-select: none; }
.chip-check input { width: 0.9rem; height: 0.9rem; accent-color: var(--brand); margin: 0; }
.chip-check:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 9rem; padding: 1rem; border-radius: var(--radius); border: 2px dashed var(--border); background: var(--muted); color: var(--muted-fg); font-size: 0.85rem; font-weight: 600; text-align: center; cursor: pointer; overflow: hidden; transition: border-color 0.15s; }
.upload:hover { border-color: var(--brand); color: var(--brand); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload > .icon { font-size: 1.8rem; }
.upload img { width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--radius); }
.upload--wide img { width: 100%; height: 10rem; }

/* Credits */
.credits li { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.87rem; }
.credits li:last-child { border-bottom: 0; }
.credits a { color: var(--brand); }
.credits__thumb { width: 4.5rem; height: 3rem; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

/* Desktop nav fits 10 items + CTA */
@media (min-width: 1100px) and (max-width: 1279px) { .nav__list a { padding-inline: 0.55rem; font-size: 0.84rem; } .nav__cta { padding: 0 0.9rem; } }
/* Pro card: only the avatar overlaps the photo; name stays below it */
.pro-card__body { position: relative; }
.pro-card__who { align-items: flex-start; margin-top: 0; padding-top: 0.6rem; }
.pro-card__who .avatar-img { margin-top: -2.1rem; }
main.container { padding-top: 1.5rem; padding-bottom: 3rem; }
@media (max-width: 639px) { .profile-hero__who { padding-top: 0.25rem; flex-basis: 100%; } }

/* ---------- Education ---------- */
.edu-type { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 15rem; border-radius: 0.8rem; color: #fff; background: var(--navy); isolation: isolate; transition: transform 0.2s, box-shadow 0.2s; }
.edu-type:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.edu-type > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.5s ease; }
.edu-type:hover > img { transform: scale(1.05); }
.edu-type__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, oklch(18% 0.05 259 / 0.92), oklch(18% 0.05 259 / 0.25) 70%); }
.edu-type__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.edu-type .bubble { background: oklch(100% 0 0 / 0.16); color: #fff; }
.edu-type h3 { color: #fff; font-size: 1.25rem; }
.edu-type p { color: oklch(100% 0 0 / 0.85); font-size: 0.9rem; }
.edu-type__count { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; color: var(--gold); font-weight: 700; font-size: 0.85rem; }
.biz-card__status.is-official { background: var(--brand); }
.biz-hero__logo .icon { font-size: 2rem; color: var(--brand); }

/* ---------- Travel ---------- */
.banner--tall { min-height: 13rem; display: flex; flex-direction: column; justify-content: flex-end; }
.biz-card__status.is-drive { display: inline-flex; align-items: center; gap: 0.3rem; background: oklch(100% 0 0 / 0.92); color: var(--navy); }
.biz-hero--tall { min-height: 20rem; }
@media (min-width: 640px) { .biz-hero--tall { min-height: 26rem; } }
.trip { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 0.8rem; overflow: hidden; }
.trip__media { position: relative; aspect-ratio: 16 / 8; background: var(--muted); }
.trip__media img { width: 100%; height: 100%; object-fit: cover; }
.trip__date { position: absolute; left: 0.75rem; bottom: -1.2rem; box-shadow: var(--shadow-md); border: 3px solid var(--card); }
.trip__body { padding: 1.6rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.trip__body h3 { font-size: 1.02rem; }
.trip__body h3 a:hover { color: var(--brand); }
.trip__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.trip__foot strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--teal); }
.trip__foot small { font-family: var(--font-body); color: var(--muted-fg); font-weight: 500; font-size: 0.78rem; }
.drive-list { margin-top: 0.75rem; }
.drive-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.93rem; }
.drive-list li:last-child { border-bottom: 0; }
.drive-list span, .drive-list strong { display: inline-flex; align-items: center; gap: 0.4rem; }
.drive-list strong { color: var(--navy); font-family: var(--font-display); }
.discover--card { min-height: 100%; }
.discover--card .discover__body { max-width: none; }
/* Chips on dark photo heroes */
.biz-hero .chip { background: oklch(100% 0 0 / 0.16); border-color: oklch(100% 0 0 / 0.28); color: #fff; }
.biz-hero .chip--gold { background: var(--gold); border-color: transparent; color: var(--gold-fg); }
/* Trip card inside a single column: image left, details right */
@media (min-width: 640px) {
  .stack .trip { flex-direction: row; }
  .stack .trip__media { aspect-ratio: auto; width: 38%; flex-shrink: 0; }
  .stack .trip__date { bottom: auto; top: 0.75rem; }
  .stack .trip__body { padding-top: 1.1rem; }
}

/* ==========================================================================
   Home — news portal layout (BBC / Sky News style). Scoped to body.is-home.
   ========================================================================== */
body.is-home { --container: 110rem; }
@media (min-width: 1024px) { body.is-home .container { padding-inline: 2rem; } }

/* Full-bleed band inside the centered container */
.bleed { margin-inline: calc(50% - 50vw); padding-inline: max(1rem, calc(50vw - 50%)); }
@media (min-width: 1024px) { .bleed { padding-inline: max(2rem, calc(50vw - 50%)); } }

/* Breaking ticker */
.ticker { display: flex; align-items: stretch; background: var(--navy-deep); color: #fff; border-top: 1px solid oklch(100% 0 0 / 0.08); font-size: 0.9rem; overflow: hidden; }
.ticker__label { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; padding: 0.55rem 0.9rem; margin-right: 0.75rem; background: oklch(58% 0.21 27); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; }
.ticker__track { overflow: hidden; flex: 1; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.ticker__move { display: inline-flex; gap: 1.25rem; white-space: nowrap; animation: ticker 38s linear infinite; padding-left: 1rem; }
.ticker__move a:hover { color: var(--gold); text-decoration: underline; }
.ticker__move span { opacity: 0.5; }
.ticker:hover .ticker__move { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Top stories */
.top-news { display: grid; gap: 1.25rem; padding-top: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .top-news { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .most-read { grid-column: 1 / -1; } }
@media (min-width: 1180px) { .top-news { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.95fr); } .most-read { grid-column: auto; } }

.story-lead { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 24rem; border-radius: 4px; color: #fff; background: var(--navy); isolation: isolate; }
.story-lead > img, .story-lead > .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; border-radius: 0; aspect-ratio: auto; transition: transform 0.5s ease; }
.story-lead:hover > img { transform: scale(1.03); }
.story-lead__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, oklch(12% 0.04 259 / 0.95) 0%, oklch(12% 0.04 259 / 0.55) 45%, transparent 75%); }
.story-lead__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.story-lead h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.story-lead:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story-lead p { color: oklch(100% 0 0 / 0.85); max-width: 40rem; }
.story-lead .meta { color: oklch(100% 0 0 / 0.7); }
.tag { align-self: flex-start; padding: 0.2rem 0.55rem; background: oklch(58% 0.21 27); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 2px; }
@media (min-width: 1180px) { .story-lead { min-height: 30rem; } }

.top-news__side { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 560px) and (max-width: 759px) { .top-news__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.story { display: flex; flex-direction: column; gap: 0.6rem; }
.story .cover { aspect-ratio: 16 / 9; border-radius: 4px; }
.story__body { display: flex; flex-direction: column; gap: 0.3rem; }
.story__cat { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: oklch(55% 0.2 27); }
.story h3 { font-size: 1.05rem; line-height: 1.3; }
.story:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.story__excerpt { font-size: 0.9rem; color: var(--muted-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story__time { font-size: 0.78rem; color: var(--muted-fg); }

.most-read { border-top: 4px solid var(--navy); padding-top: 0.75rem; }
.most-read h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.25rem; }
.most-read ol { display: grid; }
@media (min-width: 760px) and (max-width: 1179px) { .most-read ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
.most-read li a { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.95rem; color: var(--navy); line-height: 1.3; }
.most-read li a:hover span:last-child { text-decoration: underline; }
.most-read__n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 0.9; color: var(--brand); min-width: 1.4rem; }
.most-read__join { margin-top: 1rem; padding: 1rem; background: var(--accent); border-radius: 4px; display: flex; flex-direction: column; gap: 0.6rem; }
.most-read__join p { font-size: 0.85rem; color: var(--navy); }

/* Section rule (BBC-style heading with top border) */
.section-rule { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 4px solid var(--navy); padding-top: 0.6rem; margin-bottom: 1rem; }
.section-rule h2 { font-size: 1.3rem; font-weight: 800; }
.section-rule a { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 700; font-size: 0.85rem; color: var(--brand); white-space: nowrap; }
.news-row4 { margin-top: 2rem; }
.news-row4__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .news-row4__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .news-row4__grid { grid-template-columns: minmax(0, 1fr); } }

/* Tabbed rail on a dark full-width band (Sky-style) */
.rail { margin-top: 2.25rem; padding-block: 1.75rem 2rem; background: linear-gradient(120deg, var(--navy-deep), var(--navy)); color: #fff; }
.rail__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; }
.rail__head h2 { color: #fff; font-size: 1.4rem; font-weight: 800; }
.rail__tabs { display: flex; gap: 0.35rem; overflow-x: auto; max-width: 100%; }
.rail__tabs button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid oklch(100% 0 0 / 0.25); background: transparent; color: #fff; padding: 0.5rem 0.95rem; border-radius: 999px; font-weight: 700; font-size: 0.88rem; transition: background 0.15s, color 0.15s; }
.rail__tabs button:hover { background: oklch(100% 0 0 / 0.1); }
.rail__tabs button[aria-selected="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.rail__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); animation: pageIn 0.3s ease; }
@media (min-width: 1024px) { .rail__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .rail__grid { grid-template-columns: minmax(0, 1fr); } }
.rail .pro-card, .rail .biz-card { color: var(--foreground); border: 0; }
.rail__all { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1.25rem; font-weight: 700; color: var(--gold); }
.rail__all:hover { text-decoration: underline; }

/* Four compact text columns */
.mini-cols { display: grid; gap: 1.5rem 2rem; margin-top: 2.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mini-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mini-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini { border-top: 4px solid var(--navy); padding-top: 0.6rem; }
.mini__head { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.25rem; }
.mini__head a { display: inline-flex; align-items: center; gap: 0.45rem; }
.mini__head a:hover { color: var(--brand); }
.mini__head .icon { color: var(--brand); }
.mini li a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.mini li:last-child a { border-bottom: 0; }
.mini li strong { font-size: 0.93rem; color: var(--navy); line-height: 1.3; }
.mini li a:hover strong { text-decoration: underline; }
.mini li small { font-size: 0.78rem; color: var(--muted-fg); }
.mini li small b { color: var(--teal); }

/* Closing CTA band + official sources */
.home-cta { margin-top: 2.25rem; margin-bottom: -2rem; padding-block: 1.5rem; display: grid; gap: 1rem 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); background: var(--accent); }
@media (min-width: 900px) { .home-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.home-cta h2 { font-size: 1.2rem; font-weight: 800; }
.home-cta__text p { color: var(--muted-fg); margin-top: 0.2rem; }
.home-cta__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.home-cta .btn--ghost { color: var(--navy); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.home-cta__official { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding-top: 1rem; border-top: 1px solid oklch(27% 0.062 259 / 0.12); font-size: 0.85rem; color: var(--muted-fg); }
.home-cta__official .icon { color: var(--brand); }
.home-cta__official a { font-weight: 700; color: var(--navy); }
.home-cta__official a:hover { color: var(--brand); text-decoration: underline; }
body.is-home .footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .ticker__move { animation: none; } }

.ticker__copy { display: inline-flex; gap: 1.25rem; }

/* Home on phones: compact BBC-app style */
@media (max-width: 639px) {
  .story-lead { min-height: 20rem; }
  .story-lead p { display: none; }
  .top-news__side .story, .news-row4__grid .story { flex-direction: row; gap: 0.8rem; align-items: flex-start; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
  .top-news__side .story .cover, .news-row4__grid .story .cover { width: 7.5rem; flex-shrink: 0; aspect-ratio: 4 / 3; }
  .top-news__side, .news-row4__grid { gap: 0.9rem; }
  .story h3 { font-size: 0.97rem; }
  .story__excerpt { display: none; }
  .rail__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .rail__grid > * { scroll-snap-align: start; }
  .mini li:nth-child(n+4) { display: none; }
}

/* Rail inside the original home stack */
.stack > .rail { margin-top: 0; }
body.is-home .footer { margin-top: 1rem; }

/* ==========================================================================
   Home — BBC style (white, flat, thin rules)
   ========================================================================== */
body.is-home { background: var(--card); }
.bbc-card { display: flex; flex-direction: column; gap: 0.5rem; color: var(--navy); }
.bbc-card__img { overflow: hidden; background: var(--muted); }
.bbc-card__img img, .bbc-card__img .cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; display: block; }
.bbc-card h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.28; letter-spacing: -0.005em; }
.bbc-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bbc-card__desc { font-size: 0.93rem; line-height: 1.45; color: oklch(40% 0.03 259); }
.bbc-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.78rem; color: var(--muted-fg); margin-top: auto; padding-top: 0.15rem; }
.bbc-meta span { color: var(--border); }
.bbc-card--lead h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; }
.bbc-card--lead .bbc-card__desc { font-size: 1.02rem; }

/* Top grid: 2 stories | lead | 4 headlines, with thin vertical rules */
.bbc-top { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.bbc-top__left, .bbc-top__right { display: grid; gap: 1.25rem; align-content: start; }
.bbc-top__right .bbc-card { padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.bbc-top__right .bbc-card:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .bbc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
  .bbc-top__lead { grid-column: 2; grid-row: 1; }
  .bbc-top__left { grid-column: 1; grid-row: 1; }
  .bbc-top__right { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bbc-top__right .bbc-card:nth-last-child(2) { border-bottom: 0; }
}
@media (min-width: 1180px) {
  .bbc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); gap: 0; }
  .bbc-top > div { padding-inline: 1.5rem; }
  .bbc-top > div:first-child { padding-left: 0; }
  .bbc-top > div:last-child { padding-right: 0; }
  .bbc-top__lead { border-inline: 1px solid var(--border); }
  .bbc-top__right { grid-column: 3; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
  .bbc-top__right .bbc-card:nth-last-child(2) { border-bottom: 1px solid var(--border); }
}

/* Section titles */
.bbc-block { margin-top: 2.25rem; }
.bbc-section-title { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-bottom: 1rem; }
.bbc-section-title h2 { font-size: 1.3rem; font-weight: 800; }
.bbc-section-title a { display: inline-flex; align-items: center; gap: 0.25rem; }
.bbc-section-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bbc-section-title .icon { font-size: 1.05em; }

.bbc-grid6 { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .bbc-grid6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .bbc-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.bbc-grid6 .bbc-card h3 { font-size: 1rem; }

/* Rail on the BBC home */
body.is-home .rail { margin-top: 2.5rem; }

/* Community text columns */
.bbc-cols { display: grid; gap: 1.5rem 2rem; margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bbc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bbc-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bbc-col li a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.bbc-col li:first-child a { padding-top: 0; }
.bbc-col li:last-child a { border-bottom: 0; }
.bbc-col strong { font-size: 0.97rem; color: var(--navy); line-height: 1.3; }
.bbc-col a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.bbc-col small { font-size: 0.8rem; color: var(--muted-fg); }

@media (max-width: 759px) {
  .bbc-top__left .bbc-card, .bbc-grid6 .bbc-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.25rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
  .bbc-top__left .bbc-card__img, .bbc-grid6 .bbc-card__img { grid-row: span 3; }
  .bbc-top__left .bbc-card__desc { display: none; }
  .bbc-grid6 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .bbc-top__left { order: 2; }
  .bbc-top__lead { order: 1; }
  .bbc-top__right { order: 3; }
  .rail__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .rail__grid > * { scroll-snap-align: start; }
}

/* ==========================================================================
   Hamburger + full-screen menu
   ========================================================================== */
.nav__burger { display: inline-flex; align-items: center; gap: 0.55rem; flex-shrink: 0; border: 0; background: transparent; color: var(--navy-fg); padding: 0.75rem 1rem 0.75rem 0; font-weight: 600; font-size: 0.9rem; }
.nav__burger .icon { font-size: 1.35rem; }
.nav__burger:hover { color: var(--gold); }
@media (min-width: 1100px) {
  .nav__burger { padding: 0 0.85rem; margin-right: 0.25rem; border-right: 1px solid oklch(100% 0 0 / 0.15); }
  .nav__burger:hover { background: var(--brand); color: #fff; }
  .nav__burger-text { display: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .nav__list a[data-nav="home"] span { display: none; } }
.nav__mobile, .nav__mobile-search { display: none !important; }

body.menu-open { overflow: hidden; }
dialog.overlay { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; inset: 0; border-radius: 0; padding: 0; box-shadow: none; background: var(--navy-deep); color: var(--navy-fg); }
dialog.overlay[open] { display: flex; flex-direction: column; animation: overlayIn 0.25s ease; }
dialog.overlay::backdrop { background: var(--navy-deep); }
@keyframes overlayIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.overlay__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; width: 100%; }
.overlay__top .logo__word { color: #fff; }
.overlay__close { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.3); background: transparent; color: #fff; font-size: 1.35rem; transition: background 0.15s, transform 0.2s; }
.overlay__close:hover { background: oklch(100% 0 0 / 0.12); transform: rotate(90deg); }
.overlay__body { flex: 1; overflow-y: auto; border-top: 1px solid oklch(100% 0 0 / 0.1); padding-block: 1.75rem 3rem; }

.overlay__search { position: relative; max-width: 44rem; }
.overlay__search input { width: 100%; padding: 1rem 1.1rem 1rem 3.1rem; border-radius: 0.6rem; border: 1px solid oklch(100% 0 0 / 0.15); background: oklch(100% 0 0 / 0.08); color: #fff; font-size: 1.1rem; outline: none; }
.overlay__search input::placeholder { color: oklch(100% 0 0 / 0.55); }
.overlay__search input:focus { border-color: var(--gold); background: oklch(100% 0 0 / 0.12); }
.overlay__search > .icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; opacity: 0.7; }

.overlay__grid { display: grid; gap: 2rem 2.5rem; margin-top: 2.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.overlay__grid h2 { color: var(--gold); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 0.6rem; margin-bottom: 0.5rem; border-bottom: 1px solid oklch(100% 0 0 / 0.14); }
.overlay__grid a { display: block; padding: 0.35rem 0; font-size: 1rem; color: oklch(100% 0 0 / 0.78); transition: color 0.12s; }
.overlay__grid a.is-main { color: #fff; font-weight: 700; font-size: 1.12rem; padding-top: 0.55rem; }
.overlay__grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.overlay__grid a.is-current { color: var(--gold); }

.overlay__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid oklch(100% 0 0 / 0.14); }
.overlay .lang { background: oklch(100% 0 0 / 0.1); border-color: transparent; }
.overlay .lang button { color: oklch(100% 0 0 / 0.7); }
.overlay .lang button[aria-pressed="true"] { background: #fff; color: var(--navy); }
.overlay__auth { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.overlay__user { font-weight: 700; margin-right: 0.5rem; }

@media (max-width: 639px) {
  .overlay__grid { gap: 1.5rem; }
  .overlay__grid section { border-bottom: 1px solid oklch(100% 0 0 / 0.08); padding-bottom: 1rem; }
  .overlay__grid h2 { border-bottom: 0; margin-bottom: 0; }
}
@media (min-width: 1100px) and (max-width: 1439px) { .nav__list a[data-nav="home"] span { display: none; } }
@media (min-width: 1280px) { .nav__list a { padding-inline: 0.72rem; } }

/* ==========================================================================
   Home — platform sections around the BBC-style news
   ========================================================================== */
.hero--compact .hero__card, .hero--compact .hero__body { min-height: 17rem; }
@media (min-width: 900px) { .hero--compact .hero__card, .hero--compact .hero__body { min-height: 19rem; } .hero--compact h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); } }

/* Service launcher */
.svc-tiles { display: grid; gap: 0.75rem; margin-top: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .svc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.svc-tile { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s; }
.svc-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.svc-tile strong { display: block; font-size: 0.95rem; color: var(--navy); }
.svc-tile small { display: block; font-size: 0.78rem; color: var(--muted-fg); line-height: 1.3; }
.svc-tile span:last-child { min-width: 0; }
@media (max-width: 479px) { .svc-tile { padding: 0.7rem; gap: 0.55rem; } .svc-tile .bubble { width: 2.2rem; height: 2.2rem; font-size: 1rem; } .svc-tile small { display: none; } }

.home-alert { margin-block: 1.25rem 1.75rem; }

/* Action cards */
.action-cards { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .action-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.action-cards .promo { display: flex; flex-direction: column; }
.action-cards .promo > .btn, .action-cards .promo__btns { margin-top: auto; padding-top: 0; }
.action-cards .promo > .btn { align-self: flex-start; }
.promo--navy { background: linear-gradient(135deg, var(--navy-deep), oklch(40% 0.1 280)); }
.promo__list { margin: 0.9rem 0 1rem; }
.promo__list a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid oklch(100% 0 0 / 0.15); font-size: 0.9rem; }
.promo__list a:hover span { text-decoration: underline; }
.promo__list b { color: var(--gold); white-space: nowrap; }
.promo__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.promo__btns .btn { margin-top: 0; }

/* Audiences */
@media (min-width: 1280px) { .aud-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.aud-grid--6 .aud-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Guides / forum / communities */
.home-3col { display: grid; gap: 1.5rem 2rem; margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .home-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .home-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-3col .thread:first-child, .home-3col .group-card:first-child { padding-top: 0; }

/* ==========================================================================
   Home — app style (mahallify-like): soft, rounded, colorful
   ========================================================================== */
body.is-home { background: oklch(97.5% 0.008 250); }
.tone-1 { background: oklch(94% 0.04 255); color: oklch(48% 0.16 255); }
.tone-2 { background: oklch(94% 0.04 15); color: oklch(52% 0.18 15); }
.tone-3 { background: oklch(94% 0.04 295); color: oklch(48% 0.16 295); }
.tone-4 { background: oklch(94% 0.05 160); color: oklch(45% 0.12 160); }
.tone-5 { background: oklch(95% 0.06 75); color: oklch(52% 0.13 60); }
.tone-6 { background: oklch(94% 0.04 205); color: oklch(46% 0.1 215); }
.tone-7 { background: oklch(94% 0.05 40); color: oklch(52% 0.15 40); }
.tone-8 { background: oklch(94% 0.04 230); color: oklch(45% 0.13 240); }
.tone-9 { background: oklch(94% 0.05 135); color: oklch(46% 0.12 140); }
.tone-10 { background: oklch(94% 0.04 330); color: oklch(50% 0.16 340); }
.app-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 0.8rem; font-size: 1.15rem; }
.app-ico--lg { width: 3.6rem; height: 3.6rem; border-radius: 1.15rem; font-size: 1.55rem; transition: transform 0.2s; }

/* Greeting hero */
.app-hero { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .app-hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.app-hero__main { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2rem 1.5rem; background: radial-gradient(circle at 92% 12%, oklch(82% 0.16 82 / 0.45), transparent 32%), radial-gradient(circle at 8% 110%, oklch(70% 0.12 175 / 0.35), transparent 40%), linear-gradient(135deg, oklch(93% 0.04 250), oklch(96% 0.02 200)); }
@media (min-width: 640px) { .app-hero__main { padding: 2.5rem 2.5rem; } }
.app-hero__hi { font-weight: 700; color: var(--brand); font-size: 1.05rem; }
.app-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 900; letter-spacing: -0.025em; margin: 0.3rem 0 1.25rem; }
.app-search { position: relative; display: flex; align-items: center; max-width: 42rem; background: var(--card); border-radius: 999px; padding: 0.35rem 0.35rem 0.35rem 3rem; box-shadow: 0 12px 30px -14px oklch(27% 0.062 259 / 0.35); }
.app-search > .icon { position: absolute; left: 1.15rem; font-size: 1.2rem; color: var(--muted-fg); }
.app-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 1.05rem; padding: 0.6rem 0; }
.app-search .btn { border-radius: 999px; padding: 0.75rem 1.4rem; }
.app-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.app-chip { padding: 0.4rem 0.85rem; border-radius: 999px; background: oklch(100% 0 0 / 0.75); border: 1px solid oklch(27% 0.062 259 / 0.08); font-size: 0.85rem; font-weight: 600; color: var(--navy); transition: background 0.15s; }
.app-chip:hover { background: var(--card); color: var(--brand); }
.app-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.app-hero__cta .btn { border-radius: 999px; }
.app-hero__cta span { font-size: 0.85rem; color: var(--muted-fg); }

.app-live { border-radius: 1.5rem; padding: 1.4rem; background: var(--card); box-shadow: 0 1px 2px oklch(24% 0.04 259 / 0.06); }
.app-live__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--navy); margin-bottom: 0.75rem; }
.app-live__title i { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: oklch(65% 0.17 150); box-shadow: 0 0 0 0 oklch(65% 0.17 150 / 0.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 0.5rem oklch(65% 0.17 150 / 0); } 100% { box-shadow: 0 0 0 0 oklch(65% 0.17 150 / 0); } }
.app-live li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.app-live li:last-child { border-bottom: 0; padding-bottom: 0; }
.app-live strong { display: block; font-size: 0.9rem; color: var(--navy); line-height: 1.3; }
.app-live small { font-size: 0.76rem; color: var(--muted-fg); }

/* Launcher (super-app icons) */
.app-launcher { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem 0.5rem; margin-top: 1.25rem; padding: 1.4rem 1rem; background: var(--card); border-radius: 1.5rem; box-shadow: 0 1px 2px oklch(24% 0.04 259 / 0.06); }
@media (min-width: 1024px) { .app-launcher { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.app-launcher__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.app-launcher__item:hover .app-ico--lg { transform: translateY(-3px) scale(1.05); }
@media (max-width: 479px) { .app-launcher { grid-template-columns: repeat(4, minmax(0, 1fr)); } .app-ico--lg { width: 3.1rem; height: 3.1rem; font-size: 1.3rem; } .app-launcher__item { font-size: 0.74rem; } }

/* Dismissible notice */
.app-notice { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.25rem; padding: 0.85rem 1rem; border-radius: 1.1rem; background: oklch(96% 0.05 85); color: var(--navy); font-size: 0.9rem; }
.app-notice p { flex: 1; }
.app-notice__x { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: oklch(100% 0 0 / 0.6); color: var(--navy); flex-shrink: 0; }
.app-notice__x:hover { background: #fff; }

/* Sections + carousels */
.app-section { margin-top: 2.25rem; }
.app-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.app-section__head h2 { font-size: 1.35rem; font-weight: 800; }
.app-section__head a { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 700; font-size: 0.9rem; color: var(--brand); }
.app-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 17rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; scrollbar-width: thin; }
.app-carousel > * { scroll-snap-align: start; }
.app-news { display: flex; flex-direction: column; gap: 0.6rem; }
.app-news--wide { grid-column: span 2; }
.app-news__img { position: relative; border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4 / 3; background: var(--muted); }
.app-news--wide .app-news__img { aspect-ratio: auto; height: 100%; max-height: 13.2rem; min-height: 13.2rem; }
.app-news__img img, .app-news__img .cover { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; transition: transform 0.4s ease; }
.app-news:hover .app-news__img img { transform: scale(1.05); }
.app-news__cat { position: absolute; left: 0.6rem; top: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: oklch(100% 0 0 / 0.92); color: var(--navy); font-size: 0.72rem; font-weight: 800; }
.app-news h3 { font-size: 1rem; line-height: 1.3; }
.app-news:hover h3 { color: var(--brand); }
.app-news__time { font-size: 0.78rem; color: var(--muted-fg); margin-top: -0.25rem; }
@media (max-width: 639px) { .app-news--wide { grid-column: span 1; } .app-news--wide .app-news__img { aspect-ratio: 4 / 3; max-height: none; min-height: 0; } }

/* Rail inside app home: rounded */
body.is-home .rail { margin-top: 2.25rem; }

/* Ask / billboard / events */
.app-trio { display: grid; gap: 1.25rem; margin-top: 2.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .app-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.35rem; border-radius: 1.5rem; background: var(--card); box-shadow: 0 1px 2px oklch(24% 0.04 259 / 0.06); }
.app-card__head { display: flex; align-items: center; gap: 0.8rem; }
.app-card__head h2 { font-size: 1.1rem; font-weight: 800; }
.app-card__head p { font-size: 0.82rem; color: var(--muted-fg); }
.app-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.88rem; color: var(--brand); }
.app-ask { display: flex; gap: 0.4rem; padding: 0.3rem 0.3rem 0.3rem 1rem; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); }
.app-ask input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; }
.app-ask .btn { border-radius: 999px; }
.app-ask:focus-within { border-color: var(--brand); background: var(--card); }
.app-list li a { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.app-list li:last-child a { border-bottom: 0; }
.app-list li a > strong, .app-list li a > span:last-child { min-width: 0; }
.app-list li a:not(:has(.app-ico)) { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.app-list strong { display: block; font-size: 0.92rem; color: var(--navy); line-height: 1.3; }
.app-list a:hover strong { color: var(--brand); }
.app-list small { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--muted-fg); }
.app-list small b { color: var(--teal); }
.app-card .event:first-child { padding-top: 0; }

/* Audiences as colorful tiles */
.app-aud { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .app-aud { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .app-aud { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.app-aud__item { display: flex; align-items: center; gap: 0.7rem; padding: 1rem; border-radius: 1.2rem; font-weight: 800; transition: transform 0.2s, box-shadow 0.2s; }
.app-aud__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.app-aud__item .app-ico { background: oklch(100% 0 0 / 0.7); }
.tone-bg-1 { background: oklch(93% 0.05 255); color: oklch(38% 0.13 255); }
.tone-bg-2 { background: oklch(93% 0.05 295); color: oklch(38% 0.13 295); }
.tone-bg-3 { background: oklch(93% 0.06 160); color: oklch(36% 0.1 160); }
.tone-bg-4 { background: oklch(94% 0.07 80); color: oklch(42% 0.1 60); }
.tone-bg-5 { background: oklch(93% 0.05 20); color: oklch(42% 0.14 20); }
.tone-bg-6 { background: oklch(93% 0.05 205); color: oklch(38% 0.09 215); }

/* Guide pills row */
.app-carousel--guides { grid-auto-columns: minmax(12rem, 14rem); }
.app-guide { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem; border-radius: 1.2rem; background: var(--card); box-shadow: 0 1px 2px oklch(24% 0.04 259 / 0.06); transition: transform 0.2s, box-shadow 0.2s; }
.app-guide:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.app-guide strong { font-size: 0.95rem; color: var(--navy); line-height: 1.3; }
.app-guide small { color: var(--muted-fg); font-size: 0.78rem; margin-top: auto; }

/* Join + advertise */
.app-duo { display: grid; gap: 1.25rem; margin-top: 2.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .app-duo { grid-template-columns: 1.4fr 1fr; } }
.app-promo { border-radius: 1.5rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.app-promo h2 { font-size: 1.3rem; font-weight: 800; }
.app-promo--join { background: linear-gradient(135deg, var(--navy), var(--brand)); color: #fff; }
.app-promo--join h2 { color: #fff; }
.app-promo--join p { color: oklch(100% 0 0 / 0.85); }
.app-promo--ads { background: oklch(95% 0.06 85); }
.app-promo--ads p { color: oklch(40% 0.05 70); }
.app-promo__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; }
.app-promo .btn { border-radius: 999px; }

.app-discover { margin-top: 2.25rem; border-radius: 1.5rem; min-height: 13rem; }
.app-official { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted-fg); }
.app-official .icon { color: var(--brand); }
.app-official a { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-weight: 700; color: var(--navy); }
.app-official a:hover { border-color: var(--brand); color: var(--brand); }

/* ==========================================================================
   Home — harmonised palette (brand navy / blue / gold only)
   Overrides the multi-colour tones above.
   ========================================================================== */
body.is-home { background: oklch(97% 0.01 250); }
.tone-1, .tone-2, .tone-3, .tone-4, .tone-5, .tone-6, .tone-7, .tone-8, .tone-9, .tone-10 {
  background: oklch(94.5% 0.03 255); color: var(--brand);
}
.app-launcher__item:hover .app-ico--lg { background: var(--brand); color: #fff; }

/* Hero: calm brand-blue, no yellow/teal blobs */
.app-hero__main {
  background:
    radial-gradient(circle at 100% 0%, oklch(56% 0.168 255 / 0.16), transparent 45%),
    linear-gradient(135deg, oklch(95% 0.025 255), oklch(98% 0.01 250));
  border: 1px solid oklch(90% 0.02 255);
}
.app-hero__hi { color: var(--brand); }
.app-chip { background: var(--card); border-color: var(--border); }
.app-chip:hover { border-color: var(--brand); }
.app-live, .app-launcher, .app-card, .app-guide { border: 1px solid var(--border); box-shadow: none; }
.app-live__title i { background: var(--brand); box-shadow: 0 0 0 0 oklch(56% 0.168 255 / 0.5); }
@keyframes pulse { 70% { box-shadow: 0 0 0 0.5rem oklch(56% 0.168 255 / 0); } 100% { box-shadow: 0 0 0 0 oklch(56% 0.168 255 / 0); } }

/* Notice: soft gold (brand accent) */
.app-notice { background: oklch(96.5% 0.04 85); border: 1px solid oklch(88% 0.08 85); }
.app-notice .app-ico { background: oklch(100% 0 0 / 0.7); color: var(--gold-ink); }

/* Audiences: white tiles with blue accent instead of rainbow */
.tone-bg-1, .tone-bg-2, .tone-bg-3, .tone-bg-4, .tone-bg-5, .tone-bg-6 { background: var(--card); color: var(--navy); border: 1px solid var(--border); }
.app-aud__item .app-ico { background: oklch(94.5% 0.03 255); color: var(--brand); }
.app-aud__item:hover { border-color: var(--brand); }

/* Promos: navy→blue and light blue (no yellow block) */
.app-promo--ads { background: oklch(95% 0.025 255); border: 1px solid oklch(90% 0.02 255); }
.app-promo--ads p { color: var(--muted-fg); }

/* Listing prices use brand blue for consistency */
.app-list small b { color: var(--brand); }

/* ==========================================================================
   Pro profile header — two-column card (info + work), no cover banner
   ========================================================================== */
.pro-head { display: grid; gap: 1.5rem; margin-top: 0.75rem; padding: 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .pro-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 2rem; gap: 2.25rem; align-items: stretch; } }
.pro-head__info { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.pro-head__top { display: flex; gap: 1.1rem; align-items: center; }
.pro-head__avatar { width: 6rem; height: 6rem; border-radius: 1.25rem; object-fit: cover; flex-shrink: 0; font-size: 1.8rem; }
@media (min-width: 640px) { .pro-head__avatar { width: 7.5rem; height: 7.5rem; border-radius: 1.5rem; } }
.pro-head__cat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 700; color: var(--brand); }
.pro-head__cat span { color: var(--border); }
.pro-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.2rem 0 0.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pro-head__headline { font-size: 1.02rem; color: oklch(40% 0.03 259); }
.pro-head__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pro-head__avail { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: oklch(94% 0.05 150); color: oklch(40% 0.12 150); font-size: 0.78rem; font-weight: 700; }
.pro-head__avail i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: oklch(62% 0.17 150); }
.pro-head__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0; }
@media (min-width: 560px) { .pro-head__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pro-head__stats > div { padding: 0.75rem 0.85rem; border-radius: 0.9rem; background: oklch(96.5% 0.012 255); }
.pro-head__stats dt { font-size: 0.74rem; color: var(--muted-fg); }
.pro-head__stats dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--navy); display: flex; align-items: center; gap: 0.25rem; }
.pro-head__stats dd .icon { color: var(--gold-ink); font-size: 0.95rem; }
.pro-head__stats dd small { font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; color: var(--muted-fg); }
.pro-head__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.pro-head__actions .btn { border-radius: 999px; padding-inline: 1.3rem; }

/* Work mosaic */
.pro-head__work { position: relative; display: grid; gap: 0.5rem; min-height: 16rem; border-radius: 1rem; overflow: hidden; }
.pro-head__work figure { margin: 0; overflow: hidden; background: var(--muted); }
.pro-head__work img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.pro-head__work figure:hover img { transform: scale(1.04); }
.pro-head__work--1 { grid-template-columns: 1fr; }
.pro-head__work--2 { grid-template-columns: 1.4fr 1fr; }
.pro-head__work--3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.pro-head__work--3 figure:first-child { grid-row: span 2; }
.pro-head__work-label { position: absolute; left: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: oklch(100% 0 0 / 0.92); color: var(--navy); font-size: 0.78rem; font-weight: 700; }
@media (max-width: 959px) { .pro-head__work { min-height: 13rem; } }

/* ==========================================================================
   Password gate (protected build only — see tools/lock.js)
   Minimal: plain white page, one centered field, no text.
   ========================================================================== */
#lock { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: #fff; }
.lock__form { width: min(18rem, 100%); }
.lock__form input { width: 100%; padding: 0.8rem 1rem; border: 1px solid oklch(85% 0.01 250); border-radius: 0.6rem; background: #fff; font-size: 1.05rem; text-align: center; letter-spacing: 0.2em; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.lock__form input:focus { border-color: oklch(60% 0.02 250); box-shadow: 0 0 0 3px oklch(60% 0.02 250 / 0.12); }
.lock__form input.is-error { border-color: oklch(60% 0.2 27); box-shadow: 0 0 0 3px oklch(60% 0.2 27 / 0.15); }
.lock__form.shake { animation: shake 0.35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lock__form.is-busy input { opacity: 0.55; cursor: wait; }