/* The sell layer of the public site (MKT-1, docs/23_MARKETING_SITE.md).

   Loaded after marketing.css on every marketing page. Everything here reads
   the --mk-* tokens, so light and dark both work, plus --sell-acc, the page
   family's accent. The accent is only ever a fill, a stroke or a border --
   never text -- because it is a brand colour and not a contrast-checked one.

   MOTION: every animation is inside prefers-reduced-motion:no-preference. With
   the preference set, the drawings are still, complete pictures and nothing
   moves, fades in or slides. */

/* ---------- the folded walkthrough: a button that says what is in it ---- */
.mk-depth-more>summary.mk-wt{display:flex;align-items:center;gap:16px;width:100%;max-width:820px;padding:16px 18px;border:1px solid var(--mk-line);border-radius:14px;background:var(--mk-panel);color:var(--mk-ink);cursor:pointer;list-style:none;box-shadow:var(--mk-shadow)}
.mk-depth-more>summary.mk-wt:hover{border-color:var(--mk-ink)}
.mk-depth-more>summary.mk-wt:focus-visible{outline:2px solid var(--mk-ink);outline-offset:3px}
.mk-wt-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--mk-soft);border:1px solid var(--mk-line)}
.mk-wt-txt{display:grid;gap:3px;min-width:0;flex:1}
.mk-wt-label{font-size:16px;font-weight:780;letter-spacing:-.02em}
.mk-wt-teaser{font-size:13px;line-height:1.5;color:var(--mk-muted)}
.mk-wt-chev{flex:none;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 6px 4px 0}
.mk-depth-more[open]>summary.mk-wt .mk-wt-chev{transform:rotate(-135deg);margin-bottom:-4px}
.mk-depth-more[open]>summary.mk-wt{margin-bottom:22px}

/* ---------- shared bits ------------------------------------------------- */
.mk-sx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-sx-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mk-ink);color:var(--mk-bg);font-size:13px;font-weight:800;flex:none}
@media(prefers-reduced-motion:no-preference){
  .mk-depth-more>summary.mk-wt,.mk-sx-card{transition:border-color .18s,transform .18s}
  .mk-wt-chev{transition:transform .2s}
  .mk-sr{animation:sx-in .7s cubic-bezier(.2,.7,.2,1) both}
  @keyframes sx-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- the worked example under the hero --------------------------- */
.mk-sx-example{border-top:1px solid var(--mk-line);background:var(--mk-soft)}
.mk-sx-flow{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:none}
.mk-sx-step{position:relative;border:1px solid var(--mk-line);border-radius:16px;background:var(--mk-panel);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mk-sx-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:34px;width:10px;height:10px;border-top:2px solid var(--mk-muted);border-right:2px solid var(--mk-muted);transform:rotate(45deg)}
.mk-sx-step-h{display:flex;align-items:center;gap:10px}
.mk-sx-team{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mk-muted)}
.mk-sx-step h3{font-size:16px;line-height:1.25;letter-spacing:-.02em;margin:0}
.mk-sx-list,.mk-sx-rank{margin:0;padding:0 0 0 18px;display:grid;gap:7px;font-size:13.5px;line-height:1.45;color:var(--mk-ink)}
.mk-sx-rank li.is-top{font-weight:760}
.mk-sx-task{border:1px solid var(--mk-line);border-radius:12px;padding:12px;background:var(--mk-soft);display:grid;gap:6px;font-size:13px}
.mk-sx-task b{font-size:14px}.mk-sx-task span{color:var(--mk-muted);line-height:1.45}
.mk-sx-task-b{display:flex;gap:8px;margin-top:4px}
.mk-sx-task-b i{font-style:normal;font-size:12px;font-weight:760;padding:6px 12px;border-radius:7px;background:var(--mk-ink);color:var(--mk-bg)}
.mk-sx-task-b i.is-quiet{background:transparent;color:var(--mk-ink);border:1px solid var(--mk-line)}
.mk-sx-levels{display:flex;border:1px solid var(--mk-line);border-radius:999px;overflow:hidden;font-size:12px;font-weight:700}
.mk-sx-levels span{flex:1;text-align:center;padding:7px 4px;color:var(--mk-muted)}
.mk-sx-levels span.is-on{background:var(--mk-ink);color:var(--mk-bg)}
.mk-sx-done{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4;font-weight:700}
.mk-sx-done svg{flex:none;margin-top:2px;color:var(--mk-good,#2d8a50)}
.mk-sx-note{margin:18px 0 0;font-size:12.5px;color:var(--mk-muted)}
@media(max-width:980px){.mk-sx-flow{grid-template-columns:1fr 1fr}.mk-sx-step:not(:last-child)::after{display:none}}
@media(max-width:620px){.mk-sx-flow{grid-template-columns:1fr}}

/* ---------- product names tied to outcomes ------------------------------ */
.mk-sx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.mk-sx-card{position:relative;display:grid;gap:6px;border:1px solid var(--mk-line);border-radius:14px;background:var(--mk-panel);padding:18px 44px 18px 18px;color:var(--mk-ink)}
.mk-sx-card:hover{border-color:var(--mk-ink);transform:translateY(-2px)}
.mk-sx-card:focus-visible{outline:2px solid var(--mk-ink);outline-offset:3px}
.mk-sx-card-n{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-muted)}
.mk-sx-card b{font-size:16.5px;line-height:1.3;letter-spacing:-.02em}
.mk-sx-card-go{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--mk-muted)}
@media(max-width:900px){.mk-sx-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mk-sx-grid{grid-template-columns:1fr}}

