/* Review & Sign: the contract walk-through (Pen, Highlight, Arrow, Text, Sign), one scroll per tool.
   Built from prototypes/loop-review-sign-2026-10-09/round7. Every rule is scoped to #review-sign. */
@font-face { font-family: "Homemade Apple"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/homemade-apple-latin.woff2) format("woff2"); }

#review-sign {
  /* The paper is white in both themes, as on the real reader page, so its inks never change. */
  --paper-white: #FFFFFF;
  --paper-ink: #16181D;
  --paper-ink2: #5B606A;
  --paper-ink3: #8C919B;
  --sam: #7A50D6;             /* Sam's marker ink */
  --sign: #426DC8;            /* Loop blue, the signing colour */
  --sign-fill: #3F6FD8;     /* a step deeper than Loop blue so the white "Sign" passes AA */
  --hand: #1B2A55;            /* the handwriting */
  --move: cubic-bezier(0.22, 1, 0.36, 1);
  --swap-dur: 150ms;
  --swap-y: 6px;
  /* Glass, as the reader page draws it: a white pebble with a double rim in light. */
  --glass-fill: radial-gradient(140% 120% at 30% 0%, #FFFFFF 0%, color-mix(in srgb, #FFFFFF 97%, #111014) 45%, color-mix(in srgb, #FFFFFF 92%, #6C7A99) 100%);
  --glass-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 1px rgba(20, 20, 30, 0.06), 0 6px 16px rgba(30, 28, 24, 0.14), 0 1px 2px rgba(30, 28, 24, 0.08);
  --glass-blur: none;
  --glass-ink: color-mix(in srgb, #111014 72%, #FFFFFF);
  --tint-mix: #000000; --tint-amt: 12%;
}
/* Smoked glass with a light rim in dark. */
:root[data-theme="dark"] #review-sign {
  --paper-white: #FCFCFB;
  --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 55%), rgba(24, 24, 30, 0.62);
  --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);
  --glass-blur: blur(18px) saturate(1.6);
  --glass-ink: rgba(255, 255, 255, 0.85);
  --tint-mix: #FFFFFF; --tint-amt: 42%;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #review-sign {
  --paper-white: #FCFCFB;
  --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 55%), rgba(24, 24, 30, 0.62);
  --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);
  --glass-blur: blur(18px) saturate(1.6);
  --glass-ink: rgba(255, 255, 255, 0.85);
  --tint-mix: #FFFFFF; --tint-amt: 42%;
} }

/* ---------- The tour: as tall as the page it shows, so it sits as close to the heading and the list below
   as every other section's content (Theo, 2026-10-14). Holding the page (review.js) parks it just under
   the floating menu bar. ---------- */
#review-sign .tour { position: relative; margin-top: var(--head-gap, 40px); }
#review-sign .tour-pin { position: relative; display: grid; justify-items: center; overflow-x: clip; }
#review-sign .tour-in { position: relative; width: min(1200px, calc(100vw - var(--gutter) * 2)); height: var(--rig-h, 800px); }

/* The tool name beside the page. */
#review-sign .cap {
  position: absolute; left: 0; top: var(--cap-top, 50%); width: var(--cap-w, 280px); translate: 0 -50%;
  opacity: 0; filter: blur(4px); transform: translateX(-10px);
  transition: opacity 400ms var(--move), filter 400ms var(--move), transform 500ms var(--move);
}
#review-sign .cap.on { opacity: 1; filter: blur(0); transform: none; }
#review-sign .cap-bars { margin-top: var(--s5); max-width: 200px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#review-sign .cap-bars span { height: 3px; border-radius: 2px; background: rgba(75, 123, 227, .13); overflow: hidden; }
#review-sign .cap-bars i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
#review-sign .cap-bars span.on i { transform: none; }
:root[data-theme="dark"] #review-sign .cap-bars span { background: rgba(134, 169, 242, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #review-sign .cap-bars span { background: rgba(134, 169, 242, .16); } }
#review-sign .cap-name { font-size: clamp(44px, 4.4vw, 64px); font-weight: 400; line-height: 1.04; letter-spacing: -0.04em; color: var(--ink1); }
#review-sign .cap-line { margin-top: var(--s3); font-size: 19px; line-height: 1.45; color: var(--ink2); text-wrap: balance; }
#review-sign .swap {
  display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform var(--swap-dur) ease-in-out, filter var(--swap-dur) ease-in-out, opacity var(--swap-dur) ease-in-out;
}
#review-sign .swap.out { transform: translateY(calc(var(--swap-y) * var(--dir, -1))); filter: blur(2px); opacity: 0; }
#review-sign .swap.pre { transform: translateY(calc(var(--swap-y) * var(--dir, -1) * -1)); filter: blur(2px); opacity: 0; transition: none; }
#review-sign .cap-line .swap:not(.out):not(.pre) { transition-delay: 40ms; }

