/* TokConnect landing system (8 Oct 2026).
   One brand for every landing, comparison and tool page: the homepage's cream,
   ink and pastel palette, TikTok Sans throughout, pill buttons, soft cards and
   flat ink-outline illustrations. Pages vary by layout and illustration subject,
   never by typeface, theme or palette. Page CSS may arrange these pieces; it must
   not introduce other fonts, textures or off-palette colours. */

:root{
  --ls-cream:#f4efe9;--ls-paper:#fffdf9;--ls-ink:#1f1e1c;--ls-text:#2a2825;--ls-muted:#6b675f;--ls-line:#dcd6cb;
  --ls-blue:#87aaeb;--ls-blue-tint:#e9eff9;--ls-blue-deep:#2f4f80;
  --ls-peach:#f6bfad;--ls-peach-tint:#fbe7de;--ls-peach-deep:#8a4a2a;
  --ls-lavender:#d8caed;--ls-lavender-tint:#f0eaf8;--ls-lavender-deep:#5b4a86;
  --ls-mint:#cce1d5;--ls-mint-tint:#e9f3ed;--ls-sage-deep:#4f6a3a;
  --ls-yellow:#f8df84;--ls-yellow-tint:#fdf4d3;
  --ls-font:'TikTok Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ls-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ls-radius:26px;--ls-radius-sm:16px;--ls-wrap:1180px;--ls-gutter:24px;
}

