/* Agency Blog SaaS - fabricated demo. Self-contained, no external calls. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

/*
  Palette and component patterns below match the real, live public design
  system read directly off davonex.com's own CSS (:root tokens, .card/.btn/
  .eyebrow components), per the owner's direction to style this demo after
  davonex.com rather than digitalise.agency's own indigo palette. Colors,
  radii, and shadows are copied 1:1; nothing here is invented. This is public
  visual design language (what every visitor's browser already renders), not
  any site's private server code, auth, or billing logic, which stays out of
  this repo entirely.
*/
:root {
  --bg: #FAFBFE;
  --bg-alt: #EFF4FD;
  --paper: #FFFFFF;
  --blue: #136BEE;
  --blue-deep: #0C4497;
  --navy: #062757;
  --tint: #A9C9F8;
  --ink: #08152B;
  --ink-soft: #46597A;
  --good: #15803D;
  --line: rgba(6, 39, 87, .12);
  --line-strong: rgba(6, 39, 87, .22);
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(8, 21, 43, .06), 0 6px 18px rgba(8, 21, 43, .05);
  --shadow-md: 0 10px 30px rgba(12, 68, 151, .12), 0 2px 8px rgba(8, 21, 43, .06);
  --shadow-blue: 0 18px 40px rgba(19, 107, 238, .28);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 960px;
}

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

html { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% -8%, rgba(19, 107, 238, .12), transparent 60%),
    radial-gradient(700px 520px at -6% 12%, rgba(169, 201, 248, .18), transparent 55%),
    var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: repeating-linear-gradient(-22deg, rgba(6, 39, 87, .03) 0 1px, transparent 1px 38px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.1) 55%, transparent);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

code, pre { font-family: var(--mono); }

.demo-banner {
  background: #FFD93D;
  border-bottom: 1px solid var(--line);
  color: #16130E;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  position: relative; z-index: 5;
}

/* ============================ Nav ============================ */
.demo-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 251, 254, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.demo-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 14px; }
.demo-nav__brand { display: flex; align-items: center; gap: 11px; }
.demo-nav__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; box-shadow: 0 6px 16px rgba(19,107,238,.3);
}
.demo-nav__name { font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; color: var(--navy); }
.demo-nav__tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: rgba(19,107,238,.08); padding: 5px 11px; border-radius: 999px;
}

/* ============================ Eyebrow / Hero ============================ */
.eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--blue); display: inline-block; }

header.hero { padding: 56px 0 30px; }
h1 { font-weight: 700; letter-spacing: -.02em; color: var(--navy); font-size: clamp(28px, 4.2vw, 40px); line-height: 1.08; margin: 0 0 12px; }
.lede { font-size: 15px; color: var(--ink-soft); max-width: 640px; margin: 0 0 8px; }

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; font-size: 14px; padding: 13px 22px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; background: none; color: inherit;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  min-height: 44px;
}
.btn .arr { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arr { transform: translateX(3px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover:not(:disabled) { transform: translateY(-2px); background: #0f5fdd; box-shadow: 0 20px 40px rgba(19,107,238,.34); }
.btn--yellow { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--yellow:hover:not(:disabled) { border-color: var(--navy); transform: translateY(-2px); background: rgba(6,39,87,.04); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Tabs */
.tabs { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink-soft);
  box-shadow: var(--shadow-sm); transition: background .2s, color .2s, border-color .2s;
}
.tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tab:not(.is-active):hover { border-color: var(--blue); color: var(--navy); }

main { padding: 32px 0 80px; flex: 1 0 auto; width: 100%; }
.panel { display: none; }
.panel.is-active { display: block; }

.card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); background: var(--paper);
  padding: 30px 28px; margin-bottom: 20px; position: relative; overflow: hidden;
  transition: box-shadow .3s ease;
}
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--blue); transition: width .5s ease; }
.card:hover::before { width: 100%; }
.card h2 { color: var(--navy); font-size: 1.3rem; margin-bottom: 6px; }

.credits-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 20px; margin-bottom: 18px; font-size: 14px;
}
.credits-banner b { font-size: 19px; color: var(--blue-deep); }

label { display: block; font-weight: 700; font-size: 13px; margin: 16px 0 6px; color: var(--navy); }
input, textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 14px; font-family: inherit; font-size: 14px; background: var(--paper); color: var(--ink);
}
input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(19,107,238,.15); border-color: var(--blue); }
textarea { min-height: 74px; resize: vertical; }

