/* How to market an app on TikTok (for app and game marketers). Arranges the shared landing system; the concept
   is the search ladder (problem, category, app), drawn as a phone of app icons beside typed searches. */
.bespoke-for-app-marketers .am-hero-copy{display:flex;flex-direction:column}
.bespoke-for-app-marketers .am-hero-copy h1{margin-top:0}
.bespoke-for-app-marketers .am-route{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;font-size:14px;font-weight:700;color:var(--ls-muted)}
.bespoke-for-app-marketers .am-route span:not([aria-hidden]){background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:999px;padding:4px 12px;color:var(--ls-ink)}

/* hero illustration: a phone of app icons beside three typed searches */
.bespoke-for-app-marketers .am-hero-illo{margin:0}
.bespoke-for-app-marketers .am-o *{stroke:var(--ls-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.bespoke-for-app-marketers .am-o .f-paper{fill:var(--ls-paper)}
.bespoke-for-app-marketers .am-o .f-blue{fill:var(--ls-blue)}
.bespoke-for-app-marketers .am-o .f-peach{fill:var(--ls-peach)}
.bespoke-for-app-marketers .am-o .f-mint{fill:var(--ls-mint)}
.bespoke-for-app-marketers .am-o .f-yellow{fill:var(--ls-yellow)}
.bespoke-for-app-marketers .am-o .f-lavender{fill:var(--ls-lavender)}
.bespoke-for-app-marketers .am-o .f-ink{fill:var(--ls-ink)}
.bespoke-for-app-marketers .am-t text{font-family:var(--ls-font);fill:var(--ls-ink)}
.bespoke-for-app-marketers .am-t .am-t-s{font-size:19px;font-weight:600}
.bespoke-for-app-marketers .am-t .am-t-n{font-size:19px;font-weight:800}

.bespoke-for-app-marketers .ls-prompt{margin-top:26px}
.bespoke-for-app-marketers .ls-prompt p{margin:0 0 14px}

/* section numbers */
.bespoke-for-app-marketers .am-no{display:inline-block;margin-bottom:10px;font:800 14px/1 var(--ls-mono);letter-spacing:.08em;color:var(--ls-muted)}

/* shared keys */
.bespoke-for-app-marketers .am-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;font-size:13px;color:var(--ls-muted)}
.bespoke-for-app-marketers .am-key{display:inline-block;width:14px;height:14px;border-radius:4px;margin-left:8px;vertical-align:-2px}
.bespoke-for-app-marketers .am-key:first-child{margin-left:0}
.bespoke-for-app-marketers .am-key--deep{background:var(--ls-blue-deep)}
.bespoke-for-app-marketers .am-key--gap{background:var(--ls-peach-deep)}
.bespoke-for-app-marketers .am-key--a{background:var(--ls-blue-deep);margin-left:0;margin-right:6px}
.bespoke-for-app-marketers .am-key--b{background:var(--ls-blue);margin-left:0;margin-right:6px}
.bespoke-for-app-marketers .am-notes{margin-top:24px}
.bespoke-for-app-marketers .am-notes p{margin:0}

/* 01: the search ladder, three steps side by side */
.bespoke-for-app-marketers .am-ladder{margin-top:26px;align-items:stretch}
.bespoke-for-app-marketers .am-step{background:var(--ls-cream);border:2px solid var(--ls-ink);border-radius:var(--ls-radius);padding:22px 20px;position:relative}
.bespoke-for-app-marketers .am-step h3{margin:12px 0 14px}
.bespoke-for-app-marketers .am-step:not(:last-child)::after{content:'';position:absolute;right:-17px;top:50%;width:12px;height:12px;border-top:2px solid var(--ls-ink);border-right:2px solid var(--ls-ink);transform:translateY(-50%) rotate(45deg)}
.bespoke-for-app-marketers .am-rung{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bespoke-for-app-marketers .am-rung li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:var(--ls-radius-sm);padding:10px 12px;font-size:15px;line-height:1.3}
.bespoke-for-app-marketers .am-rung li.am-gap{background:var(--ls-peach-tint);border-color:var(--ls-peach-deep)}
.bespoke-for-app-marketers .am-rung-q{color:var(--ls-text);min-width:0}
.bespoke-for-app-marketers .am-rung-n{font-weight:800;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bespoke-for-app-marketers .am-rung-n small{display:block;font-weight:500;font-size:12px;color:var(--ls-muted)}

/* 02: chart on the left, copy on the right */
.bespoke-for-app-marketers .am-complaints{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.bespoke-for-app-marketers .am-chart{margin:0;background:var(--ls-paper);border:2px solid var(--ls-ink);border-radius:var(--ls-radius);padding:22px 22px 16px}
.bespoke-for-app-marketers .am-chart h3{margin:0 0 14px}
.bespoke-for-app-marketers .am-bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bespoke-for-app-marketers .am-bar{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) auto;align-items:center;gap:12px;font-size:14px}
.bespoke-for-app-marketers .am-bar-label{color:var(--ls-text);line-height:1.3}
.bespoke-for-app-marketers .am-bar-track{height:20px;border-radius:6px;background:var(--ls-blue-tint)}
.bespoke-for-app-marketers .am-bar-fill{display:block;height:100%;border-radius:6px;background:var(--ls-blue-deep)}
.bespoke-for-app-marketers .am-bar--gap .am-bar-fill{background:var(--ls-peach-deep)}
.bespoke-for-app-marketers .am-bar-val{font-weight:800;text-align:right;font-variant-numeric:tabular-nums;line-height:1.2}
.bespoke-for-app-marketers .am-bar-val small{display:block;font-weight:500;font-size:12px;color:var(--ls-muted)}

/* 03: paired bars, complaint against problem */
.bespoke-for-app-marketers .am-vs{margin-top:24px;background:var(--ls-paper);border:2px solid var(--ls-ink);border-radius:var(--ls-radius);padding:24px}
.bespoke-for-app-marketers .am-vs-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px;font-size:14px;font-weight:700;color:var(--ls-ink)}
.bespoke-for-app-marketers .am-vs-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.bespoke-for-app-marketers .am-vs-list li{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:16px;align-items:center}
.bespoke-for-app-marketers .am-vs-label{font-size:15px;font-weight:700;color:var(--ls-text)}
.bespoke-for-app-marketers .am-vs-pair{display:grid;gap:5px;border-left:1.5px solid var(--ls-line);padding-left:0}
.bespoke-for-app-marketers .am-vs-bar{display:flex;align-items:center;justify-content:flex-end;height:24px;border-radius:0 6px 6px 0;min-width:4.2em;padding-right:8px;box-sizing:border-box}
.bespoke-for-app-marketers .am-vs-bar b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.bespoke-for-app-marketers .am-vs-bar--a{background:var(--ls-blue-deep)}
.bespoke-for-app-marketers .am-vs-bar--a b{color:var(--ls-paper)}
.bespoke-for-app-marketers .am-vs-bar--b{background:var(--ls-blue)}
.bespoke-for-app-marketers .am-vs-bar--b b{color:var(--ls-ink)}

/* 04: rival app accounts */
.bespoke-for-app-marketers .am-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 20px}
.bespoke-for-app-marketers .am-compare .ls-card{padding:22px}

