/*
  socialgen - the landing page of the standalone site (cn.socialgen.dev).

  A copy of the live landing page's styles (apps/web/app/globals.css, the "public" section),
  made self-contained for a host that may sit behind the Great Firewall: no web fonts (the
  Content-Security-Policy in netlify.toml blocks them, and a blocked font is a broken page to a
  reviewer), no remote anything. The type stack is the system one. Inline styles the React page
  uses are classes at the end, because the CSP also blocks style attributes.
*/
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root {
  /*
    Dark first. The light theme is the opt-in now, not the default: this is a tool for
    looking at photographs and video frames, and a bright chrome around them shifts how
    every image reads. Neutral greys rather than tinted ones, for the same reason - a blue
    cast in the shell becomes a blue cast in your judgement of the artwork.
  */
  color-scheme: dark;

  /* Neutrals. A single ramp, no hue: #0A0A0A -> #171717 -> #262626 -> #A4A4A4 -> #FAFAFA. */
  --bg: oklch(0.145 0 0);          /* #0A0A0A */
  --bg-sunken: oklch(0.115 0 0);
  --surface: oklch(0.185 0 0);     /* #171717 */
  --surface-2: oklch(0.235 0 0);   /* #262626 */
  --surface-3: oklch(0.275 0 0);
  --line: oklch(1 0 0 / 0.09);
  --line-strong: oklch(1 0 0 / 0.17);

  --text: oklch(0.985 0 0);        /* #FAFAFA */
  --text-2: oklch(0.72 0 0);       /* #A4A4A4 */
  --text-3: oklch(0.56 0 0);

  /*
    One accent, and it is green because the thing this tool reports is growth. It marks the
    primary action and a positive delta, and nothing else - the moment a second hue starts
    competing for "important", neither reads as important.
  */
  --accent: oklch(0.72 0.16 162);  /* #00BC7D, lifted for contrast on a dark ground */
  --accent-hover: oklch(0.78 0.16 162);
  --accent-soft: oklch(0.28 0.06 162);
  --accent-text: oklch(0.145 0 0);

  --danger: oklch(0.65 0.2 25);
  --danger-soft: oklch(0.28 0.08 25);
  --warn: oklch(0.78 0.15 80);
  --warn-soft: oklch(0.3 0.07 80);
  --ok: var(--accent);
  --ok-soft: var(--accent-soft);

  /*
    Chart ramp. Ordered by how often a series is the one being read, not by hue family, so
    a two-series chart is always the two most separable colours. Every one clears 4.5:1 on
    --surface, because a legend nobody can match to a line is a decorative legend.
  */
  --chart-1: oklch(0.72 0.16 162);
  --chart-2: oklch(0.75 0.14 235);
  --chart-3: oklch(0.8 0.15 85);
  --chart-4: oklch(0.7 0.18 330);
  --chart-5: oklch(0.75 0.13 25);
  --chart-6: oklch(0.68 0.1 285);
  --grid: oklch(1 0 0 / 0.06);

  --img-outline: oklch(1 0 0 / 0.12);

  /*
    Elevation is a hairline ring plus a soft drop, taken from the reference. The ring is
    what makes a surface read as a surface on a near-black ground, where a shadow alone is
    almost invisible.
  */
  --shadow-1: 0 0 0 1px oklch(1 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 0 0 1px oklch(1 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.35), 0 8px 20px oklch(0 0 0 / 0.35);
  --shadow-3: 0 0 0 1px oklch(1 0 0 / 0.07), 0 25px 50px -12px oklch(0 0 0 / 0.6);

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
/* ------------------------------------------------------------------ public

  The public site: landing page, legal pages and the studio. Scoped under .pub so nothing
  here reaches the operator shell, and written against the same tokens.

  The operator GUI is dark by design (see :root). The public pages follow the visitor's
  system setting instead, because they are a product page and a creator tool used on phones
  as often as laptops, where a forced dark page reads as broken in a light browser. `:has`
  lets the page swap the root tokens - and so the body's own background - without a script.
*/
@media (prefers-color-scheme: light) {
  :root:has(.pub) {
    color-scheme: light;
    --bg: oklch(0.985 0 0);
    --bg-sunken: oklch(0.965 0 0);
    --surface: oklch(1 0 0);
    --surface-2: oklch(0.965 0 0);
    --surface-3: oklch(0.93 0 0);
    --line: oklch(0 0 0 / 0.08);
    --line-strong: oklch(0 0 0 / 0.16);
    --text: oklch(0.16 0 0);
    --text-2: oklch(0.44 0 0);
    --text-3: oklch(0.58 0 0);
    --accent: oklch(0.56 0.15 162);
    --accent-hover: oklch(0.5 0.15 162);
    --accent-soft: oklch(0.94 0.04 162);
    --accent-text: oklch(1 0 0);
    --danger: oklch(0.55 0.2 25);
    --danger-soft: oklch(0.95 0.03 25);
    --warn: oklch(0.55 0.13 70);
    --warn-soft: oklch(0.96 0.05 80);
    --img-outline: oklch(0 0 0 / 0.1);
    --shadow-1: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.05);
    --shadow-2: 0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.05), 0 8px 20px oklch(0 0 0 / 0.06);
    --shadow-3: 0 0 0 1px oklch(0 0 0 / 0.07), 0 24px 48px -16px oklch(0 0 0 / 0.22);
  }
}

