/* CONTEXT
   module: websites/pgpro365
   purpose: The modern, Apple-style finish, loaded last: full-width pages, a centred hero with one large headline and the laptop and phone shown big below it, quiet typography with generous space, pill buttons, and soft cards. It changes looks only; the markup and the checks stay as they are.
   route: none   permission: none   tenant: not applicable   audience: public
   tests: lib/check.mjs (size) */

:root {
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 22px;
  --shadow: 0 1px 2px rgb(15 23 42 / .05), 0 20px 50px -24px rgb(15 23 42 / .2);
}
@media (prefers-color-scheme: dark) {
  :root { --shadow: 0 20px 50px -24px rgb(0 0 0 / .7); }
}

/* Full-screen layout: content spans the window, with a comfortable gutter */
.wrap { width: min(1440px, 100% - 2 * var(--gutter)); }
.narrow { width: min(820px, 100% - 2 * var(--gutter)); }
body { font-size: 1.0625rem; letter-spacing: -.005em; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.06; }
h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }

/* Hero: centred, black, one headline, product shown large */
.hero-dark { background: #000; color: #f5f5f7; text-align: center; padding: clamp(4.5rem, 10vw, 7rem) 0 0; min-height: 0; }
.hero-dark::before { background:
  radial-gradient(900px 520px at 50% 62%, rgb(45 212 191 / .16), transparent 70%),
  radial-gradient(700px 480px at 85% 10%, rgb(99 102 241 / .18), transparent 70%); }
.hero-dark .wrap { width: min(1440px, 100% - 2 * var(--gutter)); }
.hero-dark .eyebrow.pill-e { background: transparent; border: 0; color: #86868b; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0; box-shadow: none; margin-bottom: 1rem; }
.hero-dark h1 { color: #f5f5f7; font-size: clamp(3.2rem, 8.4vw, 7.4rem); font-weight: 700; letter-spacing: -.055em; line-height: .98; max-width: 14ch; margin: 0 auto .3em; }
.hero-dark .grad { background: linear-gradient(90deg, #f5f5f7 0%, #5eead4 60%, #2dd4bf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-dark .lead { color: #a1a1a6; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.4; max-width: 38rem; margin: 0 auto; letter-spacing: -.01em; }
.hero-dark .actions { justify-content: center; margin: 2rem 0 0; gap: 1.25rem; }
.hero-dark .btn { background: #2dd4bf; border-color: #2dd4bf; color: #fff; box-shadow: none; border-radius: 999px; padding: .8rem 1.6rem; font-weight: 500; font-size: 1.05rem; }
.hero-dark .btn:hover { background: #14b8a6; border-color: #14b8a6; color: #fff; }
.hero-dark .btn-ghost { background: transparent; color: #2dd4bf; border: 0; padding: .8rem .4rem; box-shadow: none; backdrop-filter: none; font-weight: 500; font-size: 1.05rem; }
.hero-dark .btn-ghost::after { content: "\203A"; margin-left: .3rem; font-size: 1.3em; line-height: 1; }
.hero-dark .btn-ghost:hover { color: #5eead4; background: transparent; border: 0; }
.hero-dark .kinds { justify-content: center; margin: 2.2rem auto 0; max-width: 60rem; }
.hero-dark .kinds-label { color: #6e6e73; }
.hero-dark .kinds a { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .04); color: #d2d2d7; font-weight: 500; }
.hero-dark .stage { width: min(1320px, 100%); margin: clamp(3rem, 6vw, 5rem) auto 0; }
.hero-dark .stage-note { color: #6e6e73; }

/* Sections: quiet, spacious, Apple-like */
.section.alt { background: #f5f5f7; }
:root:not([data-theme="light"]) { }
.card { background: #fff; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.5rem, 2.4vw, 2.2rem); }
.card p { color: #6e6e73; }
.card .icon { color: #2dd4bf; background: none; padding: 0; }
.btn { background: #14b8a6; border-color: #14b8a6; color: #fff; border-radius: 999px; font-weight: 500; box-shadow: none; }
.btn:hover { background: #14b8a6; border-color: #14b8a6; color: #fff; }
.btn-ghost { background: transparent; color: #2dd4bf; border: 0; }
.btn-ghost:hover { background: transparent; color: #14b8a6; }
a { color: #2dd4bf; }
.site-header { background: rgb(0 0 0 / .72); border-bottom: 0; backdrop-filter: saturate(180%) blur(20px); }
.site-header .brand, .site-header .nav a:not(.btn) { color: #f5f5f7; }
.site-header .nav .signin { color: #a1a1a6; }

@media (prefers-color-scheme: dark) {
  .section.alt { background: #161617; }
  .card { background: #1d1d1f; }
  .card p { color: #a1a1a6; }
  a { color: #2dd4bf; }
}

@media (max-width: 880px) {
  .hero-dark h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .hero-dark .stage { margin-top: 2.5rem; }
  .hero-dark .actions { flex-direction: column; gap: .4rem; }
}

/* One signature look across every page: black canvas, bright type, one blue accent, soft dark cards */
:root {
  --bg: #000; --surface: #111113; --soft: #0b0b0d; --ink: #f5f5f7; --muted: #a1a1a6; --line: #2a2a2e;
  --brand: #2dd4bf; --brand-hover: #5eead4; --brand-ink: #fff; --accent: #2dd4bf; --accent-bg: #0b2a2a;
  --shadow: 0 30px 60px -30px rgb(0 0 0 / .8);
}
body { background: #000; color: var(--ink); }
.section.alt { background: #0b0b0d; }
.card { background: linear-gradient(180deg, #17171a, #101012); border: 1px solid #222226; color: var(--ink); }
.card p { color: var(--muted); }
.card:hover { border-color: #3a3a40; box-shadow: 0 30px 60px -30px rgb(45 212 191 / .25); }
.card .icon { color: var(--brand); background: none; }
.site-header { background: rgb(0 0 0 / .72); border-bottom: 1px solid #1d1d20; }
.nav a:not(.btn), .brand { color: var(--ink); }
.btn { background: var(--brand); border-color: var(--brand); color: #04201c; }
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #04201c; }
.btn-ghost { color: var(--brand); }
.badge { background: #1d1d20; color: var(--ink); }
h1, h2, h3 { color: var(--ink); }
.eyebrow { color: var(--muted); }
.lead, .section-head p { color: var(--muted); }
a { color: var(--brand); }

/* Buttons: ghost variant wins over the solid one */
.btn.btn-ghost, .hero-dark .btn.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.btn.btn-ghost:hover, .hero-dark .btn.btn-ghost:hover { background: rgb(255 255 255 / .06); border-color: #4a4a50; color: var(--ink); }
.actions .btn-ghost:not(.btn) { color: var(--brand); border: 0; }

/* Closing title card: light canvas, huge wordmark, like a film title */
.finale { background: #f5f5f7; color: #0a0a0a; text-align: center; padding: clamp(5rem, 12vw, 10rem) 0 clamp(4rem, 9vw, 7rem); overflow: hidden; }
.finale .wrap { width: 100%; }
.finale-kicker { color: #6e6e73; font-size: clamp(1rem, 1.8vw, 1.35rem); margin: 0 0 1.2rem; letter-spacing: -.01em; }
.finale-word { margin: 0; font-size: clamp(3rem, 19vw, 20rem); font-weight: 800; line-height: .82; letter-spacing: -.07em; color: #0a0a0a; white-space: nowrap; }
.finale-word span { color: #2dd4bf; }
.finale .actions { justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.finale .btn { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.finale .btn:hover { background: #2a2a2e; border-color: #2a2a2e; }
.finale .btn.btn-ghost { background: transparent; border-color: #c7c7cc; color: #0a0a0a; }
.finale .btn.btn-ghost:hover { background: #e8e8ed; color: #0a0a0a; }

/* Spanar band: neutral dark card, no teal block */
.band, .band-in { background: #111113 !important; color: var(--ink); }
.band { border: 1px solid #222226; border-radius: var(--radius); }
.band h2, .band h3 { color: var(--ink); }
.band p { color: var(--muted); }
.band .btn { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0a; }