/* ============================================================
   YOUSIF AL JBOURI — Variant A: "Signal Lime"
   Light editorial. White base, black nav island, lime accent.
   Palette lifted directly from creatorflow.so — #FFFFFF body,
   #000000 hero/nav bands, #D1FE17 accent — per explicit request.
   RTL-ready: logical properties used throughout.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Surface ramp — warm-neutral whites, never sterile pure white */
  --ink-000: #ffffff;
  --ink-050: #fbfaf7;
  --ink-100: #f4fcdb;
  --ink-200: #ecebe3;

  /* Text ramp — near-black down to warm mid-grey */
  --text-hi: #16150f;
  --text-mid: #56544c;
  --text-lo: #8b887d;

  /* Single accent — signal lime, exact creatorflow.so value.
     Reserved for FILLS (buttons, chips, badges, borders) — lime is too
     high-luminance to read as plain text on a light page (this is why
     creatorflow.so itself never sets it as text color either, only as
     a background under black text). */
  --accent: #d1fe17;
  --accent-dim: #b8e600;
  /* Text/icon color for anything sitting ON the accent fill above. */
  --on-accent: #14150f;
  /* Plain black — the olive-green shade tried here first read as
     illegible, so small inline text/icon accents (index numerals,
     hover links, tags) just go black instead of a colored variant. */
  --accent-text: #14150f;

  /* Hairlines — warm dark line at low alpha, composites over any
     of the light surfaces above */
  --rule: rgba(20, 18, 12, 0.08);
  --rule-str: rgba(20, 18, 12, 0.16);

  /* Type */
  --display: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  /* Arabic content (hero, and anywhere else tagged lang="ar") renders in
     Noto Sans Arabic — Cabinet Grotesk/Satoshi have no Arabic glyphs at
     all, so without this Arabic text would silently fall back to
     whatever generic system font the OS picks. */
  --arabic: "Noto Sans Arabic", "Cabinet Grotesk", ui-sans-serif, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shell: 1400px;
  --section-y: clamp(5rem, 12vw, 11rem);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
}

/* ---------- 2. RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header is 74px — keep anchored sections clear of it. */
  scroll-padding-block-start: 96px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  background: var(--ink-000);
  color: var(--text-hi);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
/* Any block explicitly tagged as Arabic switches to Noto Sans Arabic and
   a slightly taller line-height (Arabic script needs more vertical room
   than Latin at the same font-size) — scoped by lang, not by [dir="rtl"]
   alone, since dir can flip without the text actually being Arabic. */
:lang(ar) {
  font-family: var(--arabic);
  line-height: 1.85;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- 3. PRIMITIVES ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
.rule-top {
  border-block-start: 1px solid var(--rule);
}

/* Eyebrow — mono, tracked, with index numeral */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-lo);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.eyebrow .idx {
  color: var(--accent-text);
}

.h-display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
}
.h-section {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
}
.h-card {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
.lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--text-mid);
  max-width: 60ch;
  line-height: 1.6;
}
.prose {
  color: var(--text-mid);
  max-width: 62ch;
}
.prose + .prose {
  margin-block-start: 1.1em;
}
/* Prompt / code blocks inside article bodies: the RichEditor's "code
   block" tool outputs plain <pre><code>. Style it as a dark, LTR,
   monospace box (prompts are almost always English) with a copy button
   injected by JS (see app.js) into the top-right corner. */
.prose pre {
  position: relative;
  direction: ltr;
  text-align: left;
  background: var(--text-hi);
  color: var(--ink-050);
  border-radius: 12px;
  padding: 3rem 1.25rem 1.25rem;
  margin-block: 1.5rem;
  overflow-x: auto;
}
.prose pre code {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  color: inherit;
  background: none;
  padding: 0;
}
.prose pre .code-copybtn {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  border-color: rgba(245, 244, 239, 0.2);
  color: var(--ink-050);
}
.prose pre .code-copybtn:hover,
.prose pre .code-copybtn.is-done {
  color: var(--on-accent);
}
.prose a {
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 0.2s var(--ease);
}
.prose a:hover {
  background-size: 100% 100%;
}

