/* Website uses central brand tokens and its approved system font. */
html { color-scheme: dark; scroll-behavior: smooth; background: var(--pa-color-background); }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--pa-color-text); }
#pa-whatsapp-ranking { --pw-bg: var(--pa-color-background); --pw-fg: var(--pa-color-text); --pw-muted: var(--pa-color-muted); --pw-border: var(--pa-color-border); --pw-accent: var(--pa-color-accent); --pw-soft: var(--pa-color-surface); }
#pa-whatsapp-ranking * { box-sizing: border-box; }
.pw-site { max-width: 1280px; margin-inline: auto; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pw-accent); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
em { color: var(--pw-accent); font-style: normal; }
b { font-weight: 650; }
.pw-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-space-6); padding: var(--pa-space-8) var(--pa-space-16); }
.pw-logo { display: flex; align-items: center; min-height: 44px; }
.pw-logo img { display: block; width: 160px; height: 28px; object-fit: contain; }
.pw-nav { display: flex; gap: var(--pa-space-8); color: var(--pw-muted); font-size: 14px; }
.pw-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pw-nav a:hover, footer a:hover { color: var(--pw-accent); }
.pw-hero, .pw-section { padding: var(--pa-space-16); }
.pw-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pa-space-12); align-items: center; padding-top: var(--pa-space-12); }
.pw-copy, .pw-demo { min-width: 0; }
.pw-copy > p { color: var(--pw-muted); max-width: 60ch; }
.pw-kicker { font-size: 11px; letter-spacing: 1.2px; font-weight: 700; }
h1 { font-size: clamp(42px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -2px; font-weight: 750; margin: var(--pa-space-6) 0; }
h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -1.2px; margin: var(--pa-space-4) 0 var(--pa-space-6); }
.pw-intro { font-size: 17px; line-height: 1.7; }
.pw-primary, .pw-secondary { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-space-6); padding: var(--pa-space-4) var(--pa-space-6); border-radius: var(--pa-radius-control); min-height: 52px; font-size: 14px; font-weight: 650; }
.pw-primary { background: var(--pw-accent); color: var(--pa-color-on-accent); }
.pw-secondary { border: 1px solid var(--pw-accent); color: var(--pw-accent); }
.pw-primary > svg { width: 20px; height: 20px; }
.pw-hero-action { width: fit-content; margin-top: var(--pa-space-8); }
.pw-hero-platforms { display: flex; align-items: center; gap: var(--pa-space-4); margin-top: var(--pa-space-6); }
.pw-hero-platforms img { object-fit: contain; flex: 0 0 auto; }
.pw-hero-platforms span { font-size: 12px; color: var(--pw-muted); }
.pw-hero-photo { position: relative; align-self: stretch; min-height: 520px; border-radius: var(--pa-radius-card); overflow: hidden; background: var(--pw-soft); }
.pw-hero-photo > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 48% center; }
.pw-section { border-top: 1px solid var(--pw-border); scroll-margin-top: var(--pa-space-6); }
button[aria-pressed=true] { background: var(--pw-soft); color: var(--pw-accent); border-color: var(--pw-accent); }
.pw-research > .pw-copy { max-width: 780px; }
.pw-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pa-space-8); margin-top: var(--pa-space-12); }
.pw-factors > div { min-width: 0; }
.pw-factors svg { display: block; width: 28px; height: 28px; color: var(--pw-accent); margin-bottom: var(--pa-space-4); }
.pw-factors b { display: block; font-size: 16px; margin-bottom: var(--pa-space-2); }
.pw-factors span { display: block; font-size: 14px; color: var(--pw-muted); }
.pw-research-note { font-size: 12px; color: var(--pw-muted); margin-top: var(--pa-space-8); }
.pw-end { text-align: center; }
.pw-end p { color: var(--pw-muted); }
.pw-end .pw-primary { width: fit-content; margin: var(--pa-space-6) auto 0; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pa-space-6); border-top: 1px solid var(--pw-border); padding: var(--pa-space-6) var(--pa-space-16); font-size: 11px; color: var(--pw-muted); }
footer > div { display: flex; gap: var(--pa-space-4); flex-wrap: wrap; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1000px) {
  .pw-header { padding-inline: var(--pa-space-8); }
  .pw-hero, .pw-section { padding: var(--pa-space-12) var(--pa-space-8); gap: var(--pa-space-8); }
  .pw-hero-photo { min-height: 480px; }
  .pw-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
  .pw-header { padding: var(--pa-space-4) var(--pa-space-6); }
  .pw-logo img { width: 140px; }
  .pw-nav a:not(:first-child) { display: none; }
  .pw-nav { font-size: 12px; }
  .pw-hero, .pw-section { display: block; padding: var(--pa-space-8) var(--pa-space-6); }
  h1 { font-size: clamp(38px, 8vw, 52px); letter-spacing: -1.5px; }
  h1 br:first-child { display: none; }
  h2 { font-size: 30px; }
  .pw-intro { font-size: 16px; }
  .pw-hero-photo { min-height: 0; aspect-ratio: 4 / 3; margin-top: var(--pa-space-8); }
  .pw-hero-platforms { gap: var(--pa-space-3); }
  .pw-hero-platforms span { font-size: 11px; }
  .pw-factors { gap: var(--pa-space-6); margin-top: var(--pa-space-8); }
  .pw-factors b { font-size: 14px; }
  .pw-factors span { font-size: 13px; }
  footer { padding: var(--pa-space-6); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Platform selection and both delivery examples share one compact view. */
.pw-channels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pa-space-4) var(--pa-space-12); align-items: start; }
.pw-channel-heading { grid-column: 1; }
.pw-channel-heading h2 { margin-bottom: 0; }
.pw-channel-picker { grid-column: 1; }
.pw-platform-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pa-space-2); }
.pw-platform-switch button { display: flex; align-items: center; justify-content: center; gap: var(--pa-space-2); min-height: 52px; padding: var(--pa-space-2); border: 1px solid var(--pw-border); border-radius: var(--pa-radius-control); background: transparent; font-size: 13px; }
.pw-platform-switch button[aria-pressed=true] { border-color: var(--pw-accent); color: var(--pw-accent); background: var(--pw-soft); }
.pw-platform-switch img { object-fit: contain; }
.pw-platform-panel { padding-top: var(--pa-space-4); font-size: 14px; }
.pw-platform-panel p { color: var(--pw-muted); }
.pw-platform-panel a, .pw-platform-panel summary { display: inline-flex; align-items: center; min-height: 44px; gap: var(--pa-space-2); color: var(--pw-accent); font-weight: 650; cursor: pointer; }
.pw-platform-panel summary { list-style: none; }
.pw-platform-panel summary::after { content: '+'; }
.pw-platform-panel details[open] summary::after { content: '−'; }
.pw-wa-option { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: var(--pa-space-3); padding-block: var(--pa-space-2); }
.pw-wa-option + .pw-wa-option { border-top: 1px solid var(--pw-border); }
.pw-wa-option p { font-size: 12px; }
.pw-wa-option b { font-size: 14px; }
.pw-platform-panel small { display: block; font-size: 11px; color: var(--pw-muted); }
.pw-group-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pa-space-2); }
.pw-comparison { grid-column: 2; grid-row: 1 / span 3; max-width: 440px; width: 100%; margin-inline: auto; }
.pw-comparison-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--pa-space-4); }
.pw-example-title { font-size: 12px; font-weight: 650; margin-bottom: var(--pa-space-3); }
.pw-mini-story img { width: 100%; height: auto; display: block; border: 1px solid var(--pw-border); border-radius: var(--pa-radius-control); }
.pw-mini-messages { min-width: 0; }
.pw-mini-bubble { padding: var(--pa-space-3); background: var(--pw-soft); border-radius: 0 var(--pa-radius-control) var(--pa-radius-control); font-size: 12px; line-height: 1.5; }
.pw-mini-bubble b { display: block; color: var(--pw-accent); font-size: 11px; margin-bottom: var(--pa-space-2); }
.pw-mini-bubble strong { font-size: 12px; }
.pw-mini-bubble p { margin-top: var(--pa-space-2); }
.pw-mini-bubble small { display: block; margin-top: var(--pa-space-2); font-size: 10px; color: var(--pw-muted); }
.pw-mini-personal { margin-top: var(--pa-space-4); }
.pw-mini-question { color: var(--pw-accent); }
.pw-comparison figcaption { margin-top: var(--pa-space-3); font-size: 10px; color: var(--pw-muted); }
.pw-cadence { grid-column: 1; color: var(--pw-muted); font-size: 11px; }
@media (max-width: 740px) {
  .pw-channels { display: flex; flex-direction: column; gap: var(--pa-space-4); }
  .pw-channel-heading h2 { font-size: 28px; margin-top: var(--pa-space-2); }
  .pw-channel-picker { width: 100%; }
  .pw-platform-switch button { min-height: 48px; gap: var(--pa-space-1); font-size: 12px; }
  .pw-platform-switch img { width: 20px; height: 20px; }
  .pw-platform-panel { padding-top: var(--pa-space-2); font-size: 12px; }
  .pw-comparison { max-width: 330px; }
  .pw-comparison-grid { grid-template-columns: .9fr 1.1fr; gap: var(--pa-space-3); align-items: start; }
  .pw-example-title { font-size: 11px; margin-bottom: var(--pa-space-2); }
  .pw-mini-bubble { font-size: 11px; line-height: 1.4; padding: var(--pa-space-2); }
  .pw-mini-bubble b { margin-bottom: var(--pa-space-1); font-size: 10px; }
  .pw-mini-bubble strong { font-size: 11px; }
  .pw-mini-bubble p { margin-top: var(--pa-space-1); }
  .pw-mini-bubble small { margin-top: var(--pa-space-1); font-size: 9px; }
  .pw-mini-personal { margin-top: var(--pa-space-2); }
  .pw-comparison figcaption { font-size: 9px; margin-top: var(--pa-space-2); }
  .pw-cadence { font-size: 10px; }
}

