/* Webgentic for sites demo, V6: the live homepage's hero demo (webgentic.ai assets/css/hero-demo.css
   + hero-demo-desktop.css) copied verbatim, then a short block at the end that takes it out of the
   old homepage's laptop composition and sizes it from its own column. Rules for .hero-visual,
   .floating-logo and the old dots/switch match nothing on this page and are left as they were. */

/* Host page rules such as ".prod h3" outrank the demo's own class rules, so headings, paragraphs and
   lists inside the demo are reset here (this file loads after the page CSS), and every demo rule above
   carries the .wgd prefix. */
.wgd :is(h3,h4,p,ul,ol,li){margin:0;padding:0;color:inherit;font:inherit;letter-spacing:normal;text-wrap:wrap;max-width:none;list-style:none}

/**
 * Webgentic - Hero Demo Phone
 * Live version of the hero phone: the prompt is typed, Webgentic works,
 * the client page updates. Replaces the static phone image on the homepage.
 *
 * The whole mockup is sized from one master font-size on .hero-demo, so a
 * single value scales the frame and everything inside it in proportion.
 */

.wgd .hero-demo {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 10;
  font-family: var(--font-body);
  font-size: 10px;
  width: 27em;
  height: 51.5em;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Shares the float keyframes with the static phone it replaces */
  animation: phone-float 6s ease-in-out infinite;
}

.wgd .wg-phone {
  width: 100%;
  height: 100%;
  border: 0.9em solid #1a1e25;
  border-radius: 4.6em;
  background: #0e1116;
  box-shadow:
    0 0 0 0.18em #2a2f38,
    0 2.4em 4.8em rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.wgd .wg-screen {
  position: absolute;
  inset: 0;
  border-radius: 3.8em;
  overflow: hidden;
  background: var(--bg-dark);
  transition: opacity 500ms var(--ease-in-out);
}

.wgd .hero-demo.is-restarting .wg-screen {
  opacity: 0;
}

.wgd .wg-notch {
  position: absolute;
  top: 0.9em;
  left: 50%;
  transform: translateX(-50%);
  width: 10em;
  height: 2.8em;
  background: #000;
  border-radius: 1.6em;
  z-index: 40;
}

.wgd .wg-status {
  transition: color 600ms var(--ease-in-out);
  position: absolute;
  top: 1.5em;
  left: 0;
  right: 0;
  z-index: 41;
  display: flex;
  justify-content: space-between;
  padding: 0 2.6em;
  font-size: 1.05em;
  font-weight: var(--weight-semibold);
  color: #fff;
}

.wgd .wg-status__icons {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.wgd .wg-signal {
  display: flex;
  align-items: flex-end;
  gap: 0.16em;
  height: 1em;
}

.wgd .wg-signal span {
  width: 0.24em;
  background: #fff;
  border-radius: 0.08em;
}

.wgd .wg-signal span:nth-child(1) { height: 0.4em; }
.wgd .wg-signal span:nth-child(2) { height: 0.62em; }
.wgd .wg-signal span:nth-child(3) { height: 0.84em; }

.wgd .wg-battery {
  width: 1.7em;
  height: 1em;
  border: 0.14em solid #fff;
  border-radius: 0.3em;
  position: relative;
}

.wgd .wg-battery::after {
  content: '';
  position: absolute;
  inset: 0.2em;
  background: #fff;
  border-radius: 0.1em;
}

 /* The status bar flips to dark once the light client page is on screen */
.wgd .hero-demo.is-light .wg-status {
  color: var(--color-text-body);
}

.wgd .hero-demo.is-light .wg-battery {
  border-color: var(--color-text-body);
}

.wgd .hero-demo.is-light .wg-battery::after,
.wgd .hero-demo.is-light .wg-signal span {
  background: var(--color-text-body);
}

.wgd .hero-demo.is-light .wg-homebar {
  background: var(--color-text-body);
}

.wgd .wg-homebar {
  position: absolute;
  bottom: 0.8em;
  left: 50%;
  transform: translateX(-50%);
  width: 11em;
  height: 0.4em;
  border-radius: 0.3em;
  background: #fff;
  opacity: 0.9;
  z-index: 41;
}

/* ================================
   LAYER 1: the client site
   ================================ */

.wgd .wg-site {
  display: none;
  position: absolute;
  inset: 0;
  background: #f7f5f2;
  border-radius: 3.8em;
  color: var(--color-text-body);
  padding-top: 4.6em;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-in-out);
}

/* Everything inside the phone is a mock of somebody else's website, so the
   site's own heading, paragraph and list styles are kept out of it. :where()
   carries no weight, so each mock element's own rule below still wins */
.wgd .wg-site :where(h1,
.wgd h2,
.wgd h3,
.wgd h4,
.wgd h5,
.wgd h6,
.wgd p,
.wgd ul,
.wgd ol,
.wgd li) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* The example the dots are pointing at */
.wgd .wg-site.is-active {
  display: block;
}

.wgd .wg-site.is-shown {
  transform: scale(1);
}

/* Only while the chat covers the page. The panel's blur drags the page's own
   cream outwards into the curve of the screen, where it showed as a pale rim;
   darkening the page's edge underneath stops it at the source. Lifted again
   the moment the page is back on show, so it never darkens the page itself */
.wgd .hero-demo:not(.is-light) .wg-site {
  box-shadow: inset 0 0 2em 0.5em var(--bg-dark);
}

.wgd .wg-site__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1em 1.8em;
  border-bottom: 0.1em solid rgba(27, 27, 27, 0.1);
}

.wgd .wg-site__mark {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.5em;
  letter-spacing: -0.02em;
}

.wgd .wg-site__menu {
  width: 1.8em;
  height: 0.16em;
  background: var(--color-text-body);
  box-shadow: 0 0.55em 0 var(--color-text-body), 0 -0.55em 0 var(--color-text-body);
}

.wgd .wg-site__hero {
  padding: 1.4em 1.8em 0.9em;
}

.wgd .wg-site__banner {
  height: 8.5em;
  border-radius: 1.1em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #b9cfd6 0%, #cfc4d8 55%, #e0d2bb 100%);
}

/* The sale lands on the banner too: a warm red takes over from the soft
   pastel, so the change is obvious at a glance rather than only in the words.
   Cross-faded on a layer because gradients do not interpolate */
.wgd .wg-site__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.09) 0 0.7em,
      rgba(255, 255, 255, 0) 0.7em 1.4em),
    linear-gradient(160deg, #8e2a18 0%, #c23a20 45%, #e0873a 100%);
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out);
}

.wgd .wg-site--sale.is-edited .wg-site__banner::before {
  opacity: 1;
}

.wgd .wg-site__banner-tag {
  position: absolute;
  left: 1.1em;
  bottom: 1em;
  display: grid;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-body);
  font-size: 0.95em;
  font-weight: var(--weight-semibold);
  padding: 0.45em 0.75em;
  border-radius: 0.5em;
  white-space: nowrap;
}

/* Both labels share one grid cell, so the tag keeps the wider label's width
   and nothing reflows when the sale copy takes over */
.wgd .wg-tag-old,
.wgd .wg-tag-new {
  grid-area: 1 / 1;
  transition: opacity 400ms var(--ease-in-out);
}

.wgd .wg-tag-new {
  opacity: 0;
}

.wgd .wg-site--sale.is-edited .wg-tag-old {
  opacity: 0;
}

.wgd .wg-site--sale.is-edited .wg-tag-new {
  opacity: 1;
}

.wgd .wg-site__copy {
  margin-top: 0.6em;
  position: relative;
}

.wgd .wg-plain-title {
  font-family: var(--font-heading);
  font-size: 1.8em;
  line-height: 1.15;
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
}

.wgd .wg-site__title {
  font-family: var(--font-heading);
  font-size: 1.8em;
  line-height: 1.15;
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
  min-height: 1.25em;
  position: relative;
}

.wgd .wg-site__title .wg-old,
.wgd .wg-site__title .wg-new {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  white-space: nowrap;
  transition: opacity 500ms var(--ease-in-out);
}

.wgd .wg-site__title .wg-new {
  opacity: 0;
}

.wgd .wg-site__title.is-swapped .wg-old {
  opacity: 0;
}

.wgd .wg-site__title.is-swapped .wg-new {
  opacity: 1;
}

/* Marks out everything the prompt touched: the banner as well as the headline.
   It sits in the copy block and reaches back up over the banner, which is
   0.9em of margin plus 8.5em of banner above it */
/* ================================
   THE SELECTION FRAME
   The same thing Webgentic draws on a real page while it works: the part it
   is about to change is outlined with a breathing dashed frame, and a light
   band travels across it. When the change lands the frame goes solid for a
   moment and then leaves. Each example says WHERE its frame sits; the
   behaviour is all here.
   ================================ */

.wgd .wg-site {
  /* Webgentic's own preview accent. The page accent is too pale to read as
     an outline against the cream of the mock page */
  --wg-scan: #0099cc;
  --wg-scan-soft: rgba(0, 153, 204, 0.16);
}

.wgd .wg-ring {
  position: absolute;
  left: -0.6em;
  right: -0.6em;
  top: -9.7em;
  height: 12.6em;
  border-radius: 1.4em;
  border: 0.2em dashed var(--wg-scan);
  overflow: hidden;
  opacity: 0;
  transition: opacity 350ms var(--ease-in-out), height 700ms var(--ease-in-out);
}

