/* ==========================================================================
   "Watch AI build your homepage": the live demo in the "Try it" section.
   Form, five steps, and the generated concept inside a browser window.
   The form and steps use the page tokens (so they follow the chameleon).
   The concept uses its own --c-* colours, set from the generated palette.
   ========================================================================== */

.tryit__demo { margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 768px) {
  .tryit__demo { padding: clamp(24px, 3vw, 44px); border: 1px solid var(--line-c); border-radius: var(--radius); }
}

/* ---------- form ---------- */
.hd-form { display: grid; gap: 22px; max-width: 780px; }
.hd-other { margin-top: 6px; max-width: 480px; }
.hd-field, .hd-group { display: grid; gap: 10px; }
.hd-field label, .hd-group legend { padding: 0; font-size: .9375rem; font-weight: 600; }
.hd-group legend { float: left; width: 100%; margin-bottom: 10px; }
.hd-group legend + * { clear: both; }
.hd-optional { margin-inline-start: 6px; font-weight: 400; color: var(--muted); }
.hd-field input {
  width: 100%; height: 54px; padding: 0 16px;
  border: 1px solid var(--line-c); border-radius: 12px;
  background: transparent; color: var(--fg);
  font-size: 1.0625rem; /* 16px or more keeps iOS from zooming in on focus */
}
.hd-field input::placeholder { color: var(--muted); opacity: .8; }
.hd-field input:focus-visible { outline-offset: 0; border-color: var(--fg); border-radius: 12px; }
.hd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-chip { position: relative; display: block; }
.hd-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hd-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-c); border-radius: 999px;
  font-size: .9375rem; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: transform .2s var(--ease-out);
}
.hd-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.hd-chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.hd-chip input:active + span { transform: scale(.96); }
@media (hover: hover) {
  .hd-chip input:not(:checked):hover + span { border-color: var(--fg); }
}
.hd-chip--ar span { font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', Tahoma, var(--font); font-size: 1rem; }
.hd-row { display: grid; gap: 22px; }
@media (min-width: 768px) {
  .hd-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hd-form .btn { justify-self: start; }
/* The honeypot: off screen for people, still a normal field for a bot. */
.hd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hd-privacy { font-size: .875rem; color: var(--muted); max-width: 60ch; }

.hd-error {
  margin-top: 20px; padding: 12px 16px; border: 1px solid var(--fg); border-radius: 12px;
  font-size: .9375rem; font-weight: 500; max-width: 780px;
}
/* A sample run is announced in the accent colours, above the steps, so it cannot be missed. */
.hd-notice {
  margin-top: 24px; padding: 14px 18px; border-radius: 12px;
  background: var(--accent); color: var(--on-accent);
  font-size: .9375rem; line-height: 1.45; max-width: 780px;
}
.hd-notice b { font-weight: 700; }
.hd-notice__about { display: block; margin-top: 6px; }
.hd-notice q { font-style: italic; }
.hd-status { min-height: 1.5em; margin-top: 20px; font-size: .875rem; color: var(--muted); }

/* ---------- five steps ---------- */
.hd-steps { display: grid; margin-top: 8px; border-top: 1px solid var(--line-c); }
.hd-step { display: grid; gap: 6px; align-content: start; padding: 14px 0; border-bottom: 1px solid var(--line-c); }
.hd-step__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.hd-step__n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-c);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hd-step__label { font-weight: 600; }
.hd-step__time { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.hd-step__line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding-inline-start: 36px; font-size: .9375rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere;
}
.hd-step__line:empty { display: none; }
/* While the steps are stacked (phones), every step keeps room for a two-line result from the
   start. Nothing below then moves as results come in, which matters when the page scrolls to
   the browser window as the Build step starts. */
@media (max-width: 959px) {
  .hd-step__line, .hd-step__line:empty { display: flex; min-height: 2.8em; }
}
/* A result line in Arabic (the headline, in step 4) gets an Arabic face and a little more size. */
.hd-step__line .is-ar { font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', Tahoma, var(--font); font-size: 1.0625em; line-height: 1.6; }
.hd-step[data-state='waiting'] .hd-step__label { color: var(--muted); }
.hd-step[data-state='running'] .hd-step__n { border-color: var(--fg); }
.hd-step[data-state='done'] .hd-step__n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hd-dots { display: inline-flex; gap: 4px; }
.hd-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-c); }
@media (min-width: 960px) {
  .hd-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; border-top: 0; }
  .hd-step { padding: 14px; border: 1px solid var(--line-c); border-radius: 12px; }
  .hd-step[data-state='running'], .hd-step[data-state='done'] { border-color: var(--muted); }
  .hd-step__line { padding-inline-start: 0; font-size: .875rem; }
}