/* Show only the selected platform's format. */
.pw-comparison { grid-row: 1 / span 2; }
.pw-comparison-grid { display: block; }
.pw-mini-story { max-width: 260px; margin-inline: auto; }
.pw-mini-messages { max-width: 380px; margin-inline: auto; }
.pw-mini-messages .pw-mini-bubble { font-size: 14px; padding: var(--pa-space-4); }
.pw-mini-messages .pw-mini-bubble b { font-size: 12px; }
.pw-mini-messages .pw-mini-bubble strong { font-size: 14px; }
.pw-mini-messages .pw-mini-bubble small { font-size: 11px; }
@media (max-width: 740px) {
  .pw-mini-story { max-width: 180px; }
  .pw-mini-messages .pw-mini-bubble { font-size: 12px; padding: var(--pa-space-3); }
  .pw-mini-messages .pw-mini-bubble b { font-size: 11px; }
  .pw-mini-messages .pw-mini-bubble strong { font-size: 12px; }
  .pw-mini-messages .pw-mini-bubble small { font-size: 10px; }
}
@media (min-width: 741px) {
  .pw-channels { grid-template-rows: auto 1fr; }
}

/* Keep each WhatsApp offer together with its own message example. */
.pw-wa-option .pw-mini-bubble { flex-basis: 100%; margin-top: var(--pa-space-2); }
.pw-platform-panel .pw-mini-bubble p { color: var(--pw-fg); }
.pw-platform-panel .pw-mini-bubble .pw-mini-question { color: var(--pw-accent); }
.pw-wa-option + .pw-wa-option { margin-top: var(--pa-space-4); padding-top: var(--pa-space-4); }

