/* Free guides sent by the Instagram comment-to-DM bot:
   /guides/ (the hub) and /guides/google, /rebuild, /questions, /real, /leads, /hire.
   Builds on css/site.css (tokens, nav, buttons, sections, footer). Loaded
   render-blocking after site.css, so equal-specificity rules here win. */

/* ---------- Hero ---------- */
.guide-hero { padding-top: 40px; padding-bottom: 28px; }
@media (min-width: 768px) { .guide-hero { padding-top: 64px; padding-bottom: 44px; } }
@media (min-width: 1024px) { .guide-hero { padding-top: 88px; padding-bottom: 64px; } }
.guide-hero .hero__headline { max-width: 17ch; margin-bottom: 24px; text-wrap: balance; }
.guide-hero__lead { max-width: 58ch; font-size: 17px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
@media (min-width: 768px) { .guide-hero__lead { font-size: 18px; } }
@media (min-width: 1024px) {
  /* Lead lengths run from 3 to 7 lines across the guides. Bottom-aligning them
     pushed the long ones up above the headline, so the lead now starts on the
     headline's first line instead, whatever its length. */
  .guide-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .guide-hero__grid .hero__headline { max-width: none; margin-bottom: 0; }
  .guide-hero__grid .guide-hero__lead { padding-top: 12px; }
}
.guide-hero__tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.guide-hero__tag .dot-icon { margin: 0; }
/* "Free guide" in the tag is the way back to the hub: make it look like a link */
.guide-hero__tag a {
  color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--t), text-underline-offset var(--t);
  padding: 6px 0; /* inline padding: a 24px+ tap target without moving the line */
}
.guide-hero__tag a:hover { color: var(--accent); text-underline-offset: 5px; }

/* ---------- Guide body: facts aside + checklist ---------- */
.guide { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 8px; padding-bottom: 56px; }
@media (min-width: 1024px) {
  .guide { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 80px; padding-bottom: 104px; }
}
.guide__aside { display: flex; flex-direction: column; gap: 22px; align-self: start; }
@media (max-width: 1023px) {
  .guide__aside { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 22px; border: 1px solid var(--border-soft); border-radius: 24px; background: var(--bg-secondary); }
}
@media (min-width: 600px) and (max-width: 1023px) { .guide__aside { grid-template-columns: 1fr 1fr; } }
/* Desktop: the facts ride along beside the checklist instead of leaving the
   left column empty for the rest of the page. */
@media (min-width: 1024px) {
  .guide__aside { position: sticky; top: calc(var(--nav-h) + 44px); }
}
.guide__fact .mono-caption { display: block; margin-bottom: 6px; }
.guide__fact p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.guide__fact p b { color: var(--text-primary); font-weight: 700; }

.checklist__group + .checklist__group { margin-top: 48px; }
@media (min-width: 1024px) { .checklist__group + .checklist__group { margin-top: 64px; } }
.checklist__group-title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 18px; text-wrap: balance; }
@media (min-width: 768px) { .checklist__group-title { font-size: 38px; } }
.checklist__group-title .mono-caption { display: block; font-family: var(--font-body); margin-bottom: 10px; }

.checklist { border-top: 1.5px solid var(--text-primary); }
.check { border-bottom: 1px solid var(--border-soft); }
.check__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 20px 0; cursor: pointer; align-items: start; }
@media (min-width: 768px) { .check__row { grid-template-columns: 28px 52px minmax(0, 1fr); gap: 16px; padding: 26px 0; } }

.check__box {
  appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 28px; height: 28px; flex-shrink: 0;
  border: 1.5px solid var(--text-primary); border-radius: 9px; background: #fff;
  display: grid; place-content: center; cursor: pointer; transition: background var(--t), border-color var(--t), transform var(--t);
}
.check__box::after {
  content: ''; width: 12px; height: 6px; border-left: 2.5px solid var(--text-primary); border-bottom: 2.5px solid var(--text-primary);
  transform: translateY(-2px) rotate(-45deg); opacity: 0; transition: opacity var(--t);
}
.check__box:checked { background: var(--accent); }
.check__box:checked::after { opacity: 1; }
.check__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.check__row:hover .check__box { transform: translateY(-1px); border-color: var(--accent); }
.check__row:active .check__box { transform: scale(0.92); }

.check__num { display: none; font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--accent); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .check__num { display: block; } }

.check__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-primary); text-wrap: pretty; transition: color var(--t); }
@media (min-width: 768px) { .check__title { font-size: 20px; } }
.check__how { display: block; margin-top: 8px; font-size: 15px; line-height: 1.62; color: var(--text-secondary); max-width: 68ch; text-wrap: pretty; }
@media (min-width: 768px) { .check__how { font-size: 16px; } }
.check__how b { font-weight: 700; color: var(--text-primary); }
.check__box:checked ~ .check__text .check__title {
  color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px;
}

