/* Couples guides (/games-for-long-distance-couples/, /couples-card-games/): hubs.css with a warm rose palette, a primary action
   in the hero, two actions on the card classics, honest video-call setups, a two-time-zone plan and short rules for a real deck. */
.hb[data-hub=couples]{--hb-tint:#fbeef1;--hb-tint2:#eef0fb;--hb-accent:#9a2f4f;--hb-deep:#3b1830;--hb-soft:#f0d2db}
.cp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin:0 0 14px}
.cp-acts .button{min-height:52px;padding:13px 24px;font-size:16.5px}
.cp-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15.5px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.cp-value{font-size:14.5px;font-weight:600;color:#4a4560;margin:0 0 22px}
.cp .hb-head p,.cp .hb-copy{color:#35314a}
/* The classics: the shared Free · Plus line, then two equal actions */
.cp-duo .pl{margin:0 0 16px}
.cp-two{margin-top:auto;display:grid;grid-template-columns:1fr;gap:8px}
.cp-two .button{justify-content:center;text-align:center;padding:11px 12px;font-size:14px;min-height:48px}
.hb .cp-two .cp-alt{background:#fff;color:var(--hb-accent);border:2px solid var(--hb-accent)}
.hb .cp-two .cp-alt:hover{background:var(--hb-tint)}
/* Video calls: four steps, then the two honest setups */
.cp-setups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:40px}
.cp-setups article{background:var(--hb-tint);border-radius:22px;padding:26px 28px}
.cp-setups article:nth-child(2){background:var(--hb-tint2)}
.cp-setups h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:19px}
.cp-setups h3 svg{color:var(--hb-accent);flex:0 0 auto}
.cp-setups p{margin:0;font-size:15.5px;line-height:1.6;color:#35314a}
/* Two time zones: one row per part of the evening */
.cp-plan{padding-top:24px!important}
.cp-zones{display:flex;gap:8px;margin:0 0 14px;font-size:13px;font-weight:700}
.cp-zones span,.cp-time span{border-radius:99px;padding:4px 11px;background:var(--hb-tint);color:var(--hb-deep);white-space:nowrap}
.cp-zones span+span,.cp-time span+span{background:var(--hb-tint2);color:#22305f}
.cp-timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cp-timeline li{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:10px 28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.cp-time{display:flex;flex-wrap:wrap;gap:6px;margin:0;font-weight:800;font-size:14.5px}
.cp-timeline h3{margin:0 0 4px;font-size:19px}
.cp-timeline p{margin:0;font-size:15.5px;line-height:1.55;color:#35314a;max-width:640px}
.cp-timeline .button{min-height:46px;padding:11px 18px;font-size:14px;white-space:nowrap;min-width:190px;justify-content:center}
.cp .hb-note a,.cp-access .hb-buy a{border-bottom:1px solid currentColor;font-weight:700}
/* Rules for a real deck */
.cp-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cp-rule-grid article{border:1px solid var(--line);border-radius:22px;padding:24px 24px 18px;background:#fff;display:flex;flex-direction:column}
.cp-rule-grid h3{margin:0 0 8px;font-size:21px}
.cp-need{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:600;color:#4a4560;margin:0 0 12px}
.cp-need svg{flex:0 0 auto;margin-top:1px;color:var(--hb-accent)}
.cp-rule-grid ol{margin:0 0 10px;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.55;color:#35314a}
.cp-rule-grid .cp-link{margin-top:auto;font-size:14.5px}
/* Printed pages: show the top of the Just Us cover rather than its centre */
.cp .hb-card--page .hb-art>a>img:first-child{top:12%}
@media (max-width:1100px){
 .cp-rule-grid{grid-template-columns:1fr 1fr}
 .cp-timeline li{grid-template-columns:170px minmax(0,1fr)}
 .cp-timeline .button{grid-column:2;justify-self:start}
}
@media (max-width:760px){
 .cp-acts{gap:8px 20px}
 .cp-acts .button{width:100%;justify-content:center}
 .cp-setups,.cp-rule-grid{grid-template-columns:1fr;gap:14px}
 .cp-setups{margin-top:28px}
 .cp-setups article{padding:20px 20px}
 .cp-timeline li{grid-template-columns:1fr;gap:8px;padding:18px 0}
 .cp-timeline .button{grid-column:auto;justify-self:stretch;justify-content:center}
 .cp-rule-grid article{padding:20px 20px 14px}
 /* Phones list cards picture-left (hubs.css); the classics stack both actions in the text column */
 .cp-two .button{font-size:13.5px;padding:8px 10px;min-height:44px}
}
/* Breadcrumb links get a full-height tap area without moving the line */
.cp .hb-crumbs{align-items:center}
.cp .hb-crumbs a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}