/* Soulwidth homepage v2 — AppLovin-style layout: light canvas, photo mosaic hero,
   highlighter swash on key words, black pill buttons, floating story cards. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink:        #0E0E12;
  --ink-2:      #3B3B45;
  --ink-3:      #6B6B78;
  --paper:      #FFFFFF;
  --paper-2:    #F5F4F0;
  --line:       rgba(14,14,18,0.10);
  --gold:       #C8A84B;
  --swash:      #EBD47E;
  --radius:     20px;
  --radius-lg:  28px;
  --max-w:      1240px;
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input { font: inherit; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }

/* ─── Type ───────────────────────────────────────────── */
.display {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
}
.h2 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}
.lede { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink-2); max-width: 560px; }

/* Highlighter swash under a word */
.swash {
  position: relative; display: inline-block; z-index: 0; white-space: nowrap;
}
.swash::after {
  content: ''; position: absolute; z-index: -1;
  left: -0.06em; right: -0.06em; bottom: 0.06em; height: 0.36em;
  background: var(--swash);
  border-radius: 0.4em 0.15em 0.5em 0.2em;
  transform: rotate(-1.2deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease) 0.25s;
}
.swash.on::after { transform: rotate(-1.2deg) scaleX(1); }

/* ─── Buttons ────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 0.92rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.pill--dark { background: var(--ink); color: #fff; }
.pill--dark:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14,14,18,0.22); }
.pill--light { background: #fff; color: var(--ink); border-color: var(--line); }
.pill--light:hover { transform: translateY(-2px); border-color: var(--ink); }
.pill--sm { padding: 9px 18px; font-size: 0.85rem; }
.pill svg { width: 16px; height: 16px; }

/* ─── Nav ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 1.1rem; }
.nav__brand img { width: 30px; height: 30px; border-radius: 50%; } /* round "S" icon from tools/brand_icons.py */
.nav__links { display: flex; gap: 28px; list-style: none; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: 20px; font-size: 0.92rem; font-weight: 500; }
/* Dropdown in the nav (jj.soulwidth.com "Books") */
.nav__drop { position: relative; }
.nav__droptoggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.nav__droptoggle svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.nav__droptoggle:hover { color: var(--ink); }
.nav__menu { position: absolute; top: calc(100% + 14px); left: -18px; min-width: 230px; list-style: none; margin: 0; padding: 8px;
             background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(14,14,18,.12);
             opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 50; }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* keeps hover alive across the gap */
.nav__menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); white-space: nowrap; }
.nav__menu a:hover { background: var(--paper-2); }
.nav__menu small { font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); padding: 3px 8px; border-radius: 999px; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu, .nav__drop.open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__drop:hover .nav__droptoggle svg, .nav__drop.open .nav__droptoggle svg { transform: rotate(180deg); }
.nav__right .nav__text:hover { color: var(--ink-3); }
.nav__burger { display: none; background: none; border: 0; width: 36px; height: 36px; cursor: pointer; }
.nav__burger span { display: block; height: 2px; background: var(--ink); margin: 6px 6px; border-radius: 2px; }
@media (max-width: 900px) {
  .nav__links, .nav__text { display: none; }
  .nav__burger { display: block; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; padding: 12px 16px 20px; border-bottom: 1px solid var(--line);
  }
  .nav.open .nav__links a { display: block; padding: 10px 0; font-size: 1.05rem; }
  .nav.open .nav__droptoggle { padding: 10px 0; font-size: 1.05rem; color: var(--ink-3); pointer-events: none; }
  .nav.open .nav__droptoggle svg { display: none; }
  .nav.open .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; background: none; }
  .nav.open .nav__menu a { display: flex; justify-content: flex-start; padding: 8px 0; }
}

/* ─── Hero mosaic ────────────────────────────────────── */
.hero { padding: 12px 0 0; }
.mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 260px 260px;
  gap: 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mosaic__tile { overflow: hidden; border-radius: 16px; background: var(--paper-2); }
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease-out; }
.mosaic.on .mosaic__tile img { transform: scale(1); }
.mosaic__tile--tall { grid-row: span 2; }
.hero__card {
  position: absolute; z-index: 5; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(580px, 48%);
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 48px 40px 44px;
  text-align: center;
}
.hero__card .lede { margin: 18px auto 28px; }
@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: 150px auto; }
  .mosaic__tile--hide-sm { display: none; }
  .mosaic__tile--tall { grid-row: span 1; }
  .hero__card { position: static; transform: none; width: 100%; grid-column: 1 / -1; padding: 32px 4px 8px; border-radius: 0; }
  .mosaic { overflow: visible; }
}

/* ─── Section rhythm ─────────────────────────────────── */
.section { padding: 112px 0; }
.section--tight { padding: 72px 0; }
.section--paper { background: var(--paper-2); }
@media (max-width: 760px) { .section { padding: 72px 0; } }
.section__head { margin-bottom: 40px; }
.section__head .lede { margin-top: 18px; }

