/* RJL photo visualiser - styles scoped to #rjl-viz (page: /photo-visualiser)
 * Desktop: options on the left (scroll on their own), picture on the right (stays in view).
 * Phone: picture pinned under the site header, toolbar under it, options below. */
.viz-wrap { max-width: 1440px; margin: 0 auto; padding: 28px 20px 72px; }
.sticky-quote { display: none !important; }              /* site's bottom "free report" bar would cover the tools */

#rjl-viz { --top: 148px; scroll-margin-top: 148px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; color: #0b0d0f; }
#rjl-viz [hidden] { display: none !important; }

/* ---------- left: options */
#rjl-viz .viz-side { position: sticky; top: var(--top); max-height: calc(100vh - var(--top) - 16px); overflow-y: auto;
  background: #fff; border: 1px solid #ddd8cc; border-radius: 10px; overscroll-behavior: contain; }
#rjl-viz .viz-tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #071f38; border-radius: 10px 10px 0 0; }
#rjl-viz .viz-tabs [role="tab"] { font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #cdd6e0; background: none; border: 0;
  padding: 13px 2px; cursor: pointer; border-bottom: 3px solid transparent; }
#rjl-viz .viz-tabs [role="tab"][aria-selected="true"] { color: #fff; border-bottom-color: #f36f21; }
#rjl-viz .viz-tabs [role="tab"]:focus-visible { outline: 3px solid #f36f21; outline-offset: -3px; }
#rjl-viz .viz-tabpanel { padding: 18px; }
#rjl-viz .viz-h3 { font-size: .9rem; margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid #ddd8cc; }
#rjl-viz .viz-h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#rjl-viz .viz-f { display: block; margin: 0 0 14px; font-size: .85rem; font-weight: 600; }
#rjl-viz .viz-f > span { display: block; margin-bottom: 5px; }
#rjl-viz .viz-f select, #rjl-viz .viz-f input[type="number"] { width: 100%; font: inherit; font-weight: 400; padding: 9px 10px;
  border: 1px solid #b9b3a5; border-radius: 6px; background: #fff; color: #0b0d0f; }
#rjl-viz .viz-check { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: .9rem; }
#rjl-viz .viz-chk3 { display: flex; flex-wrap: wrap; gap: 0 14px; }
#rjl-viz .viz-hint-s { margin: 0 0 14px; font-size: .84rem; line-height: 1.5; color: #4a4d52; }
#rjl-viz .viz-note { margin: 12px 0 0; font-size: .78rem; color: #4a4d52; line-height: 1.5; }
#rjl-viz .viz-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; }
#rjl-viz .viz-sw { position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(0,0,0,.25); cursor: pointer; padding: 0; }
#rjl-viz .viz-sw.on { outline: 3px solid #d95420; outline-offset: 2px; }
#rjl-viz .viz-sw:focus-visible { outline: 3px solid #f36f21; outline-offset: 2px; }
#rjl-viz .viz-sw-custom { background: conic-gradient(#e44, #ee4, #4e4, #4ee, #44e, #e4e, #e44); overflow: hidden; display: block; }
#rjl-viz .viz-sw-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#rjl-viz .viz-colour-name { margin: 12px 0 0; font-size: .9rem; font-weight: 700; }

/* ---------- buttons */
#rjl-viz .viz-btn { font: inherit; font-size: .86rem; font-weight: 700; padding: 9px 14px; border-radius: 6px; border: 1px solid #071f38;
  background: #fff; color: #071f38; cursor: pointer; min-height: 40px; white-space: nowrap; }
#rjl-viz .viz-btn:hover { background: #f4f1ea; }
#rjl-viz .viz-btn[aria-pressed="true"] { background: #071f38; color: #fff; }
#rjl-viz .viz-btn.primary { background: #d95420; border-color: #d95420; color: #fff; }
#rjl-viz .viz-btn.primary:hover { background: #a83c0e; border-color: #a83c0e; }
#rjl-viz .viz-btn:disabled { opacity: .45; cursor: not-allowed; }
#rjl-viz .viz-btn:focus-visible, #rjl-viz canvas:focus-visible { outline: 3px solid #f36f21; outline-offset: 2px; }

