/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.29_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/.pnpm/next@14.2.29_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./app/(marketing)/guides/_shared/guide.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.guide_inner__6_jfZ {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Hero ─────────────────────────────────────────────── */
.guide_hero__LcdPX {
  background: var(--dark);
  padding: clamp(56px, 8vw, 88px) 0 clamp(48px, 7vw, 72px);
}

.guide_breadcrumb____QTE {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-dim);
  margin-bottom: 20px;
}

.guide_breadcrumbLink__pTOEd {
  color: var(--ink-muted);
  text-decoration: none;
}

.guide_breadcrumbLink__pTOEd:hover {
  color: var(--ink);
}

.guide_category__lrDa5 {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-dark);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 20px;
}

.guide_heroHeading__hyC7M {
  font-size: clamp(2rem, 4.5vw, 3.125rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
  margin-bottom: 18px;
}

.guide_heroSub__NJELX {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 58ch;
  margin-bottom: 24px;
  text-wrap: pretty;
}

.guide_metaRow__38gF3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

.guide_metaDot__PZfea {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-dim);
  flex-shrink: 0;
}

/* ── Article body ─────────────────────────────────────── */
.guide_article__PxYYT {
  background: var(--light);
  padding: clamp(48px, 7vw, 80px) 0;
}

/* Same max-width as .inner (hero, keep-reading, CTA) so the section
   boundary stays constant down the page; only the prose elements inside
   (see .body/.stepBody/.tipBody's own ch-based max-widths) stay narrow for
   readability. Narrowing this container itself is what caused the page to
   visually pinch in for the article and widen back out around it. */
.guide_articleInner__CtZMd {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.guide_section__JJ55d {
  /* Left-aligned (not centered) at the same 760px reading width as the
     paragraph text inside it, so steps/tips/lists don't stretch edge to
     edge across the full 1120px container, while the container itself
     (and its left edge, matching the hero heading above) stays constant. */
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 56px);
}

.guide_section__JJ55d:last-child {
  margin-bottom: 0;
}

.guide_sectionHeading__wxVjA {
  font-size: clamp(1.375rem, 2.5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-light);
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 16px;
}

.guide_body__yEcfw {
  font-size: 1rem;
  color: var(--ink-light-mid);
  line-height: 1.75;
  max-width: 68ch;
  text-wrap: pretty;
  margin-bottom: 16px;
}

.guide_body__yEcfw:last-child {
  margin-bottom: 0;
}

.guide_body__yEcfw strong {
  color: var(--ink-light);
  font-weight: 600;
}

.guide_body__yEcfw code,
.guide_tipBody__DV_md code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--light-alt);
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ink-light);
}

.guide_plainList__XjrQ6 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

/* Not flex: a flex container splits its <strong> child and the trailing
   text node into separate flex items, each wrapping independently: that's
   what caused the bold label to break onto its own line, misaligned from
   the description text next to it. Positioning the bullet dot instead
   keeps the <strong> and its following text in one normal inline flow. */
.guide_plainListItem__ta_9w {
  position: relative;
  padding-left: 15px;
  font-size: 1rem;
  color: var(--ink-light-mid);
  line-height: 1.65;
}

.guide_plainListItem__ta_9w::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Steps ────────────────────────────────────────────── */
.guide_stepList__SvvlN {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e4e4e7;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
}

.guide_step__R1a2_ {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-gap: 16px;
  gap: 16px;
  padding: 20px 22px;
  border-top: 1px solid #f0f0f2;
}

.guide_step__R1a2_:first-child {
  border-top: none;
}

.guide_stepNumber__gHaaJ {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.guide_stepTitle__fzwkT {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-light);
  margin-bottom: 4px;
}

.guide_stepBody__vauzo {
  font-size: 0.9375rem;
  color: var(--ink-light-mid);
  line-height: 1.65;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ── Tip / note callouts ──────────────────────────────── */
.guide_tip__l7XIY {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(14, 165, 233, 0.25);
  background: rgba(14, 165, 233, 0.06);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.guide_tipIcon__Zaw0T {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}

.guide_tipLabel__j0f0M {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-hover);
  margin-bottom: 3px;
}

.guide_tipBody__DV_md {
  font-size: 0.9375rem;
  color: var(--ink-light-mid);
  line-height: 1.6;
  max-width: 60ch;
}

.guide_warn__rs03h {
  border-color: rgba(217, 119, 6, 0.28);
  background: rgba(217, 119, 6, 0.07);
}

.guide_warn__rs03h .guide_tipIcon__Zaw0T {
  color: #b45309;
}

.guide_warn__rs03h .guide_tipLabel__j0f0M {
  color: #92400e;
}

/* ── Keep reading ─────────────────────────────────────── */
.guide_moreSection__39JLT {
  background: var(--light-alt);
  border-top: 1px solid #e4e4e7;
  padding: clamp(48px, 7vw, 72px) 0;
}

.guide_moreHeading__bS6l9 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-light);
  margin-bottom: 28px;
}

.guide_moreGrid__BVNJG {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.guide_moreCard__VFW1u {
  display: block;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: var(--r-lg);
  padding: 20px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.guide_moreCard__VFW1u:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.guide_moreCardCategory__X5rk2 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}

.guide_moreCardTitle__ehZf2 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-light);
  line-height: 1.4;
  margin-bottom: 6px;
}

.guide_moreCardDesc__9KJWl {
  font-size: 0.8125rem;
  color: var(--ink-light-muted);
  line-height: 1.55;
}

/* ── CTA ──────────────────────────────────────────────── */
.guide_ctaSection__VFkU1 {
  background: var(--dark);
  padding: clamp(56px, 8vw, 88px) 0;
}

.guide_ctaInner__DJ89q {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.guide_ctaHeading__fQtzF {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 6px;
}

.guide_ctaSub__NgD6w {
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.guide_ctaPrimary__LtvOZ {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.guide_ctaPrimary__LtvOZ:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .guide_step__R1a2_ {
    grid-template-columns: 32px 1fr;
    padding: 16px;
  }
}