/* Section 8: Reviews ring (lane D). Same ink ground as Results: content changes, the room stays. */

#reviews { position: relative; min-height: 0; background: var(--bg); color: var(--fg); overflow: hidden; --rv-pool: rgb(11 30 91 / .38); --rv-gold: #E5B54A; }
:root[data-scheme="light"] #reviews { --rv-pool: rgb(31 111 255 / .09); --rv-gold: #A87A12; }
#reviews::before {
  content: ''; position: absolute; left: 50%; top: 58%; width: min(1100px, 140vw); aspect-ratio: 2.6; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgb(var(--fg-rgb) / .07);
  background: radial-gradient(ellipse at 50% 50%, var(--rv-pool), transparent 68%);
}
.rv-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--gutter) 30px; }
.rv-head { max-width: 720px; margin: 0 auto; text-align: center; }
.rv-head h2 { margin: 0; font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1; font-weight: 600; letter-spacing: -0.034em; text-wrap: balance; }
.rv-sub { margin: 18px auto 0; max-width: 32em; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }

.rv-stage {
  position: relative; margin-top: clamp(8px, 2vh, 24px); height: 520px; overflow: hidden;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -2px;
}
.rv-stage.is-dragging { cursor: grabbing; }
.rv-stage:focus-visible { outline: 2px solid var(--blue); border-radius: 16px; }
.rv-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }

/* Full 360: no backface hiding, so the cards behind show their backs through the glass. */
.rv-node {
  position: absolute; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px;
  padding: 20px 20px 18px; border-radius: 16px; text-align: left;
  /* no backdrop blur: on 3D transformed cards it stalled the ring for over a second (measured) */
  background: linear-gradient(160deg, rgb(var(--fg-rgb) / .14), rgb(var(--fg-rgb) / .07)); color: var(--fg);
  border: 1px solid rgb(var(--fg-rgb) / .16);
  box-shadow: 0 24px 50px -24px var(--rv-deep, rgb(0 0 0 / .8));
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.rv-node.is-front {
  background: rgba(252, 252, 250, .97); color: var(--ink); border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 36px 70px -26px var(--rv-deep-front, rgb(0 0 0 / .9)), 0 0 0 1px rgba(31, 111, 255, .35);
}
@media (hover: hover) { .rv-node:not(.is-front):hover { border-color: rgba(31, 111, 255, .6); background: rgb(var(--fg-rgb) / .16); } }
/* Light theme: the cards behind are frosted white with a dark blue edge, the front one lifts in blue. */
:root[data-scheme="light"] #reviews { --rv-deep: rgb(11 30 91 / .22); --rv-deep-front: rgb(11 30 91 / .34); }
:root[data-scheme="light"] .rv-node:not(.is-front) { background: linear-gradient(160deg, rgb(255 255 255 / .92), rgb(238 243 252 / .86)); border-color: rgb(11 30 91 / .12); }
@media (hover: hover) { :root[data-scheme="light"] .rv-node:not(.is-front):hover { background: #fff; } }
.rv-mark { color: var(--blue); line-height: 0; }
.rv-mark svg { width: 26px; height: auto; }
.rv-quote { margin: 0; flex: 1; }
.rv-quote p { margin: 0; font-size: .9375rem; line-height: 1.5; }
/* a real review: the card shows one line of it, the whole review opens over the page */
.rv-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin: -4px 0 0; padding: 0 0 1px;
  border: 0; border-bottom: 1px solid rgb(31 111 255 / .45); background: none; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--blue); transition: border-color .2s var(--ease);
}
.rv-more:hover { border-bottom-color: var(--blue); }
.rv-node:not(.is-front) .rv-more { color: inherit; border-bottom-color: currentColor; opacity: .7; }
.rv-full {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 48px); margin: auto; padding: 30px 30px 24px; box-sizing: border-box;
  border: 1px solid rgb(11 30 91 / .1); border-radius: 20px; background: #FCFCFA; color: var(--ink);
  box-shadow: 0 40px 90px -30px rgb(11 30 91 / .45); overflow: auto; overscroll-behavior: contain;
}
.rv-full::backdrop { background: rgb(11 30 91 / .32); }
.rv-full[open] { animation: rv-full-in .35s var(--ease) both; }
@keyframes rv-full-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.rv-full-quote { margin: 16px 0 22px; }
.rv-full-text { margin: 0; font-size: 1.0625rem; line-height: 1.6; letter-spacing: -0.005em; text-wrap: pretty; }
.rv-pull {
  color: inherit; padding: 0 .08em; margin: 0 -.08em; border-radius: 3px;
  background: linear-gradient(rgb(31 111 255 / .12), rgb(31 111 255 / .12)) no-repeat 0 60% / 100% 80%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rv-full-close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgb(11 30 91 / .12); background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease);
}
.rv-full-close:hover { background: rgb(11 30 91 / .06); }
.rv-full-close:focus-visible, .rv-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .rv-full[open] { animation: none; } }
.rv-coming {
  flex: 1; margin: 0; display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 500; letter-spacing: -0.005em;
  opacity: .78;
}
.rv-coming-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--blue); flex: none; }
.rv-who { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 14%, transparent); }
.rv-who > div { min-width: 0; }
.rv-avatar {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: var(--paper); font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.rv-name { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.rv-biz { display: block; font-size: .8125rem; line-height: 1.3; opacity: .62; overflow-wrap: anywhere; }
.rv-stars { display: block; color: var(--rv-gold); font-size: .75rem; letter-spacing: .08em; }

.rv-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
.rv-arrow {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(var(--fg-rgb) / .2); background: rgb(var(--fg-rgb) / .04); color: var(--fg);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.rv-arrow:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rv-arrow:active { transform: scale(.94); }
.rv-status { margin: 0; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .8125rem; color: var(--fg-2); }
.rv-count { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rv-count b { color: var(--fg); font-weight: 600; }
.rv-current { color: var(--fg); font-weight: 500; }

.rv-hint { margin: 14px 0 0; text-align: center; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
/* Our own product: Ordaily, under the ring and apart from it. An outline on the room's ground, no
   glass, no stars, no quote mark, so it never reads as a client review. */
.rv-own {
  position: relative; box-sizing: border-box; width: min(100%, 560px); margin: clamp(36px, 6vh, 56px) auto 0; padding: 20px 24px 18px;
  border: 1px solid rgb(31 111 255 / .28); border-radius: 16px; background: rgb(var(--fg-rgb) / .02); text-align: left;
}
.rv-own-label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--fg); }
.rv-own-label img { flex: none; width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .08); }
.rv-own-quote { margin: 14px 0 0; }
.rv-own-quote p { margin: 0; font-size: 1.0625rem; line-height: 1.5; letter-spacing: -0.005em; color: var(--fg); text-wrap: pretty; }
.rv-own-by { margin: 10px 0 0; font-size: .875rem; font-weight: 600; color: var(--fg); }
.rv-own-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgb(var(--fg-rgb) / .08); font-size: .8125rem;
}
.rv-own-note { color: var(--fg-2); }
.rv-own-link {
  display: inline-flex; align-items: center; gap: 5px; padding-bottom: 1px; color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgb(31 111 255 / .45); transition: border-color .2s var(--ease);
}
.rv-own-link:hover { border-bottom-color: var(--blue); }
.rv-own-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
#result-ordaily:focus { outline: none; }
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; }

