/* ============================================================================
   STAFFIVA — Guides hub + article styles.
   Loaded ALONGSIDE staffiva-landing.css (which owns the tokens, nav, footer,
   buttons, and the .faq/.qa accordion this file reuses). staffiva-landing.css
   is linked AFTER this file, so any selector that must beat a landing rule uses
   a combined-class selector (e.g. .wrap.guide-article-wrap) to raise specificity
   above the single-class landing rule rather than relying on source order.
   ============================================================================ */

/* ---- HUB HERO ---- */
.guide-hub-hero.sec{padding:56px 0 8px;}
.guide-hub-hero h1{font-size:clamp(2rem,3.8vw,2.9rem); line-height:1.06; margin:0 0 16px; max-width:760px;}
.guide-hub-hero .lead{max-width:620px;}
.guide-hub-back{margin-top:22px; font-size:14px;}
.guide-hub-back a{color:var(--text-on-variant); font-weight:600;}
.guide-hub-back a:hover{color:#fff;}

/* ---- HUB CARDS ---- */
.guide-hub-list.sec{padding:28px 0 84px;}
.guide-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.guide-card{display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  background:color-mix(in srgb, var(--surface-card) 70%, transparent);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-xl); padding:26px 26px 24px;
  box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.guide-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover);
  border-color:color-mix(in srgb, var(--purple-400) 45%, transparent);}
.guide-card-time{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--purple-200); background:var(--primary-soft); border:1px solid var(--ghost-border);
  padding:5px 11px; border-radius:var(--radius-pill);}
.guide-card-title{font-size:1.28rem; color:var(--text-primary); margin:4px 0 0;}
.guide-card-promise{font-size:14px; color:var(--text-secondary); line-height:1.55; margin:0;}
.guide-card-cta{margin-top:auto; padding-top:10px; font-family:var(--font-display); font-weight:700;
  font-size:13.5px; color:var(--primary-accent); transition:color .18s ease;}
.guide-card:hover .guide-card-cta{color:#fff;}

.guide-hub-foot{margin-top:44px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px;}
.guide-hub-foot p{font-family:var(--font-display); font-weight:700; color:var(--text-primary); font-size:1.15rem;}

/* ---- ARTICLE SHELL ---- */
.wrap.guide-article-wrap{max-width:768px; padding:44px 24px 72px;}
.guide-crumbs{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-muted); margin-bottom:26px; flex-wrap:wrap;}
.guide-crumbs a{color:var(--text-on-variant); font-weight:600;}
.guide-crumbs a:hover{color:#fff;}
.guide-crumbs-current{color:var(--text-muted);}
.guide-article-head{padding-bottom:26px; margin-bottom:34px; border-bottom:1px solid var(--ghost-border);}
.guide-article-head h1{font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.08; margin:6px 0 14px;}
.guide-article-head .lead{max-width:none;}
.guide-article-meta{margin-top:14px; font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-muted);}

/* ---- PROSE ---- */
.guide-prose{color:var(--text-secondary); font-size:1.02rem; line-height:1.72;}
.guide-prose > :first-child{margin-top:0;}
.guide-prose h2{font-size:1.42rem; color:var(--text-primary); margin:2.4rem 0 .85rem; line-height:1.2;}
.guide-prose h3{font-size:1.12rem; color:var(--text-on-surface); margin:1.8rem 0 .6rem;}
.guide-prose p{margin:0 0 1.15rem;}
.guide-prose strong{color:var(--text-on-surface); font-weight:700;}
.guide-prose a{color:var(--primary); font-weight:600; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--primary) 45%, transparent); text-underline-offset:2px;}
.guide-prose a:hover{color:var(--purple-300);}
.guide-prose code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.86em;
  background:color-mix(in srgb, var(--surface-high) 55%, transparent); border:1px solid var(--ghost-border);
  border-radius:6px; padding:2px 6px; color:var(--text-on-surface);}

