/* TikTok ad formats guide: layout, HTML charts, ad image grids and the hero phone illustration only. */
.bespoke-tiktok-ad-formats figure{margin:0}
.bespoke-tiktok-ad-formats .af-hero{padding-top:48px}
.bespoke-tiktok-ad-formats .af-no{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--ls-ink);background:var(--ls-yellow);border:2px solid var(--ls-ink);border-radius:999px;padding:2px 12px;margin-bottom:14px}

/* hero illustration: flat, 2px ink outlines, pastel fills */
.bespoke-tiktok-ad-formats .af-o *{stroke:#1f1e1c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.bespoke-tiktok-ad-formats .af-o .f-paper{fill:var(--ls-paper)}
.bespoke-tiktok-ad-formats .af-o .f-blue{fill:var(--ls-blue)}
.bespoke-tiktok-ad-formats .af-o .f-peach{fill:var(--ls-peach)}
.bespoke-tiktok-ad-formats .af-o .f-yellow{fill:var(--ls-yellow)}
.bespoke-tiktok-ad-formats .af-o .f-mint{fill:var(--ls-mint)}
.bespoke-tiktok-ad-formats .af-o .f-lavender{fill:var(--ls-lavender)}

/* 01 format groups */
.bespoke-tiktok-ad-formats .af-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.bespoke-tiktok-ad-formats .af-group h3{font-size:20px;margin:18px 0 6px}
.bespoke-tiktok-ad-formats .af-group p{font-size:16px;line-height:1.55;margin-bottom:6px}

/* 02 live examples */
.bespoke-tiktok-ad-formats .af-two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start;margin-bottom:28px}
.bespoke-tiktok-ad-formats .af-stats{gap:16px}
.bespoke-tiktok-ad-formats .af-stats .ls-stat b{font-size:clamp(28px,3vw,40px)}
.bespoke-tiktok-ad-formats .af-match{margin-top:28px}
.bespoke-tiktok-ad-formats .af-match p{margin:0}

/* image grids: each cover links to the original */
.bespoke-tiktok-ad-formats .af-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,210px));gap:22px;justify-content:start;margin:28px 0 8px}
.bespoke-tiktok-ad-formats .af-shot{display:flex;flex-direction:column;gap:10px}
.bespoke-tiktok-ad-formats .af-shot > a{display:block;line-height:0}
.bespoke-tiktok-ad-formats .af-shot img{display:block;width:100%;max-width:210px;height:auto;aspect-ratio:360 / 640;object-fit:cover;border:2px solid var(--ls-ink);border-radius:var(--ls-radius-sm);background:var(--ls-paper)}
.bespoke-tiktok-ad-formats .af-shot img[height="480"]{aspect-ratio:3 / 4}
.bespoke-tiktok-ad-formats .af-shot figcaption{font-size:13px;line-height:1.45;color:var(--ls-muted)}
.bespoke-tiktok-ad-formats .af-shot figcaption strong{color:var(--ls-ink)}

/* 03 feed */
.bespoke-tiktok-ad-formats .af-feed{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin:28px 0}
.bespoke-tiktok-ad-formats .af-feed-nums{display:grid;gap:22px}
.bespoke-tiktok-ad-formats .af-split{background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:var(--ls-radius);padding:26px}
.bespoke-tiktok-ad-formats .af-split h3{font-size:20px}
.bespoke-tiktok-ad-formats .af-split-row{display:grid;grid-template-columns:120px minmax(0,1fr) 72px;gap:12px;align-items:center;margin:14px 0}
.bespoke-tiktok-ad-formats .af-split-label{font-size:13px;color:var(--ls-muted)}
.bespoke-tiktok-ad-formats .af-split-track{height:26px;background:var(--ls-cream);border-radius:8px;border:1px solid var(--ls-line);overflow:hidden}
.bespoke-tiktok-ad-formats .af-split-fill{display:block;height:100%;background:var(--ls-blue-deep);border-radius:7px}
.bespoke-tiktok-ad-formats .af-split-fill--alt{background:var(--ls-blue)}
.bespoke-tiktok-ad-formats .af-split-val{font-weight:800;color:var(--ls-ink);font-variant-numeric:tabular-nums;text-align:right;font-size:16px}

