/* =============================================================================
   ODUEX — /websites/ page layout.
   Arrangement only. Every component this page places is styled in core.css;
   nothing here restyles a component, redeclares a token or invents a value.
   ============================================================================= */

/* ── 1. Hero — editorial single column. The h1 takes no width cap: each
   masked line is written short enough to hold on one visual line down to a
   375px phone, and a cap here would force the wrap the mask cannot survive. ── */
.page-websites .ws-hero .eyebrow{
  margin-bottom: var(--space-6);
}
.page-websites .ws-hero .lede{
  margin-top: var(--space-6);
}
.page-websites .ws-hero .btn-row{
  margin-top: var(--space-8);
}

/* ── 2. Comparison — tighter gap so the two panels read as one argument.
   Heights stretch on purpose: two bordered panels side by side must end on
   the same line. Do not add align-items:start here. ── */
.page-websites .ws-compare{
  --gap: var(--space-6);
}

/* ── 3. The first-sixty-seconds timeline — held to the editorial measure. ── */
.page-websites .ws-steps{
  max-width: var(--measure-narrow);
}

/* ── 4. Craft list — breathing room above, lists side by side. ── */
.page-websites .ws-craft{
  margin-top: var(--space-14);
}
.page-websites .ws-craft-lists{
  --gap: var(--space-8);
  margin-top: var(--space-8);
  align-items: start;
}

/* ── 5. Honest sorting — cross-link arrows sit clear of the list above. ── */
.page-websites .ws-fit{
  --gap: var(--space-12);
  align-items: start;
}
.page-websites .ws-fit .list-check{
  margin-top: var(--space-6);
}
.page-websites .ws-fit-links{
  margin-top: var(--space-8);
  --gap: var(--space-6);
}

/* ── 6. Proof — screenshot slightly wider than the words, both centred. ── */
.page-websites .ws-proof{
  align-items: center;
}
@media (min-width: 760px){
  .page-websites .ws-proof{
    grid-template-columns: 54fr 46fr;
  }
}
.page-websites .ws-proof-copy > * + *{
  margin-top: var(--space-6);
}
.page-websites .ws-proof-copy .tag-row + h2{
  margin-top: var(--space-4);
}

/* ── 7. Final stage CTA — note and SLA line spaced under the buttons. ── */
.page-websites .ws-sla{
  margin-top: var(--space-8);
  max-width: var(--measure-narrow);
}

/* The H1 steps down on a narrow phone, because a masked line that wraps reveals
   as one block. --fs-hero bottoms out at its 2.90rem floor while the column
   keeps shrinking, so the longest line overruns below 320px. Same step, and
   the same reason, as the homepage and teardown heroes. */
@media (max-width: 400px){
  .page-websites h1.display-hero{ font-size: var(--fs-4xl); }
}