/* The rig: the reader's top bar, then the page. */
#review-sign .rig { position: absolute; top: 0; left: 0; width: var(--stage-w, 520px); height: var(--rig-h, 800px); isolation: isolate; }

#review-sign .bar { position: relative; z-index: 3; height: 44px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
#review-sign .sender { display: flex; align-items: center; gap: 10px; }
#review-sign .brandmark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  font-size: 14px; font-weight: 600; color: #FFFFFF;
  background: radial-gradient(120% 120% at 25% 10%, color-mix(in srgb, #426DC8 78%, #fff) 0%, #426DC8 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -4px color-mix(in srgb, #426DC8 55%, transparent);
}
#review-sign .sender b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; color: var(--ink1); }
#review-sign .sender small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.2; color: var(--ink3); white-space: nowrap; }
#review-sign .rig.tight .sender small { display: none; }

#review-sign .glass { background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
#review-sign .rail { position: absolute; left: 50%; top: 0; translate: -50% 0; display: flex; gap: 2px; padding: 4px; border-radius: 15px; }
#review-sign .rail .icon {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  color: var(--glass-ink); transition: color 250ms ease-out, transform 160ms ease-out;
}
#review-sign .rail .icon svg { width: 18px; height: 18px; pointer-events: none; }
#review-sign .rail .icon, #review-sign .signpill { border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#review-sign .rail .icon { background: transparent; }
#review-sign .signpill { padding: 0 14px 0 11px; font-size: 13px; font-weight: 600; }
#review-sign .rail .icon::after { content: ""; position: absolute; inset: 0; border-radius: 11px; background: currentColor; opacity: 0; transition: opacity 150ms ease-out; }
@media (hover: hover) { #review-sign .rail .icon:hover::after { opacity: .07; } #review-sign .signpill:hover { filter: brightness(1.06); } }
#review-sign .rail .icon:active { transform: scale(.94); }
#review-sign .signpill:active { transform: scale(.96); }
#review-sign .rail .icon:focus-visible, #review-sign .signpill:focus-visible { outline: 2px solid #426DC8; outline-offset: 2px; }
#review-sign .rail .icon.lit { color: var(--you-tag, var(--glass-ink)); }
#review-sign .rail .icon.tap { transform: scale(.94); }
/* The chosen tool: a soft fill of Sam's ink that slides between them. */
#review-sign .sel {
  position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 11px; pointer-events: none;
  background: color-mix(in srgb, var(--sam) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sam) 22%, transparent);
  opacity: 0; transform: translateX(var(--x, 0px)) scale(.92);
  transition: transform 250ms var(--move), opacity 150ms ease-out;
}
#review-sign .sel.on { opacity: 1; transform: translateX(var(--x, 0px)); }

#review-sign .actions { display: flex; align-items: center; padding: 4px; border-radius: 15px; }
#review-sign .signpill {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 11px;
  background: var(--sign-fill); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 200ms var(--ease-spring);
}
#review-sign .signpill svg { width: 15px; height: 15px; }
#review-sign .signpill.tap { transform: scale(.96); }
#review-sign .signpill.done { background: color-mix(in srgb, #426DC8 12%, transparent); color: #426DC8; }
:root[data-theme="dark"] #review-sign .signpill.done { color: #86A9F2; background: color-mix(in srgb, #86A9F2 16%, transparent); }
#review-sign .signpill .w { display: inline-grid; }
#review-sign .signpill .w > span { grid-area: 1 / 1; transition: opacity 150ms ease-in-out, filter 150ms ease-in-out, transform 150ms ease-in-out; }
#review-sign .signpill .w .b { opacity: 0; filter: blur(2px); transform: translateY(4px); }
#review-sign .signpill.done .w .a { opacity: 0; filter: blur(2px); transform: translateY(-4px); }
#review-sign .signpill.done .w .b { opacity: 1; filter: blur(0); transform: none; }

