/*
 * Service pages.
 *
 * page.css is the document template and says so in its own header: reading
 * comfort rather than marketing rhythm. That is right for the privacy policy
 * and wrong for a page whose job is to make somebody get in touch, so these
 * pages get their own rhythm while staying inside the same design language:
 * the mono eyebrow, the hairline rules, the 5/7 split and the section
 * spacing the home page already uses.
 *
 * Nothing here is rounded. base.css says so about the whole design and this
 * is not the place to make an exception.
 *
 * Everything is logical-property based (inline-start, padding-inline) rather
 * than left and right, so the Hebrew pages lay out correctly without a
 * mirrored stylesheet.
 */

/*
 * 64px above the first line, not 120.
 *
 * The same gap the blog index uses, which is the one Mike already settled
 * on. 120px put a third of a laptop screen of nothing between the header
 * and the breadcrumb, and 96px did the same on a phone, where it is a
 * larger share of a smaller screen.
 */
.ad-svc {
  padding: 64px var(--ad-space-page) 0;
}

/*
 * The phone gutter the rest of the theme uses.
 *
 * Every other stylesheet swaps --ad-space-page for its mobile token at
 * this breakpoint; this one never did, so the service, about and contact
 * pages kept a 48px gutter on a 375px phone. That is 96px of the screen,
 * a quarter of it, before the number rail takes its own 32px: the reading
 * column came out 247px wide where the legal pages next door got 335.
 */
@media (max-width: 640px) {
  .ad-svc {
    padding-top: 40px;
    padding-inline: var(--ad-space-page-mobile);
  }
}

/*
 * A section the TEMPLATE renders, rather than one inside the page body:
 * the contact page's channels and its form. They are direct children of
 * <main>, and the 1160 container lives on .ad-svc__body, so without this
 * they ran the full width of the viewport while everything above and below
 * them sat centred. That is the "on the side" this produced.
 *
 * Direct child on purpose: sections inside .ad-svc__body are already
 * within the container and must not get a second one.
 */
.ad-svc > .ad-svc__section {
  max-width: 1160px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------- head */

.ad-svc__head {
  max-width: 1160px;
  margin-inline: auto;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--ad-color-hairline);
}

.ad-svc__crumbs {
  margin-bottom: 20px;
}

/* Same type as a breadcrumb, because it stands in the same place. */
.ad-svc__eyebrow {
  margin: 0 0 20px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ad-color-text-meta);
}

.ad-svc__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ad-svc__crumbs li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ad-svc__crumbs a { color: var(--ad-color-text-meta); }
.ad-svc__crumbs a:hover { color: var(--ad-color-accent); }
.ad-svc__crumbs [aria-current="page"] { color: var(--ad-color-text-secondary); }
.ad-svc__crumb-sep { color: var(--ad-color-border-subtle); }

.ad-svc__titlerow {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

/*
 * The service mark. A bordered tile rather than a bare glyph, so it reads as
 * a deliberate object beside a 56px heading instead of a stray icon.
 */
.ad-svc__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  margin-top: 6px;
  border: 1px solid var(--ad-color-hairline);
  background: var(--ad-color-panel);
  color: var(--ad-color-accent);
}

.ad-svc__title {
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--ad-color-text);
  max-width: 20ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------------- body */

.ad-svc__body {
  max-width: 1160px;
  margin-inline: auto;
}

/*
 * The opening paragraphs, before the first h2. They carry the page, so they
 * are set larger and sit on their own rather than inside a section.
 */
/*
 * The measure goes on the paragraphs, not the container. With it on the
 * container, a four cell facts strip inside the intro was squeezed into
 * 62ch and wrapped three plus one, which reads as a mistake rather than a
 * row.
 */
.ad-svc__intro {
  padding-block: 36px 8px;
}

.ad-svc__intro p {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ad-color-text);
}

