/* ============================================================
   Leslie's Insurance - service pages (2026-11-05)
   Used by /registro-y-renovaciones/, /transferencia-de-titulo/,
   /duplicados-dmv/ and /oficina/ on top of site.css.
   Plain, document-like blocks: form numbers, deadlines, counter steps.
   ============================================================ */

/* hero: one plain fact line instead of chip clusters */
.page-hero .fact-line{margin:16px 0 0; font-size:.86rem; line-height:1.55; color:#c9d2e6; max-width:62ch;}
.page-hero .fact-line strong{color:#fff; font-weight:600;}
.btn svg{width:20px; height:20px; flex:none;}

/* DMV form numbers, e.g. REG 343 */
.form-code{
  display:inline-block; font-family:ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size:.86em; font-weight:700; letter-spacing:.02em; color:var(--navy); background:var(--cream-2);
  border:1px solid #e3d3bb; border-radius:6px; padding:0 6px; white-space:nowrap;
}

/* "what to bring": a plain checklist, not cards */
.bring-list{list-style:none; margin:0 0 14px; padding:0; border-top:1px solid var(--line);}
.bring-list li{position:relative; padding:14px 0 14px 34px; border-bottom:1px solid var(--line); margin:0;}
.bring-list li::before{
  content:""; position:absolute; left:4px; top:17px; width:16px; height:16px; border:2px solid var(--navy); border-radius:4px;
}
.bring-list li b{color:var(--navy);}

/* counter steps */
.counter-steps{list-style:none; counter-reset:step; margin:0 0 14px; padding:0;}
.counter-steps li{counter-increment:step; position:relative; padding:0 0 18px 48px; margin:0;}
.counter-steps li::before{
  content:counter(step); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%;
  background:var(--navy); color:#fff; font:700 .95rem/32px var(--font-display); text-align:center;
}
.counter-steps li b{color:var(--navy);}

/* deadlines the DMV sets */
.deadlines{display:grid; grid-template-columns:1fr; gap:0; margin:0 0 14px; border-top:1px solid var(--line);}
.deadline{display:grid; grid-template-columns:6.5rem 1fr; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line);}
.deadline dt{font-family:var(--font-display); font-weight:800; font-size:1.6rem; line-height:1.1; color:var(--red);}
.deadline dt small{display:block; font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy);}
.deadline dd{margin:0; color:var(--ink-soft); line-height:1.6;}
.deadline dt .form-code{font-size:.62em;}

/* "source" notes under official facts */
.source-note{font-size:.84rem; color:var(--ink-soft); margin:4px 0 0;}
.prose-body .source-note a{font-weight:600;}

/* a single honest photo with a caption */
.place-photo{max-width:760px; margin:0 auto 20px;}
.place-photo picture, .place-photo img{display:block; width:100%; height:auto; border-radius:var(--radius-md);}
.place-photo figcaption{font-size:.88rem; color:var(--ink-soft); line-height:1.55; margin:10px 2px 0;}

/* office facts */
.office-facts{max-width:760px; margin:0 auto; display:grid; grid-template-columns:1fr; border-top:1px solid var(--line);}
.office-facts .row{display:grid; grid-template-columns:7.5rem 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.office-facts dt{font-weight:700; color:var(--navy); font-size:.95rem;}
.office-facts dd{margin:0; color:var(--ink-soft); line-height:1.6;}
.office-facts dd a{display:inline-block; padding:4px 0; color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.office-actions{max-width:760px; margin:20px auto 0; display:flex; flex-wrap:wrap; gap:12px;}
.office-actions .btn{flex:1 1 240px;}
.lic-small{font-size:.9rem; color:var(--ink-soft); line-height:1.6;}

/* related services: a plain list of links */
.related{max-width:760px; margin:0 auto; padding:0; list-style:none; border-top:1px solid var(--line);}
.related li{border-bottom:1px solid var(--line);}
.related a{
  display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; padding:10px 2px;
  color:var(--navy); font-weight:700; text-decoration:none;
}
.related a:hover{color:var(--red);}
.related a span[aria-hidden]{color:var(--red);}

@media(min-width:640px){
  .deadline{grid-template-columns:8rem 1fr;}
  .office-facts .row{grid-template-columns:9rem 1fr;}
}