/* AI page (/ai): hand-written 7 Nov 2026 (note 035). Not from the Wix capture.
   Type and colours follow the About page (studio.css): Work Sans headings,
   Azeret Mono body, cream and black, yellow accents. Widths in vw between
   1024 and 1440 like the rest of the site; one column at 750 px and below. */
.ai-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--cream);
  color: var(--black);
}
.ai-main section > .c {
  width: min(100% - 9vw, 1240px);
  margin: 0 auto;
}
:where(.ai-main) h1 { font: 400 14px/1.3 var(--sans); margin: 0 0 28px; }
:where(.ai-main) h2 { font: 400 clamp(30px, 3.125vw, 45px)/1 var(--sans); letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 40px; max-width: 18ch; }
:where(.ai-main) h3 { font: 700 14px/1.3 var(--sans); margin: 0 0 24px; }
:where(.ai-main) p, :where(.ai-main) li { font: 12px/1.6 var(--mono); letter-spacing: 0.05em; margin: 0; }
:where(.ai-main) p + p { margin-top: 1.2em; }

.ai-hero > .c {
  padding-top: calc(60px + 4vw);
  padding-bottom: calc(40px + 3vw);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 6vw;
  align-items: start;
}
.ai-hero p { max-width: 62ch; }

/* ---------- Images (7 Nov 2026) ----------
   The phone is a finished photograph: rounded like the service cards (22.5px)
   with a soft shadow. The browser shot sits in a drawn window frame: a black
   title bar with three dots, straight on, no tilt. All framing lives here,
   because the CSP forbids inline styles. */
.ai-fig { margin: 0; }
.ai-fig picture, .ai-fig img { display: block; width: 100%; height: auto; }
.ai-fig figcaption { font: 12px/1.6 var(--mono); letter-spacing: 0.05em; margin-top: 14px; color: rgba(0, 0, 0, 0.7); }
.ai-fig-phone { justify-self: end; width: min(100%, 420px); margin-top: 8px; }
.ai-fig-phone img { border-radius: 22.5px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }
.ai-fig-browser { margin-top: calc(40px + 2vw); max-width: 880px; }
.ai-browser {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  background: var(--black);
  padding-top: 28px;
  position: relative;
}
.ai-browser::before {
  content: "";
  position: absolute;
  top: 9.5px;
  left: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
}

.ai-know { background: var(--black); color: var(--ink-cream); }
.ai-know > .c { padding-top: calc(40px + 3vw); padding-bottom: calc(40px + 3vw); }
.ai-know p { max-width: 62ch; }

.ai-build > .c, .ai-how > .c { padding-top: calc(40px + 3vw); padding-bottom: calc(40px + 3vw); }
.ai-how { background: var(--yellow); }

.ai-main ul { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.ai-main li { padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, 0.25); }
.ai-main li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.25); }

.ai-contact { margin-top: 40px; }
.ai-contact a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 750px) {
  .ai-main section > .c { width: calc(100% - 40px); }
  .ai-hero > .c { padding-top: 60px; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .ai-fig-phone { justify-self: start; width: 100%; margin-top: 0; }
  :where(.ai-main) h2 { max-width: none; }
}