.guide a.inline, .guide-note a.inline {
  color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-underline-offset var(--t);
}
.guide a.inline:hover, .guide-note a.inline:hover { text-underline-offset: 5px; }
.guide code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; background: var(--bg-tile); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }

/* The proof point after the checklist. On desktop it spans the column so its
   edges line up with the rules above and below, label left and text right on
   the same 2:3 split as the FAQ (the 38px gap puts the text exactly on the FAQ
   answers' left edge). The text is a bare run after the label span; an inline
   element such as <b> or <a> placed straight in the note would become its own
   grid item, so wrap the text in one <span> if it ever needs one. */
.guide-note { margin-top: 40px; padding: 22px 24px; border-radius: 24px; background: var(--bg-secondary); border: 1px solid var(--border-soft); font-size: 15px; line-height: 1.62; color: var(--text-secondary); max-width: 76ch; text-wrap: pretty; }
@media (min-width: 768px) { .guide-note { font-size: 16px; padding: 26px 30px; } }
.guide-note .mono-caption { display: block; margin-bottom: 8px; }
@media (min-width: 1024px) {
  .guide-note { max-width: none; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 38px; align-items: baseline; }
  .guide-note .mono-caption { margin-bottom: 0; }
}
.guide-note b { color: var(--text-primary); }

/* ---------- Closing panel ---------- */
.guide-end.final-cta { padding: 64px 0; }
@media (min-width: 768px) { .guide-end.final-cta { padding: 88px 0; } }
.guide-end .section-headline { margin: 16px auto 18px; max-width: 18ch; text-wrap: balance; }
.guide-end__body { max-width: 46ch; margin: 0 auto 30px; font-size: 16px; line-height: 1.6; color: var(--text-on-dark-muted); text-wrap: pretty; }
.guide-end .guide-end__back { color: var(--text-on-dark); border-bottom: 1px solid var(--accent); padding: 8px 0 2px; transition: padding-bottom var(--t); }
.guide-end .guide-end__back:hover { padding-bottom: 5px; }


/* ---------- FAQ at the end of each guide (visible text = its FAQPage JSON-LD) ---------- */
.guide-faq { margin-top: 56px; }
@media (min-width: 1024px) { .guide-faq { margin-top: 80px; } }
.faq { border-top: 1.5px solid var(--text-primary); }
.faq__item { border-bottom: 1px solid var(--border-soft); padding: 20px 0; }
@media (min-width: 768px) { .faq__item { padding: 26px 0; } }
.faq__q { font-family: var(--font-body); font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-primary); }
@media (min-width: 768px) { .faq__q { font-size: 20px; } }
.faq__a { margin-top: 8px; font-size: 15px; line-height: 1.62; color: var(--text-secondary); max-width: 68ch; }
@media (min-width: 768px) { .faq__a { font-size: 16px; } }
/* site.css styles .faq__q/.faq__a as the services pages' <details> accordion
   (flex row, 24-28px padding, pointer cursor). These FAQs are always open, so
   undo that here; it was doubling every gap. */
.guide-faq .faq__q { display: block; padding: 0; cursor: auto; text-wrap: pretty; }
.guide-faq .faq__a { padding: 0; text-wrap: pretty; }
@media (min-width: 1024px) {
  .guide-faq .faq__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 48px; align-items: start; }
  .guide-faq .faq__a { margin-top: 2px; }
}


/* ---------- Hub: /guides/ ---------- */
.guides-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 72px; }
@media (min-width: 768px) { .guides-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .guides-list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 112px; } }
.guides-list > li { display: flex; }
/* Same tinted, rounded box as the guides' own aside and note (site.css .box is
   the older sharp ink frame used elsewhere, so this stays scoped to the hub). */
.guides-list .box {
  display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%;
  padding: 26px 24px; border: 1px solid var(--border-soft); border-radius: 24px; background: var(--bg-secondary);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
@media (min-width: 768px) { .guides-list .box { padding: 30px 30px 28px; } }
.guides-list .box:hover { border-color: var(--text-primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26, 26, 26, 0.08); }
.guides-list .box:active { transform: translateY(-1px); }
.guides-list .box:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.guides-list .box__label { margin-bottom: 0; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em; color: var(--text-primary); }
.guides-list h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin-top: 4px; }
@media (min-width: 1024px) { .guides-list h2 { font-size: 32px; } }
.guides-list .box__body { flex: 1; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
/* Ink text on the coral rule, like the guides' inline links: coral text on the
   tinted card measured 3.5:1, under AA for 14px. */
.guides-list .link-arrow { align-self: flex-start; margin-top: 10px; color: var(--text-primary); border-bottom-width: 1.5px; }
.guides-list .box:hover .link-arrow { gap: 14px; }