/* /why-lycian-way and /tr/neden-likya-yolu: the owner comparison sheet for
   accommodation owners (2026-10-09), shared by the English and Turkish pages.

   One narrow column, like a trail-side notice board: who keeps the €100 first,
   then one table per audience. Below 640px the tables stack into one card per
   row, each cell labelled from its data-label. The colours are the site's own
   tokens from styles.v2.css (pine --green, accent --terracotta, and
   --terracotta-text wherever the accent is text). Everything is scoped to .wlw,
   so the navbar and the footer are untouched. The site has no dark theme, so
   neither has this page. */
.wlw {
  --wlw-surface: #fff;
  --wlw-line: #e0dbd2;
  --wlw-pine: var(--green, #2d5016);
  --wlw-pine-soft: #e3ebda;
  --wlw-clay: var(--terracotta, #c0623a);
  --wlw-clay-text: var(--terracotta-text, #a85633);
  --wlw-clay-soft: #f4e1d6;
  --wlw-neutral: #a7b0a1;
  --wlw-muted: var(--text-muted, #5f6368);
  --wlw-waymark-red: #c62828;
  display: block;
  padding: calc(var(--announcement-h, 0px) + var(--navbar-h, 65px) + 32px) 16px 64px;
  color: var(--text, #1c1c1c);
  font-size: 16px;
  line-height: 1.55;
}
.wlw-wrap { max-width: 880px; margin: 0 auto; display: grid; gap: 40px; }
.wlw-wrap > * { min-width: 0; }
.wlw a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

/* The thesis */
.wlw-hero { display: grid; gap: 14px; }
.wlw-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wlw-muted);
}
/* The trail's red-and-white paint mark */
.wlw-waymark {
  display: inline-grid; grid-template-rows: 1fr 1fr; flex: none;
  width: 22px; height: 14px; border: 1px solid var(--wlw-line);
}
.wlw-waymark::before { content: ""; background: #fff; }
.wlw-waymark::after { content: ""; background: var(--wlw-waymark-red); }
.wlw h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: clamp(30px, 5.4vw, 46px); line-height: 1.12; color: var(--text, #1c1c1c);
  text-wrap: balance;
}
.wlw-lede { max-width: 62ch; font-size: 17px; color: var(--wlw-muted); }

/* Of every €100: drawn to scale, 80 + 5 (the 80–85 band, hatched) + 15, and 100 */
.wlw-split {
  display: grid; gap: 18px; padding: 20px;
  background: var(--wlw-surface); border: 1px solid var(--wlw-line); border-radius: 14px;
}
.wlw-split h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wlw-muted);
}
.wlw-barrow { display: grid; gap: 6px; }
.wlw-barname { font-size: 15px; font-weight: 600; }
.wlw-bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; }
.wlw-seg { display: block; height: 100%; }
.wlw-seg-owner { background: var(--wlw-neutral); }
.wlw-seg-range { background: repeating-linear-gradient(135deg, var(--wlw-clay) 0 5px, var(--wlw-clay-soft) 5px 10px); }
.wlw-seg-site { background: var(--wlw-clay); }
.wlw-seg-lw { background: var(--wlw-pine); }
.wlw-barlabels {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.wlw-site-l { color: var(--wlw-clay-text); font-weight: 600; text-align: right; }
.wlw-lw-l { color: var(--wlw-pine); font-weight: 600; }

/* One section per audience */
.wlw-aud { display: grid; gap: 16px; }
.wlw-aud-h {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(24px, 3.6vw, 30px); color: var(--text, #1c1c1c);
}
.wlw-stats-cap { font-size: 13px; color: var(--wlw-muted); }
.wlw-stats-cap + .wlw-stats { margin-top: -6px; }
.wlw-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wlw-stat { min-width: 0; padding-top: 8px; border-top: 3px solid var(--wlw-pine); }
.wlw-stat b {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.wlw-stat span { font-size: 13px; color: var(--wlw-muted); }

.wlw-tablebox {
  overflow-x: auto;
  background: var(--wlw-surface); border: 1px solid var(--wlw-line); border-radius: 14px;
}
.wlw-cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.wlw-cmp th, .wlw-cmp td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  border-top: 1px solid var(--wlw-line);
}
.wlw-cmp thead th {
  border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wlw-muted);
}
.wlw-cmp thead th.wlw-lw-h { color: var(--wlw-pine); }
.wlw-cmp tbody th { width: 26%; font-weight: 600; }
.wlw-cmp td.wlw-big { width: 33%; }
.wlw-cmp td.wlw-lw { width: 41%; background: var(--wlw-pine-soft); }
.wlw-cmp td.wlw-lw strong { color: var(--wlw-pine); }
.wlw-key {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.wlw-cmp td.wlw-big .wlw-key { color: var(--wlw-clay-text); }

.wlw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; }
.wlw-cta a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; background: var(--wlw-pine); color: #fff; font-weight: 600;
  overflow-wrap: anywhere;
}
.wlw-cta a:hover { background: #24410f; }

.wlw-note {
  max-width: 70ch; padding-top: 16px; border-top: 1px solid var(--wlw-line);
  font-size: 13px; color: var(--wlw-muted);
}

/* Phones: one card per row, each cell labelled */
@media (max-width: 640px) {
  .wlw-wrap { gap: 32px; }
  .wlw-split { padding: 16px; }
  .wlw-stats { grid-template-columns: 1fr; gap: 10px; }
  .wlw-stat { display: flex; align-items: baseline; gap: 10px; }
  .wlw-stat b { font-size: 24px; }
  .wlw-tablebox { overflow: visible; }
  .wlw-cmp, .wlw-cmp tbody, .wlw-cmp tr, .wlw-cmp th, .wlw-cmp td { display: block; width: auto !important; }
  .wlw-cmp thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .wlw-cmp tr { display: grid; gap: 8px; padding: 14px; border-top: 1px solid var(--wlw-line); }
  .wlw-cmp tbody tr:first-child { border-top: 0; }
  .wlw-cmp th, .wlw-cmp td { padding: 0; border: 0; }
  .wlw-cmp td { padding: 10px 12px; border-radius: 10px; }
  .wlw-cmp td.wlw-big { background: var(--sand, #f5f0e8); }
  .wlw-cmp td::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--wlw-muted);
  }
  .wlw-cmp td.wlw-lw::before { color: var(--wlw-pine); }
}