/* DIL SET — dilset.in homepage
   Mobile first (390px), desktop at 900px+ (designed to 1440px).
   Tokens */
:root{
  --ink:#111827;
  --night:#111111;
  --muted:#6E6A6E;
  --pink:#E31375;
  --blush:#FFF0F6;
  --wash:#F9C9DE;
  --border:#E2E0DF;
  --white:#FFFFFF;
  --on-night:#F4F1F3;
  --on-night-muted:#BDB8BC;
  --cream:#FFF7F1;
  --radius-card:24px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.band{padding:72px 0 80px;position:relative;overflow:hidden}
.band--white{background:var(--white)}
.band--blush{background:var(--blush)}
.band--night{background:var(--night);color:var(--on-night)}
.split{display:grid;gap:48px;align-items:center}
.stack{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- Type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink)}
.band--night .eyebrow{color:var(--on-night)}
.display{margin:0;font-weight:800;font-size:clamp(50px,14vw,62px);line-height:.94;letter-spacing:-.045em;color:var(--ink)}
.h2{margin:0;font-weight:800;font-size:clamp(40px,11vw,46px);line-height:.98;letter-spacing:-.04em;color:var(--ink)}
.band--night .h2{color:var(--white)}
.accent{color:var(--pink)}
.lead{margin:20px 0 0;max-width:34ch;font-size:18px;line-height:1.6;color:var(--muted)}
.band--blush .lead{color:#5F5A5E}
.band--night .lead{color:var(--on-night-muted)}
.note{margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.band--blush .note{color:#5F5A5E}

/* ---------- Calls to action ---------- */
.cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px 0 22px;border-radius:999px;background:var(--ink);color:var(--white);font-weight:700;font-size:16px;text-decoration:none;letter-spacing:-.01em;transition:transform .2s ease,background .2s ease}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
.gp{display:inline-block;line-height:0;border-radius:12px}
.gp img{width:190px;height:auto;margin:-11px -11px}           /* official badge PNG carries its own padding */
.gp--lg img{width:250px;margin:-15px -15px}

/* ---------- Hero ---------- */
.hero{padding:34px 0 72px}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.wordmark{display:inline-flex;align-items:center;font-weight:800;font-size:21px;letter-spacing:-.04em;text-decoration:none;color:var(--ink)}
/* The call to action is a button, not a link: on the old header it read as
   body text and nobody pressed it. */
.nav__cta{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--white);font-size:14.5px;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(17,24,39,.55);transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.nav__cta:hover{background:#000;transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(17,24,39,.6)}
.nav__cta:active{transform:translateY(0);box-shadow:0 6px 14px -8px rgba(17,24,39,.5)}
.nav__cta svg{width:15px;height:15px;flex:none}
/* ---------- Hero card marquee ----------
   Two rows of square profile cards sliding right to left. Each track holds
   its cards twice and travels exactly half its own width, so the second set
   lands where the first began and the loop never jumps. */
.marquee{position:relative;display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.marquee__row{overflow:hidden}
.marquee__track{display:flex;gap:14px;width:max-content;animation:slide 34s linear infinite}
.marquee__row--slow .marquee__track{animation-duration:48s}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}

.mcard{flex:none;width:168px;border-radius:20px;overflow:hidden;background:var(--white);border:1px solid var(--border);box-shadow:0 18px 36px -18px rgba(17,24,39,.3)}
.mcard img{width:168px;height:168px;object-fit:cover;display:block;background:var(--blush)}
.mcard__body{padding:10px 12px 12px}
.mcard__name{display:flex;align-items:center;gap:5px;margin:0;font-weight:800;font-size:14.5px;letter-spacing:-.02em;color:var(--ink)}
.mcard__meta{margin:1px 0 0;font-size:12px;color:var(--muted)}
.tick{width:15px;height:15px;flex:none}
.note--center{text-align:center}

/* ---------- Phone frame ----------
   A drawing of the real Knock composer: same To row, same white input with
   a hairline border, same black pill. */
.phone{width:300px;margin:0 auto;padding:10px;border-radius:46px;background:var(--night);box-shadow:0 40px 80px -30px rgba(17,24,39,.45)}
.screen{height:600px;border-radius:36px;background:var(--white);overflow:hidden;display:flex;flex-direction:column;font-size:14px}
.app-top{display:flex;align-items:center;padding:20px 18px 4px}
.app-top svg{width:22px;height:22px}
.to-row{display:flex;align-items:center;gap:10px;padding:10px 18px 14px}
.to-label{font-size:14px;color:var(--muted)}
.to-name{font-weight:800;font-size:16px;letter-spacing:-.02em}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--blush);overflow:hidden;flex:none}
.reply-to{margin:0 18px;padding:12px 14px;border-radius:14px;background:var(--blush)}
.reply-to small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7A6F75}
.reply-to p{margin:4px 0 0;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--ink)}
.compose{margin:12px 18px 0;padding:16px;flex:1;min-height:0;border:1px solid var(--border);border-radius:18px;background:var(--white);font-size:14.5px;line-height:1.55;color:var(--ink);overflow:hidden}
.caret{display:inline-block;width:2px;height:16px;background:var(--pink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.screen__foot{padding:14px 18px 18px}
.app-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:52px;border-radius:999px;background:var(--night);color:#fff;font-weight:700;font-size:15px}
.app-btn svg{width:19px;height:19px}
.app-note{margin:10px 0 0;font-size:11px;line-height:1.45;text-align:center;color:var(--muted)}

/* ---------- Verified card ---------- */
.vcard{position:relative;width:290px;margin:0 auto}
.vcard .pcard{position:relative;width:100%}
.seal{position:absolute;right:-18px;top:-22px;z-index:4;width:104px;height:104px;border-radius:50%;background:var(--white);border:1px solid var(--border);box-shadow:0 20px 40px -18px rgba(17,24,39,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.seal svg{width:44px;height:44px}
.seal span{font-size:12px;font-weight:800;letter-spacing:.02em}
.vcard .note{text-align:center}

/* ---------- Vibe ring ---------- */
.ring{width:300px;height:300px;margin:0 auto;border-radius:50%;border:1.5px solid var(--pink);display:flex;align-items:center;justify-content:center;position:relative}
.ring::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(227,19,117,.35)}
.ring svg{width:76%;height:76%}

/* ---------- Safety ---------- */
.safety-head{max-width:760px}
.promises{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:16px}
.promise{background:var(--white);border-radius:var(--radius-card);padding:24px;display:flex;gap:18px;align-items:center}
.promise svg{width:96px;height:96px;flex:none}
.promise h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.promise p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.perk{margin:28px 0 0;display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:17px}
.perk svg{width:26px;height:26px}
.quiet{display:inline-block;margin-top:14px;font-size:14px;color:#5F5A5E;text-underline-offset:3px}
.quiet:hover{color:var(--ink)}

/* ---------- Closing ---------- */
.closing{text-align:center;padding-top:150px}
.closing .stack{align-items:center}
.closing .lead{margin-left:auto;margin-right:auto}
.toran{position:absolute;top:0;left:0;width:100%;height:120px}
.chai{width:180px;margin:0 auto 20px}

/* ---------- Footer ---------- */
.footer{background:var(--night);color:var(--on-night);padding:56px 0 40px;font-size:15px}
.footer .wordmark{color:var(--white)}
.foot-grid{display:grid;gap:28px}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 24px}
.foot-links a{display:inline-block;padding:10px 0;text-decoration:none;color:var(--on-night)}
.foot-links a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.socials{display:flex;gap:8px}
.socials a{width:44px;height:44px;border-radius:50%;border:1px solid #3A3A3A;display:flex;align-items:center;justify-content:center;color:var(--on-night)}
.socials a:hover{border-color:var(--white)}
.socials svg{width:20px;height:20px}
.legal{margin:36px 0 0;padding-top:24px;border-top:1px solid #2A2A2A;font-size:13px;color:var(--on-night-muted)}

/* ---------- Illustration style ---------- */
.ill .ln{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ill .lt{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ill .lp{fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ill .wash{fill:var(--wash)}
.ill .paper{fill:var(--cream);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.ill .white{fill:#fff;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.ill .inkfill{fill:var(--ink)}
.ill .pinkfill{fill:var(--pink)}
.ill .bead{fill:none;stroke:var(--pink);stroke-linecap:round;stroke-dasharray:.1 7.5;stroke-width:7}
.ill .bead-sm{fill:none;stroke:var(--pink);stroke-linecap:round;stroke-dasharray:.1 5.5;stroke-width:5}
.ill .grain{filter:url(#grain)}
.band--night .ill .lp{stroke:var(--pink)}
.band--night .ill .ln{stroke:#F7A8CB}

/* ---------- Motion ---------- */
/* Nothing moves for visitors who ask for less motion: the marquee stops
   where it is and the knock types itself out in one go. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  body{font-size:18px}
  .wrap{padding:0 64px}
  .band{padding:128px 0}
  .hero{padding:56px 0 120px}
  .nav{height:72px}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}
  .split--flip .visual{order:-1}
  .display{font-size:112px}
  .h2{font-size:76px}
  .lead{font-size:20px}
  .marquee__row{overflow:hidden}
  .pcard{width:270px}
      .phone{width:340px}
  .screen{height:660px}
  .vcard{width:330px}
  .seal{width:120px;height:120px;right:-34px}
  .ring{width:440px;height:440px}
  .promises{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .promise{flex-direction:column;align-items:flex-start;padding:32px}
  .promise svg{width:120px;height:120px}
  .closing{padding-top:200px}
  .chai{width:220px}
  .foot-grid{grid-template-columns:auto 1fr auto;align-items:center;gap:48px}
  .foot-links{justify-content:center}
  .gp img{width:210px;margin:-12px}
  .gp--lg img{width:290px;margin:-17px}
}

/* Photo cards */
.pcard__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Inner pages (privacy, terms, safety, …) ----------
   The page shell is shared with the homepage: same nav, same footer, same
   tokens. These rules style the legal copy, including the class names the
   old pages already use (.doc-content, .shell, .card), so their markup
   needs no rewriting. */
/* Sticky, translucent, with a hairline that separates it from whatever
   scrolls underneath. */
.page-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--border)}
@supports not (backdrop-filter:blur(1px)){.page-head{background:var(--white)}}
.doc{padding:56px 0 88px}
.doc__inner{max-width:760px}
.doc h1{color:var(--ink);margin:0 0 8px;font-weight:800;font-size:clamp(34px,9vw,44px);line-height:1.05;letter-spacing:-.035em}
.doc .updated{margin:0 0 40px;font-size:14px;color:var(--muted)}
.doc h2{color:var(--ink);margin:40px 0 12px;font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.doc h3{color:var(--ink);margin:28px 0 8px;font-weight:700;font-size:18px;line-height:1.3}
.doc p{margin:0 0 16px;font-size:17px;line-height:1.7;color:#3D3A3D}
.doc ul,.doc ol{margin:0 0 20px;padding-left:22px}
.doc li{margin:0 0 10px;font-size:17px;line-height:1.7;color:#3D3A3D}
.doc strong{font-weight:700;color:var(--ink)}
.doc a{color:var(--pink);text-underline-offset:3px}
.doc a:hover{color:var(--ink)}
.doc hr{margin:40px 0;border:0;border-top:1px solid var(--border)}
.doc table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.doc th,.doc td{padding:12px 14px;border:1px solid var(--border);text-align:left;vertical-align:top}
.doc th{background:var(--blush);font-weight:700}
/* Old wrappers carried over from the previous design */
.doc .doc-content,.doc .shell,.doc .card{max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none}
.doc section{margin:0 0 8px}
@media (min-width:900px){
  .doc{padding:80px 0 120px}
  .doc p,.doc li{font-size:18px}
}