/* COLORIR Room Map — styles
   Brand rules: white base, graphite text, pastel = surfaces only, vibrant = small marks only,
   zero radius everywhere, spectral stripe on top, Poppins 900 caps display, Inter body,
   thick graphite frame with broken corners. */

@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --pastel-rosa: #F8AEB2; --pastel-laranja: #FFD583; --pastel-amarelo: #F8F291; --pastel-lima: #CCE087;
  --pastel-menta: #B2E1ED; --pastel-azul: #A9C5E7; --pastel-roxo: #BCA2CD;
  --vibr-rosa: #E95368; --vibr-laranja: #F17736; --vibr-amarelo: #EDD131; --vibr-lima: #A3CE53;
  --vibr-menta: #4AC0B9; --vibr-azul: #3DA5DB; --vibr-roxo: #D074AE;
  --ink: #333333;          /* max-contrast text */
  --graphite: #58595B;     /* frame, secondary text */
  --grey: #97999C;         /* decorative only, never text */
  --white: #FFFFFF;
  --display: 'Poppins', 'Arial Black', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --stripe: 14px;
  --ft: 6px;               /* frame stroke */
  --gutter: 16px;
  --stripe-bg: linear-gradient(90deg,
    var(--pastel-rosa) 0 14.285%, var(--pastel-laranja) 0 28.57%, var(--pastel-amarelo) 0 42.85%,
    var(--pastel-lima) 0 57.14%, var(--pastel-menta) 0 71.42%, var(--pastel-azul) 0 85.71%, var(--pastel-roxo) 0);
}
@media (min-width: 900px) { :root { --ft: 9px; --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; color: inherit; }
a { color: var(--ink); }
[hidden] { display: none !important; }
.rm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------------- header ---------------- */
.rm-stripe { height: var(--stripe); background: var(--stripe-bg); }
.rm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1280px; margin: 0 auto; padding: 12px var(--gutter);
}
.rm-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.rm-brand__mark { font-family: var(--display); font-weight: 900; font-size: 19px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.rm-brand__app { font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
@media (max-width: 480px) { .rm-brand { flex-direction: column; align-items: flex-start; gap: 4px; } .rm-brand__app { font-size: 10px; } }
.rm-lang { font-size: 14px; font-weight: 600; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
body[data-screen="question"] .rm-top { border-bottom: 2px solid var(--ink); }

/* ---------------- shared type ---------------- */
.rm-display {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  line-height: 0.95; letter-spacing: -0.02em; margin: 0; color: var(--ink);
}
.rm-h2 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 22px; line-height: 1; margin: 0 0 12px;
}

/* ---------------- buttons + fields ---------------- */
.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 22px; border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15;
  text-decoration: none; cursor: pointer; text-align: center; background: var(--white); color: var(--ink);
}
.rm-btn--primary { background: var(--ink); color: var(--white); }
.rm-btn--primary:hover { background: var(--graphite); border-color: var(--graphite); }
.rm-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.rm-btn--text { border-color: transparent; background: none; text-decoration: underline; text-underline-offset: 4px; padding-left: 8px; padding-right: 8px; }
.rm-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.rm-btn__price { font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; }
.rm-chev { font-size: 22px; line-height: 0; font-family: var(--body); font-weight: 400; }

.rm-field { margin-bottom: 14px; }
.rm-field__label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.rm-field__hint { font-size: 14px; color: var(--graphite); margin: 6px 0 0; line-height: 1.45; }
.rm-field__err { font-size: 14px; font-weight: 600; color: var(--ink); margin: 6px 0 0; min-height: 0; }
.rm-field__err:not(:empty)::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--vibr-rosa); margin-right: 8px; }
.rm-input {
  width: 100%; min-height: 54px; padding: 12px 14px; font-size: 17px; background: var(--white);
  border: 2px solid var(--graphite); color: var(--ink); appearance: none; -webkit-appearance: none;
}
.rm-input:hover { border-color: var(--ink); }
.rm-input:focus { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 2px; }
.rm-input[aria-invalid="true"] { border-color: var(--ink); border-width: 3px; }
.rm-input--inline { display: block; margin-top: 8px; font-size: 14px; min-height: 44px; }

.rm-check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 4px; }
.rm-check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0;
  border: 2px solid var(--ink); background: var(--white); cursor: pointer;
}
.rm-check input:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.rm-check label { font-size: 15px; line-height: 1.5; cursor: pointer; }

