/* ------------------------------------------------------------------ */
/* Hero: three ways in, one editor (own/url-importer/Hero.astro)       */
/* ------------------------------------------------------------------ */

.ux-hero .gk-stagerow + .marquee { margin-top: -1px; }
.ux-stage { padding: 32px; }
.ux { padding: 20px 24px 24px; }

.ux svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* The three ways, a segmented switch over the flow. */
.ux-ways {
  display: flex; gap: 2px; width: max-content; max-width: 100%;
  margin: 0 auto 20px; padding: 3px;
  border-radius: 11px; border: 1px solid var(--gk-line); background: #fff;
}
.ux-way {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px; border-radius: 8px;
  font: 500 13.5px/1 var(--font-ui); color: var(--gk-soft); white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.ux-way input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ux-way svg { width: 15px; height: 15px; stroke-width: 1.3; }
.ux-way:hover { color: var(--ink-nav); }
.ux-way:has(input:checked) { background: #f0f1f4; color: var(--ink-nav); }
.ux-way:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }

/* The flow: the source on the left, the wire, the editor on the right. */
.ux-flow {
  position: relative;
  display: grid; grid-template-columns: 352px minmax(0, 1fr); column-gap: 76px;
  height: 500px;
}
.ux-src { position: relative; z-index: 2; min-width: 0; min-height: 0; }
.ux-pane {
  display: none; flex-direction: column;
  height: 100%; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--gk-line); background: #fff;
}
.ux:has([data-ux-way][value="url"]:checked) .ux-pane--url,
.ux:has([data-ux-way][value="zip"]:checked) .ux-pane--zip,
.ux:has([data-ux-way][value="spy"]:checked) .ux-pane--spy { display: flex; }

