/* ============================================================
   RENTJURY — style.css
   Palette:  ink #10233D   paper #FAF6EC   line #EDE6D6
             danfo #FFC93C  fair #1F7A4D   watch #C97A1F   over #C4432E
   Type:     display  Fraunces      body  Work Sans      mono  IBM Plex Mono
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:        #10233D;
  --ink-soft:   #2B3E58;
  --paper:      #FAF6EC;
  --paper-alt:  #F1EAD8;
  --line:       #DED2B0;
  --muted:      #6B6558;
  --danfo:      #FFC93C;
  --danfo-ink:  #4A3800;
  --fair:       #1F7A4D;
  --fair-bg:    #E4F1E9;
  --watch:      #B9770E;
  --watch-bg:   #FBEBD2;
  --over:       #C4432E;
  --over-bg:    #FBE4DF;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-card: 0 10px 30px -14px rgba(16,35,61,.28);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme="dark"]{
  --ink:        #F3ECDA;
  --ink-soft:   #D9CFB4;
  --paper:      #10192B;
  --paper-alt:  #16223A;
  --line:       #2A3A56;
  --muted:      #9AA6BE;
  --danfo:      #FFC93C;
  --danfo-ink:  #10192B;
  --fair-bg:    #123227;
  --watch-bg:   #3A2A0F;
  --over-bg:    #3A1D18;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.display{
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0;
}

.mono{ font-family: var(--font-mono); }

a{ color: inherit; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: var(--danfo);
  display:inline-block;
}

.container-kw{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 576px){
  .container-kw{ padding: 0 1.1rem; }
}

/* ---------------- Navbar ---------------- */
.kw-nav{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.kw-nav .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 0;
}
.kw-logo{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-display);
  font-weight:700; font-size:1.35rem;
  text-decoration:none; color: var(--ink);
}
.kw-logo .mark{
  width: 34px; height:34px; border-radius: 50%;
  background: var(--ink); color: var(--danfo);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size: .95rem; font-weight:700;
  border: 2px solid var(--danfo);
}
.kw-links{
  display:flex; align-items:center; gap: 2rem;
  list-style:none; margin:0; padding:0;
}
.kw-links a{
  text-decoration:none; font-weight:600; font-size: .95rem;
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.kw-links a.active, .kw-links a:hover{
  color: var(--ink); border-color: var(--danfo);
}
.theme-btn{
  font-family: var(--font-mono); font-size:.8rem; font-weight:600;
  background: var(--paper-alt); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1rem; cursor:pointer;
  transition: transform .15s ease;
}
.theme-btn:hover{ transform: translateY(-1px); }
.nav-toggle{
  display:none; background:none; border:none; font-size:1.6rem; color:var(--ink); cursor:pointer;
}
@media (max-width: 860px){
  .kw-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap: 1rem;
    background: var(--paper); border-bottom:1px solid var(--line);
    padding: 1.2rem 1.5rem 1.6rem;
    display:none;
  }
  .kw-links.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ---------------- Buttons ---------------- */
.btn-kw{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family: var(--font-body); font-weight:600; font-size: .95rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  border: 2px solid var(--ink); cursor:pointer;
  text-decoration:none; transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn-kw--solid{ background: var(--ink); color: var(--paper); }
.btn-kw--solid:hover{ transform: translateY(-2px); background: var(--ink-soft); color:var(--paper); }
.btn-kw--outline{ background: transparent; color: var(--ink); }
.btn-kw--outline:hover{ transform: translateY(-2px); background: var(--ink); color: var(--paper); }
.btn-kw--accent{ background: var(--danfo); border-color: var(--danfo); color: var(--danfo-ink); }
.btn-kw--accent:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn-kw--block{ width:100%; }
.btn-kw:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------------- Hero ---------------- */
.hero{
  padding: 4.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-120px; right:-120px;
  width: 420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, var(--danfo) 0%, transparent 70%);
  opacity:.35; pointer-events:none;
}
.hero .grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items:center;
}
@media (max-width: 940px){
  .hero .grid{ grid-template-columns: 1fr; }
}
.hero h1{
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.hero h1 em{
  font-style: normal;
  color: var(--over);
  position: relative;
}
.hero p.lead{
  font-size: 1.15rem; color: var(--muted); max-width: 46ch; margin-bottom: 1.8rem;
}
.hero .cta-row{ display:flex; gap:1rem; flex-wrap:wrap; }

/* Quick check card in hero */
.quick-check{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
}
.quick-check h3{ font-size:1.05rem; margin-bottom: 1.1rem; font-family: var(--font-body); font-weight:700; }
.field{ margin-bottom: 1rem; }
.field label{
  display:block; font-family: var(--font-mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; color: var(--muted); margin-bottom:.4rem;
}
.field select, .field input{
  width:100%; padding:.75rem .9rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--paper);
  color: var(--ink); font-family: var(--font-body); font-size: .95rem;
}
.field select:focus, .field input:focus{
  outline: none; border-color: var(--danfo); box-shadow: 0 0 0 3px rgba(255,201,60,.35);
}

/* ---------------- Stamp component (signature element) ---------------- */
.stamp-slot{
  min-height: 210px; display:flex; align-items:center; justify-content:center;
  margin-top: 1.2rem;
}
.stamp-slot .placeholder{
  font-family: var(--font-mono); font-size:.85rem; color: var(--muted); text-align:center;
}
.stamp{
  --sc: var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem;
  width: 190px; height: 190px; border-radius:50%;
  border: 4px solid var(--sc); color: var(--sc);
  transform: rotate(-9deg) scale(.4); opacity:0;
  animation: stampDown .5s cubic-bezier(.2,1.4,.4,1) forwards;
  position: relative;
  text-align:center;
}
.stamp::before{
  content:""; position:absolute; inset:8px; border:1.5px dashed var(--sc); border-radius:50%; opacity:.6;
}
.stamp--fair{ --sc: var(--fair); }
.stamp--watch{ --sc: var(--watch); }
.stamp--over{ --sc: var(--over); }
.stamp__label{
  font-family: var(--font-display); font-weight:900; font-size:1.18rem; line-height:1.1;
  text-transform: uppercase; padding: 0 .8rem;
}
.stamp__pct{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.03em; }
@keyframes stampDown{
  0%{ transform: rotate(-16deg) scale(.35); opacity:0; }
  70%{ transform: rotate(-7deg) scale(1.08); opacity:1; }
  100%{ transform: rotate(-8deg) scale(1); opacity:1; }
}

/* ---------------- Stats strip ---------------- */
.stats-strip{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 2.2rem 0;
}
.stats-strip .grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; text-align:center;
}
@media (max-width: 760px){ .stats-strip .grid{ grid-template-columns: repeat(2,1fr); } }
.stat b{
  display:block; font-family: var(--font-display); font-size: 2.1rem; font-weight:700;
}
.stat span{ font-family: var(--font-mono); font-size:.72rem; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; }

