/* =========================================================
   /start-here/ — additions on top of services.css.
   Scoped .dpo-start (page wrapper also carries .dpo-services
   so the whole base system + tokens are inherited).
   Only genuinely-new components live here.
   ========================================================= */

/* breadcrumb */
.dpo-start .bc{font-size:.82rem;color:var(--muted);padding:14px 0 0;}
.dpo-start .bc a{color:var(--muted);}
.dpo-start .bc a:hover{color:var(--accent-ink);}
.dpo-start .bc [aria-current]{color:var(--ink-2);font-weight:600;}
.dpo-start .bc span{margin:0 .45rem;color:var(--line);}

/* trust line under hero CTAs */
.dpo-start .trustline{margin-top:1.1rem;font-size:.9rem;color:var(--muted);font-weight:600;}

/* situation-route cards: reuse .svc, add an icon slot */
.dpo-start .route .ico{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;}
.dpo-start .route .ico svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.9;}
.dpo-start .route .q{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}

/* horizontal decision flow (6 stages) — desktop row, mobile column */
.dpo-start .flow{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:0;counter-reset:flow;}
.dpo-start .flow li{position:relative;padding:20px 16px;border:1px solid var(--line);
  border-right:none;background:#fff;}
.dpo-start .flow li:first-child{border-radius:var(--radius) 0 0 var(--radius);}
.dpo-start .flow li:last-child{border-right:1px solid var(--line);border-radius:0 var(--radius) var(--radius) 0;}
.dpo-start .flow li::before{counter-increment:flow;content:counter(flow);
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:999px;background:var(--accent);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:.82rem;margin-bottom:.6rem;}
.dpo-start .flow li h3{font-size:.98rem;margin:0 0 .3rem;}
.dpo-start .flow li p{font-size:.82rem;margin:0;color:var(--slate);}
.dpo-start .flow li .arw{position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  z-index:2;width:18px;height:18px;background:#fff;border:1px solid var(--line);border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--accent);}
.dpo-start .flow li:last-child .arw{display:none;}
@media(max-width:820px){
  .dpo-start .flow{grid-template-columns:1fr;}
  .dpo-start .flow li{border-right:1px solid var(--line);border-bottom:none;border-radius:0;}
  .dpo-start .flow li:first-child{border-radius:var(--radius) var(--radius) 0 0;}
  .dpo-start .flow li:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);}
  .dpo-start .flow li .arw{right:auto;left:50%;top:auto;bottom:-9px;transform:translateX(-50%) rotate(90deg);}
}

/* numbered question cards (01 / 02 / 03) */
.dpo-start .qs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2rem;}
@media(max-width:820px){.dpo-start .qs{grid-template-columns:1fr;}}
.dpo-start .qcard{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:26px 24px;}
.dpo-start .qcard .num{font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--paper-3);line-height:1;}
.dpo-start .qcard .num b{color:var(--accent);}
.dpo-start .qcard h3{font-size:1.05rem;margin:.5rem 0 .5rem;}
.dpo-start .qcard p{font-size:.92rem;margin:0;}

/* "your likely next step" decision tree */
.dpo-start .tree{margin-top:2rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);padding:8px 6px;}
.dpo-start .tree ol{list-style:none;margin:0;padding:0;}
.dpo-start .tree .node{padding:14px 18px;}
.dpo-start .tree .qline{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1rem;}
.dpo-start .tree .branch{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem;}
.dpo-start .tree .lab{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;color:var(--ink-2);}
.dpo-start .tree .lab a{color:var(--accent-ink);}
.dpo-start .tree .lab .yes{color:#0a7d34;font-weight:800;}
.dpo-start .tree .lab .no{color:#B42318;font-weight:800;}
.dpo-start .tree .node + .node{border-top:1px dashed var(--line);}

/* "what not to do first" warning callouts */
.dpo-start .warns{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:2rem;}
@media(max-width:720px){.dpo-start .warns{grid-template-columns:1fr;}}
.dpo-start .warn{border-left:4px solid #B42318;background:#fff;border:1px solid var(--line);
  border-left:4px solid #B42318;border-radius:var(--radius);padding:20px 22px;}
.dpo-start .warn h3{font-size:1rem;margin:0 0 .35rem;color:var(--ink);}
.dpo-start .warn h3::before{content:"×";color:#B42318;font-weight:700;margin-right:.5rem;}
.dpo-start .warn p{font-size:.9rem;margin:0;}

/* 4-column variant of the shared timeline */
.dpo-start .tl--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:820px){.dpo-start .tl--4{grid-template-columns:1fr;}}

/* sources module */
.dpo-start .sources{max-width:820px;margin:0 auto;font-size:.9rem;color:var(--slate);}
.dpo-start .sources h3{font-size:1rem;}
.dpo-start .sources ul{margin:.6rem 0 0 1.1rem;}
.dpo-start .sources li{margin:.3rem 0;}
.dpo-start .sources .rev{margin-top:1rem;font-size:.82rem;color:var(--muted);}