/* ==========================================================================
   R KNL DEALS — stylesheet
   Aesthetic: precision instrument. Warm paper ground, deep pine green for
   money saved, burnt orange strictly for urgency. Every numeral is mono.
   ========================================================================== */

:root{
  --bg:        #F7F5F0;
  --bg-2:      #EFEBE2;
  --surface:   #FFFFFF;
  --ink:       #16181C;
  --ink-2:     #565C63;
  --ink-3:     #8A9098;
  --brand:     #0C5C46;
  --brand-dk:  #07412F;
  --brand-sf:  #E4EFE9;
  --down:      #0C7A5C;
  --up:        #C2410C;
  --line:      #E3DFD5;
  --line-2:    #CFC9BC;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "IBM Plex Sans", "Segoe UI", Helvetica, sans-serif;
  --mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --wrap: 1180px;
  --pad:  clamp(1.1rem, 4.5vw, 2.75rem);
  --ease: cubic-bezier(.22,1,.36,1);
  --sh:   0 1px 2px rgba(22,24,28,.05);
  --sh-2: 0 10px 34px -8px rgba(22,24,28,.16);
  --r:    12px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

.ico{ width:1em; height:1em; flex:none; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.num--down{ color:var(--down); }

.h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.6rem,4.2vw,2.35rem); line-height:1.12;
  letter-spacing:-.02em; margin:0;
}

/* --- utility bar --------------------------------------------------------- */
.util{ background:var(--brand-dk); color:rgba(255,255,255,.82); font-size:.76rem; }
.util__in{
  max-width:var(--wrap); margin:0 auto; padding:.5rem var(--pad);
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.util b{ color:#fff; font-weight:600; }
.util__sep{ opacity:.35; }
.util__sep--wide,.util__upd{ display:none; }
.dot{
  width:6px; height:6px; border-radius:50%; background:#5EE9B5; display:inline-block;
  margin-right:.3rem; animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 50%{ opacity:.35; } }

/* --- header -------------------------------------------------------------- */
.head{
  position:sticky; top:0; z-index:60;
  background:rgba(247,245,240,.88);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.head__in{
  max-width:var(--wrap); margin:0 auto; padding:.7rem var(--pad);
  display:flex; align-items:center; gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.55rem; margin-right:auto; }
.brand__mark{
  width:30px; height:30px; border-radius:8px; flex:none;
  background:var(--brand); color:#fff;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1.02rem;
}
.brand__txt{ display:flex; align-items:baseline; gap:.28rem; letter-spacing:-.02em; }
.brand__txt b{ font-weight:700; font-size:1.05rem; }
.brand__txt span{ font-family:var(--display); font-size:1.02rem; color:var(--ink-2); }
.brand--sm .brand__mark{ width:26px; height:26px; font-size:.9rem; }

.nav{ display:none; gap:1.6rem; font-size:.9rem; color:var(--ink-2); }
.nav a{ position:relative; padding:.2rem 0; transition:color .2s; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.7rem 1.15rem; border-radius:9px; border:1px solid transparent;
  font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), color .2s, border-color .2s, transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn--solid{ background:var(--brand); color:#fff; }
.btn--solid:hover{ background:var(--brand-dk); transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn--line{ border-color:var(--line-2); color:var(--ink); background:var(--surface); }
.btn--line:hover{ border-color:var(--ink); }
.btn--sm{ padding:.5rem .85rem; font-size:.82rem; }
.btn--lg{ padding:.88rem 1.5rem; font-size:.95rem; }

/* --- hero ---------------------------------------------------------------- */
.hero{ padding:clamp(2.25rem,7vw,4.5rem) 0 clamp(1.75rem,5vw,3rem); }
.hero__in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
  display:grid; gap:2.25rem;
}

.tagline{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin:0 0 1.1rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.tagline__b{
  background:var(--brand-sf); color:var(--brand); font-weight:600;
  padding:.22rem .5rem; border-radius:5px; letter-spacing:.05em;
}

.hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.35rem,8.5vw,4rem); line-height:1.03;
  letter-spacing:-.032em; margin:0 0 1.1rem;
}
.hl{ color:var(--brand); position:relative; white-space:nowrap; }
.hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.02em; height:.07em;
  background:var(--brand); opacity:.22; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  animation:sweep .9s .35s var(--ease) forwards;
}
@keyframes sweep{ to{ transform:scaleX(1); } }

.lede{ margin:0 0 1.85rem; color:var(--ink-2); font-size:1.02rem; max-width:44ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* stats panel */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.2rem; box-shadow:var(--sh);
  align-self:start;
}
.panel__h{
  margin:0 0 .9rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
.panel__rows{ display:flex; flex-direction:column; }
.panel__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.72rem 0; border-bottom:1px dashed var(--line);
  font-size:.88rem; color:var(--ink-2);
}
.panel__row:last-child{ border-bottom:0; }
.panel__row b{ font-size:1.18rem; font-weight:600; color:var(--ink); }
.panel__foot{
  margin:.9rem 0 0; padding-top:.85rem; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--ink-3);
}

/* --- trust strip --------------------------------------------------------- */
.trust{ border-block:1px solid var(--line); background:var(--bg-2); }
.trust__in{
  max-width:var(--wrap); margin:0 auto; padding:1.5rem var(--pad);
  list-style:none; display:grid; gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.trust li{ padding-left:.85rem; border-left:2px solid var(--brand); }
.trust b{ display:block; font-size:.9rem; margin-bottom:.15rem; }
.trust span{ font-size:.8rem; color:var(--ink-2); line-height:1.5; display:block; }

/* --- section head -------------------------------------------------------- */
.deals{ padding:clamp(2.5rem,7vw,4.25rem) 0; }
.deals__in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }

.sect-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.35rem;
}
.sect-sub{ margin:.35rem 0 0; color:var(--ink-2); font-size:.9rem; }

