/* ============================================================
   DatomiLab — guides.css
   Velocity sub-pages, guides, comparisons and tools.
   Builds on style.css tokens (brand blues, orange, fonts).
   ============================================================ */

/* ---------- compact hero ---------- */
.phero--compact{min-height:auto;padding:8.5rem 1.5rem 3.2rem}
.phero--compact .phero__title{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.06;max-width:22ch}
.phero--compact .phero__sub{margin:1.2rem 0 1.6rem;max-width:62ch}
.phero--compact .crumb{flex-wrap:wrap}
.gmeta{display:flex;flex-wrap:wrap;gap:1.2rem;color:rgba(255,255,255,.62);font-size:.88rem}
.gmeta b{color:rgba(255,255,255,.9);font-weight:600}

/* ---------- article layout ---------- */
.glayout{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 1.5rem clamp(4rem,8vw,6rem);
  display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(2rem,4vw,4rem);align-items:start}
.glayout--full{grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){.glayout{grid-template-columns:minmax(0,1fr)}.gside{order:-1}}

.prose{max-width:72ch;font-size:1.04rem;color:var(--ink-2);line-height:1.75}
.prose > * + *{margin-top:1.05rem}
.prose h2{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:clamp(1.45rem,2.6vw,1.9rem);
  line-height:1.2;letter-spacing:-.01em;margin-top:2.8rem;scroll-margin-top:100px}
.prose h3{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1.18rem;margin-top:1.9rem;scroll-margin-top:100px}
.prose a{color:var(--blue-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--orange-600)}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li + li{margin-top:.4rem}
.prose strong{color:var(--ink)}
.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--paper-2);border:1px solid var(--line);
  padding:.08em .38em;border-radius:5px;color:var(--blue-900)}
.prose .lead{font-size:1.14rem;color:var(--ink)}