/* ---------- right: picture */
#rjl-viz .viz-main { position: sticky; top: var(--top); min-width: 0; }
#rjl-viz .viz-toolbar, #rjl-viz .viz-erasebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
#rjl-viz .viz-spacer { flex: 1; }
#rjl-viz .viz-erasebar { background: #fff3ea; border: 1px solid #f3c2a3; border-radius: 8px; padding: 8px 10px; }
#rjl-viz .viz-brush { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; }
#rjl-viz .viz-erase-status { font-size: .85rem; flex-basis: 100%; }
#rjl-viz .viz-erase-status:empty { display: none; }
#rjl-viz:not(.has-photo) .viz-toolbar .viz-btn { pointer-events: none; opacity: .45; }

#rjl-viz .viz-stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px;
  background: #0b0d0f; border-radius: 10px; overflow: hidden; }
#rjl-viz .viz-frame { position: relative; line-height: 0; overflow: hidden; }
/* zoom: everything that must line up (photo, 3D, handles) is scaled together */
#rjl-viz .viz-zoom { position: relative; transform-origin: 0 0; will-change: transform; }
#rjl-viz.is-zoomed #vizUI { cursor: grab; }
#rjl-viz .viz-zoombar { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 2px;
  padding: 4px; line-height: 1; background: rgba(7,31,56,.85); border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
#rjl-viz .viz-zbtn { min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #fff;
  font: 700 20px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; cursor: pointer; }
#rjl-viz .viz-zfit { font-size: 13px; }
#rjl-viz .viz-zbtn:hover:not(:disabled) { background: rgba(255,255,255,.15); }
#rjl-viz .viz-zbtn:focus-visible { outline: 3px solid #f36f21; outline-offset: 1px; }
#rjl-viz .viz-zbtn:disabled { opacity: .4; cursor: default; }
#rjl-viz .viz-zlevel { min-width: 46px; text-align: center; color: #fff; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
#rjl-viz:not(.has-photo) .viz-frame { display: none; }
#rjl-viz .viz-frame canvas, #rjl-viz #viewport { display: block; }
#rjl-viz #viewport, #rjl-viz #vizUI { position: absolute; left: 0; top: 0; }
#rjl-viz #viewport { pointer-events: none; }
#rjl-viz #viewport canvas { width: 100% !important; height: 100% !important; display: block; }
#rjl-viz #vizUI { touch-action: none; }
#rjl-viz.is-erasing #vizUI { cursor: crosshair; }
#rjl-viz .viz-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px;
  width: 100%; min-height: 420px; padding: 32px 20px; color: #fff; cursor: pointer; border: 2px dashed rgba(255,255,255,.35); border-radius: 10px; }
#rjl-viz.is-dragover .viz-drop { border-color: #f36f21; background: rgba(243,111,33,.08); }
#rjl-viz .viz-drop strong { font-size: 1.25rem; }
#rjl-viz .viz-drop .viz-btn { pointer-events: none; }
#rjl-viz .viz-drop small { color: rgba(255,255,255,.75); max-width: 460px; line-height: 1.5; }
#rjl-viz .viz-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
#rjl-viz .viz-hint { margin: 10px 0 0; font-size: .84rem; color: #4a4d52; line-height: 1.5; }
#rjl-viz:not(.has-photo) .viz-hint, #rjl-viz:not(.has-photo) .viz-readout { display: none; }
#rjl-viz .viz-readout { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; }
#rjl-viz .viz-readout .viz-err { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: #fdecea; color: #8a1c12; }
#rjl-viz .viz-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 6px; background: #f4f1ea; font-size: .9rem; }
#rjl-viz .viz-msg.is-error, #rjl-viz .viz-form-status.is-error { background: #fdecea; color: #8a1c12; }

