/* Devsnaps landing body, scoped under .ds so the Sitepics header and footer stay untouched.
   Adapted from the Devsnaps theme-4f page: styles.css, friendly-common.css, theme-4c/4f and why.css. */

.ds{
  --ds-text:#0B1220;
  --ds-text-2:#475467;
  --ds-muted:#5B6474;
  --ds-line:#E3E8EF;
  --ds-line-strong:#D5DCE6;
  --ds-blue:#0866D9;
  --ds-blue-2:#0A6FE8;
  --ds-yellow:#FFD23F;
  background:#fff;
  color:var(--ds-text);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
}
.ds h1,.ds h2,.ds h3,.ds h4{
  font-family:"DM Sans",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ds-text);
  line-height:1.08;
}
.ds h1{font-size:clamp(40px,6.2vw,78px);letter-spacing:-.035em}
.ds h2{font-size:clamp(32px,4.4vw,52px);margin:0 0 .4em}
.ds h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.2;margin:0 0 .4em}
.ds h4{font-size:1.2rem;letter-spacing:-.02em;line-height:1.25;margin:16px 0 8px}
.ds p{margin:0 0 1.05em}
.ds a{color:var(--ds-blue)}
.ds a:hover{color:var(--ds-blue-2)}
.ds section{padding:88px 0}
.ds .center{text-align:center}
.ds .section-head{max-width:820px;margin:0 auto 40px}
.ds .section-head.center{text-align:center}
.ds .num{
  display:block;
  margin:0 0 14px;
  font:700 12.5px/1 "DM Sans",sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ds-muted);
}
.ds .hl{
  background:linear-gradient(transparent 58%,var(--ds-yellow) 58%,var(--ds-yellow) 92%,transparent 92%);
  padding:0 .06em;
  color:inherit;
}

