/* Room Planner (sheet row 277) - Dennis's concept on the site's own tokens.
   ⛔ .page gives padding-top:110px so the fixed header does not cover the content. Do not zero it -
   that is exactly what he reported on the Arcade 101 rebuild. */
.rp-page{max-width:1280px;margin:0 auto;padding:110px 20px 60px}
.rp-eyebrow,.rp-lbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--blue-lit);margin:0}
.rp-hero{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;padding:10px 0 30px}
.rp-hero-copy{max-width:64ch}
/* Hero banner - Dennis's rendered image (the "ROOM PLANNER" wordmark is in it). */
.rp-hero-banner{padding:4px 0 26px}
.rp-hero-img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--indigo)}
.rp-hero-banner .rp-hero-copy{margin-top:20px}
.rp-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}
.rp-shot-inline{margin:4px 0 1rem}
.rp-shot-inline .rp-shot-img img{height:240px}
.rp-shot-note{color:var(--muted);font-size:.8rem;margin:10px 0 0;text-align:center}
.rp-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:.98;margin:10px 0 0}
.rp-hero h1 em{color:var(--blue-lit);font-style:normal;display:block}
.rp-sub{color:var(--muted);font-size:1.04rem;max-width:50ch;margin:16px 0 22px}
.rp-hero-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rp-hero-act .btn-coin{text-decoration:none;display:inline-block;margin:0}
.rp-time{color:var(--muted);font-size:.88rem}
.rp-shot{margin:0;border:1px solid var(--indigo);border-radius:10px;background:var(--panel);padding:16px}
.rp-shot-cap{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.rp-shot-cap b{font-family:var(--display);text-transform:uppercase;font-size:.95rem;color:var(--text)}
.rp-shot-img{background:radial-gradient(ellipse at 50% 80%,#141a2e,#0b0d15);border-radius:8px;padding:10px;text-align:center}
.rp-shot-img img{width:auto;max-width:100%;height:300px;object-fit:contain;display:inline-block}
.rp-dims{list-style:none;display:flex;gap:10px;margin:12px 0 0;padding:0}
.rp-dims li{flex:1;text-align:center;border:1px solid rgba(53,64,127,.55);border-radius:8px;padding:10px 6px}
.rp-dims b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--blue-lit)}
.rp-dims span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.rp-trust{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--indigo);border-bottom:1px solid var(--indigo)}
.rp-trust img{width:100%;max-width:260px;height:auto;display:block;margin:0 auto 10px;border-radius:8px}
.rp-trust div{padding:18px 22px;border-left:1px solid var(--indigo)}
.rp-trust div:first-child{border-left:0;padding-left:0}
.rp-trust b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.84rem;letter-spacing:.04em;color:var(--text)}
.rp-trust b i{font-style:normal;color:var(--blue-lit);margin-right:8px}
.rp-trust span{display:block;color:var(--muted);font-size:.86rem;margin-top:6px}
.rp-sec{padding:46px 0 0}
.rp-sec h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.05;margin:8px 0 0}
.rp-lede{color:var(--muted);max-width:64ch;margin:12px 0 22px}
.rp-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 22px}
.rp-steps li{display:flex;align-items:center;gap:9px;border:1px solid rgba(53,64,127,.55);border-radius:999px;padding:8px 15px;
  color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.05em}
.rp-steps i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--blue-lit);color:var(--void);font-family:var(--display);font-size:.76rem}
.rp-cardh{font-family:var(--display);text-transform:uppercase;font-size:.95rem;letter-spacing:.04em;margin:0 0 14px;color:var(--text)}
.rp-route{border:1px solid rgba(53,64,127,.55);border-radius:8px;padding:14px;margin-top:18px}
.rp-route p:last-child{color:var(--muted);font-size:.88rem;margin:6px 0 0}
.rp-note{color:var(--muted);font-size:.86rem;margin-top:16px;max-width:76ch}
/* ---- "Still not sure?" delivery-route help - a blueprint-framed CTA ---------------------------- */
/* Chamfered "cut corner" edges - one notch treatment used on the frame AND the cards so the whole
   panel reads as one blueprint/HUD unit. A 1.5px border colour shows through the inset inner layer. */
.rrh{--notch-card:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  --notch-frame:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);
  margin:56px 0 0;background:rgba(53,64,127,.55);padding:1.5px;clip-path:var(--notch-frame)}
.rrh-body{clip-path:var(--notch-frame);background:linear-gradient(155deg,#0c0f1b,#0a0a12 70%);padding:clamp(26px,4vw,52px)}
.rrh-grid{display:grid;grid-template-columns:1.15fr .95fr 1fr;gap:clamp(26px,3.5vw,54px);align-items:center}
.rrh-eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--blue-lit);margin:0}
.rrh h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,3.5vw,3rem);line-height:.96;color:var(--text);margin:12px 0 0}
.rrh-lede{color:var(--muted);font-size:1rem;line-height:1.55;margin:18px 0 24px;max-width:42ch}
.rrh-acts{display:flex;flex-direction:column;gap:12px;max-width:340px}
.rrh-acts .btn-coin{text-decoration:none;text-align:center;display:block;margin:0}
.rrh-ghost{display:block;text-align:center;padding:15px 20px;border:1px solid var(--blue-lit);border-radius:11px;
  color:var(--blue-lit);font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;text-decoration:none;transition:background .15s}