.pub { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); line-height: 1.55; }
/* Zero specificity, so a link styled as a button keeps the button's colours. */
.pub :where(a) { color: inherit; }
.pub h1, .pub h2, .pub h3, .pub p { margin: 0; }
.pub-main { flex: 1; }
.pub-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .pub-wrap { padding-inline: 24px; } }
.pub-narrow { max-width: 760px; }

/* Header and footer. */
.pub-head {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklch, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--line);
}
.pub-bar { display: flex; align-items: center; gap: 12px; height: 60px; }
.pub-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; }
.pub-mark { width: 24px; height: 24px; display: block; background: url(logo.png) center / contain no-repeat; }
.pub-nav { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; }
.pub-nav > a:not(.pub-btn) {
  padding: 7px 11px; border-radius: 999px; font-size: 14px; color: var(--text-2); text-decoration: none;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.pub-nav > a:not(.pub-btn):hover, .pub-nav > a[aria-current='page'] { color: var(--text); background: var(--surface-2); }
@media (max-width: 720px) { .pub-nav .pub-wide-only { display: none; } }

.pub-foot { border-block-start: 1px solid var(--line); padding-block: 32px 44px; margin-block-start: auto; }
.pub-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.pub-foot-row a { color: var(--text-2); text-decoration: none; font-size: 14px; }
.pub-foot-row a:hover { color: var(--text); }
.pub-foot-who { margin-inline-start: auto; font-size: 13.5px; color: var(--text-3); }

/* Buttons. */
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding-inline: 20px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s var(--ease), opacity .15s var(--ease), transform .1s var(--ease);
}
.pub-btn:hover { background: var(--surface-3); }
.pub-btn:active { transform: translateY(1px); }
.pub-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.pub-btn--ink { background: var(--text); color: var(--bg); }
.pub-btn--ink:hover { background: var(--text); opacity: .86; }
.pub-btn--ink:disabled:hover { opacity: .42; }
.pub-btn--accent { background: var(--accent); color: var(--accent-text); }
.pub-btn--accent:hover { background: var(--accent-hover); }
.pub-btn--danger { background: var(--danger-soft); color: var(--danger); }
.pub-btn--danger:hover { background: var(--danger-soft); opacity: .85; }
.pub-btn--quiet { background: transparent; color: var(--text-2); }
.pub-btn--quiet:hover { background: var(--surface-2); color: var(--text); }
.pub-btn--sm { height: 34px; padding-inline: 14px; font-size: 13.5px; }
.pub-btn--lg { height: 52px; padding-inline: 26px; font-size: 16px; }
.pub-btn--block { width: 100%; }

/* Type. */
.pub-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 13px; font-weight: 500; color: var(--text-2);
}
.pub-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pub-display { font-size: clamp(40px, 6.6vw, 70px); line-height: 1.02; letter-spacing: -0.036em; font-weight: 650; text-wrap: balance; }
.pub-h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.08; letter-spacing: -0.028em; font-weight: 650; text-wrap: balance; }
.pub-h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pub-lede { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.55; color: var(--text-2); max-width: 56ch; text-wrap: pretty; }
.pub-muted { color: var(--text-2); }
.pub-fine { font-size: 13.5px; color: var(--text-3); }
.pub-kicker { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; }

