/* About — flat Figma translation.
   The entire page is assets/pages/about.jpg; overlays sit in % coords.
   Artboard width = 1440. Assumed height ≈ 1700 (form ends at y=1638).
   If Grace's export height differs, edit the --ab-h var below. */

.flat--about {
  --ab-w: 1440;
  --ab-h: 1700;  /* tweak to match the actual export height */
  background: var(--surface);
}

/* ---- Form overlay ----
   Figma form block: x=548..1334 (width 786), y=1216..1638 (height 422) */
.flat__form--about {
  /* % of image container */
  left:   calc(548 / var(--ab-w) * 100%);
  top:    calc(1244 / var(--ab-h) * 100%);
  width:  calc(786 / var(--ab-w) * 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: calc(76 / var(--ab-w) * 100%);
  row-gap: calc(20 / var(--ab-h) * 100%);
  grid-template-areas:
    "name email"
    "note note";
}

.flat__form-field--name  { grid-area: name; }
.flat__form-field--email { grid-area: email; }
.flat__form-field--note  { grid-area: note;  }

.flat__form-field--name,
.flat__form-field--email {
  font-size: clamp(13px, 1.18vw, 17px);
  line-height: 1.25;
  padding: 8px 0 4px;
  /* The field label + underline are baked into the image; input sits just above it */
}

.flat__form-field--note {
  font-size: clamp(13px, 1.18vw, 17px);
  line-height: 1.47;
  min-height: calc(160 / var(--ab-h) * 100% * 10); /* rough proportional min-height */
  min-height: 10em;
  padding: 8px 14px;
}

/* ---- SEND button overlay ----
   Figma: x=1178, y=1564, w=153, h=74 */
.flat__form-submit--send {
  left:   calc(1178 / var(--ab-w) * 100%);
  top:    calc(1564 / var(--ab-h) * 100%);
  width:  calc(153  / var(--ab-w) * 100%);
  height: calc(74   / var(--ab-h) * 100%);
}

/* ---- Hint line (invisible unless form submit triggers it) ---- */
.flat__form-hint--about {
  left: calc(548 / var(--ab-w) * 100%);
  top:  calc(1660 / var(--ab-h) * 100%);
}

/* ---- Mobile: image still shows the original layout scaled down;
   keep the form overlay positions so they scale proportionally.
   No separate mobile layout needed — the whole page is an image. ---- */