/* SongLit product pages · royan.se/songlit/
   Loaded after style.css and inherits every token from it — surfaces, ink,
   the signal-orange accent, the Apple system stack and the square geometry.
   Nothing here redefines the design system; it only adds the layouts these
   three pages need. SongLit's own violet and gold appear as product colour
   only, inside the app imagery and the two swatch chips. */

/* ── Sub-page chrome ─────────────────────────────────────────────── */

/* The primary nav points at same-page anchors on the homepage, so on a
   sub-page every link is absolute (/#services). This crumb gives the reader
   the way back that a single-page nav otherwise doesn't. */
.sl-crumb {
    padding: 128px 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--subtle);
}
.sl-crumb a { color: var(--subtle); text-decoration: none; }
.sl-crumb a:hover { color: var(--accent); }
.sl-crumb span { margin: 0 0.5em; }

/* ── Product hero ────────────────────────────────────────────────── */

.sl-hero { padding: 40px 0 96px; }

.sl-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
}

.sl-id { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.sl-id img { width: 68px; height: 68px; display: block; }
.sl-id-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.sl-id-meta { font-size: 0.9rem; color: var(--muted); margin-top: 2px; }

.sl-title {
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}
.sl-title em { font-style: italic; color: var(--accent); }

.sl-sub {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    color: var(--muted);
    max-width: 46ch;
    margin: 0 0 2em;
}

.sl-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sl-status {
    font-size: 0.85rem;
    color: var(--subtle);
    border-left: 2px solid var(--accent-line);
    padding-left: 12px;
}

/* The app window sits directly on the page. drop-shadow follows the alpha,
   so the window's rounded corners cast a real shadow — box-shadow would
   draw a rectangle behind them. */
.sl-shot {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 26px 50px rgba(10, 10, 8, 0.24));
}

/* ── Alternating feature rows ────────────────────────────────────── */

.sl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    padding: clamp(48px, 7vw, 88px) 0;
    border-top: 1px solid var(--border-soft);
}
/* nth-of-type, not nth-child: the rows share a parent with the section header,
   so nth-child would flip the whole alternation if a header were ever added or
   removed above them. */
.sl-row:nth-of-type(even) .sl-row-art { order: -1; }

.sl-row h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.12;
    margin: 0 0 0.55em;
    text-wrap: balance;
}
.sl-row h3 em { font-style: italic; color: var(--accent); }
.sl-row p { color: var(--muted); line-height: 1.65; margin: 0 0 1em; max-width: 46ch; }
.sl-row p:last-child { margin-bottom: 0; }

.sl-kicker {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1em;
}

/* ── Spec list ───────────────────────────────────────────────────── */

.sl-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    margin-top: 8px;
}
.sl-spec { background: var(--bg); padding: 26px 24px; }
.sl-spec dt {
    font-size: 0.76rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 8px;
}
.sl-spec dd { margin: 0; font-size: 1.02rem; line-height: 1.5; }

/* ── Brand swatches ──────────────────────────────────────────────── */

.sl-swatches { display: flex; gap: 10px; margin-top: 14px; }
.sl-swatch { width: 34px; height: 34px; border: 1px solid var(--border); }

/* ── Long-form document pages (privacy, support) ─────────────────── */

.sl-doc { padding: 32px 0 104px; }
.sl-doc-head { max-width: 62ch; margin-bottom: 12px; }
.sl-doc-body { max-width: 72ch; }

.sl-doc-body h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.024em;
    margin: 2.4em 0 0.6em;
    text-wrap: balance;
}
.sl-doc-body h3 {
    font-size: 1.06rem;
    font-weight: 650;
    margin: 1.9em 0 0.45em;
}
/* style.css opens with `* { margin: 0; padding: 0 }`, so prose spacing has to
   be stated explicitly here or consecutive paragraphs butt together. */
.sl-doc-body p,
.sl-doc-body li { color: var(--ink-2); line-height: 1.72; }
.sl-doc-body p { margin: 0 0 1.15em; }
.sl-doc-body ul, .sl-doc-body ol { margin: 0 0 1.15em; }
/* style.css resets `ul, ol { list-style: none }` site-wide, which is right for
   nav and footer lists but wrong for prose — these are real enumerations and
   need their markers back. */
.sl-doc-body ul { list-style: disc; padding-left: 1.4em; }
.sl-doc-body ol { list-style: decimal; padding-left: 1.4em; }
.sl-doc-body li::marker { color: var(--subtle); }
.sl-doc-body li { margin-bottom: 0.45em; }
.sl-doc-body a { color: var(--accent); }

.sl-effective {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 1.2em;
}

.sl-note {
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    padding: 20px 24px;
    margin: 1.8em 0;
}
.sl-note p { margin: 0; }
.sl-note p + p { margin-top: 0.7em; }

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.sl-table-wrap { overflow-x: auto; margin: 1.6em 0; }
.sl-table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 0.94rem; }
.sl-table th, .sl-table td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}
.sl-table thead th {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--subtle);
    border-bottom: 1px solid var(--rule);
}
.sl-table td:first-child { white-space: nowrap; font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .sl-hero-inner,
    .sl-row { grid-template-columns: 1fr; }
    /* Art leads on narrow screens regardless of the desktop alternation. */
    .sl-row:nth-of-type(even) .sl-row-art { order: 0; }
    .sl-crumb { padding-top: 104px; }
    .sl-shot { max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
    .sl-shot { filter: drop-shadow(0 10px 20px rgba(10, 10, 8, 0.18)); }
}