/* ---------- result ---------- */
.hd-result { margin-top: 28px; }
.hd-window { transform-origin: 50% 0; }
.hd-screen { display: block; }
.hd-after { display: grid; gap: 16px; margin-top: 20px; }
/* On a phone the empty window is shown, and scrolled to, as the Build step starts, so the
   visitor is looking at it when the homepage unfolds inside (js/homepage-demo.js). */
.hd-result.is-pending .hd-screen { min-height: 62svh; }
.hd-result.is-pending .hd-after { display: none; }
.hd-caption { font-size: .9375rem; color: var(--muted); }
.hd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hd-again {
  min-height: 52px; padding: 0 22px;
  border: 1px solid var(--fg); border-radius: 999px; background: transparent; color: var(--fg);
  font-weight: 600; white-space: nowrap;
  transition: transform .25s var(--ease-out);
}
.hd-again:active { transform: scale(.97); }
@media (min-width: 768px) {
  .hd-after { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ---------- the concept ---------- */
.concept {
  container-type: inline-size;
  background: var(--c-bg); color: var(--c-fg);
  font-family: var(--c-body), var(--font); font-size: 15px; line-height: 1.5; text-align: start;
}
.concept[lang='ar'] { line-height: 1.75; }
/* :where() keeps this reset at zero weight, so the spacing rules below are not overridden by it. */
.concept :where(p, ul, ol) { margin: 0; padding: 0; list-style: none; }
.concept b { font-weight: 600; }
.concept i { font-style: normal; }

.concept__nav { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--c-line); }
.concept__brand {
  margin-inline-end: auto; min-width: 0;
  font-family: var(--c-display), var(--c-body), var(--font); font-weight: var(--c-display-weight);
  font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere;
}
.concept__links { display: none; gap: 20px; font-size: .8125rem; color: var(--c-muted); white-space: nowrap; }
.concept__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--c-accent); color: var(--c-on-accent);
  font-weight: 600; font-size: .9375rem; line-height: 1.2; white-space: nowrap;
}
.concept__btn--small { min-height: 34px; padding: 0 14px; font-size: .8125rem; }

.concept__hero { display: grid; gap: 24px; padding: 28px 18px 32px; }
.concept__headline {
  font-family: var(--c-display), var(--c-body), var(--font); font-weight: var(--c-display-weight);
  font-size: clamp(2rem, 9.5cqi, 4.25rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance;
}
/* Arabic: more line height for the marks above and below the letters, and never letter-spacing. */
.concept[lang='ar'] .concept__headline { line-height: 1.32; letter-spacing: 0; }
.concept__sub { margin-top: clamp(16px, 3.2cqi, 26px); max-width: 46ch; font-size: clamp(1rem, 2.5cqi, 1.1875rem); color: var(--c-muted); }
/* Arabic display faces sit lower on the line and hang further below it, so the supporting line
   needs more room under an Arabic headline. This applies to all four layouts. */
.concept[lang='ar'] .concept__sub { margin-top: clamp(30px, 7.5cqi, 52px); }
.concept__hero-text .concept__btn { margin-top: 22px; }
.concept[lang='ar'] .concept__hero-text .concept__btn { margin-top: 26px; }
.concept__art { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--c-surface); }
.concept__pattern { display: block; width: 100%; height: 100%; }
.concept__pattern .p0 { fill: var(--c-bg); }
.concept__pattern .p1 { fill: var(--c-accent); }
.concept__pattern .p2 { fill: color-mix(in srgb, var(--c-fg) 82%, var(--c-bg)); }
.concept__pattern .p3 { fill: color-mix(in srgb, var(--c-accent) 34%, var(--c-bg)); }
.concept__pattern .ring { fill: none; stroke-width: 13; }
.concept__pattern .ring.p1 { stroke: var(--c-accent); }
.concept__pattern .ring.p2 { stroke: color-mix(in srgb, var(--c-fg) 82%, var(--c-bg)); }
.concept__pattern .ring.p3 { stroke: color-mix(in srgb, var(--c-accent) 34%, var(--c-bg)); }

