/* SignageDock pages. Kept in their own folder so they can move to signagedock.com as they are. */
:root {
    --bg: #0b1020; /* the midnight of pesystemsllc.com */
    --ink: #e6efee;
    --muted: #9fb2b4;
    --teal: #0f766e;
    --teal-2: #2dd4bf;
    --brand-teal: #095450;
    --mint: #7cfcbc;
    --on-mint: #063b37;
    --line: rgba(255,255,255,.09);
    --card: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    --radius: 16px;
    --shadow: 0 18px 40px rgba(0,0,0,.4);
    --shadow-sm: 0 6px 18px rgba(0,0,0,.25);
    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box }

html { scroll-behavior: smooth; scroll-padding-top: 80px }

body {
    margin: 0;
    background:
        radial-gradient(1100px 700px at 85% -10%, rgba(45,212,191,.16), transparent 60%),
        radial-gradient(900px 600px at 5% 5%, rgba(124,252,188,.08), transparent 55%),
        var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
}

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

.wrap {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 700px) {
    .wrap { padding-inline: 32px }
}

/* Header */
header.sd-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    background: rgba(11,16,32,.78);
    border-bottom: 1px solid var(--line);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .2px;
    color: var(--ink);
}

.brand:hover { text-decoration: none }
.brand img { width: 36px; height: 36px; display: block }
.brand small { font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: 0 }

.nav nav { display: flex; flex-wrap: wrap; gap: 2px }

.nav nav a {
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 15px;
}

.nav nav a:hover { background: rgba(255,255,255,.06); text-decoration: none }

/* Sign in: the way to the app, set apart from the page's own links. */
.nav nav a.signin { color: var(--mint); box-shadow: inset 0 0 0 1px rgba(124,252,188,.4); margin-left: 6px }
.nav nav a.signin:hover { background: rgba(124,252,188,.1) }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: #12192f;
    color: var(--ink);
    font-weight: 650;
    box-shadow: var(--shadow-sm);
}

.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow) }

.btn.primary {
    background: linear-gradient(135deg, var(--mint), var(--teal-2));
    border-color: transparent;
    color: var(--on-mint);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(124,252,188,.3);
    background: rgba(124,252,188,.08);
    color: var(--mint);
    font-size: 13px;
    font-weight: 600;
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    padding-block: 64px 48px;
}

.hero h1 {
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.1;
    margin: 18px 0 16px;
    letter-spacing: -.5px;
}

