/* wrkmate.css: WrkMate page. Tokens only. Flat cards, hairlines, square corners. */

/* ---------- Hero ---------- */
.wm-lede { max-width: 46ch; }
.wm-sub { margin-top: var(--space-4); color: var(--text-dim); max-width: 46ch; }
.wm-trust { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: var(--space-6); color: var(--text-faint); font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.wm-vis { max-width: 640px; gap: var(--space-4); align-content: center; }
.wm-vis .c-frame__body { min-height: 19rem; align-content: start; gap: 16px; font-size: 0.875rem; padding: clamp(18px, 2.4vw, 28px); }
.wm-vis figcaption { margin-top: 0; }
@media (min-width: 1000px) { .wm-vis .c-frame__body { min-height: 21rem; font-size: 0.9375rem; } }

@media (max-width: 999px) { .wm-vis { justify-self: start; } }

/* ---------- Columns ---------- */
.wm-cols { display: grid; gap: var(--space-7) var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .wm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wm-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wm-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wm-after { margin-top: var(--space-7); }

/* ---------- What you can say ---------- */
.wm-say { margin-top: var(--space-9); }
.wm-say h3 { font-size: var(--step-2); }
.wm-say__list { margin-top: var(--space-5); border-top: 1px solid var(--text); }
.wm-say__list li { display: grid; gap: 2px; break-inside: avoid; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); position: relative; line-height: 1.45; }
.wm-say__list li::before { content: "$"; position: absolute; left: 0; top: 14px; font-family: var(--font-mono); font-weight: 600; color: var(--text-faint); }
.wm-say__q { color: var(--text); font-weight: 600; }
.wm-say__note { color: var(--text-dim); font-size: 0.9375rem; }
@media (min-width: 900px) { .wm-say__list { column-count: 2; column-gap: var(--space-7); } }

/* ---------- Command categories: flat cards ---------- */
.wm-cats { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .wm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wm-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.wm-cat { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(22px, 2.4vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color var(--dur-2) var(--ease-out); }
.wm-cat:hover { border-color: var(--text-faint); }
.wm-cat__n { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--text-dim); }
.wm-cat h3 { font-size: var(--step-2); }
.wm-cat > p:not(.wm-cat__n) { color: var(--text-dim); line-height: 1.55; }
.wm-cmds { margin-top: auto; min-height: 6.5rem; padding-top: var(--space-4); display: grid; gap: 8px; border-top: 1px solid var(--line); }
.wm-cmds li { position: relative; padding-left: 20px; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.wm-cmds li::before { content: "$"; position: absolute; left: 0; color: var(--term-key); font-weight: 600; }
[data-tone="light"] .wm-cmds li::before { color: var(--text-faint); }

.wm-stats { margin-top: var(--space-9); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .wm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wm-stats .c-stat { border-bottom: 0; border-left: 1px solid var(--line); padding-left: var(--space-5); } .wm-stats .c-stat:first-child { border-left: 0; padding-left: 0; } }

/* ---------- Security rows ---------- */
.wm-secure { display: grid; gap: var(--space-7); }
.wm-secure .c-sechead { margin-bottom: 0; }
.wm-rows { border-top: 1px solid var(--text); }
.wm-rows li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: 22px 0; border-bottom: 1px solid var(--line); }
.wm-rows__n { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--text-dim); padding-top: 5px; }
.wm-rows h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.015em; }
.wm-rows p { color: var(--text-dim); line-height: 1.55; margin-top: 6px; max-width: 56ch; }
@media (min-width: 1000px) { .wm-secure { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; } }

/* ---------- WrkMate vs Bring to Local ---------- */
.wm-btl { display: grid; gap: var(--space-8); }
.wm-btl h2 { font-size: var(--step-4); line-height: 1.04; max-width: 16ch; }
.wm-btl__text > p:not(.c-label) { margin-top: var(--space-5); color: var(--text-dim); font-size: var(--step-0); line-height: 1.6; max-width: 54ch; }
.wm-btl__cta { margin-top: var(--space-6) !important; }
.wm-vs { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-content: start; }
.wm-vs__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(20px, 2.4vw, 32px); }
.wm-vs__col--on { border-color: var(--text); box-shadow: inset 0 3px 0 var(--brand); }
.wm-vs h3 { font-size: var(--step-2); margin-bottom: var(--space-4); }
.wm-vs dl { display: grid; }
.wm-vs dl > div { padding: 14px 0; border-top: 1px solid var(--line); }
.wm-vs dt { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.wm-vs dd { margin: 0; color: var(--text); line-height: 1.45; }
@media (min-width: 700px) { .wm-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wm-btl { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; } }

/* ---------- Cross link ---------- */
.wm-cross__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wm-cross__links .c-btn { min-width: 160px; }
.wm-cross .c-sechead { margin-bottom: var(--space-6); }

/* ---------- FAQ ---------- */
.wm-faq-grid { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) {
  .wm-faq-grid { grid-template-columns: 4fr 8fr; gap: var(--space-9); }
  .wm-faq-grid .c-sechead { margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
}

/* ---------- Finale: type led ---------- */
.wm-finale { background: var(--bg); border-top: 1px solid var(--line); padding-block: var(--section-y); }
.wm-finale h2 { font-size: var(--step-4); line-height: 1.04; max-width: 18ch; }
.wm-finale p { color: var(--text-dim); font-size: var(--step-1); line-height: 1.5; max-width: 52ch; margin-top: var(--space-5); }
.wm-finale .c-finale__ctas { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 700px) { .wm-finale .c-finale__ctas { flex-direction: row; flex-wrap: wrap; } }