.concept__label { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); }
.concept[lang='ar'] .concept__label { font-size: .875rem; letter-spacing: 0; }
.concept__benefits, .concept__services { padding: 4px 18px 32px; }
.concept__benefits ul, .concept__services ol { display: grid; gap: 18px; margin-top: 16px; }
.concept__benefits li, .concept__services li { display: grid; gap: 4px; align-content: start; }
.concept__benefits b, .concept__services b { font-size: 1.0625rem; line-height: 1.3; }
.concept__benefits span, .concept__services span { color: var(--c-muted); }
.concept__services i { font-size: .75rem; font-weight: 700; color: var(--c-accent); font-variant-numeric: tabular-nums; }

.concept__closing {
  display: grid; gap: 18px; justify-items: start; padding: 32px 18px 36px;
  background: var(--c-accent); color: var(--c-on-accent);
}
.concept__closing p {
  font-family: var(--c-display), var(--c-body), var(--font); font-weight: var(--c-display-weight);
  font-size: clamp(1.5rem, 6cqi, 2.5rem); line-height: 1.15;
}
.concept[lang='ar'] .concept__closing p { line-height: 1.4; }
.concept__closing .concept__btn { background: var(--c-on-accent); color: var(--c-accent); }

@container (min-width: 620px) {
  .concept__nav { padding: 16px 36px; }
  .concept__links { display: flex; }
  .concept__hero { padding: 48px 36px 52px; gap: 36px; }
  .concept__benefits, .concept__services { padding: 8px 36px 48px; }
  .concept__benefits ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .concept__services ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
  .concept__closing { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 40px 36px; }
}

/* Layout 1, split: words on one side, the pattern on the other. */
@container (min-width: 620px) {
  .concept[data-template='split'] .concept__hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
  .concept[data-template='split'] .concept__art { aspect-ratio: 1; }
}

/* Layout 2, poster: one loud centred headline on the accent colour, the pattern at the edges. */
.concept[data-template='poster'] .concept__hero {
  position: relative; overflow: hidden; justify-items: center; text-align: center;
  padding-block: 60px 64px; background: var(--c-accent); color: var(--c-on-accent);
}
.concept[data-template='poster'] .concept__hero-text { position: relative; z-index: 1; display: grid; justify-items: center; }
.concept[data-template='poster'] .concept__headline { font-size: clamp(2.3rem, 11.5cqi, 5.5rem); max-width: 14ch; }
.concept[data-template='poster'] .concept__sub { color: inherit; }
.concept[data-template='poster'] .concept__hero-text .concept__btn { background: var(--c-on-accent); color: var(--c-accent); }
.concept[data-template='poster'] .concept__art {
  position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; opacity: .2;
  /* The pattern fades out behind the words so they stay readable. */
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 58%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 58%, #000 100%);
}
.concept[data-template='poster'] .concept__pattern [class] { fill: var(--c-on-accent); }
.concept[data-template='poster'] .concept__pattern .ring { fill: none; stroke: var(--c-on-accent); }
.concept[data-template='poster'] .concept__benefits { padding-top: 36px; }
.concept[data-template='poster'] .concept__closing { background: var(--c-surface); color: var(--c-fg); }
.concept[data-template='poster'] .concept__closing .concept__btn { background: var(--c-accent); color: var(--c-on-accent); }
@container (min-width: 620px) {
  .concept[data-template='poster'] .concept__hero { padding-block: 96px 100px; }
}

