/* assets/drawings.css — layout for the hand-drawn line illustrations (inc/drawings.php).
   Strokes keep one width at any size, so a drawing reads the same on a phone and on a desktop. */
.fl-draw{display:block;width:100%;height:auto;max-width:100%;overflow:hidden}
.fl-draw *{vector-effect:non-scaling-stroke}

/* soft tile a drawing sits on */
.fd-tile{position:relative;background:#F6F5FD;border-radius:28px;display:flex;align-items:center;justify-content:center;padding:28px;box-sizing:border-box;overflow:hidden}
.fd-tile-bleed{padding:28px 0 0 28px;align-items:flex-end;justify-content:flex-end}
.fd-tile-bleed .fl-draw{max-width:460px}
.fd-tile-wide{padding:24px 32px}
.fd-tile-wide .fl-draw{max-width:980px}
.fd-tall-only{display:none !important}
@media (max-width:600px){.fd-wide-only{display:none !important}.fd-tall-only{display:block !important;max-width:300px !important}}

/* section bits */
.fd-sec{padding-top:88px;padding-bottom:16px}
.fd-sec-tight{padding-top:56px}
.fd-sec-last{padding-bottom:88px}
.fd-kick{display:inline-block;font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#7C5BC7}
.fd-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:32px}
.fd-head h2,.fd-copy h2{margin:0;font-size:44px;line-height:1.08;font-weight:800;letter-spacing:-0.035em;max-width:920px}
.fd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.fd-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.fd-copy p{margin:0;font-size:18px;line-height:1.6;color:#4B5272;max-width:480px}
.fd-copy p b{color:#1F2547}

/* the three numbered captions under "how it lands" */
.fd-caps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:c}
.fd-caps li{counter-increment:c;display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:#4B5272}
.fd-caps li::before{content:counter(c);flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#EEEBFF;color:#5B3FD6;font:800 14px/28px 'Poppins',sans-serif;text-align:center}
.fd-caps b{color:#1F2547}

/* three steps, inside the lavender "How it works" panel */
.fd-steps{max-width:1000px;margin:52px auto 0;padding:0 32px;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:left}
.fd-step{background:#fff;border-radius:22px;padding:18px 18px 24px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
.fd-step-art{background:#F6F5FD;border-radius:16px;padding:14px;margin-bottom:10px}
.fd-step-art .fl-draw{max-width:300px;margin:0 auto}
.fd-step h3{margin:0;display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-0.02em}
.fd-num{width:28px;height:28px;border-radius:50%;background:#7C5BC7;color:#fff;font:800 14px/28px 'Poppins',sans-serif;text-align:center;flex-shrink:0}
.fd-step p{margin:0;font-size:14.5px;line-height:1.55;color:#4B5272}

/* live / share / spam-safety trio */
.fd-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fd-card{display:flex;flex-direction:column;gap:10px}
.fd-card .fd-tile{padding:16px;margin-bottom:8px;aspect-ratio:22/15}
.fd-card h3{margin:0;font-size:22px;letter-spacing:-0.02em}
.fd-card p{margin:0;font-size:15px;line-height:1.6;color:#4B5272}

/* creator vignettes in the purple stories panel */
.fd-vigs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:860px;margin:-20px auto 44px}
.fd-vig{background:#fff;border-radius:20px;padding:12px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 20px 40px -28px rgba(31,37,71,0.6)}
.fd-vig .fl-draw{max-width:170px}
.fd-vig span{font-size:13.5px;font-weight:700;color:#1F2547}

/* ducks queuing for the closing claim box */
section[aria-labelledby="c-h"] .f-wrap>div{position:relative}
.fd-queue{position:absolute;right:calc(50% + 270px);top:-16px;width:320px;pointer-events:none}

/* "mockup" tag */
.fd-mocktag{position:fixed;right:14px;bottom:14px;z-index:50;background:#1F2547;color:#fff;font:700 12px/1 'Inter',sans-serif;padding:8px 12px;border-radius:999px;letter-spacing:0.04em;opacity:.85}

@media (max-width:1180px){
  .fd-queue{position:static;width:min(300px,80%);margin:0 auto 6px}
}
@media (max-width:900px){
  .fd-sec{padding-top:56px}
  .fd-sec-last{padding-bottom:56px}
  .fd-split{grid-template-columns:1fr;gap:28px}
  .fd-head h2,.fd-copy h2{font-size:30px}
  .fd-head{margin-bottom:22px}
  .fd-copy p{font-size:16.5px}
  .fd-tile{border-radius:22px;padding:18px}
  .fd-tile-bleed{padding:20px 0 0 14px}
  .fd-tile-wide{padding:14px 10px}
  .fd-caps{grid-template-columns:1fr;gap:12px}
  .fd-steps{grid-template-columns:1fr;padding:0 20px;margin-top:36px;gap:16px}
  .fd-trio{grid-template-columns:1fr;gap:36px}
  .fd-vigs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:-24px auto 32px}
}

/* ── marketing pages (how-it-works, product, creators, free, feature pages) ── */
.fd-hero-art{width:100%;max-width:980px;margin:22px auto 0;box-sizing:border-box}
.fd-hero-art .fl-draw{margin:0 auto}
.fd-hero-tile{background:#fff;border-radius:26px;padding:26px 30px 26px;box-shadow:0 30px 60px -40px rgba(10,12,40,0.7)}
.fd-hero-tile .fd-caps{margin-top:12px;text-align:left}
.fd-spot{width:100%;max-width:320px;margin-top:26px}
.fd-flip{transform:scaleX(-1)}
@media (max-width:900px){
  .fd-hero-tile{padding:16px 14px 18px;border-radius:22px}
  .fd-hero-tile .fd-caps{margin-top:6px}
  .fd-spot{max-width:280px}
}
.fd-setups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:1000px;margin:24px auto 0}
.fd-setup{background:#fff;border-radius:22px;padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 24px 48px -36px rgba(31,37,71,0.6)}
.fd-setup .fl-draw{max-width:280px}
.fd-setup span{font-size:14px;font-weight:700;color:#1F2547}
.fd-aside-art{margin-top:auto;align-self:flex-start;background:rgba(255,255,255,0.94);border-radius:18px;padding:12px 18px;width:100%;max-width:280px;box-sizing:border-box}
.fd-aside-art+.f-aside-claim{margin-top:20px}
@media (max-width:900px){
  .fd-setups{grid-template-columns:1fr;max-width:300px;gap:12px}
}