/* ==========================================================================
   MRKA Digital — service pages
   Loaded after v2.css, which supplies the tokens, nav, buttons, bands and
   footer. Nothing here moves except a colour on hover: the service pages have
   no scenes, no rail and no loader. Everything is prefixed svc- so it cannot
   collide with the homepage's classes.
   ========================================================================== */

/* The lockup is one <img> here, not the homepage's sliced reveal. Without
   height:auto its height attribute stretches the header to twice the
   homepage's. */
.nav__logo > img { width: 100%; height: auto; }

/* The current page in the nav. Underlined, as a hovered link is, but held. */
.nav__links a[aria-current="page"] { border-bottom-color: var(--mrka-ink); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.svc-hero {
  background: var(--mrka-ink);
  color: var(--mrka-bone);
  padding: var(--space-6) var(--gutter-page) var(--space-10);
}
.svc-hero .inner { display: grid; gap: var(--space-9); }

/* Breadcrumb, in the slate style the homepage hero uses. */
.svc-crumb {
  display: flex;
  gap: var(--space-3);
  padding: 14px 0;
  border-top: 1px solid var(--mrka-ink-3);
  border-bottom: 1px solid var(--mrka-ink-3);
  font: 500 11px/1 var(--font-technical);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mrka-dust);
}
.svc-crumb ol { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.svc-crumb li + li::before { content: "·"; margin-right: var(--space-3); }
.svc-crumb a { transition: color var(--dur-hover) ease; }
.svc-crumb a:hover { color: var(--mrka-coral); }
.svc-crumb [aria-current] { color: var(--mrka-bone); }

.svc-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 88px;
  align-items: end;
}
.svc-hero h1 {
  font: 400 clamp(40px, 6vw, 96px)/1 var(--font-brand);
  letter-spacing: -0.035em;
  color: var(--mrka-bone);
  text-wrap: balance;
}
.svc-hero h1::before {
  content: "";
  display: block;
  width: 30px;
  height: var(--rule-accent);
  margin-bottom: var(--space-6);
  background: var(--mrka-coral);
}
.svc-hero__aside { display: grid; gap: var(--space-6); }
.svc-hero__lede {
  font: 400 17px/1.65 var(--font-brand);
  color: var(--mrka-sandstone);
  text-wrap: pretty;
}
.svc-hero__cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.svc-hero__cta span { font: 400 13px/1.5 var(--font-brand); color: var(--mrka-dust); }
.svc-hero__cta span a {
  color: var(--mrka-bone);
  text-decoration: underline;
  text-decoration-color: var(--mrka-ink-5);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-hover) ease;
}
.svc-hero__cta span a:hover { text-decoration-color: var(--mrka-coral); }

/* Three facts under the hero: price, term, what you keep. */
.svc-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mrka-ink-3);
}
.svc-facts div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) 0;
}
.svc-facts div:first-child { padding-left: 0; }
.svc-facts div + div { border-left: 1px solid var(--mrka-ink-3); }
.svc-facts dd {
  margin: 0;
  font: 500 clamp(28px, 3vw, 44px)/1.05 var(--font-technical);
  letter-spacing: -0.03em;
  color: var(--mrka-coral);
}
.svc-facts dt {
  font: 400 11px/1.4 var(--font-brand);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mrka-dust);
}

/* --------------------------------------------------------------------------
   Section heads, shared by every band below the hero
   -------------------------------------------------------------------------- */

.svc-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: end;
  margin-bottom: var(--space-9);
}
.svc-head .lede { max-width: 52ch; }
.band--ink .svc-head .h-display { color: var(--mrka-bone); }
.band--ink .svc-head .lede { color: var(--mrka-sandstone); }

/* --------------------------------------------------------------------------
   Scope: the work, one row per item
   -------------------------------------------------------------------------- */