/* ---------------- signature frame ----------------
   Spectral stripe on top, coloured caps down each side, graphite sides,
   bottom edge broken asymmetrically. */
.rm-frame { position: relative; padding: var(--ft); background: var(--white); --cap: calc(var(--ft) * 5); }
.rm-frame::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    var(--stripe-bg) top left / 100% var(--ft) no-repeat,
    linear-gradient(var(--pastel-rosa), var(--pastel-rosa)) top left / var(--ft) var(--cap) no-repeat,
    linear-gradient(var(--pastel-roxo), var(--pastel-roxo)) top right / var(--ft) var(--cap) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) left bottom / var(--ft) calc(100% - var(--cap)) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) right bottom / var(--ft) calc(100% - var(--cap)) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) left bottom / 11% var(--ft) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) right bottom / 70% var(--ft) no-repeat;
}

/* frame on a pastel panel: vibrant stripe so the first/last colour doesn't vanish into the panel */
.rm-frame--vibr {
  --stripe-bg: linear-gradient(90deg,
    var(--vibr-rosa) 0 14.285%, var(--vibr-laranja) 0 28.57%, var(--vibr-amarelo) 0 42.85%,
    var(--vibr-lima) 0 57.14%, var(--vibr-menta) 0 71.42%, var(--vibr-azul) 0 85.71%, var(--vibr-roxo) 0);
}
.rm-frame--vibr::before {
  background:
    var(--stripe-bg) top left / 100% var(--ft) no-repeat,
    linear-gradient(var(--vibr-rosa), var(--vibr-rosa)) top left / var(--ft) var(--cap) no-repeat,
    linear-gradient(var(--vibr-roxo), var(--vibr-roxo)) top right / var(--ft) var(--cap) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) left bottom / var(--ft) calc(100% - var(--cap)) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) right bottom / var(--ft) calc(100% - var(--cap)) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) left bottom / 11% var(--ft) no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) right bottom / 70% var(--ft) no-repeat;
}

/* ---------------- intro ---------------- */
.rm-intro { display: grid; grid-template-columns: 1fr; }
.rm-intro__text { padding: 32px var(--gutter) 36px; max-width: 640px; }
.rm-intro__title { font-size: clamp(42px, 11.5vw, 92px); max-width: 11ch; }
.rm-intro__lead { font-size: 20px; line-height: 1.4; margin: 18px 0 28px; max-width: 30ch; font-weight: 500; }
.rm-intro__form { max-width: 440px; }
.rm-intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rm-intro__actions .rm-btn--primary { flex: 1 1 240px; }
.rm-intro__actions .rm-btn--ghost { flex: 1 1 240px; }
.rm-intro__meta { font-size: 14px; color: var(--graphite); margin: 12px 0 0; }
.rm-intro__story { margin: 36px 0 0; padding-top: 18px; border-top: 2px solid var(--ink); font-size: 15px; line-height: 1.55; max-width: 44ch; color: var(--ink); }
.rm-intro__story em { font-style: normal; font-weight: 700; }
.rm-intro__visual { background: var(--pastel-rosa); padding: 28px var(--gutter) 36px; display: grid; grid-template-columns: 1fr 120px; grid-template-areas: "fig fig" "cap plan"; gap: 18px 16px; align-items: center; }
.rm-intro__fig { grid-area: fig; margin: 0; }
.rm-intro__fig img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: center 30%; }
.rm-intro__caption { grid-area: cap; margin: 0; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; color: var(--ink); }
.rm-intro__visual .rm-plan { grid-area: plan; }
.rm-tag { position: absolute; left: calc(var(--ft) + 8px); bottom: calc(var(--ft) + 8px); background: var(--white); color: var(--ink); font-size: 11px; font-weight: 600; padding: 2px 6px; z-index: 3; letter-spacing: 0.02em; }

@media (min-width: 900px) {
  .rm-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: calc(100vh - var(--stripe) - 50px); }
  .rm-intro__text { padding: 72px 56px 64px var(--gutter); margin-left: auto; width: 100%; max-width: 700px; align-self: center; }
  .rm-intro__visual { padding: 56px 48px; align-content: center; grid-template-columns: 1fr 150px; }
  .rm-intro__fig img { aspect-ratio: 4 / 4.4; }
}

