/* ============================================================================
   Automatic vs Manual Diamond Setting (id_cms=10) — comparison-guide layout
   ----------------------------------------------------------------------------
   Loaded only on this page, from `cms/page.tpl`. Everything is scoped to
   `.gde`, the wrapper class the CMS content itself carries, so this file is
   inert on every other CMS page even if it were ever loaded globally.

   Measured on the stock page before this existed (1440px / 390px):

     reading measure    832px capped by cms-premium.css, ~536px of empty right
     page title         h1 at 21.57px (page.tpl ships it with class `h4`) under
                        Playfair h2s at ~32px — the title was the SMALLEST
                        heading on the page
     h2 treatment       cms-premium.css draws a full-width hairline under every
                        CMS h2; six of them made six equal grey slabs
     comparison table   8 rows x 3 columns compressed into 366px on a 390px
                        phone — scrollWidth equalled clientWidth, so it never
                        scrolled, it just crushed. On a page whose entire job
                        is a comparison, that table was the least readable
                        thing on it.
     scannable elements 0

   The layout answers the question a buyer actually arrives with ("is a machine
   worth it for MY volume"), so the comparison table is the centrepiece with the
   automatic column visibly held apart, the buying decision is three numbered
   steps plus a site-requirements table, and manual setting keeps a column of
   its own rather than being written off.

   MARKUP CONSTRAINT: the HTML lives in the database and is re-purified on every
   back-office save (PS_USE_HTMLPURIFIER = 1, default doctype). HTMLPurifier
   strips <section>, data-* and aria-*. So every numeral, tick, bar and arrow
   here is drawn in CSS — the content is div/p/h2/h3/ul/ol/li/span/strong/a/
   table + class only. Keep it that way.

   PALETTE: the same pink/white/ink tokens as service-premium.css and
   about-premium.css. One addition — a neutral slate used ONLY for the manual
   column and the "where it stops" list, so "manual" reads as the quieter
   option rather than as an error state. No red: hand setting is not a fault.
   ========================================================================== */

:root {
  --skt-pink: #d50075;
  --skt-pink-dark: #9e0056;
  --skt-pink-tint: #fef0f7;
  --skt-pink-border: #f0dce8;
  --skt-ink: #1a0010;
  --skt-muted: #5c4453;
}

/* cms-premium.css caps `.page-cms.rich-text` at 52rem — the right measure for a
   column of prose, the wrong one for a stat band, a two-up split or a 3-column
   comparison. The cap is lifted here and re-applied per block instead. */
.page-cms.rich-text:has(.gde) {
  max-width: none;
}

.gde {
  /* ~68 characters at this font size — inside the 65-75ch the UX database asks
     for, and the value every prose block below is capped at. */
  --gde-measure: 46rem;
  --gde-slate: #6a6a75;
  --gde-slate-tint: #f7f7f9;
  --gde-slate-border: #e6e6ec;
  counter-reset: gdestep;
  color: #3a3a40;
}

/* ---------- Page title ----------
   page.tpl ships the h1 with class `h4`, so it rendered at 24px on desktop and
   21.57px on a phone — smaller than the h2s underneath it, which is backwards.
   `:has(.gde)` keeps this off the other CMS pages that share this template. */
body#cms:has(.gde) .page-header {
  text-align: center;
  margin-bottom: 0;
}

body#cms:has(.gde) .page-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--skt-ink);
  margin: 0;
}

/* ---------- Hero ---------- */
.gde__eyebrow {
  text-align: center;
  margin: 0 0 1rem;
}

.gde__eyebrow span {
  display: inline-block;
  padding: .4rem 1rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: var(--skt-pink-tint);
  color: var(--skt-pink-dark);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-cms.rich-text .gde__lede {
  max-width: 46rem;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--skt-ink);
}

.page-cms.rich-text .gde__intro {
  max-width: 38rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--skt-muted);
}

