/* ─────────────────────────────────────────────────────────────────────────────────────────
   /ai-teammates — loaded by that page alone, after marketing.css and alternative.css, whose
   hero, window, bands, splits, FAQ and closing band it uses as they are. What is here is
   what this page adds: the two people, a morning as a timeline, who decides, the practice
   week, the steps of hiring, the price on the ink band and the safety list.

   The page keeps the app's own teammate rules where it draws the app: in the timeline a
   teammate is a rounded SQUARE and a person a circle. The portraits are the one place a
   teammate is drawn as a person, and each carries "AI" in the picture and beside the name.

   Every colour is a token, except each teammate's own colour, which is the app's
   (teammates.css, .tm-acc-*): violet for Maya, sky for Sam.
   ───────────────────────────────────────────────────────────────────────────────────────── */

.tmk-violet { --p: #7C5CFF; --p-soft: var(--violet-soft); --p-ink: var(--relation-ink); }
.tmk-sky    { --p: #2E9BE6; --p-soft: var(--sky-soft);    --p-ink: var(--lookup-ink); }

/* ── The two people ───────────────────────────────────────────────────────────────────── */
/* One row each, so the portrait is big enough to be somebody. */
.tmk-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: clamp(32px, 4vw, 48px); }
.tmk-persona {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center;
    padding: 14px; border: 1px solid var(--border); border-radius: 28px; background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.tmk-persona:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tmk-portrait { display: block; width: 100%; height: auto; border-radius: 22px; align-self: start; }
.tmk-persona-body { padding: 14px clamp(14px, 2vw, 28px) 14px 0; min-width: 0; }
/* The duties side by side, like a job description's three lines. */
.tmk-persona .tmk-duties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
.tmk-persona .tmk-duties li { padding-top: 14px; }
.tmk-persona-id h3 {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 2.6vw, 38px); line-height: 1; letter-spacing: -.01em;
}
.tmk-ai {
    display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 7px;
    background: var(--ink-900); color: var(--accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.tmk-role { margin: 8px 0 0; color: var(--p-ink); font-size: 14.5px; font-weight: 600; }
.tmk-for { margin: 12px 0 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.tmk-duties { margin: 0; padding: 0; list-style: none; }
.tmk-duties li { padding: 11px 0; border-top: 1px solid var(--border-soft); }
.tmk-duties b { display: block; color: var(--text); font-size: 14.5px; font-weight: 600; }
.tmk-duties span { display: block; margin-top: 3px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.tmk-duties em {
    display: inline-block; margin-top: 7px; padding: 2px 9px; border-radius: 999px;
    background: var(--p-soft); color: var(--p-ink);
    font-family: var(--font-mono); font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: .04em;
}
.tmk-voice { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--border-soft); color: var(--text); font-size: 14px; }
.tmk-voice span {
    margin-right: 8px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}

/* ── A morning, as a timeline ─────────────────────────────────────────────────────────── */
.tmk-morning { align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.tmk-day { position: relative; margin: 0; padding: 0; list-style: none; }
.tmk-day li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; padding-bottom: 26px; }
.tmk-day li:last-child { padding-bottom: 0; }
/* The thread between the marks. Drawn per item so it stops at the last one. */
.tmk-day li:not(:last-child)::before {
    content: ""; position: absolute; left: 20px; top: 46px; bottom: 4px; width: 2px;
    background: linear-gradient(var(--border-2), var(--border-soft)); border-radius: 2px;
}
.tmk-who {
    display: grid; place-items: center; width: 42px; height: 42px; flex: none;
    color: #fff; font-weight: 700; font-size: 14px;
}
/* A teammate is a square, a person a circle: the app's rule, and the one the heading states. */
.tmk-who.ai { border-radius: 11px; background: var(--p, #7C5CFF); box-shadow: 0 8px 18px -10px var(--p, #7C5CFF); }
.tmk-who.person { border-radius: 50%; background: var(--sky); font-size: 13px; }
.tmk-when { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tmk-day b { display: block; margin-top: 4px; color: var(--text); font-size: 17px; letter-spacing: -.01em; }
.tmk-day p { margin: 5px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.tmk-tag {
    display: inline-block; margin-top: 9px; padding: 2px 9px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
}
.tmk-tag.notice  { background: var(--amber-soft);  color: var(--amber-ink); }
.tmk-tag.suggest { background: var(--accent-tint); color: var(--accent-ink); }
.tmk-tag.write   { background: var(--sky-soft);    color: var(--lookup-ink); }
.tmk-tag.person  { background: var(--rose-soft);   color: #A1235C; }
.tmk-tag.expire  { background: var(--paper-2);     color: var(--text-muted); }
.tmk-morning-shots { display: grid; gap: 22px; }
.tmk-card-shot img { max-width: 620px; }

/* ── Who decides ──────────────────────────────────────────────────────────────────────── */
.tmk-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.tmk-level { padding: 26px 24px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.tmk-level.is-gate { border-color: var(--accent-deep); background: var(--accent-tint-2); }
.tmk-level-n {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    background: var(--ink-900); color: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.tmk-level h3 { margin: 16px 0 0; font-size: 21px; letter-spacing: -.012em; }
.tmk-level p { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.tmk-ends { margin-top: 18px; padding: 22px 24px; border: 1px dashed var(--border-2); border-radius: var(--radius-lg); }
.tmk-ends ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 14px 0 0; padding: 0; list-style: none; }
.tmk-ends b { display: block; color: var(--text); font-size: 15px; }
.tmk-ends span { display: block; margin-top: 4px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* ── The practice week ────────────────────────────────────────────────────────────────── */
.tmk-practice {
    --p: #7C5CFF;
    padding: 26px; border: 1px solid var(--border); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-lg);
}
.tmk-practice-top { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 14.5px; }
.tmk-practice-top b { color: var(--text); }
.tmk-practice-top .tmk-who { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.tmk-practice-days { display: flex; gap: 6px; margin-top: 16px; }
.tmk-practice-days i { flex: 1; height: 8px; border-radius: 4px; background: var(--border); }
.tmk-practice-days i.done { background: var(--p); }
.tmk-practice-ask {
    display: grid; gap: 8px; justify-items: start; margin-top: 20px; padding: 18px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--card-2);
}
.tmk-practice-ask > b { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.tmk-chip {
    padding: 2px 9px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-ink);
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
}
.tmk-practice-diff { color: var(--text); font-size: 14.5px; }
.tmk-practice-diff s { color: var(--text-muted); }
.tmk-practice-btn {
    margin-top: 4px; padding: 7px 14px; border-radius: 10px; background: var(--accent); color: var(--ink-900);
    font-size: 13.5px; font-weight: 600;
}
.tmk-practice-note { margin: 14px 0 0; color: var(--formula-ink); font-size: 13.5px; font-weight: 600; }

/* ── Hiring, in four steps ────────────────────────────────────────────────────────────── */
.tmk-steps { display: grid; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.tmk-steps li { position: relative; padding-left: 44px; color: var(--text-2); font-size: 15px; line-height: 1.5; counter-increment: step; }
.tmk-steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
    background: var(--ink-900); color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.tmk-steps b { display: block; color: var(--text); font-size: 16px; }

/* ── Price, on the ink band ───────────────────────────────────────────────────────────── */
.tmk-ink-copy h2 { color: var(--paper); }
.tmk-ink-copy h2 em, .tmk-ink-copy .section-kicker { color: var(--accent); }
.tmk-ink-copy > p { color: rgba(255,255,255,.74); }
.alt .tmk-ink-copy .alt-more { color: var(--accent); }
.alt .tmk-ink-copy .alt-more:hover { color: var(--paper); border-bottom-color: var(--accent); }
.tmk-price {
    padding: clamp(26px, 3vw, 40px); border: 1px solid rgba(255,255,255,.14); border-radius: 26px;
    background: rgba(255,255,255,.05);
}
.tmk-price-big {
    display: block; color: var(--accent);
    font-family: var(--font-display); font-weight: 600; font-size: clamp(52px, 6vw, 80px); line-height: .95; letter-spacing: -.02em;
}
.tmk-price-sub { display: block; margin-top: 12px; color: rgba(255,255,255,.7); font-size: 15px; }
.tmk-limits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tmk-limits span {
    padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
    color: rgba(255,255,255,.78); font-size: 13.5px;
}
.tmk-limits b { display: block; color: var(--paper); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.tmk-limits .is-default { border-color: var(--accent); }
.tmk-limits .is-default b { color: var(--accent); }
.tmk-price p { margin: 20px 0 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.55; }

/* ── Safety ───────────────────────────────────────────────────────────────────────────── */
.tmk-safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 44px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.tmk-safety li { position: relative; padding-left: 32px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.tmk-safety li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.1 3.1 6.5-6.9' fill='none' stroke='%230E1428' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tmk-safety b { color: var(--text); font-weight: 600; }

/* ── Narrower screens ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .tmk-persona { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
    .tmk-persona .tmk-duties { grid-template-columns: minmax(0, 1fr); }
    .tmk-ends ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .tmk-persona { grid-template-columns: minmax(0, 1fr); }
    .tmk-portrait { max-width: 360px; }
    .tmk-persona-body { padding: 4px 6px 6px; }
    .tmk-levels, .tmk-safety, .tmk-ends ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .tmk-persona, .tmk-persona:hover { transition: none; transform: none; }
}