/* Numerals always mono + tabular */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* ---------- 4. BUTTONS ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease);
  will-change: transform;
}
.btn:hover {
  background: #b8e600;
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-hi);
  border-color: var(--rule-str);
}
.btn--ghost:hover {
  background: rgba(20, 18, 12, 0.045);
  border-color: var(--text-mid);
}
.btn .arrow {
  transition: transform 0.35s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(4px);
}
[dir="rtl"] .btn:hover .arrow {
  transform: translateX(-4px) scaleX(-1);
}
[dir="rtl"] .btn .arrow {
  transform: scaleX(-1);
}

/* ---------- 5. GRAIN + VIGNETTE (fixed, never in scroll flow) ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 6. NAV ---------- */
/* Deliberate dark island on an otherwise light page — matches
   creatorflow.so's own black nav bar. Re-declaring the text/rule
   tokens here (not the accent, which already reads fine on black)
   means every descendant rule below that references var(--text-hi)
   etc. resolves to the dark-nav values automatically, with zero
   changes needed to those rules themselves. */
.nav {
  --text-hi: #f5f4ef;
  --text-mid: #b6b3a9;
  --text-lo: #837f74;
  --rule: rgba(245, 244, 239, 0.09);
  --rule-str: rgba(245, 244, 239, 0.18);
  --ink-050: #101012;
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: #000000;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-block-end: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
  color: var(--text-hi);
}
.nav.is-stuck {
  border-block-end-color: var(--rule);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 74px;
}
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.0625rem;
}
.wordmark .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-1px);
}
.nav__links {
  display: none;
  gap: 2.1rem;
  align-items: center;
}
.nav__links a {
  font-size: 0.875rem;
  color: var(--text-mid);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover {
  color: var(--text-hi);
}
.nav__links a:hover::after {
  transform: scaleX(1);
}
.nav__cta {
  display: none;
}
@media (min-width: 900px) {
  .nav__links,
  .nav__cta {
    display: flex;
  }
}
.nav__toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid var(--rule-str);
  border-radius: 999px;
  cursor: pointer;
}
@media (min-width: 900px) {
  .nav__toggle {
    display: none;
  }
}
.nav__toggle span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--text-hi);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav__toggle span + span {
  margin-block-start: 4px;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
  border-block-start: 1px solid transparent;
}
.drawer.is-open {
  grid-template-rows: 1fr;
  border-block-start-color: var(--rule);
}
.drawer__clip {
  overflow: hidden;
}
.drawer__list {
  display: flex;
  flex-direction: column;
  padding-block: 1.25rem 2rem;
}
.drawer__list a {
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
@media (min-width: 900px) {
  .drawer {
    display: none;
  }
}

/* ---------- 7. HERO — asymmetric split, never centered ---------- */
.hero {
  position: relative;
  min-height: calc(100dvh - 74px);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}
/* Signature-mark watermark: the personal calligraphy logo, huge and
   faint, centered behind the hero copy. Purely decorative (empty alt,
   aria-hidden, no pointer events) so it never competes with the text
   or the reveal-on-scroll animation timing. */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 1100px);
  max-width: none;
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero .shell {
  position: relative;
  z-index: 1;
}
/* Centered variant — no portrait, no side column. Text-align:center
   works identically regardless of dir, so this holds up for the
   Arabic hero content without any ltr/rtl-specific overrides. */
.hero__center {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.hero__center h1 {
  text-align: center;
}
.hero__center .hero__lede {
  margin-inline: auto;
  text-align: center;
  max-width: 68ch;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: 1.35fr 0.85fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.hero__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mid);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  margin-block-end: 2rem;
}
.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex: none;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 0.92;
  font-size: clamp(2.9rem, 7.6vw, 6.2rem);
}
.hero h1 .soft {
  color: var(--text-lo);
}
.hero h1 .mark {
  color: var(--accent);
  font-style: italic;
}
/* Arabic headline override: negative letter-spacing breaks Arabic's
   cursive letter-joining, and a full-sentence headline needs a much
   more moderate size than the 2-3-word Latin punchlines this hero
   was built for — so this resets tracking/line-height/size/style
   specifically for the centered Arabic hero, without touching the
   Latin .hero h1 default used elsewhere. */
