/* The media center (/media-center, owner 10-12): the brand kit from Pufy-Brand-Guidelines.pdf, after Jeton's media
   assets page. Brand tiles use the guide's exact colors in both themes; the page around them follows the site's. */
.mc { --lime: #DFFF00; --black: #000; --blue: #31A8FF; --orange: #F15715; --green: #3EDB84; --tile-r: 24px; --mc-line: rgba(128, 128, 128, .2); --mc-line: color-mix(in srgb, var(--text) 9%, transparent); padding-bottom: 72px; }
/* every divider on this page is a quiet line in the text color (owner 10-12), not the site's bluish --border */
.mc-lime { background: var(--lime); color: #000; }
.mc-black { background: var(--black); color: #fff; }
.mc-white { background: #fff; color: #000; box-shadow: inset 0 0 0 1px var(--mc-line); }
.mc-blue { background: var(--blue); color: #000; }
.mc-orange { background: var(--orange); color: #000; }
.mc-green { background: var(--green); color: #000; }
.mc-ink { background: #262626; color: #fff; }
.mc-card { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* Top: the title on lime, the kit and the guide beside it */
.mc-top { padding-top: 16px; }
.mc-hero { background: var(--lime); color: #000; border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); display: grid; gap: 24px 48px; align-items: end; }
.mc-hero h1 { font-size: clamp(3.25rem, 11vw, 8.5rem); line-height: .92; margin: 0; }
.mc-hero p { margin: 0 0 20px; max-width: 46ch; font-size: 1.0625rem; }
@media (min-width: 880px) { .mc-hero { grid-template-columns: 1.2fr 1fr; padding-top: 120px; } }
.mc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #000; color: #fff; font-weight: 600; text-decoration: none; transition: transform .2s ease-out; }
.mc-btn:active { transform: scale(.97); }
.mc-btn span, .mc-size { font-weight: 300; opacity: .7; font-size: .875em; }
.mc-btn-line { background: none; color: #000; box-shadow: inset 0 0 0 2px #000; }
.mc-hero :focus-visible { outline-color: #000; }

/* Body: the section list beside the content (pinned by site.js while the menu is open, like the home page's pins) */
.mc-body { display: grid; gap: 32px; padding-top: 40px; }
.mc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mc-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; font: 400 1.375rem/1.1 "Anton", Impact, sans-serif; letter-spacing: .01em; }
.mc-nav a:hover { color: var(--text); }
@media (min-width: 960px) {
  .mc-body { grid-template-columns: 180px minmax(0, 1fr); gap: 48px; }
  /* the list sits in the middle of the screen while the page scrolls past it (owner 10-12) */
  .mc-nav { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; display: flex; align-items: center; }
  .mc-nav ul { flex-direction: column; gap: 0; }
}
.mc-main { min-width: 0; }

.mc-sec { padding-bottom: clamp(96px, 12vw, 160px); scroll-margin-top: 80px; }
.mc-sec + .mc-sec { border-top: 1px solid var(--mc-line); padding-top: clamp(64px, 8vw, 112px); }
.mc-head { display: grid; gap: 12px 32px; align-items: start; margin-bottom: 32px; }
.mc-head h2 { margin: 0; font-size: clamp(2.5rem, 6vw, 3.75rem); }
.mc-head p { margin: 0; color: var(--text-2); max-width: 52ch; }
.mc-head .btn { justify-self: start; gap: 8px; }
@media (min-width: 720px) { .mc-head { grid-template-columns: 1fr auto; } .mc-head p { grid-column: 1; } .mc-head .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }

/* A label and its rule, then the picture (Jeton's two columns) */
.mc-row { display: grid; gap: 4px 32px; margin: 40px 0 16px; }
.mc-row h3 { margin: 0; }
.mc-row p { margin: 0; color: var(--text-2); max-width: 60ch; }
@media (min-width: 720px) { .mc-row { grid-template-columns: 200px 1fr; } }

.mc-grid { display: grid; gap: 12px; }
.mc-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .mc-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .mc-g2:not(.mc-swatches) { grid-template-columns: 1fr; } .mc-g3 { grid-template-columns: 1fr; } }

.mc-tile { position: relative; margin: 0; border-radius: var(--tile-r); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 28px 24px 52px; min-height: 180px; }
.mc-tile > img { width: 100%; height: auto; max-height: 100%; }
.mc-tile > figcaption { position: absolute; left: 20px; bottom: 16px; font-size: .875rem; font-weight: 600; }
.mc-span2 { grid-column: 1 / -1; }
.mc-span2 > img { max-width: 520px; }
.mc-square { aspect-ratio: 1; }
.mc-square > img { width: 70%; }
.mc-g2 .mc-green.mc-square > img { width: 80%; }
@media (min-width: 480px) { .mc-g2 > .mc-square { aspect-ratio: auto; min-height: 280px; } .mc-span2-sm { grid-column: 1 / -1; } .mc-span2-sm > img { max-width: 300px; } }
.mc-hero-logo { padding: clamp(40px, 9vw, 96px) clamp(24px, 8vw, 96px); }
.mc-hero-logo > img { max-width: 720px; }

/* Clear space: a dashed box one x around the artwork */
.mc-clear { padding: 40px 24px 64px; }
.mc-clear-box { position: relative; width: min(100%, 560px); border: 2px dashed var(--lime); padding: 6%; }
.mc-clear-box img { width: 100%; height: auto; }
.mc-x { position: absolute; font: 400 1.5rem/1 "Anton", Impact, sans-serif; color: var(--lime); }
.mc-x-t { left: 8px; top: -34px; }
.mc-x-r { right: -26px; top: 50%; transform: translateY(-50%); }

/* Minimum size: real pixels, so nothing scales them */
.mc-sizes { flex-direction: column; align-items: stretch; gap: 32px; padding: 32px 24px; }
.mc-size-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 48px; }
.mc-size-row figure { margin: 0; display: grid; gap: 10px; }
.mc-size-row img { width: auto; max-width: none; }
.mc-size-row figcaption { color: var(--lime); font-weight: 600; font-size: .875rem; }

/* Misuse: the wordmark as a mask, so each mistake is one CSS line */
.mc-wm { width: 72%; aspect-ratio: 355 / 230; background: #fff; -webkit-mask: url("/brand/logos/pufy-wordmark.svg") center / contain no-repeat; mask: url("/brand/logos/pufy-wordmark.svg") center / contain no-repeat; }
.mc-stretch { transform: scale(1.35, .7); }
.mc-rotate { transform: rotate(-18deg); }
.mc-recolor { background: #C062FF; }
.mc-shadow { width: 72%; filter: drop-shadow(8px 8px 0 #777); } /* on a wrapper: a filter on the masked element is masked away */
.mc-shadow .mc-wm { width: 100%; }
.mc-faint { background: #3a3a3a; }
.mc-crop { transform: translate(38%, 30%) scale(1.3); }
.mc-dont figcaption::before { content: "\2715"; display: inline-block; margin-right: 8px; color: #FF6B5E; }

/* Color */
.mc-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .mc-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } .mc-sw-main { grid-column: 1 / -1; min-height: 220px; } }
.mc-sw { border-radius: var(--tile-r); padding: 20px; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-size: .875rem; }
.mc-sw b { font-size: 1rem; margin-bottom: 4px; }
.mc-sw code { font: 400 clamp(1.375rem, 2.2vw, 1.75rem)/1.1 "Anton", Impact, sans-serif; margin-bottom: 8px; padding: 0; background: none; color: inherit; border: 0; white-space: nowrap; overflow-wrap: normal; user-select: all; }
.mc-sw-main { grid-column: 1 / -1; }
.mc-sw-main code { font-size: clamp(2.5rem, 7vw, 4.5rem); }
.mc-balance { display: flex; height: 160px; border-radius: var(--tile-r); overflow: hidden; }
.mc-balance span { display: flex; align-items: flex-end; padding: 16px; font-weight: 600; font-size: .875rem; }
.mc-balance .mc-white { box-shadow: inset 1px 0 0 var(--mc-line), inset 0 1px 0 var(--mc-line), inset 0 -1px 0 var(--mc-line); }
.mc-aa { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 24px; gap: 4px; }
.mc-aa b { font: 400 clamp(2.25rem, 5vw, 3.5rem)/1 "Anton", Impact, sans-serif; margin-bottom: 16px; }
.mc-aa span { font-weight: 600; font-size: 1.0625rem; }

/* Type */
.mc-anton { font-family: "Anton", Impact, sans-serif; font-weight: 400; }
.mc-inter { font-family: var(--font); }
.mc-font { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 28px; }
.mc-font p { margin: 0 0 16px; }
.mc-font > p:last-child { color: var(--text-2); margin: 0; }
.mc-font-big { font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1; }
.mc-font-big.mc-inter { font-size: clamp(3rem, 5.6vw, 4.75rem); letter-spacing: -.02em; }
.mc-font-big.mc-anton { color: var(--text); }
.mc-abc { font-size: clamp(.875rem, 1.3vw, 1.0625rem); line-height: 1.45; overflow-wrap: anywhere; }
.mc-font h3 { margin: 8px 0 6px; }
.mc-scale { flex-direction: column; align-items: stretch; padding: 8px 28px; }
.mc-scale > div { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--mc-line); align-items: baseline; }
.mc-scale > div:last-child { border-bottom: 0; }
.mc-scale span { color: var(--text-2); font-size: .875rem; font-weight: 600; }
.mc-scale p { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 720px) { .mc-scale > div { grid-template-columns: 140px 1fr; } }

/* Graphics */
.mc-pattern { padding: 0; min-height: 0; }
.mc-pattern > img { display: block; }
.mc-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.mc-icons li { background: #fff; color: #000; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--mc-line); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: .875rem; font-weight: 600; }
.mc-icons img { width: 40px; height: 40px; }

/* App icon: the platform's mask, drawn here as a rounded square */
.mc-apps { display: flex; flex-wrap: wrap; gap: 24px; }
.mc-apps figure { margin: 0; display: grid; gap: 10px; justify-items: center; font-weight: 600; font-size: .875rem; }
.mc-apps img { width: clamp(120px, 22vw, 180px); height: auto; border-radius: 22.5%; box-shadow: var(--shadow); }

/* Downloads */
.mc-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mc-line); }
.mc-files a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 18px 4px; border-bottom: 1px solid var(--mc-line); text-decoration: none; align-items: center; }
.mc-files a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mc-files b { font-size: 1.0625rem; }
.mc-files span { grid-column: 1; color: var(--text-2); font-size: .9375rem; }
.mc-files em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-weight: 600; font-size: .875rem; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 8px 14px; white-space: nowrap; }

/* The narrowest phones: the 260 px logo keeps its real size, and the hero's buttons may wrap */
@media (max-width: 399px) { .mc-sizes { padding-left: 12px; padding-right: 12px; } .mc-btn { white-space: normal; padding-top: 8px; padding-bottom: 8px; } }