/* 04 patterns */
.bespoke-tiktok-ad-formats .af-patterns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.bespoke-tiktok-ad-formats .af-patterns h3{font-size:20px}
.bespoke-tiktok-ad-formats .af-hist ol{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end;height:220px;border-bottom:1.5px solid var(--ls-line)}
.bespoke-tiktok-ad-formats .af-hist li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bespoke-tiktok-ad-formats .af-hist li b{font-size:18px;color:var(--ls-ink)}
.bespoke-tiktok-ad-formats .af-hist .af-col{display:block;width:100%;max-width:64px;height:calc(var(--n) / 12 * 150px);background:var(--ls-blue-deep);border-radius:8px 8px 0 0}
.bespoke-tiktok-ad-formats .af-hist .af-col i{display:none}
.bespoke-tiktok-ad-formats .af-hist li > span:last-child{font-size:13px;color:var(--ls-muted);text-align:center;line-height:1.2;min-height:32px}
.bespoke-tiktok-ad-formats .af-hook ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:18px}
.bespoke-tiktok-ad-formats .af-hook li{display:grid;gap:6px}
.bespoke-tiktok-ad-formats .af-hook-name{font-size:14px;font-weight:700;color:var(--ls-ink)}
.bespoke-tiktok-ad-formats .af-hook-track{position:relative;height:14px;background:var(--ls-cream);border:1px solid var(--ls-line);border-radius:999px;margin:0 8px}
.bespoke-tiktok-ad-formats .af-dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--ls-ink);transform:translate(-50%,-50%)}
.bespoke-tiktok-ad-formats .af-dot--start,.bespoke-tiktok-ad-formats .af-key--start{background:var(--ls-mint)}
.bespoke-tiktok-ad-formats .af-dot--brand,.bespoke-tiktok-ad-formats .af-key--brand{background:var(--ls-peach-deep)}
.bespoke-tiktok-ad-formats .af-dot--q,.bespoke-tiktok-ad-formats .af-key--q{background:var(--ls-yellow)}
.bespoke-tiktok-ad-formats .af-hook-note{font-size:13px;color:var(--ls-muted)}
.bespoke-tiktok-ad-formats .af-legend{font-size:13px;color:var(--ls-muted);margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.bespoke-tiktok-ad-formats .af-key{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--ls-ink);vertical-align:middle}
.bespoke-tiktok-ad-formats .af-pcard p{font-size:16px}
.bespoke-tiktok-ad-formats .af-big{display:block;font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--ls-ink);line-height:1.1;margin-bottom:6px}

/* 05 best practices */
.bespoke-tiktok-ad-formats .af-bp td:first-child{width:52%;color:var(--ls-ink)}
.bespoke-tiktok-ad-formats #best-practices + p + .ls-table-wrap{margin-bottom:8px}
.bespoke-tiktok-ad-formats .ls-prompt{margin-top:28px}

/* 06 pick */
.bespoke-tiktok-ad-formats .af-pick{display:grid;gap:0;margin-top:24px;border-top:1.5px solid var(--ls-line)}
.bespoke-tiktok-ad-formats .af-pick-row{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:baseline;padding:18px 0;border-bottom:1.5px solid var(--ls-line)}
.bespoke-tiktok-ad-formats .af-pick-row .ls-tag{justify-self:start}
.bespoke-tiktok-ad-formats .af-pick-row p{margin:0}

/* 07 fit */
.bespoke-tiktok-ad-formats .af-fit{align-items:start}

@media (max-width:960px){
  .bespoke-tiktok-ad-formats .af-groups{grid-template-columns:1fr}
  .bespoke-tiktok-ad-formats .af-two,.bespoke-tiktok-ad-formats .af-feed,.bespoke-tiktok-ad-formats .af-patterns{grid-template-columns:1fr}
}
@media (max-width:600px){
  .bespoke-tiktok-ad-formats .af-hero{padding-top:28px}
  .bespoke-tiktok-ad-formats .ls-illo{padding:12px}
  .bespoke-tiktok-ad-formats .af-shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .bespoke-tiktok-ad-formats .af-shot img{max-width:100%}
  .bespoke-tiktok-ad-formats .af-split{padding:18px}
  .bespoke-tiktok-ad-formats .af-split-row{grid-template-columns:88px minmax(0,1fr) 62px;gap:8px}
  .bespoke-tiktok-ad-formats .af-pick-row{grid-template-columns:1fr;gap:8px}
  .bespoke-tiktok-ad-formats .af-hist ol{height:200px;gap:8px}
  .bespoke-tiktok-ad-formats .af-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bespoke-tiktok-ad-formats .af-stats .ls-stat b{font-size:24px}
  .bespoke-tiktok-ad-formats .af-stats .ls-stat span{font-size:13px}
}