/* ---------- enquiry form */
#rjl-viz .viz-panel { background: #fff; border: 1px solid #ddd8cc; border-radius: 10px; padding: 20px; }
#rjl-viz .viz-send { grid-column: 1 / -1; }
#rjl-viz .viz-send h2 { font-size: 1.3rem; margin: 0 0 6px; }
#rjl-viz .viz-send .quote-form { max-width: 760px; }
#rjl-viz .viz-choice { display: block; white-space: pre-line; font-weight: 600; font-size: .88rem; margin: 6px 0 12px; }
#rjl-viz .viz-form-status { margin: 10px 0 0; font-size: .9rem; }
#rjl-viz .viz-form-status:empty { display: none; }
#rjl-viz .viz-form-status:not(:empty) { padding: 10px 12px; border-radius: 6px; }
#rjl-viz .viz-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; font-weight: 400; line-height: 1.45; }
#rjl-viz .viz-consent input { margin-top: 3px; width: auto; }
#rjl-viz .viz-done { padding: 18px; border-radius: 8px; background: #eaf5ec; color: #12421c; }
#rjl-viz .viz-done:focus { outline: none; }
#rjl-viz.form-open .viz-main, #rjl-viz.form-open .viz-side { position: static; max-height: none; }

/* ---------- phones and small tablets */
@media (max-width: 900px) {
  .viz-wrap { padding: 16px 12px 56px; }
  #rjl-viz { --top: 104px; scroll-margin-top: 104px; grid-template-columns: 1fr; gap: 14px; }
  #rjl-viz .viz-main { order: -1; z-index: 5; background: #f4f1ea; padding-bottom: 6px; }
  #rjl-viz:not(.has-photo) .viz-main, #rjl-viz.form-open .viz-main { position: static; }
  #rjl-viz .viz-side { position: static; max-height: none; overflow: visible; }
  #rjl-viz .viz-tabs { position: static; }
  #rjl-viz .viz-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  #rjl-viz .viz-spacer { display: none; }
  #rjl-viz .viz-stage, #rjl-viz .viz-drop { min-height: 260px; }
  #rjl-viz.has-photo .viz-stage { min-height: 0; }
  #rjl-viz.has-photo .viz-main > .viz-note, #rjl-viz.has-photo .viz-hint { display: none; }
  #rjl-viz .viz-readout { font-size: .82rem; }
}

/* this page: slim hero so the tool is on the first screen */
.page-hero { min-height: 0 !important; padding-top: 34px !important; padding-bottom: 26px !important; }
.page-hero h1 { font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.08 !important; margin-bottom: 10px !important; }
.page-hero p:not(.eyebrow) { font-size: .95rem !important; max-width: 820px; }

/* ---- Light tab, before/after, saved options, extra toolbar buttons (Oct 2026) ---- */
#rjl-viz .viz-wide { width: 100%; margin: 0 0 12px; }
#rjl-viz #tab-light .viz-f span { display: flex; justify-content: space-between; gap: 8px; }
#rjl-viz #tab-light output { font-weight: 600; color: #a83c0e; white-space: nowrap; }
#rjl-viz #tab-light input[type=range] { width: 100%; accent-color: #d95420; }
#rjl-viz #vizBefore { position: absolute; left: 0; top: 0; pointer-events: none; }
#rjl-viz .viz-split { position: absolute; inset: 0; z-index: 2; cursor: ew-resize; touch-action: none; --split: 50%; line-height: 1; }
#rjl-viz .viz-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.35); }
#rjl-viz .viz-split-handle { position: absolute; top: 50%; left: var(--split); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 3px solid #fff; background: #d95420; color: #fff; font: 700 18px/1 system-ui, sans-serif; cursor: ew-resize; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
#rjl-viz .viz-split-handle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#rjl-viz .viz-split-tag { position: absolute; top: 10px; padding: 5px 10px; border-radius: 4px; background: rgba(7,31,56,.82); color: #fff;
  font: 700 12px/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
