/* ═══════════════════════════════════════════════════════════════════════════
   sk-synq.css — the Synq section
   ───────────────────────────────────────────────────────────────────────────
   OWNS:      .sq and its children.
   REQUIRES:  sk-tokens.css.
   NEVER:     `!important`; never a selector matching the legacy `.synq-*`
              classes, which stay in landing.css unused.

   WHAT CHANGED
   The old section argued by diagram: two columns, one of them a static picture
   of apps feeding a layer. It reads left to right as a sentence instead: what
   you already do, what Synq makes of it, what comes back out and waits for
   your approval. Three stages, an arrow between each. On a phone the arrows
   rotate and the stages stack, which is the same sentence read downwards
   rather than the same layout squeezed.

   Below the flow, `.sq__example` grounds that sentence in one concrete
   instance — a fictional deal with an overdue invoice and an open ticket —
   because nothing else on the page demonstrates Synq once the live product
   demo was retired for real screenshots (see the landing redesign track and
   PRIVATE_DOCS/v3/landing_showcase_fidelity.md). It replaced a two-column
   comparison box whose right side was two short paragraphs next to a
   five-item list: the dead space under the short side, not any single word
   in it, was what made it read as filler.

   `.synq-section` still supplies the background from landing.css. That rule has
   no `!important` and did not need replacing, so it was left alone.
   ═══════════════════════════════════════════════════════════════════════════ */

.sq {
    --sq-line: var(--border-color);
    --sq-soft: var(--bg-body);
    --sq-ink: var(--text-main);
    --sq-muted: var(--text-muted);
}

/* ── The flow ──────────────────────────────────────────────────────────────
   `1fr auto 1fr auto 1fr` keeps the three stages equal and lets the arrows take
   only the room they need, so the middle stage stays centred as copy changes. */
.sq__flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 14px;
    margin: 8px 0 28px;
}

.sq__stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;
    border: 1px solid var(--sq-line);
    border-radius: var(--radius-md);
    background: var(--sq-soft);
}

/* The middle stage is the subject of the sentence, so it carries the accent. */
.sq__stage--core {
    border-color: var(--primary-light);
    background: linear-gradient(180deg, var(--primary-light), var(--sq-soft) 70%);
}

.sq__stage-cap {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
}

.sq__stage-note {
    margin: auto 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--sq-muted);
}

.sq__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.9375rem;
}

/* ── Stage one: the five apps ──────────────────────────────────────────────── */
.sq__apps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
}

.sq__app {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--sq-line);
    border-radius: var(--radius-full);
    background: var(--bg-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.sq__app > i { color: var(--primary); font-size: 0.8125rem; }

/* ── Stage two: the layer ──────────────────────────────────────────────────── */
.sq__core {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.sq__core > i { font-size: 1rem; }

/* ── Stage three: what comes back ──────────────────────────────────────────── */
.sq__out { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }

.sq__out li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.sq__out > li > i { color: var(--success); font-size: 0.8125rem; flex: none; }

/* ── The example ──────────────────────────────────────────────────────────────
   Replaces a two-column comparison whose right side was two short paragraphs
   next to a five-item list — the empty space under the short side was the
   actual complaint, not any one word in it. This grounds the flow above in
   one concrete instance instead of restating it in the abstract a second
   time. No gradient, no shadow, no borrowed radius: DS-8 flat treatment,
   the app's own 6px corners on the inner card. */
.sq__example {
    max-width: 640px;
    margin: 0 auto 28px;
}

.sq__example-tag {
    display: block;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sq-muted);
    text-align: center;
}

.sq__example-card {
    padding: 20px 22px;
    border: 1px solid var(--sq-line);
    border-radius: var(--pd-radius-app, 6px);
    background: var(--sq-soft);
}

.sq__example-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 12px;
}
.sq__example-co { font-size: 1rem; font-weight: 700; color: var(--sq-ink); }
.sq__example-deal { font-size: 0.8125rem; color: var(--sq-muted); }

.sq__example-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.sq__flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
}
.sq__flag--risk { background: #fef2f2; color: var(--danger); }
.sq__flag--warn { background: var(--amber-bg, #fffbeb); color: #b45309; }

.sq__example-note {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--sq-line);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 767px) {
    .sq__example-card { padding: 16px 18px; }
}

/* ── The three claims ──────────────────────────────────────────────────────── */
.sq__claims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.sq__claim {
    padding: 20px;
    border: 1px solid var(--sq-line);
    border-radius: var(--radius-md);
    background: var(--sq-soft);
}

.sq__claim h3 {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--sq-ink);
}

.sq__claim p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    /* Two stages beside each other and the third below reads as a broken row,
       so below the desktop width the sentence simply runs downwards. */
    .sq__flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .sq__arrow { transform: rotate(90deg); }
    .sq__stage-note { margin-top: 0; }
}

@media (max-width: 767px) {
    .sq__claims { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .sq__stage { padding: 18px 16px; }
    .sq__claim { padding: 16px; }
    .sq__core { width: 100%; font-size: 1rem; padding: 14px 16px; }
}