/* ---------------- floor plan ---------------- */
.rm-plan {
  position: relative; border: 6px solid var(--graphite); border-bottom: 0; aspect-ratio: 1 / 0.86; background: var(--white);
}
.rm-plan::after { /* bottom wall with a door gap */
  content: ''; position: absolute; left: -6px; right: -6px; bottom: -6px; height: 6px;
  background: linear-gradient(90deg, var(--graphite) 0 9%, transparent 9% 33%, var(--graphite) 33%);
}
.rm-plan__door { position: absolute; bottom: -6px; left: 9%; width: 24%; height: 2px; }
.rm-plan__grid { position: absolute; inset: 0 0 6px; display: grid; gap: 4px; padding: 4px; }
.rm-plan__zone { display: flex; flex-direction: column; justify-content: space-between; padding: 10px; min-width: 0; min-height: 0; overflow: hidden; }
.rm-plan__name { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.rm-plan--preview { border-width: 4px; }
.rm-plan--preview::after { left: -4px; right: -4px; bottom: -4px; height: 4px; }
.rm-plan--preview .rm-plan__grid { gap: 3px; padding: 3px; inset: 0 0 4px; }
.rm-plan--preview .rm-plan__zone { padding: 5px; }
.rm-plan--preview .rm-plan__name { font-size: 8px; letter-spacing: 0.02em; }
@media (min-width: 900px) { .rm-plan--preview .rm-plan__name { font-size: 9.5px; } }

/* dose squares */
.rm-dose { display: inline-flex; align-items: center; gap: 8px; }
.rm-dose__sq { display: inline-flex; gap: 3px; }
.rm-dose__sq i { width: 11px; height: 11px; border: 2px solid var(--ink); display: block; }
.rm-dose__sq i.on { background: var(--ink); }
.rm-dose__label { font-size: 13px; font-weight: 600; line-height: 1.2; }
.rm-dose--compact .rm-dose__sq i { width: 12px; height: 12px; }

/* ---------------- question screen ---------------- */
.rm-q { --dom: var(--pastel-rosa); }
.rm-q__panel { background: var(--dom); padding: 18px var(--gutter) 26px; }
.rm-progress { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 6px; }
.rm-progress i { display: block; background: rgba(51, 51, 51, 0.16); }
.rm-progress i.done { background: var(--ink); }
.rm-progress i.now { background: var(--ink); }
.rm-q__count { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin: 14px 0 10px; }
.rm-q__title {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98;
  font-size: clamp(28px, 8vw, 58px); margin: 0; overflow-wrap: break-word; hyphens: manual;
}
.rm-q__help { margin: 12px 0 0; font-size: 16px; line-height: 1.5; max-width: 44ch; }
.rm-q__body { padding: 20px var(--gutter) 112px; max-width: 760px; }
.rm-opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rm-opts--2 { grid-template-columns: 1fr 1fr; }

.rm-opt { position: relative; display: block; cursor: pointer; }
.rm-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rm-opt__box {
  display: flex; gap: 14px; align-items: flex-start; height: 100%;
  padding: 14px 14px; min-height: 58px; border: 2px solid var(--graphite); background: var(--white);
}
.rm-opt:hover .rm-opt__box { border-color: var(--ink); }
.rm-opt__mark { flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); margin-top: 1px; background: var(--white); position: relative; }
.rm-opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-opt__title { font-weight: 600; font-size: 16.5px; line-height: 1.3; }
.rm-opt__hint { font-size: 14.5px; line-height: 1.4; color: var(--graphite); }
.rm-opt__input:checked + .rm-opt__box { background: var(--dom); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rm-opt__input:checked + .rm-opt__box .rm-opt__hint { color: var(--ink); }
.rm-opt__input:checked + .rm-opt__box .rm-opt__mark { background: var(--ink); }
.rm-opt__input:checked + .rm-opt__box .rm-opt__mark::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
input[type="radio"].rm-opt__input + .rm-opt__box .rm-opt__mark { width: 20px; height: 20px; }
.rm-opt__input:focus-visible + .rm-opt__box { outline: 3px solid var(--ink); outline-offset: 3px; }
.rm-opts--2 .rm-opt__box { min-height: 64px; padding: 12px; gap: 10px; }
.rm-opts--2 .rm-opt__title { font-size: 15.5px; }

.rm-other { margin-top: 16px; max-width: 420px; }
.rm-q__limit { font-size: 14px; font-weight: 600; margin: 10px 0 0; min-height: 1px; }

.rm-q__nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 2px solid var(--ink);
}
.rm-q__nav .rm-btn--back { flex: 0 0 auto; padding-left: 14px; padding-right: 16px; }
.rm-q__nav .rm-btn--next { flex: 1 1 auto; }