.svc-scope { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mrka-hairline); }
.svc-scope li {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--mrka-hairline);
}
.svc-scope__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 500 18px/1.3 var(--font-brand);
  letter-spacing: -0.01em;
  color: var(--mrka-ink);
}
.svc-scope__name img { width: 14px; height: 14px; flex: none; }
.svc-scope__copy { font: 400 15px/1.7 var(--font-brand); color: var(--mrka-clay); max-width: 60ch; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Plans
   -------------------------------------------------------------------------- */

.svc-plans { display: grid; grid-template-columns: repeat(var(--plans, 2), 1fr); gap: var(--space-5); }
.svc-plan {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--space-5);
  padding: var(--pad-card);
  background: var(--mrka-white);
  border: 1px solid var(--mrka-hairline);
  transition: border-color var(--dur-hover) ease;
}
.svc-plan:hover { border-color: var(--mrka-coral); }
/* The plan most people take is outlined in ink, as the review docket is. */
.svc-plan--lead { border-color: var(--mrka-ink); }
.svc-plan__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.svc-plan__name { font: 500 22px/1.2 var(--font-brand); letter-spacing: -0.02em; color: var(--mrka-ink); }
.svc-plan__tag {
  font: 400 11px/1 var(--font-brand);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mrka-coral-deep);
}
.svc-plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.svc-plan__price b {
  font: 500 clamp(40px, 4vw, 56px)/1 var(--font-technical);
  letter-spacing: -0.035em;
  color: var(--mrka-ink);
}
.svc-plan__price span { font: 400 14px/1.4 var(--font-brand); color: var(--mrka-clay); }
.svc-plan__for { font: 400 15px/1.6 var(--font-brand); color: var(--mrka-clay); text-wrap: pretty; }
.svc-plan__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mrka-hairline); align-self: start; }
.svc-plan__list li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--mrka-hairline);
  font: 400 14px/1.5 var(--font-brand);
  color: var(--mrka-ink);
}
/* A small square, as the chart's data points are. */
.svc-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  background: var(--mrka-coral-deep);
}
.svc-plan__list .svc-plan__plus { padding-left: 0; font-weight: 500; color: var(--mrka-clay); }
.svc-plan__list .svc-plan__plus::before { display: none; }
.svc-plan .btn { justify-self: start; }
.svc-plan .btn--ghost { background: transparent; color: var(--mrka-ink); border-color: var(--mrka-ink); }
.svc-plan .btn--ghost:hover { border-color: var(--mrka-coral); color: var(--mrka-ink); background: var(--mrka-coral); }

/* A plain card with no price: heading, copy, button. */
.svc-plan--plain { grid-template-rows: auto 1fr auto; background: transparent; }

.svc-plan__for a, .svc-faq details a {
  color: var(--mrka-ink);
  text-decoration: underline;
  text-decoration-color: var(--mrka-hairline);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-hover) ease;
}
.svc-plan__for a:hover, .svc-faq details a:hover { text-decoration-color: var(--mrka-coral); }

.svc-note { margin-top: var(--space-6); font: 400 14px/1.6 var(--font-brand); color: var(--mrka-clay); max-width: 68ch; text-wrap: pretty; }
.svc-note b { color: var(--mrka-ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   Steps: numbered, four across
   -------------------------------------------------------------------------- */

.svc-steps {
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mrka-hairline);
  counter-reset: step;
}
.svc-steps li {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) 0;
  counter-increment: step;
}
.svc-steps li:first-child { padding-left: 0; }
.svc-steps li + li { border-left: 1px solid var(--mrka-hairline); }
.svc-steps li::before {
  content: counter(step, decimal-leading-zero);
  font: 500 12px/1.4 var(--font-technical);
  color: var(--mrka-coral-deep);
}
.svc-steps b { font: 500 17px/1.3 var(--font-brand); letter-spacing: -0.01em; color: var(--mrka-ink); }
.svc-steps span { font: 400 14px/1.6 var(--font-brand); color: var(--mrka-clay); text-wrap: pretty; }