/* ---------------- Receipt list (how it works) ---------------- */
.receipt{
  max-width: 640px; margin: 0 auto;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2rem 2.2rem;
  font-family: var(--font-mono);
}
.receipt .r-row{
  display:flex; justify-content:space-between; gap: 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px dashed var(--line);
}
.receipt .r-row:last-child{ border-bottom:none; }
.receipt .r-tag{ color: var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; padding-top:.2rem;}
.receipt .r-body h3{ font-family: var(--font-body); font-weight:700; font-size:1.02rem; margin-bottom:.35rem; }
.receipt .r-body p{ font-family: var(--font-body); color: var(--muted); font-size:.92rem; margin:0; }

/* ---------------- Section basics ---------------- */
.section{ padding: 5rem 0; }
.section--alt{ background: var(--paper-alt); }
.section-head{ text-align:center; max-width: 640px; margin: 0 auto 3rem; }
.section-head h2{ font-size: clamp(1.7rem,3vw,2.3rem); margin: .7rem 0 .8rem; }
.section-head p{ color: var(--muted); font-size: 1.02rem; }

[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------------- Cards ---------------- */
.card-kw{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.7rem; box-shadow: var(--shadow-card);
}

/* Red flags */
.flag-list{ list-style:none; margin:0; padding:0; display:grid; gap: .75rem; }
.flag-item{
  display:flex; align-items:flex-start; gap:.8rem;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1rem; cursor:pointer; transition: border-color .2s ease, background .2s ease;
}
.flag-item:hover{ border-color: var(--danfo); }
.flag-item input{ margin-top:.2rem; accent-color: var(--over); }
.flag-item span{ font-size:.92rem; }
.flag-item.checked{ background: var(--over-bg); border-color: var(--over); }
.flag-meter{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family: var(--font-mono); font-size:.85rem; margin-top:1rem;
}
.flag-meter .bar{ flex:1; height:8px; background: var(--line); border-radius:99px; overflow:hidden; }
.flag-meter .bar > i{ display:block; height:100%; width:0%; background: var(--over); transition: width .3s ease; }

/* Testimonials */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
@media (max-width: 860px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.6rem; position:relative;
}
.testi-card p.q{ font-family: var(--font-display); font-size: 1.08rem; line-height:1.4; margin-bottom: 1.2rem; }
.testi-card .who{ font-family: var(--font-mono); font-size:.78rem; color: var(--muted); }
.testi-card .who b{ color: var(--ink); font-weight:600; }

/* CTA banner */
.cta-banner{
  background: var(--ink); color: var(--paper); border-radius: var(--radius-lg);
  padding: 3.2rem 2.5rem; text-align:center;
}
.cta-banner h2{ color: var(--paper); font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom:.8rem; }
.cta-banner p{ color: #C9C2AC; margin-bottom: 1.6rem; }
.cta-banner .cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta-banner .btn-kw--outline{ border-color: var(--paper); color: var(--paper); }
.cta-banner .btn-kw--outline:hover{ background: var(--paper); color: var(--ink); }

/* ---------------- Footer ---------------- */
.kw-footer{
  border-top: 1px solid var(--line); padding: 2.6rem 0; margin-top: 2rem;
}
.kw-footer .inner{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.88rem; color: var(--muted);
}

/* ---------------- Toasts ---------------- */
.kw-toast-container{
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  display:flex; flex-direction:column; gap:.6rem;
}
.kw-toast{
  background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size:.85rem;
  padding: .85rem 1.2rem; border-radius: var(--radius-sm);
  border-left: 4px solid var(--danfo);
  opacity:0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
  box-shadow: var(--shadow-card);
}
.kw-toast.show{ opacity:1; transform:none; }

/* ============================================================
   Tool page (check-price.html)
============================================================ */
.tool-layout{
  display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items:start;
}
@media (max-width: 940px){ .tool-layout{ grid-template-columns:1fr; } }

.result-box{ min-height: 100%; }
.result-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 3rem 1.5rem; color: var(--muted);
  border: 1.5px dashed var(--line); border-radius: var(--radius-md); height:100%;
}

.compare-bar{
  margin-top: .5rem;
}
.compare-bar .track{
  position:relative; height: 34px; border-radius:99px; background: var(--paper-alt);
  border: 1px solid var(--line); overflow: visible; margin: 1.6rem 0 .4rem;
}
.compare-bar .range{
  position:absolute; top:0; bottom:0; background: linear-gradient(90deg, var(--fair), var(--danfo));
  border-radius:99px; opacity:.55;
}
.compare-bar .marker{
  position:absolute; top:-9px; width: 3px; height: 52px; background: var(--ink);
}
.compare-bar .marker::after{
  content: attr(data-label);
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  font-family: var(--font-mono); font-size:.7rem; white-space:nowrap; color: var(--ink); font-weight:600;
}
.compare-bar .scale-labels{
  display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:.72rem; color: var(--muted);
}

.fee-result{ margin-top: 1rem; }
.fee-flag{
  display:flex; gap:.6rem; align-items:flex-start;
  background: var(--over-bg); border-left:3px solid var(--over); border-radius: 4px;
  padding: .7rem .9rem; font-size:.88rem; margin-bottom:.6rem;
}
.fee-ok{
  background: var(--fair-bg); border-left:3px solid var(--fair); border-radius:4px;
  padding: .7rem .9rem; font-size:.88rem;
}

table.area-compare{
  width:100%; border-collapse: collapse; font-size:.9rem;
}
table.area-compare th, table.area-compare td{
  padding: .65rem .5rem; border-bottom: 1px solid var(--line); text-align:left;
}
table.area-compare th{
  font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted);
}
table.area-compare tr.current-row{ background: var(--paper-alt); font-weight:600; }
table.area-compare td.num{ font-family: var(--font-mono); }