/* code blocks */
.codeblock{position:relative;margin-top:1.1rem}
.codeblock pre{background:#06214d;color:#dbe7ff;border-radius:12px;padding:1.1rem 1.2rem;overflow-x:auto;
  font-family:var(--f-mono);font-size:.84rem;line-height:1.6;border:1px solid #0b3170}
.codeblock pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.codeblock__label{display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--muted);margin-bottom:.35rem}
.copybtn{position:absolute;top:1.75rem;right:.6rem;font:600 .74rem var(--f-body);color:#dbe7ff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:.3rem .6rem;cursor:pointer}
.copybtn:hover{background:rgba(255,255,255,.18)}
.codeblock--nolabel .copybtn{top:.55rem}

/* callouts */
.note{border-left:3px solid var(--blue-500);background:#fff;padding:1rem 1.2rem;border-radius:0 10px 10px 0;
  box-shadow:0 1px 0 var(--line)}
.note--warn{border-left-color:var(--orange)}
.note--ok{border-left-color:#12a36a}
.note p + p{margin-top:.5rem}
.note__t{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink);margin-bottom:.25rem}

/* tables */
.tablewrap{overflow-x:auto;margin-top:1.1rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.prose table{border-collapse:collapse;width:100%;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--f-display);font-weight:600;color:var(--ink);background:var(--paper-2)}
.prose tr:last-child td{border-bottom:0}

/* steps (real sequences only) */
.prose ol.steps{list-style:none;padding:0;counter-reset:st}
.prose ol.steps > li{counter-increment:st;position:relative;padding-left:2.6rem}
.prose ol.steps > li::before{content:counter(st);position:absolute;left:0;top:.05rem;width:1.8rem;height:1.8rem;border-radius:50%;
  background:var(--blue-700);color:#fff;font:600 .85rem/1.8rem var(--f-display);text-align:center}

/* product box inside a guide */
.velbox{margin-top:2.6rem;border-radius:16px;padding:1.5rem 1.6rem;color:#fff;
  background:radial-gradient(120% 140% at 90% 0%,var(--blue-700),var(--blue-900) 60%,#03183a)}
.velbox h2,.velbox h3{color:#fff;margin-top:0}
.velbox p{color:rgba(255,255,255,.82)}
.velbox .btn{margin-top:1rem}
.velbox__actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- sidebar ---------- */
.gside{position:sticky;top:96px;display:grid;gap:1.2rem}
@media (max-width:960px){.gside{position:static}}
.toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}
.toc__t{font-family:var(--f-display);font-weight:600;font-size:.95rem;margin-bottom:.5rem;color:var(--ink)}
.toc ol{list-style:none;display:grid;gap:.15rem}
.toc a{display:block;font-size:.9rem;color:var(--muted);padding:.28rem 0 .28rem .7rem;border-left:2px solid var(--line)}
.toc a:hover,.toc a.on{color:var(--blue-700);border-left-color:var(--blue-500)}
@media (max-width:960px){.toc{display:none}}
.sidecta{border-radius:14px;padding:1.2rem;background:var(--blue-900);color:#fff}
.sidecta b{font-family:var(--f-display);font-size:1.05rem;display:block;margin-bottom:.35rem}
.sidecta p{font-size:.9rem;color:rgba(255,255,255,.75);margin-bottom:.9rem}
.sidecta .btn{width:100%;justify-content:center;padding:.75rem 1rem;font-size:.92rem}
.sidecta a.sidecta__alt{display:block;text-align:center;margin-top:.7rem;font-size:.86rem;color:rgba(255,255,255,.75);text-decoration:underline}

/* ---------- related + hub cards ---------- */
.related{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem clamp(4rem,8vw,6rem)}
.related h2{font-family:var(--f-display);font-weight:600;font-size:1.5rem;margin-bottom:1.2rem}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.gcard{display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.2rem 1.25rem;transition:border-color .2s,transform .2s}
.gcard:hover{border-color:var(--blue-400);transform:translateY(-2px)}
.gcard__cat{font-size:.78rem;color:var(--orange-600);font-weight:600}
.gcard__t{font-family:var(--f-display);font-weight:600;font-size:1.06rem;line-height:1.3;color:var(--ink)}
.gcard__d{font-size:.9rem;color:var(--muted)}
.gcard__m{margin-top:auto;font-size:.8rem;color:var(--muted)}
.gcard--tool{background:var(--paper-2)}

.hub{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 1.5rem}
.hub__sec + .hub__sec{margin-top:3rem}
.hub__sec h2{font-family:var(--f-display);font-weight:600;font-size:1.45rem;margin-bottom:1rem}

/* ---------- product sub-pages ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.4rem}
.pbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.25rem}
.pbox h3{margin-top:0;font-size:1.05rem}
.pbox p{font-size:.95rem;margin-top:.4rem}
.reqs{margin-top:1.1rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.reqs div{display:grid;grid-template-columns:180px 1fr;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.95rem}
.reqs div:last-child{border-bottom:0}
.reqs dt{font-weight:600;color:var(--ink)}
@media (max-width:600px){.reqs div{grid-template-columns:1fr;gap:.2rem}}

.pricecard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.8rem;box-shadow:var(--shadow-md);max-width:520px}
.pricecard__p{font-family:var(--f-display);font-weight:700;font-size:2.6rem;color:var(--ink);line-height:1}
.pricecard__per{color:var(--muted);font-size:.95rem;margin-top:.3rem}
.pricecard ul{margin-top:1.2rem;padding-left:1.2rem}
.pricecard .btn{margin-top:1.4rem}

/* ---------- tools ---------- */
.tool{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(1.2rem,3vw,1.8rem)}
.tool__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem 1.2rem}
.tfield{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.tfield > span{font-weight:600;color:var(--ink)}
.tfield small{color:var(--muted);font-size:.8rem}
.tfield input[type=text],.tfield input[type=number],.tfield select{font:inherit;font-size:.95rem;padding:.62rem .75rem;
  border:1px solid #cfd9e8;border-radius:9px;background:#fff;color:var(--ink);width:100%}
.tfield input:focus,.tfield select:focus{outline:2px solid var(--blue-400);outline-offset:1px;border-color:var(--blue-400)}
.tcheck{display:flex;align-items:flex-start;gap:.55rem;font-size:.92rem;color:var(--ink-2)}
.tcheck input{margin-top:.3rem;accent-color:var(--blue-700)}
.tool__out{margin-top:1.6rem}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--line);margin-bottom:.2rem}
.tabs button{font:600 .88rem var(--f-body);background:none;border:0;padding:.6rem .9rem;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--blue-700);border-bottom-color:var(--blue-700)}
.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin-top:1.4rem}
.result div{background:var(--paper-2);border-radius:12px;padding:1rem}
.result b{display:block;font-family:var(--f-display);font-size:1.5rem;color:var(--ink)}
.result span{font-size:.84rem;color:var(--muted)}
.tool__err{color:#b42318;font-size:.9rem;margin-top:.8rem}

/* ---------- velocity page: explore links ---------- */
.explore{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.explore a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.25rem;transition:border-color .2s}
.explore a:hover{border-color:var(--accent,var(--blue-500))}
.explore b{font-family:var(--f-display);font-size:1.05rem;display:block;color:var(--ink)}
.explore span{font-size:.9rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.gcard,.gcard:hover{transition:none;transform:none}}

/* ---------- Velocity section bar (only on /velocity/* pages) ---------- */
.vnav{position:sticky;top:var(--navh,70px);z-index:900;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.vnav__in{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:1.4rem;min-height:52px}
.vnav__brand{font-family:var(--f-display);font-weight:700;color:var(--blue-900);flex-shrink:0}
.vnav__links{display:flex;gap:1.3rem;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.vnav__links::-webkit-scrollbar{display:none}
.vnav__links a{white-space:nowrap;font-size:.9rem;font-weight:500;color:var(--muted);padding:1rem 0;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.vnav__links a:hover{color:var(--ink)}
.vnav__links a[aria-current="page"]{color:var(--blue-700);border-bottom-color:var(--blue-700)}
.vnav__cta{flex-shrink:0;font-size:.85rem;font-weight:600;color:#fff;background:var(--blue-700);
  padding:.45rem .95rem;border-radius:999px}
.vnav__cta:hover{background:var(--blue-800)}
@media (max-width:720px){
  .vnav__brand{display:none}
  .vnav__in{gap:.8rem;padding:0 1rem}
  .vnav__cta{padding:.4rem .8rem}
}