.hero__center h1:lang(ar) {
  font-family: var(--arabic);
  font-size: clamp(1.75rem, 4.4vw, 3.1rem);
  line-height: 1.55;
  letter-spacing: 0;
  font-weight: 700;
  font-style: normal;
}
.hero__lede {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  color: var(--text-mid);
}
.hero__actions {
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Portrait: fade into background, no hard edge */
.hero__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.03) brightness(1.0);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
}
.hero__portrait:hover img {
  transform: scale(1.06);
  filter: grayscale(0.02) contrast(1.01) brightness(1.02);
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      var(--ink-000) 2%,
      rgba(255, 255, 255, 0.4) 34%,
      transparent 62%
    ),
    linear-gradient(to right, rgba(255, 255, 255, 0.6), transparent 45%);
  pointer-events: none;
}
@media (max-width: 979px) {
  .hero__portrait {
    max-width: 340px;
    aspect-ratio: 4 / 5;
  }
}

/* ---------- 8. CREDIBILITY MARQUEE ---------- */
.marquee {
  border-block: 1px solid var(--rule);
  padding-block: 1.4rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
}
.marquee__item svg {
  color: var(--accent-text);
  flex: none;
}

/* ---------- 9. METRICS — hairline dividers, no cards ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}
.metric {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  border-block-end: 1px solid var(--rule);
  border-inline-end: 1px solid var(--rule);
  position: relative;
}
@media (min-width: 860px) {
  .metric:last-child {
    border-inline-end: none;
  }
}
@media (max-width: 859px) {
  .metric:nth-child(2n) {
    border-inline-end: none;
  }
}
.metric__val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--text-hi);
}
.metric__val .u {
  color: var(--accent);
}
.metric__label {
  margin-block-start: 0.7rem;
  font-size: 0.8125rem;
  color: var(--text-lo);
  line-height: 1.45;
}

/* ---------- 10. PILLARS — numbered editorial rows, not a card grid ---------- */
.pillars__head {
  display: grid;
  gap: 1.5rem;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .pillars__head {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 3rem;
  }
}
.pillar-list {
  border-block-start: 1px solid var(--rule);
}
.pillar {
  display: block;
  border-block-end: 1px solid var(--rule);
  padding-block: clamp(1.6rem, 3vw, 2.35rem);
  position: relative;
  transition: padding-inline-start 0.5s var(--ease);
}
.pillar::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}
.pillar:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}
@media (min-width: 900px) {
  .pillar:hover {
    padding-inline-start: 1.5rem;
  }
}
.pillar__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.5rem;
  align-items: baseline;
}
@media (min-width: 900px) {
  .pillar__row {
    grid-template-columns: 4rem 1.05fr 1.15fr auto;
    gap: 2rem;
    align-items: center;
  }
}
.pillar__idx {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-lo);
  letter-spacing: 0.05em;
  transition: color 0.35s var(--ease);
}
.pillar:hover .pillar__idx {
  color: var(--accent-text);
}
.pillar__name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.028em;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.05;
}
.pillar__desc {
  color: var(--text-mid);
  font-size: 0.9375rem;
  line-height: 1.55;
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .pillar__desc {
    grid-column: 3;
    grid-row: 1;
    max-width: 46ch;
  }
}
.pillar__go {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule-str);
  border-radius: 999px;
  place-items: center;
  color: var(--text-mid);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
@media (min-width: 900px) {
  .pillar__go {
    display: grid;
    grid-column: 4;
    grid-row: 1;
  }
}
.pillar:hover .pillar__go,
.pillar__go:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: rotate(-45deg);
}
.pillar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: 0.85rem;
  grid-column: 1 / -1;
}
.tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-lo);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
}

