/* Guides ("best of" research pages) in the candy style. Loaded after home-candy.css and candy-pages.css. */

.wwg { --warm: #ffc9a6; --card: rgba(47, 40, 55, 0.6); --card-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* ---------- Hero ---------- */
.wwg-hero { padding-bottom: clamp(8px, 2vw, 24px); }
.wwg-hero__inner { position: relative; z-index: 2; padding-top: clamp(12px, 2.4vw, 32px); }
.wwg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 clamp(22px, 3vw, 36px); font-size: 0.84rem; font-weight: 500; color: var(--faint); }
.wwg-crumbs a { color: var(--soft); }
.wwg-crumbs a:hover { color: #fff; }
.wwg-hero .wwa-eyebrow { margin-bottom: 0.6rem; }
.wwg-hero__title { max-width: 21ch; margin: 0 0 0.32em; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.wwg-hero__lede { max-width: 46rem; margin: 0 0 1.8rem; font-size: clamp(1.08rem, 1.45vw, 1.25rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.012em; color: var(--soft); text-wrap: pretty; }

.wwg-byline { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; }
.wwg-byline__photo { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 8px 20px -8px rgba(0, 0, 0, 0.6); }
.wwg-byline__text { display: grid; gap: 0.1rem; margin: 0; line-height: 1.35; }
.wwg-byline__name { justify-self: start; font-size: 1rem; font-weight: 600; color: #fff; }
.wwg-byline__name:hover { color: var(--lilac); }
.wwg-byline__meta { font-size: 0.86rem; color: var(--faint); }

.wwg-disclosure { display: inline-flex; align-items: flex-start; gap: 0.55rem; max-width: 46rem; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 0.88rem; line-height: 1.45; color: rgba(246, 243, 251, 0.74); }
.wwg-disclosure svg { flex: none; margin-top: 2px; color: var(--lilac); }

.wwg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.wwg-stats li { display: grid; align-content: start; gap: 0.3rem; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px); border-radius: 22px; background: var(--glass-bg); box-shadow: var(--glass-edge), var(--glass-drop); }
.wwg-stats strong { font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.wwg-stats span { font-size: 0.92rem; line-height: 1.4; color: var(--soft); }

/* ---------- Section heads ---------- */
.wwg-head { max-width: 760px; margin: 0 0 clamp(26px, 3.4vw, 44px); }
.wwg-h2 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.5rem); text-wrap: balance; }
.wwg-head__lede { max-width: 44rem; margin: 0.8rem 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.wwg .wwa-section { scroll-margin-top: calc(var(--nav-h) + 8px); }
.wwg-picks-section { padding-top: clamp(40px, 5vw, 72px); }

/* ---------- Picks ---------- */
.wwg-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.wwg-pick { display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(20px, 2.2vw, 26px); border-radius: 26px; background: var(--card); box-shadow: var(--card-edge), var(--glass-drop); }
.wwg-pick__label { margin: 0; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.005em; color: var(--lilac); }
.wwg-pick__name { margin: 0; font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.wwg-pick__text { flex: 1; margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--soft); }
.wwg-pick__link { margin-top: 0.5rem; font-size: 0.95rem; }
.wwg-pick--featured { grid-row: span 2; gap: 0.55rem; padding: clamp(24px, 2.6vw, 32px); background: radial-gradient(120% 70% at 0% 0%, rgba(157, 110, 255, 0.3), transparent 70%), var(--card); box-shadow: inset 0 0 0 1px rgba(210, 205, 255, 0.22), var(--glass-drop); }
.wwg-pick__icon { width: 64px; height: 64px; margin-bottom: 0.5rem; border-radius: 15px; box-shadow: 0 12px 30px -10px rgba(157, 110, 255, 0.7); }
.wwg-pick--featured .wwg-pick__name { font-size: clamp(2rem, 3vw, 2.6rem); }
.wwg-pick--featured .wwg-pick__text { flex: 0 1 auto; font-size: 1.04rem; color: rgba(246, 243, 251, 0.82); }
.wwg-pick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 0.8rem; }
.wwg-pick__actions .wwg-pick__link { margin-top: 0; }

/* ---------- Comparison table ---------- */
.wwg-table-wrap { border-radius: 26px; background: var(--card); box-shadow: var(--card-edge), var(--glass-drop); overflow: hidden; }
.wwg-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.42; }
.wwg-table th,
.wwg-table td { padding: 14px 14px; text-align: start; vertical-align: top; }
.wwg-table thead th { padding-top: 16px; padding-bottom: 12px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.005em; color: var(--faint); }
.wwg-table tbody tr { border-top: 1px solid var(--hair); }
.wwg-table tbody th { font-size: 0.98rem; font-weight: 600; color: #fff; }
.wwg-table tbody th a:hover { color: var(--lilac); }
.wwg-table td { color: var(--soft); }
.wwg-table th:first-child,
.wwg-table td:first-child { padding-inline-start: 22px; }
.wwg-table th:last-child,
.wwg-table td:last-child { padding-inline-end: 22px; }
.wwg-table td:nth-child(5),
.wwg-table td:nth-child(6),
.wwg-table td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wwg-table td:nth-child(6) { color: #fff; font-weight: 600; }
.wwg-note { max-width: 60rem; margin: 14px 4px 0; font-size: 0.84rem; line-height: 1.5; color: var(--faint); }

/* ---------- Insights ---------- */
.wwg-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wwg-chart { display: flex; flex-direction: column; margin: 0; padding: clamp(20px, 2.2vw, 26px); border-radius: 26px; background: var(--card); box-shadow: var(--card-edge), var(--glass-drop); }
.wwg-chart__title { margin: 0 0 0.3rem; font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: #fff; }
.wwg-chart__caption { margin: 0 0 1.1rem; font-size: 0.84rem; line-height: 1.45; color: var(--faint); }
.wwg-bars { display: grid; gap: 4px; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.wwg-bar { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr) 2.9rem; align-items: center; gap: 10px; min-height: 28px; font-size: 0.86rem; }
.wwg-bar__label { overflow: hidden; color: var(--soft); white-space: nowrap; text-overflow: ellipsis; }
.wwg-bar__track { position: relative; height: 10px; border-start-end-radius: 4px; border-end-end-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.wwg-bar__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--accent); }
.wwg-bar__value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; color: #fff; }
.wwg-chart__takeaway { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: 0.92rem; line-height: 1.5; color: var(--soft); }

.wwg-findings__title { margin: clamp(40px, 5vw, 64px) 0 clamp(18px, 2.4vw, 26px); font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.wwg-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: wwg-finding; }
.wwg-findings li { counter-increment: wwg-finding; padding: clamp(20px, 2.2vw, 26px); border-radius: 22px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 0.98rem; line-height: 1.55; color: var(--soft); }
.wwg-findings li::before { content: "0" counter(wwg-finding); display: block; margin-bottom: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--lilac); }
.wwg-findings strong { display: block; margin-bottom: 0.3rem; font-size: 1.06rem; font-weight: 600; color: #fff; }

/* ---------- App sections ---------- */
.wwg-app { padding: clamp(36px, 4.4vw, 56px) 0; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--nav-h) + 8px); }
.wwg-app:last-child { padding-bottom: 0; }
.wwg-app__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0 0 clamp(20px, 2.6vw, 30px); }
.wwg-app__rank { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(157, 110, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(210, 205, 255, 0.28); font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--lilac); }
.wwg-app__title { display: grid; flex: 1 1 12rem; gap: 0.25rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wwg-app__name { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.02; letter-spacing: -0.025em; color: #fff; }
.wwg-app__verdict { font-family: var(--sans); font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--lilac); }
.wwg-app__ours { align-self: center; padding: 5px 11px; border-radius: 999px; background: rgba(157, 110, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(210, 205, 255, 0.3); font-size: 0.78rem; font-weight: 600; color: var(--lilac); }

.wwg-app__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr); gap: clamp(22px, 3.6vw, 48px); align-items: start; }
.wwg-app__side { display: grid; gap: 16px; justify-items: start; }
.wwg-facts { width: 100%; margin: 0; padding: 6px 20px; border-radius: 22px; background: var(--card); box-shadow: var(--card-edge), var(--glass-drop); }
.wwg-facts div { padding: 12px 0; border-top: 1px solid var(--hair); }
.wwg-facts div:first-child { border-top: 0; }
.wwg-facts dt { margin: 0 0 0.15rem; font-size: 0.78rem; font-weight: 600; color: var(--faint); }
.wwg-facts dd { margin: 0; font-size: 0.95rem; line-height: 1.42; color: #fff; }
.wwg-app__link { font-size: 0.95rem; }
.wwg-app__link .wwp-out { flex: none; }

.wwg-app__body { font-size: clamp(1.02rem, 1.15vw, 1.08rem); line-height: 1.65; color: var(--soft); }
.wwg-app__body p { margin: 0 0 1em; }
.wwg-app__body a { color: #fff; text-decoration: underline; text-decoration-color: rgba(210, 205, 255, 0.5); text-underline-offset: 0.22em; }
.wwg-app__body a:hover { color: var(--lilac); }

.wwg-verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0.4rem; }
.wwg-verdict { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 20px; font-size: 0.95rem; line-height: 1.52; color: var(--soft); }
.wwg-verdict > p { margin: 0 0 0.9rem; }
.wwg-verdict--love { background: rgba(157, 110, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(157, 110, 255, 0.16); }
.wwg-verdict--catch { background: rgba(255, 170, 120, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 190, 150, 0.13); }
.wwg-verdict .wwg-verdict__label { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: var(--lilac); }
.wwg-verdict--catch .wwg-verdict__label { color: var(--warm); }
.wwg-quote { margin: auto 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--hair); }
.wwg-quote p { margin: 0 0 0.3rem; font-family: var(--serif); font-size: 1.06rem; font-style: italic; line-height: 1.4; color: #fff; }
.wwg-quote footer { font-size: 0.78rem; color: var(--faint); }

/* ---------- Blocks reused from the How it works pages ---------- */
.wwg-block .wwh-block__inner { max-width: none; }
.wwg-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.wwg-apps + .wwg-block { padding-top: clamp(56px, 7vw, 96px); }
.wwg-steps li { font-size: 0.95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .wwg-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwg-pick--featured { grid-row: auto; grid-column: 1 / -1; }
  .wwg-charts { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
}

/* The table becomes one card per app */
@media (max-width: 1000px) {
  .wwg-table-wrap { border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .wwg-table,
  .wwg-table tbody { display: block; }
  .wwg-table thead { display: none; }
  .wwg-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0 0 12px; padding: 18px 20px 20px; border: 0; border-radius: 22px; background: var(--card); box-shadow: var(--card-edge), var(--glass-drop); }
  .wwg-table tbody th { grid-column: 1 / -1; padding: 0 0 2px; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; letter-spacing: -0.02em; }
  .wwg-table th:first-child,
  .wwg-table td:first-child,
  .wwg-table th:last-child,
  .wwg-table td:last-child { padding: 0; }
  .wwg-table td { display: grid; align-content: start; gap: 0.15rem; padding: 0; white-space: normal !important; }
  .wwg-table td::before { content: attr(data-label); font-size: 0.76rem; font-weight: 600; color: var(--faint); }
  .wwg-note { margin-top: 4px; }
}

@media (max-width: 860px) {
  .wwg-app__grid { grid-template-columns: minmax(0, 1fr); }
  .wwg-findings { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .wwg-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wwg-stats li { grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; }
  .wwg-stats strong { font-size: 1.75rem; white-space: nowrap; }
  .wwg-picks { grid-template-columns: minmax(0, 1fr); }
  .wwg-verdicts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .wwg-hero__title { font-size: clamp(2.3rem, 10.4vw, 2.9rem); }
  .wwg-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; }
  .wwg-table td:nth-child(2),
  .wwg-table td:nth-child(3),
  .wwg-table td:nth-child(7) { grid-column: 1 / -1; }
  .wwg-bar { grid-template-columns: 6.9rem minmax(0, 1fr) 2.7rem; gap: 8px; font-size: 0.84rem; }
  .wwg-app__rank { width: 44px; height: 44px; font-size: 1.3rem; }
  .wwg-app__head { gap: 12px 14px; }
  .wwg-facts { padding: 4px 18px; }
}

.wwg .wwh-prose a { color: var(--lilac); text-decoration: underline; text-decoration-color: rgba(210, 205, 255, 0.4); text-underline-offset: 3px; }
.wwg .wwh-prose a:hover { text-decoration-color: currentColor; }

/* Chinese, Japanese and Korean: wider title measure (ch counts half a character) and phrase-aware line breaks */
html:is(:lang(ja), :lang(zh), :lang(ko)) .wwg-hero__title { max-width: 15em; }
html:is(:lang(ja), :lang(zh), :lang(ko)) .wwg :is(h1, h2, h3, .wwg-pick__name, .wwg-chart__title) { word-break: auto-phrase; }