/* colour swatches */
.rm-opts--colors { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rm-sw { position: relative; cursor: pointer; display: block; }
.rm-sw__box { display: block; padding: 4px; border: 3px solid transparent; height: 100%; }
.rm-sw__chip { position: relative; display: block; aspect-ratio: 1; border: 2px solid var(--ink); overflow: hidden; }
.rm-sw__v { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; }
.rm-sw__n {
  position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: var(--ink); color: var(--white);
  font-family: var(--display); font-weight: 800; font-size: 13px; line-height: 24px; text-align: center;
}
.rm-sw__n:empty { display: none; }
.rm-sw__name { display: block; font-size: 13px; font-weight: 600; text-align: center; margin-top: 6px; line-height: 1.25; }
.rm-sw .rm-opt__input:checked + .rm-sw__box { border-color: var(--ink); background: var(--dom); }
.rm-sw--neutral .rm-opt__input:checked + .rm-sw__box .rm-sw__n {
  display: block;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.rm-sw .rm-opt__input:focus-visible + .rm-sw__box { outline: 3px solid var(--ink); outline-offset: 2px; }
.rm-sw.is-disabled { opacity: 0.38; cursor: not-allowed; }
.rm-sw__sep {
  grid-column: 1 / -1; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 8px;
}

@media (min-width: 560px) {
  .rm-opts--colors { grid-template-columns: repeat(7, 1fr); }
  .rm-sw--neutral { grid-column: span 1; }
}
@media (min-width: 900px) {
  .rm-q { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - var(--stripe) - 52px); }
  .rm-q__panel { padding: 48px 48px 48px var(--gutter); }
  .rm-q__panel > * { max-width: 520px; margin-left: auto; }
  .rm-q__panel > .rm-progress { margin-bottom: 40px; }
  .rm-q__count { margin-top: 0; }
  .rm-q__title { font-size: clamp(38px, 3.9vw, 60px); }
  .rm-q__help { font-size: 17px; }
  .rm-q__body { padding: 48px 48px 64px; max-width: 760px; }
  .rm-q__nav { position: static; padding: 0; border: 0; margin-top: 28px; background: none; }
  .rm-q__nav .rm-btn--next { flex: 0 1 auto; min-width: 220px; }
  .rm-opts--2 .rm-opt__box { min-height: 60px; }
}

/* ---------------- result ---------------- */
.rm-result { max-width: 1180px; margin: 0 auto; padding: 20px 12px 64px; }
@media (min-width: 900px) { .rm-result { padding: 40px var(--gutter) 96px; } }
.rm-card { padding: calc(var(--ft) + 18px) calc(var(--ft) + 16px) calc(var(--ft) + 14px); }
@media (min-width: 900px) { .rm-card { padding: calc(var(--ft) + 40px) calc(var(--ft) + 44px) calc(var(--ft) + 28px); } }

.rm-card__label { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 10px; color: var(--graphite); }
.rm-card__title { font-size: clamp(38px, 10.5vw, 104px); line-height: 0.92; overflow-wrap: break-word; }
.rm-card__top { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 900px) { .rm-card__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin-top: 36px; align-items: stretch; } }

.rm-profile { background: var(--pc); padding: 22px 20px 20px; }
.rm-profile__label { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 6px; }
.rm-profile__name { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(28px, 7vw, 46px); margin: 0 0 12px; }
.rm-profile__desc { margin: 0 0 12px; font-size: 17px; line-height: 1.55; max-width: 52ch; }
.rm-profile__loves { margin: 0 0 14px; font-size: 15px; }
.rm-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rm-facts li { border: 2px solid var(--ink); padding: 3px 8px; font-size: 13px; font-weight: 600; line-height: 1.35; background: var(--white); }
.rm-card__plan .rm-plan { width: 100%; max-width: 520px; margin: 0 auto; }
@media (min-width: 900px) { .rm-card__plan { display: flex; align-items: center; } .rm-card__plan .rm-plan { aspect-ratio: auto; height: 100%; min-height: 320px; } }

