/* RoomRecipe visual revision — 14 October 2026.
   Load AFTER rr-core.css and the page stylesheet. No business-rule overrides. */
:root {
  --rr-page-white:#fff;
  --rr-section-cream:#f8f5ef;
  --rr-content-width:1240px;
}
body { background:var(--rr-page-white); }
.site-header { background:#fff; border-bottom:1px solid #ecebe7; backdrop-filter:none; }
.container,.nav-shell { width:min(var(--rr-content-width),calc(100% - 80px)); }
.site-footer { background:#fff; }
.main-nav a,.nav-actions a { white-space:nowrap; }
.button,.button-secondary { border-radius:9px; }
.button-secondary { background:#fff; }
.page-hero {
  background:#fff;
  padding:36px 0 30px;
  border-bottom:0;
}
.page-hero h1 {
  font-size:clamp(34px,3.35vw,46px);
  line-height:1.14;
  letter-spacing:-1.5px;
  max-width:900px;
  margin-bottom:14px;
}
.page-hero .eyebrow { margin-bottom:10px; }
.page-hero .lead { font-size:16px; line-height:1.65; max-width:700px; }
.page-hero-actions { margin-top:20px; gap:12px 20px; }
.page-hero .hero-note { margin-top:12px; }
.rr-page--examples .ex-section,
.rr-page--pricing .plans-section,
.rr-page--blog .post-cards-section { padding:30px 0 64px; background:var(--rr-section-cream); }
.rr-page--support .faq-section { padding-top:34px; }
.rr-page--pricing .credits-section { background:#fff; }
.rr-page--pricing .plans-grid { gap:20px; }
.rr-page--pricing .plan-card { min-width:0; }
.rr-page--pricing .is-popular { transform:none; }
.rr-page--blog .post-card-img img { height:245px; }
.rr-page--blog .post-cards .post-card { background:#fff; }
.cta-band-section { background:#fff; }
.cta-band { background:var(--rr-section-cream); }
.faq-section { background:var(--rr-section-cream); }
.download-section { background:#fff; }
.download-card { background:var(--rr-section-cream); }

/* Homepage: reference composition, white canvas, quiet framed photography. */
.rr-page--home .hero {
  width:min(var(--rr-content-width),calc(100% - 80px));
  max-width:none;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:56px;
  align-items:center;
  padding:46px 0 50px;
  min-height:0;
  overflow:visible;
  background:#fff;
}
.rr-page--home .hero-copy {
  padding:0;
  min-width:0;
  align-self:center;
  text-align:left;
}
.rr-page--home .hero h1 {
  font-size:clamp(40px,3.9vw,56px);
  line-height:1.07;
  letter-spacing:-2.2px;
  white-space:normal;
  margin:16px 0 22px;
  text-wrap:initial;
}
.rr-page--home .hero-description {
  max-width:460px;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}
.rr-page--home .hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.rr-page--home .hero-actions .button,
.rr-page--home .hero-actions .button-secondary {
  margin:0;
  min-height:48px;
  min-width:0;
  padding:12px 19px;
  font-size:14px;
  font-weight:700;
  text-align:center;
  justify-content:center;
}
.rr-page--home .hero-note { margin-top:16px; font-size:12px; line-height:1.5; color:var(--muted); }
.rr-page--home .hero-badges { margin-top:16px; gap:20px; justify-content:flex-start; }
.rr-page--home .hero-badges .store-badge { min-height:64px; }
.rr-page--home .hero-badges .badge-img-appstore { width:131.6px; height:44px; }
.rr-page--home .hero-badges .badge-img-googleplay { width:148px; height:44px; }
.rr-page--home .hero-visual {
  position:relative;
  min-height:0;
  width:100%;
  aspect-ratio:4/3;
  max-height:520px;
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 4px 14px #10253b10;
  background:#f0ede7;
}
.rr-page--home .hero-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.rr-page--home .steps-section { background:var(--rr-section-cream); }
.rr-page--home .shop-section { background:#fff; }
.rr-page--home .preview-section { background:var(--rr-section-cream); }
.rr-page--home .compare-section { background:#fff; }
.rr-page--home .app-section { background:var(--rr-section-cream); }
.rr-page--home .pricing-section { background:#fff; }
.rr-page--home .pricing-strip { background:#fff; }
.rr-page--home .step-card { display:flex; flex-direction:column; border-radius:12px; }
.rr-page--home .step-copy { min-height:115px; }
.rr-page--home .inspiration-image,
.rr-page--home .step-room,
.rr-page--home .step-comparison { flex-shrink:0; }
.rr-page--home .mini-products { margin-bottom:14px; }
.rr-page--home .inspiration-caption,
.rr-page--home .step-total,
.rr-page--home .step-preview-link {
  margin-top:auto;
  min-height:58px;
  padding-top:13px;
  border-top:1px solid var(--line);
}
.rr-page--home .inspiration-caption { margin-top:14px; }
.rr-page--home .step-preview-link { margin-top:14px; }
.rr-page--home .step-card:first-child .inspiration-caption,
.rr-page--home .step-card:last-child .step-preview-link { margin-top:auto; }
.rr-page--home .inspiration-thumbs { margin-bottom:14px; }
.rr-page--home .step-instruction { margin-bottom:12px; }
.rr-page--home .comparison-controls { margin-bottom:14px; }
.rr-page--home .example-note { line-height:1.6; }
.rr-page--home .floating-products button { border:1px solid var(--line); }
.rr-page--home .floating-products button.is-selected { border:2px solid var(--teal-dark); }

/* How it works: show an actual visual summary alongside the existing explanation. */
.rr-page--how .page-hero { padding:38px 0 42px; text-align:left; }
.rr-page--how .how-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
  gap:64px;
}
.rr-page--how .page-hero h1 { margin:0 0 16px; font-size:clamp(36px,3.55vw,48px); }
.rr-page--how .page-hero .lead { margin:0; max-width:510px; }
.rr-page--how .page-hero-actions { justify-content:flex-start; gap:12px 22px; }
.rr-page--how .how-step { padding-top:58px; padding-bottom:58px; background:var(--rr-section-cream); }
.rr-page--how .how-step.section-white { background:#fff; }
.hero-workflow {
  padding:16px;
  border:1px solid #e6e4df;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 35px #10253b08;
  margin:0;
  min-width:0;
}
.hero-workflow-room { position:relative; height:230px; border-radius:10px; overflow:hidden; background:var(--rr-section-cream); }
.hero-workflow-room img { width:100%; height:100%; object-fit:cover; }
.hero-workflow-room .comparison-tag { top:12px; left:12px; right:auto; font-size:11px; padding:5px 9px; }
.hero-workflow-caption { padding:15px 1px 10px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.hero-workflow-caption strong { font-family:var(--heading); font-size:15px; font-weight:800; }
.hero-workflow-caption .icon { color:var(--teal-dark); }
.hero-workflow-list { display:grid; gap:6px; }
.hero-workflow-row { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 10px; border:1px solid #efede8; border-radius:8px; background:#faf9f6; }
.hero-workflow-row img { width:46px; height:40px; object-fit:contain; border-radius:4px; }
.hero-workflow-row span { font-size:12px; font-weight:600; line-height:1.4; }
.hero-workflow-row strong { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.hero-workflow-progress { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:9px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); font-size:11px; font-weight:650; color:var(--muted); }
.hero-workflow-progress .icon { width:13px; height:13px; color:var(--teal-dark); }
.hero-workflow-progress span:last-child { color:var(--teal-dark); }

/* Business: keep the working demo, remove the extra fixed-header clearance. */
.rr-page--business .biz-page { background:#fff; }
.rr-page--business .biz-hero { padding:32px 40px 48px; }
.rr-page--business .biz-hero::before { display:none; }
.rr-page--business .biz-hero-inner { max-width:var(--rr-content-width); }
.rr-page--business .biz-hero-copy { max-width:1100px; margin-bottom:28px; gap:12px; }
.rr-page--business .biz-h1 { font-size:clamp(34px,3.3vw,46px); line-height:1.12; max-width:1050px; letter-spacing:-1.5px; }
.rr-page--business .biz-hero-copy .biz-sub { max-width:850px!important; font-size:16px; line-height:1.55; }
.rr-page--business .biz-hero-ctas { margin-top:6px; }
.rr-page--business .biz-hero-cols { grid-template-columns:minmax(0,.82fr) minmax(0,1.52fr) minmax(0,1fr); gap:20px; }
.rr-page--business .biz-hero-cols>div { min-width:0; }
.rr-page--business .biz-col-label { font-size:10px; letter-spacing:1.1px; color:var(--muted); }
.rr-page--business .biz-stack-frame { height:312px; }
.rr-page--business .biz-stack-card.selected { transform:none; }
.rr-page--business .biz-stack-dots { margin-top:12px; }
.rr-page--business .biz-analysis { padding:12px; gap:10px; min-height:338px; }
.rr-page--business .biz-analysis-image { aspect-ratio:16/9; min-height:250px; flex:1; }
/* Keep object labels inside the photo at every responsive width. */
.rr-page--business .biz-pin .biz-pin-tag { left:7px; top:auto; bottom:24px; transform:translateX(-50%); max-width:180px; font-size:9.5px; }
.rr-page--business .biz-pin .biz-pin-line { left:7px; top:-15px; width:1px; height:14px; }
.rr-page--business .biz-pin[style*="top: 28%"] .biz-pin-tag,
.rr-page--business .biz-pin[style*="top: 32%"] .biz-pin-tag { top:24px; bottom:auto; }
.rr-page--business .biz-pin[style*="top: 28%"] .biz-pin-line,
.rr-page--business .biz-pin[style*="top: 32%"] .biz-pin-line { top:14px; }
.rr-page--business .biz-cart-panel { padding:12px; min-height:338px; gap:8px; }
.rr-page--business .biz-cart-item { grid-template-columns:34px minmax(0,1fr) auto; gap:9px; padding:8px; }
.rr-page--business .biz-cart-item .biz-thumb { width:34px; height:34px; }
.rr-page--business .biz-cart-list { flex:1; }
.rr-page--business .biz-cart-item .biz-name { font-size:12px; line-height:1.35; }
.rr-page--business .biz-cart-item .biz-sku { font-size:9px; letter-spacing:.5px; }
.rr-page--business .biz-cart-item .biz-check { width:18px; height:18px; box-shadow:none; }
.rr-page--business .biz-section-pad { padding-top:64px; padding-bottom:64px; }
.rr-page--business .biz-section-pad#how { padding-top:50px; background:var(--rr-section-cream); }
.rr-page--business .biz-why-section { background:#fff; }
.rr-page--business .biz-h2 { font-size:clamp(30px,3vw,42px); }
.rr-page--business .biz-closing { margin-top:0; }

/* Reading pages: expose the start of the document without decorative empty space. */
.rr-page--legal .prose-wrap { background:#fff; padding:34px 0 64px; }
.rr-page--legal .prose { max-width:800px; }
.rr-page--legal .prose-title { font-size:clamp(32px,3.2vw,44px); }
.rr-page--legal .prose .meta-line { margin-bottom:22px; }
.rr-page--legal .prose h2 { margin-top:30px; }
.rr-page--article .post-page { background:#fff; padding:28px 0 60px; }
.rr-page--article .post-wrap { max-width:840px; }
.rr-page--article .post-title { font-size:clamp(32px,3.25vw,44px); line-height:1.13; }
.rr-page--article .post-lede { font-size:18px; line-height:1.55; margin-bottom:20px; }
.rr-page--article .post-hero-img img { max-height:380px; object-fit:cover; }
.rr-page--error .error-hero { padding:44px 0 54px; }
.rr-page--error .error-code { font-size:92px; }

@media(max-width:1150px) {
  .container,.nav-shell { width:calc(100% - 64px); }
  .rr-page--home .hero { width:calc(100% - 64px); gap:32px; padding:40px 0; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .rr-page--home .hero h1 { font-size:45px; letter-spacing:-1.7px; }
  .rr-page--home .hero-description { font-size:16px; }
  .rr-page--home .hero-actions { gap:10px; }
  .rr-page--home .hero-actions .button,.rr-page--home .hero-actions .button-secondary { padding-inline:14px; font-size:13px; }
  .rr-page--how .how-hero-grid { gap:36px; }
  .rr-page--how .page-hero h1 { font-size:40px; }
  .rr-page--business .biz-hero { padding-inline:32px; }
  .rr-page--business .biz-hero-cols { grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr) minmax(0,1fr); gap:14px; }
  .rr-page--business .biz-h1 { font-size:40px; }
}
@media(max-width:900px) {
  .container,.nav-shell { width:calc(100% - 48px); }
  .rr-page--home .hero { width:calc(100% - 48px); gap:24px; }
  .rr-page--home .hero h1 { font-size:38px; }
  .rr-page--home .hero-description { font-size:15px; }
  .rr-page--home .hero-visual { aspect-ratio:1/1.05; }
  .rr-page--home .hero-actions { display:grid; grid-template-columns:1fr; gap:8px; max-width:270px; }
  .rr-page--home .hero-badges { gap:10px; }
  .rr-page--home .hero-badges .badge-img-appstore { width:120px; height:40px; }
  .rr-page--home .hero-badges .badge-img-googleplay { width:134.5px; height:40px; }
  .rr-page--home .hero-badges .store-badge { min-height:60px; }
  .rr-page--how .how-hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
  .rr-page--how .page-hero h1 { font-size:35px; }
  .rr-page--how .page-hero .lead { font-size:14px; }
  .hero-workflow { padding:12px; }
  .hero-workflow-room { height:205px; }
  .hero-workflow-row { padding:7px; gap:8px; grid-template-columns:38px minmax(0,1fr) auto; }
  .hero-workflow-row img { width:38px; height:36px; }
  .rr-page--business .biz-hero { padding:28px 24px 40px; }
  .rr-page--business .biz-h1 { font-size:36px; }
  .rr-page--business .biz-hero-cols { grid-template-columns:1fr 1.35fr; gap:18px; }
  .rr-page--business .biz-hero-cols>div:first-child { grid-column:1; grid-row:1; }
  .rr-page--business .biz-hero-cols>div:nth-child(2) { grid-column:2; grid-row:1 / span 2; }
  .rr-page--business .biz-hero-cols>div:last-child { grid-column:1; }
  .rr-page--business .biz-stack-frame { height:170px; }
  .rr-page--business .biz-stack-dots { margin-top:10px; }
  .rr-page--business .biz-analysis { min-height:100%; }
  .rr-page--business .biz-analysis-image { min-height:330px; }
  .rr-page--business .biz-cart-panel { min-height:0; }
}
@media(max-width:700px) {
  .container,.nav-shell { width:calc(100% - 40px); }
  .page-hero { padding:28px 0 24px; }
  .page-hero h1 { font-size:34px; letter-spacing:-1.2px; margin-bottom:12px; }
  .page-hero .lead { font-size:14px; line-height:1.65; }
  .page-hero-actions { margin-top:18px; gap:8px; }
  .rr-page--home .hero { display:flex; flex-direction:column; width:calc(100% - 40px); gap:24px; padding:30px 0 32px; }
  .rr-page--home .hero-copy { width:100%; text-align:left; align-self:stretch; }
  .rr-page--home .hero h1 { font-size:40px; letter-spacing:-1.6px; margin:12px 0 16px; }
  .rr-page--home .hero-description { font-size:15px; line-height:1.6; max-width:460px; margin:0; }
  .rr-page--home .hero-actions { grid-template-columns:1fr 1fr; max-width:none; margin-top:20px; }
  .rr-page--home .hero-actions .button,.rr-page--home .hero-actions .button-secondary { padding:10px 8px; font-size:12px; min-height:46px; }
  .rr-page--home .hero-note { margin-top:12px; font-size:11px; }
  .rr-page--home .hero-badges { margin-top:10px; }
  .rr-page--home .hero-visual { aspect-ratio:4/3; width:100%; height:auto; max-height:340px; flex-shrink:0; }
  .rr-page--home .step-copy { min-height:0; }
  .rr-page--home .step-card:first-child .inspiration-caption,.rr-page--home .step-card:last-child .step-preview-link { margin-top:14px; }
  .rr-page--how .page-hero { padding:28px 0 32px; }
  .rr-page--how .how-hero-grid { grid-template-columns:1fr; gap:26px; }
  .rr-page--how .page-hero h1 { font-size:35px; }
  .rr-page--how .page-hero-actions { flex-direction:row; align-items:center; }
  .rr-page--how .page-hero-actions .button { width:auto; padding-inline:14px; font-size:12px; }
  .hero-workflow-room { height:190px; }
  .hero-workflow-caption { padding-top:12px; }
  .hero-workflow-caption strong { font-size:14px; }
  .hero-workflow-row { grid-template-columns:42px minmax(0,1fr) auto; }
  .hero-workflow-row img { width:42px; }
  .rr-page--how .how-step { padding:44px 0; }
  .rr-page--examples .ex-section,.rr-page--pricing .plans-section,.rr-page--blog .post-cards-section { padding:24px 0 44px; }
  .rr-page--pricing .plans-grid .is-popular { order:initial; }
  .rr-page--blog .post-card-img img { height:210px; }
  .rr-page--support .faq-section { padding-top:28px; }
  .rr-page--support .faq-intro { padding-top:0; }
  .rr-page--business .biz-hero { padding:26px 20px 36px; }
  .rr-page--business .biz-hero-copy { gap:12px; margin-bottom:24px; }
  .rr-page--business .biz-h1 { font-size:32px; line-height:1.12; letter-spacing:-1.1px; }
  .rr-page--business .biz-hero-copy .biz-sub { font-size:14px; line-height:1.6; }
  .rr-page--business .biz-hero-ctas { gap:8px; margin-top:2px; }
  .rr-page--business .biz-hero-ctas .biz-cta { padding:11px 13px; min-height:46px; font-size:12px; }
  .rr-page--business .biz-hero-cols { display:flex; flex-direction:column; gap:20px; }
  .rr-page--business .biz-hero-cols>div:nth-child(2) { order:0; }
  .rr-page--business .biz-hero-cols>div:first-child { order:1; }
  .rr-page--business .biz-hero-cols>div:last-child { order:2; }
  .rr-page--business .biz-pin .biz-pin-tag { max-width:122px; white-space:normal; text-align:center; border-radius:8px; font-size:9px; line-height:1.35; padding:4px 7px; }
  .rr-page--business .biz-analysis { min-height:0; }
  .rr-page--business .biz-analysis-image { min-height:0; height:225px; aspect-ratio:auto; flex:none; }
  .rr-page--business .biz-stack-frame { height:325px; }
  .rr-page--business .biz-cart-panel { min-height:0; }
  .rr-page--business .biz-section-pad { padding:44px 20px; }
  .rr-page--legal .prose-wrap { padding:28px 0 44px; }
  .rr-page--legal .prose-title { font-size:34px; }
  .rr-page--article .post-page { padding:22px 0 44px; }
  .rr-page--article .post-title { font-size:32px; }
  .rr-page--article .post-lede { font-size:16px; }
  .rr-page--article .post-hero-img img { max-height:300px; }
  .rr-page--error .error-hero { padding:34px 0 44px; }
  .rr-page--error .error-code { font-size:76px; }
}
@media(max-width:370px) {
  .container,.nav-shell { width:calc(100% - 32px); }
  .rr-page--home .hero { width:calc(100% - 32px); padding-top:24px; }
  .rr-page--home .hero h1 { font-size:35px; }
  .rr-page--home .hero-description { font-size:14px; }
  .rr-page--home .hero-badges { gap:8px; }
  .rr-page--how .page-hero h1,.page-hero h1 { font-size:30px; }
  .rr-page--business .biz-h1 { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) {
  .rr-page--home .hero-image { animation:none; transition:none; }
}

/* Homepage object detections: visual annotations, no change to the demos below. */
.rr-page--home .hero-detections { position:absolute; inset:0; pointer-events:none; }
.rr-page--home .hero-match { position:absolute; width:16px; height:16px; transform:translate(-50%,-50%); }
.rr-page--home .hero-match .pin-dot { width:16px; height:16px; border-width:2.5px; box-shadow:0 0 0 5px #29b3b925,0 2px 8px #10253b20; }
.rr-page--home .hero-match::before { content:""; position:absolute; bottom:16px; left:7.5px; height:22px; width:1px; background:#ffffffb3; }
.rr-page--home .hero-match-label { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); min-width:125px; padding:9px 12px; border:1px solid #ffffffa6; border-radius:8px; background:#fffffff5; box-shadow:0 4px 18px #10253b18; color:var(--navy); line-height:1.4; white-space:nowrap; }
.rr-page--home .hero-match-label strong { display:block; font-size:12px; font-weight:700; }
.rr-page--home .hero-match-label>span { display:block; margin-top:2px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rr-page--home .hero-match-sofa { left:75%; top:59%; }
.rr-page--home .hero-match-chair { left:15%; top:64%; }
.rr-page--home .hero-match-table { left:51%; top:66%; }
.rr-page--home .hero-match-table::before { top:16px; bottom:auto; height:20px; }
.rr-page--home .hero-match-table .hero-match-label { top:36px; bottom:auto; }
.rr-page--home .hero-match-note { position:absolute; left:14px; bottom:13px; padding:4px 7px; border-radius:4px; background:#ffffffe6; color:var(--muted); font-size:9px; line-height:1.35; }
@media(min-width:901px) {
  .main-nav { gap:22px; }
}
@media(min-width:901px) and (max-width:1150px) {
  .nav-shell { gap:18px; }
  .main-nav { gap:14px; }
  .nav-actions { gap:12px; }
}
@media(max-width:900px) {
  .rr-page--home .hero-match-label { min-width:0; padding:6px 8px; }
  .rr-page--home .hero-match-label strong { font-size:10px; }
  .rr-page--home .hero-match-label>span { font-size:10px; margin-top:0; }
}
@media(min-width:701px) and (max-width:900px) {
  .rr-page--home .hero-match-chair { left:8%; }
  .rr-page--home .hero-match-sofa .hero-match-label { left:auto; right:-8px; transform:none; }
  .rr-page--home .hero-match-chair .hero-match-label { left:-10px; transform:none; }
}
@media(max-width:700px) {
  .rr-page--home .hero-match .pin-dot { width:14px; height:14px; border-width:2px; box-shadow:0 0 0 4px #29b3b925; }
  .rr-page--home .hero-match-sofa .hero-match-label { left:auto; right:-12px; bottom:54px; transform:none; }
  .rr-page--home .hero-match-sofa::before { height:38px; }
  .rr-page--home .hero-match-chair .hero-match-label { left:-15px; bottom:28px; transform:none; }
  .rr-page--home .hero-match-chair::before { height:12px; }
  .rr-page--home .hero-match-table .hero-match-label { top:24px; }
  .rr-page--home .hero-match-table::before { height:8px; }
  .rr-page--home .hero-match-note { left:9px; top:8px; bottom:auto; font-size:8px; padding:3px 5px; }
}

@media(min-width:901px) and (max-width:1024px) {
  .nav-shell { gap:12px; }
  .main-nav { gap:8px; }
  .main-nav>a { font-size:12px; }
  .nav-actions { gap:8px; }
}