/*
 * A section is its number on a rail and everything else beside it.
 *
 * Two earlier layouts are worth naming, because both looked deliberate and
 * both were wrong. The first put every h2 in column 1 and everything else
 * in column 2 of ONE page wide grid: grid gives each item its own row, so
 * every heading sat in a row with nothing beside it and every paragraph in
 * a row with an empty narrow column, and the page grew vertical voids, one
 * of them a full screen of nothing. The second fixed that by making each
 * section its own 4fr / 8fr grid with the heading sticky in the narrow
 * column, which still left a lone heading beside a screen-high empty
 * column on any short section.
 *
 * The approved design does neither: the number gets about 16px and the
 * heading sits directly above the text it introduces. act_wrap_sections()
 * groups each heading with its own prose, which is what lets it.
 */
.ad-svc__section {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding-block: 40px;
  border-top: 1px solid var(--ad-color-hairline);
}

.ad-svc__num {
  flex: none;
  min-width: 16px;
  padding-top: 8px;
}

.ad-svc__section-main {
  flex-grow: 1;
  min-width: 0;
}

@media (max-width: 700px) {
  .ad-svc__section { gap: 16px; }
}

/*
 * On a phone the number goes ABOVE the heading, not beside it.
 *
 * The rail costs 16px plus its gap, and on a 375px screen that is the
 * difference between a section starting at the page gutter and starting
 * 32px inside it. Every section then sat visibly off the left edge that
 * the intro, the hairlines and the footer band all line up to, and the
 * reason was two characters of furniture.
 *
 * Stacked, the number keeps its place in the reading order and the
 * content gets the whole column.
 */
@media (max-width: 620px) {
  .ad-svc__section { display: block; }

  .ad-svc__num {
    margin-bottom: 10px;
    padding-top: 0;
  }
}

/*
 * The number is mono, quiet, and aria-hidden in the markup: it is a visual
 * counter, and a screen reader announcing "zero two" before every heading
 * is noise rather than structure.
 */
.ad-svc__num {
  display: block;
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ad-color-text-meta);
}

.ad-svc__section-main > h2,
.ad-svc__section-main > .ad-svc__formcol > h2,
.ad-svc__faq-title {
  margin: 0 0 6px;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ad-color-text);
  text-wrap: balance;
}

/*
 * The measure applies to PROSE, not to every child.
 *
 * It used to be `> *`, which capped anything a section contained at 66ch:
 * the summary strip, the channel cards' address row and the follow row all
 * came out about 719px inside a 1118px column, so a design block sat two
 * thirds the width of the cards directly above it. 66ch is also font
 * relative, so the same block was a different width in Hebrew.
 *
 * Text takes the measure. A block with a class on it is a designed thing
 * and sets its own width.
 */
.ad-svc__section-body > p,
.ad-svc__section-body > h3,
.ad-svc__section-body > ol,
.ad-svc__section-body > blockquote,
.ad-svc__section-body > ul:not([class]) {
  max-width: 66ch;
}

.ad-svc__section-body > :first-child {
  margin-top: 0;
}

.ad-svc__body p {
  margin: 0 0 18px;
  color: var(--ad-color-text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.ad-svc__body h3 {
  margin: 30px 0 10px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ad-color-text);
}

/* A short accent rule above each sub heading, so the eye finds them. */
.ad-svc__section-body h3::before {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: var(--ad-color-accent);
  margin-bottom: 12px;
}

.ad-svc__section-body h3:first-child::before { margin-top: 0; }

.ad-svc__body ul {
  margin: 0 0 18px;
  padding-inline-start: 0;
  list-style: none;
}

/*
 * PROSE list items only.
 *
 * These two rules draw the accent dash that marks a bullet, and they were
 * written when the only lists in the body were the editor's. Every
 * component built since is a list too: the summary strip, the hub's
 * service cards and the product cards are each <li>, so each one grew a
 * stray 7px blue dash at its top left corner and 20px of padding meant
 * for a bullet that is not there.
 *
 * The test is on the LIST, not the item: the hub's service cards and the
 * product cards put their class on the <a> inside the <li>, so testing the
 * item would have missed both of them. Every component list names itself
 * on the <ul>; an editor's list does not.
 */
.ad-svc__body :is(ul, ol):not([class]) > li {
  position: relative;
  padding-inline-start: 20px;
  margin-bottom: 10px;
  color: var(--ad-color-text-secondary);
}

.ad-svc__body :is(ul, ol):not([class]) > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .7em;
  width: 7px;
  height: 1px;
  background: var(--ad-color-accent);
}

