/* Awyro partner one-pager — A4 (595 x 842 pt), rebuilt from Figma "DreamRoute".
   All geometry is in pt, matching the Figma frame coordinates 1:1, so the printed
   PDF is a true A4 page. */

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: block;
}

:root {
  --navy:   #050432;
  --purple: #472AA9;
  --ink:    #000000;
  --card:   #F7F5FF;  /* v11 / v12 */
}
.v10 { --card: #F9F7FC; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: #e8e6ef;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  width: 595.28pt;
  height: 841.89pt;
  overflow: hidden;
  background: #fff;
  margin: 24px auto;
  box-shadow: 0 6px 28px rgba(5, 4, 50, .22);
  /* keep the navy/purple fills when printing */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; }
  .page { margin: 0; box-shadow: none; }
}

/* The 20 x 2 pt purple accent bar used throughout. */
.rule {
  position: absolute;
  width: 20pt;
  height: 2pt;
  background: var(--purple);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.hdr {
  position: absolute;
  left: 0; top: 0;
  width: 595.28pt;
  background: var(--navy);
  overflow: hidden;          /* clips the circle into the signature arc */
}
.v10 .hdr { height: 294pt; }
.v11 .hdr, .v12 .hdr { height: 262pt; }

/* The curved edge is a 650pt circle holding the photo, not a custom shape.
   Fill and ring are separate so the ring sits on top of the clipped photo,
   exactly as the Figma stroke does. */
.hero, .hero-ring {
  position: absolute;
  left: 239pt; top: -178pt;
  width: 650pt; height: 650pt;
  border-radius: 50%;
}
.hero { overflow: hidden; background: #fff; }
.hero-ring { border: 3pt solid var(--purple); }

.hero img {
  position: absolute;
  width: 610pt; height: 305pt;
  object-fit: cover;
}
.v10 .hero img { left: -135pt; top: 172pt; }
.v11 .hero img, .v12 .hero img { left: -140pt; top: 161pt; }

.logo {
  position: absolute;
  left: 31pt;
  width: 110pt; height: 92pt;
}
.v10 .logo { top: 32pt; }
.v11 .logo, .v12 .logo { top: 29pt; }

.hdr .rule { left: 31pt; }
.v10 .hdr .rule { top: 153pt; }
.v11 .hdr .rule, .v12 .hdr .rule { top: 146pt; }

.about-h {
  position: absolute;
  left: 31pt;
  font-size: 15pt;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.v10 .about-h { top: 162pt; }
.v11 .about-h, .v12 .about-h { top: 156pt; }

.about-p {
  position: absolute;
  left: 31pt;
  width: 191pt;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  white-space: pre-line;     /* preserves the blank line in the v10 copy */
}
.v10 .about-p { top: 182pt; }
.v11 .about-p, .v12 .about-p { top: 181pt; }

/* ── Body ───────────────────────────────────────────────────────────────── */

.body { position: absolute; left: 0; width: 595.28pt; }
.v10 .body { top: 294pt; height: 438pt; }
.v11 .body, .v12 .body { top: 262pt; height: 470pt; }

.sec-h {
  position: absolute;
  font-size: 15pt;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* The ">" between cards is a literal glyph in the design, not an icon. */
.chev {
  position: absolute;
  font-size: 30pt;
  font-weight: 400;
  line-height: 1.3;
  color: var(--purple);
}

.card {
  position: absolute;
  background: var(--card);
  border-radius: 5pt;
  overflow: hidden;
}

/* ── Shared table ───────────────────────────────────────────────────────── */

.tbl {
  position: absolute;
  background: var(--card);
  border-radius: 5pt;
  overflow: hidden;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}
.tbl thead th {
  height: 30pt;
  background: var(--navy);
  color: #fff;
  font-size: 12pt;
  font-weight: 600;
  vertical-align: middle;
}
/* Dividers are 1pt white hairlines on the lilac fill. */
.tbl thead th,
.tbl tbody td { padding: 0 8pt 0 16pt; }
.tbl tbody td { padding-top: 8pt; padding-bottom: 9pt; vertical-align: top; border-bottom: 1pt solid #fff; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td + td, .tbl th + th { border-left: 1pt solid #fff; padding-left: 17pt; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.ftr {
  position: absolute;
  left: 0; top: 732pt;
  width: 595.28pt; height: 110pt;
  background: var(--navy);
  overflow: hidden;          /* the map bleeds past the top edge and is clipped */
}
.ftr .map {
  position: absolute;
  left: 345pt; top: -21pt;
  width: 250pt; height: 167pt;
}
.ftr h2 {
  position: absolute;
  left: 28pt;
  font-size: 14pt;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.ftr p {
  position: absolute;
  left: 28pt;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

/* Footer geometry — shared by all three variants. */
.ftr h2      { top: 16pt; }
.ftr .rule   { left: 28pt; top: 39pt; }
.ftr .f-lede { top: 49pt; width: 298pt; }
.ftr .f-mail { top: 80pt; }

/* ── v10: PLATFORM (3 cards) + PARTNERS (4-row table) ───────────────────── */

.v10 .sec-h.platform  { left: 259pt; top: 12pt; }
.v10 .rule.r-platform { left: 260pt; top: 35pt; }
.v10 .sec-h.partners  { left: 260pt; top: 204pt; }
.v10 .rule.r-partners { left: 260pt; top: 226pt; }

/* Two-line lede, set exactly as v11's (10pt, 346pt measure, break on the
   newline in the markup). The table sits a little lower than in the Figma
   frame to make room for the second line. */
.v10 .lede {
  position: absolute;
  left: 125pt; top: 233pt;
  width: 346pt;
  text-align: center;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.3;
  white-space: pre-line;
}

.v10 .card    { top: 44pt; width: 165pt; height: 140pt; }
.v10 .card.c1 { left: 23pt; }
.v10 .card.c2 { left: 214pt; }
.v10 .card.c3 { left: 405pt; }

.v10 .chev     { top: 93pt; }
.v10 .chev.ch1 { left: 192pt; }
.v10 .chev.ch2 { left: 383pt; }

.v10 .card .icon { position: absolute; left: -4pt; top: 4pt; width: 60pt; height: 40pt; }
.v10 .card h3 {
  position: absolute;
  left: 50pt; top: 16pt;
  font-size: 12pt;
  font-weight: 600;
  line-height: 1.3;
  color: var(--purple);
}
.v10 .card ul {
  position: absolute;
  left: 10pt; top: 44pt;
  width: 150pt;
  list-style: none;
}
.v10 .card li {
  height: 19pt;
  margin-bottom: 6pt;
  border-bottom: 1pt solid #fff;
  font-size: 10pt;
  line-height: 1.3;
}
.v10 .card li:last-child { border-bottom: none; margin-bottom: 0; }

.v10 .tbl { left: 23pt; top: 264pt; width: 547pt; }
/* Figma constrains the right-hand cell text to 363pt, which is what makes the
   last row wrap onto two lines. Match that measure. */
.v10 .tbl td + td { padding-right: 21pt; }

/* ── v11 + v12: two journey cards + 5-row Partnerships table ────────────── */

.v11 .sec-h.journey, .v12 .sec-h.journey { left: 186pt; top: 16pt; }
.v11 .rule.r-j1, .v12 .rule.r-j1 { left: 154pt; top: 26pt; }
.v11 .rule.r-j2, .v12 .rule.r-j2 { left: 423pt; top: 26pt; }

.v11 .card, .v12 .card { width: 218pt; height: 164pt; }
.v11 .card.c1, .v12 .card.c1 { left: 40pt; }
.v11 .card.c2, .v12 .card.c2 { left: 337pt; }

/* Bulleted rows, shared by v11 and v12 (same offsets inside the card). */
.v11 .card ul, .v12 .card ul { position: absolute; left: 11pt; width: 200pt; list-style: none; }
.v11 .card li, .v12 .card li {
  height: 27pt;
  font-size: 10pt;
  line-height: 1.3;
  padding-left: 11pt;
  position: relative;
}
.v11 .card li::before, .v12 .card li::before {
  content: '•';
  position: absolute;
  left: 0;
}

.v11 .tbl, .v12 .tbl { left: 40pt; width: 515pt; }

/* v11 — card header is a navy bar with a title and a subtitle line. */
.v11 .card { top: 41pt; }
.v11 .card .caphead {
  position: absolute;
  left: 0; top: 0;
  width: 218pt; height: 46pt;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.v11 .card .caphead h3 { font-size: 12pt; font-weight: 600; line-height: 1.3; padding-top: 11pt; }
.v11 .card .caphead p  { font-size: 10pt; font-weight: 400; line-height: 1.3; padding-top: 3pt; }
.v11 .card ul { top: 57pt; }

.v11 .chev { left: 289pt; top: 103pt; }

.v11 .sec-h.partnerships { left: 252pt; top: 220pt; }
.v11 .rule.r-p1 { left: 216pt; top: 230pt; }
.v11 .rule.r-p2 { left: 359pt; top: 230pt; }
.v11 .lede {
  position: absolute;
  left: 125pt; top: 240pt;
  width: 346pt;
  text-align: center;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.3;
  white-space: pre-line;
}
.v11 .tbl { top: 270pt; }

/* v12 — card header is a circular icon badge with a purple title. */
.v12 .card { top: 48pt; }
.v12 .card .icon { position: absolute; left: 0; top: 8pt; width: 60pt; height: 40pt; }
.v12 .card.c2 .icon { top: 7pt; }
.v12 .card h3 {
  position: absolute;
  left: 57pt; top: 20pt;
  font-size: 12pt;
  font-weight: 600;
  line-height: 1.3;
  color: var(--purple);
}
.v12 .card.c2 h3 { left: 56pt; top: 19pt; }
.v12 .card ul { top: 57pt; }

.v12 .chev { left: 289pt; top: 110pt; }

.v12 .sec-h.partnerships { left: 252pt; top: 223pt; }
.v12 .rule.r-p1 { left: 218pt; top: 235pt; }
.v12 .rule.r-p2 { left: 359pt; top: 235pt; }
.v12 .lede {
  position: absolute;
  left: 83pt; top: 243pt;
  width: 454pt;
  text-align: center;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.3;
}
.v12 .tbl { top: 264pt; }

/* ══════════════════════════════════════════════════════════════════════════
   v13 — Figma frame "A4 - 13" (added 2026-07-13). The designer's corrected
   version of v10: re-spaced header, title-case headings flanked by rules on
   both sides, full-bleed card hairlines, and a wider/shorter table whose last
   row fits on one line. Supersedes v10.
   ══════════════════════════════════════════════════════════════════════════ */

.v13 { --card: #F9F7FC; }

/* Header — logo and About block sit higher than in v10. */
.v13 .hdr        { height: 294pt; }
.v13 .hero img   { left: -135pt; top: 172pt; }
.v13 .logo       { top: 25pt; }
.v13 .hdr .rule  { top: 142pt; }
.v13 .about-h    { top: 152pt; }
.v13 .about-p    { top: 177pt; }

.v13 .body { top: 294pt; height: 438pt; }

/* Section heading: rule — Heading — rule, centred on the page. */
.v13 .sec-head {
  position: absolute;
  left: 0;
  width: 595.28pt;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10pt;
}
.v13 .sec-head h2 {
  font-size: 15pt;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.v13 .sec-head i { width: 20pt; height: 2pt; background: var(--purple); }
.v13 .sec-head.platform     { top: 18pt; }
.v13 .sec-head.partnerships { top: 205pt; }

.v13 .lede {
  position: absolute;
  left: 34pt; top: 225pt;
  width: 526pt;
  text-align: center;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.3;
  white-space: pre-line;
}

.v13 .card    { top: 44pt; width: 165pt; height: 140pt; }
.v13 .card.c1 { left: 23pt; }
.v13 .card.c2 { left: 215pt; }
.v13 .card.c3 { left: 407pt; }

.v13 .chev     { top: 94pt; }
.v13 .chev.ch1 { left: 193pt; }
.v13 .chev.ch2 { left: 385pt; }

.v13 .card .icon { position: absolute; left: -4pt; top: 4pt; width: 60pt; height: 40pt; }
.v13 .card h3 {
  position: absolute;
  left: 50pt; top: 16pt;
  font-size: 12pt;
  font-weight: 600;
  line-height: 1.3;
  color: var(--purple);
}

/* Row hairlines run the full width of the card (in v10 they were inset). */
.v13 .card ul { position: absolute; left: 0; top: 44pt; width: 165pt; list-style: none; }
/* 10pt indent, but only 5pt on the right: "Personalised recommendations" is
   146pt wide and needs the full measure, or it wraps and overflows the card. */
.v13 .card li {
  font-size: 10pt;
  line-height: 1.3;
  padding: 0 5pt 4pt 10pt;
  border-bottom: 1pt solid #fff;
  margin-bottom: 6.5pt;
}
.v13 .card li:last-child { border-bottom: none; margin-bottom: 0; }

/* Table is wider (549pt) and shorter (161pt) than v10's; the extra measure is
   what lets the last row sit on a single line. */
.v13 .tbl { left: 23pt; top: 256pt; width: 549pt; }
.v13 .tbl tbody td { padding-top: 10pt; padding-bottom: 9pt; }
.v13 .tbl td + td  { padding-right: 11pt; }

.v13 .ftr .map { top: -22pt; }