.sort{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-2); }
.sort select{
  font-family:var(--sans); font-size:.84rem; font-weight:500; color:var(--ink);
  padding:.5rem 2rem .5rem .75rem; border:1px solid var(--line-2);
  border-radius:8px; background:var(--surface); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23565C63' d='M2.5 4.5 6 8l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:12px;
}
.sort select:hover{ border-color:var(--ink-2); }

/* --- filter chips -------------------------------------------------------- */
.chips{
  display:flex; gap:.45rem; margin-bottom:1.5rem; padding-bottom:.3rem;
  overflow-x:auto; scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; padding:.45rem .9rem; border-radius:100px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  transition:all .2s var(--ease);
}
.chip:hover{ border-color:var(--ink-2); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }

/* --- grid + cards -------------------------------------------------------- */
.grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease),
             border-color .25s, box-shadow .3s var(--ease);
}
.card.in{ opacity:1; transform:none; }
.card:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); }

.card__media{
  position:relative; aspect-ratio:5/4; background:var(--bg-2);
  display:grid; place-items:center; overflow:hidden;
}
.card__media img{
  width:100%; height:100%; object-fit:contain; padding:1.1rem;
  transition:transform .45s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.045); }
.card__ph{
  width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:2.2rem; color:var(--line-2);
}

.badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:var(--down); color:#fff;
  font-family:var(--mono); font-weight:600; font-size:.75rem;
  padding:.24rem .48rem; border-radius:6px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.badge--hot{
  left:auto; right:.6rem; background:var(--up);
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}

.card__body{ padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.62rem; flex:1; }

.card__meta{
  display:flex; align-items:center; gap:.42rem;
  font-size:.7rem; color:var(--ink-3);
}
.card__store{
  font-weight:600; color:var(--ink-2); background:var(--bg-2);
  padding:.14rem .42rem; border-radius:4px; font-size:.68rem;
}