/* ============================================================
   Community page (community.html)
============================================================ */
.filters-bar{
  display:flex; gap: 1rem; flex-wrap:wrap; align-items:flex-end; margin-bottom: 2rem;
}
.filters-bar .field{ margin-bottom:0; min-width: 170px; flex:1; }

.report-list{ display:grid; gap: 1rem; }
.report-card{
  display:grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items:center;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  animation: fadeSlide .4s ease;
}
@media (max-width: 700px){
  .report-card{ grid-template-columns: 1fr; text-align:left; }
}
@keyframes fadeSlide{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.report-card .badge-verdict{
  font-family: var(--font-mono); font-size:.68rem; font-weight:700; text-transform:uppercase;
  padding:.35rem .6rem; border-radius: 999px; letter-spacing:.04em; white-space:nowrap;
}
.badge-verdict.fair{ background: var(--fair-bg); color: var(--fair); }
.badge-verdict.watch{ background: var(--watch-bg); color: var(--watch); }
.badge-verdict.over{ background: var(--over-bg); color: var(--over); }
.report-card h4{ font-family: var(--font-body); font-weight:700; font-size:1rem; margin:0 0 .2rem; }
.report-card .meta{ font-family: var(--font-mono); font-size:.76rem; color: var(--muted); }
.report-card .note{ font-size:.88rem; color: var(--ink-soft); margin-top:.35rem; }
.report-card .amount{ font-family: var(--font-mono); font-weight:600; font-size:1.05rem; text-align:right; white-space:nowrap; }

.leaderboard{ display:grid; gap: .6rem; }
.lb-row{
  display:grid; grid-template-columns: 1.2rem 1fr auto; gap: .8rem; align-items:center;
  font-size: .92rem;
}
.lb-row .rank{ font-family: var(--font-mono); color: var(--muted); }
.lb-row .track{ height:8px; background: var(--paper-alt); border-radius:99px; overflow:hidden; }
.lb-row .track > i{ display:block; height:100%; background: var(--danfo); }
.lb-row .val{ font-family: var(--font-mono); font-size:.82rem; white-space:nowrap; }

/* Accordion (FAQ) overrides */
.accordion-kw .accordion-item{
  background: transparent; border:1px solid var(--line); border-radius: var(--radius-sm) !important;
  margin-bottom: .7rem; overflow:hidden;
}
.accordion-kw .accordion-button{
  font-family: var(--font-body); font-weight:600; background: var(--paper);
  color: var(--ink); box-shadow:none;
}
.accordion-kw .accordion-button:not(.collapsed){
  background: var(--paper-alt); color: var(--ink);
}
.accordion-kw .accordion-button::after{ filter: none; }
.accordion-kw .accordion-body{ font-size:.92rem; color: var(--muted); background: var(--paper); }

/* Page header (tool/community) */
.page-head{ padding: 3.2rem 0 2.4rem; text-align:center; }
.page-head h1{ font-size: clamp(2rem,3.6vw,2.7rem); margin: .6rem 0 .6rem; }
.page-head p{ color: var(--muted); max-width: 560px; margin: 0 auto; }