/* ---------- 11. STORY — split with oversized pull quote ---------- */
.story {
  background: var(--ink-050);
  border-block: 1px solid var(--rule);
}
.story__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 980px) {
  .story__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
}
.story__figure {
  position: relative;
}
.story__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.02) brightness(0.99);
  border-radius: 2px;
}
.story__stamp {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: -1px;
  background: var(--ink-050);
  padding: 1.1rem 1.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-lo);
}
.story__stamp b {
  color: var(--accent-text);
  font-weight: 400;
}
.pullquote {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);
  margin-block: clamp(2rem, 4vw, 2.75rem);
  max-width: 34ch;
}
.timeline {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid var(--rule);
}
.tl-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--rule);
  align-items: baseline;
}
.tl-item__yr {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--accent-text);
  letter-spacing: 0.02em;
}
.tl-item__txt {
  font-size: 0.9375rem;
  color: var(--text-mid);
}
.tl-item__txt b {
  color: var(--text-hi);
  font-weight: 700;
}

/* ---------- 12. FEATURED CONTENT — asymmetric, 1 lead + 2 stacked ---------- */
.feat__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: end;
  justify-content: space-between;
  margin-block-end: clamp(2.25rem, 4vw, 3.25rem);
}
.feat__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
  .feat__grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}
.feat__side {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.post {
  display: block;
  position: relative;
  isolation: isolate;
}
.post__media {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 16 / 10;
  background: var(--ink-100);
}
.post--lead .post__media {
  aspect-ratio: 4 / 3;
}
.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) brightness(0.99);
  transform: scale(1.01);
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.post:hover .post__media img {
  transform: scale(1.05);
  filter: grayscale(0.03) brightness(1.03);
}
.post__kind {
  position: absolute;
  inset-block-start: 0.9rem;
  inset-inline-start: 0.9rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(237, 235, 231, 0.12);
  box-shadow: inset 0 1px 0 rgba(237, 235, 231, 0.08);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  color: var(--accent);
}
.post__body {
  padding-block-start: 1.1rem;
}
.post__meta {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-block-end: 0.6rem;
}
.post__meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-lo);
}
.post__title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  transition: color 0.3s var(--ease);
}
.post--lead .post__title {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.06;
}
.post:hover .post__title {
  color: var(--accent-text);
}
.post__excerpt {
  margin-block-start: 0.7rem;
  color: var(--text-mid);
  font-size: 0.9375rem;
  max-width: 54ch;
}

/* ---------- 13. PROMPT STRIP — horizontal scroll, terminal treatment ---------- */
.promptstrip {
  background: var(--ink-050);
  border-block: 1px solid var(--rule);
  overflow: hidden;
}
.promptstrip__rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-block-end: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-str) transparent;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.promptstrip__rail::-webkit-scrollbar {
  height: 4px;
}
.promptstrip__rail::-webkit-scrollbar-thumb {
  background: var(--rule-str);
  border-radius: 999px;
}
.pcard {
  /* Prompt card — always black, matching the .detail-block prompt
     display, same dark-island pattern as .nav. */
  --text-hi: #f5f4ef;
  --text-mid: #b6b3a9;
  --text-lo: #837f74;
  --rule: rgba(245, 244, 239, 0.1);
  --rule-str: rgba(245, 244, 239, 0.2);
  --accent-text: var(--accent);
  position: relative;
  flex: none;
  width: min(340px, 78vw);
  scroll-snap-align: start;
  background: #000000;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: var(--text-hi);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pcard:hover {
  border-color: var(--rule-str);
  transform: translateY(-3px);
}
/* Feature image — the result the prompt actually produces, not stock art.
   Bleeds to the card's own edges, top corners only, so it reads as a
   screenshot dropped into the card rather than a photo with a frame. */
