/* pfpcrop v1 — Jitter design spec (styles.refero.design ab1e41e9, user-pinned 2026-08-17)
   Canvas #f2f1f3, white 40px cards, ink pills + one violet CTA, 4-layer diffuse shadows. */


@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ubuntu-400.woff2) format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ubuntu-500.woff2) format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ubuntu-700.woff2) format("woff2");
}
/* Variable slice at width 125% (Expanded); used by platform-themed pages. */
@font-face {
  font-family: "Archivo Expanded";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/archivo-expanded.woff2) format("woff2");
}

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

:root {
  --bg: #f7f7f7;
  --card: #ffffff;
  --ink: #4f4f4f;
  --ink-soft: #757575;
  --ink-faint: #9e9e9e;
  --hairline: #e3e3e3;
  --violet: #1abc9c;
  --violet-deep: #148f77;
  --plum: #1f1f1f;
  --lavender: #cfcfcf;
  --radius-card: 40px;
  --radius-tile: 20px;
  --radius-pill: 50px;
  --shadow-rest:
    rgba(0, 0, 0, 0.01) 0px 119px 48px 0px,
    rgba(0, 0, 0, 0.05) 0px 67px 40px 0px,
    rgba(0, 0, 0, 0.09) 0px 30px 30px 0px,
    rgba(0, 0, 0, 0.1) 0px 7px 16px 0px;
  --shadow-hover:
    rgba(25, 23, 28, 0.01) 0px 152px 61px 0px,
    rgba(25, 23, 28, 0.05) 0px 85px 51px 0px,
    rgba(25, 23, 28, 0.09) 0px 38px 38px 0px,
    rgba(25, 23, 28, 0.1) 0px 9px 21px 0px;
  --shadow-float:
    rgba(0, 0, 0, 0.01) 0px 63px 25px 0px,
    rgba(0, 0, 0, 0.05) 0px 35px 21px 0px,
    rgba(0, 0, 0, 0.09) 0px 16px 16px 0px,
    rgba(0, 0, 0, 0.1) 0px 4px 9px 0px;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.page {
  position: relative;
  z-index: 1;
  background: var(--bg);
  box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.3);
}