@media (max-width: 1024px) {
  .rv-node { padding: 16px 15px 14px; gap: 10px; border-radius: 14px; }
  .rv-coming { font-size: .875rem; }
  .rv-avatar { width: 30px; height: 30px; font-size: .6875rem; }
  .rv-name { font-size: .8125rem; }
  .rv-biz { font-size: .75rem; }
}
@media (max-width: 599.98px) {
  .rv-node { padding: 12px 11px 11px; gap: 8px; border-radius: 12px; }
  .rv-mark svg { width: 18px; }
  .rv-coming { font-size: .75rem; gap: 6px; }
  .rv-coming-dot { width: 6px; height: 6px; border-width: 1.5px; }
  .rv-who { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 9px; }
  .rv-avatar { width: 24px; height: 24px; font-size: .5625rem; }
  .rv-name { font-size: .75rem; }
  .rv-biz { font-size: .6875rem; }
  .rv-quote p { font-size: .6875rem; line-height: 1.42; }
  .rv-more { font-size: .65625rem; margin-top: -2px; white-space: nowrap; text-align: left; }
  .rv-more svg { display: none; }
  .rv-full { padding: 24px 20px 18px; border-radius: 18px; }
  .rv-full-text { font-size: 1rem; line-height: 1.55; }
  .rv-full .rv-who { flex-direction: row; align-items: center; gap: 10px; }
  .rv-full .rv-avatar { width: 32px; height: 32px; font-size: .6875rem; }
  .rv-full .rv-name { font-size: .9375rem; }
  .rv-full .rv-biz { font-size: .8125rem; }
  .rv-controls { gap: 12px; }
  .rv-status { min-width: 150px; }
  .rv-own { padding: 18px 18px 16px; }
  .rv-own-quote p { font-size: 1rem; }
}