/* ==========================================================================
   page.css — shared styling for the standalone content pages
   (privacy policy, terms, disclaimer, blog index). Layered on top of
   style.css so the header, footer and brand styling stay identical.
   ========================================================================== */

.doc-wrap { max-width: 860px; margin: 0 auto; padding: 24px 18px 48px; }

.doc-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-xs); padding: 30px 32px;
}

.doc-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.doc-head h1 {
  font-size: 30px; font-weight: 800; letter-spacing: -.8px;
  color: #0b1f3f; line-height: 1.2; margin-bottom: 8px;
}
.doc-head .doc-sub { margin: 0; font-size: 14.5px; color: var(--muted); }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin-top: 12px; font-size: 12.5px; color: var(--muted);
}
/* Each entry is a normal text block, not a flex row: the long byline holds
   several text nodes, and as flex items those were laid out as separate
   unwrappable columns on narrow screens. */
.doc-meta span { display: block; }
.doc-meta span i { margin-right: 7px; }
.doc-meta i { color: var(--blue); }
.doc-meta a { overflow-wrap: anywhere; }

.doc-card h2 {
  margin: 26px 0 9px; font-size: 19px; font-weight: 800;
  color: var(--navy); letter-spacing: -.2px;
}
.doc-card h2:first-of-type { margin-top: 4px; }
.doc-card h3 { margin: 18px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.doc-card p { margin: 0 0 13px; font-size: 14.5px; line-height: 1.75; color: #42587a; }
.doc-card strong { color: var(--navy); font-weight: 700; }
.doc-card a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.doc-card a:hover { color: var(--blue-dark); }

.doc-card ul { margin: 0 0 15px; padding: 0; list-style: none; }
.doc-card ul li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 14.5px; line-height: 1.7; color: #42587a;
}
.doc-card ul li::before {
  content: ''; position: absolute; left: 4px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}

.callout {
  background: var(--blue-soft); border: 1px solid #dbe9fb;
  border-radius: 12px; padding: 15px 18px; margin: 0 0 18px;
}
.callout p { margin: 0; font-size: 14px; color: #35506f; }
.callout p + p { margin-top: 9px; }

.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; font-weight: 600; }

/* "Back to Home" button sitting between the content card and the footer.
   Reuses the site's existing .btn / .btn-primary styling; this block only
   handles the placement and centring. */
.back-home-wrap { max-width: 860px; margin: 0 auto; padding: 0 18px 40px; text-align: center; }

/* ------------------------------------------------------------ blog index */
.post-list { display: grid; gap: 14px; margin-top: 4px; }
.post-item {
  display: block; border: 1px solid var(--line); border-radius: 13px;
  padding: 17px 19px; background: #fcfdff; transition: .2s;
}
.post-item:hover { border-color: #bfd8fa; box-shadow: 0 10px 24px rgba(16,42,77,.08); }
.post-item h2 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; color: var(--navy); }
.post-item h2 a { color: var(--navy); text-decoration: none; }
.post-item:hover h2 a { color: var(--blue); }
.post-item p { margin: 0 0 9px; font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.post-item .post-date { font-size: 12px; color: #93a8c4; }
.post-soon {
  display: inline-block; margin-left: 9px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2px;
  background: #fff7eb; color: #b45309; padding: 3px 8px; border-radius: 999px;
}

/* --------------------------------------------------------- blog article */
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--blue); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 4px; }

.post-figure { margin: 22px 0; }
.post-figure img {
  width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: 12px; background: #fff;
}
.post-figure figcaption {
  margin-top: 9px; font-size: 12.5px; color: var(--muted);
  line-height: 1.6; text-align: center;
}

/* the snippet-target definition box */
.callout.definition {
  background: #f6fbff; border-color: #c9ddfa;
  border-left: 4px solid var(--blue);
}

/* ordered how-to list */
.howto-list { margin: 4px 0 18px; padding-left: 0; list-style: none; counter-reset: ht; }
.howto-list li {
  position: relative; counter-increment: ht;
  padding: 0 0 0 42px; margin-bottom: 15px;
  font-size: 14.5px; line-height: 1.75; color: #42587a;
}
.howto-list li::before {
  content: counter(ht);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}

/* data tables */
.table-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%; min-width: 460px; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.data-table caption {
  caption-side: top; text-align: left;
  font-size: 12.5px; color: var(--muted); padding: 0 0 9px;
}
.data-table th, .data-table td {
  text-align: left; padding: 10px 13px;
  border-bottom: 1px solid #eef4fc; font-size: 13.5px; line-height: 1.6;
}
.data-table thead th {
  background: #f6fafe; color: var(--navy); font-weight: 700; font-size: 13px;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td { color: #42587a; }
.data-table strong { color: var(--navy); }

/* author box */
.author-box {
  display: flex; gap: 15px; align-items: flex-start;
  margin: 28px 0 0; padding: 18px 20px;
  background: #f8fbfe; border: 1px solid var(--line); border-radius: 13px;
}
.author-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  display: grid; place-items: center; font-size: 17px;
}
.author-box h2 { margin: 0 0 5px; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.author-box p { margin: 0; font-size: 13.5px; line-height: 1.7; }

/* sources list */
.sources { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.sources h2 { margin: 0 0 11px; font-size: 16px; }
.sources ul li { font-size: 13.5px; margin-bottom: 7px; }
.sources-note { margin: 11px 0 0; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------- article page with a sidebar */
/* The blog article now sits in the same .page-grid used by the home and tool
   pages, so it can carry the identical sidebar ad slots. The article card
   keeps the exact width it had before (860px wrap minus its 18px gutters),
   and the shell supplies the side padding, so nothing about the reading
   column changes. */
/* width:100% is required: as a grid item with auto side margins the wrap
   would size to its max-content (the article's wide data table) instead of
   the column, which pushed the page sideways on a phone. min-width:0 lets
   the table keep its own horizontal scroll inside the column. */
.article-grid > .doc-wrap {
  width: 100%; min-width: 0; max-width: 824px; margin: 0 auto; padding: 0 0 14px;
}
.article-grid > .sidebar { min-width: 0; }

/* ---------------------------------------------------------- contact page */
/* Used only by /contact/. Every class is new and prefixed .contact-, so no
   other page is affected. The hero card itself reuses the existing .hero. */
.contact-hero { padding: 26px 30px 26px; }
.contact-title { display: flex; align-items: center; gap: 16px; }
.contact-title-ico {
  width: 60px; height: 60px; flex: none; border-radius: 16px;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8); color: #fff;
  display: grid; place-items: center; font-size: 24px;
  box-shadow: 0 8px 18px rgba(37,99,235,.28);
}
.contact-hero h1 { margin: 0; font-size: 36px; line-height: 1.15; letter-spacing: -1px; }
.contact-lead { margin: 16px 0 0; max-width: 560px; font-size: 15.5px; color: #5c7490; }
.contact-chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.contact-chips li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #3f587a; }
.contact-chips .chip-ico {
  width: 28px; height: 28px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 12px;
}

.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.contact-card {
  background: #f8fbfe; border: 1px solid var(--line); border-radius: 13px;
  padding: 20px 16px 18px; text-align: center; transition: .2s;
}
.contact-card:hover { border-color: #bfd8fa; box-shadow: 0 10px 24px rgba(16,42,77,.08); }
.contact-ico {
  width: 50px; height: 50px; margin: 0 auto 13px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; color: #fff;
}
.contact-ico.is-email { background: var(--blue-dark); }
.contact-ico.is-whatsapp { background: var(--green-dark); }
.contact-ico.is-telegram { background: var(--purple); }
.contact-card h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 800; color: var(--navy); }
.contact-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.contact-card a { font-size: 13.5px; font-weight: 700; color: var(--blue); overflow-wrap: anywhere; }
.contact-card a:hover { text-decoration: underline; }

.contact-advertise {
  display: flex; align-items: center; gap: 18px; margin-top: 20px;
  padding: 18px 20px; background: #f5f1ff; border: 1px solid #e4dcfb; border-radius: 14px;
}
.contact-advertise-ico {
  width: 44px; height: 44px; flex: none; border-radius: 12px; background: #fff;
  color: var(--purple); display: grid; place-items: center; font-size: 18px;
  box-shadow: var(--shadow-xs);
}
.contact-advertise-copy { flex: 1; min-width: 0; }
.contact-advertise h2 { margin: 0 0 5px; font-size: 16px; font-weight: 800; color: var(--navy); }
.contact-advertise p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #55607f; }
.btn-purple { background: var(--purple); color: #fff; box-shadow: 0 6px 16px rgba(139,92,246,.28); }
.btn-purple:hover { background: #7c3aed; transform: translateY(-1px); }

/* --- message form + side tips */
#contact-form-section, #contact-topics, #contact-steps-section, #contact-faq { margin-top: 20px; }

/* soft tinted panel with a decorative corner glow */
.contact-msg { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfdff 0%, #fff 220px); }
.msg-glow {
  position: absolute; top: -120px; right: -90px; width: 300px; height: 300px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(37,99,235,.10), rgba(37,99,235,0) 68%);
}
.contact-msg > .section-head, .contact-msg > .contact-split { position: relative; z-index: 1; }

.contact-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.contact-form {
  display: grid; gap: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; box-shadow: var(--shadow-xs);
}
.form-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-row { display: grid; gap: 7px; position: relative; }
.form-row label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.form-row label i { color: var(--blue); font-size: 12px; }
.form-row label em { font-style: normal; color: var(--red); font-weight: 700; }

.input-wrap { position: relative; display: block; }
.field-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: #9db4d4; pointer-events: none; transition: color .15s;
}
.select-caret {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #9db4d4; pointer-events: none;
}
.input-wrap:focus-within .field-ico, .input-wrap:focus-within .select-caret { color: var(--blue); }

.form-row input, .form-row select, .form-row textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: #f7fbff; border: 1.5px solid #dde8f7; border-radius: 11px;
  padding: 12px 14px; transition: .18s;
}
.form-row input, .form-row select { padding-left: 38px; height: 46px; }
.form-row select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.form-row textarea { resize: vertical; min-height: 140px; line-height: 1.65; }
.form-row input::placeholder, .form-row textarea::placeholder { color: #a6b9d3; }
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: #c6d9f2; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
.form-row .is-invalid { border-color: var(--red); background: #fff7f7; box-shadow: 0 0 0 4px rgba(239,68,68,.10); }

.count-wrap { display: flex; align-items: center; gap: 10px; }
.count-bar { flex: 1; height: 4px; border-radius: 999px; background: #eaf1fa; overflow: hidden; }
.count-bar b { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--blue); transition: width .2s ease; }
.count-bar b.is-full { background: var(--orange); }
.form-count { flex: none; font-size: 11.5px; color: #93a8c4; font-variant-numeric: tabular-nums; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 2px; }
.form-actions .btn-lg { padding: 13px 24px; font-size: 15px; }
.btn-send { position: relative; overflow: hidden; }
.btn-send:hover { transform: translateY(-2px); }
.btn-send:active { transform: translateY(0); }
.btn-green.btn-send { box-shadow: 0 6px 16px rgba(22,163,74,.26); }
.btn-ghost {
  background: #fff; color: var(--blue); border: 1.5px solid #dde8f7;
  padding: 11px 18px; font-size: 14px; border-radius: 10px;
}
.btn-ghost:hover { background: var(--blue-soft); border-color: #c6d9f2; }

.form-status {
  margin: 0; font-size: 13px; font-weight: 600; color: #166534;
  background: #e9fbf0; border: 1px solid #c6f0d7; border-radius: 10px; padding: 11px 13px;
}
.form-status:empty { display: none; }
.form-status.is-error { color: #b91c1c; background: #fef2f2; border-color: #fbd5d5; }
.form-note {
  display: flex; gap: 9px; margin: 0; padding: 12px 14px;
  background: #f7fbff; border: 1px dashed #d5e3f6; border-radius: 11px;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.form-note i { color: var(--green-dark); margin-top: 3px; }

.contact-side {
  background: linear-gradient(160deg, #eef5ff, #f9fcff); border: 1px solid #dbe9fb;
  border-radius: 14px; padding: 18px;
}
.contact-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  background: #fff; border: 1px solid #dbe9fb; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--blue); box-shadow: var(--shadow-xs);
}
.contact-badge i { color: var(--orange); }

.side-person {
  display: flex; align-items: center; gap: 11px; margin: 14px 0 4px;
  padding: 11px 12px; background: #fff; border: 1px solid #e3edfa; border-radius: 12px;
}
.side-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.side-person b { display: block; font-size: 13.5px; color: var(--navy); }
.side-person small { display: block; font-size: 11.5px; color: var(--muted); }

.contact-side h3 { margin: 16px 0 10px; font-size: 15.5px; font-weight: 800; color: var(--navy); }
.contact-tips { margin: 0; padding: 0; list-style: none; }
.contact-tips li { display: flex; gap: 9px; margin-bottom: 12px; font-size: 13px; line-height: 1.6; color: #4a6283; }
.contact-tips i {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: #dcfce7; color: var(--green-dark); display: grid; place-items: center; font-size: 10px;
}

.side-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #d5e3f6; }
.side-stats div { text-align: center; }
.side-stats b { display: block; font-size: 15px; font-weight: 800; color: var(--blue); }
.side-stats small { display: block; font-size: 10.5px; line-height: 1.35; color: var(--muted); }

/* --- topic shortcuts */
.contact-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contact-topic {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: #f8fbfe; border: 1px solid var(--line); border-radius: 12px; transition: .2s;
}
.contact-topic:hover { border-color: #bfd8fa; box-shadow: 0 10px 24px rgba(16,42,77,.08); transform: translateY(-2px); }
.contact-topic b { display: block; font-size: 13.5px; color: var(--navy); }
.contact-topic small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.topic-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 15px; }
.t-blue { background: #e8f1ff; color: var(--blue); }
.t-red { background: #fee9e9; color: var(--red); }
.t-amber { background: #fff4de; color: #d97706; }
.t-green { background: #dcfce7; color: var(--green-dark); }
.t-teal { background: #d9f6f2; color: #0d9488; }
.t-purple { background: #efe8ff; color: var(--purple); }

/* --- what happens next */
.contact-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.contact-steps li { position: relative; padding: 18px 16px; background: #f8fbfe; border: 1px solid var(--line); border-radius: 13px; text-align: center; }
.contact-steps li:not(:last-child)::after {
  content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
  position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: #a9bedb;
}
.step-num {
  width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.contact-steps h3 { margin: 0 0 5px; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.contact-steps p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

#contact-faq .faq-grid { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-advertise { flex-direction: column; text-align: center; }
  .contact-split { grid-template-columns: minmax(0, 1fr); }
  .contact-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-steps { grid-template-columns: minmax(0, 1fr); }
  .contact-steps li:not(:last-child)::after { content: '\f078'; right: auto; left: 50%; top: auto; bottom: -13px; transform: translateX(-50%); }
}
@media (max-width: 520px) {
  .form-2col { grid-template-columns: minmax(0, 1fr); }
  .contact-topics { grid-template-columns: minmax(0, 1fr); }
  .contact-form { padding: 16px; }
  .form-actions .btn-lg, .form-actions .btn-ghost { width: 100%; }
}
@media (max-width: 640px) {
  .contact-hero { padding: 22px 18px; }
  .contact-title { flex-direction: column; text-align: center; gap: 12px; }
  .contact-hero h1 { font-size: 28px; letter-spacing: -.6px; }
  .contact-lead { text-align: center; }
  .contact-chips { justify-content: center; }
}

@media (max-width: 640px) {
  .doc-card { padding: 20px 17px; }
  .doc-head h1 { font-size: 23px; letter-spacing: -.5px; }
  .doc-card h2 { font-size: 17px; }
  .howto-list li { padding-left: 0; padding-top: 36px; }
  .howto-list li::before { left: 50%; transform: translateX(-50%); top: 0; }
  .author-box { flex-direction: column; align-items: center; text-align: center; }
  .author-avatar { margin: 0 auto; }
}