/* ---------- Stat band ----------
   1px grid gap over a tinted background draws the hairlines — the same
   construction as the About and Service pages, so the three read as one
   system. */
.gde__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--skt-pink-border);
  border: 1px solid var(--skt-pink-border);
  border-radius: 18px;
  overflow: hidden;
}

/* Numbers are pinned to the top of the cell rather than centred in it: the
   labels are different lengths ("Stones per hour, X4 Pro Plus" wraps to three
   lines on a phone, "Round stone range" to one), and centring each cell
   independently left the four figures at four different heights. Top-aligning
   them keeps the row of numbers scannable; the labels are free to run on. */
.gde__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .35rem;
  padding: clamp(1.25rem, 3vw, 2rem) .75rem;
  background: #fff;
  text-align: center;
  transition: background-color .3s ease;
}

@media (hover: hover) {
  .gde__stat:hover {
    background: var(--skt-pink-tint);
  }
}

.gde__stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, .95rem + 1.5vw, 2.1rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--skt-pink);
  white-space: nowrap;
}

.gde__stat-label {
  font-size: .78rem;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--skt-muted);
}

/* Four nowrap figures do not fit a phone; two rows of two do. */
@media (max-width: 767.98px) {
  .gde__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Blocks ---------- */
.gde__block {
  max-width: var(--gde-measure);
  margin: 0 auto clamp(2.75rem, 5.5vw, 4.5rem);
}

/* The comparison and site-requirement tables need more room than a prose
   measure. They are the reason the 52rem cap came off. */
.gde__block:has(.gde__vs),
.gde__block:has(.gde__spec) {
  max-width: 62rem;
}

.page-cms.rich-text .gde__h2 {
  position: relative;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--skt-ink);
  margin: 0 0 1rem;
  padding: 0 0 .75rem;
  /* cms-premium.css draws a full-width hairline under every CMS h2; at this
     size it cut the page into slabs. A short brand rule replaces it. */
  border-bottom: 0;
}

.page-cms.rich-text .gde__h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--skt-pink);
}

.page-cms.rich-text .gde__h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--skt-ink);
  margin: 2rem 0 .75rem;
  padding: 0;
  border-bottom: 0;
}

.gde__standfirst {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--skt-ink);
  margin-bottom: 1.25rem;
}

.gde__block p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

.gde__note {
  font-size: .875rem;
  color: var(--skt-muted);
  margin-top: .85rem;
}

/* ---------- Strengths / limits split ----------
   Manual setting keeps a column of its own. A page that only lists what is
   wrong with the incumbent method reads as a sales sheet; a buyer who still
   needs a bench setter for repairs has to see that said out loud. */
.gde__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.gde__side {
  padding: 1.35rem 1.4rem 1.5rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 16px;
  background: #fff;
}

.gde__side--stop {
  border-color: var(--gde-slate-border);
  background: var(--gde-slate-tint);
}

/* First child heading inside a card should not carry the 2rem top margin the
   standalone h3 rule sets. */
.page-cms.rich-text .gde__side .gde__h3 {
  margin-top: 0;
}

.page-cms.rich-text .gde__points,
.page-cms.rich-text .gde__limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.gde__points li,
.gde__limits li {
  position: relative;
  padding-left: 1.85rem;
  font-size: .9375rem;
  line-height: 1.6;
}

/* A tick for what the hand does well. Drawn, not a font icon: the About page
   inherited `<em class="icon-ok">` from a theme that left years ago and drew
   nothing at 0x20px for a decade. Nothing here can go missing that way. */
.gde__points li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .42em;
  width: .72rem;
  height: .38rem;
  border-left: 2px solid var(--skt-pink);
  border-bottom: 2px solid var(--skt-pink);
  transform: rotate(-45deg);
}

/* A bar, not a cross, for the limits — these are boundaries of a legitimate
   method, not failures. */
.gde__limits li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: .8rem;
  height: 2px;
  border-radius: 1px;
  background: var(--gde-slate);
}

