/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./src/app/how-it-works/page.module.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/* Public walkthrough page. Deliberately self-contained rather than reusing the
   dashboard's shell: this is the one page a logged-out visitor may land on, so it
   carries its own header and needs no auth state. */

.page_page__6cAZ7 {
  --paper: #f6f7fa;
  --card: #ffffff;
  --text: #16203a;
  --muted: #5b667c;
  --rule: #e3e7f0;
  --accent: #2563eb;
  --accent-w: #e7eeff;
  --code-bg: #f0f3fa;
  --note: #8a6a1f;
  --note-bg: #fdf6e4;
  --note-rule: #e8d9ab;
  --shadow: 0 1px 2px rgba(12, 20, 36, 0.06), 0 12px 32px -12px rgba(12, 20, 36, 0.18);

  background: var(--paper);
  color: var(--text);
  min-height: 100vh;
  font-size: 17px;
  line-height: 1.65;
}

.page_wrap__S_jDo {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.page_header__aM5ZG {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 36px;
}

.page_eyebrow__aM9RZ {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.page_title___jwGw {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 640;
  text-wrap: balance;
  margin-bottom: 16px;
}

.page_lede__qiV0k {
  font-size: 19px;
  color: var(--muted);
  max-width: 62ch;
}

.page_meta__uNLO6 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}

.page_meta__uNLO6 span {
  border: 1px solid var(--rule);
  background: var(--card);
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--muted);
}

.page_meta__uNLO6 b {
  color: var(--text);
  font-weight: 600;
}

.page_legend__2B_Cl {
  margin-top: 22px;
  font-size: 15px;
  color: var(--muted);
  max-width: 64ch;
}

.page_steps__bJr2q {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* The rail encodes the sequence, so it stops after the last step. */
.page_step__CmgRf {
  position: relative;
  padding: 44px 0 8px 76px;
}

.page_step__CmgRf::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 66px;
  bottom: -44px;
  width: 2px;
  background: var(--rule);
}

.page_step__CmgRf:last-child::before {
  display: none;
}

.page_stepHead__9au8l {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: -76px;
}

.page_stepNum__TQZlD {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-w);
  color: var(--accent);
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.page_stepHead__9au8l h2 {
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}

.page_caption__R5krb {
  color: var(--muted);
  max-width: 64ch;
  margin: 14px 0 20px;
}

.page_caption__R5krb strong {
  color: var(--text);
  font-weight: 600;
}

.page_caption__R5krb em,
.page_note__D6RtC em {
  color: var(--text);
  font-style: italic;
}

.page_prompt__GqdXM {
  max-width: 72ch;
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--code-bg);
  padding: 13px 16px;
}

.page_promptLabel__mGB1b {
  display: block;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.page_promptText___z6zL {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0;
}

.page_note__D6RtC {
  max-width: 72ch;
  margin: 0 0 20px;
  border: 1px solid var(--note-rule);
  border-radius: 8px;
  background: var(--note-bg);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--note);
}

.page_figure__WxNwF {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  background: var(--card);
  margin: 0;
}

.page_figure__WxNwF img {
  display: block;
  width: 100%;
  height: auto;
}

/* Covers the account name AND email in the product sidebar — this page is public.
   Every capture is exactly 1440x900, so these percentages map to a fixed region:
   the name sits at y~800 and the email at y~822, with "Sign out" below at y~865.
   Covering y 774-841 takes both and leaves Sign out visible.
   An earlier version was 4.4% tall and covered only the name — verify against a
   rendered frame, not by eye on the numbers, if these are ever changed. */
.page_redact__mj7BW {
  position: absolute;
  left: 1.2%;
  bottom: 6.4%;
  width: 15.5%;
  height: 7.6%;
  border-radius: 5px;
  background: #1c2740;
}

.page_footer__R9uwd {
  margin-top: 76px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 15px;
  max-width: 64ch;
}

.page_footer__R9uwd em {
  color: var(--text);
  font-style: italic;
}

.page_cta__yUN7P {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.page_cta__yUN7P:hover {
  background: #1d4fd8;
}

@media (max-width: 640px) {
  .page_wrap__S_jDo {
    padding: 40px 16px 64px;
  }
  .page_step__CmgRf {
    padding-left: 0;
  }
  .page_step__CmgRf::before {
    display: none;
  }
  .page_stepHead__9au8l {
    margin-left: 0;
  }
}