/*
 * PROSE links only, which is what :not([class]) means here.
 *
 * This rule is a class plus an element, so it beats any single class a
 * component gives its own link, and it has now silently repainted three of
 * them: it put accent text on the accent fill of every in-content button,
 * leaving a call to action with no readable label, and it turned the hub's
 * service cards accent blue with an underline under the whole card. Each
 * time the fix was another name in a :not() list, which lasts until the
 * next component.
 *
 * A link the editor typed has no class. A link a component drew has one,
 * and carries its own colour. Same rule as the measure above.
 */
.ad-svc__body a:not([class]) {
  color: var(--ad-color-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--ad-color-accent) 30%, transparent);
}

.ad-svc__body a:not([class]):hover { border-bottom-color: var(--ad-color-accent); }

.ad-svc__body code {
  font-family: var(--ad-font-mono);
  font-size: .9em;
  color: var(--ad-color-text);
}

.ad-svc__body .ad-btn { margin-top: 8px; }

/* -------------------------------------------------------------------- faq */

.ad-svc__more {
  max-width: 1160px;
  margin-inline: auto;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--ad-color-hairline);
}

.ad-svc__more-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ad-color-text);
  margin-bottom: 24px;
}

.ad-svc__faq-title { margin: 0 0 18px; }

.ad-svc__faq-list {
  border-top: 1px solid var(--ad-color-hairline);
  max-width: 860px;
}

.ad-svc__q {
  border-bottom: 1px solid var(--ad-color-hairline);
}

.ad-svc__q summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  color: var(--ad-color-text);
  list-style: none;
}

/* Safari draws its own triangle through ::-webkit-details-marker. */
.ad-svc__q summary::-webkit-details-marker { display: none; }
.ad-svc__q summary::marker { content: ""; }

.ad-svc__q summary:hover { color: var(--ad-color-accent); }

/*
 * A plus that becomes a minus. Two bars rather than a glyph, so it is not a
 * font dependency and the rotation is honest at any size.
 */
.ad-svc__q-mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  align-self: center;
}

.ad-svc__q-mark::before,
.ad-svc__q-mark::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--ad-color-accent);
  transition: transform .18s ease;
}

.ad-svc__q-mark::after { transform: rotate(90deg); }
.ad-svc__q[open] .ad-svc__q-mark::after { transform: rotate(0deg); }

.ad-svc__q > p {
  margin: 0;
  padding-block: 0 22px;
  padding-inline-end: 34px;
  max-width: 68ch;
  color: var(--ad-color-text-secondary);
  line-height: 1.65;
}

/* ------------------------------------------------------------------- more */

/*
 * Bordered cards with a real gap, rather than a one pixel gap over a
 * hairline background.
 *
 * The background trick is tidy only when every row is full. A service page
 * always shows its five siblings, which never divides evenly into the
 * column count at any width this container allows, so the empty cells in
 * the last row were painting as a wide ghost panel with nothing in it. A
 * short last row of bordered cards just ends.
 */
.ad-svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
}

.ad-svc__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
  padding: 20px 22px;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  color: var(--ad-color-text);
  font-weight: 500;
  height: 100%;
}

.ad-svc__card:hover {
  background: var(--ad-color-bg);
  border-color: var(--ad-color-accent);
  color: var(--ad-color-accent);
}

.ad-svc__card-arrow {
  display: flex;
  flex: none;
  color: var(--ad-color-text-meta);
}

.ad-svc__card:hover .ad-svc__card-arrow { color: var(--ad-color-accent); }

/* The arrow points along the reading direction. */
[dir="rtl"] .ad-svc__card-arrow { transform: scaleX(-1); }

/* -------------------------------------------------------------------- cta */

.ad-svc__cta {
  max-width: 1160px;
  margin-inline: auto;
  margin-top: 72px;
  margin-bottom: var(--ad-space-section);
  padding: 44px var(--ad-space-page);
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ad-svc__cta-label {
  margin: 0 0 6px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ad-color-text-meta);
}

