/* DM Sans, self-hosted; same files as the @font-face rules in ../style.css. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════
   Blog article styles — Rana.dev
   Shares the landing page palette and type so posts read as part of
   the same site. Tokens mirror ../style.css.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --navy:    #141312;
  --navy2:   #1B1917;
  --inset:   #100F0E;
  --card:    #2A2624;
  --border:  #4A433E;
  --orange:  #F5751F;
  --orange2: #C4520C;
  --on-orange: #141312;      /* dark text on the orange accent: 6.58:1 vs 2.55:1 for white */
  --orange-hover: #FF8A3D;
  --amber:   #E8A33D;
  --teal:    #6E8CA6;
  --white:   #F6F3EF;
  --body:    #D6CFC8;
  --muted:   #938981;
  --muted2:  #BCB2A9;

  --orange-dim:  rgba(245,117,31,0.10);
  --orange-dim2: rgba(245,117,31,0.18);

  --radius-lg:  0.5rem;
  --radius-xl:  0.75rem;
  --radius-2xl: 1rem;

  --font-head: 'Outfit', sans-serif;
  --font-body: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--body);
  line-height: 1.75;
  font-size: 1.02rem;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
.container-narrow { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── Header — mirrors the landing page nav in ../style.css so the bar is
   identical across the site. Sticky rather than fixed so the article below
   is not overlapped. ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 72px;
  background: rgba(20,19,18,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.3s;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em;
  color: var(--white); text-decoration: none;
}
/* Several blog pages load only this file, so the lockup needs its own sizing
   here too — otherwise it renders at its native 318px and blows out the nav. */
.nav-logo .logo,
.footer-logo .logo {
  height: 52px; width: auto; display: block; flex: none;
}
@media (max-width: 600px) {
  .nav-logo .logo, .footer-logo .logo { height: 40px; }
}
.nav-logo span { color: var(--orange); }
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; }
.nav-links a {
  color: var(--muted2); text-decoration: none;
  font-size: 0.9rem; font-weight: 400; transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a[aria-current="page"] { color: var(--orange); }
.nav-cta {
  background: var(--orange); color: var(--on-orange) !important;
  padding: 0.5rem 1.25rem; border-radius: 6px;
  font-weight: 500 !important; transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--orange-hover) !important; color: var(--on-orange) !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: 0; margin: 0; font: inherit; color: inherit; }
.hamburger span {
  width: 24px; height: 2px; background: var(--white);
  border-radius: 2px; transition: all 0.3s;
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* Footer wordmark */
.wordmark {
  font-family: var(--font-head);
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--white); text-decoration: none;
}
.wordmark span { color: var(--orange); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--orange); color: var(--on-orange) !important;
  font-weight: 600; font-size: 0.875rem;
  padding: 0.6rem 1.2rem; border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(245,117,31,0.25);
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--orange-hover); transform: translateY(-1px); }
.btn-lg { font-size: 1rem; padding: 0.85rem 1.7rem; }

/* ── Hero ── */
.hero {
  background:
    radial-gradient(900px 380px at 80% -10%, rgba(245,117,31,0.10), transparent 70%),
    linear-gradient(180deg, var(--navy2) 0%, var(--navy) 100%);
  padding: 3.5rem 0 2.75rem;
  border-bottom: 1px solid var(--border);
}
.breadcrumb { font-size: 0.8rem; color: var(--muted); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--orange); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.chip {
  background: var(--orange-dim); color: var(--orange);
  border: 1px solid var(--orange-dim2);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.7rem; border-radius: 9999px;
}
h1 {
  font-family: var(--font-head);
  color: var(--white);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.14;
  margin-bottom: 1rem;
}
.hero .lede {
  font-size: 1.13rem; color: var(--body);
  max-width: 46rem; margin-bottom: 1.5rem;
}
.post-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: 0.85rem; color: var(--muted);
}
.post-meta strong { color: var(--muted2); font-weight: 500; }

/* ── Article body ── */
article { padding: 0 0 1rem; }
article > .container-narrow { padding-top: 2.75rem; }
section { scroll-margin-top: 5rem; margin-bottom: 3rem; }
h2 {
  font-family: var(--font-head);
  color: var(--white);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.25;
  margin-bottom: 1rem; padding-top: 0.5rem;
}
h3 {
  font-family: var(--font-head);
  color: var(--white);
  font-size: 1.15rem; font-weight: 600;
  margin: 1.75rem 0 0.6rem;
}
p { margin-bottom: 1rem; }
article a { color: var(--orange); text-decoration: none; font-weight: 500; }
article a:hover { text-decoration: underline; }
ul, ol { margin: 0 0 1.25rem 1.4rem; }
li { margin-bottom: 0.45rem; }
strong { color: var(--white); font-weight: 500; }

/* ── Quick answer box ── */
.quick-answer {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius-2xl);
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}
.quick-answer h2 {
  font-size: 0.95rem; margin-bottom: 0.75rem; padding-top: 0;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange);
}
.quick-answer ul { margin-bottom: 0; }
.quick-answer li { font-size: 0.97rem; }