#rjl-viz .viz-split-l { left: 10px; } #rjl-viz .viz-split-r { right: 10px; }
#rjl-viz.is-comparing #vizCompare { background: #071f38; color: #fff; border-color: #071f38; }
#rjl-viz .viz-saved { margin: 12px 0 0; }
#rjl-viz .viz-saved-title { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #555d63; margin-bottom: 6px; }
#rjl-viz .viz-saved-list { display: flex; flex-wrap: wrap; gap: 10px; }
#rjl-viz .viz-opt { position: relative; }
#rjl-viz .viz-opt-pick { display: block; padding: 0; border: 2px solid #071f3829; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
#rjl-viz .viz-opt-pick:hover, #rjl-viz .viz-opt-pick:focus-visible { border-color: #d95420; outline: none; }
#rjl-viz .viz-opt-pick img { display: block; width: 132px; height: 88px; object-fit: cover; }
#rjl-viz .viz-opt-pick span { display: block; padding: 5px 8px; font: 600 .8rem/1.2 system-ui, sans-serif; color: #071f38; text-align: left; }
#rjl-viz .viz-opt-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(7,31,56,.85); color: #fff; font: 700 15px/1 system-ui, sans-serif; cursor: pointer; }
@media (max-width: 900px) {   /* the photo panel stays pinned while scrolling on phones: keep the strip one short row */
  #rjl-viz .viz-saved { margin-top: 6px; }
  #rjl-viz .viz-saved-title { display: none; }
  #rjl-viz .viz-saved-list { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  #rjl-viz .viz-opt-pick img { width: 64px; height: 42px; }
  #rjl-viz .viz-opt-pick span { padding: 2px 4px; font-size: .68rem; }
  #rjl-viz .viz-opt-del { width: 20px; height: 20px; font-size: 13px; top: 2px; right: 2px; }
  #rjl-viz .viz-zoombar { right: 6px; bottom: 6px; padding: 2px; }
  #rjl-viz .viz-zbtn { min-width: 30px; height: 30px; padding: 0 7px; font-size: 17px; }
  #rjl-viz .viz-zfit { font-size: 11px; }
  #rjl-viz .viz-zlevel { min-width: 38px; font-size: 11px; }
}
#rjl-viz .viz-tabs [role="tab"] { padding-left: 2px !important; padding-right: 2px !important; font-size: .74rem !important; min-width: 0; }