.ad-svc__cta-sub {
  margin: 0;
  font-size: 21px;
  color: var(--ad-color-text);
  max-width: 44ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ small */

@media (max-width: 720px) {


  .ad-svc__titlerow { gap: 16px; }

  .ad-svc__mark {
    width: 44px;
    height: 44px;
    margin-top: 2px;
  }

  .ad-svc__mark svg { width: 20px; height: 20px; }

  .ad-svc__body > p:first-child { font-size: 18px; }

  .ad-svc__more,
  .ad-svc__cta { margin-top: 56px; }

  .ad-svc__cta {
    padding: 28px 20px;
    align-items: stretch;
  }

  .ad-svc__cta .ad-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-svc__q-mark::before,
  .ad-svc__q-mark::after { transition: none; }
}

/* ------------------------------------------------------------------ facts */

/*
 * The strip under an about page's opening. Four things a reader wants in
 * two seconds, and the block a model lifts when asked who this company is.
 *
 * Authored as markup in the page content rather than generated, because the
 * four facts are copy: which four, and how each is phrased, is an editorial
 * decision and not something to derive from headings.
 */
.ad-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.ad-facts li {
  /* Overrides the body list rule, which draws an accent dash before each
     item. These are cells, not a list of points. */
  padding: 22px 24px;
  margin: 0;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
}

.ad-facts li::before { content: none; }

.ad-facts__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ad-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad-color-text-meta);
}

.ad-facts__value {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--ad-color-text);
}

/* ------------------------------------------------------------------ cards */

/*
 * A run of short blocks that belong together: the four convictions on the
 * about page. Two columns on a wide screen, one on a phone.
 */
.ad-cards {
  display: grid;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  max-width: none;
}

@media (min-width: 900px) {
  .ad-cards--2 { grid-template-columns: 1fr 1fr; }
}

.ad-cards__item {
  padding: 24px 26px;
  margin: 0;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
}

.ad-cards__item::before { content: none; }

.ad-cards__item h3 {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ad-color-text);
}

/* The accent rule marks subheads in flowing prose. Inside a card the border
   already does that job, and the rule just adds a stray dash. */
.ad-cards__item h3::before { content: none; }

.ad-cards__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ad-color-text-muted);
  max-width: none;
}

@media (max-width: 720px) {
  .ad-facts li { padding: 18px 20px; }
  .ad-cards__item { padding: 20px 22px; }
}

/*
 * Two facts per row on a phone.
 *
 * auto-fit with a 210px minimum fits exactly one column in the 335px a
 * 375px phone leaves, so four short facts - a year, a city, six language
 * codes and three regions - took 533px of scroll between them, most of a
 * screen. They are the shortest values on the site and the least deserving
 * of a row each.
 *
 * Fixed at two rather than auto-fit, because the minimum that would let
 * two fit is smaller than the minimum that keeps them readable at any
 * other width.
 */
@media (max-width: 620px) {
  .ad-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The value carries the width now, so it gives back a little size. */
  .ad-facts__value { font-size: 17px; }
}

/* --------------------------------------------------------------- channels */

/*
 * The three direct channels on the contact page, as whole clickable cards.
 * The home page renders the same data as a row list; this is the treatment
 * for a page whose only job is to be contacted.
 */
.ad-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  max-width: none;
}

.ad-channels li { margin: 0; padding: 0; }
.ad-channels li::before { content: none; }

.ad-channels__card {
  display: block;
  height: 100%;
  padding: 22px 24px;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  color: var(--ad-color-text);
}

/* The whole card is the link, so it takes the hover, not just the value. */
.ad-channels__card:hover,
.ad-channels__card:focus-visible {
  border-color: var(--ad-color-accent);
  color: var(--ad-color-text);
}

.ad-channels__icon {
  display: flex;
  margin-bottom: 14px;
  color: var(--ad-color-accent);
}

.ad-channels__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ad-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad-color-text-meta);
}