.pcard__media {
  position: relative;
  overflow: hidden;
  margin: -1.35rem -1.35rem 0;
  aspect-ratio: 16 / 10;
  background: var(--ink-100);
  border-radius: 10px 10px 0 0;
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.92);
  transform: scale(1.01);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.pcard:hover .pcard__media img {
  transform: scale(1.05);
  filter: grayscale(0) brightness(1);
}
.pcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pcard__cat {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.pcard__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}
.pcard:hover .pcard__title {
  color: var(--accent-text);
}
/* Whole-card click target: the title link's ::after escapes up to the
   nearest positioned ancestor (.pcard itself) and covers it edge to edge,
   while the copy button sits in its own stacking context on top so it
   keeps intercepting clicks instead of triggering navigation. */
.pcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pcard .copybtn {
  position: relative;
  z-index: 2;
}
/* "Related" teaser variant has no copy button — the whole card is a
   plain link, same pattern as .post. */
.pcard__link {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: inherit;
}
.pcard__snippet {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-lo);
  background: rgba(245, 244, 239, 0.05);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.75rem;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.copybtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid var(--rule-str);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  flex: none;
}
.copybtn:hover {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.copybtn:active {
  transform: scale(0.96);
}
.copybtn.is-done {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- 14. CONSULTATION ---------- */
.consult__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 980px) {
  .consult__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.checklist {
  margin-block-start: 2rem;
  display: grid;
  gap: 0.9rem;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--text-mid);
}
.checklist svg {
  color: var(--accent-text);
  margin-block-start: 0.32rem;
}

.form {
  background: var(--ink-050);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.form__row {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 640px) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 1.1rem;
}
.field > label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.field .req {
  color: var(--accent-text);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  font-size: 0.9375rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 110px;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a3a09a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-inline-end: 2.5rem;
}
[dir="rtl"] .field select {
  background-position: left 1rem center;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-lo);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ink-100);
}
.field__help {
  font-size: 0.75rem;
  color: var(--text-lo);
}
.field__err {
  font-size: 0.75rem;
  color: #d97a6c;
  display: none;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #d97a6c;
}
.field.is-invalid .field__err {
  display: block;
}
.form__note {
  margin-block-start: 1rem;
  font-size: 0.75rem;
  color: var(--text-lo);
  display: flex;
  gap: 0.6rem;
  align-items: start;
}
.form__note svg {
  flex: none;
  margin-block-start: 0.15rem;
  color: var(--text-lo);
}
.form__success {
  display: none;
  text-align: start;
  padding-block: 1.5rem;
}
/* `is-sent` is set on the <form> element itself, which is not always the
   `.form` container — keep these selectors container-agnostic. */
.is-sent .form__body {
  display: none;
}
.is-sent .form__success {
  display: block;
}
.form__success .tick {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  margin-block-end: 1.1rem;
}

/* ---------- 15. NEWSLETTER ---------- */
.news {
  background: var(--ink-050);
  border-block-start: 1px solid var(--rule);
}
.news__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .news__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.magnet {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem;
  background: var(--ink-100);
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.magnet__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(209, 254, 23, 0.18);
  border: 1px solid rgba(209, 254, 23, 0.4);
  color: var(--on-accent);
}
.magnet__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
}
.magnet__s {
  font-size: 0.8125rem;
  color: var(--text-lo);
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-start: 1.5rem;
}
.inline-form input {
  flex: 1 1 240px;
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.9rem 1.25rem;
  font-size: 0.9375rem;
}
.inline-form input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---------- 16. FOOTER ---------- */
.foot {
  border-block-start: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.foot__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 780px) {
  .foot__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 3rem;
  }
}
.foot__col h4 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-block-end: 1.1rem;
}
.foot__col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.foot__col a {
  font-size: 0.875rem;
  color: var(--text-mid);
  transition: color 0.25s var(--ease);
}
.foot__col a:hover {
  color: var(--accent);
}
.foot__bottom {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-lo);
  text-transform: uppercase;
}
.socials {
  display: flex;
  gap: 0.5rem;
}
.socials a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text-mid);
  transition: all 0.3s var(--ease);
}
.socials a:hover {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ---------- 17. SCROLL REVEAL ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 18. VARIANT BADGE (remove before production) ---------- */
.vbadge {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid var(--rule-str);
  box-shadow: inset 0 1px 0 rgba(237, 235, 231, 0.08);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.vbadge b {
  color: var(--accent);
  font-weight: 400;
}
.vbadge a {
  color: var(--text-hi);
  border-block-end: 1px solid var(--rule-str);
}

/* ---------- 19. PLACEHOLDER BADGE + CTA PAIR ---------- */
.placeholder-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
  border: 1px dashed var(--rule-str);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  width: fit-content;
}

.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

/* ---------- 20. PROOF GRID (portfolio + SaaS teasers) ---------- */
.proof-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 780px) {
  .proof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.proof-grid--single {
  max-width: 480px;
}
@media (min-width: 780px) {
  .proof-grid--single {
    grid-template-columns: 1fr;
  }
}
.proof-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--ink-050);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.proof-card:hover {
  border-color: var(--rule-str);
  transform: translateY(-3px);
}
.proof-card__type {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.proof-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.proof-card__result {
  color: var(--text-mid);
  font-size: 0.875rem;
  line-height: 1.55;
}
.proof-card__link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-hi);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.proof-card:hover .proof-card__link {
  color: var(--accent-text);
  gap: 0.6rem;
}