.band--ink .svc-steps { border-top-color: var(--mrka-ink-3); }
.band--ink .svc-steps li + li { border-left-color: var(--mrka-ink-3); }
.band--ink .svc-steps li::before { color: var(--mrka-coral); }
.band--ink .svc-steps b { color: var(--mrka-bone); }
.band--ink .svc-steps span { color: var(--mrka-sandstone); }

/* --------------------------------------------------------------------------
   Chat demo (chatbot page only). A static transcript, drawn in the brand's
   own parts: square corners, hairlines, ink and bone. Not a live widget.
   -------------------------------------------------------------------------- */

.svc-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.svc-demo__copy { display: grid; gap: var(--space-5); }
.svc-demo__copy .lede { max-width: 48ch; }
/* The live demo's chat is drawn by assets/js/chat.js. */
.svc-live { min-width: 0; }

.svc-chat {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--mrka-ink-2);
  border: 1px solid var(--mrka-ink-4);
}
.svc-chat__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--mrka-ink-4);
  font: 500 11px/1 var(--font-technical);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mrka-dust);
}
.svc-chat__head b { font-weight: 500; color: var(--mrka-coral); }
.svc-chat p {
  max-width: 85%;
  padding: 10px 14px;
  font: 400 14px/1.5 var(--font-brand);
}
.svc-chat .from-them { justify-self: end; background: var(--mrka-ink-4); color: var(--mrka-bone); }
.svc-chat .from-bot { justify-self: start; background: var(--mrka-bone); color: var(--mrka-ink); }
.svc-chat__foot { font: 400 12px/1.5 var(--font-brand); color: var(--mrka-sandstone); }

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */

.svc-faq { border-top: 1px solid var(--mrka-hairline); }
.svc-faq details { border-bottom: 1px solid var(--mrka-hairline); transition: border-color var(--dur-hover) ease; }
.svc-faq details:hover { border-bottom-color: var(--mrka-coral); }
.svc-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  font: 500 18px/1.4 var(--font-brand);
  letter-spacing: -0.01em;
  color: var(--mrka-ink);
  cursor: pointer;
  list-style: none;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {
  content: "+";
  flex: none;
  font: 400 22px/1 var(--font-technical);
  color: var(--mrka-coral-deep);
}
.svc-faq details[open] summary::after { content: "\2212"; }
.svc-faq summary:hover { color: var(--mrka-coral-deep); }
.svc-faq details > div { padding: 0 0 var(--space-6); max-width: 62ch; }
.svc-faq details p { font: 400 15px/1.7 var(--font-brand); color: var(--mrka-clay); text-wrap: pretty; }
.svc-faq details p + p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Other services, and the coral close
   -------------------------------------------------------------------------- */

.svc-others { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--mrka-hairline); }
.svc-others a {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
  border-bottom: 1px solid var(--mrka-hairline);
  transition: border-color var(--dur-hover) ease;
}
.svc-others a + a { padding-left: var(--space-6); border-left: 1px solid var(--mrka-hairline); }
.svc-others a:hover { border-bottom-color: var(--mrka-coral); }
.svc-others b { font: 500 18px/1.3 var(--font-brand); letter-spacing: -0.01em; color: var(--mrka-ink); transition: color var(--dur-hover) ease; }
.svc-others a:hover b { color: var(--mrka-coral-deep); }
.svc-others span { font: 400 14px/1.6 var(--font-brand); color: var(--mrka-clay); }

.svc-close .inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 88px; align-items: end; }
.svc-close .h-display { color: var(--mrka-ink); }
.svc-close p { font: 400 17px/1.6 var(--font-brand); color: var(--mrka-ink); text-wrap: pretty; }
.svc-close__cta { display: grid; gap: var(--space-5); justify-items: start; }