/* ─── Audience cards ─────────────────────────────────── */
.audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .audiences { grid-template-columns: 1fr; } }
.audience__media {
  display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--paper-2);
}
.audience__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.audience:hover .audience__media img { transform: scale(1.03); }
.audience h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; margin: 22px 0 6px; }
.audience p { color: var(--ink-2); margin-bottom: 18px; max-width: 460px; }
.audience__links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ─── Statement + services list ──────────────────────── */
.statement { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .statement { grid-template-columns: 1fr; gap: 40px; } }
.statement .lede { margin-top: 24px; }
.svc-list { list-style: none; border-top: 1px solid var(--line); }
.svc-list a {
  display: grid; grid-template-columns: 44px 1fr 24px; gap: 12px; align-items: center;
  padding: 22px 4px; border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease), background 0.3s var(--ease);
}
.svc-list a:hover { padding-left: 14px; background: var(--paper-2); }
.svc-list__num { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.svc-list__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.svc-list__desc { display: block; font-size: 0.9rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; letter-spacing: 0; }
.svc-list svg { width: 18px; height: 18px; color: var(--ink-3); transition: transform 0.3s var(--ease), color 0.3s; }
.svc-list a:hover svg { transform: translateX(4px); color: var(--ink); }

/* ─── Scattered stories ──────────────────────────────── */
.stories { position: relative; min-height: 760px; }
.stories__title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; z-index: 1; }
.story {
  position: absolute; width: 300px; z-index: 2;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: 0 18px 50px rgba(14,14,18,0.08);
  transition: transform 0.5s var(--ease);
}
.story:hover { transform: translateY(-6px) rotate(0deg) !important; }
.story--dark { background: var(--ink); color: #fff; border-color: transparent; }
.story--dark .story__who span { color: rgba(255,255,255,0.6); }
.story--gold { background: var(--swash); border-color: transparent; }
.story__q { font-size: 1rem; line-height: 1.55; font-weight: 500; letter-spacing: -0.005em; }
.story__who { margin-top: 18px; font-size: 0.85rem; font-weight: 600; }
.story__who span { display: block; font-weight: 400; color: var(--ink-3); }
.story--img { padding: 0; overflow: hidden; width: 220px; }
.story--img img { width: 100%; height: 260px; object-fit: cover; }
.s1 { top: 0;     left: 0;     --rot: rotate(-2deg); transform: var(--rot); }
.s2 { top: 40px;  right: 0;    --rot: rotate(2deg); transform: var(--rot); }
.s3 { bottom: 0;  left: 6%;    --rot: rotate(1.5deg); transform: var(--rot); }
.s4 { bottom: 30px; right: 4%; --rot: rotate(-2.5deg); transform: var(--rot); }
.s5 { top: 6%;    left: 40%;   --rot: rotate(3deg); transform: var(--rot); }
@media (max-width: 960px) {
  .stories { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .stories__title { position: static; grid-column: 1 / -1; margin-bottom: 16px; }
  .story, .story--img { position: static; width: auto; transform: none !important; }
}
@media (max-width: 600px) {
  .stories { grid-template-columns: 1fr; }
  .story--img img { height: 220px; }
}

/* ─── Logos ──────────────────────────────────────────── */
.logos__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin-bottom: 28px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 32s linear infinite; }
.marquee__track img { height: 44px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.marquee__track img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─── Learn cards ────────────────────────────────────── */
.learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .learn { grid-template-columns: 1fr; } }
.learn__card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.learn__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(14,14,18,0.08); }
.learn__card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.learn__body { padding: 22px 22px 26px; }
.learn__tag { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.learn__body h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; margin-top: 8px; }

/* ─── Closing CTA ────────────────────────────────────── */
.closer { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 80px); text-align: center; }
.closer .h2 { color: #fff; }
.closer .swash::after { background: var(--gold); opacity: 0.55; }
.closer p { color: rgba(255,255,255,0.72); margin: 20px auto 32px; max-width: 520px; }
.closer .pill--light { border-color: transparent; }

/* ─── Footer ─────────────────────────────────────────── */
.foot { padding: 72px 0 40px; font-size: 0.9rem; color: var(--ink-2); }
.foot__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
.foot__brand p { max-width: 320px; margin-top: 14px; color: var(--ink-3); }
.foot h4 { font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot a:hover { color: var(--ink); }
.foot__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; color: var(--ink-3); font-size: 0.82rem; }
.foot__bottom div { display: flex; gap: 20px; }

/* ─── Floating "ask" bar ─────────────────────────────── */
.ask {
  position: fixed; left: 50%; bottom: 20px; z-index: 60;
  transform: translate(-50%, 140%);
  width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 14px 40px rgba(14,14,18,0.14);
  transition: transform 0.5s var(--ease);
}
.ask.on { transform: translate(-50%, 0); }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.92rem; color: var(--ink); }
.ask input::placeholder { color: var(--ink-3); }
.ask button { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ask button svg { width: 16px; height: 16px; }

/* ─── Reveal ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.on { opacity: 1; transform: none; }
.stories .story.reveal.on { transform: var(--rot, none); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 28px; }
  .marquee__track img[aria-hidden] { display: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .swash::after { transition: none; transform: rotate(-1.2deg) scaleX(1); }
}

/* ════════════════════════════════════════════════════════
   ai.soulwidth.com components
   ════════════════════════════════════════════════════════ */

.nav__brand .tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 2px 6px; margin-left: -2px;
}
.nav__links a[aria-current="page"] { color: var(--ink); }

