/* ─── Hero: before and after comparison (hx) ────────────────────────
   One sample document per tab: a short "read" pass (scan line and
   labelled regions), then the divider reveals Parallang's output.
   --p is the divider position, 0 to 100, as a share of the page width.
   Markup in index.html, behaviour in js/hero-compare.js.            */
.hero__media.hero__media--compare{aspect-ratio:auto;}
.hx{
  margin:0;flex:1 1 auto;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#fafbff 0%,#eef2fb 100%);
  container-type:inline-size;
  --in:7%;--p:50;
}

/* Tabs: one per document type. Shown only once the script runs. */
.hx__tabs{display:none;flex-wrap:wrap;justify-content:center;gap:4px;padding:12px 10px 0;}
.hx--js .hx__tabs{display:flex;}
.hx__tab{
  appearance:none;-webkit-appearance:none;margin:0;
  border:1px solid var(--line);background:#fff;color:var(--navy);
  font:var(--fw-semibold) 11.5px/1 var(--font-body);
  padding:7px 8px;border-radius:999px;white-space:nowrap;cursor:pointer;
  transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out;
}
.hx__tab:hover{background:var(--blue-bg);border-color:var(--blue-border);}
.hx__tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,79,255,.25);}
.hx__tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* Stage: the page sits on a soft backdrop, cut off at the bottom like a page that continues. */
.hx__stage{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  touch-action:pan-y;cursor:ew-resize;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.hx__page{
  position:absolute;left:var(--in);right:var(--in);top:5.5%;
  background:#fff;border-radius:6px 6px 0 0;overflow:hidden;
  box-shadow:0 12px 32px rgba(42,53,84,.14),0 1px 3px rgba(42,53,84,.08);
  transition:opacity .22s ease-out;
}
.hx__page--wide{top:46%;transform:translateY(-50%);border-radius:6px;}
.hx__page.is-swapping{opacity:0;}
.hx__img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;}
.hx__after{position:absolute;inset:0;clip-path:inset(0 0 0 calc(var(--p) * 1%));}
.hx__after .hx__img{height:100%;object-fit:cover;object-position:top;}

/* Regions the read pass labels, in percent of the page image. */
.hx__boxes{position:absolute;inset:0;pointer-events:none;}
.hx__box{
  position:absolute;border:1.5px solid rgba(0,79,255,.85);border-radius:5px;
  background:rgba(0,79,255,.06);
  opacity:0;transform:scale(.985);transition:opacity .35s ease-out,transform .35s ease-out;
}
.hx__box.on{opacity:1;transform:none;}
.hx__chip{
  position:absolute;left:8px;top:0;transform:translateY(-55%);
  display:inline-flex;align-items:center;gap:5px;
  font:var(--fw-semibold) 10.5px/1 var(--font-body);font-style:normal;white-space:nowrap;
  color:#fff;background:var(--blue);padding:4px 8px 4px 6px;border-radius:999px;
  box-shadow:0 3px 8px rgba(0,79,255,.3);
}
.hx__box--edge .hx__chip{top:7px;transform:none;}
.hx__box--right .hx__chip{left:auto;right:8px;}
.hx__chip::before{
  content:'';width:9px;height:9px;flex-shrink:0;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* The read pass: a line of light down the stage. */
.hx__scan{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,79,255,.9) 18%,rgba(0,79,255,.9) 82%,transparent);
  box-shadow:0 0 18px 4px rgba(0,79,255,.22);
}
.hx__scan::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:70px;background:linear-gradient(to top,rgba(0,79,255,.10),rgba(0,79,255,0));}
.hx__stage.is-scan .hx__scan{animation:hxScan var(--scan-ms,1400ms) cubic-bezier(.45,.05,.35,1) forwards;}
@keyframes hxScan{0%{top:0;opacity:0;}8%{opacity:1;}88%{opacity:1;}100%{top:100%;opacity:0;}}

/* Divider (inside the page, so it spans only the document) and its handle (on the stage, so it is never cut off). */
.hx__divider,.hx__grip{transition:opacity .3s ease-out;}
.hx__divider{
  position:absolute;top:0;bottom:0;left:calc(var(--p) * 1%);width:2px;margin-left:-1px;pointer-events:none;
  background:#fff;box-shadow:0 0 0 1px rgba(0,79,255,.5),0 0 16px rgba(0,79,255,.4);
}
.hx__grip{
  position:absolute;top:50%;left:calc(var(--in) + (100% - 2 * var(--in)) * var(--p) / 100);width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;cursor:ew-resize;touch-action:none;
  box-shadow:0 0 0 4px rgba(255,255,255,.92),0 8px 20px rgba(0,79,255,.38);
}
.hx--js .hx__grip{display:flex;}
.hx__page--wide ~ .hx__grip{top:46%;}
.hx__grip svg{width:22px;height:22px;display:block;}
.hx__grip:focus-visible{outline:3px solid var(--navy);outline-offset:5px;}
.hx__grip::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(0,79,255,.55);opacity:0;pointer-events:none;}
.hx__stage.is-hint .hx__grip::after{animation:hxPulse 1.5s ease-out 2;}
@keyframes hxPulse{0%{opacity:.9;transform:scale(1);}100%{opacity:0;transform:scale(1.7);}}
.hx__stage.is-intro .hx__divider,.hx__stage.is-intro .hx__grip{opacity:0;}

/* Which side is which. */
.hx__labels{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;
  padding:34px 12px 12px;pointer-events:none;
  background:linear-gradient(to top,rgba(238,242,251,.97) 32%,rgba(238,242,251,0));
}
.hx__label{max-width:48%;padding:6px 11px 7px;border-radius:10px;color:#fff;font:var(--fw-medium) 11.5px/1.3 var(--font-body);}
.hx__label b{display:block;font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-bottom:2px;}
.hx__label--before{background:rgba(42,53,84,.92);}
.hx__label--after{background:var(--blue);text-align:right;}

/* Pause and play for the automatic tour (hidden with reduced motion). */
.hx__toggle{
  position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;padding:0;margin:0;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.94);color:var(--navy);
  box-shadow:0 2px 8px rgba(42,53,84,.12);transition:background .2s ease-out,color .2s ease-out;
}
.hx--js.hx--motion .hx__toggle{display:flex;}
.hx__toggle:hover{background:var(--blue-bg);color:var(--blue);}
.hx__toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.hx__toggle svg{width:12px;height:12px;display:block;}
.hx__toggle .hx__i-play{display:none;}
.hx__toggle.is-paused .hx__i-play{display:block;margin-left:2px;}
.hx__toggle.is-paused .hx__i-pause{display:none;}

.hx__cap{margin:0;padding:6px 12px 8px;text-align:center;font-size:11px;line-height:1.35;color:var(--muted);}

/* Narrow cards: tabs in rows of three, smaller labels. */
@container (max-width:500px){
  /* Six tabs: two rows of three. */
  .hx--js .hx__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 12px 0;}
  .hx__tab{padding:8px 4px;}
  .hx__labels{padding:30px 8px 8px;}
  .hx__label{padding:4px 8px 5px;font-size:10px;border-radius:8px;}
  .hx__label b{font-size:8px;margin-bottom:1px;}
  .hx__chip{font-size:9.5px;padding:3px 7px 3px 5px;}
  .hx__grip{width:38px;height:38px;margin:-19px 0 0 -19px;}
}

@media (prefers-reduced-motion: reduce){
  .hx__scan,.hx__boxes{display:none;}
  .hx__page,.hx__divider,.hx__grip{transition:none;}
}