/* ---------- 21. PILLAR MICRO-CTA ---------- */
.pillar__ask {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-lo);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
  margin-block-start: 0.7rem;
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .pillar__ask {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }
}
.pillar:hover .pillar__ask,
.pillar__ask:focus-visible {
  opacity: 1;
  transform: none;
  color: var(--accent-text);
}

/* ---------- 22. TESTIMONIALS (placeholder) ---------- */
.testi-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 780px) {
  .testi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.testi-card {
  border: 1px dashed var(--rule-str);
  border-radius: 10px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--ink-050);
}
.testi-card__quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-hi);
}
.testi-card__who {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-lo);
}

/* ---------- 23. FLOATING CONSULTATION CTA ---------- */
.float-cta {
  position: fixed;
  z-index: 70;
  inset-inline-end: 1.25rem;
  inset-block-end: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.35rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    background 0.25s var(--ease), visibility 0s linear 0.4s;
}
.float-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.float-cta:hover {
  background: #b8e600;
}
.float-cta:active {
  transform: scale(0.97);
}
@media (max-width: 640px) {
  .float-cta {
    inset-inline: 1rem;
    inset-block-end: 1rem;
    justify-content: center;
    width: auto;
  }
}

.float-cta .pulse,
.float-cta .pulse::after {
  background: var(--on-accent);
}

/* ---------- 24. PROMPT LIBRARY PAGE GRID ---------- */
.prompt-page-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 700px) {
  .prompt-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .prompt-page-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.prompt-page-grid .pcard {
  width: 100%;
}
.prompt-page-grid .pcard__snippet {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  flex: none;
}

/* ---------- 25. DETAIL PAGE (shared: article / prompt / case study) ----------
   Long-form single-item layout: back-link, eyebrow, title, byline, a big
   primary content block (prompt copy-box / rich body / result summary),
   optional numbered "how to use this" steps, and a related-content grid.
   Pattern lifted from long-form SaaS blog layouts, re-skinned in the site's
   own dark/bronze system — no borrowed color or typography.
================================================================ */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-mid);
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.detail-back:hover {
  color: var(--accent-text);
  gap: 0.7rem;
}
.detail-back svg {
  flex: none;
}

.detail-head {
  max-width: 68ch;
}
.detail-head .h-display {
  max-width: 20ch;
}
/* Arabic override: .h-display's clamp (up to 5.5rem) is tuned for short
   Latin punchlines. A full-sentence Arabic title (tutorial/prompt pages)
   needs a much more moderate size, positive line-height, and no negative
   tracking (breaks cursive letter-joining) — same fix as the hero h1. */
.detail-head .h-display:lang(ar) {
  font-family: var(--arabic);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  max-width: 32ch;
}
.detail-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-block-start: 1.25rem;
}
.detail-byline .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-lo);
  flex: none;
}
.detail-byline .accent {
  color: var(--accent-text);
}