/* Static WhatsApp examples: chat headers, sender names and message direction. */
.pw-message-thread { flex-basis: 100%; min-width: 0; margin-top: var(--pa-space-3); border: 1px solid var(--pw-border); border-radius: var(--pa-radius-card); overflow: hidden; }
.pw-thread-header { display: flex; align-items: center; gap: var(--pa-space-2); padding: var(--pa-space-3); background: var(--pw-soft); }
.pw-thread-header img { border-radius: 50%; }
.pw-thread-header b { display: block; font-size: 12px; line-height: 1.3; }
.pw-thread-header small { font-size: 10px; }
.pw-thread-body { display: flex; flex-direction: column; gap: var(--pa-space-3); padding: var(--pa-space-4); background: var(--pw-bg); background-image: radial-gradient(var(--pw-border) .7px, transparent .7px); background-size: 16px 16px; }
.pw-message { position: relative; max-width: 94%; padding: var(--pa-space-3); font-size: 12px; line-height: 1.5; }
.pw-message-in { align-self: flex-start; background: var(--pw-soft); border-radius: 0 var(--pa-radius-control) var(--pa-radius-control); }
.pw-message-out { align-self: flex-end; background: color-mix(in srgb, var(--pw-accent) 22%, var(--pw-bg)); border-radius: var(--pa-radius-control) 0 var(--pa-radius-control) var(--pa-radius-control); }
.pw-message::before { content: ''; position: absolute; top: 0; width: 0; height: 0; border-top: 8px solid var(--pw-soft); }
.pw-message-in::before { left: -6px; border-left: 6px solid transparent; }
.pw-message-out::before { right: -6px; border-right: 6px solid transparent; border-top-color: color-mix(in srgb, var(--pw-accent) 22%, var(--pw-bg)); }
.pw-message-sender { display: block; margin-bottom: var(--pa-space-1); color: var(--pw-accent); font-size: 11px; font-weight: 650; }
.pw-message strong { display: block; }
.pw-platform-panel .pw-message p { color: var(--pw-fg); font-size: 12px; margin-top: var(--pa-space-2); }
.pw-platform-panel .pw-message-out p { margin-top: 0; }
.pw-message-time { display: block; text-align: right; color: var(--pw-muted); font-size: 9px; margin-top: var(--pa-space-1); }
.pw-message-time > span { color: var(--pw-accent); }