main { max-width: 1200px; margin: 0 auto; padding: 0 24px 100px; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Site logo (top-left, links home on every page) */
.top { max-width: 1200px; margin: 0 auto; padding: 24px 24px 0; }
.logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo:hover { color: var(--violet); text-decoration: none; }
.theme-discord .logo { color: #fff; }
.theme-discord .logo:hover { color: #c7d0ff; }

/* Hero */
.hero { text-align: center; padding: 48px 0 8px; }
.hero h1 {
  font-family: inherit;
  font-size: clamp(17px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.05;
  white-space: nowrap;
}

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  corner-shape: squircle;
  box-shadow: var(--shadow-rest);
  margin: 44px auto 0;
  padding: 56px 32px;
  text-align: center;
}
.card:has(#upload-view:not([hidden])) {
  cursor: pointer;
  position: relative;
  aspect-ratio: 620 / 292;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--hairline);
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}
.card:has(#upload-view:not([hidden])) #upload-view { width: 100%; }
.card:has(#editor-view:not([hidden])) {
  background: transparent;
  box-shadow: none;
  padding: 24px 0;
}
.card:has(#upload-view:not([hidden])):hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
}

.btn {
  display: inline-block;
  background: var(--card);
  color: var(--violet);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.02em;
  border: none;
  border-radius: 22px;
  corner-shape: squircle;
  box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.07);
  padding: 16px 32px;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.btn:hover { box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); }
.btn:active { box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.16); }
.btn:focus-visible { outline: 3px solid rgba(26, 188, 156, 0.45); outline-offset: 2px; }

.btn-ghost { color: var(--ink); }

.upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 180px; padding: 0 8%;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; border-radius: var(--radius-tile);
}
.upload-zone:focus-visible { outline: 3px solid rgba(26, 188, 156, 0.45); outline-offset: 2px; }
.up-icon { width: 168px; height: 168px; color: var(--hairline); margin-bottom: 14px; }
.up-main { font-size: clamp(20px, 3.3vw, 39px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.up-sub { font-size: 16px; color: var(--ink-faint); }
.up-error { font-size: 15px; font-weight: 500; color: #c0392b; }

/* Editor */
.editor-row { display: flex; gap: 48px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.stage-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stage-wrap { border-radius: var(--radius-tile); corner-shape: squircle; overflow: hidden; line-height: 0; background: #ececec; }
#stage { touch-action: none; cursor: grab; }
#stage.dragging { cursor: grabbing; }
.side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; min-width: 380px; min-height: 480px; }
.preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.preview-row { display: flex; align-items: center; gap: 16px; }
.preview-row canvas { border-radius: 50%; background: #ececec; }
.zoom-label { font-size: 14px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 480px; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 999px;
  background: #dcdcdc;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--violet);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--violet);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border: none;
  border-radius: 999px;
  background: #dcdcdc;
}
.outsize { font-size: 14px; color: var(--ink-soft); }
.outsize b { color: var(--ink); font-variant-numeric: tabular-nums; }

.dl-col { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.dl-col .btn { width: 100%; font-size: 20px; padding: 28px 24px; }

.linkish {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 20px; font-weight: 500; color: var(--violet);
  align-self: center;
}
.linkish:hover { text-decoration: underline; }

/* Platform chips */
.chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 40px 0 0; }
.chips:not(.chips-secondary) .chip { flex: 1 1 0; text-align: center; min-width: 150px; }
.chips-secondary { padding: 14px 0 0; }
.chips-secondary .chip { width: calc((100% - 42px) / 4); text-align: center; }
/* Platform pages' first row holds 3 chips (self excluded), so the circle chip
   matches thirds there; chips read in ink, never in the page's link accent */
body[class*="theme-"] .chips-secondary .chip { width: calc((100% - 28px) / 3); }
body[class*="theme-"] .chip { color: var(--ink); }
body[class*="theme-"] .chip span { color: var(--ink-faint); }
.chip {
  background: var(--card);
  border-radius: 22px;
  corner-shape: squircle;
  box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.07);
  padding: 17px 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: box-shadow 0.15s ease;
}
.chip:hover { text-decoration: none; box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); }
.chip span { color: var(--ink-faint); font-weight: 400; }

/* Homepage Discord chip wears blurple on hover; click irises into the page */

/* Iris page-transition overlay (expands from the click point).
   Background mirrors the Discord page's first viewport so the hand-off is seamless. */
.iris {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(1000px 620px at 80% 120px, rgba(88, 101, 242, 0.32), transparent 70%),
    radial-gradient(1500px 950px at 50% 560px, #2c39e3 0%, rgba(44, 57, 227, 0) 65%),
    linear-gradient(180deg, #06082b 0%, #0d1148 60%, #10154f 100%);
  transition: clip-path 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Scroll-in reveal (elements drift up as they enter the viewport) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Sections */
section { padding: 100px 0 0; }
h2 {
  font-family: inherit;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 32px;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--card);
  border-radius: var(--radius-tile);
  corner-shape: squircle;
  padding: 32px 28px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.07);
  transition: box-shadow 0.15s ease;
}
.step:hover { box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); }
.step b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.step p, .prose, .faq-item p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.prose { max-width: 680px; margin: 0 auto; text-align: center; font-size: 18px; letter-spacing: -0.023em; }

.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--hairline); padding: 6px 0; }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.017em;
  padding: 16px 0;
  list-style-position: outside;
}
.faq-item p { padding: 0 0 18px 20px; }