/* The big primary content block — used as the prompt copy-box on prompt
   pages, and reusable as a pull-quote / result-summary frame elsewhere. */
.detail-block {
  /* Prompt/code display — always a black "terminal" surface regardless
     of the surrounding page theme, same dark-island pattern as .nav. */
  --text-hi: #f5f4ef;
  --text-mid: #b6b3a9;
  --text-lo: #837f74;
  --rule: rgba(245, 244, 239, 0.1);
  --rule-str: rgba(245, 244, 239, 0.2);
  --accent-text: var(--accent);
  margin-block-start: clamp(2.25rem, 4.5vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #000000;
  box-shadow: inset 0 1px 0 rgba(245, 244, 239, 0.06);
  overflow: hidden;
  color: var(--text-hi);
}
.detail-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-block-end: 1px solid var(--rule);
  background: #0f0f0f;
}
.detail-block__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-lo);
}
.detail-block__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.detail-block__copy:hover {
  background: #b8e600;
  transform: translateY(-1px);
}
.detail-block__copy:active {
  transform: translateY(0) scale(0.97);
}
.detail-block__copy.is-done {
  background: #6fae7c;
}
.detail-block__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-hi);
  white-space: pre-wrap;
}
.detail-block__body .var {
  color: var(--accent-text);
}

.detail-note {
  display: flex;
  gap: 0.75rem;
  align-items: start;
  margin-block-start: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--rule-str);
  border-radius: 10px;
  color: var(--text-mid);
  font-size: 0.875rem;
}
.detail-note svg {
  flex: none;
  color: var(--accent-text);
  margin-block-start: 0.15rem;
}

/* Numbered how-to steps */
.howto {
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  border-block-start: 1px solid var(--rule);
}
.howto-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--rule);
}
.howto-item__num {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--accent-text);
  line-height: 1.6;
}
.howto-item__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-block-end: 0.35rem;
}
.howto-item__desc {
  color: var(--text-mid);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Related-content grid at the foot of a detail page */
.related {
  margin-block-start: clamp(3rem, 6vw, 4.5rem);
  padding-block-start: clamp(2.5rem, 5vw, 3.5rem);
  border-block-start: 1px solid var(--rule);
}
.related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.75rem;
}
.related-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Article body: section sub-heads inside long-form prose */
.detail-subhead {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin-block: clamp(2rem, 4vw, 2.75rem) 1rem;
}

/* Portfolio case-study result stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-block-start: clamp(2.25rem, 4.5vw, 3.5rem);
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat-row__item {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-block-end: 1px solid var(--rule);
}
.stat-row__item + .stat-row__item {
  padding-inline-start: clamp(1rem, 2vw, 1.5rem);
  border-inline-start: 1px solid var(--rule);
}
.stat-row__val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
  color: var(--text-hi);
  line-height: 1;
}
.stat-row__label {
  margin-block-start: 0.6rem;
  font-size: 0.8125rem;
  color: var(--text-lo);
  line-height: 1.45;
}

/* ---------- 26. DETAIL LAYOUT + STICKY LEAD-GEN SIDEBAR ----------
   Two-column layout for long-form detail pages: main content left,
   a sticky "book a consultation / WhatsApp" card right. Pattern
   referenced from long-form SaaS blog sidebars (CreatorFlow), kept
   in this site's own dark/bronze system. Collapses to a single
   column below 1080px — the existing .float-cta pill covers mobile.
================================================================ */
.detail-layout {
  display: block;
}
@media (min-width: 1080px) {
  .detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}
.detail-main {
  min-width: 0;
}
.detail-aside {
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 1080px) {
  .detail-aside {
    margin-block-start: 0;
    position: sticky;
    top: 100px;
  }
}