/* ---- AR overlay (Android camera AR) ---- */
.viz-ar-overlay { position: fixed; inset: 0; z-index: 2000; pointer-events: none; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.viz-ar-tip { position: absolute; left: 12px; right: 12px; top: 12px; margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(7,31,56,.85); color: #fff; font-size: 15px; line-height: 1.4; }
.viz-ar-exit { position: absolute; right: 12px; bottom: 24px; pointer-events: auto; padding: 12px 18px; border: 0; border-radius: 999px; background: #d95420; color: #fff; font: 700 15px system-ui, sans-serif; }

/* ---- AI photo-real dialog ---- */
#rjl-viz .viz-btn-ai { background: #071f38; color: #fff; border-color: #071f38; }
#rjl-viz .viz-btn-ai:hover { background: #0b2b4d; }
#rjl-viz .viz-ai { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,14,26,.72); }
#rjl-viz .viz-ai[hidden] { display: none; }
#rjl-viz .viz-ai-box { width: min(960px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 12px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
#rjl-viz .viz-ai-box h3 { margin: 0 0 10px; color: #071f38; }
#rjl-viz .viz-ai-consent { background: #f4f1ea; border-left: 4px solid #d95420; border-radius: 6px; padding: 12px 14px; margin: 0 0 12px; }
#rjl-viz .viz-ai-consent[hidden] { display: none; }
#rjl-viz .viz-ai-consent p { margin: 0 0 10px; font: 400 .92rem/1.55 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-transform: none; color: #1d2a36; }
#rjl-viz .viz-ai-status { min-height: 1.4em; margin: 0 0 10px; font: 600 .92rem/1.4 system-ui, sans-serif; text-transform: none; color: #071f38; }
#rjl-viz .viz-ai-status.is-error { color: #a83c0e; }
#rjl-viz .viz-ai-pic { background: #0b0d0f; border-radius: 8px; overflow: hidden; line-height: 0; }
#rjl-viz .viz-ai-pic img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
#rjl-viz .viz-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- full-screen editor ("studio"): the visualiser becomes its own page once a photo is in.
 * Slim white top bar, big picture area, right-hand panel of cards (tools with descriptions, then options). */
#rjl-viz .viz-full-open { margin-right: 4px; }
html.viz-studio-on, html.viz-studio-on body { overflow: hidden !important; }
html.viz-studio-on .chat-widget, html.viz-studio-on .chat-launcher, html.viz-studio-on .rjl-chat-launcher,
html.viz-studio-on [class*="rjl-chat"], html.viz-studio-on .sticky-quote { display: none !important; }
#rjl-viz.viz-studio { --navy: #071f38; --orange: #d95420; --line: #dfe3e8; --panel: #f3f5f7;
  position: fixed; inset: 0; z-index: 2147483000; margin: 0; max-width: none; gap: 0; background: #fff;
  grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: 60px minmax(0, 1fr); align-items: stretch; scroll-margin-top: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
#rjl-viz.viz-studio, #rjl-viz.viz-studio * { text-transform: none !important; letter-spacing: normal !important; }
/* top bar */
#rjl-viz .viz-topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgba(7,31,56,.08); position: relative; z-index: 6; }
#rjl-viz .viz-tb-logo { height: 36px; width: auto; }
#rjl-viz .viz-tb-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
#rjl-viz .viz-tb-title strong { font-size: 1rem; color: var(--navy); }
#rjl-viz .viz-tb-title span { font-size: .8rem; color: #5b6570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rjl-viz .viz-tb-actions { display: flex; align-items: center; gap: 8px; }
#rjl-viz .viz-topbar .viz-btn { min-height: 40px; border-radius: 8px; }
#rjl-viz .viz-tb-close { border-color: var(--line); color: var(--navy); }
/* picture area */
#rjl-viz.viz-studio .viz-main { grid-column: 1; grid-row: 2; position: relative; top: auto; display: flex; flex-direction: column; min-height: 0;
  padding: 16px 20px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #f7f8fa 0%, #e8ecf0 100%); }
#rjl-viz.viz-studio .viz-toolbar { display: none; }
#rjl-viz.viz-studio .viz-erasebar { flex: 0 0 auto; margin: 0 0 10px; }
#rjl-viz.viz-studio .viz-stage { flex: 1 1 auto; min-height: 0; background: none; border-radius: 0; }
#rjl-viz.viz-studio .viz-frame { border-radius: 8px; box-shadow: 0 14px 44px rgba(7,31,56,.28), 0 2px 8px rgba(7,31,56,.12); }
#rjl-viz.viz-studio .viz-saved { flex: 0 0 auto; margin-top: 12px; }
#rjl-viz.viz-studio .viz-hint { display: none; }
#rjl-viz.viz-studio .viz-msg { flex: 0 0 auto; margin: 8px 0 0; }
#rjl-viz.viz-studio .viz-readout { position: absolute; left: 32px; bottom: 28px; z-index: 4; margin: 0; max-width: calc(100% - 260px);
  background: #fff; color: var(--navy); border-radius: 10px; padding: 10px 14px; font-size: .86rem; line-height: 1.4;
  box-shadow: 0 6px 22px rgba(7,31,56,.22); border-left: 4px solid var(--orange); }
#rjl-viz.viz-studio .viz-readout:empty { display: none; }
/* right panel: cards */
#rjl-viz.viz-studio .viz-side { grid-column: 2; grid-row: 2; position: static; top: auto; max-height: none; height: 100%; overflow-y: auto;
  border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--panel); padding: 12px; overscroll-behavior: contain; }
