/* ==========================================================================
   sell-v3.css — /sell-memory-ssds.php (2026-09-30)
   "Henry buys your RAM & SSDs": hero with Henry presenting the live chat,
   animated DDR5 / DDR4 / SSD cards, the "Will Henry buy it?" checker, steps,
   FAQ. Layered on site-v3 + v3-kit (main.sv). Chat widget: buy-chat.css.
   Motion is gated on html.sv-js (never set under reduced motion).
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.sl-hero { padding-bottom: clamp(48px, 6vw, 84px); }
.sl-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: start; gap: clamp(28px, 4vw, 64px); }
html body.eco-chromed main.sv .sl-h1 { font-size: clamp(44px, 4.9vw, 78px) !important; margin-bottom: 20px; }
/* room for the descenders in "Henry buys" (the kit's line mask clips them) */
.sl-h1 .sv-line { padding-bottom: .24em; margin-bottom: -.22em; }

.sl-traces { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.sl-traces path { fill: none; stroke: rgba(185, 242, 74, .16); stroke-width: 1.2; }
.sl-traces circle { fill: rgba(185, 242, 74, .45); }
.sl-traces .p { stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26 900; stroke-dashoffset: 930; filter: drop-shadow(0 0 4px rgba(185, 242, 74, .9)); }
html.sv-js .sl-traces .p { animation: slTrace 6s linear infinite; }
html.sv-js .sl-traces .p2 { animation-duration: 7.5s; animation-delay: -2s; }
html.sv-js .sl-traces .p3 { animation-duration: 8.5s; animation-delay: -4.4s; }
@keyframes slTrace { to { stroke-dashoffset: 0; } }

/* what-we-buy tiles in the hero */
.sl-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 640px; }
.sl-rule {
  position: relative; overflow: hidden; padding: 16px 16px 15px; border-radius: 20px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .4s var(--ease), border-color .3s, background .3s;
}
.sl-rule:hover { transform: translateY(-3px); border-color: rgba(185, 242, 74, .5); background: rgba(185, 242, 74, .08); }
.sl-rule-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px; background: rgba(185, 242, 74, .14); color: var(--lime); }
.sl-rule-ic svg { width: 22px; height: 22px; }
.sl-rule b { display: block; font: 900 22px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.sl-rule span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.sl-rule em { font-style: normal; color: var(--lime); }
.sl-rule::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); transform: skewX(-20deg); pointer-events: none;
}
html.sv-js .sl-rule::after { animation: slSweep 6s ease-in-out infinite; }
html.sv-js .sl-rule:nth-child(2)::after { animation-delay: .5s; }
html.sv-js .sl-rule:nth-child(3)::after { animation-delay: 1s; }
@keyframes slSweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.sl-mini-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; color: rgba(255, 255, 255, .78); font-size: 14.5px; font-weight: 600; }
.sl-mini-steps li { display: inline-flex; align-items: center; gap: 8px; }
.sl-mini-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 800 12.5px/1 var(--display); font-style: normal; background: var(--lime); color: var(--forest); }
.sl-mini-steps li + li::before { content: ""; width: 18px; height: 2px; margin-right: 6px; border-radius: 2px; background: rgba(185, 242, 74, .4); }
.sl-talk { margin-top: 22px !important; font-size: 15px; color: rgba(255, 255, 255, .7); }
html body.eco-chromed main.sv .sl-talk a { color: var(--lime) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* chat column with Henry behind the counter */
.sl-chat-wrap { position: relative; padding-top: 158px; }
.sl-chat-wrap [data-buy-chat] { position: relative; z-index: 2; }
.sl-glow { position: absolute; inset: 140px -30px -30px; z-index: 0; border-radius: 40px; background: radial-gradient(60% 50% at 50% 40%, rgba(185, 242, 74, .28), transparent 70%); filter: blur(30px); pointer-events: none; }
html.sv-js .sl-glow { animation: slGlow 6s ease-in-out infinite alternate; }
@keyframes slGlow { to { opacity: .55; transform: scale(1.06); } }
.sl-henry { position: absolute; z-index: 1; top: 0; right: -18px; width: 300px; aspect-ratio: 1369 / 1024; pointer-events: none; transform-origin: 60% 100%; }
.sl-henry img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(185, 242, 74, .35)) drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.sl-henry::before { content: ""; position: absolute; left: 18%; top: -6%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(185, 242, 74, .32), transparent 68%); filter: blur(8px); z-index: -1; }
.sl-henry::after {
  /* his chest light, glowing */
  content: ""; position: absolute; left: 41.8%; top: 50.6%; width: 13%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 252, 220, .95) 0%, rgba(255, 236, 150, .55) 35%, transparent 70%); mix-blend-mode: screen;
}
html.sv-js .sl-henry { animation: slHenryIn 1.1s var(--ease) .35s both, slHenryBob 5s ease-in-out 1.5s infinite; }
html.sv-js .sl-henry::after { animation: slHeart 2.6s ease-in-out infinite; }
@keyframes slHenryIn { from { opacity: 0; transform: translateY(70px) rotate(4deg); } }
@keyframes slHenryBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes slHeart { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.sl-say {
  position: absolute; z-index: 3; top: 14px; right: 262px; max-width: 230px;
  padding: 12px 16px; border-radius: 20px 20px 4px 20px; background: #fff; color: var(--forest);
  font: 800 15px/1.25 var(--display); letter-spacing: -.01em; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .55);
}
.sl-say::after { content: ""; position: absolute; right: -8px; bottom: 6px; border: 9px solid transparent; border-left-color: #fff; border-right: 0; }
.sl-say span { display: block; transition: opacity .35s, transform .35s var(--ease); }
.sl-say.is-swap span { opacity: 0; transform: translateY(6px); }
html.sv-js .sl-say { animation: slPop .6s cubic-bezier(.3, 1.5, .5, 1) 1.2s both; }
@keyframes slPop { from { opacity: 0; transform: scale(.6) translateY(10px); } }

/* ── What Henry buys ──────────────────────────────────────────────────── */
.sl-buy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sl-buy {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 30px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(7, 19, 11, .45);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.sl-buy:hover { transform: translateY(-6px); border-color: rgba(15, 162, 74, .4); box-shadow: 0 40px 70px -40px rgba(7, 19, 11, .5); }
.sl-buy--feature { background: var(--forest); color: #fff; border-color: transparent; }
.sl-buy-art { position: relative; display: grid; place-items: center; height: 150px; margin: -6px -6px 18px; border-radius: 22px; background: var(--tint); overflow: hidden; }
.sl-buy--feature .sl-buy-art { background: rgba(255, 255, 255, .05); }
.sl-buy-art svg { width: 86%; max-width: 280px; height: auto; overflow: visible; }
.sl-buy-tag { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px; font: 800 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; background: var(--tint); color: var(--green-dk); }
.sl-buy--feature .sl-buy-tag { background: var(--lime); color: var(--forest); }
[data-theme="dark"] .sl-buy-tag { background: rgba(185, 242, 74, .12); color: var(--lime); }
html body.eco-chromed main.sv .sl-buy h3 { font-size: clamp(26px, 2.4vw, 32px) !important; font-weight: 900 !important; letter-spacing: -.03em !important; line-height: 1 !important; }
.sl-buy-rule { margin-top: 8px !important; font: 800 17px/1.3 var(--display); color: var(--green-dk); }
.sl-buy--feature .sl-buy-rule, [data-theme="dark"] .sl-buy-rule { color: var(--lime); }
.sl-buy ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 22px !important; }
.sl-buy li { padding: 6px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600; background: var(--tint); color: var(--fg-2); }
.sl-buy--feature li { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); }
.sl-buy .sv-btn { margin-top: auto; align-self: flex-start; }
.sl-unsure { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 30px; padding: 18px 22px; border-radius: 22px; background: var(--tint); text-align: center; font-weight: 600; color: var(--fg-2); }
.sl-unsure svg { width: 22px; height: 22px; color: var(--green-dk); }
[data-theme="dark"] .sl-unsure svg { color: var(--lime); }

/* RAM / SSD illustrations */
.sl-pcb { fill: #0d5a2a; }
.sl-pcb--alt { fill: #0f6b31; }
.sl-chip { fill: #10231a; stroke: rgba(255, 255, 255, .12); stroke-width: .8; }
.sl-pin { fill: #e3b23c; }
.sl-sticker { fill: #f5f7f2; }
.sl-sticker-t { fill: #6b7a70; }
.sl-led { fill: var(--lime); }
.sl-hole { fill: var(--tint); }
.sl-buy--feature .sl-hole { fill: #0d2a17; }
html.sv-js .sl-chip { animation: slChip 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .14s); }
@keyframes slChip { 0%, 60%, 100% { fill: #10231a; } 20% { fill: #3f7d1e; } 30% { fill: #b9f24a; } }
html.sv-js .sl-pins { animation: slPins 3.5s ease-in-out infinite; }
@keyframes slPins { 50% { opacity: .75; } }
html.sv-js .sl-led { animation: slLed 1.1s steps(2, jump-none) infinite; }
@keyframes slLed { 50% { opacity: .15; } }
.sl-stack g { transform-box: fill-box; }
html.sv-js .sl-stack g { animation: slDeal 5s var(--ease) infinite; animation-delay: calc(var(--i) * .22s); }
@keyframes slDeal { 0%, 4% { opacity: 0; transform: translateY(-26px); } 14%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(8px); } }
.sl-badge5 { fill: var(--lime); }
.sl-badge5-t { fill: var(--forest); font: 900 15px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.02em; }
html.sv-js .sl-badge5g { transform-box: fill-box; transform-origin: center; animation: slBadge 5s ease-in-out infinite; }
@keyframes slBadge { 0%, 20% { transform: scale(0); } 28% { transform: scale(1.18); } 34%, 82% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
.sl-bits { fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 9; }
html.sv-js .sl-bits { animation: slBits 1.4s linear infinite; }
@keyframes slBits { to { stroke-dashoffset: -22; } }

/* ── Will Henry buy it? ───────────────────────────────────────────────── */
.sl-check-sec { background: var(--bg-2); }
.sl-check-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sl-check-henry { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 30px; }
.sl-check-henry img { flex: 0 0 auto; width: 150px; height: auto; filter: drop-shadow(0 16px 24px rgba(7, 19, 11, .3)); }
html.sv-js .sl-check-henry img { animation: slHenryBob 5s ease-in-out infinite; }
.sl-check-henry p { position: relative; margin-top: 36px !important; padding: 13px 16px; border-radius: 18px 18px 4px 18px; background: var(--card); border: 1px solid var(--line); font: 700 15px/1.35 var(--display); color: var(--fg); max-width: 250px; box-shadow: 0 16px 30px -22px rgba(7, 19, 11, .5); }
.sl-card { position: relative; padding: clamp(22px, 3vw, 34px); border-radius: 30px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(7, 19, 11, .55); }
.sl-q { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; font: 800 17px/1.2 var(--display); color: var(--fg); }
.sl-q i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 13px/1 var(--display); font-style: normal; background: var(--forest); color: var(--lime); }
.sl-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 24px; }
.sl-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 62px; padding: 11px 13px; border-radius: 16px; text-align: left;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); font: 800 15px/1.15 var(--display); cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s var(--ease), box-shadow .2s;
}
.sl-type small { font: 600 12px/1.25 var(--body); color: var(--muted); }
.sl-type:hover { border-color: var(--green); transform: translateY(-1px); }
.sl-type[aria-pressed="true"] { border-color: var(--green); background: #effbe9; box-shadow: 0 0 0 3px rgba(15, 162, 74, .14); }
[data-theme="dark"] .sl-type[aria-pressed="true"] { background: rgba(185, 242, 74, .08); }
.sl-verdict {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 20px; margin-bottom: 16px;
  background: var(--tint); border: 1.5px solid var(--line); transition: background .35s, border-color .35s;
}
.sl-v-ic { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--line); color: var(--fg); font: 900 22px/1 var(--display); }
.sl-v-ic svg { width: 24px; height: 24px; }
.sl-v-h { display: block; font: 900 20px/1.15 var(--display); letter-spacing: -.02em; color: var(--fg); }
.sl-v-p { margin-top: 5px !important; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.sl-verdict.is-yes { background: #effbe9; border-color: rgba(15, 162, 74, .45); }
.sl-verdict.is-yes .sl-v-ic { background: var(--lime); color: var(--forest); }
.sl-verdict.is-no { background: #f1f4f2; }
.sl-verdict.is-no .sl-v-ic { background: #dfe6e1; color: #3d4d42; }
[data-theme="dark"] .sl-verdict.is-yes { background: rgba(185, 242, 74, .08); }
[data-theme="dark"] .sl-verdict.is-no { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .sl-verdict.is-no .sl-v-ic { background: rgba(255, 255, 255, .1); color: #fff; }
html.sv-js .sl-verdict.is-pop .sl-v-ic { animation: slPop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
html.sv-js .sl-verdict.is-pop .sl-v-h, html.sv-js .sl-verdict.is-pop .sl-v-p { animation: slFadeUp .45s var(--ease) both; }
@keyframes slFadeUp { from { opacity: 0; transform: translateY(6px); } }
.sl-v-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sl-v-actions .sv-btn[hidden] { display: none; }
.sl-v-alt { font-weight: 700; color: var(--green-dk) !important; text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .sl-v-alt { color: var(--lime) !important; }

/* ── How it works (with Henry) ─────────────────────────────────────────── */
.sl-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(24px, 4vw, 56px); align-items: end; }
.sl-how-henry { position: relative; align-self: end; }
.sl-how-henry img { width: 100%; height: auto; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .45)); }
html.sv-js .sl-how-henry img { animation: slHenryBob 5.5s ease-in-out infinite; }
.sl-how-henry p { position: absolute; top: 6%; right: 62%; width: 210px; padding: 12px 15px; border-radius: 18px 18px 4px 18px; background: var(--lime); color: var(--forest); font: 800 15px/1.3 var(--display); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }

/* ── Trust strip ───────────────────────────────────────────────────────── */
.sl-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.sl-trust li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.sl-trust svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--lime); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sl-hero-in { grid-template-columns: 1fr; }
  html body.eco-chromed main.sv .sl-h1 { font-size: clamp(44px, 8.4vw, 80px) !important; }
  .sl-chat-wrap { max-width: 640px; width: 100%; margin-inline: auto; }
  .sl-buy-grid { grid-template-columns: 1fr 1fr; }
  .sl-buy--feature { grid-column: 1 / -1; }
  .sl-check-grid { grid-template-columns: 1fr; }
  .sl-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  html body.eco-chromed main.sv .sl-h1 { font-size: clamp(40px, 12vw, 58px) !important; }
  .sl-rules { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .sl-rule { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .sl-rule-ic { margin: 0; width: 34px; height: 34px; }
  .sl-rule b { font-size: 19px; }
  .sl-rule span { margin: 0; font-size: 13.5px; }
  .sl-mini-steps { font-size: 13.5px; margin-top: 18px; }
  .sl-chat-wrap { padding-top: 132px; }
  .sl-glow { inset: 110px -10px -10px; }
  .sl-henry { width: 240px; right: -10px; }
  .sl-say { right: 196px; top: 12px; max-width: 170px; font-size: 13.5px; padding: 10px 13px; }
  .sl-buy-grid { grid-template-columns: 1fr; }
  .sl-types { grid-template-columns: 1fr 1fr; }
  .sl-how-grid { grid-template-columns: 1fr; }
  .sl-how-henry { display: none; }
  .sl-trust { grid-template-columns: 1fr; }
  .sl-check-henry img { width: 104px; }
  .sl-check-henry p { margin-top: 22px !important; font-size: 14px; }
}
@media (max-width: 400px) {
  .sl-chat-wrap { padding-top: 118px; }
  .sl-say { right: 160px; max-width: 150px; }
  .sl-henry { width: 210px; }
}

/* ── No quick-action bar / site chat on this page (body[data-no-quickbar]) ──
   site-2026.css reserves 76px under the content for that bar on phones. */
@media (max-width: 899px) { body[data-no-quickbar] { padding-bottom: 0 !important; } }

/* Dark theme: eco-chrome.css forces `[data-theme=dark] body.eco-chromed p { color: inherit !important }`,
   which turned Henry's white / lime speech bubbles into white-on-white. Pin their ink. */
html[data-theme="dark"] body.eco-chromed main.sv .sl-say,
html[data-theme="dark"] body.eco-chromed main.sv .sl-say span,
html[data-theme="dark"] body.eco-chromed main.sv .sl-how-henry p { color: var(--forest) !important; }
html[data-theme="dark"] body.eco-chromed main.sv .sl-check-henry p { color: var(--fg) !important; }
html[data-theme="dark"] body.eco-chromed main.sv .sl-buy-rule { color: var(--lime) !important; }