/* Platform marks follow the headline rather than the hero action. */
.pw-title-tail { white-space: nowrap; }
.pw-title-platforms { display: inline-flex; align-items: center; gap: var(--pa-space-2); vertical-align: middle; margin-left: var(--pa-space-1); line-height: 1; }
.pw-title-platforms img { display: block; object-fit: contain; }
@media (max-width: 740px) {
  .pw-hero h1 { font-size: clamp(29px, 8.5vw, 52px); letter-spacing: -1.2px; }
  .pw-hero h1 br:first-child { display: initial; }
}

/* Desktop: a vertical platform menu beside its selected output. */
@media (min-width: 741px) {
  .pw-channels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: var(--pa-space-6) var(--pa-space-16); }
  .pw-channel-heading { grid-column: 1; grid-row: 1; }
  .pw-channel-picker { display: contents; }
  .pw-platform-switch { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: var(--pa-space-3); max-width: 380px; }
  .pw-platform-switch button { justify-content: flex-start; padding: var(--pa-space-4) var(--pa-space-6); gap: var(--pa-space-4); min-height: 64px; font-size: 16px; }
  #pw-instagram, #pw-tiktok { grid-column: 1; grid-row: 3; padding-top: 0; }
  .pw-comparison { grid-column: 2; grid-row: 1 / span 3; }
  #pw-whatsapp { grid-column: 2; grid-row: 1 / span 3; display: block; padding-top: 0; width: 100%; max-width: 460px; margin-inline: auto; }
  #pw-whatsapp .pw-wa-option { align-content: start; }
}

/* Give the official colour marks equal visual weight and breathing room. */
.pw-title-platforms { gap: var(--pa-space-4); margin-left: var(--pa-space-3); vertical-align: .05em; }
.pw-title-platforms img { width: 36px; height: 36px; }
.pw-title-platforms img[alt="TikTok"] { width: 40px; height: 40px; }
@media (max-width: 740px) {
  .pw-title-platforms { display: flex; width: fit-content; margin-left: 0; margin-top: var(--pa-space-4); gap: var(--pa-space-6); }
  .pw-title-platforms img { width: 36px; height: 36px; }
}