/* The sheet: a window onto the contract, which the camera moves across. */
#review-sign .stage {
  position: relative; z-index: 2; width: 100%; height: var(--stage-h, 740px); border-radius: 14px; overflow: hidden;
  background: var(--paper-white); box-shadow: var(--shadow-frame); user-select: none; -webkit-user-select: none;
}
#review-sign .board { position: absolute; left: 0; top: 0; width: 508px; transform-origin: 0 0; }

/* ---------- The contract, as original version 3 draws it ---------- */
#review-sign .rs-page { position: relative; padding: 40px 44px 48px; color: var(--paper-ink); }
#review-sign .rs-top { display: flex; align-items: baseline; justify-content: space-between; }
#review-sign .rs-mark { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
#review-sign .rs-date { font-size: 12.5px; color: var(--paper-ink3); font-variant-numeric: tabular-nums; }
#review-sign .rs-title { margin-top: 30px; font-size: 27px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; }
#review-sign .rs-between { margin-top: 6px; font-size: 14px; color: var(--paper-ink2); }
#review-sign .rs-clauses { margin-top: 30px; display: grid; gap: 18px; }
#review-sign .rs-clause { display: grid; grid-template-columns: 108px minmax(0, 1fr); font-size: 13.5px; line-height: 1.6; }
#review-sign .rs-clause b { font-weight: 500; color: var(--paper-ink); }
#review-sign .rs-clause b span { display: inline-block; width: 18px; color: var(--paper-ink3); font-weight: 400; font-variant-numeric: tabular-nums; }
#review-sign .rs-clause p { color: var(--paper-ink2); }
#review-sign .rs-clause p span { white-space: nowrap; }
#review-sign .rs-signs { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#review-sign .rs-party { font-size: 12.5px; font-weight: 500; color: var(--paper-ink3); }

/* Sign Here spots, as the reader page draws them */
#review-sign .rs-spot {
  position: relative; margin-top: 10px; height: 74px; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(66, 109, 200, .07); border: 1.5px dashed rgba(66, 109, 200, .6);
  color: var(--sign); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color 300ms var(--move), border-color 300ms var(--move), opacity 300ms var(--move), transform 160ms ease-out;
}
#review-sign .rs-spot.wait { opacity: .5; }
#review-sign .rs-spot.press { transform: scale(.98); background-color: rgba(66, 109, 200, .14); }
#review-sign .rs-spot.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 9px; pointer-events: none; animation: rs-ring 700ms var(--move) 1 both; }
@keyframes rs-ring { from { box-shadow: inset 0 0 0 0 rgba(66, 109, 200, .0), 0 0 0 0 rgba(66, 109, 200, .38); } to { box-shadow: inset 0 0 0 0 rgba(66, 109, 200, 0), 0 0 0 14px rgba(66, 109, 200, 0); } }
#review-sign .rs-spot.done { border: 1px solid rgba(66, 109, 200, .28); background: #F2F5FB; opacity: 1; }
#review-sign .rs-sw { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity 150ms ease-in-out, translate 150ms ease-in-out, filter 150ms ease-in-out; }
#review-sign .rs-sw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#review-sign .rs-sw.b { opacity: 0; translate: 0 4px; filter: blur(2px); }
#review-sign .rs-spot.next .rs-sw.a { opacity: 0; translate: 0 -4px; filter: blur(2px); }
#review-sign .rs-spot.next .rs-sw.b { opacity: 1; translate: 0 0; filter: none; }
#review-sign .rs-spot.done .rs-sw, #review-sign .rs-spot.done.next .rs-sw.b { opacity: 0; filter: blur(2px); }
#review-sign .rs-signed { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
#review-sign .rs-hand { font-family: "Homemade Apple", cursive; font-size: 19px; line-height: 1.35; color: var(--hand); font-weight: 400; clip-path: inset(-20% calc(var(--w, 104) * 1%) -20% -4%); }
#review-sign .rs-when { margin-top: 4px; font-size: 10.5px; font-weight: 500; color: var(--sign); font-variant-numeric: tabular-nums; opacity: 0; translate: 0 3px; transition: opacity 250ms var(--move), translate 250ms var(--move); }
#review-sign .rs-when.on { opacity: 1; translate: 0 0; }

