/* quick-links bento */
.res-grid{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);overflow:hidden;grid-template-columns:1fr}
.res-tile{background:#fff;padding:2rem;display:flex;flex-direction:column;gap:.7rem;
  align-items:flex-start;text-decoration:none;transition:background .35s}
.res-tile:hover{background:var(--cloud)}
.res-tile i{font-size:1.4rem;color:var(--green)}
.res-tile h3{font-size:24px;color:var(--deep);margin:0}
.res-tile p{color:var(--muted);margin:0;flex:1}
.res-tile .link-arrow{font-size:18px}
.res-tile.dark{background:var(--deep)}
.res-tile.dark:hover{background:var(--deep-2)}
.res-tile.dark h3{color:#fff}
.res-tile.dark p{color:rgba(255,255,255,.75)}
.res-tile.dark i{color:var(--sky)}
.link-arrow.light{color:var(--sky)}
@media (min-width:768px){.res-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.res-grid{grid-template-columns:repeat(3,1fr)}}

/* chips (global) */
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chips span{border:1px solid var(--line-2);background:var(--mint);border-radius:99px;
  padding:.3rem .9rem;font-size:16px;font-weight:700;color:var(--green)}

/* first-visit step timeline */
.step-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.step{display:grid;grid-template-columns:64px 1fr;gap:1.4rem;padding:1.8rem .6rem;
  border-bottom:1px solid var(--line-2);transition:.3s}
.step:hover{background:#fff;padding-left:1.2rem}
.step .no{color:var(--sky)}
.step h4{color:var(--deep);font-size:20px;margin-bottom:.4rem}
.step p{color:var(--muted);margin:0;max-width:52ch}

/* routine cards (on dark band) */
.routine-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.rt-card{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;padding:1.7rem;color:#fff}
.rt-card .mono{color:var(--sky);font-size: 18px}
.rt-card ul{list-style:none;padding:0;margin:.9rem 0 0}
.rt-card li{padding:.45rem 0;border-bottom:1px dashed rgba(255,255,255,.18);
  color:rgba(255,255,255,.88);font-weight:600;font-size:18px;display:flex;gap:.6rem;align-items:center}
.rt-card li:last-child{border:0}
.rt-card li::before{content:"\f00c";font-family:"Font Awesome 6 Pro";font-weight:900;font-size:.7rem;color:var(--sky)}
.rt-wide{grid-column:1/-1}
.rt-wide .chips span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;font-size: 16px}

/* ask form card */
.ask-card{border:1px solid var(--line-2);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  background:#fff;padding:2.4rem;box-shadow:var(--shadow)}
.ask-h{color:var(--green);margin-bottom:1.4rem}

/* responsive */
@media (max-width:991.98px){
  .sticky-col{position:static}
  .routine-grid{grid-template-columns:1fr}
  .rt-wide{grid-column:auto}
}
@media (max-width:575.98px){
  .step{grid-template-columns:44px 1fr;gap:1rem;padding:1.4rem .4rem}
  .ask-card{padding:1.6rem}
  .res-tile{padding:1.5rem}
}