.ad-channels__value {
  display: block;
  font-size: 17px;
  font-weight: 500;
  /* A phone number is Latin digits inside a Hebrew page: act_bidi keeps it
     from being reordered, and this keeps it from wrapping mid-number. */
  white-space: nowrap;
}

/* ----------------------------------------------------------------- follow */

/*
 * Address and hours. The address takes the space that is left and the hours
 * card is only as wide as its own line, which is what keeps the pair from
 * reading as two equal columns of unrelated facts.
 */
.ad-channels__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.ad-channels__addr,
.ad-channels__hours {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 18px 24px;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  font-size: 16px;
  color: var(--ad-color-text-secondary);
}

.ad-channels__addr { flex: 1 1 260px; }
.ad-channels__hours { flex: 0 1 auto; }

.ad-channels__meta-icon {
  display: flex;
  flex: none;
  color: var(--ad-color-accent);
}

.ad-channels__meta-icon svg { display: block; }

.ad-follow {
  display: flex;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 24px;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
}

.ad-follow__label {
  font-family: var(--ad-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad-color-text-meta);
}

.ad-follow__sub {
  flex-grow: 1;
  font-size: 15px;
  color: var(--ad-color-text-secondary);
}

.ad-follow__links {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-follow__links li { margin: 0; padding: 0; }
.ad-follow__links li::before { content: none; }

.ad-follow__link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 38px box, but the touch target reaches 44 through the row's padding. */
  width: 38px;
  height: 38px;
  border: 1px solid var(--ad-color-hairline);
  color: var(--ad-color-text-secondary);
}

.ad-follow__link:hover,
.ad-follow__link:focus-visible {
  border-color: var(--ad-color-accent);
  color: var(--ad-color-accent);
}

@media (max-width: 720px) {
  .ad-channels__card { padding: 18px 20px; }
  .ad-follow { padding: 14px 18px; }
  .ad-follow__sub { flex-basis: 100%; }
}

/* ------------------------------------------------------- form + its aside */

/*
 * "What helps us answer" sits beside the form rather than below it, which is
 * what makes it useful: it is read while the form is being filled in.
 *
 * Its content is lifted out of the page body by act_extract_section(), so it
 * is still ordinary editable copy and not a second thing to maintain.
 */
@media (min-width: 1000px) {
  .ad-svc__formrow {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 48px;
    align-items: start;
  }
}

/*
 * The heading sits in the form's own column, not above both of them: the
 * aside is a note about filling the form in, so it starts level with the
 * form rather than under a heading that spans the pair.
 */
.ad-svc__formcol > h2 { margin: 0 0 6px; }

/* The line under a section heading, which the approved design gives to
   the two sections this template writes itself. */
.ad-svc__section-sub {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ad-color-text-secondary);
  max-width: 66ch;
}

/*
 * The aside's list gets the same accent dash the body's lists use. It is
 * outside .ad-svc__body, because it was lifted out of the body, so it does
 * not inherit those rules and without this it renders as bare text.
 */
.ad-svc__aside ul {
  margin: 0 0 16px;
  padding-inline-start: 0;
  list-style: none;
}

.ad-svc__aside li {
  position: relative;
  padding-inline-start: 20px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ad-color-text-secondary);
}

.ad-svc__aside li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .7em;
  width: 7px;
  height: 1px;
  background: var(--ad-color-accent);
}

/* Two outline buttons rather than one accent button. */
.ad-svc__cta-pair {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ad-svc__formcol { min-width: 0; }

.ad-svc__aside {
  border-inline-start: 1px solid var(--ad-color-hairline);
  padding-inline-start: 40px;
}

.ad-svc__aside-label {
  margin: 0 0 16px;
  font-family: var(--ad-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad-color-text-meta);
}

.ad-svc__aside p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ad-color-text-secondary);
}

.ad-svc__aside p:last-child { color: var(--ad-color-text-meta); font-size: 15px; }

@media (max-width: 999px) {
  .ad-svc__aside {
    border-inline-start: 0;
    border-top: 1px solid var(--ad-color-hairline);
    padding-inline-start: 0;
    padding-top: 28px;
    margin-top: 32px;
  }
}