/* Full-page drop overlay */
.drop-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(31, 31, 31, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.drop-msg { color: #fff; font-size: 56px; font-weight: 600; }
.drop-overlay[hidden] { display: none; }
[hidden] { display: none !important; }

/* Curtain footer: fixed behind the page, revealed at scroll end */
.curtain {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: var(--plum);
  color: var(--lavender);
  padding: 48px 24px 0;
}
.f-inner { max-width: 1200px; margin: 0 auto; }
.f-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
.f-desc { max-width: 300px; font-size: 14px; line-height: 1.5; }
.f-nav { display: flex; flex-direction: column; font-size: 14px; line-height: 2; }
.f-nav a { color: #9a9a9a; transition: color 0.15s ease; }
.f-nav a:hover { color: #fff; text-decoration: none; }
.f-nav b { color: #6f6f6f; font-size: 11px; letter-spacing: 1px; }
.wordmark {
  font-family: inherit;
  font-size: clamp(64px, 15vw, 190px);
  font-weight: 700;
  color: #2b2b2b;
  line-height: 1;
  margin-top: 24px;
  text-align: center;
  letter-spacing: -0.02em;
  user-select: none;
}
.f-bottom { padding: 14px 0 22px; font-size: 12px; color: #7a7a7a; }

/* Hero subtitle (platform pages) */
.sub { max-width: 640px; margin: 18px auto 0; font-size: 17px; color: var(--ink-soft); }

/* Size warning under the output line (platform pages, shown when crop < minimum) */
.size-warn { max-width: 480px; font-size: 14px; font-weight: 500; color: #c0392b; }

/* Spec table (platform pages) */
.spec-table { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse; font-size: 16px; }
.spec-table th, .spec-table td { padding: 14px 8px; border-bottom: 1px solid var(--hairline); text-align: left; }
.spec-table th { font-weight: 500; color: var(--ink-soft); width: 40%; }
.spec-note { max-width: 760px; margin: 14px auto 0; font-size: 13px; color: var(--ink-faint); }
.spec-table td { font-variant-numeric: tabular-nums; }

.tips-label { max-width: 640px; margin: 0 auto 8px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }

/* Tips list (platform pages) */
.tips { max-width: 640px; margin: 0 auto 28px; padding-left: 24px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.tips li { margin-bottom: 10px; }

/* ---- Discord theme: deep-blue gradient, frosted hero card, blurple actions ---- */

.theme-discord {
  --bg: #1a2081;
  --card: rgba(255, 255, 255, 0.08);
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.8);
  --ink-faint: rgba(255, 255, 255, 0.55);
  --hairline: rgba(255, 255, 255, 0.16);
  --violet: #5865f2;
  --violet-deep: #4752c4;
  --plum: #000000;
  --radius-card: 80px;
}
/* Hero glow copied from discord.com's look: near-black top corners, a luminous
   blue bloom behind the tool, settling into flat deep blue for the sections. */
.theme-discord .page {
  background:
    radial-gradient(1000px 620px at 80% 120px, rgba(88, 101, 242, 0.32), transparent 70%),
    radial-gradient(1500px 950px at 50% 560px, #2c39e3 0%, rgba(44, 57, 227, 0) 65%),
    linear-gradient(180deg, #06082b 0%, #0e1250 30%, #1a2081 70%, #12175e 100%);
}
.theme-discord h1,
.theme-discord h2 {
  font-family: "Archivo Expanded", "Ubuntu", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.theme-discord .hero h1 { font-size: clamp(16px, 2.7vw, 36px); }
.theme-discord a { color: #c7d0ff; }

/* Frosted hero card (backdrop blur over the gradient, like discord.com's 88px cards) */
.theme-discord .card {
  background: var(--card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: none;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.theme-discord .card:has(#upload-view:not([hidden])) {
  box-shadow: none;
}
/* Hover verdict (2026-08-18): homepage shadow + surface brighten, combined */
.theme-discord .card:has(#upload-view:not([hidden])):hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
  background: rgba(255, 255, 255, 0.12);
}
.theme-discord .card:has(#editor-view:not([hidden])) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 24px 0;
}
.theme-discord .up-main { color: #fff; }
.theme-discord .up-error { color: #ffb3b3; }
.theme-discord .size-warn { color: #ffb3b3; }

.theme-discord .stage-wrap { background: rgba(255, 255, 255, 0.06); }

/* Buttons: blurple primary, white secondary, 12px radius (discord.com spec) */
.theme-discord .btn {
  border-radius: 12px;
  corner-shape: round;
  box-shadow: none;
  transition: background-color 0.15s ease;
}
.theme-discord .dl-col .btn:first-child { background: var(--violet); color: #fff; }
.theme-discord .dl-col .btn:first-child:hover { background: var(--violet-deep); box-shadow: none; }
.theme-discord .btn-ghost { background: #fff; color: #23272a; }
.theme-discord .btn-ghost:hover { background: #e6e6e6; box-shadow: none; }
.theme-discord .linkish { color: #c7d0ff; }

.theme-discord input[type="range"] { background: rgba(255, 255, 255, 0.25); }
.theme-discord input[type="range"]::-moz-range-track { background: rgba(255, 255, 255, 0.25); }

/* Chat-row preview (own CSS drawing, no Discord assets) */
.chat-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  background: #313338;
  border-radius: 16px;
  corner-shape: round;
  padding: 18px 20px;
  text-align: left;
}
.chat-avatar { border-radius: 50%; flex: none; }
.chat-body { min-width: 0; }
.chat-meta { display: flex; align-items: baseline; gap: 10px; }
.chat-name { color: #f2f3f5; font-weight: 500; font-size: 16px; }
.chat-time { color: #949ba4; font-size: 12px; }
.chat-msg { color: #dbdee1; font-size: 15px; line-height: 1.4; margin-top: 2px; }

/* Circle previews with online-status dot */
.theme-discord .preview-row canvas, .theme-discord .chat-avatar { background: transparent; }
.pv { position: relative; display: inline-block; line-height: 0; }
.pv::after {
  content: "";
  position: absolute;
  right: 2.5%;
  bottom: 2.5%;
  width: 26%;
  height: 26%;
  background: #23a55a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(26, 32, 129, 0.9);
}

/* Dark-theme hover language: surfaces never move; feedback = surface brightens
   (shadows are invisible on a dark ground; light theme uses shadow instead) */
.theme-discord .chip {
  box-shadow: none;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.theme-discord .chip:hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
  background: rgba(255, 255, 255, 0.16);
}
.theme-discord .step { box-shadow: none; }
.theme-discord .step:hover { box-shadow: none; }

/* Discord-flavored curtain: black like discord.com's footer */
.theme-discord .curtain { background: #000; }
.theme-discord .wordmark { color: #1c1c1c; }
.theme-discord .f-nav a:hover { color: #c7d0ff; }

/* ---- TikTok theme: flat black, rose-red action (tiktok.com 2026-08-18) ---- */

.theme-tiktok {
  --bg: #000000;
  --card: rgba(255, 255, 255, 0.08);
  --ink: rgba(255, 255, 255, 0.9);
  --ink-soft: rgba(255, 255, 255, 0.75);
  --ink-faint: rgba(255, 255, 255, 0.5);
  --hairline: rgba(255, 255, 255, 0.16);
  --violet: #fe2c55;
  --violet-deep: #e0264b;
  --plum: #161823;
}
.theme-tiktok .page { background: #000; }
.theme-tiktok .logo { color: #fff; }
.theme-tiktok .logo:hover { color: #fe2c55; }
.theme-tiktok a { color: #ff5c7d; }
.theme-tiktok .card {
  background: var(--card);
  box-shadow: none;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.theme-tiktok .card:has(#upload-view:not([hidden])) { box-shadow: none; }
.theme-tiktok .card:has(#upload-view:not([hidden])):hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
  background: rgba(255, 255, 255, 0.12);
}
.theme-tiktok .card:has(#editor-view:not([hidden])) { background: transparent; box-shadow: none; padding: 24px 0; }
.theme-tiktok .up-main { color: #fff; }
.theme-tiktok .up-error, .theme-tiktok .size-warn { color: #ff8fa5; }
.theme-tiktok .stage-wrap { background: rgba(255, 255, 255, 0.06); }
.theme-tiktok .btn { border-radius: 8px; corner-shape: round; box-shadow: none; transition: background-color 0.15s ease; }
.theme-tiktok .dl-col .btn:first-child { background: #fe2c55; color: #fff; }
.theme-tiktok .dl-col .btn:first-child:hover { background: #e0264b; box-shadow: none; }
.theme-tiktok .btn-ghost { background: #fff; color: #161823; }
.theme-tiktok .btn-ghost:hover { background: #e6e6e6; box-shadow: none; }
.theme-tiktok .linkish { color: #ff5c7d; }
.theme-tiktok input[type="range"] { background: rgba(255, 255, 255, 0.25); }
.theme-tiktok input[type="range"]::-moz-range-track { background: rgba(255, 255, 255, 0.25); }
.theme-tiktok .preview-row canvas { background: transparent; }
.theme-tiktok .chip { box-shadow: none; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
.theme-tiktok .chip:hover { box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); background: rgba(255, 255, 255, 0.16); }
.theme-tiktok .step { box-shadow: none; }
.theme-tiktok .curtain { background: #161823; }
.theme-tiktok .wordmark { color: #23253a; }

/* TikTok profile-header mock */
.tt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #121212;
  border-radius: 16px;
  corner-shape: round;
  padding: 24px 20px;
}
.tt-avatar { border-radius: 50%; }
.tt-handle { color: #fff; font-weight: 600; font-size: 17px; }
.tt-follow {
  background: #fe2c55;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  padding: 8px 40px;
}

/* ---- LinkedIn theme: warm light ground, blue pill actions (linkedin.com 2026-08-18) ---- */

.theme-linkedin {
  --bg: #f4f2ee;
  --violet: #0a66c2;
  --violet-deep: #004182;
}
.theme-linkedin h1, .theme-linkedin h2 {
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
.theme-linkedin .hero h1 { font-weight: 400; }
.theme-linkedin .btn { border-radius: 999px; corner-shape: round; }
.theme-linkedin .dl-col .btn:first-child { background: #0a66c2; color: #fff; box-shadow: none; }
.theme-linkedin .dl-col .btn:first-child:hover { background: #004182; box-shadow: none; }
.theme-linkedin .btn-ghost { color: #0a66c2; box-shadow: inset 0 0 0 1.5px #0a66c2; }
.theme-linkedin .btn-ghost:hover { background: #f0f7ff; }
.theme-linkedin .chip { border-radius: 999px; corner-shape: round; }

/* LinkedIn profile-card mock */
.li-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  corner-shape: round;
  padding: 24px 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.li-avatar { border-radius: 50%; }
.li-name { color: rgba(0, 0, 0, 0.9); font-weight: 600; font-size: 17px; margin-top: 6px; }
.li-headline { color: rgba(0, 0, 0, 0.6); font-size: 14px; }

/* ---- Facebook theme: cool light ground, bright blue actions (facebook.com 2026-08-18) ---- */

.theme-facebook {
  --bg: #f0f2f5;
  --violet: #0064e0;
  --violet-deep: #0053ba;
}
.theme-facebook h1, .theme-facebook h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.theme-facebook .btn { border-radius: 22px; corner-shape: round; }
.theme-facebook .dl-col .btn:first-child { background: #0064e0; color: #fff; box-shadow: none; }
.theme-facebook .dl-col .btn:first-child:hover { background: #0053ba; box-shadow: none; }
.theme-facebook .btn-ghost { background: #e4e6eb; color: #1c1e21; box-shadow: none; }
.theme-facebook .btn-ghost:hover { background: #d8dadf; box-shadow: none; }

/* Facebook comment-row mock */
.fb-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  corner-shape: round;
  padding: 18px 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  text-align: left;
}
.fb-avatar { border-radius: 50%; flex: none; }
.fb-bubble { background: #f0f2f5; border-radius: 18px; padding: 10px 14px; min-width: 0; }
.fb-name { color: #1c1e21; font-weight: 600; font-size: 13px; }
.fb-msg { color: #1c1e21; font-size: 15px; line-height: 1.35; margin-top: 2px; }

/* Platform-themed pages use moderate download buttons (homepage keeps its big pair) */
body[class*="theme-"] .dl-col .btn { font-size: 17px; padding: 16px 24px; }
body[class*="theme-"] .linkish { font-size: 17px; }

/* Platform chips wear their platform's color on hover, on every page.
   .chip.chip-x outranks each theme's generic .chip:hover by source order;
   the hover shadow comes from whichever page rule already provides it. */
.chip.chip-discord, .chip.chip-tiktok, .chip.chip-linkedin, .chip.chip-facebook {
  transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chip.chip-discord:hover { background: #5865f2; color: #fff; }
.chip.chip-discord:hover span { color: rgba(255, 255, 255, 0.8); }
.chip.chip-tiktok:hover { background: #16181d; color: #fff; }
.chip.chip-tiktok:hover span { color: rgba(255, 255, 255, 0.7); }
.chip.chip-linkedin:hover { background: #0a66c2; color: #fff; }
.chip.chip-linkedin:hover span { color: rgba(255, 255, 255, 0.8); }
.chip.chip-facebook:hover { background: #0064e0; color: #fff; }
.chip.chip-facebook:hover span { color: rgba(255, 255, 255, 0.8); }

/* Circle Crop chip: a teal circle grows from the center on hover (every page) */
.chip.chip-circle {
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.45) 99%, rgba(26, 188, 156, 0) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0px 0px;
  transition: background-size 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.15s ease;
}
.chip.chip-circle:hover {
  /* Re-declare the dot layer: theme hovers set the background shorthand,
     which would otherwise wipe the gradient image. */
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.45) 99%, rgba(26, 188, 156, 0) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px 44px;
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
}
/* Dark grounds need a brighter dot to read through the frost */
body[class*="theme-"] .chip.chip-circle:hover {
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.8) 99%, rgba(26, 188, 156, 0) 100%);
}
.theme-linkedin .chip.chip-circle:hover,
.theme-facebook .chip.chip-circle:hover {
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.45) 99%, rgba(26, 188, 156, 0) 100%);
}

@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; }
  .card { padding: 40px 20px; }
  .side { min-height: 0; min-width: 0; width: 100%; }
  .chips:not(.chips-secondary) .chip { flex: 1 1 100%; }
  .chips-secondary .chip,
  body[class*="theme-"] .chips-secondary .chip { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}