.hero h1 span {
    background: linear-gradient(135deg, var(--mint), var(--teal-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p.lead { color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); margin: 0 }
.hero .fine { color: var(--muted); font-size: 14px; margin-top: 14px }

/* The example TV in the hero */
.tv { max-width: 560px; width: 100%; margin-inline: auto }

.tv-screen {
    container-type: inline-size;
    aspect-ratio: 16 / 9;
    border: 10px solid #05070d;
    border-radius: 14px;
    background: linear-gradient(160deg, #0d3b38, #07201f 70%);
    box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.08);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: #f4fbf9;
    font-size: 14px;
}

.tv-stand { width: 18%; height: 18px; margin: 0 auto; background: #1d2433; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%) }
.tv-base { width: 34%; height: 8px; margin: 0 auto; border-radius: 6px; background: #1d2433 }

.m-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3cqw 4cqw 1cqw;
}

.m-title { font-weight: 800; font-size: 5cqw; letter-spacing: .02em }
.m-clock { font-size: 3.4cqw; font-weight: 600; color: var(--mint); font-variant-numeric: tabular-nums }

.m-body {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3cqw;
    padding: 1cqw 4cqw 2cqw;
    min-height: 0;
}

.m-sec {
    font-size: 2.3cqw;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
    margin: 1.2cqw 0 .6cqw;
}

.m-sec:first-child { margin-top: 0 }

.m-item { display: flex; align-items: baseline; gap: 1cqw; font-size: 2.9cqw; line-height: 1.5 }
.m-item i { flex: 1; border-bottom: .25cqw dotted rgba(255,255,255,.35); transform: translateY(-.6cqw) }
.m-item b { font-variant-numeric: tabular-nums }

.m-side { display: grid; grid-template-rows: 1fr auto; gap: 2cqw; min-height: 0 }

.m-promo {
    border-radius: 2cqw;
    padding: 2.4cqw;
    background:
        radial-gradient(circle at 75% 30%, rgba(255,214,140,.55), transparent 45%),
        linear-gradient(150deg, #b45309, #7c2d12);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.m-promo small { font-size: 2.1cqw; text-transform: uppercase; letter-spacing: .12em; opacity: .9 }
.m-promo strong { font-size: 3.6cqw; line-height: 1.15 }
.m-promo span { font-size: 4.4cqw; font-weight: 800; color: #fff3d6 }

.m-weather {
    display: flex;
    align-items: center;
    gap: 1.6cqw;
    font-size: 2.8cqw;
    padding: 1.4cqw 2cqw;
    border-radius: 2cqw;
    background: rgba(255,255,255,.08);
}

.m-sun {
    width: 3.6cqw;
    height: 3.6cqw;
    border-radius: 50%;
    background: radial-gradient(circle, #fde68a 45%, #f59e0b);
    box-shadow: 0 0 1.6cqw rgba(253,230,138,.7);
}

.m-ticker {
    overflow: hidden;
    white-space: nowrap;
    background: var(--brand-teal);
    border-top: .3cqw solid var(--mint);
    font-size: 2.6cqw;
    padding: 1cqw 0;
}

.m-ticker span { display: inline-block; padding-left: 100%; animation: ticker 18s linear infinite }

@keyframes ticker {
    from { transform: translateX(0) }
    to { transform: translateX(-100%) }
}

@media (prefers-reduced-motion: reduce) {
    .m-ticker span { animation: none; padding-left: 4cqw }
    html { scroll-behavior: auto }
    .btn:hover { transform: none }
}

/* Sections */
section { padding-block: 56px }
section h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; letter-spacing: -.3px }
section p.lead { color: var(--muted); margin: 0 0 28px; max-width: 720px; font-size: 17px }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px;
}

.card h3 { margin: 0 0 8px; font-size: 19px }
.card p { margin: 0; color: var(--muted) }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }

.step-num {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mint), var(--teal-2));
    color: var(--on-mint);
    font-weight: 800;
    margin-bottom: 12px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(45,212,191,.12);
    border: 1px solid rgba(45,212,191,.25);
    margin-bottom: 12px;
}

.feature-icon svg { width: 22px; height: 22px; stroke: var(--mint); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

.chips { display: flex; flex-wrap: wrap; gap: 10px }

.chip {
    padding: 9px 14px;
    border-radius: 999px;
    background: #0f1830;
    border: 1px solid rgba(255,255,255,.12);
    font-size: 15px;
}

.chip small { color: var(--muted); margin-left: 6px }

/* Pricing */
.price-card {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
    padding: 32px 24px;
    border-color: rgba(124,252,188,.3);
}

.price { font-size: 64px; font-weight: 800; line-height: 1; margin: 12px 0 4px; letter-spacing: -1px }
.price small { font-size: 18px; font-weight: 600; color: var(--muted); letter-spacing: 0 }

.checks { list-style: none; padding: 0; margin: 24px auto 0; text-align: left; max-width: 440px; display: grid; gap: 10px }

.checks li { position: relative; padding-left: 30px }

.checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23063b37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.price-card .cta-row { justify-content: center }
.price-card .fine { color: var(--muted); font-size: 14px; margin: 18px 0 0 }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 820px }
.faq details { padding: 0 }
.faq summary {
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 650;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; color: var(--mint); font-size: 24px; font-weight: 400; line-height: 1 }
.faq details[open] summary::after { content: "\2212" }
.faq details p { padding: 0 22px 18px; margin: 0; color: var(--muted) }

/* Contact */
.contact { text-align: center }
.contact .cta-row { justify-content: center }

/* Policy pages */
.doc { max-width: 800px; padding-block: 40px 64px }
.doc h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 6px; letter-spacing: -.3px }
.doc h2 { font-size: 21px; margin: 34px 0 8px }
.doc p, .doc li { color: #c9d6d6 }
.doc .updated { color: var(--muted); font-size: 14px; margin-top: 0 }
.doc .summary { margin: 22px 0 8px }
.doc .summary p { color: var(--ink) }

/* Footer */
footer.sd-footer {
    border-top: 1px solid var(--line);
    padding-block: 28px 48px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

footer.sd-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 8px }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 620px) {
    .grid-3 { grid-template-columns: 1fr }
    .nav { padding-block: 10px }
    .nav nav a { padding: 6px 8px; font-size: 14px }
    .nav nav a.extra { display: none } /* so the menu fits on one line */
    .price { font-size: 52px }
    section { padding-block: 40px }
}