/* Landing sections. */
.pub-section { padding-block: clamp(64px, 10vw, 112px); }
.pub-section + .pub-section { border-block-start: 1px solid var(--line); }
.pub-section-head { display: grid; gap: 14px; max-width: 680px; margin-block-end: 40px; }
.pub-hero { padding-block: clamp(48px, 9vw, 104px) clamp(56px, 9vw, 104px); overflow: hidden; }
.pub-hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 940px) { .pub-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }
.pub-hero-copy { display: grid; gap: 22px; justify-items: start; }
.pub-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* The hero's fanned slides: what a studio slideshow looks like, drawn in CSS. */
.pub-fan { position: relative; height: clamp(380px, 52vw, 520px); }
.pub-fan-slide {
  position: absolute; top: 50%; left: 50%; width: clamp(180px, 23vw, 248px); aspect-ratio: 9 / 16;
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-3);
  display: grid; place-items: center; padding: 18px; text-align: center;
}
.pub-fan-slide:nth-child(1) { transform: translate(-112%, -46%) rotate(-7deg); }
.pub-fan-slide:nth-child(2) { transform: translate(-50%, -52%); z-index: 2; }
.pub-fan-slide:nth-child(3) { transform: translate(12%, -46%) rotate(7deg); }
.pub-chip-text {
  display: inline; padding: 0.18em 0.42em; border-radius: 0.38em; line-height: 1.5;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: #fff; color: #000; font-weight: 700; font-size: clamp(15px, 1.8vw, 19px); letter-spacing: -0.01em;
}
.pub-fan-meta { position: absolute; inset-inline: 0; bottom: 14px; display: flex; justify-content: center; gap: 5px; }
.pub-fan-meta i { width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / .5); }
.pub-fan-meta i:first-child { background: #fff; }
.pub-fan-card {
  position: absolute; z-index: 3; right: 2%; bottom: 4%; width: min(250px, 70%);
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-3); padding: 14px; display: grid; gap: 10px;
  font-size: 13px;
}
.pub-fan-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text-2); }
.pub-fan-card .val { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .pub-fan-slide:nth-child(1) { transform: translate(-96%, -46%) rotate(-7deg); }
  .pub-fan-slide:nth-child(3) { transform: translate(-4%, -46%) rotate(7deg); }
  .pub-fan-card { right: 0; }
}

.pub-grid { display: grid; gap: 16px; }
.pub-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pub-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pub-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.pub-card { background: var(--surface); border-radius: var(--radius-outer); box-shadow: var(--shadow-1); padding: 22px; }
.pub-feature { display: grid; gap: 10px; align-content: start; }
.pub-feature p { color: var(--text-2); font-size: 15px; }
.pub-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.pub-steps { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 860px) { .pub-steps { grid-template-columns: repeat(3, 1fr); } }
.pub-step { display: grid; gap: 8px; align-content: start; }
.pub-step::before {
  counter-increment: step; content: counter(step);
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-block-end: 6px;
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pub-step p { color: var(--text-2); font-size: 15px; }
.pub-checks { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.pub-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--text-2); font-size: 15.5px; }
.pub-checks li::before {
  content: ''; width: 20px; height: 20px; margin-block-start: 2px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2300a36c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.pub-checks strong { color: var(--text); font-weight: 600; }
.pub-price { display: grid; gap: 14px; justify-items: start; }
.pub-price .amount { font-size: clamp(40px, 5vw, 56px); font-weight: 650; letter-spacing: -0.03em; line-height: 1; }

/* Legal documents. */
.pub-legal { padding-block: 48px 88px; }
.pub-legal h1 { font-size: clamp(30px, 4.4vw, 42px); letter-spacing: -0.03em; font-weight: 650; line-height: 1.1; }
.pub-legal .updated { font-size: 14px; color: var(--text-3); margin-block: 10px 34px; }
.pub-legal h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin-block: 36px 10px; }
.pub-legal h3 { font-size: 16px; font-weight: 600; margin-block: 22px 6px; }
.pub-legal p, .pub-legal li { font-size: 15.5px; color: var(--text-2); }
.pub-legal p + p { margin-block-start: 12px; }
.pub-legal ul { margin: 12px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.pub-legal a { color: var(--accent); }
.pub-legal strong { color: var(--text); font-weight: 600; }
.pub-legal dl { margin: 12px 0 0; display: grid; gap: 10px; }
.pub-legal dt { font-size: 13px; color: var(--text-3); }
.pub-legal dd { margin: 0; font-size: 15.5px; color: var(--text); }
.pub-legal table { width: 100%; border-collapse: collapse; margin-block-start: 14px; font-size: 14.5px; }
.pub-legal th, .pub-legal td { text-align: start; vertical-align: top; padding: 10px 12px 10px 0; border-block-end: 1px solid var(--line); color: var(--text-2); }
.pub-legal th { color: var(--text); font-weight: 600; font-size: 13.5px; }
.pub-legal .pub-table-scroll { overflow-x: auto; }


/* The React page's inline styles, as classes (the CSP blocks style attributes). */
.pub-fan-slide--a { background: radial-gradient(120% 90% at 30% 20%, #2f5d50, #0d1f1a 70%); }
.pub-fan-slide--b { background: radial-gradient(130% 100% at 70% 15%, #f2b88a, #a4583a 45%, #2b1410 85%); }
.pub-fan-slide--c { background: #ffe894; }
.pub-fan-ink { color: #000; font-weight: 700; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.3; }
.pub-fan-meta--invert { filter: invert(1); }
.pub-control { align-items: center; gap: 40px; }
.pub-stack-14 { display: grid; gap: 14px; }
.pub-stack-12 { display: grid; gap: 12px; }
.pub-price--pad { padding: clamp(24px, 4vw, 40px); }
.pub-h2--sm { font-size: clamp(24px, 3vw, 32px); }