/*
 * Outsource SEO Services landing page — the sections only this page renders.
 *
 * Everything else is already built: landing.css supplies the hero, feature
 * grid, checklist and rail; seo-reseller.css supplies the definition band,
 * the numbered card grid, the industries rail and the hairline trust grid,
 * and this page loads both. What is left is four sections the other two
 * landing pages have no equivalent of — the stacked collaborate cards, the
 * comparison table, the audience grid and the tool strip — plus the one row
 * variant the process list needs.
 *
 * Scoped to .os-page so nothing here can reach another template.
 */

/* ---------- Hero ----------
   The supplied backdrop is a wide, soft wash with a curve running through it.
   It sits under the shared .lp-hero rather than replacing its colour, so the
   band still reads correctly while the image loads and at widths taller than
   the artwork. */
.os-page .os-hero {
  background-color: var(--lp-soft);
  background-image: url("../images/outsource-seo/hero-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* The artwork is 776px wide. The shared .lp-hero-art stretches its image to
   the column, which on a 1920 viewport asked for 866px and on a 2560 one for
   1193px - so the dashboard was being upscaled 1.5x, soft and oversized
   against the copy beside it. Capped at its own resolution and centred in
   whatever column is left. */
.os-page .os-hero .lp-hero-art img {
  max-width: 776px;
  margin-inline: auto;
}

/* ---------- Hero points ----------
   The design gives each point its own card with a coloured tick, rather than
   the bare tick row the other landing pages use. The four hues are positional
   - they belong to the slot, not to the sentence in it - so they are set by
   :nth-child and stay put if the copy is reordered. */
.os-page .os-hero .lp-hero-points {
  gap: 16px;
}

.os-page .os-hero .lp-hero-points li {
  gap: 14px;
  padding: 13px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e9edf5;
  box-shadow: 0 2px 10px rgba(13, 21, 38, 0.05);
  color: var(--ink);
  font-weight: 500;
}

.os-page .os-hero .lp-tick {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

.os-page .os-hero .lp-tick .lp-icon {
  width: 15px;
  height: 15px;
}

.os-page .os-hero .lp-hero-points li:nth-child(1) .lp-tick {
  background: #fd6f00;
}

.os-page .os-hero .lp-hero-points li:nth-child(2) .lp-tick {
  background: #306bfe;
}

.os-page .os-hero .lp-hero-points li:nth-child(3) .lp-tick {
  background: #29b9b4;
}

.os-page .os-hero .lp-hero-points li:nth-child(4) .lp-tick {
  background: #8551f5;
}

/* ---------- Hero call to action ----------
   Warm-to-cool sweep sampled off the design, with the disc inverted to white.
   Only the hero carries it: it is the page's single loudest element, and a
   second one would stop it reading as the primary action. */
.os-page .btn-gradient {
  /* the design sets the disc further off the label than the shared button
     does; without this the arrow crowds a label this long */
  padding-right: 82px;
  background-image: linear-gradient(90deg, #ff8a3d 0%, #ff6263 30%, #a04fc4 64%, #5a59ed 100%);
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(160, 79, 196, 0.28);
}

.os-page .btn-gradient .icon-circle {
  background-color: #fff;
}

.os-page .btn-gradient .icon-circle svg path {
  fill: #0b0b0b;
}

.os-page .btn-gradient:hover {
  padding-right: 82px;
  background-image: linear-gradient(90deg, #ff7a24 0%, #ff4a4c 30%, #9038bb 64%, #4741e8 100%);
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(160, 79, 196, 0.36);
}

.os-page .btn-gradient:hover .icon-circle {
  background-color: #fff;
}

/* ---------- Collaborate ----------
   Copy left, three filled cards stacked right. The SEO Reseller version of
   this section runs its cards as a row beneath a full-width head; this design
   pairs them with the copy, so it is its own layout rather than a modifier. */
.os-page .os-collab {
  background: var(--lp-soft);
}

.os-page .os-collab-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}

/* Pinned while the cards scroll past, the same treatment .sr-trust-copy and
   .faq-left use - and the same offset, which clears the fixed header pill.
   Gated at the breakpoint because stacked the copy is its own grid row: it has
   no travel to sit still through, and pinning it there parks the heading over
   the cards as they scroll past.

   Worth knowing before tuning this: the two columns are nearly the same
   height, so the pin only has ~37px of travel at 1600px and ~12px at 1280px.
   It reads as "the heading holds a moment longer", not as a column that
   visibly stands still. Lengthening the copy or adding a fourth card is what
   would make it pronounced. */
@media (min-width: 961px) {
  .os-page .os-collab-copy {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
    align-self: start;
  }
}

.os-page .os-collab-copy .heading-main {
  font-size: clamp(30px, 3.6vw, 50px);
  margin-bottom: 22px;
}

.os-page .os-collab-copy p {
  margin: 0;
  color: #5c6779;
  line-height: 1.8;
}

.os-page .os-collab-cards {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
}

.os-page .os-collab-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 26px 30px;
  border-radius: var(--lp-card-r);
  /* the one filled surface on the page: the section is a claim about working
     with us, and the cards are the claim's evidence */
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.22);
  transition: var(--lp-lift);
}

.os-page .os-collab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(79, 70, 229, 0.3);
}

/* No well: the supplied glyphs are white line art drawn to sit directly on
   the card, and a tinted square behind them only boxes them in. The inline
   fallback keeps one, since a stroke glyph needs the contrast. */
.os-page .os-collab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: #fff;
}