/* --------------------------------------------------------------------------
   Breakpoints, matching v2.css
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .svc-hero__grid, .svc-head, .svc-close .inner, .svc-demo { gap: 56px; }
}

@media (max-width: 1000px) {
  .svc-hero__grid, .svc-head, .svc-close .inner, .svc-demo { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
  .svc-scope li { grid-template-columns: 1fr; gap: var(--space-3); }
  .svc-steps { grid-template-columns: repeat(2, 1fr); }
  .svc-steps li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .svc-steps li:nth-child(n+3) { margin-top: var(--space-6); border-top: 1px solid var(--mrka-hairline); }
  .band--ink .svc-steps li:nth-child(n+3) { border-top-color: var(--mrka-ink-3); }
  .svc-others { grid-template-columns: 1fr; }
  .svc-others a, .svc-others a + a { padding-left: 0; border-left: 0; }
}

@media (max-width: 760px) {
  .svc-plans { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .svc-hero { padding-bottom: var(--space-9); }
  .svc-hero .inner { gap: var(--space-8); }
  .svc-hero h1 { font-size: clamp(36px, 11vw, 56px); }
  .svc-facts { grid-template-columns: 1fr; }
  .svc-facts div { padding: var(--space-5) 0 0; }
  .svc-facts div + div { border-left: 0; border-top: 1px solid var(--mrka-ink-3); margin-top: var(--space-5); }
  .svc-steps { grid-template-columns: 1fr; }
  .svc-steps li, .svc-steps li + li { padding: var(--space-5) 0 0; border-left: 0; }
  .svc-steps li + li { margin-top: var(--space-5); border-top: 1px solid var(--mrka-hairline); }
  .band--ink .svc-steps li + li { border-top-color: var(--mrka-ink-3); }
  .svc-hero__cta .btn, .svc-close .btn, .svc-plan .btn { display: block; width: 100%; }
  .svc-hero__cta { width: 100%; }
  .svc-faq summary { font-size: 16px; }
}

/* Keeps a hyphenated word on one line in a display heading. */
.nw { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Long-form document pages (privacy). One readable column, sections ruled
   off with a hairline, headings as labels.
   -------------------------------------------------------------------------- */

.svc-hero--short { padding-bottom: var(--space-9); }

.svc-doc { max-width: 760px; }
.svc-doc section { padding: var(--space-6) 0; border-top: 1px solid var(--mrka-hairline); }
.svc-doc section:first-child { border-top: 0; padding-top: 0; }
.svc-doc h2 {
  margin: 0 0 var(--space-4);
  font: 500 22px/1.3 var(--font-brand);
  letter-spacing: -0.02em;
  color: var(--mrka-ink);
}
.svc-doc p, .svc-doc li { max-width: 64ch; font: 400 15px/1.7 var(--font-brand); color: var(--mrka-body); text-wrap: pretty; }
.svc-doc p + p, .svc-doc p + ul, .svc-doc ul + p, .svc-doc p + table { margin-top: var(--space-4); }
.svc-doc ul { margin: 0; padding-left: 20px; }
.svc-doc li + li { margin-top: var(--space-2); }
.svc-doc li::marker { color: var(--mrka-coral-deep); }
.svc-doc b { font-weight: 500; color: var(--mrka-ink); }
.svc-doc a {
  color: var(--mrka-ink);
  text-decoration: underline;
  text-decoration-color: var(--mrka-stone);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-hover) ease;
}
.svc-doc a:hover { text-decoration-color: var(--mrka-coral); }
.svc-doc__table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--mrka-hairline); }
.svc-doc__table th, .svc-doc__table td {
  padding: 12px var(--space-4) 12px 0;
  border-bottom: 1px solid var(--mrka-hairline);
  text-align: left;
  vertical-align: top;
  font: 400 14px/1.6 var(--font-brand);
  color: var(--mrka-body);
}
.svc-doc__table th {
  font: 400 11px/1.4 var(--font-brand);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mrka-clay);
}
.svc-doc__table td:first-child { width: 28%; font-weight: 500; color: var(--mrka-ink); }