/* --------------------------------------------------- the summary strip */

/*
 * The cells under a service page's opening section: icon, short label, one
 * line. Three or four of them, depending on how many points the section
 * makes, so the count is set by the copy rather than the copy padded to a
 * count.
 *
 * auto-fit rather than a fixed three columns: a four point section gets
 * four cells in a row at full width and two by two on a tablet, and none
 * of it needs a second rule per page.
 */
.ad-cells {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four points go two by two rather than three and a widow. */
.ad-cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .ad-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ad-cells,
  .ad-cells--4 { grid-template-columns: 1fr; }
}

.ad-cells__cell {
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  padding: 22px 24px;
}

.ad-cells__icon {
  display: block;
  margin-bottom: 14px;
  color: var(--ad-color-accent);
}

.ad-cells__icon svg { display: block; }

.ad-cells__label {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ad-color-text);
}

.ad-cells__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ad-color-text-meta);
}

/* ------------------------------------------------- the hub's service cards */

/*
 * The services hub's six children, as cards.
 *
 * Same vocabulary as every other card on these pages: panel fill, hairline
 * border, accent mark, accent border on hover. The whole card is the link,
 * because a card that contains a link gives a reader a target the size of a
 * few words where the design offers one the size of the card.
 */
.ad-scards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ad-scards__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 24px 26px;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  color: var(--ad-color-text);
  text-decoration: none;
}

.ad-scards__card:hover,
.ad-scards__card:focus-visible {
  border-color: var(--ad-color-accent);
  color: var(--ad-color-text);
}

.ad-scards__icon {
  display: flex;
  margin-bottom: 16px;
  color: var(--ad-color-accent);
}

.ad-scards__icon svg { display: block; }

.ad-scards__name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

.ad-scards__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ad-color-text-meta);
}

/*
 * The arrow sits at the bottom of the card whatever the description's
 * length, so six cards of unequal copy still read as one row.
 */
.ad-scards__go {
  display: flex;
  margin-top: auto;
  padding-top: 18px;
  color: var(--ad-color-accent);
}

.ad-scards__go svg { display: block; }

.ad-scards__card:where([dir="rtl"] *) .ad-scards__go svg,
[dir="rtl"] .ad-scards__go svg { transform: scaleX(-1); }

@media (max-width: 1100px) {
  .ad-scards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ad-scards { grid-template-columns: 1fr; }
}

/* ------------------------------------------- products, chips, solo address */

/*
 * The company's own products. Two wide cards rather than three or four
 * narrow ones: there are two of them and a grid that fits more would leave
 * the row looking unfinished.
 */
.ad-prod {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ad-prod__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
  padding: 22px 26px;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  color: var(--ad-color-text);
  text-decoration: none;
}

.ad-prod__card:hover,
.ad-prod__card:focus-visible {
  border-color: var(--ad-color-accent);
  color: var(--ad-color-text);
}

.ad-prod__body { display: block; min-width: 0; }

.ad-prod__name {
  display: block;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.ad-prod__text {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ad-color-text-meta);
}

.ad-prod__go {
  display: flex;
  flex: none;
  color: var(--ad-color-text-meta);
}

.ad-prod__go svg { display: block; }
.ad-prod__card:hover .ad-prod__go { color: var(--ad-color-accent); }

/* The arrow points away from the reader, so it flips with the text. */
[dir="rtl"] .ad-prod__go svg,
[dir="rtl"] .ad-scards__go svg { transform: scaleX(-1); }

@media (max-width: 700px) {
  .ad-prod { grid-template-columns: 1fr; }
}

/*
 * Partner names. Labelled through data-label rather than a heading of their
 * own: three platform names are a fact about the section above them, not a
 * section, and they had a numbered heading to themselves before this.
 */
.ad-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ad-chips::before {
  content: attr(data-label);
  font-family: var(--ad-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad-color-text-meta);
  margin-inline-end: 6px;
}

.ad-chips li {
  padding: 11px 18px;
  background: var(--ad-color-panel);
  border: 1px solid var(--ad-color-hairline);
  font-size: 14px;
  color: var(--ad-color-text-secondary);
}