/* ─── Example ad mockups (hero mosaic + cards) ───────── */
.ad {
  position: relative; height: 100%; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px; color: #fff;
}
.ad__fmt {
  align-self: flex-start; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 4px 9px; border-radius: 999px;
}
.ad__brand { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; }
.ad__brand i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.9); display: inline-block; }
.ad__head { font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.ad__cta { align-self: flex-start; font-size: 0.78rem; font-weight: 600; background: #fff; color: var(--ink); padding: 7px 14px; border-radius: 999px; }
.ad__art { position: absolute; border-radius: 50%; opacity: 0.9; pointer-events: none; }
.ad > *:not(.ad__art) { position: relative; z-index: 1; }

.ad--coffee  { background: linear-gradient(160deg, #B0582F, #6E2C14); }
.ad--fitness { background: linear-gradient(160deg, #2B59FF, #1430A8); }
.ad--plumber { background: linear-gradient(160deg, #11865B, #0B5A3D); }
.ad--fashion { background: linear-gradient(160deg, #F2B6C6, #D96A8A); color: var(--ink); }
.ad--fashion .ad__fmt { background: rgba(255,255,255,0.55); }
.ad--fashion .ad__cta { background: var(--ink); color: #fff; }
.ad--app     { background: linear-gradient(160deg, #1B1B24, #3A2C6B); }

/* Google search ad (text) */
.ad--search { background: #fff; color: #202124; border: 1px solid var(--line); justify-content: flex-start; gap: 10px; }
.ad--search .ad__fmt { background: var(--paper-2); color: var(--ink-2); }
.serp__sponsored { font-size: 0.72rem; font-weight: 700; color: #202124; }
.serp__url { font-size: 0.78rem; color: #4D5156; }
.serp__title { font-size: 1.05rem; color: #1A0DAB; line-height: 1.3; font-weight: 500; }
.serp__desc { font-size: 0.8rem; color: #4D5156; line-height: 1.5; }

/* ─── Audience cards with mock visuals ───────────────── */
.audience__media.mock {
  display: grid; place-items: center; padding: 28px;
  background: radial-gradient(120% 90% at 20% 10%, #FFE9A8 0%, #F7D36B 45%, #E9B949 100%);
}
.audience__media.mock--b { background: radial-gradient(120% 90% at 80% 10%, #CFE3FF 0%, #8FB5FF 50%, #5B84F0 100%); }
.phone {
  width: min(220px, 58%); aspect-ratio: 9 / 18.5; background: #0E0E12; border-radius: 30px; padding: 8px;
  box-shadow: 0 30px 60px rgba(14,14,18,0.25); transform: rotate(-4deg);
}
.mock--b .phone { transform: rotate(4deg); }
.phone .ad { border-radius: 23px; }
.audience:hover .phone { transform: rotate(0deg) translateY(-4px); transition: transform 0.6s var(--ease); }

/* ─── Feature trio (copy / creative / links) ─────────── */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .trio { grid-template-columns: minmax(0, 1fr); } }
.trio__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.trio__card h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.trio__card p { color: var(--ink-2); font-size: 0.95rem; }
.trio__demo { margin-top: auto; background: var(--paper-2); border-radius: 14px; padding: 16px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 8px; }
.trio__demo .row { background: #fff; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line); }
.trio__demo .row b { display: block; font-size: 0.7rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; font-weight: 600; }
.trio__demo code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.76rem; word-break: break-all; color: var(--ink); }
.trio__demo code em { font-style: normal; background: var(--swash); border-radius: 3px; padding: 0 2px; }
.sizes { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.sizes span { background: var(--ink); border-radius: 6px; color: #fff; font-size: 0.66rem; font-weight: 600; display: grid; place-items: center; }

/* ─── Steps ──────────────────────────────────────────── */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 20px; }
.steps li::before { content: counter(step, decimal-leading-zero); font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.steps h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 8px; }
.steps p { color: var(--ink-2); font-size: 0.95rem; }

/* ─── Channels ───────────────────────────────────────── */
.channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.channels span { border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 0.95rem; background: #fff; }

/* ─── Promise cards (scattered) ──────────────────────── */
.story h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.story p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }
.story--dark p { color: rgba(255,255,255,0.72); }
.story--dark h3 { color: #fff; }
.stories--promises { min-height: 640px; }
.stories--promises .s5 { top: auto; bottom: 0; left: 38%; }

/* ─── FAQ ────────────────────────────────────────────── */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 36px 22px 0; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--ink-2); padding: 0 0 24px; max-width: 680px; }

/* ─── Page hero (inner pages) ────────────────────────── */
.page-hero { padding: 88px 0 40px; text-align: center; }
.page-hero .lede { margin: 20px auto 0; }

/* ─── Forms ──────────────────────────────────────────── */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px); box-shadow: 0 24px 60px rgba(14,14,18,0.06); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label, .field legend { font-weight: 600; font-size: 0.92rem; }
.field .hint { font-size: 0.82rem; color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid rgba(14,14,18,0.18); border-radius: 12px; padding: 13px 14px;
  font-size: 1rem; color: var(--ink); background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--swash); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
fieldset.field { border: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-block; padding: 11px 18px; border: 1px solid rgba(14,14,18,0.18); border-radius: 999px; font-size: 0.92rem; font-weight: 500; transition: all 0.2s; }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--swash); }

.progress { display: flex; gap: 6px; margin-bottom: 32px; }
.progress i { flex: 1; height: 4px; border-radius: 4px; background: var(--paper-2); transition: background 0.3s; }
.progress i.on { background: var(--ink); }
.step-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.step h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.025em; margin-bottom: 24px; }
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.form-error { color: #B42318; font-size: 0.88rem; min-height: 1.2em; }
.done { text-align: center; padding: 24px 0; }
.done .h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.done p { color: var(--ink-2); max-width: 460px; margin: 16px auto 0; }

/* ─── Link builder tool ──────────────────────────────── */
.tool { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .tool { grid-template-columns: 1fr; } }
.out { display: flex; flex-direction: column; gap: 12px; }
.out__row { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.out__row b { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.out__row code { grid-column: 1; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.8rem; word-break: break-all; color: var(--ink); }
.out__row button { grid-row: 1 / span 2; grid-column: 2; }
.out__empty { color: var(--ink-3); font-size: 0.95rem; padding: 24px; border: 1px dashed rgba(14,14,18,0.2); border-radius: 14px; text-align: center; }

/* ─── Pricing ────────────────────────────────────────── */
.pay { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .pay { grid-template-columns: 1fr; } }
.pay__card { border-radius: var(--radius-lg); padding: 36px; border: 1px solid var(--line); background: #fff; }
.pay__card--dark { background: var(--ink); color: #fff; border-color: transparent; }
.pay__card--dark p, .pay__card.pay__card--dark li { color: rgba(255,255,255,0.75); }
.pay__label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.pay__card--dark .pay__label { color: var(--swash); }
.pay__big { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -0.03em; margin: 12px 0 8px; line-height: 1.1; }
.pay__card ul { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.pay__card li { padding-left: 26px; position: relative; color: var(--ink-2); }
.pay__card li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--gold); }
.mosaic__note { font-size: 0.75rem; color: var(--ink-3); text-align: right; margin-top: 8px; }
@media (max-width: 860px) { .mosaic__note { text-align: center; } }

.mosaic .ad__head { font-size: clamp(1rem, 1.5vw, 1.3rem); }
@media (max-width: 1100px) and (min-width: 861px) { .hero__card { width: 56%; padding: 40px 28px; } }

/* ─── Phone refinements ──────────────────────────────── */
@media (max-width: 860px) {
  .mosaic .ad { padding: 10px; }
  .mosaic .ad__fmt { font-size: 0.58rem; padding: 3px 7px; }
  .mosaic .ad__brand, .mosaic .ad__cta,
  .mosaic .serp__sponsored, .mosaic .serp__url, .mosaic .serp__desc { display: none; }
  .mosaic .ad__head { font-size: 0.9rem; margin: 0 !important; }
  .mosaic .serp__title { font-size: 0.85rem; }
}
@media (max-width: 600px) {
  .h2 br { display: none; }
  .nav__right .pill { display: none; }
}

/* ─── Plans ──────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plans .pay__card { display: flex; flex-direction: column; }
.plans .pay__card > p:last-child { margin-top: auto !important; padding-top: 28px; }
.pay__unit { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.pay__card--dark .pay__unit { color: rgba(255,255,255,0.6); }

/* ════════════════════════════════════════════════════════
   soulwidth.com additions
   ════════════════════════════════════════════════════════ */

/* Long-form article (blog posts, policies) */
.prose { max-width: 720px; margin: 0 auto; font-size: 1.08rem; color: var(--ink-2); }
.prose h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; color: var(--ink); margin: 14px 0 32px; }
.prose h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); margin: 52px 0 16px; }
.prose h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin: 34px 0 10px; }
.prose p { line-height: 1.8; margin-bottom: 20px; }
.prose ul, .prose ol { margin: 0 0 24px 22px; line-height: 1.75; }
.prose li { margin-bottom: 10px; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prose strong { color: var(--ink); }
.prose .back { display: inline-flex; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink-3); text-decoration: none; margin-bottom: 28px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--ink-3); }
.post-tag { background: var(--swash); color: var(--ink); padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.policy-section { scroll-margin-top: 90px; }

/* Blog cards without photos */
.learn__cover { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 18px; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: #fff; background: linear-gradient(150deg, #2B2B38, #0E0E12); }
.learn__cover--a { background: linear-gradient(150deg, #E9B949, #B0582F); }
.learn__cover--b { background: linear-gradient(150deg, #5B84F0, #1430A8); }
.learn__cover--c { background: linear-gradient(150deg, #11865B, #0B5A3D); }
.learn__cover--d { background: linear-gradient(150deg, #D96A8A, #6E2C4A); }
.learn__meta { font-size: 0.82rem; color: var(--ink-3); margin-top: 10px; }
.learn__body p.excerpt { font-size: 0.92rem; color: var(--ink-2); margin-top: 8px; }

/* Podcast episodes */
.episodes { display: flex; flex-direction: column; gap: 16px; }
.episode { display: grid; grid-template-columns: 88px 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
@media (max-width: 600px) { .episode { grid-template-columns: 1fr; } }
.episode__num { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.episode h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.episode p { color: var(--ink-2); font-size: 0.95rem; margin-top: 6px; }
.episode audio { width: 100%; margin-top: 14px; }
.episode__meta { font-size: 0.82rem; color: var(--ink-3) !important; }
.listen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }

/* Services detail */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.svc:first-child { border-top: 0; }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; } }
.svc__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.svc .lede { margin-top: 14px; }
.svc ul { list-style: none; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 10px; }
.svc li { padding-left: 26px; position: relative; color: var(--ink-2); }
.svc li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--gold); }
@media (min-width: 861px) { .svc--flip .svc__media { order: 2; } }

/* Work gallery */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--paper-2); }
.gallery--photo img { aspect-ratio: 4 / 3; }
.logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.logo-grid div { background: #fff; border: 1px solid var(--line); border-radius: 14px; height: 96px; display: grid; place-items: center; padding: 16px; }
.logo-grid img { max-width: 85%; max-height: 60%; object-fit: contain; }
.label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 40px 0 16px; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .quotes { grid-template-columns: minmax(0, 1fr); } }
.quotes .story { position: static; width: auto; transform: none; }
.policy-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.policy-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.support-card { background: var(--paper-2); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; }
.prose [style*="color:var(--teal)"] { color: var(--ink) !important; }

/* ════════════════════════════════════════════════════════
   jj.soulwidth.com — author page
   ════════════════════════════════════════════════════════ */
.eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.hero__card .eyebrow { margin-bottom: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn-row--left { justify-content: flex-start; }
.mosaic__tile--cover { background: radial-gradient(80% 60% at 50% 30%, #2A2418, #0B0A0C); display: grid; place-items: center; }
.mosaic__tile--cover img { width: auto; height: 92%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,0.45); }

.book { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
@media (max-width: 860px) { .book { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.book__cover { display: grid; place-items: center; padding: 48px; border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 30% 10%, #3A3120 0%, #15130F 60%, #0A0A0B 100%); }
.book__cover img { width: min(360px, 100%); border-radius: 8px; box-shadow: 0 40px 80px rgba(0,0,0,0.5); transform: rotate(-2deg); transition: transform 0.6s var(--ease); }
.book__cover:hover img { transform: rotate(0deg) translateY(-6px); }
.book h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; }
.book p { color: var(--ink-2); margin-top: 16px; font-size: 1.05rem; }
.book blockquote { margin: 24px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); font-style: italic; color: var(--ink); font-size: 1.1rem; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.facts span { background: var(--paper-2); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; }
.review-ask { font-size: 0.9rem !important; color: var(--ink-3) !important; }
.review-ask a { text-decoration: underline; color: var(--ink); }

.signup { display: flex; gap: 8px; max-width: 480px; margin-top: 22px; }
.signup input[type=email] { flex: 1; min-width: 0; border: 1px solid rgba(14,14,18,0.18); border-radius: 999px; padding: 13px 18px; font-size: 1rem; background: #fff; }
.signup input[type=email]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--swash); }
.closer .signup { margin: 0 auto; }
.closer .signup input[type=email] { border-color: transparent; }
@media (max-width: 480px) { .signup { flex-direction: column; } }
.signup__msg { font-size: 0.9rem; margin-top: 10px; min-height: 1.2em; }
.hp { position: absolute; left: -9999px; }

.poem { text-align: center; max-width: 640px; margin: 0 auto; }
.poem p { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.45; color: var(--ink); }
.poem small { display: block; margin-top: 18px; color: var(--ink-3); font-size: 0.9rem; }

.about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.about img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }

/* Sticky buy bar (shown after the hero) */
.buybar { position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translate(-50%, 160%);
  width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 8px 8px 10px;
  box-shadow: 0 14px 40px rgba(14,14,18,0.25); transition: transform 0.5s var(--ease); }
.buybar.on { transform: translate(-50%, 0); }
.buybar img { width: 34px; height: 50px; object-fit: cover; border-radius: 4px; }
.buybar span { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
.buybar span small { display: block; font-weight: 400; color: rgba(255,255,255,0.65); }
.prose--book { font-size: 1.12rem; }
.prose--book p { line-height: 1.9; }
.pullq { margin: 8px 0 32px; padding: 6px 0 6px 18px; border-left: 3px solid var(--gold); font-style: italic; color: var(--ink); font-size: 1.15rem; }
.chapter-end { text-align: center; color: var(--ink-3) !important; font-size: 0.95rem; margin-top: 40px; }

/* ─── Responsive photography (<picture> from tools/images.py) ─ */
picture { display: contents; }
.learn__cover--photo { position: relative; overflow: hidden; background: #2B2B38; }
.learn__cover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform 0.8s var(--ease); }
.learn__cover--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,18,0.6), rgba(14,14,18,0) 55%); }
.learn__cover--photo span { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.learn__card:hover .learn__cover--photo img { transform: scale(1.03); }
.post-cover { margin: 28px 0 32px; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ─── Ad showcase (Services → Ads; markup from tools/ads_showcase.py) ─ */
.svc__media--ads { min-width: 0; aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.adshow { --stage-h: 540px; }
.adshow__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adshow__tab { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.adshow__tab:hover { border-color: var(--ink); color: var(--ink); }
.adshow__tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.adshow__tab:focus-visible, .adshow__nav button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--swash); }
.adshow__stage {
  position: relative; height: var(--stage-h); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 90% at 15% 0%, #FFF4D6 0%, #F7E7BE 40%, #EFD9A6 100%);
}
.adshow__slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 20px 24px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.98);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.55s;
}
.adshow__slide[data-on] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.adshow__label { position: absolute; top: 16px; left: 16px; z-index: 3; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 999px; }
.adshow__label b { color: var(--ink); margin-right: 3px; }
.adshow__mock { display: flex; justify-content: center; width: 100%; max-height: 100%; }
.adshow__nav { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; }
.adshow__nav button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.85); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.adshow__nav button:hover { background: #fff; }
.adshow__progress { height: 3px; background: var(--line); border-radius: 3px; margin-top: 12px; overflow: hidden; }
.adshow__progress i { display: block; height: 100%; width: 0; background: var(--gold); }
.adshow__why { margin-top: 12px; font-size: 0.92rem; color: var(--ink-2); min-height: 3em; }
.adshow__why::before { content: 'Why it works · '; font-weight: 700; color: var(--ink); }
.adshow__note { font-size: 0.74rem; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 860px) { .adshow { --stage-h: 520px; } .adshow__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .adshow__tab { flex: none; } }

/* Mock ad building blocks — platform-flavoured, system fonts */
.m-card, .m-phone { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #1c1e21; line-height: 1.35; text-align: left; }
.m-card { width: min(340px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 24px 50px rgba(60,40,0,0.16); overflow: hidden; font-size: 13px; }
.m-card img, .m-phone img { width: 100%; height: 100%; object-fit: cover; }
.m-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 12px; }
.m-btn { display: inline-block; flex: none; background: #E4E6EB; color: #1c1e21; font-weight: 600; font-size: 12.5px; padding: 7px 12px; border-radius: 6px; text-align: center; }
.m-btn--blue { background: #1A73E8; color: #fff; }
.m-btn--li { background: #0A66C2; color: #fff; border-radius: 999px; }
.m-btn--full { display: block; width: 100%; }
.m-rate { font-size: 12.5px; color: #4D5156; }
.m-rate span { color: #F5A623; letter-spacing: 1px; }
.m-rate--sm { font-size: 11.5px; margin-top: 3px; }

/* Google */
.m-g { padding: 12px 14px 14px; }
.m-g__bar { display: flex; align-items: center; gap: 10px; border: 1px solid #DFE1E5; border-radius: 999px; padding: 7px 12px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(32,33,36,0.1); }
.m-g__logo { font-weight: 700; font-size: 14px; background: linear-gradient(90deg, #4285F4 0 24%, #EA4335 24% 42%, #FBBC05 42% 60%, #4285F4 60% 76%, #34A853 76% 88%, #EA4335 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-g__q { color: #202124; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-g__spons { font-weight: 700; font-size: 12px; color: #202124; margin-bottom: 6px; }
.m-g__site { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.m-g__site .m-av { width: 24px; height: 24px; font-size: 11px; }
.m-g__site span { display: flex; flex-direction: column; font-size: 12px; }
.m-g__site small { color: #4D5156; font-size: 11.5px; }
.m-g__title { color: #1A0DAB; font-size: 17px; line-height: 1.25; margin: 2px 0 4px; }
.m-g__desc { color: #4D5156; font-size: 12.5px; line-height: 1.45; }
.m-g__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 8px; }
.m-g__links span { color: #1A0DAB; font-size: 12.5px; padding: 6px 0; border-top: 1px solid #ECEDEF; }
.m-g__call { margin-top: 8px; font-size: 12.5px; color: #1A73E8; font-weight: 600; }
.m-g__free { margin-top: 10px; font-size: 11.5px; color: #188038; }
.m-g__ad--img { display: grid; grid-template-columns: 1fr 88px; gap: 12px; align-items: start; }
.m-g__thumb { width: 88px; height: 88px; border-radius: 10px; overflow: hidden; margin-top: 22px; }
.m-lsa { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid #DADCE0; border-radius: 12px; }
.m-lsa b { font-size: 14px; }
.m-lsa__img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.m-lsa__img--blank { background: #ECEDEF; }
.m-lsa__badge { display: inline-flex; align-items: center; gap: 4px; color: #188038; font-weight: 600; font-size: 12px; margin-top: 2px; }
.m-lsa__badge svg { width: 14px; height: 14px; background: #188038; color: #fff; border-radius: 50%; padding: 2px; }
.m-lsa__meta { color: #4D5156; font-size: 11.5px; }
.m-lsa__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.m-lsa--ghost { opacity: 0.45; }
.m-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-shop > div { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.m-shop img { aspect-ratio: 1; border-radius: 8px; margin-bottom: 4px; height: auto; }
.m-shop b { font-weight: 400; color: #1A0DAB; line-height: 1.25; }
.m-shop strong { font-size: 13px; }
.m-shop small { color: #4D5156; }

/* Meta / LinkedIn / Instagram feed posts */
.m-post__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.m-post__head span { display: flex; flex-direction: column; flex: 1; font-size: 13px; }
.m-post__head small { color: #65676B; font-size: 11.5px; }
.m-post__head em { font-style: normal; color: #65676B; }
.m-post__text { padding: 0 12px 10px; font-size: 13px; }
.m-post__media { overflow: hidden; position: relative; }
.m-post__media--port { aspect-ratio: 4 / 5; max-height: 250px; }
.m-post__media--sq { aspect-ratio: 16 / 10; }
.m-post__media--li { aspect-ratio: 40 / 21; }
.m-post__cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #F0F2F5; }
.m-post__cta span:first-child { display: flex; flex-direction: column; font-size: 13px; }
.m-post__cta small { color: #65676B; font-size: 10.5px; letter-spacing: 0.02em; }
.m-post__react { padding: 8px 12px; color: #65676B; font-size: 11.5px; }
.m-li__cta { background: #fff; border-top: 1px solid #E8E8E8; }
.m-form-wrap { max-height: 280px; }
.m-form { position: absolute; left: 10px; right: 10px; bottom: 10px; background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.m-form__field { display: flex; flex-direction: column; border: 1px solid #CED0D4; border-radius: 8px; padding: 5px 9px; font-size: 12.5px; }
.m-form__field small { color: #65676B; font-size: 10.5px; }
.m-carousel { display: flex; gap: 8px; padding: 0 12px 12px; overflow: hidden; }
.m-carousel__card { flex: 0 0 62%; border: 1px solid #DADDE1; border-radius: 10px; overflow: hidden; }
.m-carousel__card img { aspect-ratio: 1; height: auto; }
.m-carousel__card span { display: flex; flex-direction: column; padding: 7px 9px; font-size: 12.5px; }
.m-carousel__card small { color: #65676B; }
.m-cat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: #fff; }
.m-cat span { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #F0F2F5; }
.m-cat b { position: absolute; left: 6px; bottom: 6px; background: #fff; border-radius: 4px; padding: 1px 6px; font-size: 11.5px; }
.m-cat__more { display: grid; place-items: center; }
.m-cat__more em { font-style: normal; font-size: 18px; font-weight: 700; color: #65676B; }
.m-ig .m-post__text { padding-top: 0; }
.m-ig__media { max-height: 270px; }
.m-ig__count { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.m-ig__cta { background: #fff; border-bottom: 1px solid #EFEFEF; color: #0095F6; font-size: 13px; }
.m-ig__icons { position: relative; display: flex; gap: 12px; padding: 8px 12px 6px; }
.m-ig__icons svg { width: 22px; height: 22px; fill: none; stroke: #262626; }
.m-ig__icons svg path { fill: none; stroke: #262626; stroke-width: 1.8; }
.m-ig__dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; }
.m-ig__dots i { width: 6px; height: 6px; border-radius: 50%; background: #C7C7C7; }
.m-ig__dots i.on { background: #0095F6; }

/* Vertical phone formats (Reels, TikTok, Stories) */
.m-phone { position: relative; width: 252px; height: min(448px, calc(var(--stage-h) - 84px)); border-radius: 30px; overflow: hidden; background: #000; color: #fff; border: 6px solid #0E0E12; box-shadow: 0 30px 60px rgba(60,40,0,0.25); font-size: 12.5px; }
.m-phone picture img { position: absolute; inset: 0; }
.m-phone::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7)); pointer-events: none; }
.m-phone > :not(picture) { position: absolute; z-index: 1; }
.m-phone__top { top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; font-size: 15px; }
.m-phone__play { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.35); display: grid; place-items: center; }
.m-phone__play svg { width: 22px; height: 22px; }
.m-phone__rail { right: 10px; bottom: 110px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; }
.m-phone__rail span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.m-phone__rail svg { width: 26px; height: 26px; }
.m-phone__foot { left: 12px; right: 56px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.m-phone__who { display: flex; align-items: center; gap: 6px; }
.m-phone__who .m-av { width: 24px; height: 24px; font-size: 10px; }
.m-phone__who small { opacity: 0.8; }
.m-phone__cta { align-self: stretch; text-align: center; background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px; padding: 8px; font-weight: 700; }
.m-tt__top { justify-content: center; gap: 16px; font-size: 14px; }
.m-tt__top span { opacity: 0.7; }
.m-tt__top b { border-bottom: 2px solid #fff; padding-bottom: 2px; }
.m-tt__av .m-av { width: 38px; height: 38px; border: 2px solid #fff; }
.m-tt__cta { background: #FE2C55; backdrop-filter: none; }
.m-story__bars { top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.m-story__bars i { flex: 1; height: 2px; background: rgba(255,255,255,0.5); border-radius: 2px; }
.m-story__bars i:first-child { background: #fff; }
.m-story__who { top: 22px; left: 12px; }
.m-story__big { top: 64px; left: 16px; right: 16px; font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.m-story__sticker { top: 150px; left: 16px; background: #fff; color: #C2410C; font-weight: 700; padding: 5px 10px; border-radius: 8px; transform: rotate(-4deg); }
.m-story__up { bottom: 14px; left: 0; right: 0; text-align: center; font-weight: 700; line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .adshow__slide { transition: none; } }

/* ─── Services illustrations (markup from tools/service_mocks.py) ─────
   Everything inside is sized in em; the base font scales with the column width. */
.svc__media--mock { container-type: inline-size; }
.smock { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #0f0f0f; line-height: 1.3; font-size: 2.2cqw; background: radial-gradient(120% 90% at 15% 0%, #FFF4D6 0%, #F7E7BE 40%, #EFD9A6 100%); }
.smock--yt { background: radial-gradient(120% 90% at 85% 0%, #FFE3DA 0%, #F8C9B8 50%, #EFAE97 100%); }
.smock--seo { background: radial-gradient(120% 90% at 15% 0%, #E3EEFF 0%, #C9DCFA 50%, #A9C5F2 100%); }
.smock__in { position: absolute; inset: 0; }
.smock img { width: 100%; height: 100%; object-fit: cover; }
.smock svg { width: 1em; height: 1em; }
.sm-av { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 0.85em; }
.sm-av--ring { box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.3em #E1306C; }
.smock__badge { position: absolute; z-index: 3; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.95em; padding: 0.45em 0.9em; border-radius: 999px; box-shadow: 0 0.6em 1.4em rgba(0,0,0,0.2); display: inline-flex; align-items: center; gap: 0.35em; }
.smock__badge--a { top: 6%; right: 5%; transform: rotate(4deg); }
.smock__badge--b { bottom: 7%; right: 4%; background: #fff; color: var(--ink); transform: rotate(-3deg); }
.smock__badge--b svg { color: #8E5CF6; }
.smock__badge--c { top: 5%; left: 5%; background: #0F9D58; transform: rotate(-4deg); }

/* YouTube */
.sm-yt { position: absolute; left: 5%; top: 7%; width: 68%; background: #fff; border-radius: 1em; padding: 0.8em; box-shadow: 0 1.6em 3.2em rgba(90,30,10,0.18); }
.sm-yt__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7em; }
.sm-yt__logo { display: inline-flex; align-items: center; gap: 0.3em; font-weight: 700; letter-spacing: -0.04em; font-size: 1.15em; }
.sm-yt__logo i { display: inline-grid; place-items: center; width: 1.45em; height: 1.02em; background: #FF0000; color: #fff; border-radius: 0.28em; }
.sm-yt__logo svg { width: 0.7em; height: 0.7em; }
.sm-yt__search { width: 45%; border: 1px solid #d3d3d3; border-radius: 999px; padding: 0.25em 0.8em; color: #8a8a8a; font-size: 0.85em; }
.sm-yt__player { position: relative; aspect-ratio: 16 / 9; border-radius: 0.7em; overflow: hidden; background: #000; }
.sm-yt__player::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 40%); }
.sm-yt__player > span { position: absolute; z-index: 1; color: #fff; }
.sm-yt__chapter { left: 0.8em; bottom: 1.5em; font-size: 0.82em; font-weight: 600; }
.sm-yt__time { right: 0.8em; bottom: 1.5em; font-size: 0.82em; }
.sm-yt__progress { left: 0.8em; right: 0.8em; bottom: 0.7em; height: 0.25em; background: rgba(255,255,255,0.35); border-radius: 1em; }
.sm-yt__progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; background: #FF0000; border-radius: 1em; }
.sm-yt__progress i::after { content: ''; position: absolute; right: -0.35em; top: 50%; width: 0.7em; height: 0.7em; margin-top: -0.35em; border-radius: 50%; background: #FF0000; }
.sm-yt__title { font-weight: 700; font-size: 1.15em; margin: 0.6em 0 0.5em; line-height: 1.25; }
.sm-yt__chan { display: flex; align-items: center; gap: 0.6em; }
.sm-yt__chan span { display: flex; flex-direction: column; flex: 1; font-size: 0.9em; }
.sm-yt__chan small { color: #606060; font-size: 0.85em; }
.sm-yt__chan em { font-style: normal; background: #0f0f0f; color: #fff; font-weight: 600; font-size: 0.85em; padding: 0.45em 1em; border-radius: 999px; }
.sm-yt__meta { margin-top: 0.6em; background: #f2f2f2; border-radius: 0.6em; padding: 0.5em 0.7em; font-size: 0.82em; }
.sm-yt__meta b { color: #065fd4; font-weight: 500; }
.sm-short { position: absolute; right: 5%; bottom: 6%; width: 26%; aspect-ratio: 9 / 16; border-radius: 1.2em; overflow: hidden; border: 0.35em solid #0f0f0f; box-shadow: 0 1.6em 3.2em rgba(90,30,10,0.3); color: #fff; transform: rotate(3deg); }
.sm-short::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 45%); }
.sm-short > :not(picture) { position: absolute; z-index: 1; }
.sm-short picture img { position: absolute; inset: 0; }
.sm-short__tag { top: 0.7em; left: 0.7em; display: inline-flex; align-items: center; gap: 0.3em; font-weight: 700; font-size: 0.85em; }
.sm-short__tag i { display: inline-grid; place-items: center; width: 1.2em; height: 1.4em; background: #FF0000; border-radius: 0.35em; }
.sm-short__tag svg { width: 0.7em; height: 0.7em; }
.sm-short__cap { left: 0.7em; right: 0.7em; bottom: 0.8em; font-size: 0.78em; font-weight: 600; }

/* Google results */
.sm-g { position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 1em; padding: 1em 1.1em; box-shadow: 0 1.6em 3.2em rgba(20,50,110,0.18); }
.sm-g__bar { display: flex; align-items: center; gap: 0.8em; border: 1px solid #DFE1E5; border-radius: 999px; padding: 0.45em 0.9em; box-shadow: 0 1px 4px rgba(32,33,36,0.1); font-size: 0.95em; }
.sm-g__logo { font-weight: 700; font-size: 1.1em; background: linear-gradient(90deg, #4285F4 0 24%, #EA4335 24% 42%, #FBBC05 42% 60%, #4285F4 60% 76%, #34A853 76% 88%, #EA4335 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sm-g__ai { margin: 0.9em 0; padding: 0.9em; border-radius: 0.9em; background: linear-gradient(135deg, #F3F0FF, #EAF2FF); font-size: 0.92em; color: #202124; }
.sm-g__ai-h { display: flex; align-items: center; gap: 0.35em; font-weight: 700; margin-bottom: 0.4em; }
.sm-g__ai-h i { color: #8E5CF6; display: inline-flex; }
.sm-g__cite { display: flex; align-items: center; gap: 0.6em; margin-top: 0.7em; background: #fff; border-radius: 0.7em; padding: 0.45em; box-shadow: 0 0 0 0.15em #8E5CF6; }
.sm-g__cite picture img { width: 3em; height: 3em; border-radius: 0.5em; }
.sm-g__cite span { display: flex; flex-direction: column; font-size: 0.92em; }
.sm-g__cite small { color: #4D5156; }
.sm-g__site { display: flex; align-items: center; gap: 0.6em; }
.sm-g__site span { display: flex; flex-direction: column; font-size: 0.88em; }
.sm-g__site small { color: #4D5156; }
.sm-g__title { color: #1A0DAB; font-size: 1.3em; margin: 0.25em 0; }
.sm-g__desc { color: #4D5156; font-size: 0.9em; }
.sm-g__desc span { color: #70757A; }

/* Instagram + newsletter */
.sm-ig { position: absolute; left: 6%; top: 5%; width: 40%; background: #fff; border-radius: 1em; overflow: hidden; box-shadow: 0 1.6em 3.2em rgba(60,40,0,0.18); transform: rotate(-3deg); }
.sm-ig__head { display: flex; align-items: center; gap: 0.55em; padding: 0.65em 0.8em; font-size: 0.92em; }
.sm-ig__head .sm-av { width: 2em; height: 2em; }
.sm-ig__head span { margin-left: auto; }
.sm-ig__img { aspect-ratio: 1; }
.sm-ig__icons { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.8em 0.2em; font-weight: 700; font-size: 0.88em; }
.sm-ig__icons svg { width: 1.5em; height: 1.5em; fill: #ED4956; }
.sm-ig__cap { padding: 0 0.8em 0.8em; font-size: 0.85em; }
.sm-mail { position: absolute; right: 5%; bottom: 6%; width: 50%; background: #fff; border-radius: 1em; padding: 0.9em; box-shadow: 0 1.6em 3.2em rgba(60,40,0,0.22); transform: rotate(2deg); font-size: 0.92em; }
.sm-mail__from { display: flex; align-items: center; gap: 0.55em; }
.sm-mail__from span { display: flex; flex-direction: column; }
.sm-mail__from small { color: #5f6368; font-size: 0.85em; }
.sm-mail__subj { font-weight: 700; font-size: 1.08em; margin: 0.6em 0; line-height: 1.25; }
.sm-mail__img { aspect-ratio: 16 / 9; border-radius: 0.6em; overflow: hidden; }
.sm-mail__text { color: #3c4043; margin: 0.6em 0; font-size: 0.92em; }
.sm-mail__btn { display: inline-block; background: #B0582F; color: #fff; font-weight: 700; padding: 0.5em 1em; border-radius: 0.5em; }

/* Website */
.sm-browser { position: absolute; left: 5%; top: 14%; width: 76%; background: #fff; border-radius: 0.9em; overflow: hidden; box-shadow: 0 1.6em 3.2em rgba(60,40,0,0.2); }
.sm-browser__bar { display: flex; align-items: center; gap: 0.8em; background: #EEEDEA; padding: 0.55em 0.8em; }
.sm-browser__dots { display: flex; gap: 0.35em; }
.sm-browser__dots i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #FF5F57; }
.sm-browser__dots i:nth-child(2) { background: #FEBC2E; }
.sm-browser__dots i:nth-child(3) { background: #28C840; }
.sm-browser__url { flex: 1; display: inline-flex; align-items: center; gap: 0.4em; background: #fff; border-radius: 0.5em; padding: 0.25em 0.7em; font-size: 0.82em; color: #555; }
.sm-browser__url svg { width: 0.85em; height: 0.85em; color: #888; }
.sm-site__nav { display: flex; align-items: center; gap: 1em; padding: 0.7em 1em; font-size: 0.82em; }
.sm-site__nav b { font-family: Georgia, 'Times New Roman', serif; font-size: 1.3em; letter-spacing: -0.02em; }
.sm-site__nav span { flex: 1; color: #666; }
.sm-site__nav em { font-style: normal; background: #2F2A24; color: #fff; padding: 0.4em 0.9em; border-radius: 999px; font-weight: 600; }
.sm-site__hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.sm-site__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,24,18,0.65), rgba(30,24,18,0) 70%); }
.sm-site__hero > div { position: absolute; z-index: 1; left: 1.4em; top: 50%; transform: translateY(-50%); width: 55%; color: #fff; }
.sm-site__h { font-family: Georgia, 'Times New Roman', serif; font-size: 1.9em; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.6em; }
.sm-site__hero span { display: inline-block; background: #fff; color: #2F2A24; font-weight: 700; font-size: 0.85em; padding: 0.5em 1em; border-radius: 999px; }
.sm-site__proof { padding: 0.7em 1em; font-size: 0.82em; color: #444; }
.sm-site__proof span { color: #F5A623; letter-spacing: 0.08em; }
.sm-mobile { position: absolute; right: 5%; bottom: 6%; width: 24%; aspect-ratio: 9 / 18; background: #fff; border-radius: 1.3em; border: 0.35em solid #0E0E12; overflow: hidden; box-shadow: 0 1.6em 3.2em rgba(60,40,0,0.3); font-size: 0.8em; display: flex; flex-direction: column; }
.sm-mobile__img { height: 52%; }
.sm-mobile p { font-family: Georgia, 'Times New Roman', serif; font-size: 1.15em; line-height: 1.1; padding: 0.7em 0.7em 0.5em; }
.sm-mobile span { margin: 0 0.7em; text-align: center; background: #2F2A24; color: #fff; font-weight: 700; padding: 0.5em; border-radius: 999px; font-size: 0.9em; }
@media (max-width: 860px) { .smock { font-size: 2.4cqw; } }
.statement--ads { align-items: center; grid-template-columns: 0.9fr 1.1fr; }
@media (max-width: 900px) { .statement--ads { grid-template-columns: minmax(0, 1fr); } }
.listen--left { justify-content: flex-start; margin-top: 0; }
.pay__commit { font-size: 0.9rem; margin-top: -4px; margin-bottom: 10px; }
.pay__commit b { color: var(--ink); }
.pay__card--dark .pay__commit b { color: #fff; }
.pay__value { font-size: 0.82rem; color: var(--ink-3) !important; margin-top: 18px; }
.pay__card li b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.pay__card--dark .pay__value { color: rgba(255,255,255,0.55) !important; }

/* Podcast production scene */
.smock--pod { background: radial-gradient(120% 90% at 15% 0%, #E7F6F2 0%, #C7EAE1 50%, #A6D9CB 100%); }
.sm-daw { position: absolute; left: 4%; top: 9%; width: 70%; background: #17171D; color: #E8E8EE; border-radius: 0.9em; overflow: hidden; box-shadow: 0 1.6em 3.2em rgba(10,60,50,0.28); }
.sm-daw__bar { display: flex; align-items: center; gap: 0.8em; background: #222229; padding: 0.55em 0.8em; font-size: 0.8em; }
.sm-daw__bar b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-daw__marks { position: relative; height: 1.7em; margin-left: 6.6em; border-bottom: 1px solid #2E2E36; }
.sm-daw__marks span { position: absolute; top: 0.4em; font-size: 0.68em; color: #9A9AA8; padding-left: 0.4em; border-left: 1px solid #55555F; }
.sm-daw__tracks { position: relative; padding: 0.4em 0; }
.sm-daw__track { display: grid; grid-template-columns: 6.6em 1fr; align-items: center; height: 2.6em; padding-right: 0.7em; }
.sm-daw__track span { display: flex; align-items: center; gap: 0.4em; font-size: 0.75em; padding-left: 0.9em; color: #C9C9D3; }
.sm-daw__track span i { width: 0.6em; height: 0.6em; border-radius: 0.15em; }
.sm-daw__wave { height: 2em; background: rgba(255,255,255,0.04); border-radius: 0.35em; padding: 0.2em 0.3em; }
.sm-daw__wave svg { width: 100%; height: 100%; fill: currentColor; }
.sm-daw__head { position: absolute; top: 0; bottom: 0; left: calc(6.6em + 38%); width: 2px; background: #FF5F57; }
.sm-daw__head::before { content: ''; position: absolute; top: -0.2em; left: -0.35em; border: 0.38em solid transparent; border-top-color: #FF5F57; }
.sm-daw__foot { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0.6em 0.8em 0.8em; border-top: 1px solid #2E2E36; }
.sm-daw__foot span { font-size: 0.7em; background: #26262E; color: #8FE3C8; border-radius: 999px; padding: 0.3em 0.7em; }
.sm-player { position: absolute; right: 4%; bottom: 6%; width: 30%; background: #fff; border-radius: 1.2em; padding: 0.8em; box-shadow: 0 1.6em 3.2em rgba(10,60,50,0.3); transform: rotate(2.5deg); font-size: 0.85em; }
.sm-player__art { position: relative; aspect-ratio: 1; border-radius: 0.7em; overflow: hidden; }
.sm-player__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,40,34,0.85), rgba(14,40,34,0) 60%); }
.sm-player__art b { position: absolute; z-index: 1; left: 0.6em; bottom: 0.5em; color: #fff; font-size: 1.05em; line-height: 1.05; letter-spacing: -0.02em; }
.sm-player__title { font-weight: 700; margin-top: 0.6em; line-height: 1.2; }
.sm-player__show { color: #6B6B78; font-size: 0.9em; }
.sm-player__bar { display: block; position: relative; height: 0.3em; background: #E4E4EA; border-radius: 1em; margin-top: 0.7em; }
.sm-player__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #0E0E12; border-radius: 1em; }
.sm-player__time { display: flex; justify-content: space-between; font-size: 0.72em; color: #6B6B78; margin-top: 0.3em; }
.sm-player__ctrl { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin-top: 0.3em; font-size: 0.8em; color: #3B3B45; }
.sm-player__ctrl i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #0E0E12; color: #fff; font-size: 1.1em; }
.sm-player__on { text-align: center; font-size: 0.7em; color: #6B6B78; margin-top: 0.5em; }
.smock__badge--d { top: 4%; right: 4%; transform: rotate(3deg); background: #1DB954; }