/* ---------- after sign-up, and what AdMindra needs ---------------------- */
.mk-sx-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.mk-sx-start h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.04em;line-height:1.08;margin:8px 0 22px}
.mk-sx-steps,.mk-sx-needs{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:16px}
.mk-sx-steps li{display:flex;gap:14px;align-items:flex-start}
.mk-sx-steps b,.mk-sx-needs b{display:block;font-size:15px;margin-bottom:2px}
.mk-sx-steps p,.mk-sx-needs p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mk-muted)}
.mk-sx-needs li{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--mk-line);padding-bottom:14px}
.mk-sx-tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--mk-line);background:var(--mk-soft);color:var(--mk-ink)}
@media(max-width:860px){.mk-sx-start-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- dashboard vs assistant vs AI CEO ---------------------------- */
.mk-sx-table-wrap{margin-top:28px;overflow-x:auto;border:1px solid var(--mk-line);border-radius:16px;background:var(--mk-panel)}
.mk-sx-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.mk-sx-table th,.mk-sx-table td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--mk-line);line-height:1.45}
.mk-sx-table thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mk-muted)}
.mk-sx-table tbody th{font-weight:760;width:20%}
.mk-sx-table tr:last-child>*{border-bottom:0}
.mk-sx-table .is-us{background:var(--mk-soft);font-weight:700;box-shadow:inset 3px 0 0 var(--sell-acc,#b48a45)}
.mk-sx-table thead .is-us{color:var(--mk-ink)}

/* ---------- trust row under the calls to action ------------------------- */
.mk-sx-trust{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--mk-muted)}
.mk-sx-trust a{color:var(--mk-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Why AdMindra ------------------------------------------------ */
.mk-sx-why{border-top:1px solid var(--mk-line)}
.mk-sx-why-top{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.mk-sx-why h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.045em;line-height:1.05;margin:8px 0 14px}
.mk-sx-why-top p{font-size:15.5px;line-height:1.65;color:var(--mk-muted);max-width:56ch;margin:0}
.mk-sx-art{border:1px solid var(--mk-line);border-radius:20px;background:var(--mk-soft);padding:14px;box-shadow:var(--mk-shadow);border-top:3px solid var(--sell-acc,#b48a45)}
.mk-sx-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.mk-sx-cards article{border:1px solid var(--mk-line);border-radius:14px;background:var(--mk-panel);padding:20px}
.mk-sx-cards h3{font-size:16px;letter-spacing:-.02em;line-height:1.25;margin:0 0 8px}
.mk-sx-cards p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mk-muted)}
.mk-sx-strip{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--mk-line);border-radius:14px;overflow:hidden}
.mk-sx-strip li{padding:16px 18px;display:grid;gap:4px;border-right:1px solid var(--mk-line);background:var(--mk-soft)}
.mk-sx-strip li:last-child{border-right:0}
.mk-sx-strip b{font-size:14px}.mk-sx-strip span{font-size:12.5px;line-height:1.5;color:var(--mk-muted)}
@media(max-width:980px){.mk-sx-why-top{grid-template-columns:1fr}.mk-sx-cards{grid-template-columns:1fr 1fr}.mk-sx-strip{grid-template-columns:1fr 1fr}.mk-sx-strip li:nth-child(2){border-right:0}.mk-sx-strip li:nth-child(-n+2){border-bottom:1px solid var(--mk-line)}}
@media(max-width:560px){.mk-sx-cards,.mk-sx-strip{grid-template-columns:1fr}.mk-sx-strip li{border-right:0;border-bottom:1px solid var(--mk-line)}.mk-sx-strip li:last-child{border-bottom:0}}

/* ---------- the closing band -------------------------------------------- */
.mk-sx-cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border:1px solid var(--mk-line);border-radius:18px;background:var(--mk-soft);padding:28px 30px;border-left:4px solid var(--sell-acc,#b48a45)}
.mk-sx-cta h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.04em;margin:0 0 6px}
.mk-sx-cta p{margin:0;color:var(--mk-muted);font-size:14.5px;line-height:1.55;max-width:60ch}

/* ---------- the contact page -------------------------------------------- */
.mk-sx-contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.mk-sx-contact-art{border:1px solid var(--mk-line);border-radius:20px;background:var(--mk-soft);padding:14px}
.mk-sx-contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mk-sx-ccard{border:1px solid var(--mk-line);border-radius:16px;background:var(--mk-panel);padding:22px;overflow-wrap:anywhere}
.mk-sx-ccard h2{font-size:18px;letter-spacing:-.02em;margin:0 0 10px}
.mk-sx-ccard p{font-size:14px;line-height:1.65;color:var(--mk-muted);margin:0 0 10px}
.mk-sx-ccard a{color:var(--mk-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mk-sx-links{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.mk-sx-expect{border:1px solid var(--mk-line);border-radius:18px;background:var(--mk-soft);padding:28px 30px}
.mk-sx-expect h2{font-size:22px;margin:0 0 8px}.mk-sx-expect p{margin:0 0 16px;color:var(--mk-muted);line-height:1.65;max-width:70ch}
@media(max-width:900px){.mk-sx-contact-grid,.mk-sx-contact-cards{grid-template-columns:1fr}}

/* ---------- the drawings ------------------------------------------------- */
svg.sa{display:block;width:100%;height:auto;aspect-ratio:480/300;overflow:visible;--sa-acc:var(--sell-acc,#b48a45)}
.sa-card{fill:var(--mk-panel);stroke:var(--mk-line);stroke-width:1.5}
.sa-card.sa-hot{stroke:var(--sa-acc);stroke-width:2}
.sa-card.sa-inner{fill:var(--mk-soft)}
.sa-pill{fill:var(--mk-ink)}.sa-pill-t{fill:var(--mk-bg);font:700 13px system-ui,sans-serif}
.sa-txt{fill:var(--mk-ink);font:600 12.5px system-ui,sans-serif}
.sa-sm{font-size:12px;fill:var(--mk-muted)}
.sa-left{text-anchor:start}
.sa-tag{fill:var(--mk-ink);font:800 11px system-ui,sans-serif}
.sa-plan{fill:var(--mk-ink);font:800 13px system-ui,sans-serif}
.sa-num{fill:var(--mk-ink);font:800 15px system-ui,sans-serif}.sa-num-w{fill:var(--mk-bg)}
.sa-bar{fill:var(--mk-ink);opacity:.85}.sa-soft2{fill:var(--mk-muted);opacity:.45}.sa-noise{opacity:.35}
.sa-dot{fill:var(--mk-ink)}.sa-dot.sa-dim,.sa-dim{fill:var(--mk-muted);opacity:.55}
.sa-node{fill:var(--mk-panel);stroke:var(--sa-acc);stroke-width:2}
.sa-core{fill:var(--mk-ink)}.sa-core-m{fill:none;stroke:var(--mk-bg);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sa-halo{fill:var(--sa-acc);opacity:.16}
.sa-ring{fill:none;stroke:var(--mk-line);stroke-width:1.5}
.sa-flow,.sa-loop{fill:none;stroke:var(--sa-acc);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round}
.sa-arrow{fill:none;stroke:var(--sa-acc);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sa-ico{fill:none;stroke:var(--mk-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sa-ico-w{stroke:var(--mk-bg)}.sa-acc-i{stroke:var(--sa-acc)}
.sa-acc-f{fill:var(--sa-acc)}
.sa-btn{fill:var(--sa-acc)}.sa-btn.sa-dim-btn{fill:var(--mk-muted);opacity:.5}.sa-btn-t{fill:var(--mk-bg);font:800 14px system-ui,sans-serif;text-anchor:middle}
.sa-img{fill:var(--mk-soft);stroke:var(--mk-line);stroke-width:1.5}
.sa-ok circle{fill:var(--mk-good,#2d8a50)}.sa-ok.sa-warn circle{fill:var(--mk-gold,#be8228)}
.sa-tick{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sa-tick-big{stroke:var(--sa-acc);stroke-width:12}
.sa-shield{fill:var(--mk-panel);stroke:var(--sa-acc);stroke-width:4}
.sa-spark{fill:none;stroke:var(--sa-acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.sa-spark-big{stroke-width:3}
.sa-hair{stroke:var(--mk-line);stroke-width:1.5;fill:none}
.sa-chan{fill:var(--mk-panel);stroke:var(--sa-acc);stroke-width:2}.sa-chan-t{fill:var(--mk-ink);font:800 20px system-ui,sans-serif;text-anchor:middle}
.sa-fill{fill:var(--sa-acc)}
.sa-sweep{fill:var(--sa-acc);opacity:.22}
.sa-runner{fill:var(--sa-acc)}
.sa-pin{fill:var(--mk-panel);stroke:var(--sa-acc);stroke-width:4}
.sa-qr{fill:var(--mk-ink)}
.sa-ink{fill:none;stroke:var(--mk-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sa-lens{fill:var(--mk-panel);stroke:var(--mk-ink);stroke-width:5}.sa-lens-h{stroke:var(--mk-ink);stroke-width:7;stroke-linecap:round;fill:none}
.sa-cursor path{fill:var(--mk-ink);stroke:var(--mk-bg);stroke-width:1.5;transform:translate(300px,150px)}
.sa-send{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .sa-float{animation:sa-float 5s ease-in-out infinite;animation-delay:var(--d,0s)}
  .sa-rise{animation:sa-rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
  .sa-build{animation:sa-rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
  .sa-pulse{animation:sa-pulse 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .sa-spin{animation:sa-spin 40s linear infinite;transform-box:fill-box;transform-origin:center}
  .sa-flow,.sa-loop{animation:sa-dash 1.6s linear infinite}
  .sa-ripple{animation:sa-ripple 2.4s ease-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:center}
  .sa-sweep{animation:sa-spin 6s linear infinite;transform-origin:130px 150px;transform-box:view-box}
  .sa-grow{animation:sa-grow 3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:left}
  .sa-send{animation:sa-send 4s ease-in-out infinite}
  .sa-cursor{animation:sa-cursor 6s ease-in-out infinite}
  @keyframes sa-float{50%{transform:translateY(-5px)}}
  @keyframes sa-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes sa-pulse{50%{transform:scale(1.07);opacity:.8}}
  @keyframes sa-spin{to{transform:rotate(360deg)}}
  @keyframes sa-dash{to{stroke-dashoffset:-22}}
  @keyframes sa-ripple{from{transform:scale(.8);opacity:.9}to{transform:scale(3);opacity:0}}
  @keyframes sa-grow{from{transform:scaleX(.25)}to{transform:scaleX(1)}}
  @keyframes sa-send{0%{opacity:0;transform:translate(120px,150px)}20%{opacity:1}80%{opacity:1;transform:translate(400px,150px)}100%{opacity:0;transform:translate(400px,150px)}}
  @keyframes sa-cursor{0%,100%{transform:translate(0,0)}50%{transform:translate(-120px,60px)}}
}