/* ---------- base ---------- */
main.bespoke{font-family:var(--ls-font);color:var(--ls-text);background:var(--ls-cream);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(main.bespoke) *,:where(main.bespoke) *::before,:where(main.bespoke) *::after{box-sizing:border-box}
:where(main.bespoke) :where(h1,h2,h3,h4){font-family:var(--ls-font);color:var(--ls-ink);margin:0 0 .5em;text-wrap:balance}
/* Heading scale needs enough weight to beat the site-wide guide styles; colour stays
   in the zero-specificity rule above so dark cards and the CTA can turn headings white. */
main.bespoke h1{margin:0 0 .5em;font-family:var(--ls-font);font-size:clamp(40px,5.4vw,70px);font-weight:800;line-height:1.03;letter-spacing:-.035em}
main.bespoke h2{margin:0 0 .5em;font-family:var(--ls-font);font-size:clamp(30px,3.5vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.03em}
main.bespoke h3{margin:0 0 .5em;font-family:var(--ls-font);font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
:where(main.bespoke) :where(p){margin:0 0 1em;text-wrap:pretty}
:where(main.bespoke) :where(a){color:var(--ls-blue-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}
:where(main.bespoke) :where(a:hover){color:var(--ls-ink)}
:where(main.bespoke) :where(code){font-family:var(--ls-mono);font-size:.86em;background:var(--ls-paper);border:1px solid var(--ls-line);border-radius:6px;padding:.1em .35em}
:where(main.bespoke) :where(img,svg){max-width:100%;height:auto}
:where(main.bespoke) :where(strong){color:var(--ls-ink)}
main.bespoke .breadcrumbs{max-width:var(--ls-wrap);margin:0 auto;padding:18px var(--ls-gutter) 0;font-size:13px;color:var(--ls-muted)}

/* ---------- layout ---------- */
.ls-wrap{max-width:var(--ls-wrap);margin:0 auto;padding:0 var(--ls-gutter)}
.ls-section{padding:88px 0}
.ls-section--tight{padding:56px 0}
.ls-section--paper{background:var(--ls-paper)}
.ls-section--blue{background:var(--ls-blue-tint)}
.ls-section--peach{background:var(--ls-peach-tint)}
.ls-section--lavender{background:var(--ls-lavender-tint)}
.ls-section--mint{background:var(--ls-mint-tint)}
.ls-section--yellow{background:var(--ls-yellow-tint)}
.ls-grid{display:grid;gap:24px}
.ls-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ls-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ls-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ls-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.ls-measure{max-width:680px}
.ls-center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- type helpers ---------- */
.ls-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ls-ink);background:var(--ls-paper);border:1.5px solid var(--ls-ink);border-radius:999px;padding:6px 14px;margin-bottom:22px}
.ls-lead{font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--ls-text);max-width:640px}
.ls-muted{color:var(--ls-muted)}
.ls-small{font-size:14px;line-height:1.55;color:var(--ls-muted)}
.ls-mark{background:linear-gradient(transparent 58%,var(--ls-yellow) 58%);padding:0 .08em}
.ls-source{font-size:13px;line-height:1.5;color:var(--ls-muted);margin-top:14px}

/* ---------- buttons ---------- */
.ls-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.ls-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:22px;border:2px solid var(--ls-ink);background:var(--ls-ink);color:#fff;font:700 17px/1.2 var(--ls-font);text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.ls-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 0 rgba(31,30,28,.18)}
.ls-btn--blue{background:var(--ls-blue);color:var(--ls-ink)}
.ls-btn--blue:hover{color:var(--ls-ink)}
.ls-btn--ghost{background:transparent;color:var(--ls-ink)}
.ls-btn--ghost:hover{color:var(--ls-ink)}
.ls-btn-note{font-size:14px;color:var(--ls-muted)}

/* ---------- cards ---------- */
.ls-card{background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:var(--ls-radius);padding:28px}
.ls-card--blue{background:var(--ls-blue-tint);border-color:transparent}
.ls-card--peach{background:var(--ls-peach-tint);border-color:transparent}
.ls-card--lavender{background:var(--ls-lavender-tint);border-color:transparent}
.ls-card--mint{background:var(--ls-mint-tint);border-color:transparent}
.ls-card--yellow{background:var(--ls-yellow-tint);border-color:transparent}
.ls-card--ink{background:var(--ls-ink);color:#efece6;border-color:var(--ls-ink)}
.ls-card--ink :where(h2,h3,strong){color:#fff}
.ls-card--outline{background:transparent;border:2px solid var(--ls-ink)}
.ls-card > :last-child{margin-bottom:0}
.ls-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 11px;background:var(--ls-paper);border:1.5px solid var(--ls-ink);color:var(--ls-ink)}
.ls-tag--blue{background:var(--ls-blue);border-color:var(--ls-blue)}
.ls-tag--peach{background:var(--ls-peach);border-color:var(--ls-peach)}
.ls-tag--mint{background:var(--ls-mint);border-color:var(--ls-mint)}
.ls-tag--yellow{background:var(--ls-yellow);border-color:var(--ls-yellow)}
.ls-tag--lavender{background:var(--ls-lavender);border-color:var(--ls-lavender)}

/* ---------- numbers ---------- */
.ls-stat{display:flex;flex-direction:column;gap:6px}
.ls-stat b,.ls-stat strong{font-size:clamp(34px,3.6vw,48px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ls-ink)}
.ls-stat span{font-size:15px;line-height:1.45;color:var(--ls-muted)}
.ls-steps{counter-reset:ls;list-style:none;padding:0;margin:0;display:grid;gap:18px}
.ls-steps > li{counter-increment:ls;position:relative;padding-left:58px}
.ls-steps > li::before{content:counter(ls);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--ls-yellow);border:2px solid var(--ls-ink);display:grid;place-items:center;font-weight:800;color:var(--ls-ink)}

/* ---------- tables ---------- */
.ls-table-wrap{overflow-x:auto;border-radius:var(--ls-radius-sm);border:1.5px solid var(--ls-line);background:var(--ls-paper)}
.ls-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.ls-table th{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:left;color:var(--ls-muted);background:var(--ls-cream);padding:14px 16px;border-bottom:1.5px solid var(--ls-line)}
.ls-table td{padding:14px 16px;border-bottom:1px solid var(--ls-line);vertical-align:top}
.ls-table tr:last-child td{border-bottom:0}
.ls-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ls-table .is-us{background:var(--ls-blue-tint)}
.ls-yes{color:var(--ls-sage-deep);font-weight:700}
.ls-no{color:var(--ls-muted)}


/* The builder wraps every table in .table-wrap (a bordered scroller for guides). Inside
   bespoke pages it only scrolls; the frame comes from .ls-table-wrap or the page. */
main.bespoke .table-wrap{overflow-x:auto;margin:0;border:0;border-radius:0;background:none;padding:0}
main.bespoke .ls-table-wrap > .table-wrap{margin:0}

/* ---------- prompt / quote ---------- */
.ls-prompt{background:var(--ls-paper);border:2px solid var(--ls-ink);border-radius:var(--ls-radius-sm);padding:20px 22px;font-size:17px;line-height:1.55;position:relative}
.ls-prompt::before{content:'Ask';position:absolute;top:-12px;left:18px;background:var(--ls-yellow);border:2px solid var(--ls-ink);border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 10px}
.ls-quote{border-left:4px solid var(--ls-blue);padding:4px 0 4px 18px;font-size:19px;color:var(--ls-ink)}

/* ---------- illustration frame ---------- */
.ls-illo{background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:32px;padding:24px;display:block}
.ls-illo svg{display:block;width:100%;height:auto}

/* ---------- FAQ ---------- */
.ls-faq{display:grid;gap:12px}
.ls-faq details{background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:var(--ls-radius-sm);padding:4px 22px}
.ls-faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:18px;color:var(--ls-ink);padding:16px 30px 16px 0;position:relative}
.ls-faq summary::-webkit-details-marker{display:none}
.ls-faq summary::after{content:'+';position:absolute;right:0;top:12px;font-size:24px;font-weight:600}
.ls-faq details[open] summary::after{content:'–'}
.ls-faq details > :not(summary){margin:0 0 18px;color:var(--ls-text)}

