/* why: what makes it easy and safe, in six ruled points (the founder's old-site wording; "Why CrypTap" and "Safe for your
   business" merged 2026-10-10). Owned by why. */
#why{position:relative;z-index:3;background:var(--paper);color:var(--ink);padding:clamp(88px,13vh,140px) var(--g) clamp(72px,11vh,120px)}
#why .why-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
#why .why-h{font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.03em}
#why .why-hl1{display:block}
#why .why-sub{justify-self:end;max-width:30ch;font-size:17px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
#why .why-grid{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,5vh,52px) clamp(24px,3vw,48px)}
#why .why-c{position:relative;padding-top:20px;border-top:1px solid var(--ink);min-width:0}
#why .why-c h3{font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
#why .why-hl{color:var(--ink-2)}
/* a small gold highlight: the hairline over each point starts with a short gold stroke */
#why .why-c::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--gold)}
#why .why-c p{margin-top:10px;max-width:34ch;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}

@media (max-width:979px){
  #why .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  #why{padding:60px var(--g) 48px}
  #why .why-head{grid-template-columns:1fr;gap:10px}
  #why .why-h{font-size:28px;line-height:1.08;max-width:none}
  #why .why-sub{justify-self:start;font-size:15px;max-width:40ch}
  /* phones: one ruled list, each point a bold lead-in and its line (the CrypTap Go list's grammar) */
  #why .why-grid{grid-template-columns:1fr;margin-top:24px;gap:0}
  #why .why-c{padding:12px 0 13px;font-size:15px;line-height:1.45}
  #why .why-c:last-child{border-bottom:1px solid var(--line)}
  #why .why-c+.why-c{border-top-color:var(--line)}
  #why .why-c+.why-c::before{display:none}
  #why .why-c h3{display:inline;font-weight:500;font-size:15px;line-height:1.45;letter-spacing:0;color:var(--ink)}
  #why .why-hl{color:inherit}
  #why .why-c p{display:inline;margin:0 0 0 .25em;max-width:none;font-size:15px;line-height:1.45}
}
@media (max-width:359px){
  #why .why-h{font-size:26px}
  #why .why-c,#why .why-c h3,#why .why-c p{font-size:14.5px}
}