/* RentDonkey website styles (Grape Soda brand).
   The home page keeps most of its layout in the HTML itself (style="..." on each element), exactly as it was
   designed. This file holds what every page shares: the fonts, the brand colours as named "tokens" (variables
   like --rd-grape), the header menu on phones, the open/close cards, the contact form and the policy pages.
   Colours and fonts come from the brand kit (colors-and-fonts/brand-tokens.css). */

/* ---- Fonts: served from this site (fonts/), so no third party sees who visits. Both are free (SIL OFL). */
@font-face{font-family:"Fredoka";src:url("/fonts/Fredoka.woff2") format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("/fonts/NunitoSans.woff2") format("woff2");font-weight:400 800;font-display:swap}

:root{
  --rd-lilac-white:#F7F2FF; /* main background */
  --rd-ink:#2A1846;         /* text, outlines, "Rent" */
  --rd-grape:#6A3DF0;       /* "Donkey", headlines, links */
  --rd-tangerine:#FF7A3D;   /* the door, highlights. Never text on a light background */
  --rd-lilac:#9C84D8;       /* the donkey's coat */
  --rd-lilac-mist:#E9DDFF;  /* cards, panels */
  --rd-app-purple:#7B4DFF;  /* buttons, checks */
  --rd-body-text:#4B3A6B;   /* paragraphs */
  --rd-soft-line:#B9A3F0;   /* dashed and light outlines */
  --rd-font-display:"Fredoka","Nunito Sans",system-ui,sans-serif;
  --rd-font-body:"Nunito Sans",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--rd-lilac-white);color:var(--rd-ink);font:400 17px/1.6 var(--rd-font-body);-webkit-font-smoothing:antialiased}
a{color:var(--rd-ink)} a:hover{color:var(--rd-grape)}
:focus-visible{outline:3px solid var(--rd-soft-line);outline-offset:3px;border-radius:6px}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;padding:10px 16px;border-radius:999px;background:var(--rd-ink);color:#fff;font-weight:700}
.skip:focus{left:16px}

/* ---- Header menu. On a phone the section links fold away behind a "Menu" button (site.js). Without
   JavaScript they simply stay visible. */
.rd-menu-btn{display:none}
@media (max-width:860px){
  .js .rd-menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:2px solid var(--rd-ink);border-radius:999px;background:#fff;color:var(--rd-ink);font:700 16px var(--rd-font-body);cursor:pointer}
  .js .rd-nav{display:none!important;width:100%;flex-direction:column;align-items:stretch!important;gap:2px!important;padding-bottom:8px}
  .js .rd-head.open .rd-nav{display:flex!important}
  .js .rd-nav a{justify-content:flex-start}
  .js .rd-nav .rd-signin{margin:8px 0 0!important;justify-content:center!important}
}

/* ---- Feature cards and FAQ: native open/close (<details>), no JavaScript needed. */
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
.feat{transition:transform .15s ease,box-shadow .15s ease}
.feat:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--rd-ink)}
.feat[open]{box-shadow:6px 6px 0 var(--rd-app-purple)}
.feat summary:focus-visible,.faq summary:focus-visible{outline:3px solid var(--rd-soft-line);outline-offset:4px;border-radius:12px}
.feat .chev,.faq .plus{transition:transform .15s ease}
.feat[open] .chev{transform:rotate(180deg)}
.feat .more-open{display:none}.feat[open] .more-open{display:inline}.feat[open] .more-closed{display:none}
.faq[open] .plus{transform:rotate(45deg)}

/* ---- Contact form */
.rd-field input,.rd-field select,.rd-field textarea{font:inherit;font-size:16px;font-weight:400;color:var(--rd-ink);background:#fff;border:2px solid var(--rd-ink);border-radius:12px;padding:11px 14px;min-height:48px;width:100%}
.rd-field input:focus,.rd-field select:focus,.rd-field textarea:focus{outline:3px solid var(--rd-soft-line);outline-offset:2px}
.rd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* a trap field for spam bots; people never see it */
.rd-status{grid-column:1/-1;margin:0;padding:12px 16px;border-radius:12px;font-weight:700}
.rd-status:empty{display:none}
.rd-status.ok{background:var(--rd-lilac-mist);color:var(--rd-ink)}
.rd-status.err{background:#FFE4D6;color:var(--rd-ink)}
button[disabled]{opacity:.6;cursor:progress}

/* ---- Screenshots in the "A look inside" frames */
.shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}

/* ---- Policy pages (privacy, terms) and the 404 page */
.doc{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(16px,4vw,40px) clamp(56px,7vw,88px)}
.doc h1{margin:0 0 6px;font:600 clamp(2.2rem,4vw,3rem)/1.1 var(--rd-font-display);letter-spacing:-.5px}
.doc h2{margin:36px 0 10px;font:600 1.6rem/1.2 var(--rd-font-display)}
.doc h3{margin:24px 0 8px;font:600 1.2rem/1.3 var(--rd-font-display)}
.doc p,.doc li{color:var(--rd-body-text)}
.doc b,.doc strong{color:var(--rd-ink)}
.doc a{color:var(--rd-grape);font-weight:700}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.doc .updated{margin:0 0 24px;font-weight:700;color:var(--rd-grape)}
.doc .note{padding:16px 20px;border-radius:16px;background:var(--rd-lilac-mist);color:var(--rd-ink)}