/* unordered lists — dot marker */
.guide-prose ul.guide-list{list-style:none; margin:0 0 1.3rem; padding:0; display:grid; gap:11px;}
.guide-prose ul.guide-list > li{position:relative; padding-left:22px; color:var(--text-secondary);}
.guide-prose ul.guide-list > li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--gradient-primary); box-shadow:var(--glow-soft);}

/* ordered steps — numbered badge via counter */
.guide-prose ol.guide-steps{list-style:none; counter-reset:gstep; margin:0 0 1.4rem; padding:0; display:grid; gap:16px;}
.guide-prose ol.guide-steps > li{counter-increment:gstep; position:relative; padding-left:48px; min-height:34px;
  color:var(--text-secondary); padding-top:4px;}
.guide-prose ol.guide-steps > li::before{content:counter(gstep); position:absolute; left:0; top:0;
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--purple-200);
  background:var(--primary-soft); border:1px solid var(--ghost-border-strong);}

/* callout tip */
.guide-tip{margin:1.6rem 0; padding:16px 18px; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface-card) 62%, transparent);
  border:1px solid var(--ghost-border); border-left:3px solid var(--purple-400);
  font-size:.96rem; color:var(--text-secondary); line-height:1.6;}
.guide-tip strong{color:var(--purple-200);}

.guide-note{font-size:.9rem; color:var(--text-muted); margin:0 0 1.3rem;}

/* tables */
.guide-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.5rem;
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);}
table.guide-table{width:100%; border-collapse:collapse; min-width:360px;
  background:color-mix(in srgb, var(--surface-card) 68%, transparent); font-size:14px;}
table.guide-table th, table.guide-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--divider);}
table.guide-table thead th{font-family:var(--font-display); color:var(--text-primary); font-size:13.5px;
  background:color-mix(in srgb, var(--surface-low) 92%, transparent); border-bottom:1px solid var(--ghost-border-strong);}
table.guide-table tbody tr:last-child td{border-bottom:0;}
table.guide-table td{color:var(--text-secondary);}
table.guide-table td:last-child, table.guide-table th:last-child{font-family:var(--font-display); color:var(--text-on-surface); font-weight:700;}

/* FAQ — reuses landing .faq/.qa; just spacing here */
.guide-prose .guide-faq{max-width:none; margin-top:1rem;}

/* ---- ARTICLE FOOTER ---- */
.guide-article-foot{margin-top:52px;}
.guide-foot-cta{text-align:center; background:
    radial-gradient(60% 130% at 50% 0%, color-mix(in srgb, var(--purple-600) 22%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-low) 78%, transparent);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-xl); padding:38px 28px; box-shadow:var(--shadow-card);}
.guide-foot-cta h2{font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--text-primary); margin:0 0 10px; line-height:1.15;}
.guide-foot-cta p{max-width:440px; margin:0 auto 22px; color:var(--text-secondary); font-size:1rem;}
.guide-foot-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.guide-foot-back{margin-top:26px; text-align:center; font-size:14px;}
.guide-foot-back a{color:var(--text-on-variant); font-weight:600;}
.guide-foot-back a:hover{color:#fff;}

/* ---- MOTION SAFETY ---- */
@media (prefers-reduced-motion:reduce){
  .guide-card{transition:none;}
}

/* ---- RESPONSIVE ---- */
@media (max-width:760px){
  .guide-cards{grid-template-columns:1fr;}
  .wrap.guide-article-wrap{padding:32px 22px 56px;}
  .guide-prose ol.guide-steps > li{padding-left:44px;}
}
@media (max-width:480px){
  .wrap.guide-article-wrap{padding:28px 18px 48px;}
  .guide-foot-actions .btn{width:100%;}
}


/* ---- real product screenshots in guide articles ---- */
.guide-article .guide-shot{margin:26px 0 30px;}
.guide-article .guide-shot img{display:block; width:100%; height:auto; border-radius:12px;}
.guide-article .guide-shot figcaption{margin-top:10px; font-size:0.85rem; color:var(--text-muted, #8b8b99); text-align:center;}