.rm-sec__head { margin: 40px 0 18px; display: grid; gap: 4px; }
.rm-sec__head p { margin: 0; color: var(--ink); max-width: 60ch; font-size: 16px; }
@media (min-width: 900px) { .rm-sec__head { grid-template-columns: auto 1fr; gap: 28px; align-items: baseline; margin-top: 56px; } .rm-sec__head .rm-h2 { margin: 0; font-size: 30px; } }

.rm-corners__grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .rm-corners__grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; } }
.rm-corner { display: flex; flex-direction: column; min-width: 0; }
.rm-corner__photo { position: relative; margin: 0; }
.rm-corner__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rm-corner__photo::after {
  content: attr(data-tag); position: absolute; left: 8px; bottom: 8px; background: var(--white); font-size: 11px; font-weight: 600; padding: 1px 6px; color: var(--ink);
}
.rm-corner__head { background: var(--cp); padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.rm-corner__head h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 21px; line-height: 1; margin: 0; }
.rm-corner__purpose { margin: 12px 0 6px; font-size: 15px; color: var(--graphite); line-height: 1.45; }
.rm-ideas { list-style: none; margin: 0; padding: 0; }
.rm-ideas li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1.5px solid #E2E2E3; font-size: 15.5px; line-height: 1.5; }
.rm-ideas li:last-child { border-bottom: 0; }
.rm-ideas li::before { content: ''; position: absolute; left: 0; top: 17px; width: 11px; height: 11px; background: var(--cv); }
.rm-ideas strong { font-weight: 700; }
@media (min-width: 760px) {
  .rm-corner--d3 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 28px; grid-template-rows: auto auto 1fr; }
  .rm-corner--d3 .rm-corner__photo { grid-row: 1 / span 3; }
  .rm-corner--d3 .rm-corner__photo img { height: 100%; aspect-ratio: auto; min-height: 340px; }
  .rm-corner--d3 .rm-corner__head h3 { font-size: 28px; }
  /* a corner left alone on the last row spans the width, in a compact layout */
  .rm-corner--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 28px; grid-template-rows: auto auto 1fr; }
  .rm-corner--wide .rm-corner__photo { grid-row: 1 / span 3; }
  .rm-corner--wide .rm-corner__photo img { height: 100%; aspect-ratio: auto; min-height: 260px; }
}

.rm-card__bottom { display: grid; gap: 36px; margin-top: 44px; }
@media (min-width: 900px) { .rm-card__bottom { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 60px; } }
.rm-pal__intro, .rm-pal__note { font-size: 15px; line-height: 1.5; margin: 0 0 16px; }
.rm-pal__note { color: var(--graphite); border-left: 4px solid var(--ink); padding-left: 12px; margin: 16px 0 0; }
.rm-pal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
@media (min-width: 560px) { .rm-pal__list { grid-template-columns: repeat(4, 1fr); } }
.rm-pal__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-pal__chip { position: relative; display: block; height: 64px; border: 2px solid var(--ink); margin-bottom: 6px; overflow: hidden; }
.rm-pal__half { position: absolute; right: 0; top: 0; bottom: 0; width: 38%; }
.rm-pal__role { font-family: var(--display); font-weight: 800; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.rm-pal__name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.rm-pal__hex { font-weight: 400; color: var(--graphite); font-size: 13px; white-space: nowrap; }
.rm-pal__use { font-size: 13.5px; line-height: 1.4; color: var(--graphite); }
.rm-pal__bar { display: flex; height: 20px; border: 2px solid var(--ink); margin-top: 18px; }
.rm-pal__bar span { display: block; }
.rm-pal__bar span + span { border-left: 2px solid var(--ink); }
.rm-pal__mix { font-size: 12px; color: var(--graphite); margin: 4px 0 0; font-weight: 600; }

.rm-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.rm-steps li { counter-increment: s; position: relative; padding: 2px 0 16px 50px; font-size: 15.5px; line-height: 1.5; min-height: 52px; }
.rm-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; background: var(--ink); color: var(--white);
  font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 36px; text-align: center;
}
.rm-safety { border: 2px solid var(--ink); padding: 14px 16px; margin-top: 8px; }
.rm-safety h3 { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 6px; }
.rm-safety ul { margin: 0; padding-left: 18px; }
.rm-safety li { font-size: 14px; line-height: 1.5; margin: 4px 0; }