/* 05: Creative Center, copy beside a stacked ad list */
.bespoke-for-app-marketers .am-ads{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
.bespoke-for-app-marketers .am-adlist{display:grid;gap:14px}
.bespoke-for-app-marketers .am-ad{display:flex;flex-direction:column;gap:4px;padding:20px 22px}
.bespoke-for-app-marketers .am-ad .ls-tag{align-self:flex-start;margin-bottom:8px}
.bespoke-for-app-marketers .am-ad b{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.bespoke-for-app-marketers .am-ad--app{background:var(--ls-paper)}
.bespoke-for-app-marketers .am-ad--app b{font-size:36px}
.bespoke-for-app-marketers .am-ad dl{margin:10px 0 0;display:grid;gap:8px}
.bespoke-for-app-marketers .am-ad dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ls-line);padding-top:8px;font-size:14px}
.bespoke-for-app-marketers .am-ad dt{color:var(--ls-muted)}
.bespoke-for-app-marketers .am-ad dd{margin:0;font-weight:800;text-align:right}
.bespoke-for-app-marketers .am-adlist .ls-source{margin-top:0}

/* 06: quotes beside the theme table */
.bespoke-for-app-marketers .am-comments{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:start;margin-top:24px}
.bespoke-for-app-marketers .am-quotes{display:grid;gap:20px}
.bespoke-for-app-marketers .am-quotes .ls-quote{margin:0;font-weight:700}
.bespoke-for-app-marketers .am-quotes .ls-quote span{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--ls-muted)}
.bespoke-for-app-marketers .am-comments .ls-table td:first-child{width:1%;white-space:nowrap}

/* 07: games, copy beside the table */
.bespoke-for-app-marketers .am-games{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.bespoke-for-app-marketers .am-cap{caption-side:top;text-align:left;font-weight:800;padding:14px 16px 4px;color:var(--ls-ink)}
.bespoke-for-app-marketers .am-row-gap{background:var(--ls-peach-tint)}

@media(max-width:960px){
 .bespoke-for-app-marketers .am-complaints,.bespoke-for-app-marketers .am-ads,.bespoke-for-app-marketers .am-games,.bespoke-for-app-marketers .am-comments{grid-template-columns:minmax(0,1fr);gap:28px}
 .bespoke-for-app-marketers .am-ladder{grid-template-columns:minmax(0,1fr)}
 .bespoke-for-app-marketers .am-step:not(:last-child)::after{right:50%;top:auto;bottom:-17px;transform:translateX(50%) rotate(135deg)}
}
@media(max-width:600px){
 .bespoke-for-app-marketers .am-hero-illo{padding:12px}
 .bespoke-for-app-marketers .am-chart,.bespoke-for-app-marketers .am-vs{padding:16px 14px 12px}
 .bespoke-for-app-marketers .am-bar{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
 .bespoke-for-app-marketers .am-bar-track{grid-column:1/-1;grid-row:2}
 .bespoke-for-app-marketers .am-vs-list li{grid-template-columns:minmax(0,1fr);gap:6px}
 .bespoke-for-app-marketers .am-compare{grid-template-columns:minmax(0,1fr);gap:14px}
 .bespoke-for-app-marketers .am-step{padding:18px 14px}
 .bespoke-for-app-marketers .am-route{font-size:13px}
 .bespoke-for-app-marketers .am-comments .ls-table td:first-child{white-space:normal}
}