#rjl-viz.viz-studio .viz-tabs { display: none; }
#rjl-viz.viz-studio .viz-side .viz-tabpanel.viz-card-body.viz-collapsed { display: none !important; }
#rjl-viz .viz-card, #rjl-viz.viz-studio .viz-card-toggle { background: #fff; border: 1px solid var(--line); }
#rjl-viz .viz-card { border-radius: 10px; padding: 14px; margin: 0 0 12px; }
#rjl-viz .viz-card-h { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--navy); }
#rjl-viz .viz-card-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--navy); padding: 13px 14px; border-radius: 10px 10px 0 0; border-bottom: 0; cursor: pointer; text-align: left; }
#rjl-viz .viz-card-toggle[aria-expanded="false"] { border-radius: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
#rjl-viz .viz-card-toggle[aria-expanded="false"] .viz-chev { transform: rotate(-90deg); }
#rjl-viz .viz-card-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
#rjl-viz .viz-chev { color: #8a939c; transition: transform .15s; }
#rjl-viz.viz-studio .viz-tabpanel.viz-card-body { background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; padding: 4px 14px 16px; margin: 0 0 12px; }
/* tool tiles: button with its description underneath */
#rjl-viz .viz-tools { display: grid; grid-template-columns: 1fr; gap: 6px; }
#rjl-viz .viz-tool { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; }
#rjl-viz .viz-tool:has(> .viz-btn[hidden]) { display: none; }
#rjl-viz .viz-tool .viz-btn { width: 100%; justify-content: center; min-height: 38px; padding: 8px 10px; font-size: .84rem; white-space: normal; line-height: 1.2; }
#rjl-viz .viz-tool-desc { margin: 0; font-size: .76rem; line-height: 1.35; color: #4f5a66; }
#rjl-viz .viz-side-foot { padding: 4px 4px 8px; }
#rjl-viz .viz-side-foot .viz-note { font-size: .72rem; margin: 8px 0 0; }
#rjl-viz .viz-form-back { margin: 0 0 12px; }
/* send form as a centred dialog */
#rjl-viz.viz-studio .viz-send:not([hidden]) { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: #fff; border-radius: 12px;
  padding: 20px 22px; box-shadow: 0 0 0 100vmax rgba(4,14,26,.62), 0 20px 60px rgba(0,0,0,.45); }
#rjl-viz.viz-studio .viz-ai { z-index: 40; }

@media (max-width: 1180px) and (min-width: 901px) {
  #rjl-viz.viz-studio { grid-template-columns: minmax(0, 1fr) 330px; }
  #rjl-viz .viz-tb-title span { display: none; }
}
@media (max-width: 900px) {
  #rjl-viz.viz-studio { display: flex; flex-direction: column; }
  #rjl-viz .viz-topbar { flex: 0 0 52px; gap: 8px; padding: 0 10px; }
  #rjl-viz .viz-tb-title, #rjl-viz .viz-topbar > .viz-spacer { display: none; }
  #rjl-viz .viz-tb-logo { height: 30px; margin-right: auto; }
  #rjl-viz .viz-tb-close span { display: none; }
  #rjl-viz.viz-studio .viz-main { flex: 0 0 auto; order: 0; padding: 8px; z-index: auto; }
  #rjl-viz.viz-studio .viz-stage { flex: none; height: auto; min-height: 0; }
  #rjl-viz.viz-studio .viz-readout { position: static; max-width: none; margin-top: 8px; font-size: .78rem; padding: 8px 10px; }
  #rjl-viz.viz-studio .viz-saved, #rjl-viz.viz-studio .viz-hint { display: none; }
  #rjl-viz.viz-studio .viz-side { order: 1; flex: 1 1 auto; min-height: 0; height: auto; border-left: 0; border-top: 1px solid var(--line); padding: 10px; }
}
/* editor small print in a plain font (brand font stays on the title, headings and buttons) - capitals are hard to read in long lines */
#rjl-viz.viz-studio .viz-tool-desc, #rjl-viz.viz-studio .viz-note, #rjl-viz.viz-studio .viz-hint-s, #rjl-viz.viz-studio .viz-tb-title span,
#rjl-viz.viz-studio .viz-readout, #rjl-viz.viz-studio .viz-f select, #rjl-viz.viz-studio .viz-f input, #rjl-viz.viz-studio .viz-colour-name,
#rjl-viz.viz-studio .viz-send p, #rjl-viz.viz-studio .viz-send input, #rjl-viz.viz-studio .viz-send textarea, #rjl-viz.viz-studio .viz-send label {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; }