.rm-note { margin-top: 40px; padding: 20px 20px 22px 24px; border-left: 10px solid var(--ink); background: #F4F4F4; }
.rm-note p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; max-width: 72ch; }
.rm-note .rm-h2 { font-size: 20px; }
.rm-note__guide { font-weight: 600; }
.rm-note .rm-btn { margin-top: 6px; }

.rm-card__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 40px; padding-top: 14px;
  border-top: 2px solid var(--ink); font-size: 13px; color: var(--graphite);
}
.rm-card__brand { font-family: var(--display); font-weight: 900; color: var(--ink); letter-spacing: -0.01em; font-size: 15px; }

.rm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; align-items: center; }
.rm-actions .rm-btn { flex: 1 1 220px; }
.rm-actions .rm-btn--text { flex: 0 0 auto; }
.rm-actions__msg { flex: 1 1 100%; margin: 0; font-size: 15px; font-weight: 600; min-height: 1px; }
@media (min-width: 900px) { .rm-actions .rm-btn { flex: 0 1 auto; } }

/* CTA — white on graphite, the one dark block on the page */
.rm-cta { margin-top: 48px; background: var(--ink); color: var(--white); display: grid; }
.rm-cta__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rm-cta__text { padding: 26px 20px 30px; }
.rm-cta__label { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 10px; }
.rm-cta__title { color: var(--white); font-size: clamp(32px, 8vw, 58px); margin-bottom: 14px; }
.rm-cta p { max-width: 50ch; }
.rm-cta__price { font-weight: 700; font-size: 18px; margin: 8px 0 18px; }
.rm-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.rm-cta .rm-btn--primary { background: var(--white); color: var(--ink); border-color: var(--white); }
.rm-cta .rm-btn--primary:hover { background: var(--pastel-amarelo); border-color: var(--pastel-amarelo); }
.rm-cta .rm-link { color: var(--white); font-weight: 600; text-underline-offset: 4px; }
.rm-cta :focus-visible { outline-color: var(--white); }
@media (min-width: 900px) {
  .rm-cta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 64px; }
  .rm-cta__img img { height: 100%; aspect-ratio: auto; min-height: 380px; }
  .rm-cta__text { padding: 48px 48px; align-self: center; }
}

.rm-lead { margin-top: 48px; padding: 28px 0 0; border-top: var(--ft) solid var(--ink); display: grid; gap: 20px; }
.rm-lead__title { font-size: clamp(30px, 7.5vw, 52px); }
.rm-lead__sub { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; margin: 10px 0 8px; }
.rm-lead__intro p:last-child { margin: 0; max-width: 42ch; }
.rm-lead__form { max-width: 520px; }
.rm-lead__form .rm-btn { width: 100%; margin-top: 16px; }
.rm-lead__done { padding: 6px 0; }
.rm-lead__done p { max-width: 52ch; }
@media (min-width: 900px) { .rm-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; margin-top: 64px; padding-top: 40px; } .rm-lead__form .rm-btn { width: auto; } }

.rm-noscript { padding: 40px var(--gutter); max-width: 640px; }