/* Layout 3, editorial: a tall headline, a thin band of pattern, services as a numbered list. */
.concept[data-template='editorial'] .concept__hero { gap: 28px; padding-bottom: 28px; }
.concept[data-template='editorial'] .concept__headline { font-size: clamp(2.3rem, 11cqi, 5.75rem); max-width: 16ch; }
.concept[data-template='editorial'] .concept__art { aspect-ratio: auto; height: clamp(72px, 15cqi, 150px); border-radius: 0; margin-inline: -18px; }
.concept[data-template='editorial'] .concept__benefits ul { gap: 0; }
.concept[data-template='editorial'] .concept__benefits li { padding: 16px 0; border-top: 1px solid var(--c-line); }
.concept[data-template='editorial'] .concept__services ol { grid-template-columns: 1fr; gap: 0; }
.concept[data-template='editorial'] .concept__services li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; padding: 16px 0; border-top: 1px solid var(--c-line); }
.concept[data-template='editorial'] .concept__services li span { grid-column: 2; }
@container (min-width: 620px) {
  .concept[data-template='editorial'] .concept__art { margin-inline: -36px; }
  .concept[data-template='editorial'] .concept__benefits ul { gap: 28px; }
  .concept[data-template='editorial'] .concept__benefits li { border-top: 2px solid var(--c-fg); }
  .concept[data-template='editorial'] .concept__services li { grid-template-columns: 56px minmax(0, .7fr) minmax(0, 1.6fr); align-items: baseline; }
  .concept[data-template='editorial'] .concept__services li span { grid-column: auto; }
}

/* Layout 4, cards: a compact hero, then everything in rounded cards. */
.concept[data-template='cards'] .concept__art { aspect-ratio: 16 / 9; }
.concept[data-template='cards'] .concept__benefits ul, .concept[data-template='cards'] .concept__services ol { gap: 12px; }
.concept[data-template='cards'] .concept__benefits li, .concept[data-template='cards'] .concept__services li {
  padding: 18px; border-radius: 18px; background: var(--c-surface);
}
.concept[data-template='cards'] .concept__services i {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 50%;
  background: var(--c-accent); color: var(--c-on-accent);
}
.concept[data-template='cards'] .concept__closing { margin: 0 18px 18px; border-radius: 18px; }
@container (min-width: 620px) {
  .concept[data-template='cards'] .concept__hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
  .concept[data-template='cards'] .concept__art { aspect-ratio: 1; border-radius: 28px; }
  .concept[data-template='cards'] .concept__benefits ul, .concept[data-template='cards'] .concept__services ol { gap: 16px; }
  .concept[data-template='cards'] .concept__benefits li, .concept[data-template='cards'] .concept__services li { padding: 24px; }
  .concept[data-template='cards'] .concept__closing { margin: 0 36px 36px; }
}

/* ---------- motion: only for visitors who have not asked for less of it ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hd-step[data-state='running'] .hd-step__n { animation: hd-pulse .9s ease-in-out infinite alternate; }
  .hd-step__line > * { animation: hd-rise .4s var(--ease-out) both; }
  .hd-window.is-in { animation: hd-unfold .7s var(--ease-out) both; }
  .hd-window.is-in .concept > * { animation: hd-rise .65s var(--ease-out) both; animation-delay: calc(.2s + var(--i, 0) * .1s); }
  .hd-window.is-in .concept__art { animation: hd-art .9s var(--ease-out) both; animation-delay: .35s; }
  @keyframes hd-pulse { to { opacity: .35; } }
  @keyframes hd-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes hd-unfold { from { opacity: 0; transform: translateY(28px) scale(.965); } }
  @keyframes hd-art { from { opacity: 0; transform: scale(.94); } }
}
@media (prefers-reduced-motion: reduce) {
  .hd-chip span, .hd-again { transition: none; }
}