.os-page .os-collab-icon:not(:has(img)) {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
}

.os-page .os-collab-icon .lp-icon {
  width: 28px;
  height: 28px;
}

.os-page .os-collab-icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.os-page .os-collab-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.os-page .os-collab-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- Outsourced vs in-house ---------- */
.os-page .os-compare {
  background: var(--lp-soft);
}

/* Three columns of prose do not fit a phone, and squeezing them makes the
   table unreadable rather than smaller — so it keeps its width and scrolls.
   tabindex on the wrapper is what makes that scroller reachable by keyboard. */
.os-page .os-compare-scroll {
  margin-top: clamp(32px, 4vw, 52px);
  overflow-x: auto;
  border-radius: var(--lp-card-r);
  background: var(--white);
  border: 1px solid var(--lp-card-line);
  box-shadow: var(--lp-card-shadow);
}

.os-page .os-compare-scroll:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Collapsed. The iApp header's rounded outline is drawn by a pseudo-element
   rather than by the cell's own border (see below), so nothing here needs
   border-radius on a <th> - which a collapsed table drops, and which was the
   reason this briefly ran border-collapse: separate. */
.os-page .os-compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}

.os-page .os-compare-table th,
.os-page .os-compare-table td {
  padding: 18px clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--lp-card-line);
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.55;
}

/* Vertical rules between all three columns, not just beside the iApp one -
   the design rules every column, and without them the middle column's text
   floats with nothing to sit against. */
.os-page .os-compare-table th:not(:last-child),
.os-page .os-compare-table td:not(:last-child) {
  border-right: 1px solid var(--lp-card-line);
}

.os-page .os-compare-table tbody tr:last-child th,
.os-page .os-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.os-page .os-compare-table thead th {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: #fbfcfe;
}

/* row headers are the factor names — same weight as the column heads, so the
   left edge reads as a spine rather than as body copy */
.os-page .os-compare-table tbody th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.os-page .os-compare-table td {
  color: #5c6779;
}

/* The iApp column: a tint down the body, and the blue outline drawn around
   the HEADER CELL ONLY. Boxing the whole column - which is what the border
   pair on every cell used to do - fought the wrapper's own rounded border all
   the way down and left the corners half-drawn where the two met. */
.os-page .os-compare-table .is-us {
  background: rgba(22, 104, 255, 0.05);
  color: var(--ink);
  font-weight: 600;
}

/* The outline is a pseudo-element pinned to the cell's box, not a border on
   the cell. A cell border has to negotiate with border-collapse, with the
   neighbouring cells' borders and with the wrapper's own rounded border, and
   the result drifted a few pixels short of the column's right edge at some
   widths. An inset overlay is the same rectangle at every width and in every
   collapse mode. */
.os-page .os-compare-table thead .is-us {
  position: relative;
  background: rgba(22, 104, 255, 0.07);
  color: var(--blue);
}

