/* Roomies cards page — first-party, CSP-safe (no inline styles). Teal DoeAsk theme. */
:root { --rm-bg:#f3f7f6; --rm-panel:#ffffff; --rm-ink:#0d1a1c; --rm-ink2:#45605d; --rm-muted:#6b827f; --rm-line:rgba(12,30,30,.1); --rm-teal:#10a98b; --rm-teal-d:#0c8c72; --rm-soft:#e4f3ef; --rm-warm:#fff4e6; --rm-amber:#b7791f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--rm-bg); color:var(--rm-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.rm-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--rm-line); }
.rm-brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-size:19px; font-weight:800; color:var(--rm-ink); }
.rm-brand b { color:#ee6c0d; }
.rm-open { text-decoration:none; background:var(--rm-teal); color:#fff; font-weight:800; font-size:14px; padding:9px 16px; border-radius:999px; }
.rm-wrap { max-width:1040px; margin:0 auto; padding:0 18px 60px; }

/* hero */
.rm-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:34px 0 14px; }
.rm-hero__badge { display:inline-block; background:var(--rm-soft); color:var(--rm-teal-d); font-weight:800; font-size:12.5px; letter-spacing:.02em; padding:6px 12px; border-radius:999px; }
.rm-hero h1 { font-size:40px; line-height:1.07; margin:14px 0 10px; letter-spacing:-.02em; }
.rm-hero p { font-size:17px; color:var(--rm-ink2); line-height:1.5; margin:0 0 18px; max-width:40ch; }
.rm-cta { display:inline-flex; align-items:center; gap:8px; background:var(--rm-teal); color:#fff; text-decoration:none; font-weight:800; font-size:16px; padding:13px 22px; border-radius:14px; }
.rm-cta.ghost { background:transparent; color:var(--rm-teal-d); border:1.5px solid var(--rm-teal); margin-left:8px; }
.rm-hero__note { font-size:13px; color:var(--rm-muted); margin-top:12px; }
.rm-hero__art { width:100%; height:auto; }
@media (max-width:760px){ .rm-hero{ grid-template-columns:1fr; text-align:center; padding-top:22px; } .rm-hero p{ margin-left:auto; margin-right:auto; } .rm-hero h1{ font-size:32px; } .rm-hero__art{ max-width:360px; margin:6px auto 0; } .rm-cta.ghost{ margin-left:0; margin-top:8px; } }

/* how it works */
.rm-sec { padding:30px 0 6px; }
.rm-sec h2 { font-size:25px; letter-spacing:-.01em; margin:0 0 4px; }
.rm-sec__sub { color:var(--rm-muted); margin:0 0 20px; font-size:15px; }
.rm-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:760px){ .rm-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .rm-steps{ grid-template-columns:1fr; } }
.rm-step { background:var(--rm-panel); border:1px solid var(--rm-line); border-radius:16px; padding:18px 16px; }
.rm-step__ic { width:52px; height:52px; display:block; margin-bottom:10px; }
.rm-step__n { font-size:12px; font-weight:800; color:var(--rm-teal); }
.rm-step h3 { font-size:16px; margin:3px 0 5px; }
.rm-step p { font-size:13.5px; color:var(--rm-ink2); line-height:1.45; margin:0; }

/* cards */
.rm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .rm-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .rm-grid{ grid-template-columns:1fr; } }
.rm-card { display:block; text-decoration:none; color:inherit; background:var(--rm-panel); border:1px solid var(--rm-line); border-radius:16px; overflow:hidden; transition:transform .12s ease, box-shadow .12s ease; }
.rm-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(12,30,30,.09); }
.rm-card__img { position:relative; aspect-ratio:3/2; background:var(--rm-soft); }
.rm-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.rm-tag { position:absolute; top:10px; left:10px; font-size:11px; font-weight:800; color:#fff; background:rgba(13,26,28,.72); padding:3px 9px; border-radius:999px; }
.rm-tag.seek { background:var(--rm-amber); }
.rm-card__bd { padding:12px 13px 14px; }
.rm-card__rent { font-size:16px; font-weight:800; color:var(--rm-teal-d); }
.rm-card__rent span { font-size:12px; font-weight:600; color:var(--rm-muted); }
.rm-card__t { font-size:14.5px; font-weight:700; margin:3px 0 2px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rm-card__loc { font-size:12.5px; color:var(--rm-muted); }
.rm-card__meta { margin-top:7px; display:flex; flex-wrap:wrap; gap:5px; }
.rm-chip { font-size:11px; font-weight:600; color:var(--rm-ink2); background:var(--rm-soft); border-radius:999px; padding:3px 9px; }
.rm-empty { color:var(--rm-muted); padding:24px 0; }

/* safety + disclaimer */
.rm-safety { background:var(--rm-warm); border:1px solid #f0e2c8; border-radius:16px; padding:20px 20px 10px; margin-top:8px; }
.rm-safety h2 { font-size:19px; margin:0 0 10px; color:var(--rm-amber); }
.rm-safety ul { margin:0 0 10px; padding-left:20px; }
.rm-safety li { font-size:14px; color:#6b5a2e; line-height:1.5; margin-bottom:7px; }
.rm-disc { font-size:12.5px; color:var(--rm-muted); line-height:1.55; background:var(--rm-panel); border:1px solid var(--rm-line); border-radius:14px; padding:16px 18px; margin-top:18px; }
.rm-foot { text-align:center; color:var(--rm-muted); font-size:13px; padding:28px 18px; border-top:1px solid var(--rm-line); margin-top:30px; }
@media (prefers-color-scheme:dark){ :root{ --rm-bg:#0b1417; --rm-panel:#101c20; --rm-ink:#e8f1ef; --rm-ink2:#b7cbc8; --rm-muted:#7f9895; --rm-line:rgba(255,255,255,.09); --rm-soft:#15302b; --rm-warm:#2a2110; --rm-amber:#e3b25c; } body{ background:var(--rm-bg); } .rm-top{ background:rgba(16,28,32,.9); } .rm-safety{ border-color:#453716; } .rm-safety li{ color:#d8c79a; } }
.rm-demo{ position:absolute; top:10px; right:10px; font-size:11px; font-weight:800; color:#0d1a1c; background:rgba(255,255,255,.92); padding:3px 9px; border-radius:999px; }