/* ============================================================
   KIWA — "From keys to payouts": rental management
   An owner statement drawn in HTML (invented data) beside the two
   service lists. next-rentals.js fills the statement in while it is
   on screen; without motion it is complete as drawn.
   Channel colours use the site palette: red = Airbnb, blue =
   Booking.com, stone = costs. No platform branding.
   ============================================================ */

.rnt{padding:clamp(100px,16vh,160px) 0 clamp(80px,12vh,130px);border-top:1px solid var(--hair-l)}
.rnt-head{margin-bottom:clamp(30px,6vh,56px)}
.rnt-h{font:900 clamp(38px,5vw,72px)/.92 var(--sans);font-stretch:125%;letter-spacing:-.03em;text-transform:uppercase;max-width:14ch}
.rnt-h em{display:block;font-style:italic;font-weight:300;font-stretch:100%;text-transform:none;font-size:.5em;letter-spacing:-.02em;color:var(--red);margin-top:.25em}
.rnt-note{margin-top:20px;max-width:56ch;font-size:clamp(15px,1.2vw,18px);color:var(--mut-l)}
.rnt-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.rnt-screen{margin:0;position:sticky;top:calc(var(--nav-h) + 24px)}
.rnt-fine{margin-top:12px;font:400 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-l)}
.rnt-cols{display:grid;gap:clamp(32px,6vh,56px)}
.rnt-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;padding-bottom:14px;border-bottom:2px solid var(--ink);font:800 clamp(26px,2.6vw,38px)/1 var(--sans);font-stretch:112%;letter-spacing:-.025em;text-transform:uppercase}
.rnt-t span{font:400 10.5px/1.4 var(--mono);letter-spacing:.16em;color:var(--red)}
.rnt-list{list-style:none;counter-reset:rl}
.rnt-list li{counter-increment:rl;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair-l);font-size:clamp(15px,1.15vw,17px);line-height:1.45}
.rnt-list li::before{content:"0" counter(rl);font:500 10.5px/1.9 var(--mono);letter-spacing:.1em;color:var(--red)}
.rnt-cta{display:flex}
@media (max-width:900px){
  .rnt-grid{grid-template-columns:1fr}
  .rnt-screen{position:static}
}
@media (max-width:720px){.rnt{padding:13vh 0}}

/* ---------- the owner statement ---------- */
.st{background:#FFFDF8;color:var(--ink);border:1px solid var(--hair-l);border-radius:10px;padding:clamp(16px,2vw,26px);box-shadow:0 30px 60px -30px rgba(21,19,15,.35),0 8px 18px -12px rgba(21,19,15,.2)}
.st-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;padding-bottom:14px;border-bottom:1px solid var(--hair-l)}
.st-top b{font:900 clamp(16px,1.5vw,20px)/1 var(--sans);font-stretch:125%;letter-spacing:-.01em;color:var(--blue)}
.st-top span{font:400 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l)}
.st-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,2vw,28px);padding-top:16px}
.st-week,.st-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.st-week i{font:500 9px/1 var(--mono);font-style:normal;text-align:center;color:var(--mut-l);padding-bottom:6px}
.st-cal i{font:600 10.5px/24px var(--sans);font-style:normal;text-align:center;border-radius:4px;color:#4A4238;background:rgba(21,19,15,.045)}
.st-cal i:empty{background:none}
.st-cal i[data-ch="a"]{background:var(--red);color:var(--paper)}
.st-cal i[data-ch="b"]{background:var(--blue);color:var(--paper)}
.st-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font:400 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut-l)}
.st-legend span{display:inline-flex;align-items:center;gap:6px}
.ch{display:inline-block;flex:none;width:8px;height:8px;border-radius:2px}
.ch.a{background:var(--red)}
.ch.b{background:var(--blue)}
.ch.c{background:var(--stone-2)}
.st-rows{list-style:none}
.st-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--hair-l);font:500 12.5px/1.3 var(--sans)}
.st-row b{font:700 12.5px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.st-cost b{color:var(--mut-l)}
.st-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px;font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.st-total b{font:900 clamp(22px,2.2vw,30px)/1 var(--sans);font-stretch:118%;letter-spacing:-.02em;text-transform:none;font-variant-numeric:tabular-nums}
.st-paid{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--blue);color:var(--paper);font:700 11.5px/1.3 var(--sans)}
@media (max-width:560px){
  .st-body{grid-template-columns:1fr}
  .st-cal i{line-height:28px}
}

/* ---------- the same apartment, small, as the disciplines' example card ---------- */
.stm{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;padding:14px 16px 40px;font-family:var(--sans)}
.stm-top{display:flex;justify-content:space-between;align-items:baseline}
.stm-top b{font:900 18px/1 var(--sans);font-stretch:125%;color:var(--blue)}
.stm-top span{font:400 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l)}
.stm-strip{flex:1;min-height:26px;max-height:72px;display:grid;grid-template-columns:repeat(31,1fr);gap:2px}
.stm-strip i{border-radius:2px;background:rgba(21,19,15,.07)}
.stm-strip i[data-ch="a"]{background:var(--red)}
.stm-strip i[data-ch="b"]{background:var(--blue)}
.stm-n{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font:500 9.5px/1.3 var(--mono);letter-spacing:.06em;color:var(--mut-l)}
.stm-n .ch{width:7px;height:7px;margin:0 4px 0 6px}
.stm-pay{align-self:flex-start;background:var(--blue);color:var(--paper);font:700 11px var(--sans);padding:8px 11px;border-radius:8px}