/* ── Table of contents ── */
.toc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}
.toc h2 {
  font-size: 0.95rem; margin-bottom: 0.75rem; padding-top: 0;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted2);
}
.toc ol { margin: 0 0 0 1.25rem; columns: 2; column-gap: 2.5rem; }
.toc li { font-size: 0.95rem; margin-bottom: 0.5rem; break-inside: avoid; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ── Cards ── */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 1.25rem 1.35rem;
  transition: border-color 0.25s, transform 0.25s;
}
.card:hover { border-color: var(--orange-dim2); transform: translateY(-2px); }
.card h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.card p { margin: 0; font-size: 0.9rem; color: var(--muted2); }
.card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-lg);
  background: var(--orange-dim); color: var(--orange);
  margin-bottom: 0.75rem;
}
.card .icon svg { width: 1.2rem; height: 1.2rem; }

/* ── Scenario blocks ── */
.scenario {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.6rem 1.75rem;
  margin: 1.5rem 0;
}
.scenario h3 { margin: 0 0 0.75rem; font-size: 1.2rem; }
.scenario .tag {
  display: inline-block;
  background: var(--orange-dim); color: var(--orange);
  border: 1px solid var(--orange-dim2);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2rem 0.65rem; border-radius: 9999px; margin-bottom: 0.75rem;
}
.old-new { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 640px) { .old-new { grid-template-columns: 1fr; } }
.old-way, .new-way { border-radius: var(--radius-xl); padding: 1rem 1.15rem; font-size: 0.92rem; }
.old-way { background: var(--inset); border: 1px solid var(--border); }
.new-way { background: var(--orange-dim); border: 1px solid var(--orange-dim2); }
/* h3 or h4 depending on the page's outline; both look the same here */
.old-way :is(h3, h4), .new-way :is(h3, h4) {
  font-family: inherit;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; margin: 0 0 0.5rem;
}
.old-way :is(h3, h4) { color: var(--muted); }
.new-way :is(h3, h4) { color: var(--orange); }
.old-way p, .new-way p { margin-bottom: 0; }

/* ── Callouts ── */
.callout {
  background: var(--orange-dim);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1rem 1.25rem; margin: 1.5rem 0;
  font-size: 0.95rem;
}
.callout strong { color: var(--orange); }
.callout p:last-child { margin-bottom: 0; }

/* ── Steps ── */
.steps { list-style: none; margin: 1.5rem 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 1.75rem 3.25rem; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.15rem; height: 2.15rem;
  background: var(--orange); color: var(--on-orange);
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 800; font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(245,117,31,0.28);
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute; left: 1.05rem; top: 2.5rem; bottom: 0.35rem;
  width: 2px; background: var(--border);
}
.steps h3 { margin: 0.2rem 0 0.35rem; font-size: 1.1rem; }
.steps p { font-size: 0.97rem; margin-bottom: 0.5rem; }

/* ── Tables ── */
.table-wrap {
  overflow-x: auto; margin: 1.5rem 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card);
}
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  background: var(--orange-dim); color: var(--orange);
  font-weight: 600; white-space: nowrap;
  text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em;
}
tr:last-child td { border-bottom: none; }

/* ── FAQ ── */
details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 1rem 1.35rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.25s;
}
details:hover { border-color: var(--orange-dim2); }
details summary {
  cursor: pointer; font-weight: 500; color: var(--white);
  list-style: none; position: relative; padding-right: 2rem;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 0; top: 0;
  color: var(--orange); font-size: 1.25rem; font-weight: 700; line-height: 1.4;
}
details[open] summary::after { content: "\2212"; }
details p { margin: 0.75rem 0 0; font-size: 0.95rem; }

/* ── Transcript panel (AI phone call / SMS posts) ── */
.transcript {
  background: var(--inset);
  border: 1px solid var(--border);
  color: var(--body);
  border-radius: var(--radius-2xl);
  padding: 1.5rem 1.75rem; margin: 1.5rem 0;
  font-size: 0.93rem; line-height: 1.65;
}
.transcript .line { margin-bottom: 0.85rem; }
.transcript .line:last-child { margin-bottom: 0; }
.transcript .speaker {
  display: block; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 0.15rem;
}
.transcript .ai .speaker { color: var(--orange); }
.transcript .caller .speaker { color: var(--teal); }
.transcript .note {
  border-top: 1px solid var(--border);
  margin-top: 1.25rem; padding-top: 1rem;
  font-size: 0.85rem; color: var(--muted2);
}

/* ── Math card (ROI post) ── */
.math-card {
  background: var(--inset);
  border: 1px solid var(--border);
  color: var(--body);
  border-radius: var(--radius-2xl);
  padding: 1.5rem 1.75rem; margin: 1.5rem 0;
  font-size: 0.95rem; line-height: 1.8;
}
.math-card h3 { color: var(--white); margin: 0 0 0.75rem; font-size: 1.05rem; }
.math-card .row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.math-card .row:last-of-type { border-bottom: none; }
.math-card .row .val { color: var(--muted2); font-weight: 600; white-space: nowrap; }
.math-card .total {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 1rem;
  font-weight: 700; color: var(--white);
}
.math-card .total .val { color: var(--orange); }
.math-card .note { margin-top: 1rem; font-size: 0.85rem; color: var(--muted2); }

