/* Platforms page (/platforms). Tokens, header, buttons, hero, scan ring, closer and footer come from site.css.
   Platform names are typeset in the Nongkao CI; no platform logos are used (Pngoung, 27 Sep 2026). */

/* Each platform keeps its own colour as an accent only: card edge, offset shadow, chip edge, a dot in the table.
   Text stays ink/white for contrast, and nothing imitates a platform logo or screen (Pngoung, 27 Sep 2026). */
:root{--pf-line:#06C755;--pf-fb:#0866FF;--pf-ig:#E1306C;--pf-tt:#FE2C55;--pf-shopee:#EE4D2D}
.pf-tone-line{--pf-accent:var(--pf-line)}.pf-tone-fb{--pf-accent:var(--pf-fb)}.pf-tone-ig{--pf-accent:var(--pf-ig)}

/* The first screen says what is new: TikTok (Ice, 27 Sep). */
.kicker.pf-news{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:var(--ink);border-color:var(--ink);color:var(--white);font-size:1rem;text-decoration:none;box-shadow:4px 4px 0 rgb(47 44 70 / .3);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.kicker.pf-news:hover{color:var(--white);transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgb(47 44 70 / .3)}
.kicker.pf-news:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pf-news-badge{flex:none;padding:2px 10px;border-radius:var(--r-pill);background:var(--cyan);color:var(--ink);font-weight:600}
.pf-news-text{min-width:0}

/* Hero: platform name chips around the character. They are our own type chips, so they may float. */
.pf-chip{position:absolute;margin:0;padding:10px 18px;border:var(--line);border-radius:var(--r-pill);background:var(--white);box-shadow:var(--drop);font:600 1.05rem/1 var(--font-display);white-space:nowrap;animation:pf-float 5.5s var(--ease-out) infinite alternate;animation-delay:calc(var(--i) * -1.3s)}
.pf-chip-a{left:-6%;top:2%;rotate:-5deg}
.pf-chip-b{right:-14%;top:27%;rotate:4deg}
.pf-chip-c{left:-22%;top:46%;rotate:3deg}
.pf-chip-d{right:-12%;top:61%;rotate:-3deg}
.pf-chip.pf-tone-line,.pf-chip.pf-tone-fb,.pf-chip.pf-tone-ig{border:2.5px solid var(--pf-accent)}
.pf-chip-new{background:var(--ink);border:2.5px solid var(--pf-tt);color:var(--white);font-size:1.5rem;padding:12px 20px;box-shadow:5px 5px 0 var(--rose)}
.pf-chip-new span{display:inline-block;margin-left:6px;padding:3px 10px;border-radius:var(--r-pill);background:var(--cyan);color:var(--ink);font-size:.8rem;vertical-align:3px}
.pf-chip-new::before{content:"";position:absolute;inset:-7px;border-radius:inherit;border:2px solid var(--cyan);opacity:0;animation:pf-ping 2.6s ease-out 4;pointer-events:none}
@keyframes pf-float{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
@keyframes pf-ping{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.22)}}

.pf-hero{overflow-x:clip}
.pf-hero h1{font-size:clamp(2.2rem,1.1rem + 4vw,3.7rem)}
.pf-band{padding:var(--space-section) var(--gutter)}
#platforms{padding-top:calc(var(--space-section) + 40px)}

/* The four platforms: TikTok leads the bento, the other three stack beside it. */
.pf-bento{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,2vw,24px);max-width:1180px;margin:0 auto}
.pf-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,30px);border:var(--line);border-radius:var(--r-panel);background:var(--white);box-shadow:var(--drop);transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.pf-card:hover{transform:translate(-2px,-2px);box-shadow:var(--drop-lg)}
.pf-name{font:600 clamp(1.7rem,1.2rem + 1.6vw,2.4rem)/1.1 var(--font-display)}
.pf-where{max-width:34em;color:var(--muted)}
.pf-can{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.pf-can li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border:var(--line);border-radius:var(--r-pill);background:var(--surface);font:500 .95rem/1.2 var(--font-display)}
.pf-can li::before,.pf-table td.yes::before{content:"";flex:none;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%232F2C46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pf-note{color:var(--muted);font-size:var(--text-small)}
.pf-flag{align-self:flex-start;margin:0;padding:4px 12px;border-radius:var(--r-pill);background:var(--cyan);color:var(--ink);font:600 .9rem/1.3 var(--font-display)}
.pf-card-clip{position:relative;display:block;margin-top:auto;border:2px solid var(--rose-soft);border-radius:var(--r-card);overflow:hidden;box-shadow:6px 6px 0 rgb(243 145 169 / .35);transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.pf-card-clip:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgb(243 145 169 / .45)}
.pf-card-clip:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.pf-card-clip img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pf-card-clip span{position:absolute;left:12px;bottom:12px;padding:6px 14px;border:1.5px solid var(--white);border-radius:var(--r-pill);background:var(--ink);color:var(--white);font:500 .95rem/1.2 var(--font-display)}
.pf-card-tiktok{grid-row:1/span 3;justify-content:flex-start;overflow:hidden;background:var(--ink);border:2.5px solid var(--pf-tt);box-shadow:9px 9px 0 var(--rose);color:var(--white)}
.pf-card-tiktok:hover{box-shadow:11px 11px 0 var(--rose)}
.pf-card-line{border:2.5px solid var(--pf-line)}
.pf-card-fb{border:2.5px solid var(--pf-fb)}
.pf-card-ig{border:2.5px solid var(--pf-ig)}
.pf-card-line .pf-name::after,.pf-card-fb .pf-name::after,.pf-card-ig .pf-name::after{content:"";display:block;width:56px;height:5px;margin-top:10px;border-radius:3px;background:var(--pf-line)}
.pf-card-fb .pf-name::after{background:var(--pf-fb)}.pf-card-ig .pf-name::after{background:var(--pf-ig)}
.pf-card-tiktok .pf-name{font-size:clamp(2.8rem,1.6rem + 3.6vw,4.6rem);color:var(--white)}
.pf-card-tiktok .pf-where,.pf-card-tiktok .pf-note{color:var(--rose-soft)}
.pf-card-tiktok .pf-can li{background:rgb(255 255 255 / .08);border-color:var(--rose-soft);color:var(--white)}
.pf-card-tiktok .pf-can li::before{border-color:var(--white)}
.pf-card-face{position:absolute;right:clamp(16px,2.4vw,30px);top:clamp(16px,2.4vw,30px);width:clamp(76px,8vw,108px);height:auto;border:2px solid var(--rose-soft);border-radius:50%;background:var(--rose-soft);rotate:8deg}

/* TikTok spotlight: the one dark band of the page */
.pf-tiktok{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(28px,4vw,64px);padding:var(--space-section) var(--gutter);background:var(--ink);color:var(--white);overflow:clip}
.pf-tiktok::before{content:"";position:absolute;right:-12%;bottom:-38%;width:min(62vw,760px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(243 145 169 / .26),transparent);pointer-events:none}
.pf-tt-copy,.pf-tt-player{position:relative}
.pf-tiktok :focus-visible,.pf-card-tiktok :focus-visible{outline-color:var(--cyan)}
.pf-kicker{display:inline-block;margin:0 0 var(--space-4);padding:4px 14px;border-radius:var(--r-pill);background:var(--cyan);color:var(--ink);font:600 .9rem/1.6 var(--font-display)}
.pf-tiktok h2{font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem);color:var(--white)}
.pf-glow{color:var(--rose)}
.pf-tt-lede{margin-top:var(--space-4);max-width:34em;color:var(--rose-soft);font-size:1.1rem}
.pf-steps,.pf-just{display:grid;margin:0;padding:0;list-style:none}
.pf-steps{gap:12px;margin-top:var(--space-6)}
.pf-steps li,.pf-just li{display:flex;align-items:flex-start;gap:14px}
.pf-steps .beat-no{background:var(--rose);border-color:var(--white);color:var(--ink)}
.pf-steps b{color:var(--cyan);font-weight:600}
.pf-tt-note{margin-top:var(--space-5);padding:12px 16px;border:1.5px dashed var(--rose-soft);border-radius:var(--r-card);color:var(--rose-soft);font-size:var(--text-small)}
.pf-tt-player{margin:0}
.pf-tt-player video{width:100%;aspect-ratio:16/9;border:2px solid var(--white);border-radius:var(--r-card);background:#000;box-shadow:8px 8px 0 rgb(243 145 169 / .45)}
.pf-tt-player figcaption{margin-top:12px;color:var(--rose-soft);font-size:var(--text-small)}
.pf-tt-player figcaption a{color:var(--cyan)}
.pf-tt-face{position:absolute;right:8px;top:auto;bottom:calc(100% + 8px);width:clamp(88px,9vw,124px);height:auto;border:2px solid var(--white);border-radius:50%;background:var(--rose-soft);rotate:6deg}

/* No API: what you skip, and the three steps you do */
.pf-noapi{background:var(--white);border-block:var(--line)}
.pf-noapi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start;gap:clamp(24px,4vw,64px);max-width:1080px;margin:0 auto}
.pf-skip{padding:clamp(20px,2.4vw,30px);border:var(--line);border-radius:var(--r-panel);background:var(--rose-soft);box-shadow:var(--drop-lg);rotate:-1.5deg}
.pf-skip h3{margin-bottom:var(--space-4)}
.pf-skip ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pf-skip li{display:flex;align-items:center;gap:12px;font:500 1.05rem/1.4 var(--font-display)}
.pf-skip li::before{content:"";flex:none;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;background:var(--rose-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5m0-5-5 5' stroke='%23C93873' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pf-just{gap:14px}
.pf-just li{align-items:center;padding:18px 22px;border:var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:var(--drop)}
.pf-just li:nth-child(2){margin-left:clamp(0px,3vw,40px)}
.pf-just li:nth-child(3){margin-left:clamp(0px,6vw,80px)}

/* Compare */
.pf-table-wrap{max-width:900px;margin:0 auto;overflow-x:auto;border:var(--line);border-radius:var(--r-panel);background:var(--white);box-shadow:var(--drop)}
.pf-table{width:100%;min-width:520px;border-collapse:collapse}
.pf-table caption{caption-side:bottom;padding:12px 18px;color:var(--muted);font-size:var(--text-small);text-align:left}
.pf-table th,.pf-table td{padding:14px 18px;border-bottom:1px solid var(--border);text-align:center}
.pf-table thead th{background:var(--surface);font:500 .95rem/1.3 var(--font-display)}
.pf-table tbody th{text-align:left;font:600 1.05rem/1.3 var(--font-display);white-space:nowrap}
.pf-table tbody th::before{content:"";display:inline-block;width:12px;height:12px;margin-right:10px;border-radius:50%;vertical-align:1px;background:var(--pf-line)}
.pf-table th.pf-tone-fb::before{background:var(--pf-fb)}.pf-table th.pf-tone-ig::before{background:var(--pf-ig)}
.pf-table th.pf-tone-tiktok::before{background:var(--pf-tt)}.pf-table th.pf-tone-shopee::before{background:var(--pf-shopee)}
.pf-table td.soon span,.pf-soon-tag{display:inline-block;padding:3px 10px;border:1.5px dashed var(--navy);border-radius:var(--r-pill);background:var(--peach);color:var(--ink);font:500 .82rem/1.3 var(--font-display);white-space:nowrap}
.pf-row-soon th,.pf-row-soon td.no{color:var(--muted)}
.pf-soon-card{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;max-width:1180px;margin:clamp(16px,2vw,24px) auto 0;padding:16px 22px;border:2.5px dashed var(--pf-shopee);border-radius:var(--r-panel);background:var(--white);font-size:1.02rem}
.pf-soon-card b{font:600 1.35rem/1.2 var(--font-display)}
.pf-table td.yes{font-weight:700}
.pf-table td.yes::before{display:inline-block;margin-right:8px;vertical-align:-4px}
.pf-table td.no{color:var(--muted);font-size:.92rem}
.pf-row-new{background:rgb(130 235 253 / .16)}
.pf-table small{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--cyan);font:500 .75rem/1.3 var(--font-display);vertical-align:2px}
.pf-notyet{display:flex;align-items:flex-start;gap:clamp(16px,3vw,32px);max-width:900px;margin:var(--space-7) auto 0;padding:clamp(20px,2.4vw,30px);border:1.5px dashed var(--navy);border-radius:var(--r-panel);background:var(--surface)}
.pf-notyet-face{flex:none;width:clamp(72px,9vw,110px);height:auto;border:var(--line);border-radius:50%;background:var(--rose-soft)}
.pf-notyet ul{margin:10px 0 0;padding-left:1.2em;list-style:disc}
.pf-notyet li{margin:4px 0}

@media (max-width:1180px){.pf-chip-b{right:-6%}.pf-chip-d{right:-4%}}
@media (max-width:980px){
  .pf-bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pf-card-tiktok{grid-column:1/-1;grid-row:auto}
  .pf-card-ig{grid-column:1/-1}
}
@media (max-width:860px){
  .pf-tiktok,.pf-noapi-grid{grid-template-columns:minmax(0,1fr)}
  .pf-chip{padding:7px 13px;font-size:.9rem}.pf-chip-new{padding:9px 15px;font-size:1.05rem}
  .pf-chip-a{left:-4%;top:1%}.pf-chip-b{right:-10%;top:23%}.pf-chip-c{left:-12%;top:43%}.pf-chip-d{right:-8%;top:61%}
  .pf-just li:nth-child(n){margin-left:0}
  .pf-tt-face{display:none}
}
@media (max-width:560px){
  .pf-bento{grid-template-columns:minmax(0,1fr)}
  .pf-notyet{flex-direction:column}
  .kicker.pf-news{border-radius:18px;line-height:1.45}
  .pf-table{min-width:0;font-size:.86rem}.pf-table th,.pf-table td{padding:10px 6px}.pf-table thead th{font-size:.8rem}
  .pf-table tbody th{white-space:normal;font-size:.92rem}.pf-table td.no{font-size:.74rem}
  .pf-table td.soon span{padding:2px 6px;font-size:.7rem;white-space:normal}.pf-table td.yes::before{display:block;margin:0 auto 4px}.pf-table tbody th::before{display:block;margin:0 0 6px}.pf-table small{display:block;width:max-content;margin:4px 0 0}
}
@media (max-width:400px){.top .btn-sm{padding:8px 14px;white-space:nowrap}.brand-name{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){
  .pf-chip,.pf-chip-new::before{animation:none}
  .pf-card{transition:none}
}