.os-page .os-compare-table thead .is-us::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
}

/* the tint is clipped by the wrapper's radius, but the cell's own corner has
   to be rounded too or its background squares off underneath it */
.os-page .os-compare-table tbody tr:last-child .is-us {
  border-bottom-right-radius: var(--lp-card-r);
}

/* Icon and label as a flex row: inline siblings put a wrapped second line
   back under the icon, which is what "pay-as-you-scale pricing" did as soon as
   the column narrowed. */
.os-page .os-compare-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.os-page .os-compare-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
}

.os-page .os-compare-ico .lp-icon {
  width: 18px;
  height: 18px;
}

.os-page .os-compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.os-page .os-compare-check .lp-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

/* ---------- Who outsourcing suits ----------
   The tile is .sr-industry-card from the rail. This is a short, complete list
   rather than a scroller, so it is laid out as a fixed grid and the tiles run
   a little wider than tall. */
.os-page .os-audience-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.os-page .os-audience-head .heading-main {
  font-size: clamp(30px, 3.6vw, 50px);
  margin-bottom: 28px;
}

.os-page .os-audience-text {
  align-self: center;
  color: #5c6779;
  line-height: 1.8;
  margin: 0;
}

.os-page .os-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

/* Scoped to the grid tile, never to .sr-industry-card itself: the same tile
   is the industries rail, which is dragged - a hover that moves the card
   would fire under the cursor mid-drag. */
.os-page .os-audience-card {
  aspect-ratio: 4 / 3;
  transition: var(--lp-lift);
}

.os-page .os-audience-card h3 {
  font-size: clamp(19px, 1.7vw, 26px);
  transition: transform 0.42s ease;
}

.os-page .os-audience-card img,
.os-page .os-audience-card::after {
  transition: transform 0.55s ease, opacity 0.42s ease;
}

/* the scrim rests below full strength so the hover has somewhere to go */
.os-page .os-audience-card::after {
  opacity: 0.82;
}

.os-page .os-audience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--lp-card-shadow-hover);
}

/* The photo grows inside the tile rather than the tile growing: the grid rows
   stay put, so a hover never reflows its neighbours. */
.os-page .os-audience-card:hover img {
  transform: scale(1.07);
}

/* the scrim deepens with it, or the label loses its footing against the
   brighter part of the photo that has just moved under it */
.os-page .os-audience-card:hover::after {
  opacity: 1;
}

.os-page .os-audience-card:hover h3 {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .os-page .os-audience-card,
  .os-page .os-audience-card img,
  .os-page .os-audience-card h3 {
    transition: box-shadow 0.32s ease;
  }

  .os-page .os-audience-card:hover,
  .os-page .os-audience-card:hover img,
  .os-page .os-audience-card:hover h3 {
    transform: none;
  }
}

/* ---------- What is SEO outsourcing ----------
   The SEO Reseller version of this band is heavily dressed: a dot grid, a
   radial white wash, an outlined panel offset behind the photo, an accent rule
   under the heading and a bolded first line. The design for this page is the
   plain version of the same layout - a flat tint, a wave into it from the
   section above, and a photograph. Everything below is subtraction, which is
   why it reads as a list of :none rather than a new component. */
.os-page .os-whatis {
  background: #f2faff;
  padding-block: clamp(66px, 8vw, 118px);
}

/* the dot grid and its mask */
.os-page .os-whatis::before {
  content: none;
}

/* Wave into the band from the white section above. Decorative and never
   hit-tested; drawn as one path rather than an image so it recolours with the
   section it sits under. */
.os-page .os-whatis::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(26px, 2.6vw, 44px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 44' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C 210 4 380 34 620 26 C 860 18 1040 40 1250 30 C 1400 23 1500 16 1600 22 L1600 0 L0 0 Z' fill='%23ffffff'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Gated at the breakpoint on purpose. seo-reseller.css stacks this band below
   960px by collapsing to one column, zeroing the gap and setting
   .sr-whatis-copy to display:contents so the heading can be ordered above the
   photo. An ungated two-column rule here outranks that (it is the more
   specific selector), so on a phone the four now-loose grid items - heading,
   photo, and BOTH paragraphs - laid themselves out two across. */
@media (min-width: 961px) {
  .os-page .os-whatis .sr-whatis-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 7vw, 112px);
  }
}

