/* Rewards on a phone, decided 6 October 2026: Two cards, with the 50% rewards that are ready first as a solid forest card.
   Drawn by rewards-studies.js inside the shop's own Rewards page, under the shop's tabs. Loaded by index-v2-enhanced.html
   (the pick is the shop's Rewards page at 600px and narrower) and by compare/my-rewards-live.html. Designed at 390px,
   checked at 320px. The look is My sheets' and Orders': white outlined cards, serif card headings, 15 to 16px text. */
.page-shell[data-rw]{padding-top:23px;padding-bottom:40px}
.page-shell[data-rw] .page-heading{align-items:flex-start;gap:12px;margin-bottom:14px}
.page-shell[data-rw] .page-heading h1{font-size:34px;line-height:1.15;overflow-wrap:anywhere}
.page-shell[data-rw] .page-heading p{margin-top:5px;max-width:none;font-size:14px;line-height:1.4;color:#435b4d}
.page-shell[data-rw] .account-nav{margin:0 0 6px;padding:0;gap:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.page-shell[data-rw] .account-nav a{min-height:58px;gap:4px;padding:7px 2px;font-size:12px}
.page-shell[data-rw] .account-nav a svg{width:18px;height:18px}

.rw{display:grid;gap:12px;margin-top:14px}
.rw .icon{width:18px;height:18px}
.rw-card{display:grid;gap:12px;padding:18px 18px 20px;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.rw-card h2,.rw-tile h2{margin:0;font:600 19px/1.25 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.rw-card p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
/* The balance: one large figure and what it is out of */
.rw-big{display:flex;align-items:baseline;gap:8px}
.rw-card .rw-big>b{font:600 40px/1 var(--serif);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums}
.rw-card .rw-big>span{font-size:16px;color:var(--muted)}
.rw-bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.rw-bar>span{display:block;height:100%;border-radius:3px;background:var(--green)}
/* The friend code, with Copy and Share */
.rw-code{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rw-code>b{grid-column:1/-1;min-width:0;padding:11px 14px;border:1px dashed var(--line-strong);border-radius:10px;font:600 18px/1.3 var(--sans);letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere}
.rw-do{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;font:600 15px/1 var(--sans);color:var(--forest)}
.rw-do:active{background:var(--soft)}
.rw-card .rw-none{padding:12px 14px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--ink)}
.rw .rw-rule{margin:2px 2px 0;font-size:14px;line-height:1.45;color:var(--muted)}
/* Green card: one solid surface */
.rw-card.rw-solid{border-color:var(--forest);background:var(--forest)}
.rw-solid h2,.rw-card.rw-solid .rw-big>b{color:#fff}
.rw-card.rw-solid p,.rw-card.rw-solid .rw-big>span{color:#d9e6dd}

@media(max-width:360px){
 .rw-card{padding:16px 14px 18px}
}

/* ---------- Laptop, round one (7 October 2026): Three across, Reward beside, Plain list. Comparison previews only.
   The page takes My sheets' frame, as the laptop wishlist and orders do. Measured at 1366 by 657. ---------- */
.page-shell[data-rw-pc]{max-width:1140px;padding-top:32px}
.page-shell[data-rw-pc] .page-heading{align-items:center;gap:18px;margin-bottom:12px}
.page-shell[data-rw-pc] .page-heading h1{font-size:40px;line-height:1.15;overflow-wrap:anywhere}
.page-shell[data-rw-pc] .page-heading p{margin-top:5px;max-width:none;font-size:14px;line-height:1.4;color:#435b4d}
.page-shell[data-rw-pc] .account-nav{margin-bottom:0}
.rw--pc{margin-top:24px;gap:14px}
.rw--pc button{cursor:pointer}
.rw--pc .rw-card{display:flex;flex-direction:column;gap:14px;padding:24px 26px 26px}
.rw--pc .rw-card h2,.rw-pcline h2{margin:0;font:600 21px/1.25 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.rw--pc .rw-card p,.rw-pcline p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.rw--pc .rw-card .rw-big>b{font-size:48px}
.rw--pc .rw-card.rw-solid h2{color:#fff}
.rw--pc .rw-card.rw-solid p{color:#d9e6dd}
.rw--pc .rw-card .button{margin-top:auto;min-height:50px;font-size:16px}
.rw--pc .rw-code>b{font-size:19px}
.rw--pc .rw-none{color:var(--ink)}
.rw--pc .rw-rule{margin-top:2px;font-size:14px}
/* Three across */
.rw-pcrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rw-pcrow.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.rw-pcrow .rw-solid .rw-big{flex-wrap:wrap}
.rw-pcrow .rw-solid .rw-big>b{font-size:60px}
/* Reward beside */
.rw-pcside{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px}
.rw-pcside.is-lone{grid-template-columns:minmax(0,1fr)}
.rw-pcside>.rw-solid{justify-content:center;padding:32px}
.rw-pcside>.rw-solid .rw-big{flex-direction:column;align-items:flex-start;gap:6px}
.rw-pcside>.rw-solid .rw-big>b{font-size:72px}
.rw-pcstack{display:grid;gap:16px}
/* The one green sentence: the rewards are not capped */
.rw .rw-card .rw-nolimit,.rw .rw-pcline .rw-nolimit{font-weight:600;color:var(--green-hover)}
/* The green card's place with no reward banked (compare only): the same square, pale, saying how the 50% is earned */
.rw-card.rw-invite{border-color:var(--mint-deep);background:var(--mint)}
.rw-card.rw-invite.is-dashed{border:1px dashed var(--line-strong);background:#fff}
.rw-pcside>.rw-invite{justify-content:center;padding:32px}
.rw-invite .rw-gift{width:34px;height:34px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rw--pc .rw-card.rw-invite h2{color:var(--forest)}
.rw-pcside>.rw-invite .rw-big{flex-direction:column;align-items:flex-start;gap:6px}
.rw-pcside>.rw-invite .rw-big>b{font-size:64px;color:var(--forest)}
.rw--pc .rw-card.rw-invite p{color:#33493c}
.rw--pc .rw-card.rw-wide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:center;padding:20px 26px 22px}
/* The code with Copy and Share on its own line, to keep the card short */
.rw-wide .rw-code{grid-template-columns:minmax(0,1fr) auto auto}
.rw-wide .rw-code>b{grid-column:auto}
.rw-wide .rw-do{padding:0 16px}
.rw-wide>div{display:grid;gap:12px;min-width:0}
.rw--pc .rw-wide .button{margin-top:2px;justify-self:start}
/* Plain list */
.rw-pcbox{padding:0 26px;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.rw-pcline{display:grid;grid-template-columns:200px 270px minmax(0,1fr) auto;column-gap:28px;align-items:center;padding:17px 0}
.rw-pcline+.rw-pcline{border-top:1px solid var(--line)}
.rw-fig{display:flex;align-items:baseline;gap:8px;font:600 40px/1 var(--serif);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums}
.rw-pcline p.rw-fig{font-size:40px;line-height:1;color:var(--ink)}
.rw-pcline p.rw-fig.is-off{color:var(--green-hover)}
.rw-fig>span{font:400 16px/1.3 var(--sans);letter-spacing:0;color:var(--muted)}
.rw-pcwords{display:grid;gap:10px;min-width:0}
.rw-pcline .rw-none{padding:12px 14px;border:1px dashed var(--line-strong);border-radius:10px}
.rw-pcline .button{min-height:50px;font-size:16px;white-space:nowrap}
@media(max-width:999px){
 .rw-pcrow,.rw-pcrow.is-two,.rw-pcside{grid-template-columns:minmax(0,1fr)}
 .rw--pc .rw-card.rw-wide{grid-template-columns:minmax(0,1fr);gap:14px}
 .rw-pcline{grid-template-columns:minmax(0,1fr);row-gap:12px}
}