/* heybloc.com/support and /delete-account (LAUNCH-02). Fonts, the reset and
   --bl-gutter come from styles.css; the logo and the footer from legal.css.

   Not under /assets/: that path is cached for a year as immutable (vercel.json),
   and this file is not fingerprinted.

   The yellow band is /connect's (connect.css, the owner's spacing of 2026-10-20):
   band top → logo 28, logo 47 tall, logo → title 64, title 40/44, title → line 8,
   line 18/26 at 65% ink, line → band bottom 40, band → body 48. Change both
   files together. Under the band, one white column on the landing's left gutter. */

body{display:flex;flex-direction:column;min-height:100vh;color:#14170F}

.sp-hero{flex:none;background:#FFD422;padding:28px var(--bl-gutter) 40px}
.sp-hero-logo{display:block;width:max-content}
.sp-hero-logo .lg-logo{width:auto;height:47px}
.sp-title{margin:64px 0 0;font:800 40px/44px Figtree,system-ui,sans-serif;letter-spacing:-.025em;
  text-wrap:pretty}
.sp-sub{max-width:720px;margin:8px 0 0;font:400 18px/26px Figtree,system-ui,sans-serif;
  color:rgba(20,23,15,.65);text-wrap:pretty}

.sp-wrap{flex:1 0 auto;box-sizing:border-box;width:100%;
  padding:48px var(--bl-gutter) clamp(56px,7vw,96px);
  --sp-badge:30px;--sp-step-gap:16px}
.sp-wrap > *{max-width:720px}
.lg-foot{padding-left:var(--bl-gutter);padding-right:var(--bl-gutter)}

.sp-h2{margin:56px 0 16px;font:800 24px/30px Figtree,system-ui,sans-serif;letter-spacing:-.02em;color:#14170F}
.sp-wrap > .sp-h2:first-child{margin-top:0}

.sp-p{margin:0 0 14px;font:400 17.5px/1.5 Figtree,system-ui,sans-serif;color:rgba(20,23,15,.78);text-wrap:pretty}
.sp-p:last-child{margin-bottom:0}
.sp-wrap b{font-weight:700;color:#14170F}
.sp-wrap a{font-weight:700;color:#14170F;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.sp-wrap a:hover{color:#8A6B00}
.sp-wrap a:focus-visible{outline:2px solid #14170F;outline-offset:3px}

.sp-label{display:block;margin:0 0 12px;font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.12em;color:rgba(20,23,15,.42)}

/* The email, first thing on /support. */
.sp-panel{box-sizing:border-box;padding:24px 26px;border-radius:18px;background:#F7F7F8}
.sp-email{display:inline-block;margin:0 0 10px;font:800 26px/32px Figtree,system-ui,sans-serif;letter-spacing:-.02em}
.sp-wrap .sp-email{text-decoration-thickness:2px;text-underline-offset:5px}

/* Questions: one row each, ruled like /connect's steps. */
.sp-faq{margin:0;padding:0}
.sp-faq > div{padding:22px 0;border-top:1px solid rgba(20,23,15,.08)}
.sp-faq > div:last-child{border-bottom:1px solid rgba(20,23,15,.08)}
.sp-faq dt{margin:0 0 8px;font:700 19px/1.35 Figtree,system-ui,sans-serif;color:#14170F}
.sp-faq dd{margin:0}

/* Numbered steps, /connect's: a yellow badge, the text a badge and a gap in. */
.sp-steps{list-style:none;margin:0 0 20px;padding:0}
.sp-steps li{display:flex;gap:var(--sp-step-gap);align-items:flex-start;padding:15px 0;
  border-top:1px solid rgba(20,23,15,.08);
  font:500 17.5px/1.45 Figtree,system-ui,sans-serif;color:rgba(20,23,15,.78)}
.sp-steps li:last-child{border-bottom:1px solid rgba(20,23,15,.08)}
.sp-n{flex:none;width:var(--sp-badge);height:var(--sp-badge);margin-top:-2px;border-radius:50%;
  background:#FFD422;color:#14170F;font:600 13px/30px "IBM Plex Mono",ui-monospace,monospace;text-align:center}

/* A plain list: a short rule for a bullet. */
.sp-list{list-style:none;margin:0 0 14px;padding:0}
.sp-list li{position:relative;margin:0 0 10px;padding-left:22px;
  font:400 17.5px/1.5 Figtree,system-ui,sans-serif;color:rgba(20,23,15,.78);text-wrap:pretty}
.sp-list li:last-child{margin-bottom:0}
.sp-list li::before{content:"";position:absolute;left:2px;top:.75em;width:10px;height:2px;
  border-radius:1px;background:rgba(20,23,15,.3)}

/* What deletion removes and what stays, side by side. */
.sp-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 20px}
.sp-split .sp-panel{padding:22px 24px}
.sp-split .sp-list li{font-size:16.5px}

/* Phone browsers (the landing page's breakpoint): the band's phone spacing, a
   16px gutter, the two panels stacked. */
@media (max-width:640px){
  .sp-hero{padding-top:20px;padding-bottom:28px}
  .sp-hero-logo .lg-logo{height:36px}
  .sp-title{margin-top:40px;font-size:30px;line-height:34px}
  .sp-sub{margin-top:6px;font-size:15px;line-height:22px}
  .sp-wrap{padding-top:32px;--sp-step-gap:14px}
  .sp-hero,.sp-wrap,.lg-foot{padding-left:16px;padding-right:16px}
  .sp-h2{margin-top:44px;font-size:21px;line-height:27px}
  .sp-p,.sp-list li,.sp-steps li{font-size:16.5px}
  .sp-faq dt{font-size:17.5px}
  .sp-email{font-size:21px;line-height:28px}
  .sp-panel{padding:20px}
  .sp-split{grid-template-columns:1fr}
}