/* Sized off the design rather than left to fill the column: the reference
   plate is 590px in a 1600px canvas, and an uncapped 1fr column renders it
   ~660px, which reads as an oversized photo next to the copy. Centred in
   whatever the column leaves over, per seo-reseller.css. */
.os-page .os-whatis .sr-whatis-frame {
  max-width: min(100%, 590px);
}

/* the offset outlined panel behind the photo */

.os-page .os-whatis .sr-whatis-frame::before {
  content: none;
}

/* The asset is a 2000px square; the design crops it to a landscape plate. */
.os-page .os-whatis .sr-whatis-frame img {
  aspect-ratio: 7 / 6;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e3ebf5;
  box-shadow: 0 2px 12px rgba(13, 21, 38, 0.06);
}

/* the accent rule under the heading */
.os-page .os-whatis .heading-main::after {
  content: none;
}

.os-page .os-whatis .sr-whatis-copy .heading-main {
  margin-bottom: 26px;
}

/* the lede treatment on the first line, and the justification: the design sets
   both paragraphs as plain ragged-right body copy */
.os-page .os-whatis .sr-whatis-copy p::first-line {
  color: inherit;
  font-weight: 400;
}

.os-page .os-whatis .sr-whatis-copy p {
  text-align: left;
  hyphens: manual;
  margin-bottom: 22px;
}

.os-page .os-whatis .sr-whatis-copy p:last-child {
  margin-bottom: 0;
}

/* ---------- Services ----------
   The supplied service icons are white line art, so the shared squircle is
   filled coral here rather than tinted with a coral stroke. */
.os-page .os-services .lp-feature-icon {
  background: var(--lp-coral);
  color: #fff;
}

.os-page .os-services .lp-feature-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ---------- Why businesses choose us ----------
   Supplied artwork is already a filled indigo glyph; the one row still on the
   inline set keeps the stroke colour from seo-reseller.css. */
.os-page .os-why .sr-trust-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* ---------- Bandwidth call to action ---------- */
.os-page .os-bandwidth-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 60px);
  border-radius: var(--lp-card-r);
  background: linear-gradient(120deg, #f6f9ff 0%, #eef3fd 100%);
  border: 1px solid var(--lp-card-line);
}

.os-page .os-bandwidth-inner .heading-main {
  font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 18px;
}

.os-page .os-bandwidth-inner p {
  margin: 0;
  color: #5c6779;
  line-height: 1.8;
}

.os-page .os-bandwidth-points {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
}

.os-page .os-bandwidth-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2c3444;
  font-size: 15.5px;
}

/* ---------- Process ----------
   The shared .lp-checklist row, with the label allowed a sentence under it.
   A row that carries a description is still a checklist row, so this is four
   declarations rather than a second component. */
.os-page .os-steps li {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
}

.os-page .os-steps .lp-checklist-icon {
  margin-top: 2px;
}

.os-page .os-steps .lp-checklist-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.os-page .os-steps .lp-checklist-label {
  display: block;
}