.cta-card {
  /* Deliberate dark card, same "island" pattern as .nav — descendant
     rules referencing var(--text-hi) etc. pick these up automatically. */
  --text-hi: #f5f4ef;
  --text-mid: #b6b3a9;
  --text-lo: #837f74;
  --rule: rgba(245, 244, 239, 0.1);
  --rule-str: rgba(245, 244, 239, 0.2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: #000000;
  padding: 1.5rem;
  box-shadow: inset 0 1px 0 rgba(245, 244, 239, 0.08);
  color: var(--text-hi);
}
.cta-card__kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
}
.cta-card__kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  position: relative;
}
.cta-card__kicker .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.6s var(--ease) infinite;
}
.cta-card__title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: 1.15rem;
  margin-block-start: 0.85rem;
}
.cta-card__sub {
  margin-block-start: 0.6rem;
  color: var(--text-mid);
  font-size: 0.875rem;
  line-height: 1.55;
}
.cta-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-block-start: 1.25rem;
}
.cta-card__actions .btn {
  width: 100%;
  justify-content: center;
  padding-block: 0.8rem;
  font-size: 0.875rem;
}
.cta-card__whatsapp {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule-str);
  border-radius: 999px;
  color: var(--text-hi);
  font-weight: 700;
  font-size: 0.875rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.cta-card__whatsapp:hover {
  border-color: #3fbf60;
  background: rgba(63, 191, 96, 0.08);
  transform: translateY(-1px);
}
.cta-card__whatsapp svg {
  color: #3fbf60;
  flex: none;
}
.cta-card__note {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--text-lo);
  line-height: 1.5;
}
.cta-card__note strong {
  color: var(--text-mid);
  font-weight: 700;
}

/* ---------- 27. TEXT-MARK CHIP ---------- */
/* A rounded highlighter chip behind a key phrase in a heading — pattern
   referenced from creatorflow.so ("full of buyers"), ported to this
   site's bronze accent (same combo already proven on .btn). */
.text-mark {
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.05em 0.34em;
  border-radius: 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 28. TABLE OF CONTENTS (left column, wide detail pages) ---------- */
.detail-layout--toc {
  display: block;
}
@media (min-width: 1080px) {
  .detail-layout--toc {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 296px;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .detail-layout--toc .detail-main {
    order: 2;
  }
  .detail-layout--toc .detail-toc {
    order: 1;
  }
  .detail-layout--toc .detail-aside {
    order: 3;
  }
}
.detail-toc {
  display: none;
}
@media (min-width: 1080px) {
  .detail-toc {
    display: block;
    position: sticky;
    top: 100px;
  }
}
.detail-toc__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-block-end: 0.9rem;
}
.detail-toc nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-inline-start: 1px solid var(--rule);
}
.detail-toc a {
  padding-block: 0.5rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid transparent;
  margin-inline-start: -1px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-mid);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.detail-toc a:hover {
  color: var(--accent-text);
  border-inline-start-color: var(--accent);
}

/* ---------- RTL icon mirroring (dynamic Arabic site only) ----------
   Base build's arrow/chevron icons were drawn LTR; on this RTL site
   "forward" points the opposite way, so mirror the shared icons. */
[dir="rtl"] .arrow,
[dir="rtl"] .detail-back svg,
[dir="rtl"] .pillar__go svg {
  transform: scaleX(-1);
}

/* ---------- Tutorial index grid (dynamic site only) ----------
   Same responsive breakpoints as .prompt-page-grid, applied to plain
   .post cards for the standalone "all tutorials" listing page. */
.tutorial-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 700px) {
  .tutorial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .tutorial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Pagination (dynamic site only) ----------
   Laravel's default pagination view assumes Tailwind, which this project
   doesn't use, so listing pages render their own links via a custom
   pagination view (resources/views/pagination/custom.blade.php) styled
   with the same tokens/pill-button pattern as .btn--ghost. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--rule-str);
  border-radius: 999px;
  color: var(--text-hi);
  text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pagination__btn:hover {
  background: rgba(20, 18, 12, 0.045);
  border-color: var(--text-mid);
}
.pagination__btn--disabled {
  color: var(--text-lo);
  border-color: var(--rule);
  cursor: default;
}
.pagination__status {
  color: var(--text-mid);
  letter-spacing: 0.02em;
}