/* ── CTA ── */
.cta {
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(245,117,31,0.16), transparent 70%),
    linear-gradient(135deg, var(--card) 0%, var(--navy2) 100%);
  border: 1px solid var(--orange-dim2);
  border-radius: var(--radius-2xl);
  padding: 2.75rem 2rem; text-align: center;
  margin: 3rem 0;
}
.cta h2 { color: var(--white); padding-top: 0; }
.cta p { color: var(--body); max-width: 34rem; margin: 0 auto 1.5rem; }
.cta .btn-primary { background: var(--orange); color: var(--on-orange) !important; }
.cta .btn-primary:hover { background: var(--orange-hover); }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--navy2);
  padding: 2rem 0; margin-top: 2rem;
  font-size: 0.85rem; color: var(--muted);
}
.site-footer .inner {
  max-width: 72rem; margin: 0 auto; padding: 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-nav a { color: var(--muted2); text-decoration: none; transition: color 0.2s; }
.footer-nav a:hover { color: var(--orange); }

/* ── GUIDES DROPDOWN ── */
.nav-links li { position: relative; }
.nav-guides { position: relative; }
.nav-guides > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-guides > a svg { width: 10px; height: 10px; transition: transform 0.2s; }
.nav-guides:hover > a svg,
.nav-guides:focus-within > a svg { transform: rotate(180deg); }

/* hover bridge across the gap between the link and the panel */
.nav-guides::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 30px; }

.nav-dropdown {
  /* Sits under the Guides item itself. It used to be centred on the whole nav
     bar so a four-column panel could not overflow; with one CRM the panel is
     narrow and centring just stranded it in the middle of the screen. */
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(300px, 92vw);
  max-width: calc(100vw - 2rem);
  background: rgba(27,25,23,0.98);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 120;
}
.nav-guides:hover .nav-dropdown,
.nav-guides:focus-within .nav-dropdown,
.nav-guides.is-open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* The panel is far wider than the Guides item, so travelling diagonally to an
   outer column would otherwise leave the item's hover area and shut the menu.
   This strip spans the whole bar across the gap between the item and the panel.
   It only becomes interactive when the panel does, inheriting pointer-events. */
.nav-dropdown::before {
  content: '';
  position: absolute;      /* the panel's transform is its containing block */
  left: 0; right: 0;
  top: -28px; height: 28px;
}

.nav-dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }
.nav-dd-col { min-width: 0; }
.nav-dd-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.88rem;
  color: var(--white) !important;
  margin-bottom: 0.6rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.nav-dd-head img {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 5px; background: #fff; padding: 2px; object-fit: contain;
}
.nav-dd-col a:not(.nav-dd-head) {
  display: block; font-size: 0.82rem; line-height: 1.45;
  color: var(--muted2); padding: 0.28rem 0;
}
.nav-dd-col a:not(.nav-dd-head):hover { color: var(--orange); }
.nav-dd-all {
  display: block; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem; font-weight: 500;
  color: var(--orange) !important;
}

@media (max-width: 900px) {
  /* inside the hamburger menu the panel sits inline and expands on tap */
  .nav-dropdown {
    position: static; transform: none; width: 100%;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; padding: 0.6rem 0 0.2rem;
  }
  .nav-guides.open .nav-dropdown { display: block; }
  .nav-guides:hover .nav-dropdown,
  .nav-guides:focus-within .nav-dropdown { transform: none; }
  .nav-guides.open > a svg { transform: rotate(180deg); }
  .nav-guides::after { display: none; }
  .nav-dd-grid { grid-template-columns: 1fr; gap: 0.15rem; }
  /* only the four series headings on mobile — 16 links is too long */
  .nav-dd-col a:not(.nav-dd-head) { display: none; }
  .nav-dd-head {
    margin: 0; padding: 0.45rem 0 0.45rem 0.9rem;
    border-bottom: none; font-size: 0.85rem; font-weight: 600;
  }
  .nav-dd-all { margin-top: 0.5rem; padding: 0.5rem 0 0 0.9rem; border-top: none; }
}

/* two columns where a four-across panel would crowd */
@media (max-width: 1150px) and (min-width: 901px) {
  .nav-dd-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem 1.5rem; }
  .nav-dropdown { width: min(300px, 92vw); }
}

/* ── SCROLLBAR ── */
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--orange) var(--navy2); }

/* WebKit / Chromium — applies to the page and to any inner scroll area
   such as the wide tables inside articles */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--navy2); }
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 8px;
  border: 3px solid var(--navy2);
}
::-webkit-scrollbar-thumb:hover { background: var(--orange2); }
::-webkit-scrollbar-corner { background: var(--navy2); }