.os-page .os-steps .lp-checklist-label strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.os-page .os-step-text {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Call to action band ----------
   The shared .band is a pale gradient; the design puts this one in solid brand
   blue with a white pill button, and it is the page's only full-bleed colour
   field. Only the colours change — the layout, the two blurred glows and the
   button are the same component. */
.os-page .os-band {
  background: linear-gradient(100deg, #1668ff 0%, #0b4ed1 100%);
}

/* the glows are white at 0.7 on the pale original; over blue they only need to
   be a hint, or they read as smears */
.os-page .os-band::before,
.os-page .os-band::after {
  background: rgba(255, 255, 255, 0.16);
}

.os-page .os-band .trusted-heading {
  color: #fff;
}

.os-page .os-band .trusted-lead {
  color: rgba(255, 255, 255, 0.88);
}

.os-page .os-band .btn-strategy {
  background-color: #fff;
  border-color: #fff;
  color: var(--blue);
}

.os-page .os-band .btn-strategy .icon-circle {
  background-color: var(--blue);
}

.os-page .os-band .btn-strategy:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- Tools ----------
   The shared .marquee from assets/style.css, the same component the awards
   strip above already renders — so the track, the 45s loop, the pause on
   hover/focus and the prefers-reduced-motion fallback all come for free and
   nothing is restated here. What this block adds is the row inside it and the
   tile's flex sizing; the tile itself is otherwise unchanged from the grid it
   replaced.

   The row is .os-tool-row rather than .award-row: reusing the awards class
   would make a rule that is really "any marquee row" read as awards-specific,
   which is the namespace mistake the ORM page was pulled up on. The cost is
   two declarations. */
.os-page .os-tool-marquee {
  /* .marquee is overflow:hidden and clips at its PADDING box, so this padding
     is literally the room the hover needs — without it the tile's -4px rise and
     its 0 18px 40px shadow are sliced off flat against the strip's edges.
     38px covers the largest extent: 18px offset + 20px (half the blur) below
     the tile, less the 4px it has risen. Symmetric, so the strip still reads as
     centred in its own band. */
  padding-block: 38px;

  /* .marquee's own margin-top is 70px, sized for the awards strip which sits
     directly under a heading. This one follows a lead paragraph, and the
     padding above now supplies most of that gap, so the margin only tops it
     up rather than stacking a second full gap on top. */
  margin-top: clamp(0px, 1vw, 14px);
}

.os-page .os-tool-row {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  /* holds the gap open across the loop seam, where the last tile of one copy
     meets the first of the next */
  padding-right: clamp(14px, 1.6vw, 22px);
}

.os-page .os-tool {
  /* a track item, so it must not shrink to share the row */
  flex: none;
  width: clamp(150px, 13vw, 180px);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 18px;
  text-align: center;
  border-radius: var(--lp-card-r);
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-card-line);
  box-shadow: var(--lp-card-shadow);
  transition: var(--lp-lift);
}

.os-page .os-tool:hover {
  transform: translateY(-4px);
  border-color: var(--lp-card-line-hover);
  box-shadow: var(--lp-card-shadow-hover);
}

/* Stands in for a logo until one is supplied: the tool's initial, set at
   display size on the same tinted squircle the rest of the page uses. */
.os-page .os-tool-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--lp-num-font);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

/* A supplied logo carries its own colour, so the tinted well is dropped -
   eight brand marks each sitting on the same blue square read as one product
   family rather than eight tools. Only the initial fallback keeps it. */
.os-page .os-tool.has-logo .os-tool-mark {
  background: none;
  width: 52px;
  height: 52px;
}

.os-page .os-tool-mark img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.os-page .os-tool-name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

/* Under a reduced-motion request assets/style.css already stops .marquee-track
   and turns .marquee into a plain horizontal scroller, but it hides the
   duplicate copies with a selector keyed to .award-row. Without the same rule
   for this row the reader is handed four identical copies of the set to scroll
   through by hand.

   Viewport width needs no rule of its own: the strip is a continuous scroll,
   so a narrow screen simply sees less of it at once. Hiding copies at a phone
   breakpoint would be a bug — the track still slides -50% of whatever is left,
   so a single remaining copy runs off and leaves the row empty for a beat. */
@media (prefers-reduced-motion: reduce) {
  .os-page .os-tool-row[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Justified body copy ----------
   Matches the convention the other landing pages already follow; the shared
   selectors live in landing.css and seo-reseller.css, these are this page's
   own. The 640px override there is keyed to those selectors, so this block
   repeats it below. */
.os-page .os-collab-copy p,
.os-page .os-audience-text {
  text-align: justify;
  text-justify: inter-word;
  text-wrap: pretty;
  hyphens: auto;
}

@media (max-width: 640px) {
  .os-page .os-collab-copy p,
  .os-page .os-audience-text {
    text-align: left;
    hyphens: manual;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .os-page .os-collab-inner,
  .os-page .os-audience-head,
  .os-page .os-bandwidth-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-page .os-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .os-page .os-audience-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-page .os-collab-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* Cards sit still for anyone who asked motion to stop. */
@media (prefers-reduced-motion: reduce) {
  .os-page .os-collab-card:hover,
  .os-page .os-tool:hover {
    transform: none;
  }
}