/* 85 · for two: the satellite rulewell/for-two, the page the user picked on round 3 ("turn these four into a
   website"): four Product cards (07-product.css), 2a, 2b, 3a, 3b. On a phone each card fills the screen, one after
   another; on a desktop they sit two by two, each a tall phone-shaped card. Only the page's frame lives here: the
   bar over the first card, the grid, the footer. The house night by color-scheme; no new colour. */

.rw-fortwo{color-scheme:dark;background:var(--rw-ground)}
.rw-fortwo.rw-body::before,.rw-fortwo.rw-body::after{display:none}

/* the bar floats over the first card */
.rw-fortwo__bar{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 14px);left:20px}
.rw-fortwo__home{font-family:var(--f-display);font-size:20px;font-weight:700;color:var(--rw-mark-ink);text-decoration:none}

/* phone: one card per screen */
.rw-fortwo__cards{display:flex;flex-direction:column}
.rw-fortwo__card{--product-min-h:100svh}
.rw-fortwo__card .rw-product__words{padding-top:24px}

/* desktop: two by two, each card a tall rounded phone shape with air round it */
@media (min-width:860px){
  /* the user's pick: only four panels, much bigger so you can see them (440 → 600 wide, taller) */
  .rw-fortwo__cards{display:grid;grid-template-columns:repeat(2,minmax(0,600px));justify-content:center;gap:32px;padding:72px 24px 40px}
  .rw-fortwo__card{--product-min-h:min(92vh,900px);--product-radius:24px;box-shadow:0 30px 60px -30px var(--rw-card-shadow)}
  .rw-fortwo__bar{left:max(24px,calc(50% - 616px))}
}

.rw-fortwo__footer{padding:22px 20px 32px;text-align:center;font-size:13px;color:var(--rw-footer-ink)}