.card__title{
  margin:0; font-size:.92rem; font-weight:500; line-height:1.38;
  letter-spacing:-.008em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.card__prices{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-top:auto; }
.card__price{ font-family:var(--mono); font-weight:600; font-size:1.28rem; letter-spacing:-.04em; }
.card__mrp{
  font-family:var(--mono); font-size:.8rem; color:var(--ink-3);
  text-decoration:line-through; text-decoration-thickness:1px;
}
.card__save{
  font-family:var(--mono); font-size:.72rem; color:var(--down); font-weight:500;
}

/* condition attached to the price, e.g. "Price with Kotak EMI" */
.card__note{
  margin:0; font-size:.72rem; line-height:1.4; color:var(--ink-2);
  padding-left:.55rem; border-left:2px solid var(--line-2);
}

.card__code{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.42rem .6rem; border-radius:7px;
  border:1px dashed var(--line-2); background:var(--brand-sf);
  font-family:var(--mono); font-size:.72rem;
}
.card__code b{ color:var(--brand); font-weight:600; letter-spacing:.03em; }
.card__copy{
  border:0; background:transparent; cursor:pointer; padding:.12rem .2rem;
  color:var(--ink-2); font-family:var(--sans); font-size:.7rem; font-weight:600;
  transition:color .2s;
}
.card__copy:hover{ color:var(--brand); }
.card__copy.done{ color:var(--down); }

.card__go{
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.68rem; border-radius:8px;
  border:1px solid var(--brand); color:var(--brand); background:var(--surface);
  font-weight:600; font-size:.85rem;
  transition:background .2s var(--ease), color .2s, gap .2s var(--ease);
}
.card__go:hover{ background:var(--brand); color:#fff; gap:.55rem; }

.empty{ color:var(--ink-2); font-size:.9rem; padding:2.5rem 0; }

/* --- how we pick --------------------------------------------------------- */
.how{ background:var(--bg-2); border-block:1px solid var(--line); padding:clamp(2.5rem,7vw,4.25rem) 0; }
.how__in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.how .h2{ margin-bottom:1.9rem; }
.steps{
  list-style:none; margin:0; padding:0; display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
}
.steps li{ position:relative; padding-top:1.1rem; border-top:2px solid var(--brand); }
.steps__n{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  color:var(--brand); letter-spacing:.08em;
}
.steps h3{ margin:.45rem 0 .4rem; font-size:1.02rem; font-weight:600; letter-spacing:-.01em; }
.steps p{ margin:0; font-size:.88rem; color:var(--ink-2); line-height:1.6; }

/* --- join ---------------------------------------------------------------- */
.join{ padding:clamp(2.5rem,7vw,4.25rem) 0; }
.join__in{
  max-width:var(--wrap); margin:0 auto;
  background:var(--brand); color:#fff; border-radius:16px;
  padding:clamp(1.75rem,5.5vw,3rem);
  display:grid; gap:1.6rem; align-items:center;
  position:relative; overflow:hidden;
}
.join__in::after{
  content:""; position:absolute; right:-14%; top:-52%;
  width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(94,233,181,.20), transparent 68%);
  pointer-events:none;
}
.join__k{
  margin:0 0 .55rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.65);
}
.join__t{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.75rem,5.5vw,2.6rem); line-height:1.08;
  letter-spacing:-.025em; margin:0 0 .75rem;
}
.join__b{ margin:0; color:rgba(255,255,255,.82); font-size:.95rem; max-width:46ch; }
.join__btn{
  background:#fff; color:var(--brand); font-family:var(--mono);
  justify-self:start; position:relative; z-index:1;
}
.join__btn:hover{ background:#fff; color:var(--brand-dk); }

/* --- footer -------------------------------------------------------------- */
.foot{ border-top:1px solid var(--line); padding:2.25rem 0 2.75rem; }
.foot__in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.foot__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.foot__nav{ display:flex; gap:1.4rem; font-size:.86rem; color:var(--ink-2); }
.foot__nav a:hover{ color:var(--brand); }
.foot__disc{
  margin:0 0 1rem; max-width:78ch; font-size:.76rem; line-height:1.65; color:var(--ink-2);
  padding:.85rem 1rem; background:var(--bg-2); border-radius:8px; border:1px solid var(--line);
}
.foot__legal{ margin:0; font-size:.72rem; color:var(--ink-3); }

/* --- breakpoints --------------------------------------------------------- */
@media (min-width:700px){
  .util__sep--wide,.util__upd{ display:inline; }
  .util__in{ gap:.6rem; }
}
@media (min-width:900px){
  .nav{ display:flex; }
  .hero__in{ grid-template-columns:1.55fr 1fr; gap:3.25rem; align-items:center; }
  .join__in{ grid-template-columns:1.6fr auto; gap:2.5rem; }
  .join__btn{ justify-self:end; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .card{ opacity:1; transform:none; }
  .hl::after{ transform:scaleX(1); }
}