/* /media-kit · page scoped CSS (prefix pg-mk-). Spacing between shared blocks, plus the parts this page introduces: the download box
   in the hero (.pg-mk-box), the two about texts with their copy buttons (.pg-mk-text), the facts ledger (.pg-mk-ledger, as /about),
   the logo tiles on the grounds each colour is made for (.pg-mk-tile), the emblem row (.pg-mk-marks), the colour swatches
   (.pg-mk-swatch), the fonts (.pg-mk-type) and the founders with portraits (.pg-mk-person). */

/* hero: the two actions side by side, the size of the download under them; the box on the right */
.pg-mk-act{display:flex;flex-wrap:wrap;gap:12px}
.cy-phero__text>.pg-mk-act{margin-top:36px}
.pg-mk-meta{font-size:14px;line-height:1.5;color:var(--s-ink-3)}
.cy-phero__text>.pg-mk-meta{margin-top:14px}
.pg-mk-fig{align-self:center}
.pg-mk-box__mark{display:flex;justify-content:center;padding:28px 0 36px}
.pg-mk-box__mark img{width:200px;height:auto}
.pg-mk-box__rows{display:grid;margin:0}
.pg-mk-box__rows>div{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px;padding:10px 0;border-top:1px solid var(--s-line)}
.pg-mk-box__rows dt{font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.pg-mk-box__rows dd{margin:0;font-size:15px;line-height:1.45;color:var(--s-ink)}
@media (max-width:899px){.pg-mk-fig{margin-top:8px}}
@media (max-width:519px){
  .pg-mk-act .cy-btn{flex:1 1 100%}
  .pg-mk-box__rows>div{grid-template-columns:minmax(0,1fr);row-gap:2px}
}

/* the about texts: two cells, the text in reading size, the copy button at the foot of each cell */
.pg-mk-text{display:flex;flex-direction:column}
.pg-mk-text__body{margin-top:14px;font-size:17px;line-height:1.55;color:var(--s-ink);text-wrap:pretty}
.pg-mk-text__act{margin-top:auto;padding-top:24px}
.pg-mk-files{margin-top:28px}
/* the copy buttons (texts and colours): the label swaps to "Copied" for a moment (page.js sets data-state) */
.pg-mk-copy__d{display:none}
[data-state="copied"]>.pg-mk-copy__l{display:none}
[data-state="copied"]>.pg-mk-copy__d{display:inline}

/* the facts: one row per fact, the label in mono, a link to where it can be checked on the right (as /about) */
.pg-mk-ledger{margin:0;border-top:1px solid var(--s-ink)}
.pg-mk-ledger__row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:var(--pg-gap);padding:22px 0;border-bottom:1px solid var(--s-line)}
.pg-mk-ledger__row dt{padding-top:3px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.pg-mk-ledger__row dd{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:baseline}
.pg-mk-ledger__fact{display:flex;align-items:baseline;gap:10px;max-width:40em;font-size:18px;line-height:1.45;color:var(--s-ink)}
.pg-mk-ledger__fact .swiss-flag{flex:none;transform:translateY(2px)}
.pg-mk-ledger__go{flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
@media (max-width:899px){
  .pg-mk-ledger__row{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .pg-mk-ledger__row dd{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .pg-mk-ledger__go{align-items:flex-start;white-space:normal}
  .pg-mk-ledger__fact{font-size:17px}
}

/* the logo: three tiles, each colour on the ground it is made for, the downloads under each */
.pg-mk-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pg-gap);margin:0;padding:0;list-style:none}
.pg-mk-tile{min-width:0}
.pg-mk-tile__ground{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;padding:24px;border-radius:var(--radius-card)}
.pg-mk-tile__ground img{width:min(220px,70%);height:auto}
.pg-mk-tile__ground--light{background:#fff;box-shadow:inset 0 0 0 1px var(--pg-rule)}
.pg-mk-tile__ground--dark{background:#151515}
.pg-mk-tile__ground--paper{background:#EEEEF0}
.pg-mk-tile__name{margin-top:14px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.pg-mk-tile__get{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pg-mk-dl{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:var(--s-card,#fff);box-shadow:inset 0 0 0 1px var(--pg-rule);
  font-size:14px;line-height:1;color:var(--s-ink);text-decoration:none}
@media (any-hover:hover){.pg-mk-dl:hover{box-shadow:inset 0 0 0 1px var(--s-ink)}}
@media (max-width:899px){.pg-mk-logos{grid-template-columns:minmax(0,1fr);row-gap:32px}}
@media (max-width:519px){.pg-mk-tile__ground{aspect-ratio:2/1}}

/* the emblem alone and the app icon: one row of small downloads under the tiles */
.pg-mk-small{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--pg-gap);row-gap:16px;align-items:center;margin-top:40px;padding-top:28px;border-top:1px solid var(--pg-rule)}
.pg-mk-small__say{max-width:30em;font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.pg-mk-marks{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.pg-mk-mark{display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;padding:14px 8px 10px;border-radius:var(--radius-card);font-size:13px;line-height:1.3;color:var(--s-ink-2);text-align:center;text-decoration:none;box-shadow:inset 0 0 0 1px var(--pg-rule)}
.pg-mk-mark img{width:40px;height:auto}
.pg-mk-mark--light{background:#fff}
.pg-mk-mark--dark{background:#151515;color:#C9C9CE;box-shadow:none}
.pg-mk-mark--paper{background:#EEEEF0}
.pg-mk-mark--icon{background:#fff}
.pg-mk-mark--icon img{border-radius:var(--radius-control)}
@media (any-hover:hover){.pg-mk-mark:hover{box-shadow:inset 0 0 0 1px var(--s-ink)}.pg-mk-mark--dark:hover{box-shadow:inset 0 0 0 1px #fff}}
@media (max-width:899px){.pg-mk-small{grid-template-columns:minmax(0,1fr)}}
@media (max-width:519px){.pg-mk-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pg-mk-mark{width:auto}}
.pg-mk-rules{margin-top:40px}

/* colours: a chip, the name, the values and a copy button per colour; the two fonts set in themselves */
.pg-mk-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pg-gap);margin:0;padding:0;list-style:none}
.pg-mk-swatch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;row-gap:4px;min-width:0}
.pg-mk-swatch__chip{grid-column:1/-1;display:block;height:120px;margin-bottom:12px;border-radius:var(--radius-card);background:var(--chip)}
.pg-mk-swatch__chip--line{box-shadow:inset 0 0 0 1px var(--pg-rule)}
.pg-mk-swatch__name{grid-column:1;font-size:17px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.pg-mk-swatch__val{grid-column:1;display:flex;flex-wrap:wrap;gap:2px 14px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.pg-mk-hex{grid-column:2;grid-row:2/span 2;align-self:center;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--s-card,#fff);box-shadow:inset 0 0 0 1px var(--pg-rule);
  font:inherit;font-size:14px;line-height:1;color:var(--s-ink);cursor:pointer}
@media (any-hover:hover){.pg-mk-hex:hover{box-shadow:inset 0 0 0 1px var(--s-ink)}}
@media (max-width:899px){.pg-mk-swatches{grid-template-columns:minmax(0,1fr);row-gap:28px}.pg-mk-swatch__chip{height:72px}}
.pg-mk-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pg-gap);margin:48px 0 0;padding-top:28px;border-top:1px solid var(--pg-rule)}
.pg-mk-type dt{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.pg-mk-type dd{margin:8px 0 0;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--s-ink)}
.pg-mk-type__machina{font-family:var(--font-display);font-weight:500}
.pg-mk-type__helvetica{font-family:var(--font-body);font-weight:400}
.pg-mk-note{margin-top:20px;font-size:15px;line-height:1.5;color:var(--s-ink-2)}
@media (max-width:519px){.pg-mk-type{grid-template-columns:minmax(0,1fr);row-gap:20px}}

/* the founders: a portrait at 4:5 above the name, the role in mono, the download under the background */
.pg-mk-person{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:28px;align-items:start}
.pg-mk-person__photo{aspect-ratio:4/5}
.pg-mk-person__photo img{object-position:50% 22%}
.pg-mk-person__role{margin-top:4px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.pg-mk-person__bio{margin-top:12px}
.pg-mk-person__links{margin-top:14px}
@media (max-width:519px){.pg-mk-person{grid-template-columns:minmax(0,1fr);row-gap:20px}.pg-mk-person__photo{max-width:200px}}

/* the press band: the two actions one title gap under the head */
#press .pg-mk-act{margin-top:0}