/* StrayBond project page (straybond.html). Each app has one colour, used on its card, flow steps and order. */
.sb-ioc{--sb-c:var(--ochre);}
.sb-care{--sb-c:var(--up);}
.sb-watch{--sb-c:var(--series-blue);}

.sb-sec{padding:72px 0;}
.sb-alt{background:var(--paper2);}
.sb-h2{font-size:clamp(26px,3.4vw,36px); line-height:1.15; margin-top:8px; max-width:720px;}
.sb-lede{color:var(--ink2); font-size:17px; line-height:1.55; max-width:560px; margin-top:14px;}

.sb-grid{list-style:none; display:grid; gap:18px; margin:32px 0 0; padding:0;}
.sb-grid-3{grid-template-columns:repeat(3,1fr);}
.sb-grid-4{grid-template-columns:repeat(4,1fr);}

.sb-card{display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:16px; background:var(--paper); box-shadow:var(--shadow-card); color:var(--ink2); font-size:15.5px; line-height:1.5;}
.sb-card b{font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; color:var(--ink);}
.sb-ico{width:34px; height:34px; color:var(--ochre); margin-bottom:6px;}

.sb-app{display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:16px; background:var(--paper); box-shadow:var(--shadow-card); border-top:6px solid var(--sb-c); color:var(--ink2); font-size:15.5px; line-height:1.5;}
.sb-who{font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sb-c);}
.sb-app-name{display:flex; align-items:center; gap:12px;}
.sb-app-name img{border-radius:22%; display:block;}
.sb-app-name b{font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; color:var(--ink);}
.sb-dot{display:grid; place-items:center; width:40px; height:40px; border-radius:22%; background:var(--sb-c); color:var(--paper);}
.sb-dot img{width:34px; height:34px; object-fit:contain; border-radius:0;}
.sb-care .sb-dot{background:#DDEDD9;}
.sb-watch .sb-dot{background:#DCE6F3;}
.sb-app em{font-style:normal; font-weight:700; font-size:13.5px; color:var(--ink); margin-top:auto; padding-top:8px;}

/* Five steps joined by a line; the line runs behind the numbered circles. */
.sb-flow{list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:40px 0 0; padding:0; position:relative;}
.sb-flow::before{content:""; position:absolute; top:24px; left:10%; right:10%; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--ochre),var(--up) 35%,var(--up) 55%,var(--series-blue) 75%,var(--ochre));}
.sb-flow li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; color:var(--ink2); font-size:15px; line-height:1.45;}
.sb-flow b{font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; color:var(--ink); margin-top:8px;}
.sb-flow em, .sb-order em{font-style:normal; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sb-c);}
.sb-step{display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:var(--sb-c); color:var(--paper); font-family:'Fraunces',Georgia,serif; font-size:21px; font-weight:700; box-shadow:0 0 0 6px var(--page-bg);}
.sb-note{margin-top:34px; text-align:center; font-family:'Caveat',cursive; font-size:26px; font-weight:600; color:var(--ink2);}

.sb-start{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;}
.sb-order{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.sb-order li{display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:14px; background:var(--paper); box-shadow:var(--shadow-card); border-left:6px solid var(--sb-c);}
.sb-order .sb-step{width:40px; height:40px; font-size:18px; box-shadow:none;}
.sb-order b{font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; flex:1;}

.sb-end{text-align:center;}
.sb-end .sb-h2, .sb-end .sb-lede{margin-inline:auto;}
.sb-ctas{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}

@media (max-width:900px){
  .sb-grid-4{grid-template-columns:repeat(2,1fr);}
  .sb-grid-3{grid-template-columns:1fr;}
  .sb-start{grid-template-columns:1fr; gap:28px;}
  /* The flow turns into a vertical timeline. */
  .sb-flow{grid-template-columns:1fr; gap:22px;}
  .sb-flow::before{top:10px; bottom:10px; left:24px; right:auto; width:3px; height:auto; background:linear-gradient(180deg,var(--ochre),var(--up) 35%,var(--up) 55%,var(--series-blue) 75%,var(--ochre));}
  .sb-flow li{display:grid; grid-template-columns:50px 1fr; column-gap:16px; row-gap:2px; align-items:start; text-align:left;}
  .sb-flow .sb-step{grid-row:1 / span 3;}
  .sb-flow b{margin-top:2px;}
}
@media (max-width:560px){
  .sb-sec{padding:54px 0;}
  .sb-grid-4{grid-template-columns:1fr;}
}

/* the StrayBond ribbon beside the hero eyebrow; it takes the eyebrow colour, so it reads on every sky */
.sb-brand{display:flex; align-items:center; gap:10px;}
.sb-brand .sb-ribbon{width:24px; height:36px; flex:none;}