/* ═══════════════════════════════════════════════
   THE COMPARISON
   Ported from femora.bg's homepage (a baked
   comparison-table image) — rebuilt as real,
   accessible text.

   Visually it shares the anatomy section's language
   (css/anatomy.css): colour blooms on the cream, a
   frosted glass card, rows that respond. The two sit
   next to each other, so they have to read as one
   design rather than two.
   ═══════════════════════════════════════════════ */

/* body's own background is the hero's near-black room (css/femora.css) —
   everything from here on is daylight, so the page needs to actually switch. */
.after{background:var(--cream)}

.compare{
  --garnet:#88012a;   /* brand wine, softened back from the vivid pass */
  --c1:#cc9e98;   /* the blooms, soft brand family: rose / sand / wine-soft */
  --c2:#e3d1c1;
  --c3:#b98289;

  position:relative; isolation:isolate; overflow:hidden;
  background:var(--cream);
  border-top:1px solid rgba(136,1,42,.10);
  padding:clamp(64px,10vh,110px) 20px clamp(80px,12vh,130px);

  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.compare.is-in{opacity:1; transform:none}

/* the same soft blooms as the anatomy stage, kept quieter — this section is
   the argument, not the showpiece directly below it */
.compare__blooms{
  position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 14% 22%, var(--c1) 0%, transparent 58%),
    radial-gradient(circle at 86% 16%, var(--c2) 0%, transparent 54%),
    radial-gradient(circle at 60% 94%, var(--c3) 0%, transparent 60%);
  filter:blur(46px) saturate(1.35);
  opacity:.42;
}

.compare__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(260px,360px) minmax(320px,1fr);
  gap:clamp(32px,6vw,80px); align-items:start;
  max-width:1080px; margin:0 auto;
}
.compare__eyebrow{
  margin:0 0 12px; font:600 11px/1 var(--sans);
  letter-spacing:.28em; text-transform:uppercase; color:var(--garnet);
}
.compare__heading{
  margin:0 0 12px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.4vw,34px); line-height:1.28; color:var(--ink);
  text-wrap:balance;
}
.compare__heading em{font-style:italic; color:var(--garnet)}
.compare__sub{margin:0 0 18px; color:var(--ink-soft); font-size:14.5px}

/* ── the checklist: ticks land one after another ── */
.compare__checklist{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px}
.compare__checklist li{
  display:flex; align-items:center; gap:11px;
  font-size:14.5px; color:var(--ink); font-weight:500;
  opacity:0; transform:translateX(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.compare.is-in .compare__checklist li{opacity:1; transform:none}
.compare.is-in .compare__checklist li:nth-child(1){transition-delay:.10s}
.compare.is-in .compare__checklist li:nth-child(2){transition-delay:.16s}
.compare.is-in .compare__checklist li:nth-child(3){transition-delay:.22s}
.compare__checklist svg{
  width:20px; height:20px; flex:0 0 auto;
  transform:scale(.4); opacity:0;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.compare.is-in .compare__checklist li:nth-child(1) svg{transition-delay:.16s}
.compare.is-in .compare__checklist li:nth-child(2) svg{transition-delay:.22s}
.compare.is-in .compare__checklist li:nth-child(3) svg{transition-delay:.28s}
.compare.is-in .compare__checklist svg{transform:none; opacity:1}

/* the one solid/filled button already established across the site
   (popup-btn / contact-btn / certs-tab.is-active) */
.story__cta{
  display:inline-block; appearance:none; cursor:pointer; text-decoration:none;
  background:var(--garnet,var(--wine)); color:#fdf3f0; border:1px solid transparent;
  border-radius:999px; padding:15px 32px;
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 10px 24px -12px rgba(74,16,42,.6);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.story__cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px -14px rgba(74,16,42,.7);
}
.story__cta:active{transform:translateY(0)}

/* ── the table, as one frosted card ── */
.compare__table{
  position:relative;
  background:linear-gradient(155deg, rgba(255,255,255,.8), rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.8); border-radius:20px;
  padding:6px 22px; margin-top:2px;
  box-shadow:0 26px 50px -28px rgba(74,16,42,.45), 0 1px 0 rgba(255,255,255,.9) inset;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .compare__table{
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    backdrop-filter:blur(14px) saturate(1.2);
    background:linear-gradient(155deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  }
}
.compare__head, .compare__row{
  display:grid; grid-template-columns:1fr 1.3fr 1.3fr; gap:10px; align-items:center;
}
.compare__head{padding:15px 0 11px}
.compare__head span:nth-child(2), .compare__head span:nth-child(3){
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center;
}
.compare__head .is-femora{color:var(--garnet)}

/* rows arrive one after another, then respond to the pointer.
   The highlight is emphasis only — no information is hidden behind it, so
   there is nothing a touch user can miss. */
.compare__row{
  padding:14px 0; border-top:1px solid rgba(136,1,42,.10);
  border-radius:12px;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             background .25s, box-shadow .25s;
}
.compare.is-in .compare__row{opacity:1; transform:none}
.compare.is-in .compare__row:nth-child(2){transition-delay:.14s}
.compare.is-in .compare__row:nth-child(3){transition-delay:.20s}
.compare.is-in .compare__row:nth-child(4){transition-delay:.26s}
.compare.is-in .compare__row:nth-child(5){transition-delay:.32s}
.compare.is-in .compare__row:nth-child(6){transition-delay:.38s}
.compare.is-in .compare__row:nth-child(7){transition-delay:.44s}
.compare__row:hover{
  background:rgba(255,255,255,.55);
  box-shadow:0 8px 20px -12px rgba(74,16,42,.4);
}

.compare__label{font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:color .25s}
.compare__row:hover .compare__label{color:var(--ink)}

.compare__cell{
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-align:center; border-radius:10px; padding:8px 6px;
  font-size:12.5px; line-height:1.3;
  transition:transform .25s var(--ease), background .25s;
}
.compare__cell i{font-style:normal}
.compare__cell::before{
  content:''; flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background-size:9px 9px; background-repeat:no-repeat; background-position:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.compare__cell.is-good{
  background:rgba(180,0,60,.08); color:var(--garnet); font-weight:600;
}
.compare__cell.is-good::before{
  background-color:var(--garnet);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1.5 5.2l2.2 2.2L8.5 2.4" fill="none" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
/* the point of the table is the left column — lean on it when a row is read */
.compare__row:hover .compare__cell.is-good{transform:scale(1.04)}
.compare__row:hover .compare__cell.is-good::before{
  transform:scale(1.18); box-shadow:0 0 12px rgba(180,0,60,.5);
}
.compare__cell.is-bad{color:var(--ink-soft); opacity:.85}
.compare__cell.is-bad::before{
  background-color:rgba(109,90,92,.22);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2 2l6 6M8 2l-6 6" stroke="white" stroke-width="1.6" stroke-linecap="round"/></svg>');
}
.compare__row:hover .compare__cell.is-bad{opacity:.6}

@media (prefers-reduced-motion:reduce){
  .compare, .compare__row, .compare__checklist li, .compare__checklist svg{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .story__cta, .compare__cell, .compare__cell::before{transition:none}
}

@media (max-width:760px){
  .compare__inner{grid-template-columns:1fr}
  .compare__head span, .compare__label{font-size:11px}
  .compare__cell{font-size:11.5px; padding:7px 4px}
  .compare__table{padding:4px 12px}
}
@media (max-width:520px){
  .compare__head, .compare__row{grid-template-columns:.8fr 1fr 1fr; gap:6px}
  .compare__cell{flex-direction:column; gap:4px}
}