.rrh-ghost:hover{background:rgba(41,169,228,.12)}
.rrh-ghost:focus-visible{outline:2px solid var(--blue-lit);outline-offset:2px}
.rrh-cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rrh-card{background:rgba(53,64,127,.6);padding:1.5px;clip-path:var(--notch-card)}
.rrh-card-in{display:flex;align-items:center;gap:16px;padding:16px 18px;background:#0b0e18;clip-path:var(--notch-card)}
.rrh-card svg{width:44px;height:44px;flex:0 0 auto;stroke:var(--blue-lit);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rrh-card b{font-family:var(--display);text-transform:uppercase;font-size:.84rem;letter-spacing:.02em;color:var(--text);line-height:1.22}
.rrh-bp{display:block;width:100%;height:auto;border-radius:4px}
.rrh-foot{display:flex;gap:14px;margin:clamp(22px,3vw,34px) 0 0;padding-top:clamp(20px,2.5vw,28px);border-top:1px solid rgba(53,64,127,.4)}
.rrh-foot span{border-left:2px solid var(--blue-lit);padding-left:15px;color:var(--muted);font-size:.92rem;line-height:1.5;max-width:88ch}
@media(max-width:960px){
  .rrh-grid{grid-template-columns:1fr 1fr}
  .rrh-bp-wrap{grid-column:1 / -1;max-width:440px}
}
@media(max-width:600px){
  .rrh-grid{grid-template-columns:1fr;gap:26px}
  .rrh-acts{max-width:none}
  .rrh-bp-wrap{max-width:320px;margin:0 auto}
}
/* Row 300 follow-up: the cabinet PICKER replaces the native <select> - a visual, tappable card
   grid that reads the same on desktop and mobile (no hidden iOS wheel). Sits in "Your space" right
   above the selected-cabinet figure, the arrangement Dennis approved. */
.rp-pick-lbl{display:block;font-size:.85rem;margin-bottom:.5rem;color:var(--text)}
.rp-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp-pick-card{display:flex;align-items:center;gap:10px;text-align:left;background:var(--panel);
  border:1px solid rgba(53,64,127,.55);border-radius:9px;padding:8px 9px;cursor:pointer;color:inherit;font:inherit;
  min-height:44px;transition:border-color .12s,background .12s}
.rp-pick-card:hover{border-color:var(--blue-lit)}
.rp-pick-card:focus-visible{outline:2px solid var(--blue-lit);outline-offset:2px}
.rp-pick-card[aria-pressed="true"]{border-color:var(--blue-lit);background:#101a2e;box-shadow:inset 0 0 0 1px var(--blue-lit)}
.rp-pick-ph{flex:0 0 auto;width:44px;height:52px;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 88%,#141a2e,#0b0d15);border-radius:6px}
.rp-pick-ph img{max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain;display:block}
.rp-pick-t{min-width:0}
.rp-pick-n{display:block;font-family:var(--display);text-transform:uppercase;font-size:.72rem;color:var(--text);line-height:1.18}
.rp-pick-d{display:block;color:var(--blue-lit);font-size:.72rem;margin-top:3px}
.rp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.rp-card{display:block;text-align:left;background:var(--panel);border:1px solid rgba(53,64,127,.55);border-radius:10px;
  padding:0;overflow:hidden;cursor:pointer;color:inherit;font:inherit}
.rp-card:hover,.rp-card:focus-visible{border-color:var(--blue-lit)}
.rp-card-ph{display:block;background:radial-gradient(ellipse at 50% 82%,#141a2e,#0b0d15);text-align:center;padding:14px 8px}
.rp-card-ph img{width:auto;max-width:100%;height:150px;object-fit:contain;display:inline-block}
.rp-card-b{display:block;padding:14px 16px 16px}
.rp-card-b b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.86rem;color:var(--text)}
.rp-card-b > span{display:block;color:var(--blue-lit);font-size:.86rem;margin:6px 0 8px}
.rp-card-b i{font-style:normal;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.rp-table-wrap{overflow-x:auto}
.rp-table{width:100%;border-collapse:collapse;min-width:620px}
.rp-table th,.rp-table td{text-align:left;padding:13px 16px;border-bottom:1px solid rgba(53,64,127,.45);color:var(--muted);font-size:.92rem}
.rp-table thead th{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--blue-lit);background:var(--panel)}
.rp-table thead th span{display:block;font-family:var(--body);letter-spacing:.04em;color:var(--muted);font-size:.66rem;margin-top:3px}
.rp-table tbody th{color:var(--text);font-family:var(--display);text-transform:uppercase;font-size:.84rem}
.rp-yes{color:#5fd08a}
.rp-warn{color:var(--amber)}
@media(max-width:1080px){
  .rp-hero{grid-template-columns:1fr}
  .rp-trust{grid-template-columns:1fr}
  .rp-trust div{border-left:0;padding-left:0}
  .rp-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .rp-cards{grid-template-columns:1fr}
  .rp-shot-img img{height:220px}
}
/* On a phone the picker is a compact horizontal strip you swipe through, so it never pushes the room
   fields and the answer off the screen - you can see what you are doing in one view. Desktop keeps
   the 2-col grid. The partial next card hints that it scrolls. */
@media(max-width:640px){
  .rp-pick{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;min-width:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:8px;padding-bottom:8px;
    scrollbar-width:thin;scrollbar-color:var(--blue-lit) rgba(53,64,127,.35)}
  /* Brand-blue scroll bar, never the browser's white one - the site's own look. */
  .rp-pick::-webkit-scrollbar{height:7px}
  .rp-pick::-webkit-scrollbar-track{background:rgba(53,64,127,.35);border-radius:99px}
  .rp-pick::-webkit-scrollbar-thumb{background:var(--blue-lit);border-radius:99px}
  .rp-pick-card{scroll-snap-align:start}
}