.ux-head {
  flex: none; display: flex; align-items: center;
  height: 44px; margin: 0; padding: 0 16px;
  border-bottom: 1px solid var(--gk-line);
  font: 600 13px/1 var(--font-ui); color: var(--ink-nav);
}
.ux-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; margin: auto 0 0; padding: 7px 12px 7px 16px;
  border-top: 1px solid var(--gk-line); background: #fafafb;
  font: 400 12px/1.2 var(--font-ui); color: var(--gk-soft);
}
.ux-foot span { min-width: 0; }
.ux-foot b { flex: none; padding: 4px 7px; border-radius: 5px; background: #eef1ff; font: 500 11px/1 var(--font-ui); color: var(--brand); white-space: nowrap; }

.ux-go {
  flex: none; display: grid; place-items: center;
  height: 32px; padding: 0 14px;
  border: 0; border-radius: 7px; background: var(--brand); color: #fff;
  font: 500 13px/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.ux-go[hidden] { display: none; }
.ux-go:hover { background: var(--brand-hi); }
.ux-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ux-go--soft { background: #eef1ff; color: var(--brand); }
.ux-go--soft:hover { background: #e2e7ff; }
.ux-go.is-press, .ux-spy__go.is-press, .ux-name__go.is-press { transform: scale(.95); }
.ux-go.is-press { background: var(--brand-hi); }

/* From URL: a browser window, its address bar the form. */
.ux-bar__dots { flex: none; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 14px; background: #fafafb; }
.ux-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 8px 4px;
  border-bottom: 1px solid var(--gk-line); background: #fafafb;
}
.ux-bar__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2e3e8; }
.ux-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--gk-line); background: #fff;
  cursor: text; transition: border-color .15s ease;
}
.ux-field:focus-within { border-color: #b8c3ff; }
.ux-field > svg { width: 13px; height: 13px; color: #8b8f9a; stroke-width: 1.3; }
.ux-field__box { position: relative; flex: 1; min-width: 0; height: 100%; }
.ux-field input {
  width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  font: 500 13px/1 var(--font-ui); color: var(--ink-nav);
}
.ux-field input::placeholder { font-weight: 400; color: #9aa0ab; }
.ux-ghost {
  position: absolute; inset: 0; display: flex; align-items: center;
  overflow: hidden; white-space: nowrap; pointer-events: none;
  font: 500 13px/1 var(--font-ui); color: var(--ink-nav);
}
.ux-field__box:has(input:placeholder-shown:not(:focus)) input::placeholder { color: transparent; }
.ux-field__box:has(input:focus) .ux-ghost,
.ux-field__box:has(input:not(:placeholder-shown)) .ux-ghost { display: none; }
.ux-ghost.is-typing::after { content: ""; width: 1.5px; height: 15px; margin-left: 1px; background: var(--brand); }

.ux-site {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

/* From ZIP: the drop zone, the .zip and its files. */
.ux-drop {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  height: 148px; margin: 16px 16px 0; padding: 0 16px;
  border-radius: 10px; border: 1.5px dashed #c3c8d3; background: #fbfbfc;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.ux-drop__file { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid var(--gk-line); color: #8b8f9a; }
.ux-drop__file svg { width: 17px; height: 17px; stroke-width: 1.3; }
.ux-drop__pick { cursor: pointer; }
.ux-drop__pick::after { content: ""; position: absolute; inset: 0; }
.ux-drop .ux-go { position: relative; z-index: 1; }
.ux-drop__text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/1.2 var(--font-ui); color: var(--gk-soft); }
.ux-drop__text b { font-weight: 500; color: var(--ink-nav); }
.ux-drop__text small { margin-left: 6px; font-size: 12px; color: var(--gk-grey); }
.ux-drop__tap { display: none; }
@media (hover: none) {
  .ux-drop__drag { display: none; }
  .ux-drop__tap { display: inline; }
}
.ux-drop:hover { border-color: #8d9cff; }
.ux-drop:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ux-drop.is-over { border-color: var(--brand); background: #f3f5ff; }
.ux-drop.is-over .ux-drop__file { border-color: #c9d1ff; color: var(--brand); }
.ux-drop.is-over .ux-drop__text { color: var(--brand); }
.ux-drop.is-bad { border-color: #f0a19a; }
.ux-drop.is-bad .ux-drop__text { color: #b42318; }

.ux-zip { flex: 1; min-height: 0; overflow: hidden; padding: 14px 16px 0; }
.ux-zip p { margin: 0; }
.ux-zip__row {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--gk-line);
  font: 400 12.5px/1 var(--font-ui); color: var(--ink-nav); white-space: nowrap;
}
.ux-zip__ico { display: grid; color: var(--brand); }
.ux-zip__ico svg { width: 14px; height: 14px; stroke-width: 1.4; }
.ux-zip__row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ux-zip__row small { margin-left: auto; font-size: 11.5px; color: var(--gk-grey); }
.ux-tree { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; }
.ux-tree li {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  height: 27px; padding-left: 14px;
  font: 400 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-nav); white-space: nowrap;
}
.ux-tree li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; border-left: 1px solid #e2e3e8; border-bottom: 1px solid #e2e3e8; height: 50%; border-bottom-left-radius: 4px; }
.ux-tree li:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 50%; bottom: 0; border-left: 1px solid #e2e3e8; }
.ux-tree__ico { display: grid; color: #a3a8b3; }
.ux-tree__ico svg { width: 13px; height: 13px; stroke-width: 1.3; }
.ux-tree__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ux-tree__name em { font-style: normal; color: var(--gk-grey); }
.ux-tree__ok { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgb(35 71 255 / .1); color: var(--brand); }
.ux-tree__ok svg { width: 10px; height: 10px; stroke-width: 2.2; }
.ux-tree li.is-more { color: var(--gk-grey); font-family: var(--font-ui); }
.ux-tree li.is-more .ux-tree__ok, .ux-tree li.is-more .ux-tree__ico { visibility: hidden; }

.ux[data-state="src"] .ux-zip:not(.is-read) { opacity: 0; }
.ux-zip.is-read .ux-zip__row { animation: uxDrop .45s cubic-bezier(.2, .8, .3, 1) backwards; }
.ux-zip.is-read .ux-tree li { animation: uxIn .3s ease backwards; animation-delay: calc(.3s + var(--i, 0) * .11s); }
.ux-zip.is-read .ux-tree__ok { animation: uxPop .3s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(.42s + var(--i, 0) * .11s); }

/* From a spy tool: the ad, AdPlexity or Anstrex, and the button. */
.ux-spy__top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 48px; padding: 0 10px 0 8px;
  border-bottom: 1px solid var(--gk-line);
}
.ux-spy__tools { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #f3f4f6; }
.ux-spy__tool {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 9px; border-radius: 6px;
  font: 500 12.5px/1 var(--font-ui); color: var(--gk-soft); white-space: nowrap; cursor: pointer;
}
.ux-spy__tool input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ux-spy__tool img { width: 14px; height: 14px; filter: grayscale(1); opacity: .6; transition: filter .15s ease, opacity .15s ease; }
.ux-spy__tool:has(input:checked) { background: #fff; color: var(--ink-nav); box-shadow: 0 1px 2px rgb(24 24 34 / .08); }
.ux-spy__tool:has(input:checked) img { filter: none; opacity: 1; }
.ux-spy__tool:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
.ux-spy__head { font: 500 12px/1 var(--font-ui); color: var(--gk-grey); white-space: nowrap; }

.ux-spy__ad { display: flex; gap: 11px; padding: 14px 16px 12px; }
.ux-spy__ad img { flex: none; width: 58px; height: 58px; border-radius: 7px; object-fit: cover; }
.ux-spy__ad > span { display: grid; align-content: start; gap: 8px; min-width: 0; }
.ux-spy__ad b { font: 600 13px/1.3 var(--font-ui); color: var(--ink-nav); }
.ux-spy__ad .sk-bone { display: block; height: 6px; border-radius: 3px; width: var(--w); background: #efeff2; }

.ux-spy__meta { display: grid; margin: 0 16px; border-top: 1px solid #f0f0f3; }
.ux-spy__meta > div { display: flex; align-items: center; justify-content: space-between; height: 29px; border-bottom: 1px solid #f0f0f3; font: 400 12px/1 var(--font-ui); }
.ux-spy__meta dt { color: var(--gk-grey); }
.ux-spy__meta dd { margin: 0; color: var(--ink-nav); font-weight: 500; }
.ux-spy__meta > div:first-child dd { color: #127a46; }

.ux-spy__lander { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 0; }
.ux-spy__label { flex: none; min-width: 58px; max-width: 96px; padding-top: 2px; font: 400 12px/1 var(--font-ui); color: var(--gk-grey); }
.ux-spy__thumb {
  position: relative; flex: 1; height: 112px; overflow: hidden;
  border-radius: 7px; border: 1px solid var(--gk-line);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.ux-spy__go {
  --t: #141a21;
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; margin: 14px 16px 0; padding: 0 14px;
  border: 0; border-radius: 8px; background: var(--t); color: #fff;
  font: 600 13px/1 var(--font-ui); cursor: pointer;
  transition: transform .15s ease, box-shadow .3s ease, background-color .2s ease;
}
.ux-pane--spy:has([data-ux-tool][value="anstrex"]:checked) .ux-spy__go { --t: #6d3fd6; }
.ux-spy__go:hover { filter: brightness(1.12); }
.ux-spy__go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ux-spy__go.is-press { box-shadow: 0 0 0 5px color-mix(in srgb, var(--t) 18%, transparent); }
.ux-spy__mk { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #fff; }
.ux-spy__mk svg { width: 7px; height: auto; fill: #0b0d12; stroke: none; }
.ux-spy__where { margin: 8px 16px 0; font: 400 11.5px/1.3 var(--font-ui); color: var(--gk-grey); text-align: center; }
.ux-spy__where span { display: none; }
.ux-pane--spy:has([data-ux-tool][value="adplexity"]:checked) .ux-spy__where [data-tool="adplexity"],
.ux-pane--spy:has([data-ux-tool][value="anstrex"]:checked) .ux-spy__where [data-tool="anstrex"] { display: inline; }

/* The wire, after todesktop.com's: a faint track, a dot at each end, a light with a tail. */
.ux-wire { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ux:not(.is-live) .ux-wire { display: none; }
.ux-wire__track { fill: none; stroke: #d5d9e3; stroke-width: 1.5; stroke-linecap: round; }
.ux-wire__out, .ux-wire__in { fill: #c3c8d6; stroke: #fff; stroke-width: 1.5; transition: fill .5s ease; }
.ux-wire__in.is-on { fill: var(--brand); transition-duration: .1s; }
.ux-run path { fill: none; stroke-width: 2; stroke-linecap: round; }
.ux-run__fade { stroke: var(--brand); opacity: .12; }
.ux-run__tail { stroke: var(--brand); opacity: .32; }
.ux-run__body { stroke: #5b74ff; opacity: .8; }
.ux-run__head { stroke: var(--brand); }

/* The editor, where the page lands. */
.ux-app { position: relative; z-index: 2; min-width: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--gk-line); background: #fff; }
.ux-ed { height: 100%; }
.ux-ed .lla-ebar__mid > .lla-ebar__title { display: block; color: var(--lla-ink); }
.ux-title > span { display: none; }
.ux:is([data-state="pick"], [data-state="done"]):has([data-ux-way][value="url"]:checked) .ux-title [data-w="url"],
.ux:is([data-state="pick"], [data-state="done"]):has([data-ux-way][value="zip"]:checked):not([data-own]) .ux-title [data-w="zip"],
.ux:is([data-state="pick"], [data-state="done"]):has([data-ux-way][value="spy"]:checked) .ux-title [data-w="spy"],
.ux[data-own]:has([data-ux-way][value="zip"]:checked) .ux-title .ux-title__own { display: inline; }
.ux:is([data-state="send"], [data-state="name"], [data-state="scan"]) .ux-title .ux-title__busy { display: inline; color: var(--lla-muted); }

.ux-canvas { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.ux-page { display: none; position: absolute; inset: 0; }
.ux:has([data-ux-way][value="url"]:checked) .ux-page[data-w="url"],
.ux:has([data-ux-way][value="zip"]:checked):not([data-own]) .ux-page[data-w="zip"],
.ux:has([data-ux-way][value="spy"]:checked) .ux-page[data-w="spy"] { display: block; }
.ux:is([data-state="src"], [data-state="send"], [data-state="name"]) .ux-page { visibility: hidden; }
.ux:is([data-state="src"], [data-state="send"], [data-state="name"]) .ux-canvas { background: #fbfbfe; }

/* The scan: the page arrives as a flat grey copy; each block turns sharp
   and flashes the editor's dashed selection as the line passes. */
.ux-page [data-b] { outline: 1px dashed transparent; outline-offset: .35em; transition: filter .45s ease, opacity .45s ease; }
.ux[data-state="scan"] .ux-page [data-b]:not(.is-live) { filter: grayscale(1) blur(1.5px); opacity: .32; }
.ux[data-state="scan"] .ux-page [data-b].is-live { animation: uxFlash 1s ease both; }
.ux-scan {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: 2px; background: var(--lla-blue, #2b5ee8);
  transform: translateY(var(--y, 0)); opacity: 0; pointer-events: none;
}
.ux-scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 46px; background: linear-gradient(to top, rgb(43 94 232 / .07), transparent); }
.ux[data-state="scan"] .ux-scan { opacity: 1; }

/* Then the editor picks the headline, a caret in it; or the button the links leave from. */
.ux:is([data-state="pick"], [data-state="done"]) .ux-page [data-sel] { outline: 1.5px solid var(--lla-blue, #2b5ee8); outline-offset: .3em; }
.ux-caret { display: none; width: 2px; height: .92em; margin-left: .05em; vertical-align: -.1em; background: var(--lla-blue, #2b5ee8); }
.ux:is([data-state="pick"], [data-state="done"]) .ux-page .uxl__h .ux-caret { display: inline-block; animation: uxBlink 1.05s steps(1) infinite; }

.ux-page .uxl { transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
.ux:is([data-state="pick"], [data-state="done"]) .ux-page[data-w="spy"] .uxl { transform: translateY(-29em); }
.ux-relink {
  position: absolute; left: 50%; top: 16px; z-index: 4;
  display: none; flex-direction: column; gap: 7px;
  width: min(380px, calc(100% - 32px)); margin: 0; padding: 11px 13px;
  translate: -50% 0;
  border-radius: 10px; border: 1px solid var(--lla-line, #e8e8fe); background: #fff;
  box-shadow: 0 4px 14px rgb(24 24 34 / .08);
  font: 400 12px/1 var(--lla-font, var(--font-ui)); color: var(--lla-ink, #181822);
}
.ux:is([data-state="pick"], [data-state="done"]):has([data-ux-way][value="spy"]:checked) .ux-relink { display: flex; }
.ux[data-state="pick"] .ux-relink { animation: uxUp .45s cubic-bezier(.2, .8, .3, 1) .9s backwards; }
.ux-relink__act { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ux-relink__act svg { width: 13px; height: 13px; color: var(--lla-blue, #2b5ee8); stroke-width: 1.4; }
.ux-relink__act em { margin-left: auto; padding: 3px 6px; border-radius: 5px; background: var(--lla-tint, #f1f1fe); font-style: normal; font-weight: 400; color: var(--lla-text, #4d4d5b); }
.ux-relink__map { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.ux-relink__map s { color: var(--lla-muted, #8b8b9d); }
.ux-relink__map svg { width: 12px; height: 12px; color: #a8adb8; stroke-width: 1.4; }
.ux-relink__map b { font-weight: 700; }
.ux-relink__map code { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 11px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--lla-blue, #2b5ee8); }

/* The name LanderLab asks for when a spy tool's lander arrives. */
.ux-name {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  display: none; flex-direction: column; gap: 12px;
  width: min(280px, calc(100% - 32px)); padding: 16px;
  translate: -50% -50%;
  border-radius: 12px; border: 1px solid var(--lla-line, #e8e8fe); background: #fff;
  box-shadow: 0 12px 32px rgb(24 24 34 / .1);
  font: 400 12.5px/1.2 var(--lla-font, var(--font-ui)); color: var(--lla-ink, #181822);
}
.ux[data-state="name"] .ux-name { display: flex; animation: uxUp .35s cubic-bezier(.2, .8, .3, 1) backwards; }
.ux-name__h { margin: 0; font-weight: 700; font-size: 14px; }
.ux-name__in { display: flex; align-items: center; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #b8c3ff; }
.ux-name__in .ux-caret { display: inline-block; height: 14px; animation: uxBlink 1.05s steps(1) infinite; }
.ux-name__go { align-self: flex-end; display: grid; place-items: center; height: 30px; padding: 0 14px; border-radius: 7px; background: var(--lla-grad, var(--brand)); color: #fff; font-weight: 700; transition: transform .15s ease; }

/* A .zip of your own, ready to import. */
.ux-ready {
  position: absolute; inset: 0; z-index: 4;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 0 32px; text-align: center; background: #fbfbfe;
  font-family: var(--lla-font, var(--font-ui));
}
.ux[data-own]:has([data-ux-way][value="zip"]:checked) .ux-ready { display: flex; }
.ux-ready p { margin: 0; }
.ux-ready__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--lla-line, #e8e8fe); color: var(--lla-blue, #2b5ee8); }
.ux-ready__ico svg { width: 20px; height: 20px; stroke-width: 1.3; }
.ux-ready__h { font: 700 15px/1.3 var(--lla-font, var(--font-ui)); color: var(--lla-ink, #181822); }
.ux-ready__t { max-width: 300px; font-size: 12.5px; line-height: 1.5; color: var(--lla-text, #4d4d5b); }

@keyframes uxFlash {
  0% { outline-color: transparent; }
  18% { outline-color: rgb(43 94 232 / .85); }
  100% { outline-color: transparent; }
}
@keyframes uxBlink { 50% { opacity: 0; } }
@keyframes uxUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes uxDrop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes uxIn { from { opacity: 0; transform: translateX(-4px); } }
@keyframes uxPop { from { opacity: 0; transform: scale(.4); } }

@media (prefers-reduced-motion: reduce) {
  .ux-caret, .ux-name__in .ux-caret { animation: none !important; }
}

/* ------------------------------------------------------------------ */
/* The imported pages (own/url-importer/Lander.astro), 60em wide       */
/* ------------------------------------------------------------------ */

.uxl-wrap { container-type: inline-size; width: 100%; }
.uxl {
  position: relative;
  font: 400 calc(100cqi / 60)/1.25 var(--font-ui);
  color: #1b1f27; background: #fff;
  -webkit-font-smoothing: antialiased;
}
.uxl :where(span, b, i) { display: block; font-style: normal; }
.uxl .ux-caret { display: none; }
.uxl img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uxl svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.uxl__nav { display: flex; align-items: center; gap: 2em; height: 5.4em; padding: 0 3.2em; border-bottom: .1em solid #f0f0f2; }
.uxl__logo { display: flex; align-items: center; gap: .9em; }
.uxl__logo i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .7em; background: var(--c); color: #fff; }
.uxl__logo i svg { width: 1.6em; height: 1.6em; }
.uxl__logo b { width: 7.5em; height: 1em; border-radius: .5em; background: #d9dbe0; }
.uxl__links { display: flex; gap: 1.8em; margin-left: auto; }
.uxl__links b { width: 4.6em; height: .8em; border-radius: .4em; background: #e8e9ec; }
.uxl__navbtn { display: grid; place-items: center; min-width: 9em; height: 2.8em; padding: 0 1.2em; border-radius: .6em; background: var(--c); color: #fff; font-size: 1.1em; font-weight: 600; white-space: nowrap; }
.uxl__navbtn:empty { width: 9.6em; height: 3.1em; font-size: 1em; }

.uxl__kicker { font-size: 1.25em; font-weight: 600; color: var(--c); }
.uxl__h { margin-top: .45em; font-size: 3.5em; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.uxl__cta { display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.9em; padding: 0 1em; border-radius: .5em; background: var(--c); color: #fff; font-size: 1.3em; font-weight: 600; white-space: nowrap; }
.uxl__cta svg { width: 1em; height: 1em; stroke-width: 2; }

/* Roofing estimate, from a URL. */
.uxl--roof { --c: #e2581d; }
.uxl--roof .uxl__hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3.2em; padding: 3.8em 3.2em 3em; }
.uxl--roof .uxl__sub { margin-top: 1.1em; font-size: 1.4em; line-height: 1.45; color: #5a606b; }
.uxl__form { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; margin-top: 2.2em; }
.uxl__field { display: flex; align-items: center; height: 3em; padding: 0 .8em; border-radius: .45em; border: .08em solid #dcdee3; font-size: 1.25em; color: #9aa0aa; }
.uxl__form .uxl__cta { grid-column: 1 / -1; }
.uxl__rate { display: flex; align-items: center; gap: .6em; margin-top: 1.5em; font-size: 1.15em; color: #5a606b; }
.uxl__stars { display: flex; gap: .1em; color: #f5a524; }
.uxl__stars i { width: 1.1em; height: 1.1em; }
.uxl__stars svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.uxl--roof .uxl__photo { border-radius: 1.2em; overflow: hidden; min-height: 30em; }
.uxl__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; padding: 0 3.2em 3.4em; }
.uxl__tile { display: flex; align-items: center; gap: .6em; padding: 1.1em 1.2em; border-radius: .7em; background: #fbf4ef; font-size: 1.2em; font-weight: 600; }
.uxl__tile i { flex: none; width: 1.2em; height: 1.2em; color: var(--c); }
.uxl__tile svg { width: 100%; height: 100%; stroke-width: 2.2; }

.uxl__more { padding: 0 3.2em 3.6em; }
.uxl__more-h { width: 18em; height: 1.4em; margin: 0 auto 2em; border-radius: .7em; background: #dfe1e6; }
.uxl__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6em; }
.uxl__step { display: grid; justify-items: center; gap: .9em; padding: 2em 1.4em; border-radius: .9em; border: .1em solid #f0f0f2; }
.uxl__step i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fbf4ef; color: var(--c); font-size: 1.1em; font-weight: 700; }
.uxl__step b { width: 80%; height: .9em; border-radius: .45em; background: #e8e9ec; }
.uxl__step b + b { width: 60%; background: #f0f0f2; }

/* Solar savings, from a .zip. */
.uxl--solar { --c: #18794e; }
.uxl__band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 21em; gap: 3em; align-items: center; min-height: 32em; padding: 4em 3.2em; color: #fff; overflow: hidden; }
.uxl__band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(7 26 18 / .86), rgb(7 26 18 / .42)); }
.uxl__band .uxl__bg { position: absolute; inset: 0; z-index: 0; }
.uxl__band > :not(.uxl__bg) { position: relative; z-index: 2; }
.uxl--solar .uxl__kicker { color: #8fe0b5; }
.uxl--solar .uxl__h { font-size: 3.7em; }
.uxl__calc { display: grid; gap: 1.3em; padding: 1.8em; border-radius: 1em; background: #fff; color: #1b1f27; }
.uxl__calc-l { font-size: 1.15em; color: #5a606b; }
.uxl__calc-l b { margin-top: .25em; font-size: 2em; font-weight: 700; color: #1b1f27; }
.uxl__range { position: relative; height: .5em; border-radius: 1em; background: #e3eee8; }
.uxl__range i { position: relative; width: 46%; height: 100%; border-radius: inherit; background: var(--c); }
.uxl__range i::after { content: ""; position: absolute; right: -.8em; top: 50%; width: 1.6em; height: 1.6em; translate: 0 -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .25em var(--c); }
.uxl__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6em; padding: 2.6em 3.2em 3.4em; }
.uxl__stat { font-size: 1.15em; color: #5a606b; }
.uxl__stat b { margin-bottom: .2em; font-size: 1.9em; font-weight: 700; color: var(--c); }

/* The serum advertorial, found in a spy tool. */
.uxl--serum { --c: #b9461b; }
.uxl__label { display: flex; align-items: center; gap: 1.2em; height: 3.4em; padding: 0 3.2em; background: #f5f5f6; font-size: 1em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8b8f9a; }
.uxl__label b { width: 12em; height: .8em; margin-left: auto; border-radius: .4em; background: #e4e5e9; }
.uxl__article { padding: 2.8em 8em 3em; }
.uxl--serum .uxl__kicker { font-size: 1.1em; letter-spacing: .08em; text-transform: uppercase; }
.uxl--serum .uxl__h { margin-top: .35em; font-family: Georgia, "Times New Roman", serif; font-size: 3.6em; line-height: 1.12; letter-spacing: -.01em; }
.uxl__by { display: flex; align-items: center; gap: .9em; margin-top: 1.6em; }
.uxl__by i { width: 2.8em; height: 2.8em; border-radius: 50%; background: #e7e8ec; }
.uxl__by b { width: 8em; height: .85em; border-radius: .4em; background: #e4e5e9; }
.uxl__by b + b { width: 5em; background: #efeff2; }
.uxl--serum .uxl__photo { height: 21em; margin-top: 2em; border-radius: .5em; overflow: hidden; }
.uxl--serum .uxl__photo img { object-position: center 38%; }
.uxl__para { display: grid; gap: .95em; margin-top: 2.2em; }
.uxl__para b { height: .95em; border-radius: .45em; background: #e9eaee; }
.uxl__para b:nth-child(2) { width: 94%; }
.uxl__para b:nth-child(3) { width: 97%; }
.uxl__para b:nth-child(4) { width: 62%; }
.uxl__box { display: grid; gap: 1.6em; margin-top: 2.2em; padding: 1.8em; border-radius: .8em; background: #fff6ef; border: .1em solid #f8dfcc; }
.uxl__box .uxl__para { margin-top: 0; }
.uxl__box .uxl__para b:nth-child(2) { width: 70%; }

/* ------------------------------------------------------------------ */
/* Before you send traffic (own/url-importer/Breaks.astro)             */
/* ------------------------------------------------------------------ */

.ux-brk { display: flex; flex-direction: column; }
.ux-brk .gk-cell__title { margin-top: 10px; }
.ux-brk__fix { margin: 20px 0 0; font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--sk-mute, #8b8f9a); }

.ux-sk .sk-frame__in { display: flex; flex-direction: column; gap: 8px; }
.ux-sk p { margin: 0; }
.ux-sk svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ux-sk__head { display: flex; align-items: center; height: 16px; margin-bottom: 2px !important; font: 500 11.5px/1 var(--font-ui); color: var(--sk-ink); }
.ux-sk__lines { display: grid; gap: 7px; }
.ux-sk__lines .sk-bone:first-child { margin-bottom: 2px; }
.ux-sk__btn { width: 38%; height: 26px; margin-top: 4px; border-radius: 7px; background: #d9defe; }
.ux-sk__link + .ux-sk__btn { margin-top: 10px; }
.ux-sk__btn--full { width: 100%; margin-top: 0; }

.ux-sk__link {
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 0;
  height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--sk-edge);
  font: 400 11px/1 var(--sk-mono); color: var(--sk-ink); white-space: nowrap;
}
.ux-sk__link + .ux-sk__lines { margin-top: 10px; }
.ux-sk__link > svg { width: 12px; height: 12px; color: #a8adb8; stroke-width: 1.4; }
.ux-sk__link s { flex: none; color: var(--sk-faint); }
.ux-sk__link > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ux-sk__link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ux-sk__link span b, .ux-sk__addr b { font-weight: 500; color: var(--brand); }
.ux-sk__addr {
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px;
  border-radius: 7px; background: var(--sk-ground);
  font: 400 11px/1 var(--sk-mono); white-space: nowrap;
}
.ux-sk__addr svg { width: 11px; height: 11px; color: var(--sk-faint); stroke-width: 1.3; }
.ux-sk__addr .sk-bone { margin-right: -3px; }

.ux-sk__form { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: 9px; border: 1px solid var(--sk-edge); }
.ux-sk__form > .sk-bone { margin-bottom: 2px; }
.ux-sk__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.ux-sk__in {
  display: flex; align-items: center; height: 30px; padding: 0 9px; min-width: 0;
  border-radius: 6px; border: 1px solid var(--sk-edge);
  font: 400 11.5px/1 var(--font-ui); color: var(--sk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}

.ux-sk .ux-sk__code { display: grid; gap: 4px; padding-top: 2px; font: 400 11px/1 var(--sk-mono); }
.ux-sk__tagline { height: 22px; display: flex; align-items: center; color: var(--sk-faint); }
.ux-sk__cl { display: flex; align-items: center; height: 22px; padding-left: 16px; }
.ux-sk__px {
  position: relative; display: flex; align-items: center; height: 34px; margin: 2px 0 6px 6px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--sk-edge);
  color: var(--sk-ink); white-space: nowrap;
}

.ux-sk__photo { display: grid; place-items: center; height: 62px; border-radius: 8px; background: var(--sk-bone-lo); color: #c9ccd3; }
.ux-sk__photo svg { width: 20px; height: 20px; stroke-width: 1.2; }
.ux-sk__size {
  position: relative; display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--sk-edge);
  font: 400 11.5px/1 var(--sk-mono); color: var(--sk-ink); white-space: nowrap;
}
.ux-sk__size s { color: var(--sk-faint); }
.ux-sk__size b { font-weight: 500; }
.ux-sk__size > svg { width: 12px; height: 12px; color: #a8adb8; stroke-width: 1.4; }
.ux-sk .ux-sk__weight { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 0 2px; }
.ux-sk__weight i { flex: 1; height: 5px; border-radius: 3px; background: var(--sk-bone-lo); overflow: hidden; }
.ux-sk__weight b { display: block; width: 11.8%; height: 100%; border-radius: inherit; background: var(--brand); }

.ux-sk__fld {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #f1f1f4;
  font: 400 12px/1 var(--font-ui); color: var(--sk-mute);
}
.ux-sk__fld b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--sk-ink); }
.ux-sk__fld img { width: 12px; height: 12px; }
.ux-sk__fld .sk-tick { width: 16px; height: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .pg-js .ux-brk:not(.is-in) .ux-sk__weight b { width: 100%; background: #c9cdd6; }
  .ux-sk__weight b { transition: width .9s cubic-bezier(.2, .8, .3, 1) calc(.5s + var(--k, 0) * .1s), background-color .4s ease calc(.5s + var(--k, 0) * .1s); }
}

@media (min-width: 641px) and (max-width: 900px) {
  .ux-brk { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 32px; }
  .ux-brk > .ux-sk { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .ux-brk__fix { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0; }
  .ux-brk .gk-cell__title { grid-column: 2; grid-row: 3; }
  .ux-brk .gk-cell__text { grid-column: 2; grid-row: 4; }
}

/* ------------------------------------------------------------------ */
/* From the spy tool (own/url-importer/SpyTool.astro)                  */
/* ------------------------------------------------------------------ */

.ux-sp { display: flex; flex-direction: column; }
.ux-sp__art { position: relative; margin-bottom: 22px; }
.ux-sp__next {
  position: absolute; z-index: 2; right: -40px; top: 88px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--gk-line); background: #fff; color: var(--brand);
}
.ux-sp__next svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ux-ssk .sk-frame__in { display: flex; flex-direction: column; gap: 8px; }
.ux-ssk p { margin: 0; }
.ux-ssk svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ux-ssk__head { display: flex; align-items: center; gap: 7px; height: 16px; margin-bottom: 2px !important; font: 500 11.5px/1 var(--font-ui); color: var(--sk-ink); white-space: nowrap; }
.ux-ssk__head img { width: 12px; height: 12px; }

.ux-ssk__ad { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 9px; border-radius: 8px; border: 1px solid #f1f1f4; }
.ux-ssk__ad img { flex: none; width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.ux-ssk__ad .sk-bones { flex: 1; min-width: 0; gap: 5px; }
.ux-ssk__ad em { flex: none; font: 500 10.5px/1 var(--font-ui); font-style: normal; color: var(--sk-faint); white-space: nowrap; }
.ux-ssk__ad.is-pick em { color: #127a46; }

.ux-ssk__kv { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 2px; border-bottom: 1px solid #f3f3f5; }
.ux-ssk__go {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; margin-top: 8px; border-radius: 8px; border: 1px solid transparent;
  background: #141a21; color: #fff; font: 600 11.5px/1 var(--font-ui); white-space: nowrap;
}
.ux-ssk__go.is-pick { box-shadow: 0 0 0 3px var(--sk-brand-lo); border-color: var(--sk-brand-edge); }
.ux-ssk__mk { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: #fff; }
.ux-ssk__mk svg { width: 6px; height: auto; fill: #0b0d12; stroke: none; }

.ux-ssk__field { display: flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--sk-edge); font: 400 12px/1 var(--font-ui); color: var(--sk-ink); white-space: nowrap; }
.ux-ssk__field i { width: 1.5px; height: 13px; margin-left: 1px; background: var(--sk-brand); }
.ux-ssk__versions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ux-ssk__versions > span { display: grid; gap: 5px; padding: 7px; border-radius: 7px; border: 1px solid #f1f1f4; }
.ux-ssk__versions > .is-on { border-color: #dfe4ff; background: #f8f9ff; }
.ux-ssk__btn { align-self: flex-end; display: grid; place-items: center; height: 24px; padding: 0 11px; border-radius: 6px; background: #d9defe; font: 500 11px/1 var(--font-ui); color: var(--brand); }

.ux-ssk__relink {
  position: relative; display: grid; gap: 7px; min-width: 0;
  padding: 9px 10px; border-radius: 8px; border: 1px solid var(--sk-edge);
  font: 400 11px/1 var(--font-ui); color: var(--sk-ink); white-space: nowrap;
}
.ux-ssk__relink s { color: var(--sk-faint); overflow: hidden; text-overflow: ellipsis; }
.ux-ssk__relink p { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ux-ssk__relink svg { width: 11px; height: 11px; color: var(--sk-brand); stroke-width: 1.5; }
.ux-ssk__relink b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ux-ssk__count { display: flex; align-items: center; gap: 6px; height: 18px; padding: 0 2px; font: 500 11.5px/1 var(--font-ui); color: var(--sk-ink); white-space: nowrap; }
.ux-ssk__count .sk-ico { width: 12px; height: 12px; color: var(--sk-brand); }
.ux-ssk__count em { margin-left: auto; font-style: normal; font: 400 10.5px/1 var(--sk-mono); color: var(--sk-mute); }
.ux-ssk__fld { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid #f1f1f4; font: 400 11.5px/1 var(--font-ui); color: var(--sk-ink); white-space: nowrap; }
.ux-ssk__fld img { width: 12px; height: 12px; }
.ux-ssk__fld b { font-weight: 500; }
.ux-ssk__fld .sk-tick { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .ux-sp__cells { --cols: 2 !important; }
  .ux-sp:nth-child(2) .ux-sp__next { display: none; }
}
@media (max-width: 640px) {
  .ux-sp__next { display: none; }
}

/* ------------------------------------------------------------------ */
/* Smaller screens                                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 1180px) {
  .ux-flow { grid-template-columns: 320px minmax(0, 1fr); column-gap: 56px; }
}
@media (max-width: 1020px) {
  .ux-stage { padding: 24px; }
  .ux-flow { grid-template-columns: minmax(0, 1fr); row-gap: 40px; height: auto; }
  .ux-src { max-width: 560px; width: 100%; margin: 0 auto; }
  .ux-pane { height: auto; }
  .ux-pane--url { height: 440px; }
  .ux-zip, .ux-spy__where { padding-bottom: 14px; }
  .ux-app { height: 460px; }
}
@media (max-width: 640px) {
  .ux-stage { padding: 12px; }
  .ux { padding: 14px 12px 12px; }
  .ux-ways { margin-bottom: 14px; }
  .ux-way { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
  .ux-way svg { display: none; }
  .ux-pane--url { height: 400px; }
  .ux-app { height: 400px; }
  .ux-ed { grid-template-columns: minmax(0, 1fr); }
  .ux-ed .lla-rail { display: none; }
  .ux-field input, .ux-ghost { font-size: 16px; }
  .ux-field > svg { display: none; }
}