/* ---------- closing CTA ---------- */
.ls-cta{background:var(--ls-ink);color:#efece6;border-radius:36px;padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:center}
.ls-cta h2{color:#fff;margin-bottom:.3em}
.ls-cta p{color:#d9d4cc;margin:0}
.ls-cta .ls-btn{background:var(--ls-blue);border-color:var(--ls-blue);color:var(--ls-ink)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .ls-split{grid-template-columns:1fr;gap:36px}
  .ls-grid--3,.ls-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ls-cta{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--ls-gutter:16px}
  main.bespoke{font-size:17px}
  .ls-section{padding:60px 0}
  .ls-section--tight{padding:40px 0}
  .ls-grid--2,.ls-grid--3,.ls-grid--4{grid-template-columns:1fr}
  .ls-card{padding:22px}
  .ls-btn{width:100%}
  .ls-table{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.ls-btn{transition:none}.ls-btn:hover{transform:none}}

/* Ask box at the foot of every bespoke and tool page */
.bespoke-ask{padding:24px 0 88px}
.bespoke-ask .ask-box{margin:0}
@media (max-width:640px){.bespoke-ask{padding:16px 0 56px}}

/* Data charts (880px SVG images) scroll sideways below 600px on bespoke pages too: see the
   "Data charts at phone width (Q-15)" block in guides.css, which covers main.bespoke figures.
   .ls-illo illustration frames are excluded there. */
/* phones: table headers wrap so number columns stay narrow (the numbers themselves stay on one line) */
@media(max-width:600px){.ls-table th,.ls-table th.num{white-space:normal}.ls-table th,.ls-table td{padding-left:10px;padding-right:10px}}
/* desktop heroes: the split gives the headline half the width, so a 70px H1 ran to five lines and pushed the button below a 900px fold */
@media(min-width:901px){main.bespoke .ls-split h1{font-size:56px;line-height:1.04}}
/* phones: the same fold rule for the first screen */
@media(max-width:600px){main.bespoke .ls-section:first-of-type{padding-top:32px}main.bespoke .ls-split h1{font-size:36px;line-height:1.05}}