.status-line { margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.spinner {
  width: 14px; height: 14px; border: 2px solid var(--tint); border-top-color: var(--blue);
  border-radius: 50%; display: inline-block; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Autofill (AI Blog Generator form): one button, picks a random real post */
.autofill-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.autofill-note { font-size: 12.5px; color: var(--ink-soft); }

/*
  Blog Library. Real-post cards mirror davonex.com's own .post-card layout
  (image, h3 link, excerpt, post-meta, read-link), built from its live CSS,
  populated with the real, live, public post list copied into REAL_DAVONEX_POSTS
  in demo-data.js (titles/excerpts/dates/read-times verbatim). No image is
  hotlinked from davonex.com anywhere (that would be a live third-party request
  on every page load); each card uses a labeled placeholder block instead.
*/
.library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .library-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .library-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 16px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
  cursor: pointer;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(19,107,238,.3); }
.post-card__img {
  width: 100%; aspect-ratio: 16/9; border-radius: 10px; border: 1px solid var(--line);
  overflow: hidden; background: var(--bg-alt);
}
.post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card h3 { margin: 14px 0 0; font-size: .98rem; line-height: 1.3; color: var(--navy); }
.post-card .excerpt { margin-top: 9px; font-size: .88rem; color: var(--ink-soft); flex: 1; }
.post-card .post-meta {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.post-card .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: .5; }
.post-card .read-link { margin-top: 11px; font-weight: 700; font-size: 12.5px; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.post-card .read-link .arr { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.post-card:hover .read-link .arr { transform: translateX(3px); }
.post-card--demo { border: 1.5px solid var(--blue); box-shadow: var(--shadow-md); }
.demo-ribbon {
  display: inline-block; margin-top: 11px; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; color: #fff; background: var(--blue); padding: 4px 9px; border-radius: 999px;
}

/* ============================ In-page article reader ============================ */
.reader {
  max-width: 720px; margin: 20px auto 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 0 0 30px; overflow: hidden;
}
.reader__hero { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
.reader__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reader__body { padding: 26px 32px 0; }
.reader__demo-flag {
  display: inline-block; margin-bottom: 12px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: #fff; background: var(--blue); padding: 5px 11px; border-radius: 999px;
}
.reader__body h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; }
.reader__meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reader__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: .5; }
.reader__prose p { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); line-height: 1.72; }
.reader__prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.15; margin-top: 34px; color: var(--navy); }
.reader__prose h3 { font-size: 1.1rem; margin-top: 22px; color: var(--navy); }
.reader__prose ul, .reader__prose ol { margin-top: 13px; padding-left: 22px; display: grid; gap: 8px; }
.reader__prose li { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.reader__prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.reader__prose th, .reader__prose td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.reader__prose thead th, .reader__prose th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--bg-alt); }
.reader__prose sup.citation a { color: var(--blue); font-weight: 700; text-decoration: none; }
.reader__refs { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.reader__refs h2 { font-size: 1.05rem; color: var(--navy); margin-bottom: 10px; }
.reader__refs ol { padding-left: 20px; display: grid; gap: 6px; }
.reader__refs li { font-size: .85rem; color: var(--ink-soft); }
.reader__refs a { color: var(--blue); font-weight: 600; }
.reader__provenance { margin-top: 26px; padding: 14px 16px; background: var(--bg-alt); border-radius: var(--r-sm); font-size: 12px; color: var(--ink-soft); }
.reader__provenance a { color: var(--blue); font-weight: 600; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.plan {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px;
  background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan h3 { margin: 0 0 4px; color: var(--navy); }
.plan .price { font-size: 24px; font-weight: 700; margin: 6px 0; color: var(--blue-deep); }
.plan p { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.plan.is-pro { background: linear-gradient(160deg, rgba(19,107,238,.08), var(--paper) 60%); border-color: rgba(19,107,238,.35); box-shadow: var(--shadow-md); }

.redeem-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.redeem-row input { flex: 1; min-width: 220px; }

.updates-list { border-left: 2px solid var(--line); padding-left: 18px; }
.update-item { margin-bottom: 18px; }
.update-item time { font-size: 12px; color: var(--blue-deep); font-family: var(--mono); display: block; margin-bottom: 4px; }

footer.site-foot { border-top: 1px solid var(--line); padding: 36px 0 30px; font-size: 13px; color: var(--ink-soft); }
.foot-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.foot-brand .demo-nav__mark { width: 26px; height: 26px; font-size: 12px; }
.foot-brand strong { font-size: 1.05rem; color: var(--navy); }
.foot-tag { max-width: 340px; }
.foot-right { text-align: right; }