/* ---------- Sam's marks, all in his violet ---------- */
#review-sign .marks { position: absolute; inset: 0; pointer-events: none; }
#review-sign .marks svg.ink { position: absolute; left: 0; top: 0; overflow: visible; }
#review-sign .pen { fill: none; stroke: var(--sam); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#review-sign .rs-hl { position: absolute; background: var(--sam); opacity: .26; mix-blend-mode: multiply; border-radius: 2px; transform-origin: 0 50%; scale: 0 1; }
#review-sign .rs-text {
  position: absolute; padding: 3px 7px; border-radius: 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--sam) 11%, #FFFFFF); color: var(--sam);
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sam) 40%, transparent);
  opacity: 0; scale: .96; transform-origin: 0 50%;
  transition: opacity 200ms var(--move), scale 200ms var(--move), box-shadow 300ms var(--move);
}
#review-sign .rs-text.on { opacity: 1; scale: 1; }
#review-sign .rs-text.set { box-shadow: inset 0 0 0 0 transparent; }
#review-sign .rs-text .caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; opacity: 0; }
#review-sign .rs-text.typing .caret { opacity: 1; }
/* Sam's name, once, on his first mark */
#review-sign .nm {
  position: absolute; padding: 2px 6px 3px; border-radius: 5px; white-space: nowrap;
  font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: #FFFFFF;
  background: var(--sam); box-shadow: 0 3px 8px -2px rgba(76, 44, 160, .35);
  opacity: 0; transform: translateY(3px) scale(.9); filter: blur(1px); transform-origin: 0 50%;
  transition: opacity 250ms ease-out, transform 400ms var(--ease-spring), filter 250ms ease-out;
}
#review-sign .nm.on { opacity: 1; transform: none; filter: blur(0); }

/* ---------- The name box, at true size over the page ---------- */
#review-sign .signbox {
  position: absolute; z-index: 6; width: 264px; box-sizing: border-box; padding: 14px; border-radius: 14px;
  background: #FFFFFF; color: #111014; box-shadow: 0 24px 60px rgba(32, 30, 26, 0.22), 0 4px 12px rgba(32, 30, 26, 0.10), 0 0 0 1px rgba(20, 20, 30, 0.06);
  opacity: 0; transform: translateY(4px) scale(.97); transform-origin: var(--o, 50% 100%); pointer-events: none;
  transition: opacity 180ms var(--ease), transform 250ms var(--move);
}
#review-sign .signbox.on { opacity: 1; transform: none; }
#review-sign .signbox label { display: block; font-size: 12px; font-weight: 600; color: #3A3A40; margin: 0 0 7px; }
#review-sign .signbox .field {
  display: flex; align-items: center; height: 36px; padding: 0 11px; border-radius: 9px;
  background: #F4F4F6; box-shadow: inset 0 0 0 2px #426DC8; font-size: 14px; color: #111014; white-space: nowrap;
}
#review-sign .signbox .field .ph-t { color: #8C8B92; }
#review-sign .signbox .field .caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; background: #111014; border-radius: 1px; animation: rs-blink 1s steps(1) infinite; }
@keyframes rs-blink { 50% { opacity: 0; } }
#review-sign .signbox .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
#review-sign .signbox .acts span { display: grid; place-items: center; height: 34px; border-radius: 9px; font-size: 13px; font-weight: 600; transition: opacity 150ms ease-out, transform 160ms ease-out, background 150ms ease-out; }
#review-sign .signbox .cancel { background: #F1F1EF; color: #111014; }
#review-sign .signbox .go { background: #426DC8; color: #FFFFFF; opacity: .45; }
#review-sign .signbox .go.ready { opacity: 1; }
#review-sign .signbox .go.tap { transform: scale(.96); background: #3A62B8; }
#review-sign .signbox .decline { display: block; margin-top: 10px; padding: 4px 0; text-align: center; font-size: 12px; font-weight: 500; color: #7A7980; }