/* Hero */
.ds .hero{
  position:relative;
  overflow:visible;
  padding:72px 0 56px;
  background:
    radial-gradient(900px 420px at 50% -60px,rgba(10,111,232,.07),transparent 70%),
    linear-gradient(180deg,#F7F9FC 0%,#FFFFFF 75%);
}
.ds .hero-grid{text-align:center}
.ds .hero h1{max-width:1100px;margin:8px auto 18px;line-height:1.05}
.ds .hero .hl{background:none;color:var(--ds-blue);padding:0;white-space:nowrap}
.ds .subhead{
  font:700 clamp(22px,2.1vw,28px)/1.3 "DM Sans",sans-serif;
  letter-spacing:-.02em;
  color:var(--ds-text);
  max-width:820px;
  margin:0 auto 18px;
}
.ds .subhead .ds-snaps{color:var(--ds-blue)}
.ds .subhead .hl2{
  background:linear-gradient(transparent 55%,#FFE38A 55%,#FFE38A 92%,transparent 92%);
  padding:0 .08em;
  white-space:nowrap;
}
.ds .kicker{
  max-width:620px;
  margin:0 auto 22px;
  font:600 16px/1.45 "DM Sans",sans-serif;
  color:var(--ds-text-2);
}
.ds .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.ds .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:700 16px/1 "DM Sans",sans-serif;
  text-decoration:none;
  color:var(--ds-text);
  background:#fff;
  border:1px solid var(--ds-line-strong);
  border-radius:12px;
  padding:15px 22px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  cursor:pointer;
}
.ds .btn:hover{color:var(--ds-text);transform:translateY(-1px);box-shadow:0 4px 10px rgba(16,24,40,.08)}
.ds a.btn-primary,.ds .btn-primary{
  background:var(--ds-blue-2);
  color:#fff;
  border-color:var(--ds-blue-2);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 20px -8px rgba(10,111,232,.55);
}
.ds a.btn-primary:hover,.ds .btn-primary:hover{background:var(--ds-blue);color:#fff;border-color:var(--ds-blue)}
.ds .btn-lg{font-size:17px;padding:17px 26px}
.ds .btn svg{flex:none}
.ds .btn-soon,.ds .btn-soon:hover{
  background:#fff;
  color:var(--ds-muted);
  border:1px dashed var(--ds-line-strong);
  box-shadow:none;
  transform:none;
  cursor:default;
}
.ds .btn.is-disabled,.ds .btn.is-disabled:hover,.ds .btn.is-disabled:active{
  opacity:.6;
  cursor:default;
  transform:none;
  pointer-events:none;
  box-shadow:none;
}

/* Slider */
.ds .hero-slider{
  position:relative;
  max-width:1120px;
  margin:40px auto 0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 0 1px #E1E7F0,0 30px 70px -34px rgba(14,26,51,.45);
  background:#F7F9FC;
}
.ds .hero-slider .slides{position:relative;aspect-ratio:16/10}
.ds .hero-slider .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
}
.ds .hero-slider .slide.is-on{opacity:1}
.ds .sl-btn{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.9);
  color:#0E1A33;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.ds .sl-prev{left:14px}
.ds .sl-next{right:14px}
.ds .sl-btn:hover{background:#fff}
.ds .sl-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;gap:8px;justify-content:center}
.ds .sl-dots button{
  width:10px;
  height:10px;
  border-radius:50%;
  border:0;
  padding:0;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.ds .sl-dots button.is-on{background:#fff;width:26px;border-radius:6px}

/* Why */
.ds .why{padding:88px 0 72px;background:#fff}
.ds .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:8px auto 0;max-width:1080px}
.ds .pain{
  background:#fff;
  border:1px solid var(--ds-line);
  border-radius:16px;
  padding:24px 24px 22px;
  box-shadow:0 10px 30px -22px rgba(14,26,51,.35);
}
.ds .pain p{margin:10px 0 0;font-size:1.08rem;line-height:1.5;color:var(--ds-text)}
.ds .pain-x{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#FDECEC;
  color:#D33;
  font-weight:700;
}
.ds .why-pitch{
  max-width:820px;
  margin:40px auto 0;
  text-align:center;
  font-size:1.3rem;
  line-height:1.55;
  color:var(--ds-text);
}
.ds .why-pitch strong{color:var(--ds-blue-2)}

/* How it works. The accounts band used to sit between Why and this section;
   a shorter top padding keeps that join from doubling up. */
.ds .how{background:#fff;padding-top:24px}
.ds .group-label{
  margin:36px 0 16px;
  font:800 15px/1 "DM Sans",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ds-blue);
}
.ds .how .group-label:first-of-type{margin-top:0}
.ds .step-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ds .step-grid article{
  background:#fff;
  border:1px solid var(--ds-line);
  border-radius:16px;
  padding:14px 14px 18px;
  box-shadow:0 10px 30px -22px rgba(14,26,51,.35);
  min-width:0;
}
.ds .step-grid p{margin:0;color:#3B4A63;line-height:1.5;font-size:1.02rem}
.ds .ds-shot{
  aspect-ratio:16/10;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1e1e1e;
}
.ds .ds-shot img{width:100%;height:100%;object-fit:contain;display:block}
.ds .ds-shot.cream{background:#F5EEE4}
.ds .ds-shot.fill{background:#111}
.ds .ds-shot.fill img{object-fit:cover}
.ds .ds-shot.x2 img{width:366px;max-width:92%;height:auto}

/* Download */
.ds .ds-download{background:#F4F7FB}
.ds .ds-dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.ds .ds-dl-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--ds-line);
  border-radius:16px;
  padding:28px;
  box-shadow:0 10px 30px -22px rgba(14,26,51,.35);
  min-width:0;
}
.ds .os-tile{
  width:56px;
  height:56px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#EAF2FE;
  margin-bottom:16px;
}
.ds .os-tile svg{width:28px;height:28px;display:block}
.ds .dl-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ds .dl-title h3{margin:0;font-size:28px}
.ds .dl-soon{
  font:700 12px/1 "DM Sans",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ds-text);
  background:#FFE38A;
  border-radius:999px;
  padding:5px 9px;
}
.ds .ds-dl-card > p{margin:0 0 22px;color:#3B4A63;font-size:16.5px;line-height:1.45}
.ds .dl-verify{margin-top:14px;max-width:100%;min-width:0}
.ds .dl-verify p{margin:0 0 6px;color:var(--ds-muted);font-size:13px;line-height:1.4}
.ds .dl-hash{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 6px;max-width:100%;min-width:0}
.ds .dl-hash code,.ds .dl-check code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12px;
  line-height:1.45;
  color:var(--ds-text);
}
.ds .dl-hash code{display:block;width:100%;word-break:break-all;overflow-wrap:anywhere}
.ds .dl-copy{
  padding:4px 8px;
  border:1px solid var(--ds-line);
  border-radius:8px;
  background:#F7F9FC;
  color:var(--ds-muted);
  font:600 12px/1.2 "DM Sans",sans-serif;
  cursor:pointer;
}
.ds .dl-copy:hover{color:var(--ds-text);border-color:var(--ds-text)}

@media (max-width:980px){
  .ds .pain-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .ds section{padding:64px 0}
  .ds .hero{padding:48px 0 36px}
  .ds .why{padding:64px 0 48px}
  .ds .how{padding-top:16px}
  .ds .step-grid,.ds .ds-dl-grid{grid-template-columns:1fr}
  .ds .btn-row .btn{width:100%}
  .ds .hero .hl,.ds .subhead .hl2{white-space:normal}
  .ds .sl-btn{width:36px;height:36px;font-size:24px}
  .ds .sl-prev{left:8px}
  .ds .sl-next{right:8px}
}
@media (max-width:560px){
  .ds .hero h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .ds .hero-slider .slide{transition:none}
  .ds .btn{transition:none}
}