/* one orchestrated moment: the map's zones settle into place when the result opens */
@media (prefers-reduced-motion: no-preference) {
  body[data-screen="result"] .rm-card__plan .rm-plan__zone { animation: rm-zone 0.6s cubic-bezier(.2, .7, .2, 1) both; }
  body[data-screen="result"] .rm-card__plan .rm-plan__zone:nth-child(2) { animation-delay: 0.08s; }
  body[data-screen="result"] .rm-card__plan .rm-plan__zone:nth-child(3) { animation-delay: 0.16s; }
  body[data-screen="result"] .rm-card__plan .rm-plan__zone:nth-child(4) { animation-delay: 0.24s; }
  @keyframes rm-zone { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------------- print: a clean 1–2 page Room Map ---------------- */
@page { margin: 11mm 11mm 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; animation: none !important; }
  :root { --ft: 7px; }
  body { font-size: 9.6pt; line-height: 1.42; }
  .rm-top, .rm-noprint, .rm-q__nav, #rm-live { display: none !important; }
  .rm-result { padding: 0; max-width: none; }
  .rm-card { padding: calc(var(--ft) + 7mm) calc(var(--ft) + 7mm) calc(var(--ft) + 5mm); }
  .rm-card__title { font-size: 34pt; }
  .rm-card__top { grid-template-columns: 7fr 5fr; gap: 6mm; margin-top: 5mm; }
  .rm-profile { padding: 4mm 5mm; }
  .rm-profile__name { font-size: 20pt; margin-bottom: 2mm; }
  .rm-profile__desc { font-size: 10pt; margin-bottom: 2mm; }
  .rm-profile__loves { font-size: 9pt; margin-bottom: 2mm; }
  .rm-facts li { font-size: 8pt; padding: 1px 5px; border-width: 1.5px; }
  .rm-card__plan { display: flex; align-items: center; }
  .rm-card__plan .rm-plan { aspect-ratio: auto; height: 100%; min-height: 48mm; max-width: none; }
  .rm-plan__name { font-size: 8pt; }
  .rm-sec__head { grid-template-columns: auto 1fr; gap: 6mm; align-items: baseline; margin: 6mm 0 3mm; }
  .rm-sec__head .rm-h2 { margin: 0; font-size: 15pt; }
  .rm-sec__head p { font-size: 9pt; }
  .rm-corners__grid { grid-template-columns: 1fr 1fr; gap: 4mm 6mm; }
  .rm-corner, .rm-corner--d3 { display: block; grid-column: auto; }
  .rm-corner__head { break-after: avoid; page-break-after: avoid; }
  .rm-ideas li, .rm-steps li, .rm-safety, .rm-pal__list, .rm-card__foot { break-inside: avoid; page-break-inside: avoid; }
  .rm-corner__photo { display: none; }
  .rm-corner__head { padding: 2mm 3mm; }
  .rm-corner__head h3, .rm-corner--d3 .rm-corner__head h3 { font-size: 12.5pt; }
  .rm-dose__label { font-size: 8.5pt; }
  .rm-dose__sq i { width: 8px; height: 8px; border-width: 1.5px; }
  .rm-corner__purpose { font-size: 8.8pt; margin: 2mm 0 1mm; }
  .rm-ideas li { font-size: 9pt; padding: 1.4mm 0 1.4mm 4.5mm; line-height: 1.38; }
  .rm-ideas li::before { top: 2.6mm; width: 7px; height: 7px; }
  .rm-card__bottom { grid-template-columns: 1fr 1fr; gap: 7mm; margin-top: 6mm; }
  .rm-h2 { font-size: 13pt; margin-bottom: 2mm; }
  .rm-pal__list { grid-template-columns: repeat(4, 1fr); gap: 3mm; }
  .rm-pal__chip { height: 11mm; margin-bottom: 1mm; border-width: 1.5px; }
  .rm-pal__intro, .rm-pal__note { font-size: 8.6pt; margin-bottom: 2mm; }
  .rm-pal__role { font-size: 7pt; } .rm-pal__name { font-size: 8.6pt; } .rm-pal__hex, .rm-pal__use { font-size: 7.6pt; }
  .rm-pal__bar { height: 4mm; margin-top: 3mm; border-width: 1.5px; }
  .rm-steps li { font-size: 9pt; padding: 0 0 2.5mm 9mm; min-height: 0; }
  .rm-steps li::before { width: 6mm; height: 6mm; line-height: 6mm; font-size: 10pt; }
  .rm-safety { padding: 2.5mm 3mm; border-width: 1.5px; }
  .rm-safety li { font-size: 8.3pt; margin: 1mm 0; }
  .rm-note { margin-top: 5mm; padding: 3mm 4mm; border-left-width: 6px; break-inside: avoid; page-break-inside: avoid; }
  .rm-card__foot { break-before: avoid; page-break-before: avoid; }
  .rm-note p { font-size: 8.8pt; margin-bottom: 1.5mm; }
  .rm-card__foot { margin-top: 4mm; padding-top: 2mm; font-size: 8pt; }
  a[href]::after { content: none !important; }
}

/* PT: uppercase accents (É, Ã, Ç) need room between lines */
html[lang^="pt"] .rm-display, html[lang^="pt"] .rm-card__title, html[lang^="pt"] .rm-profile__name { line-height: 1.08; }