/* ---------- The Signed Copy, which slides out from behind the page ---------- */
#review-sign .rs-copy {
  position: absolute; z-index: 1; right: -236px; bottom: 18px; width: 248px; padding: 16px 18px 18px; border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-lift);
  translate: -250px 0; rotate: 0deg; opacity: 0;
}
#review-sign .rs-copy .k { font-size: 12.5px; font-weight: 500; color: var(--accent-text); }
#review-sign .rs-copy h4 { margin-top: 2px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); }
#review-sign .rs-copy .by { margin-top: 14px; font-size: 12px; font-weight: 500; color: var(--ink3); }
#review-sign .rs-copy ol { list-style: none; padding: 0; margin-top: 6px; display: grid; gap: 8px; }
#review-sign .rs-copy li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; opacity: 0; translate: 0 6px; }
#review-sign .rs-copy li em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 20px; }
#review-sign .rs-copy li b { display: block; font-size: 14px; font-weight: 500; color: var(--ink1); line-height: 20px; }
#review-sign .rs-copy li span { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.45; }

/* Reduced motion, or a still: the finished state, nothing pinned. */
#review-sign.still .tour { height: auto; }
#review-sign.still .tour-pin { position: relative; height: auto; padding: var(--s6) 0; }

@media (prefers-reduced-motion: reduce) {
  #review-sign .cap, #review-sign .swap, #review-sign .rail .icon, #review-sign .sel, #review-sign .signpill, #review-sign .signpill .w > span, #review-sign .rs-spot, #review-sign .rs-sw, #review-sign .rs-when, #review-sign .rs-text, #review-sign .nm, #review-sign .signbox { transition: none !important; }
  #review-sign .rs-spot.pulse::after, #review-sign .signbox .field .caret { animation: none !important; }
}

/* The same dark rules when the system is dark and the visitor has not picked light. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #review-sign .cap-bars span { background: rgba(134, 169, 242, .16); }
:root:not([data-theme="light"]) #review-sign .signpill.done { color: #86A9F2; background: color-mix(in srgb, #86A9F2 16%, transparent); }
}

/* Phones: the finished contract on its own, full width; the tool names and the Signed Copy card need the room beside it. */
#review-sign.narrow .cap, #review-sign.narrow .rs-copy { display: none; }
#review-sign.narrow .sender { display: none; }
#review-sign.narrow .rail { position: static; translate: none; }

/* The six items sit closer to the page above them (Theo, 2026-10-14). */
#review-sign .items { margin-top: var(--s7); }

/* Back and Next under the tool name: quiet, neutral buttons; the tour plays itself until one is pressed (Theo, 2026-10-14). */
#review-sign .cap-nav { display: flex; gap: 8px; margin-top: var(--s5); }
#review-sign .cap-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: var(--card); color: var(--ink2); box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(17, 22, 32, .05);
  transition: color 150ms ease-out, opacity 150ms ease-out, transform 150ms ease-out; }
#review-sign .cap-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { #review-sign .cap-btn:hover:not(:disabled) { color: var(--ink1); } }
#review-sign .cap-btn:active:not(:disabled) { transform: scale(.94); }
#review-sign .cap-btn:disabled { opacity: .35; cursor: default; }
#review-sign .cap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #review-sign .cap-btn { transition: none; } }
#review-sign.still .cap-nav { display: none; }

/* No sender block: the tools and Sign sit side by side, centred over the page, as the reader page's top bar
   has them on one row (Theo, 2026-10-14); a little more room under the heading. */
#review-sign .bar { justify-content: center; gap: 10px; }
#review-sign .rail { position: relative; left: auto; translate: none; }
@media (min-width: 900px) { .home #review-sign .tour { margin-top: calc(64px / var(--z, 1)); } }