/* ---------- launch page: examples of what it does, then begin. The editor itself only opens full screen. */
#rjl-viz:not(.viz-studio) { display: block; }
#rjl-viz:not(.viz-studio) > :not(.viz-launch) { display: none !important; }
#rjl-viz.viz-studio > .viz-launch { display: none !important; }
#rjl-viz .viz-launch { color: #071f38; }
#rjl-viz .vl-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
#rjl-viz .vl-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 0 0 14px; color: #071f38; }
#rjl-viz .vl-copy > p { max-width: 52ch; margin: 0 0 22px; font: 400 1.05rem/1.6 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-transform: none; color: #2f3b47; }
#rjl-viz .vl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
#rjl-viz .vl-begin { cursor: pointer; font-size: 1.05rem; padding: 15px 26px; }
#rjl-viz .vl-sample { background: none; border: 0; padding: 4px 0; font: 600 .98rem system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-transform: none;
  color: #071f38; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #d95420; cursor: pointer; }
#rjl-viz .vl-sample:disabled { opacity: .6; cursor: progress; }
#rjl-viz .vl-continue { display: none; }
#rjl-viz.has-photo .vl-continue { display: inline-flex; }
#rjl-viz .vl-small { margin: 16px 0 0; font: 400 .85rem/1.5 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-transform: none; color: #5b6570; }
#rjl-viz .vl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
#rjl-viz .vl-compare figure, #rjl-viz .vl-examples figure { margin: 0; position: relative; }
#rjl-viz .vl-compare img, #rjl-viz .vl-examples img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(7,31,56,.22); }
#rjl-viz .vl-compare figcaption { position: absolute; left: 10px; bottom: 10px; background: #071f38; color: #fff; padding: 5px 10px; border-radius: 6px;
  font: 600 .8rem system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-transform: none; }
#rjl-viz .vl-compare figure + figure figcaption { background: #d95420; }
#rjl-viz .vl-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 56px 0 0; }
#rjl-viz .vl-examples figcaption { margin-top: 14px; font: 400 .95rem/1.5 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-transform: none; color: #2f3b47; }
#rjl-viz .vl-examples figcaption strong, #rjl-viz .vl-features strong { display: block; font-size: 1.05rem; color: #071f38; margin-bottom: 2px; }
#rjl-viz .vl-features { list-style: none; margin: 48px 0 0; padding: 26px 0 0; border-top: 1px solid #d9dee4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 30px; }
#rjl-viz .vl-features li { position: relative; padding-left: 30px; font: 400 .92rem/1.5 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-transform: none; color: #3a4652; }
#rjl-viz .vl-features li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #d95420; color: #fff;
  font: 700 12px/20px system-ui, sans-serif; text-align: center; }
@media (max-width: 900px) {
  #rjl-viz .vl-hero { grid-template-columns: 1fr; gap: 24px; }
  #rjl-viz .vl-examples { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  #rjl-viz .vl-features { grid-template-columns: 1fr; }
  #rjl-viz .vl-begin { width: 100%; justify-content: center; }
}