/* Signopedia's landing in the D4U Store. Only what is inside <main class="sg">; the shell keeps its own styles.
   Colors and type are the app's (mobile-ios/SignopediaApp/Brand/tokens.json, Figtree). */

@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

body { margin: 0; background: var(--sh-bg); color: var(--sh-ink); font-family: var(--sh-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.sg {
  --sg-bg: #FFFFFF; --sg-alt: #F6F5FA; --sg-surface: #FFFFFF; --sg-ink: #17172B; --sg-muted: #5D5B73; --sg-line: #ECEAF3;
  --sg-primary: #6A2FE0; --sg-on-primary: #FFFFFF; --sg-tint: #F1EBFE;
  --sg-band-start: #E3EEF8; --sg-band-end: #E6DDFA; --sg-brand-start: #7A3FF2; --sg-brand-end: #FF5E7E;

  display: block; background: var(--sg-bg); color: var(--sg-ink); font: 400 var(--sh-fs-body)/1.6 "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sg {
    --sg-bg: #0E0E1A; --sg-alt: #13132A; --sg-surface: #1A1A2E; --sg-ink: #F4F3FA; --sg-muted: #B9B7CF; --sg-line: #2E2D48;
    --sg-primary: #B99BFF; --sg-on-primary: #17172B; --sg-tint: #2A2150;
    --sg-band-start: #1B2A40; --sg-band-end: #2B2250;
  }
}
:root[data-theme="dark"] .sg {
  --sg-bg: #0E0E1A; --sg-alt: #13132A; --sg-surface: #1A1A2E; --sg-ink: #F4F3FA; --sg-muted: #B9B7CF; --sg-line: #2E2D48;
  --sg-primary: #B99BFF; --sg-on-primary: #17172B; --sg-tint: #2A2150;
  --sg-band-start: #1B2A40; --sg-band-end: #2B2250;
}

/* Logo with a light and a dark version */
.sg .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sg .logo-light { display: none; }
  :root:not([data-theme="light"]) .sg .logo-dark { display: block; }
}
:root[data-theme="dark"] .sg .logo-light { display: none; }
:root[data-theme="dark"] .sg .logo-dark { display: block; }

.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
/* The only images are the logo and the screens; the screens are sized by the shell's frame. */
.sg-logo { display: block; width: auto; max-width: 100%; }
.sg a:focus-visible { outline: 3px solid var(--sg-primary); outline-offset: 3px; }
.sg h1, .sg h2, .sg h3 { margin: 0; line-height: 1.1; letter-spacing: -.02em; }
.sg h2 { font-size: var(--sh-fs-h2); line-height: 1.1; font-weight: 800; margin-bottom: 22px; }
.sg h3 { font-size: var(--sh-fs-h3); font-weight: 750; }
.sg-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }

/* Hero */
.sg-hero { padding: clamp(40px, 7vw, 96px) 0; background: radial-gradient(110% 90% at 100% 0%, var(--sg-band-end) 0%, transparent 55%), radial-gradient(90% 70% at 0% 100%, var(--sg-band-start) 0%, transparent 60%), var(--sg-bg); overflow: hidden; }
.sg-hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: clamp(32px, 6vw, 80px); }
.sg-logo { height: calc(var(--sh-fs-display) * .8); width: auto; margin-bottom: 28px; }
.sg-hero h1 { font-size: var(--sh-fs-display); font-weight: 900; letter-spacing: -.035em; line-height: 1.03; background: linear-gradient(90deg, var(--sg-brand-start), var(--sg-brand-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sg-line { margin: 20px 0 0; font-size: var(--sh-fs-lead); line-height: 1.5; }
.sg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 0; color: var(--sg-muted); font-size: var(--sh-fs-small); font-weight: 600; }
.sg-status { padding: 4px 12px; border-radius: 999px; background: var(--sg-tint); color: var(--sg-primary); font-weight: 700; font-size: var(--sh-fs-label); }
.sg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.sg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; font-size: var(--sh-fs-button); border-radius: 999px; background: var(--sg-primary); color: var(--sg-on-primary); font-weight: 700; text-decoration: none; }
.sg-btn:hover { filter: brightness(1.08); }
.sg-ghost { background: transparent; color: var(--sg-ink); box-shadow: inset 0 0 0 1.5px var(--sg-line); }
.sg-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sg-primary); color: var(--sg-primary); filter: none; }
/* Phones: the shell's frame (.sh-phone). Only its size and placement are set here. */
.sg-hero-phone { --sh-phone-w: 250px; justify-self: center; }

/* Sections */
.sg-section { padding: clamp(56px, 8vw, 104px) 0; }
.sg-alt { background: var(--sg-alt); }
.sg-lead { margin: 0; font-size: var(--sh-fs-lead); line-height: 1.55; }
.sg-pieces { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 16px; margin: 0 0 clamp(64px, 9vw, 120px); padding: 0; list-style: none; }
.sg-pieces li { padding: 22px; border: 1px solid var(--sg-line); border-radius: 22px; background: var(--sg-surface); }
.sg-pieces p { margin: 8px 0 0; color: var(--sg-muted); font-size: var(--sh-fs-body); }
.sg-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 4vw, 48px); }
.sg-phones .sh-phone { --sh-phone-w: 250px; }
.sg-phones .sh-phone:nth-child(2) { transform: translateY(-24px); }
.sg-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sg-tags li { padding: 10px 18px; border-radius: 999px; background: var(--sg-tint); color: var(--sg-primary); font-size: var(--sh-fs-label); font-weight: 700; }
.sg-high { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sg-high li { padding: 24px; border-radius: 22px; background: var(--sg-surface); border: 1px solid var(--sg-line); }
.sg-high p { margin: 10px 0 0; color: var(--sg-muted); font-size: var(--sh-fs-body); }
.sg-num { display: block; margin-bottom: 12px; color: var(--sg-primary); font-weight: 800; letter-spacing: .08em; font-size: var(--sh-fs-label); }
.sg-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sg-numbers li { display: grid; gap: 4px; padding: 22px; border-radius: 22px; background: var(--sg-alt); }
.sg-numbers strong { font-size: var(--sh-fs-h2); font-weight: 900; letter-spacing: -.03em; line-height: 1; background: linear-gradient(90deg, var(--sg-brand-start), var(--sg-brand-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sg-numbers span { color: var(--sg-muted); font-size: var(--sh-fs-small); font-weight: 600; }

/* Close */
.sg-close { padding: clamp(64px, 9vw, 110px) 0; background: linear-gradient(135deg, var(--sg-brand-start), var(--sg-brand-end)); color: #FFFFFF; text-align: center; }
.sg-close h2 { margin-bottom: 26px; }
.sg-close p { margin: 0; }
.sg-light { background: #FFFFFF; color: #17172B; }
.sg-center { justify-content: center; margin: 0; }
.sg-outline { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.sg-outline:hover { background: rgba(255, 255, 255, .14); filter: none; }

/* Four pieces and four decisions: four or two to a row, never three and one alone */
@media (min-width: 1000px) { .sg-pieces { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .sg-pieces, .sg-high { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .sg-hero-grid { grid-template-columns: 1fr; }
  .sg-hero-phone { --sh-phone-w: 220px; }
  .sg-phones { gap: 10px; }
  .sg-phones .sh-phone { --sh-phone-w: calc((100vw - 52px) / 3); }
  .sg-phones .sh-phone:nth-child(2) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-phones .sh-phone { transform: none; }
}