.gde__limits li strong,
.gde__caveats li strong {
  color: var(--skt-ink);
}

@media (max-width: 767.98px) {
  .gde__split {
    grid-template-columns: 1fr;
  }
}

/* ---------- Comparison table ----------
   The centrepiece. Three columns of real sentences, so it needs the width the
   52rem cap denied it, and on a phone it scrolls inside its own wrapper rather
   than compressing (see .gde__scroll).

   The automatic column is tinted and rule-separated so the eye can run down one
   side of the comparison without re-reading the header. */
.page-cms.rich-text .gde__vs,
.page-cms.rich-text .gde__spec {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  overflow: hidden;
  font-size: .9375rem;
}

.page-cms.rich-text .gde__vs th,
.page-cms.rich-text .gde__spec th {
  background: var(--skt-pink-tint);
  color: var(--skt-ink);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--skt-pink-border);
  padding: .8rem 1rem;
  vertical-align: bottom;
}

.page-cms.rich-text .gde__vs td,
.page-cms.rich-text .gde__spec td {
  border: 0;
  border-bottom: 1px solid #f4eef1;
  padding: .8rem 1rem;
  vertical-align: top;
  line-height: 1.55;
}

.page-cms.rich-text .gde__vs tbody tr:last-child td,
.page-cms.rich-text .gde__spec tbody tr:last-child td {
  border-bottom: 0;
}

/* The row label column. */
.page-cms.rich-text .gde__vs td:first-child,
.page-cms.rich-text .gde__spec td:first-child {
  font-weight: 600;
  color: var(--skt-ink);
}

/* The manual column reads quieter than the automatic one. */
.page-cms.rich-text .gde__vs td:nth-child(2) {
  color: var(--gde-slate);
}

/* The automatic column, held apart down the full height of the table. */
.page-cms.rich-text .gde__vs .gde__vs-auto {
  background: var(--skt-pink-tint);
  border-left: 1px solid var(--skt-pink-border);
  color: var(--skt-ink);
}

.page-cms.rich-text .gde__vs th.gde__vs-auto {
  color: var(--skt-pink-dark);
}

/* Column widths: the label column stays tight so the two compared columns get
   the room. `table-layout: auto` would give the longest sentence the width. */
.page-cms.rich-text .gde__vs .gde__vs-measure {
  width: 22%;
}

/* Three columns of sentences do not fit a 390px phone. The table sits in a
   `.gde__scroll` wrapper and scrolls inside it; the page body itself never
   scrolls sideways.

   The wrapper is a real div rather than `display: block; overflow: auto` on the
   <table>: turning a table into a block makes it size to its content, so it
   crushes every column to two words per line and never actually overflows —
   which is exactly the bug this page shipped with. */
.gde__scroll {
  margin: 1.5rem 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .page-cms.rich-text .gde__scroll .gde__vs {
    min-width: 40rem;
  }

  .page-cms.rich-text .gde__scroll .gde__spec {
    min-width: 34rem;
  }
}

/* ---------- Caveat cards ---------- */
.page-cms.rich-text .gde__caveats {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gde__caveats li {
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--gde-slate-border);
  border-radius: 14px;
  background: var(--gde-slate-tint);
  font-size: .9375rem;
  line-height: 1.6;
}

.gde__caveats li strong {
  display: block;
  margin-bottom: .3rem;
  font-size: 1rem;
}

@media (max-width: 575.98px) {
  .page-cms.rich-text .gde__caveats {
    grid-template-columns: 1fr;
  }
}

/* ---------- Numbered steps ----------
   Numbered by CSS counter rather than by text in the content, so an editor
   reordering the steps cannot leave a stale numeral behind — and nothing
   depends on an attribute the purifier strips. */
.page-cms.rich-text .gde__steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.gde__steps li {
  position: relative;
  padding-left: 3.25rem;
  font-size: .9375rem;
  line-height: 1.65;
}

.gde__steps li strong {
  color: var(--skt-ink);
}