.wgd .wg-site.is-scanning .wg-ring {
  opacity: 1;
  animation: wg-breathe 2.4s var(--ease-in-out) infinite;
}

@keyframes wg-breathe {
  0%, 100% { box-shadow: 0 0 0 0.25em var(--wg-scan-soft); opacity: 0.85; }
  50%      { box-shadow: 0 0 0 0.75em var(--wg-scan-soft); opacity: 1; }
}

/* The band that travels across whatever is being read */
.wgd .wg-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 42%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    var(--wg-scan-soft) 45%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
}

.wgd .wg-site.is-scanning .wg-sweep {
  opacity: 1;
  animation: wg-sweep 2.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes wg-sweep {
  0%   { left: -55%; }
  100% { left: 105%; }
}

/* Work finished: the outline firms up, holds, then goes */
.wgd .wg-site.is-settled .wg-ring {
  border-style: solid;
  box-shadow: 0 0 0 0.35em var(--wg-scan-soft);
  animation: wg-ring 2s var(--ease-in-out) forwards;
}

@keyframes wg-ring {
  0%   { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}

.wgd .wg-site__text {
  margin-top: 0.3em;
  font-size: 1.15em;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.wgd .wg-site__cta {
  display: inline-block;
  margin-top: 0.45em;
  background: var(--color-text-body);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: 1.15em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-full);
}

.wgd .wg-site__edited {
  position: absolute;
  right: 0;
  top: -2.1em;
  font-size: 0.95em;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  background: #0e1116;
  padding: 0.35em 0.7em;
  border-radius: 0.45em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 400ms var(--ease-in-out), transform 400ms var(--ease-in-out);
}

.wgd .wg-site--sale.is-edited .wg-site__edited {
  opacity: 1;
  transform: none;
}

.wgd .wg-site__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  padding: 0.3em 1.8em 1.6em;
}

.wgd .wg-tile__img {
  height: 6.5em;
  border-radius: 0.9em;
  background: #e8e4de;
}

.wgd .wg-tile:nth-child(2) .wg-tile__img { background: #dfe4e6; }
.wgd .wg-tile:nth-child(3) .wg-tile__img { background: #ece5da; }
.wgd .wg-tile:nth-child(4) .wg-tile__img { background: #dcdfe2; }

.wgd .wg-tile__name {
  font-size: 1.05em;
  font-weight: var(--weight-semibold);
  margin-top: 0.7em;
}

.wgd .wg-tile__price {
  font-size: 1em;
  color: var(--color-text-muted);
  margin-top: 0.15em;
  display: flex;
  align-items: baseline;
  gap: 0.45em;
}

/* The sale price holds its space from the start, so the tiles never reflow
   when the discount lands */
.wgd .wg-price-now {
  color: var(--color-text-body);
  font-weight: var(--weight-semibold);
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity 350ms var(--ease-in-out), transform 350ms var(--ease-in-out);
}

.wgd .wg-price-was {
  transition: color 350ms var(--ease-in-out);
}

.wgd .wg-site--sale.is-edited .wg-price-was {
  text-decoration: line-through;
}

.wgd .wg-site--sale.is-edited .wg-price-now {
  opacity: 1;
  transform: none;
}

/* The four prices land one after another, so the discount reads as work
   being applied rather than a single flick of the whole grid */
.wgd .wg-site--sale.is-edited .wg-tile:nth-child(2) .wg-price-now { transition-delay: 110ms; }
.wgd .wg-site--sale.is-edited .wg-tile:nth-child(3) .wg-price-now { transition-delay: 220ms; }
.wgd .wg-site--sale.is-edited .wg-tile:nth-child(4) .wg-price-now { transition-delay: 330ms; }

/* ================================
   EXAMPLE: landing
   "Build a landing page" - a page that did not exist arrives over the homepage
   ================================ */

.wgd .wg-site--landing .wg-newpage {
  position: absolute;
  inset: 0;
  background: #f7f5f2;
  border-radius: 3.8em;
  padding-top: 4.6em;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 900ms var(--ease-in-out);
}

/* The new page arrives as soon as the work starts, blank, and fills in */
.wgd .wg-site--landing.is-scanning .wg-newpage,
.wgd .wg-site--landing.is-settled .wg-newpage,
.wgd .wg-site--landing.is-edited .wg-newpage {
  transform: none;
}

/* Its frame wraps the whole page, because the whole page is what is new */
.wgd .wg-site--landing .wg-ring {
  left: 0.8em;
  right: 0.8em;
  top: 0.8em;
  bottom: 0.8em;
  height: auto;
  z-index: 3;
}

/* The page being built: bars standing in for the parts not written yet */
.wgd .wg-site--landing .wg-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #f7f5f2;
  border-radius: 3.8em;
  padding: 6.2em 1.6em 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms var(--ease-in-out);
}

.wgd .wg-site--landing.is-scanning .wg-skeleton {
  opacity: 1;
}

.wgd .wg-sk {
  display: block;
  flex: none;
  border-radius: 0.6em;
  background: linear-gradient(100deg,
    rgba(27, 27, 27, 0.07) 0%,
    rgba(27, 27, 27, 0.17) 45%,
    rgba(27, 27, 27, 0.07) 90%);
  background-size: 300% 100%;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 400ms var(--ease-in-out), transform 400ms var(--ease-in-out);
}

/* They land one after another, so the page reads as being written */
.wgd .wg-site.is-scanning .wg-sk {
  opacity: 1;
  transform: none;
  animation: wg-shimmer 1.8s linear infinite;
}

.wgd .wg-site--landing.is-scanning .wg-sk:nth-child(2) { transition-delay: 260ms; }
.wgd .wg-site--landing.is-scanning .wg-sk:nth-child(3) { transition-delay: 520ms; }
.wgd .wg-site--landing.is-scanning .wg-sk:nth-child(4) { transition-delay: 700ms; }
.wgd .wg-site--landing.is-scanning .wg-sk:nth-child(5) { transition-delay: 820ms; }
.wgd .wg-site--landing.is-scanning .wg-sk:nth-child(6) { transition-delay: 980ms; }
.wgd .wg-site--landing.is-scanning .wg-sk:nth-child(7) { transition-delay: 1180ms; }

@keyframes wg-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.wgd .wg-sk--url { height: 2.2em; width: 62%; border-radius: var(--radius-full); }
.wgd .wg-sk--banner { height: 6.8em; }
.wgd .wg-sk--title { height: 2.2em; width: 72%; }
.wgd .wg-sk--line { height: 1.1em; }
.wgd .wg-sk--short { width: 56%; }
.wgd .wg-sk--btn { height: 3.2em; width: 12em; border-radius: var(--radius-full); }
.wgd .wg-sk--row { height: 5.4em; }

/* The address of the page it just created, so it reads as somewhere new */
.wgd .wg-site--landing .wg-newpage__url {
  margin: 0.7em 1.6em 0;
  padding: 0.5em 1em;
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--color-text-body);
  background: #ebe7e1;
  border-radius: var(--radius-full);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wgd .wg-site--landing .wg-newpage__url span {
  color: var(--color-text-muted);
}

.wgd .wg-site--landing .wg-newpage__banner {
  height: 6.8em;
  margin: 0.8em 1.6em 0;
  border-radius: 1.1em;
  background: linear-gradient(160deg, #c6d3cd 0%, #ded1c2 58%, #c8ced8 100%);
}

.wgd .wg-site--landing .wg-newpage__body {
  padding: 1.2em 1.6em 0;
}

.wgd .wg-site--landing .wg-newpage__title {
  font-family: var(--font-heading);
  font-size: 1.75em;
  line-height: 1.1;
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
}

.wgd .wg-site--landing .wg-newpage__text {
  margin-top: 0.45em;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.wgd .wg-site--landing .wg-newpage .wg-site__cta {
  margin-top: 0.9em;
}

.wgd .wg-site--landing .wg-newpage__list {
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6em;
  font-size: 1.1em;
  color: var(--color-text-secondary);
}

.wgd .wg-site--landing .wg-newpage__list li {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

/* Below the fold of the new page: what the classes actually cover */
.wgd .wg-site--landing .wg-newpage__more {
  padding: 0 1.6em;
  margin-top: 1.1em;
}

.wgd .wg-site--landing .wg-newpage__sub {
  font-family: var(--font-heading);
  font-size: 1.3em;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.wgd .wg-site--landing .wg-newpage__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8em;
  margin-top: 0.8em;
}

.wgd .wg-site--landing .wg-newpage__thumbs .wg-tile__img {
  height: 3.6em;
  border-radius: 0.7em;
}

.wgd .wg-site--landing .wg-newpage__thumbs .wg-tile__name {
  margin-top: 0.5em;
  font-size: 0.95em;
}

.wgd .wg-site--landing .wg-newpage__more .wg-newpage__text {
  margin-top: 1em;
  font-size: 1.05em;
}

.wgd .wg-site--landing .wg-newpage__list li::before {
  content: '';
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-text-body);
}

/* ================================
   EXAMPLE: seo
   "Optimise for search" - real search terms, then the page rewritten round them
   ================================ */

.wgd .wg-site--seo .wg-seo {
  position: relative;
  padding: 1.3em 1.8em 0;
}

.wgd .wg-site--seo .wg-seo__terms {
  display: grid;
  justify-items: start;
  gap: 0.45em;
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition:
    max-height 700ms var(--ease-in-out),
    margin-bottom 700ms var(--ease-in-out);
}

.wgd .wg-site--seo.is-edited .wg-seo__terms {
  max-height: 12em;
  margin-bottom: 2.2em;
}

.wgd .wg-site--seo .wg-seo__from,
.wgd .wg-site--seo .wg-chip {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 400ms var(--ease-in-out), transform 400ms var(--ease-in-out);
}

.wgd .wg-site--seo .wg-seo__from {
  font-size: 0.9em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.wgd .wg-site--seo .wg-chip {
  font-size: 0.95em;
  padding: 0.35em 0.85em;
  border-radius: var(--radius-full);
  background: #edeae4;
  border: 0.1em solid rgba(27, 27, 27, 0.12);
}

.wgd .wg-site--seo .wg-chip b {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.wgd .wg-site--seo.is-edited .wg-seo__from,
.wgd .wg-site--seo.is-edited .wg-chip {
  opacity: 1;
  transform: none;
}

/* The terms land one after another, the way a list is read off */
.wgd .wg-site--seo.is-edited .wg-chip:nth-child(3) { transition-delay: 130ms; }
.wgd .wg-site--seo.is-edited .wg-chip:nth-child(4) { transition-delay: 260ms; }

.wgd .wg-site--seo .wg-seo__head {
  position: relative;
}

.wgd .wg-site--seo .wg-site__edited {
  top: -1.9em;
}

.wgd .wg-site--seo.is-edited .wg-site__edited {
  opacity: 1;
  transform: none;
  transition-delay: 420ms;
}

/* Both headlines share one cell, so nothing below them shifts on the swap */
.wgd .wg-site--seo .wg-seo__title {
  display: grid;
  height: 1.25em;
  overflow: hidden;
  transition: height 600ms var(--ease-in-out) 380ms;
  font-family: var(--font-heading);
  font-size: 1.55em;
  line-height: 1.18;
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
}

.wgd .wg-site--seo .wg-seo__old,
.wgd .wg-site--seo .wg-seo__new {
  grid-area: 1 / 1;
  align-self: start;
  transition: opacity 500ms var(--ease-in-out) 380ms;
}

.wgd .wg-site--seo .wg-seo__new {
  opacity: 0;
}

.wgd .wg-site--seo.is-edited .wg-seo__title {
  height: 2.5em;
}

.wgd .wg-site--seo.is-edited .wg-seo__old {
  opacity: 0;
}

.wgd .wg-site--seo.is-edited .wg-seo__new {
  opacity: 1;
}

.wgd .wg-site--seo .wg-seo__text {
  margin-top: 0.4em;
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Marks out the terms and the headline they were written into */
/* While it reads, the frame sits round the headline and the copy under it.
   The search terms have not arrived yet, so it grows to take them in when
   they push the page down */
.wgd .wg-site--seo .wg-ring {
  left: 1.1em;
  right: 1.1em;
  top: 0.6em;
  height: 16.6em;
}

.wgd .wg-site--seo.is-scanning .wg-ring {
  height: 6.8em;
}

.wgd .wg-site--seo.is-settled .wg-ring {
  animation-delay: 500ms;
}

.wgd .wg-site--seo .wg-seo__list {
  margin: 0.9em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5em;
  font-size: 1.05em;
  color: var(--color-text-secondary);
}

.wgd .wg-site--seo .wg-seo__list li {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.wgd .wg-site--seo .wg-seo__list li::before {
  content: '';
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-text-body);
}

/* A shallow row rather than the shop grid, so the results preview below it
   stays on screen once the search terms have pushed the page down */
.wgd .wg-site--seo .wg-seo__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8em;
  margin-top: 1.2em;
}

.wgd .wg-site--seo .wg-seo__thumbs .wg-tile__img {
  height: 4.4em;
  border-radius: 0.7em;
}

.wgd .wg-site--seo .wg-seo__thumbs .wg-tile__name {
  margin-top: 0.5em;
  font-size: 0.95em;
}

/* The questions the page answers, which is where the FAQ markup comes from */
.wgd .wg-site--seo .wg-seo__faq {
  margin-top: 1.5em;
}

.wgd .wg-site--seo .wg-seo__sub {
  font-family: var(--font-heading);
  font-size: 1.25em;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.wgd .wg-site--seo .wg-seo__qs {
  margin: 0.7em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6em;
  font-size: 1.05em;
  color: var(--color-text-secondary);
}

.wgd .wg-site--seo .wg-seo__qs li {
  padding-bottom: 0.6em;
  border-bottom: 0.1em solid rgba(27, 27, 27, 0.12);
}

/* How the page now reads on a results page */
.wgd .wg-site--seo .wg-serp {
  position: absolute;
  left: 1.4em;
  right: 1.4em;
  bottom: 6.4em;
  background: #fff;
  border: 0.1em solid rgba(27, 27, 27, 0.12);
  border-radius: 0.9em;
  padding: 0.9em 1em;
  box-shadow: 0 1.2em 2.8em rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(130%);
  transition: opacity 550ms var(--ease-in-out) 900ms, transform 550ms var(--ease-in-out) 900ms;
}

/* Fades the page into the card, so the preview reads as sitting over the
   page rather than cutting a line of it in half */
.wgd .wg-site--seo .wg-serp::before,
.wgd .wg-site--seo .wg-serp::after {
  content: '';
  position: absolute;
  left: -1.4em;
  right: -1.4em;
  height: 3.4em;
  pointer-events: none;
}

.wgd .wg-site--seo .wg-serp::before {
  bottom: 100%;
  background: linear-gradient(to top, #f7f5f2 25%, rgba(247, 245, 242, 0));
}

.wgd .wg-site--seo .wg-serp::after {
  top: 100%;
  background: linear-gradient(to bottom, #f7f5f2 25%, rgba(247, 245, 242, 0));
}

.wgd .wg-site--seo .wg-serp__cap {
  margin-bottom: 0.6em;
  padding-bottom: 0.55em;
  border-bottom: 0.1em solid rgba(27, 27, 27, 0.1);
  font-size: 0.9em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.wgd .wg-site--seo.is-edited .wg-serp {
  opacity: 1;
  transform: none;
}

.wgd .wg-site--seo .wg-serp__crumb {
  font-size: 0.9em;
  color: var(--color-text-muted);
}

.wgd .wg-site--seo .wg-serp__title {
  margin-top: 0.25em;
  font-size: 1.15em;
  line-height: 1.3;
  font-weight: var(--weight-semibold);
  color: #1a3a8f;
}

.wgd .wg-site--seo .wg-serp__desc {
  margin-top: 0.3em;
  font-size: 0.95em;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* ================================
   EXAMPLE: form
   "Add a form" - an enquiry form built into the space set aside for it
   ================================ */

.wgd .wg-site--form .wg-formpage {
  padding: 1.4em 1.8em 0;
}

.wgd .wg-site--form .wg-site__text {
  margin-top: 0.5em;
}

.wgd .wg-site--form .wg-formpage__list {
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55em;
  font-size: 1.05em;
  color: var(--color-text-secondary);
}

.wgd .wg-site--form .wg-formpage__list li {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.wgd .wg-site--form .wg-formpage__list li::before {
  content: '';
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-text-body);
}

.wgd .wg-site--form .wg-formpage__note {
  margin-top: 1em;
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.wgd .wg-site--form .wg-formpage__note strong {
  color: var(--color-text-body);
  font-weight: var(--weight-semibold);
}

/* The form itself has to stay whole on a phone screen, so the address only
   appears where there is room for it */
.wgd .wg-site--form .wg-formpage__where {
  display: none;
  margin-top: 0.7em;
  font-size: 1em;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.wgd .wg-site--form .wg-formslot {
  position: relative;
  margin-top: 2.6em;
  min-height: 19em;
}

/* Nothing is marked out until the work starts. Then the space Webgentic has
   picked is outlined and read over, and the form is built into it. Same
   dashed-and-shimmering box the real thing uses for something that is coming */
.wgd .wg-site--form .wg-formslot__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0.18em dashed var(--wg-scan);
  border-radius: 1.1em;
  font-size: 1.05em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  opacity: 0;
  z-index: 1;
  transition: opacity 400ms var(--ease-in-out);
}

.wgd .wg-site--form.is-scanning .wg-formslot__hint {
  opacity: 1;
  color: transparent;
  transition: opacity 400ms var(--ease-in-out), color 300ms var(--ease-in-out) 700ms;
  animation: wg-breathe 2.4s var(--ease-in-out) infinite;
}

/* The form is assembled inside the space that was picked out, a field at a
   time, rather than the box sitting empty until it is finished */
.wgd .wg-site--form .wg-formskel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 1.4em 1.4em 1.5em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-in-out);
}

.wgd .wg-site--form.is-scanning .wg-formskel {
  opacity: 1;
}

.wgd .wg-site--form.is-scanning .wg-formskel .wg-sk:nth-child(1) { transition-delay: 620ms; }
.wgd .wg-site--form.is-scanning .wg-formskel .wg-sk:nth-child(2) { transition-delay: 720ms; }
.wgd .wg-site--form.is-scanning .wg-formskel .wg-sk:nth-child(3) { transition-delay: 900ms; }
.wgd .wg-site--form.is-scanning .wg-formskel .wg-sk:nth-child(4) { transition-delay: 1000ms; }
.wgd .wg-site--form.is-scanning .wg-formskel .wg-sk:nth-child(5) { transition-delay: 1180ms; }
.wgd .wg-site--form.is-scanning .wg-formskel .wg-sk:nth-child(6) { transition-delay: 1280ms; }
.wgd .wg-site--form.is-scanning .wg-formskel .wg-sk:nth-child(7) { transition-delay: 1500ms; }

.wgd .wg-sk--label { height: 0.95em; width: 7em; border-radius: 0.35em; }
.wgd .wg-sk--wide { width: 12em; }
.wgd .wg-sk--field { height: 2.4em; margin-bottom: 0.55em; }
.wgd .wg-sk--tall { height: 3.4em; }
.wgd .wg-sk--send { height: 3.2em; margin-top: auto; border-radius: var(--radius-full); }

/* The outline stays put while the form is built into it, then leaves */
.wgd .wg-site--form.is-settled .wg-formslot__hint {
  opacity: 1;
  /* the label has done its job once the form is being built into the space */
  color: transparent;
  border-style: solid;
  box-shadow: 0 0 0 0.35em var(--wg-scan-soft);
  animation: wg-ring 2s var(--ease-in-out) forwards;
}

.wgd .wg-site--form .wg-formslot__hint .wg-sweep {
  top: -0.2em;
  bottom: -0.2em;
}

.wgd .wg-site--form .wg-site__edited {
  top: -2.2em;
}

.wgd .wg-site--form.is-edited .wg-site__edited {
  opacity: 1;
  transform: none;
  transition-delay: 1250ms;
}

.wgd .wg-site--form .wg-formcard {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 0.1em solid rgba(27, 27, 27, 0.12);
  border-radius: 1.1em;
  padding: 1.1em 1.1em 1.2em;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 450ms var(--ease-in-out), transform 450ms var(--ease-in-out);
}

.wgd .wg-site--form.is-settled .wg-formcard {
  opacity: 1;
  transform: none;
  transition-delay: 250ms;
}

/* Card first, then the fields it was asked for, one at a time */
.wgd .wg-site--form .wg-field {
  display: grid;
  gap: 0.3em;
  margin-bottom: 0.6em;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 350ms var(--ease-in-out), transform 350ms var(--ease-in-out);
}

.wgd .wg-site--form.is-settled .wg-field {
  opacity: 1;
  transform: none;
  transition-delay: 530ms;
}

.wgd .wg-site--form.is-settled .wg-field:nth-of-type(2) { transition-delay: 670ms; }
.wgd .wg-site--form.is-settled .wg-field:nth-of-type(3) { transition-delay: 810ms; }

.wgd .wg-site--form .wg-field__label {
  font-size: 0.95em;
  font-weight: var(--weight-semibold);
}

.wgd .wg-site--form .wg-field__box {
  height: 2.4em;
  border-radius: 0.6em;
  background: #f4f2ee;
  border: 0.1em solid rgba(27, 27, 27, 0.14);
}

.wgd .wg-site--form .wg-field__box--tall {
  height: 3.4em;
}

.wgd .wg-site--form .wg-formcard__btn {
  display: block;
  margin-top: 0.3em;
  padding: 0.9em 1.2em;
  text-align: center;
  background: var(--color-text-body);
  color: #fff;
  font-size: 1.1em;
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 350ms var(--ease-in-out) 950ms, transform 350ms var(--ease-in-out) 950ms;
}

.wgd .wg-site--form.is-settled .wg-formcard__btn {
  opacity: 1;
  transform: none;
}

/* ================================
   LAYER 2: opening frame
   ================================ */

.wgd .wg-cover {
  position: absolute;
  inset: 0;
  background: var(--bg-dark);
  transition: opacity 1.1s var(--ease-in-out);
}

.wgd .hero-demo.is-nocover .wg-cover {
  display: none;
}

.wgd .wg-cover.is-off {
  opacity: 0;
  pointer-events: none;
}

.wgd .wg-cover__headline {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 3.2em;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  text-shadow:
    0 0 0.5em rgba(160, 225, 247, 0.55),
    0 0 1.3em rgba(160, 225, 247, 0.3);
  transition: opacity 600ms var(--ease-in-out), transform 600ms var(--ease-in-out);
}

.wgd .wg-cover__headline.is-off {
  opacity: 0;
  transform: translateY(-58%);
}

/* The real wordmark, low on the title card */
.wgd .wg-cover__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.6em;
  text-align: center;
  transition: opacity 500ms var(--ease-in-out);
}

/* Images are block-level site-wide, so this centres on its margins rather
   than on text-align */
.wgd .wg-cover__wordmark img {
  width: 11em;
  height: auto;
  margin: 0 auto;
  opacity: 0.75;
}

.wgd .wg-cover__wordmark.is-off {
  opacity: 0;
}

/* ================================
   LAYER 3: the chat sheet
   ================================ */

/* How Webgentic sits on a live site: a lit line along the very bottom edge,
   there the whole time the client page is on screen, gone while the chat has
   taken the screen over */
.wgd .wg-halo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.3em;
  background: var(--color-accent);
  box-shadow:
    0 0 1.4em 0.15em rgba(160, 225, 247, 0.65),
    0 -0.3em 2.2em rgba(160, 225, 247, 0.35);
  opacity: 0;
  transition: opacity 500ms var(--ease-in-out);
  z-index: 30;
}

.wgd .hero-demo.is-light .wg-halo {
  opacity: 1;
}

/* The gesture that calls the chat up: a thumb presses the line at the bottom
   of the screen and swipes. Centred on its margin so the transform is free
   for the animation */
.wgd .wg-gesture {
  position: absolute;
  left: 50%;
  bottom: 0.2em;
  margin-left: -1.7em;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  /* The dark edge carries the contrast against the light client page, the
     cyan fill and glow tie it to the line it is pressing */
  border: 0.16em solid rgba(27, 27, 27, 0.5);
  background: rgba(160, 225, 247, 0.38);
  box-shadow: 0 0 0.9em rgba(160, 225, 247, 0.55);
  opacity: 0;
  z-index: 35;
}

.wgd .wg-gesture::after {
  content: '';
  position: absolute;
  inset: -0.6em;
  border-radius: 50%;
  border: 0.14em solid rgba(27, 27, 27, 0.4);
  opacity: 0;
}

.wgd .hero-demo.is-tapped .wg-gesture {
  animation: wg-swipe 1100ms var(--ease-in-out) forwards;
}

.wgd .hero-demo.is-tapped .wg-gesture::after {
  animation: wg-ripple 1100ms var(--ease-in-out) forwards;
}

/* Rises in from the bottom edge, presses, then carries the chat upwards */
@keyframes wg-swipe {
  0%   { opacity: 0; transform: translateY(1.4em) scale(0.7); }
  16%  { opacity: 1; transform: translateY(0) scale(1); }
  30%  { opacity: 1; transform: translateY(0) scale(0.8); }
  44%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8em) scale(0.92); }
}

@keyframes wg-ripple {
  0%, 26% { opacity: 0; transform: scale(0.6); }
  38%     { opacity: 0.75; transform: scale(1); }
  66%     { opacity: 0; transform: scale(1.8); }
  100%    { opacity: 0; transform: scale(1.8); }
}

/* At rest Webgentic is only the hairline at the very bottom of the screen.
   Opening the chat grows that line into the whole screen: edge to edge and up
   past the notch, so the client page is fully covered while it works */
.wgd .wg-sheet {
  position: absolute;
  /* Overscanned by a pixel on every side: the panel and the client page
     otherwise share an antialiased edge, and the page bleeds through it as a
     hairline rim. The screen clips the overscan away */
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 0;
  overflow: hidden;
  /* Frosted rather than solid, so the client page reads as shapes and colour
     behind the chat without any of its words competing with the conversation */
  background: rgba(11, 14, 19, 0.84);
  -webkit-backdrop-filter: blur(1.2em) saturate(130%);
  backdrop-filter: blur(1.2em) saturate(130%);
  /* A faint lit hairline and a darkening towards the edge, so the panel reads
     as a surface sitting over the page rather than a flat wash */
  box-shadow:
    inset 0 0 0 0.1em rgba(160, 225, 247, 0.1),
    inset 0 0 2em 0.7em rgba(4, 6, 10, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    height 900ms var(--ease-in-out),
    transform 700ms var(--ease-in-out),
    opacity 500ms var(--ease-in-out);
}

.wgd .wg-sheet.is-open {
  height: calc(100% + 2px);
}


.wgd .wg-messages {
  flex: 1;
  overflow: hidden;
  padding: 5.4em 1.6em 0.6em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4.4em, #000 6.6em);
  mask-image: linear-gradient(to bottom, transparent 4.4em, #000 6.6em);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1em;
  opacity: 0;
  transition: opacity 500ms var(--ease-in-out) 400ms;
}

.wgd .wg-sheet.is-open .wg-messages {
  opacity: 1;
}

.wgd .wg-msg {
  max-width: 88%;
  font-size: 1.15em;
  line-height: 1.45;
  padding: 0.8em 1em;
  border-radius: 1.1em;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 450ms var(--ease-in-out), transform 450ms var(--ease-in-out);
}

.wgd .wg-msg.is-in {
  opacity: 1;
  transform: none;
}

.wgd .wg-msg--user {
  align-self: flex-end;
  background: #1c2530;
  color: #e6f0f4;
  border-bottom-right-radius: 0.35em;
}

.wgd .wg-msg--agent {
  align-self: flex-start;
  background: transparent;
  color: #e6f0f4;
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.wgd .wg-who {
  font-size: 0.8em;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  margin-bottom: 0.6em;
}

.wgd .wg-step {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  padding: 0.4em 0;
  color: #8b98a1;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 400ms var(--ease-in-out), transform 400ms var(--ease-in-out);
}

.wgd .wg-step.is-in {
  opacity: 1;
  transform: none;
}

.wgd .wg-step__dot {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  flex: none;
  margin-top: 0.15em;
  border: 0.15em solid #2d3a44;
  position: relative;
}

.wgd .wg-step.is-doing,
.wgd .wg-step.is-done {
  color: #e6f0f4;
}

.wgd .wg-step.is-doing .wg-step__dot {
  border-color: var(--color-accent);
  border-top-color: transparent;
  animation: wg-spin 900ms linear infinite;
}

.wgd .wg-step.is-done .wg-step__dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.wgd .wg-step.is-done .wg-step__dot::after {
  content: '';
  position: absolute;
  left: 0.3em;
  top: 0.05em;
  width: 0.28em;
  height: 0.58em;
  border: solid var(--bg-dark);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.wgd .wg-step code {
  font-family: var(--font-mono);
  color: #a9c9d4;
  font-size: 0.92em;
}

@keyframes wg-spin {
  to { transform: rotate(360deg); }
}

.wgd .wg-step--final {
  font-weight: var(--weight-semibold);
  color: #e6f0f4;
  margin-top: 0.4em;
}

.wgd .wg-step--final .wg-step__dot {
  border-color: transparent;
  background: transparent;
}

/* Prompt bar */

.wgd .wg-barwrap {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 1em 1.8em;
  height: 7.2em;
}

.wgd .wg-bar {
  flex: 1;
  min-width: 0;
  height: 4.4em;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0 0.8em 0 1.1em;
  background: #0d1117;
  border: 0.1em solid #3a3f48;
  position: relative;
}

/* Rolling back is a change to the site, not to the text in the field, so it
   sits outside the pill. Kept smaller than the plus so the prompt gets the
   width instead */
.wgd .wg-undo {
  width: 2.6em;
  height: 2.6em;
  flex: none;
  display: grid;
  place-items: center;
  opacity: 0.85;
  color: #97a4ae;
}

.wgd .wg-undo svg {
  width: 1.9em;
  height: 1.9em;
  display: block;
}

.wgd .wg-input {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 1.7em;
  overflow: hidden;
  font-size: 1.05em;
}

.wgd .wg-input__ph,
.wgd .wg-input__line {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #e6f0f4;
}

.wgd .wg-input__ph {
  color: #9aa4ad;
}

.wgd .wg-input.is-typing .wg-input__ph {
  display: none;
}

.wgd .wg-caret {
  display: inline-block;
  width: 0.15em;
  height: 1.15em;
  background: var(--color-accent);
  margin-left: 0.1em;
  opacity: 0;
}

.wgd .wg-input.is-typing .wg-caret {
  opacity: 1;
  animation: wg-blink 1s steps(1) infinite;
}

@keyframes wg-blink {
  50% { opacity: 0; }
}

.wgd .wg-mic {
  width: 1.7em;
  height: 1.7em;
  flex: none;
  position: relative;
}

.wgd .wg-mic::before {
  content: '';
  position: absolute;
  left: 0.6em;
  top: 0.25em;
  width: 0.5em;
  height: 0.9em;
  border-radius: 0.35em;
  background: var(--color-accent);
}

.wgd .wg-mic::after {
  content: '';
  position: absolute;
  left: 0.425em;
  top: 0.7em;
  width: 0.85em;
  height: 0.75em;
  border: 0.16em solid var(--color-accent);
  border-top: none;
  border-radius: 0 0 0.7em 0.7em;
}

.wgd .wg-mic.is-send {
  background: var(--color-accent);
  border-radius: 50%;
}

.wgd .wg-mic.is-send::before,
.wgd .wg-mic.is-send::after {
  display: none;
}

/* Only two borders are drawn, so the ink sits toward the corner rather than
   the centre of the box: once rotated it lands 0.09em right of the circle's
   middle, and the nudge puts it back */
.wgd .wg-mic.is-send .wg-mic__arrow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.5em;
  height: 0.5em;
  border: solid var(--bg-dark);
  border-width: 0.17em 0.17em 0 0;
  transform: translateX(-0.09em) rotate(45deg);
}

.wgd .wg-mic.is-tap {
  animation: wg-tap 350ms var(--ease-in-out);
}

@keyframes wg-tap {
  50% { transform: scale(0.82); }
}

.wgd .wg-plus {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  color: var(--color-accent);
  font-size: 1.6em;
  font-weight: var(--weight-light);
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ================================
   LAYER 4: the confirmation pill
   ================================ */

.wgd .wg-pill {
  position: absolute;
  left: 50%;
  bottom: 2.8em;
  width: max-content;
  white-space: nowrap;
  transform: translate(-50%, 2.2em);
  background: #0e1116;
  color: #e6f0f4;
  font-size: 1.1em;
  font-weight: var(--weight-semibold);
  padding: 0.8em 1.2em 0.8em 0.9em;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.65em;
  box-shadow: 0 1em 2.4em rgba(0, 0, 0, 0.35), 0 0 0 0.1em #262c34;
  opacity: 0;
  transition: opacity 550ms var(--ease-in-out) 350ms, transform 550ms var(--ease-in-out) 350ms;
  z-index: 42;
}

.wgd .wg-pill.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wgd .wg-pill__dot {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  background: url('../img/favicon-96x96.png') center/contain no-repeat;
}

/* ================================
   SCREEN READER DESCRIPTION
   ================================ */

.wgd .wg-demo-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================
   THE EXAMPLE SWITCHER
   A dot for each example under the phone, with the name of the one playing
   underneath it. Names match the data-scene values in index.php.
   ================================ */

/* Room under the phone for the switcher */
.wgd .hero-visual {
  margin-bottom: 54px;
}

.wgd .hero-demo-nav {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
}

.wgd .hero-demo-nav__dots {
  display: flex;
  align-items: center;
  gap: 2px;
}

.wgd .hero-demo-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 11px 6px;
  min-width: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
}

.wgd .hero-demo-dot__mark {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(27, 27, 27, 0.3);
  transition: width 300ms var(--ease-in-out), background-color 300ms var(--ease-in-out);
}

.wgd .hero-demo-dot:hover .hero-demo-dot__mark {
  background: rgba(27, 27, 27, 0.5);
}

.wgd .hero-demo-dot.is-active .hero-demo-dot__mark {
  width: 34px;
  background: rgba(27, 27, 27, 0.22);
}

/* Fills across while the example plays, so it is clear when it moves on */
.wgd .hero-demo-dot.is-active .hero-demo-dot__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-text-body);
  transform: scaleX(0);
  transform-origin: left center;
  animation: wg-dot-fill var(--wg-scene-duration, 20s) linear forwards;
}

@keyframes wg-dot-fill {
  to { transform: scaleX(1); }
}

.wgd .hero-demo-dot:focus-visible {
  outline: 2px solid var(--color-text-body);
  outline-offset: 2px;
}

.wgd .hero-demo-nav__label {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
  .wgd .hero-demo {
    font-size: 9.2px;
  }
}

@media (max-width: 768px) {
  .wgd .hero-demo {
    font-size: 8.4px;
  }

  .wgd .hero-visual {
    height: 460px;
  }

  /* Phones, and phones in low power mode, get the same sequence with the
     costly parts removed: no idle float, no blurred glow, lighter shadows.
     Every step is still a class change, so the story plays even when the
     device refuses to animate anything at all. */
  .wgd .hero-demo {
    animation: none;
  }

  .wgd .wg-phone {
    box-shadow: 0 0 0 0.18em #2a2f38, 0 1.2em 2.4em rgba(0, 0, 0, 0.3);
  }

  .wgd .wg-pill {
    box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.3), 0 0 0 0.1em #262c34;
  }

  .wgd .wg-cover__headline {
    text-shadow: 0 0 0.5em rgba(160, 225, 247, 0.5);
  }
}

@media (max-width: 640px) {
  .wgd .hero-demo {
    font-size: 7px;
  }

  .wgd .hero-demo-nav__label {
    font-size: 0.8125rem;
  }

  .wgd .hero-visual {
    height: 400px;
  }

  /* The live phone is wider than the still image it replaced, so the platform
     logos move to the very edges to keep clear of the screen */
  .wgd .floating-logo {
    width: 56px;
    height: 56px;
  }

  .wgd .floating-logo--wordpress {
    left: 0;
    top: 6%;
  }

  .wgd .floating-logo--drupal {
    right: 0;
    top: 11%;
  }

  .wgd .floating-logo--magento {
    left: 0;
    bottom: 24%;
  }

  .wgd .floating-logo--shopify {
    right: 0;
    bottom: 20%;
  }
}

@media (max-width: 380px) {
  .wgd .hero-demo {
    font-size: 6.2px;
  }

  .wgd .hero-visual {
    height: 360px;
  }

  .wgd .floating-logo {
    width: 48px;
    height: 48px;
  }
}

/* ================================
   REDUCED MOTION
   The same sequence, with nothing that moves: each step arrives in place
   instead of sliding, growing or spinning.
   ================================ */

@media (prefers-reduced-motion: reduce) {
  .wgd .hero-demo {
    animation: none;
  }

  .wgd .hero-demo-dot.is-active .hero-demo-dot__mark::after {
    transform: scaleX(1);
  }

  .wgd .wg-screen,
.wgd .wg-site,
.wgd .wg-site--landing .wg-newpage,
.wgd .wg-site--landing .wg-newpage__list li,
.wgd .wg-site--seo .wg-seo__from,
.wgd .wg-site--seo .wg-chip,
.wgd .wg-site--seo .wg-seo__old,
.wgd .wg-site--seo .wg-seo__new,
.wgd .wg-site--seo .wg-serp,
.wgd .wg-site--form .wg-formcard,
.wgd .wg-site--form .wg-field,
.wgd .wg-site--form .wg-formcard__btn,
.wgd .hero-demo-dot__mark,
.wgd .wg-cover,
.wgd .wg-sheet,
.wgd .wg-msg,
.wgd .wg-step,
.wgd .wg-pill,
.wgd .wg-site__edited,
.wgd .wg-site__title .wg-old,
.wgd .wg-site__title .wg-new,
.wgd .wg-tag-old,
.wgd .wg-tag-new,
.wgd .wg-price-was,
.wgd .wg-price-now {
    transition: none;
  }

  .wgd .wg-site--sale.is-edited .wg-tile .wg-price-now {
    transition-delay: 0ms;
  }

  .wgd .wg-step.is-doing .wg-step__dot,
.wgd .wg-site.is-scanning .wg-ring,
.wgd .wg-site.is-scanning .wg-sweep,
.wgd .wg-site.is-settled .wg-ring,
.wgd .wg-site.is-scanning .wg-sk,
.wgd .wg-site--form.is-scanning .wg-formslot__hint,
.wgd .wg-site--form.is-settled .wg-formslot__hint,
.wgd .hero-demo-dot.is-active .hero-demo-dot__mark::after,
.wgd .hero-demo.is-tapped .wg-gesture,
.wgd .hero-demo.is-tapped .wg-gesture::after,
.wgd .wg-input.is-typing .wg-caret {
    animation: none;
  }

  /* Those two carry meaning, so they are shown rather than animated:
     a still press on the line, and a still outline on the changed headline */
  .wgd .hero-demo.is-tapped .wg-gesture {
    opacity: 1;
  }

  .wgd .wg-site.is-scanning .wg-ring,
.wgd .wg-site.is-settled .wg-ring,
.wgd .wg-site.is-scanning .wg-sk,
.wgd .wg-site--form.is-scanning .wg-formslot__hint {
    opacity: 1;
  }
}


/**
 * Webgentic - Hero Demo, desktop mode
 *
 * The same four examples as hero-demo.css, in a browser window instead of a
 * phone. Nothing here is a second copy of the examples: the markup is shared
 * and every rule in this file hangs off .hero-demo--desktop, so switching
 * modes is one class on the root.
 *
 * Sections, in order:
 *   1. The Phone / Desktop switch
 *   2. The browser window
 *   3. The chat, docked to the right
 *   4. Each example, laid out wide (sale, landing, seo, form)
 */

/* ================================
   1. THE PHONE / DESKTOP SWITCH
   Sits above the mockup, in the same neutrals as the dots below it
   ================================ */

/* The mockup used to sit high in its column and overhang the top. Centring
   it gives the switch above and the dots below clear space either side */
.wgd .hero-demo {
  top: 50%;
}

.wgd .hero-visual {
  margin-top: 78px;
  margin-bottom: 88px;
}

.wgd .hero-demo-nav {
  bottom: -80px;
}

/* The WordPress file carries a wide transparent margin of its own: its
   artwork fills only 83% of the file's width, where Drupal's fills all of
   it. Scaling the artwork inside its box cancels that out, so all four read
   the same size without any of the boxes changing size or position. */
.wgd .floating-logo--wordpress img {
  transform: scale(1.2);
}

/* The platform logos keep their places in both modes and slide between them
   when the switch is used, so the two views read as one thing rearranging */
.wgd .floating-logo {
  transition:
    top 550ms var(--ease-in-out),
    bottom 550ms var(--ease-in-out),
    left 550ms var(--ease-in-out),
    right 550ms var(--ease-in-out),
    width 550ms var(--ease-in-out),
    transform 550ms var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  .wgd .floating-logo {
    transition: none;
  }
}

.wgd .hero-demo-modes {
  position: absolute;
  left: 50%;
  top: -70px;
  transform: translateX(-50%);
  z-index: 12;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
}

.wgd .hero-demo-mode {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  transition:
    background-color 200ms var(--ease-in-out),
    color 200ms var(--ease-in-out);
}

.wgd .hero-demo-mode:hover {
  color: var(--color-text-body);
}

.wgd .hero-demo-mode.is-active {
  background: var(--color-text-body);
  color: #fff;
}

.wgd .hero-demo-mode:focus-visible {
  outline: 2px solid var(--color-text-body);
  outline-offset: 2px;
}

/* A browser window shrunk to phone width is unreadable, so below this the
   mockup stays on the phone and the switch is not offered */
@media (max-width: 768px) {
  .wgd .hero-visual {
    margin-top: 0;
    margin-bottom: 70px;
  }

  .wgd .hero-demo-modes {
    display: none;
  }

  .wgd .hero-demo-nav {
    bottom: -62px;
  }
}

/* On phones the headline sits right under the dots, so the space below the
   mockup is cut back to what the dots and their label actually need */
@media (max-width: 640px) {
  .wgd .hero-visual {
    margin-bottom: 56px;
  }
}

/* ================================
   2. THE BROWSER WINDOW
   Same screen, different frame: the phone furniture is swapped for browser
   chrome, and the whole mockup is re-proportioned from its master font-size
   ================================ */

/* The window is wider and shorter than the phone, so the column changes
   shape around it: the switch and the dots come inside the column, and the
   bands they leave at the top and bottom are where the logos sit.
   Kept close to the phone's overall height so switching does not jump the
   page about. */
.wgd .hero-visual:has(.hero-demo--desktop) {
  container-type: inline-size;
  height: 560px;
  margin-top: 40px;
  margin-bottom: 50px;
}

.wgd .hero-visual:has(.hero-demo--desktop) .hero-demo-modes {
  top: 30px;
}

.wgd .hero-visual:has(.hero-demo--desktop) .hero-demo-nav {
  bottom: 10px;
}

/* The window is sized from the width of its column rather than a fixed
   number, so it fills the space it is given at every screen size */
.wgd .hero-visual:has(.hero-demo--desktop) .hero-demo--desktop {
  font-size: clamp(6px, 1.52cqw, 9.8px);
}

/* Above and below the window, at its four corners.
   The gap is measured off the WINDOW, not off the composition behind it:
   they are given the same font-size the window is sized from, so 21em is
   half its height and the clearance holds at every screen size. The
   composition behind changes shape at the breakpoints and cannot be used
   as the reference. */
.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo {
  width: min(118px, 19%);
  font-size: clamp(6px, 1.52cqw, 9.8px);
  z-index: 11;
  /* The idle drift would carry them into the frame in these tighter bands */
  animation: none;
}

/* Each keeps the edge it was anchored to on the phone, so switching modes
   slides them rather than jumping them */
.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--wordpress,
.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--drupal {
  top: 50%;
  transform: translateY(-24em) translateY(-100%);
}

.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--magento,
.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--shopify {
  bottom: 50%;
  transform: translateY(24em) translateY(100%);
}

/* Lined up with the window's own edges rather than the column's, so they
   stay at its corners however wide the column around it happens to be */
.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--wordpress,
.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--magento {
  left: calc(50% - 32em);
}

.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--drupal,
.wgd .hero-visual:has(.hero-demo--desktop) .floating-logo--shopify {
  right: calc(50% - 32em);
}

/* Where the hero stacks into one column the composition is shallower, so
   the window and the logos both come down a size to keep their clearance */
@media (max-width: 1024px) {
  .wgd .hero-visual:has(.hero-demo--desktop) .hero-demo--desktop {
    font-size: clamp(6px, 1.52cqw, 7.2px);
  }

  .wgd .hero-visual:has(.hero-demo--desktop) .floating-logo {
    width: min(88px, 12%);
    font-size: clamp(6px, 1.52cqw, 7.2px);
  }
}

.wgd .hero-demo--desktop {
  top: 50%;
  width: 64em;
  height: 42em;
  font-size: 8.4px;
}

.wgd .hero-demo--desktop .wg-phone {
  border-width: 0.7em;
  border-radius: 1.5em;
}

.wgd .hero-demo--desktop .wg-screen,
.wgd .hero-demo--desktop .wg-site {
  border-radius: 0.9em;
}

/* Phone furniture */
.wgd .hero-demo--desktop .wg-notch,
.wgd .hero-demo--desktop .wg-status,
.wgd .hero-demo--desktop .wg-homebar,
.wgd .hero-demo--desktop .wg-gesture {
  display: none;
}

.wgd .wg-chrome,
.wgd .wg-cursor {
  display: none;
}

.wgd .hero-demo--desktop .wg-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.4em;
  height: 3.6em;
  padding: 0 1.4em;
  background: #e7e4df;
  border-bottom: 0.1em solid rgba(27, 27, 27, 0.14);
}

.wgd .wg-chrome__dots {
  display: flex;
  gap: 0.55em;
  flex: none;
}

.wgd .wg-chrome__dots span {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: rgba(27, 27, 27, 0.22);
}

.wgd .wg-chrome__bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 2.2em;
  padding: 0 1em;
  border-radius: var(--radius-full);
  background: #f7f5f2;
  font-size: 1.05em;
  color: var(--color-text-secondary);
}

/* A padlock, drawn rather than an icon font, so it scales with the mockup */
.wgd .wg-chrome__lock {
  position: relative;
  flex: none;
  width: 0.85em;
  height: 0.7em;
  margin-top: 0.25em;
  border-radius: 0.15em;
  background: var(--color-text-muted);
}

.wgd .wg-chrome__lock::before {
  content: '';
  position: absolute;
  left: 0.16em;
  bottom: 0.6em;
  width: 0.53em;
  height: 0.45em;
  border: 0.14em solid var(--color-text-muted);
  border-bottom: 0;
  border-radius: 0.3em 0.3em 0 0;
}

.wgd .wg-chrome__url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wgd .wg-chrome__path {
  color: var(--color-text-body);
  font-weight: var(--weight-semibold);
}

/* Each example is somewhere different on the same site */
.wgd .hero-demo[data-example='sale'] .wg-chrome__path::after,
.wgd .hero-demo[data-example='landing'] .wg-chrome__path::after { content: '/'; }
.wgd .hero-demo[data-example='seo'] .wg-chrome__path::after { content: '/mugs'; }
.wgd .hero-demo[data-example='form'] .wg-chrome__path::after { content: '/custom-orders'; }

/* The landing page example ends up somewhere that did not exist before */
.wgd .hero-demo[data-example='landing'].is-edited .wg-chrome__path::after {
  content: '/pottery-classes';
}

/* The page starts below the chrome rather than below a status bar */
.wgd .hero-demo--desktop .wg-site {
  padding-top: 3.6em;
}

/* The title card covers the whole window, chrome included */
.wgd .hero-demo--desktop .wg-cover {
  z-index: 44;
  border-radius: 0.9em;
}

.wgd .hero-demo--desktop .wg-cover__headline {
  font-size: 4em;
}

.wgd .hero-demo--desktop .wg-cover__wordmark img {
  width: 14em;
}

/* A desktop site shows its menu; the hamburger is for the phone */
.wgd .wg-site__links {
  display: none;
}

.wgd .hero-demo--desktop .wg-site__links {
  display: flex;
  gap: 1.8em;
  font-size: 1.15em;
  color: var(--color-text-secondary);
}

.wgd .hero-demo--desktop .wg-site__menu {
  display: none;
}

.wgd .hero-demo--desktop .wg-site__nav {
  padding: 1.2em 2.4em;
}

/* The mockup keeps its proportions on narrower columns */
/* Only reached if the browser cannot size the window from its column */
@media (max-width: 1200px) {
  .wgd .hero-demo--desktop {
    font-size: 7.6px;
  }
}

@media (max-width: 1024px) {
  .wgd .hero-demo--desktop {
    font-size: 6.8px;
  }
}

/* ================================
   3. THE CHAT, DOCKED TO THE RIGHT
   On the phone the chat grows up over the page. Here it comes in from the
   right edge and the page snaps in beside it, so the page stays readable and
   the change can be watched landing while the conversation is still open.
   ================================ */

/* At rest Webgentic is a lit strip down the right edge, not along the bottom */
.wgd .hero-demo--desktop .wg-halo {
  left: auto;
  right: 0;
  top: 3.6em;
  bottom: 0;
  width: 0.3em;
  height: auto;
  box-shadow:
    0 0 1.4em 0.15em rgba(160, 225, 247, 0.65),
    -0.3em 0 2.2em rgba(160, 225, 247, 0.35);
}

/* The pointer travels to that strip and clicks it */
.wgd .hero-demo--desktop .wg-cursor {
  display: block;
  position: absolute;
  right: 1.4em;
  top: 46%;
  z-index: 36;
  width: 1.7em;
  height: 2.1em;
  color: var(--color-text-body);
  opacity: 0;
}

.wgd .hero-demo--desktop .wg-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0.2em 0.4em rgba(0, 0, 0, 0.3));
}

.wgd .hero-demo--desktop.is-tapped .wg-cursor {
  animation: wg-point 1100ms var(--ease-in-out) forwards;
}

@keyframes wg-point {
  0%   { opacity: 0; transform: translate(-9em, 4em); }
  22%  { opacity: 1; transform: translate(-5em, 2.2em); }
  58%  { opacity: 1; transform: translate(0, 0) scale(1); }
  68%  { opacity: 1; transform: translate(0, 0) scale(0.82); }
  80%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* The panel comes in from the right, below the chrome, and is a fixed width
   so the conversation reads exactly as it does on the phone */
.wgd .hero-demo--desktop .wg-sheet {
  left: auto;
  right: -1px;
  top: 3.6em;
  bottom: -1px;
  width: 0;
  height: auto;
  border-radius: 0;
  transition:
    width 800ms var(--ease-in-out),
    opacity 500ms var(--ease-in-out);
}

.wgd .hero-demo--desktop .wg-sheet.is-open {
  width: 24em;
  height: auto;
}

/* The page is not covered, so it keeps its own edge and its light chrome */
.wgd .hero-demo--desktop:not(.is-light) .wg-site {
  box-shadow: none;
}

.wgd .hero-demo--desktop .wg-site {
  transition:
    transform 1.1s var(--ease-in-out),
    right 800ms var(--ease-in-out);
}

/* The page snaps in beside the panel rather than disappearing behind it */
.wgd .hero-demo--desktop.is-chat .wg-site {
  right: 24em;
}

/* No notch to clear, so the conversation starts nearer the top */
.wgd .hero-demo--desktop .wg-messages {
  padding: 1.8em 1.4em 0.6em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em);
}

.wgd .hero-demo--desktop .wg-barwrap {
  height: 6.2em;
  padding: 0 0.9em 1.4em;
}

/* The confirmation lands where a desktop notification would */
.wgd .hero-demo--desktop .wg-pill {
  left: auto;
  right: 2em;
  bottom: 2em;
  transform: translate(0, 2.2em);
}

.wgd .hero-demo--desktop .wg-pill.is-in {
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .wgd .hero-demo--desktop .wg-sheet,
.wgd .hero-demo--desktop .wg-site {
    transition: none;
  }

  .wgd .hero-demo--desktop.is-tapped .wg-cursor {
    animation: none;
    opacity: 1;
  }
}

/* ================================
   4a. EXAMPLE: sale, laid out wide
   ================================ */

.wgd .hero-demo--desktop .wg-site--sale .wg-site__hero {
  padding: 1.6em 2.4em 1em;
}

.wgd .hero-demo--desktop .wg-site--sale .wg-site__banner {
  height: 10em;
}

.wgd .hero-demo--desktop .wg-site--sale .wg-site__title {
  font-size: 2.4em;
}

.wgd .hero-demo--desktop .wg-site--sale .wg-site__copy {
  margin-top: 0.9em;
}

/* The banner is taller here, so the outline round the changed area reaches
   further back up over it: 0.9em of margin plus the 10em banner */
.wgd .hero-demo--desktop .wg-site--sale .wg-ring {
  top: -11.4em;
  height: 14.3em;
}

.wgd .hero-demo--desktop .wg-site__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2em;
  padding: 0.6em 2.4em 1.6em;
}

.wgd .hero-demo--desktop .wg-site__grid .wg-tile__img {
  height: 4.6em;
}

/* ================================
   4b. EXAMPLE: landing, laid out wide
   The address bar carries the new page's address, so the page does not
   need to state it a second time
   ================================ */

.wgd .hero-demo--desktop .wg-site--landing .wg-site__grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 34em;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage {
  top: 7.8em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 1.2em;
  padding: 2.2em 2.4em 1.4em;
  border-radius: 0 0 0.9em 0.9em;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__url,
.wgd .hero-demo--desktop .wg-site--landing .wg-sk--url {
  display: none;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-skeleton {
  padding: 2.2em 2.4em 0;
  border-radius: 0 0 0.9em 0.9em;
  gap: 1.2em;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-sk--banner { height: 9em; }
.wgd .hero-demo--desktop .wg-site--landing .wg-sk--row { height: 5em; }

.wgd .hero-demo--desktop .wg-site--landing .wg-ring {
  top: 0.6em;
  bottom: 0.6em;
  left: 0.6em;
  right: 0.6em;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__banner {
  height: 14em;
  margin: 0;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__body {
  padding: 0;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__title {
  font-size: 1.95em;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage .wg-site__cta {
  margin-top: 0.5em;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__list {
  margin-top: 0.7em;
  gap: 0.45em;
}

/* Runs full width under the two columns above it */
.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__more {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 0;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__thumbs .wg-tile__img {
  height: 4em;
}

.wgd .hero-demo--desktop .wg-site--landing .wg-newpage__more .wg-newpage__text {
  margin-top: 0.8em;
}

/* ================================
   4c. EXAMPLE: seo, laid out wide
   ================================ */

/* Two columns: the page down the left, the questions it answers to the right */
.wgd .hero-demo--desktop .wg-site--seo .wg-seo {
  padding: 1.8em 2.4em 1.6em;
  display: grid;
  grid-template-columns: minmax(0, 37em) minmax(0, 1fr);
  column-gap: 3em;
  align-items: start;
}

.wgd .hero-demo--desktop .wg-site--seo .wg-seo > * {
  grid-column: 1;
}

.wgd .hero-demo--desktop .wg-site--seo .wg-seo__faq {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: start;
  margin-top: 0.4em;
}

/* The panel takes the width the second column was using */
.wgd .hero-demo--desktop.is-chat .wg-site--seo .wg-seo {
  grid-template-columns: minmax(0, 1fr);
}

.wgd .hero-demo--desktop.is-chat .wg-site--seo .wg-seo__faq {
  display: none;
}

/* Two terms to a row, with the source line spanning both */
.wgd .hero-demo--desktop .wg-site--seo .wg-seo__terms {
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 0.7em;
}

.wgd .hero-demo--desktop .wg-site--seo .wg-seo__from {
  grid-column: 1 / -1;
}

.wgd .hero-demo--desktop .wg-site--seo.is-edited .wg-seo__terms {
  max-height: 9em;
  margin-bottom: 1.6em;
}

.wgd .hero-demo--desktop .wg-site--seo .wg-seo__title {
  font-size: 2.1em;
  height: 1.25em;
}

.wgd .hero-demo--desktop .wg-site--seo.is-edited .wg-seo__title {
  height: 2.5em;
}

/* Only the column being rewritten, not the questions beside it.
   The frame is a grid item here, so its offsets are measured from the
   column's own edges rather than from the page's padding: a positive left
   would push it INSIDE the text it is meant to be holding. */
.wgd .hero-demo--desktop .wg-site--seo .wg-ring {
  /* Both lines named. With only a start line the area runs to the container's
     own edge, so the frame reached past the questions beside it */
  grid-column: 1 / 2;
  top: 0.7em;
  left: -0.9em;
  right: -0.9em;
  width: auto;
  height: 15.2em;
}

/* Before the terms arrive there is only the headline and the line under it
   to read, so the frame holds just those two */
.wgd .hero-demo--desktop .wg-site--seo.is-scanning .wg-ring {
  height: 6.4em;
}

/* The page is narrower with the panel docked, so the frame comes in off
   its edge rather than running under the panel */
.wgd .hero-demo--desktop.is-chat .wg-site--seo .wg-ring {
  right: 0.6em;
}

.wgd .hero-demo--desktop .wg-site--seo .wg-seo__thumbs {
  max-width: 30em;
}

.wgd .hero-demo--desktop .wg-site--seo .wg-seo__thumbs .wg-tile__img {
  height: 3.6em;
}

/* Lines up under the questions in the right-hand column, so it covers
   nothing and the page reads left to right */
.wgd .hero-demo--desktop .wg-site--seo .wg-serp {
  left: auto;
  right: 2.4em;
  bottom: 2.4em;
  width: 21.5em;
}

.wgd .hero-demo--desktop .wg-site--seo .wg-serp::before,
.wgd .hero-demo--desktop .wg-site--seo .wg-serp::after {
  display: none;
}

/* Out of the way of the panel while the chat is open */
.wgd .hero-demo--desktop.is-chat .wg-site--seo .wg-serp {
  right: 1.6em;
  width: 22em;
}

/* ================================
   4d. EXAMPLE: form, laid out wide
   Copy on the left, and the space Webgentic picks out on the right
   ================================ */

.wgd .hero-demo--desktop .wg-site--form .wg-formpage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto 1fr;
  align-items: start;
  column-gap: 3em;
  row-gap: 0.7em;
  padding: 2.4em 2.4em 0;
}

.wgd .hero-demo--desktop .wg-site--form .wg-plain-title {
  grid-column: 1;
  font-size: 2.2em;
}

.wgd .hero-demo--desktop .wg-site--form .wg-site__text,
.wgd .hero-demo--desktop .wg-site--form .wg-formpage__list,
.wgd .hero-demo--desktop .wg-site--form .wg-formpage__note,
.wgd .hero-demo--desktop .wg-site--form .wg-formpage__where {
  grid-column: 1;
}

.wgd .hero-demo--desktop .wg-site--form .wg-formpage__where {
  display: block;
}

.wgd .hero-demo--desktop .wg-site--form .wg-formslot {
  grid-column: 2;
  grid-row: 1 / span 5;
  margin-top: 0;
  min-height: 26em;
}

/* ================================
   5. THE PAGE, WITH THE CHAT OPEN
   The page is narrower while the panel is docked, so it reflows the way a
   real responsive page would. It also keeps the part being changed on
   screen, which is the whole point of not covering the page up.
   ================================ */

.wgd .hero-demo--desktop.is-chat .wg-site--sale .wg-site__banner {
  height: 8em;
}

.wgd .hero-demo--desktop.is-chat .wg-site--sale .wg-site__title {
  font-size: 2em;
}

.wgd .hero-demo--desktop.is-chat .wg-site--sale .wg-ring {
  top: -9.4em;
  height: 12.3em;
}

.wgd .hero-demo--desktop.is-chat .wg-site__grid .wg-tile__img {
  height: 4em;
}

.wgd .hero-demo--desktop.is-chat .wg-site__grid .wg-tile__name {
  font-size: 0.95em;
}

.wgd .hero-demo--desktop.is-chat .wg-site--landing .wg-newpage__banner {
  height: 13em;
}

/* With the panel docked the page is a third narrower, so the form keeps the
   larger share and the copy beside it is set a little tighter */
.wgd .hero-demo--desktop.is-chat .wg-site--form .wg-formpage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: 2em;
  padding-left: 2em;
  padding-right: 2em;
}

.wgd .hero-demo--desktop.is-chat .wg-site--form .wg-plain-title {
  font-size: 1.8em;
}

.wgd .hero-demo--desktop.is-chat .wg-site--form .wg-site__text,
.wgd .hero-demo--desktop.is-chat .wg-site--form .wg-formpage__list,
.wgd .hero-demo--desktop.is-chat .wg-site--form .wg-formpage__note {
  font-size: 1em;
}

.wgd .hero-demo--desktop.is-chat .wg-site--form .wg-formpage__where {
  display: none;
}

.wgd .hero-demo--desktop.is-chat .wg-site--form .wg-formslot {
  min-height: 24em;
}


/* =====================================================================
   V6 HOST: everything below is new. The demo is sized from its column
   (container query units) instead of the old hero's fixed composition.
   ===================================================================== */
.wgd{
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Satoshi','Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg-dark:#0a0d14; --color-accent:#A0E1F7;
  --color-text-body:#1B1B1B; --color-text-secondary:rgba(27,27,27,.8); --color-text-muted:rgba(27,27,27,.7);
  --weight-light:300; --weight-semibold:600; --weight-bold:700;
  --radius-full:9999px; --shadow-card:0 2px 8px rgba(0,0,0,.06);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  container-type:inline-size; position:relative; width:100%; margin:0 auto
}
.wgd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.wgd-box{position:relative;width:100%}
.wgd .hero-demo{position:relative;top:auto;left:auto;transform:none;animation:none;z-index:auto;margin:0 auto}
/* Phone: 27em x 51.5em, sized from the column, never larger than 11px a unit */
.wgd .hero-demo{font-size:min(11px,calc(100cqw / 27.4))}
/* Browser window: 64em x 42em, fills the column */
.wgd .hero-demo.hero-demo--desktop{font-size:min(12.4px,calc(100cqw / 64.4))}
/* The phone's corners: the frame is the only thing painted, so nothing square shows behind it */
.wgd .wg-phone{background:#0e1116;background-clip:padding-box;-webkit-mask-image:-webkit-radial-gradient(white,black)}

/* Controls under the demo: pause, then the four examples. The playing one fills across. */
.wgd-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:18px}
.wgd-pause,.wgd-scene{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0;padding:0 14px;
  border:1px solid rgba(27,27,27,.14);border-radius:999px;background:rgba(255,255,255,.62);color:rgba(27,27,27,.78);
  font:600 13px/1 var(--font-body);cursor:pointer;position:relative;overflow:hidden;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.wgd-pause svg{width:12px;height:12px;fill:currentColor}
.wgd-pause:hover,.wgd-scene:hover{color:#1B1B1B;border-color:rgba(27,27,27,.28)}
.wgd-scene.is-active{background:#1B1B1B;border-color:#1B1B1B;color:#fff}
.wgd-scene>span{position:relative;z-index:1}
.wgd-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#A0E1F7;transform:scaleX(0);transform-origin:left center}
.wgd-scene.is-filling::after{animation:wgd-fill var(--wgd-scene-ms,22000ms) linear forwards}
.wgd.is-paused .wgd-scene::after{animation-play-state:paused}
@keyframes wgd-fill{to{transform:scaleX(1)}}
.wgd-pause:focus-visible,.wgd-scene:focus-visible{outline:2px solid #1B1B1B;outline-offset:2px}
.wgd--dark .wgd-pause,.wgd--dark .wgd-scene{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.8)}
.wgd--dark .wgd-scene.is-active{background:#fff;color:#0a0d14;border-color:#fff}
@media (prefers-reduced-motion:reduce){.wgd-scene.is-filling::after{animation:none;transform:scaleX(1)}}