.gde__steps li::before {
  counter-increment: gdestep;
  content: counter(gdestep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.1em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .06em;
  color: var(--skt-pink);
  background: var(--skt-pink-tint);
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  padding: .32rem .6rem;
  line-height: 1;
}

/* On a narrow phone a 3.25rem indent costs the step most of its measure. */
@media (max-width: 420px) {
  .gde__steps li {
    padding-left: 0;
  }

  .gde__steps li::before {
    position: static;
    display: inline-block;
    margin: 0 0 .5rem;
  }
}

/* ---------- Callout ---------- */
.gde__callout {
  margin-top: 2rem;
  padding: 1.4rem 1.5rem 1.15rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 16px;
  background: var(--skt-pink-tint);
}

.page-cms.rich-text .gde__callout-t {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--skt-ink);
  margin: 0 0 .45rem;
}

.page-cms.rich-text .gde__callout p:last-child {
  margin-bottom: 0;
  font-size: .9375rem;
}

/* ---------- Machine cards ---------- */
.gde__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.gde__card {
  padding: 1.35rem 1.4rem 1.4rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}

@media (hover: hover) {
  .gde__card:hover {
    box-shadow: 0 10px 28px rgba(213, 0, 117, .09);
    transform: translateY(-2px);
  }
}

.page-cms.rich-text .gde__card .gde__h3 {
  margin: 0 0 .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--skt-pink-border);
}

.page-cms.rich-text .gde__card .gde__h3 a {
  color: var(--skt-ink);
  text-decoration: none;
}

.page-cms.rich-text .gde__card .gde__h3 a:hover,
.page-cms.rich-text .gde__card .gde__h3 a:focus-visible {
  color: var(--skt-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-cms.rich-text .gde__spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gde__spec-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  font-size: .9rem;
  line-height: 1.5;
}

.gde__spec-list li + li {
  border-top: 1px solid #f4eef1;
}

.gde__k {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--skt-muted);
}

.gde__v {
  text-align: right;
  color: var(--skt-ink);
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .gde__cards {
    grid-template-columns: 1fr;
  }
}

.gde__more {
  margin-top: 1.5rem;
  font-size: .9375rem;
  color: var(--skt-muted);
}

/* ---------- FAQ cards ---------- */
.gde__faq {
  padding: 1.25rem 1.4rem 1.3rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  background: #fff;
}

.gde__faq + .gde__faq {
  margin-top: .85rem;
}

.page-cms.rich-text .gde__faq .gde__h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}

.page-cms.rich-text .gde__faq p:last-child {
  margin-bottom: 0;
  font-size: .9375rem;
}

/* ---------- Links + focus ---------- */
.page-cms.rich-text .gde a {
  color: var(--skt-pink);
  text-underline-offset: 3px;
}

.page-cms.rich-text .gde a:hover {
  color: var(--skt-pink-dark);
}

.gde a:focus-visible {
  outline: 2px solid var(--skt-pink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Scroll reveal ----------
   `.gde` only gains `is-ready` once guide-premium.js runs, so with JS blocked
   or broken every block sits at its natural opacity instead of an invisible
   page. Failing open matters more here than the animation does. */
.gde.is-ready .gde__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}

.gde.is-ready .gde__reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gde.is-ready .gde__reveal,
  .gde.is-ready .gde__reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gde__stat,
  .gde__card {
    transition: none;
  }

  .gde__card:hover {
    transform: none;
  }
}

/* ---------- Print ----------
   Buyers print a comparison for a purchase file. The tables and cards keep
   their hairlines; the scroll wrapper must not clip a column off the sheet. */
@media print {
  .gde.is-ready .gde__reveal,
  .gde.is-ready .gde__reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .gde__scroll {
    overflow-x: visible;
  }

  .gde__block,
  .gde__card,
  .gde__faq,
  .gde__caveats li {
    break-inside: avoid;
  }

  .gde__card:hover {
    box-shadow: none;
    transform: none;
  }
}