/* ============================================================
   CAN'T CLAUDE OR CHATGPT DO THIS ON THEIR OWN? (#personal-agents, home
   page, 6 Nov 2026).
     table   what running your operations needs, Claude or ChatGPT against
             Askpilot. Where they partly can, a dash and the honest limit
             (research, 6 Nov 2026).
     story   "See it with one lead": one chapter per table row, in the same
             order and tagged with its words, so each point is seen
             happening: the event, what happens with Claude or ChatGPT, what
             Askpilot does. Then the closing line.
   js/personal-agents.js reveals the table rows, then plays the chapters one
   by one. Without JS everything shows.
   ============================================================ */
.pa { padding: 112px 0; border-top: 1px solid var(--line, #EAE3E1); background: var(--cream, #FCF9F7); }

/* ---------- the table (10 Nov 2026, Dom: "bigger titles, better reflect the difference"):
   each cell says what it does in words, Claude or ChatGPT in grey with its honest limit,
   Askpilot in ink on a pink column with a green tick; the column titles carry their logos ---------- */
.pa-table {
    max-width: 1040px; margin: 0 auto; border-radius: 24px; background: #fff; border: 1.5px solid var(--ink, #16121A);
    box-shadow: 0 2px 6px -2px rgba(17, 24, 39, .06), 0 30px 60px -30px rgba(17, 24, 39, .3); overflow: hidden;
}
.pa-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px 250px; align-items: stretch; border-top: 1px solid #F1ECEA; }
.pa-row:first-child { border-top: 0; }
.pa-row > * { display: flex; align-items: center; min-width: 0; padding: 20px 28px; }
.pa-row > :nth-child(2), .pa-row > :nth-child(3) { justify-content: center; text-align: center; }
.pa-row > :nth-child(3) { background: #FCF5FC; }
.pa-need { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; color: var(--ink, #16121A); }
/* each row: the capability in bold, a real example under it in grey (Dom, 6 Nov 2026) */
.pa-row > .pa-need { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.pa-need b { font-weight: 800; }
.pa-need small { font-size: .9375rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: #8B8492; }
/* the column titles: bigger, with their logos */
.pa-row--head > * { padding-top: 24px; padding-bottom: 20px; }
.pa-row--head .pa-need { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #A39BA6; }
.pa-col { flex-direction: column; gap: 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #16121A); }
.pa-col--ap { color: #A3239F; }
.pa-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pa-col .pa-ico { height: 38px; }
.pa-col .pa-ico img { width: 38px; height: 38px; padding: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #EEE8EB; }
.pa-col .pa-ico img + img { margin-left: -9px; }
.pa-col--ap .pa-ico img { padding: 0; box-shadow: none; background: none; width: 34px; height: 34px; }
/* a cell: its mark and its words; the who-label shows on phones only */
.pa-who { display: none; }
.pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pa-a { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pa-t { font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.pa-c--part .pa-t, .pa-c--same .pa-t { color: #8B8492; }
.pa-c--yes .pa-t { color: var(--ink, #16121A); }
.pa-row > :nth-child(2).pa-c--yes .pa-t { color: #4A4350; }
.pa-yes { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #1F9D61; color: #fff; }
.pa-yes svg { width: 16px; height: 16px; }
.pa-same { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #F1ECEA; color: #8B8492; }
.pa-same svg { width: 16px; height: 16px; }
.pa-part-i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #FFF1DC; }
.pa-part-i::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #C98A2E; }

/* ---------- the story: one lead on one clock (Dom's timeline). One pattern all the way
   down: an event in the middle, then Claude or ChatGPT (quiet dashed card, left) and
   Askpilot (dark card, right), each with a short tag naming the key point ---------- */
.pt { --ap: #1A1620; --ap-pink: #F5A9F5; max-width: 1000px; margin: 0 auto; }
.pa .pt { margin-top: 0; }
.pt-intro { position: relative; display: flex; justify-content: center; margin: 0; padding-top: var(--gap); }
.pt-intro::before { content: ""; position: absolute; left: calc(50% - .75px); top: 0; height: var(--gap); border-left: 1.5px dashed #CFC6CB; }
.pt-intro span { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 999px; background: var(--ink, #16121A); color: #fff; font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }   /* bigger (Dom) */
.pt-intro svg { width: 22px; height: 22px; color: var(--ap-pink); }
.pt-logos { display: inline-flex; flex: none; }
.pt-logos img { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #EEE8EB; }
.pt-logos img + img { margin-left: -6px; }
.pt-apl { flex: none; width: 24px; height: 24px; }
/* the events, on the line down the middle */
/* one rhythm (Dom: equal spacing between the boxes): every gap down the story is --gap */
.pt { --gap: 52px; }   /* a bit more room (Dom) */
.pt-event { position: relative; display: flex; justify-content: center; margin: 0; padding: var(--gap) 0 0; }
.pt-event::before { content: ""; position: absolute; left: calc(50% - .75px); top: 0; bottom: 0; border-left: 1.5px dashed #D9D1D5; }
.pt-event span { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px dashed #E58BE5; background: #FDF1FD; color: #8E2183; font-size: .9375rem; font-weight: 600; }
.pt-event b { font-weight: 800; color: #B0279F; }
.pt-event svg { width: 16px; height: 16px; color: #B0279F; }
/* the two answers */
.pt-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: stretch; padding-top: var(--gap); }
.pt-row::before { content: ""; position: absolute; left: calc(50% - .75px); top: 0; bottom: 0; border-left: 1.5px dashed #D9D1D5; }
.pt-t { margin-top: 0; }
.pt-t { position: relative; z-index: 1; align-self: center; justify-self: center; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #E6E0E2; font-size: .8125rem; font-weight: 700; color: #4A4350; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-ai, .pt-ap { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 16px; }
.pt-ai { background: var(--cream, #FCF9F7); border: 1.5px dashed #D9D1D5; }
.pt-ap { background: var(--ap); color: #fff; box-shadow: 0 18px 40px -24px rgba(26, 22, 32, .6); }
.pt-ai p, .pt-ap p { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; margin: 0; }
.pt-tag { margin-bottom: 4px; padding: 3px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pt-ai .pt-tag { background: #ECE6E3; color: #6B6470; }
.pt-ap .pt-tag { background: rgba(245, 169, 245, .16); color: var(--ap-pink); }
.pt-ai b, .pt-ap b { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.pt-ai b { color: #4A4350; }
.pt-ap b { color: #fff; }
.pt-ai small, .pt-ap small { font-size: .875rem; line-height: 1.45; }
.pt-ai small { color: #8B8492; }
.pt-ap small { color: rgba(255, 255, 255, .7); }
.pt-tools-row { margin-top: 8px; }
.pt-tools { display: inline-flex; gap: 4px; }
.pt-tools img { width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: #fff; }
/* the results */
.pt-sums { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); margin-top: var(--gap); }
.pt-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 20px 24px; border-radius: 18px; }
.pt-sum p { margin: 0; }
.pt-sum--ai { grid-column: 1; background: #fff; border: 1px solid #ECE6E3; }
.pt-sum--ap { grid-column: 3; background: var(--ap); color: #fff; box-shadow: 0 26px 50px -24px rgba(26, 22, 32, .55); }
.pt-sum-k { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 800; color: #4A4350; }
.pt-sum--ap .pt-sum-k { color: #fff; }
.pt-k { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8B8492; }
.pt-sum--ap .pt-k { color: rgba(255, 255, 255, .55); }
.pt-sum b { display: block; margin-top: 4px; font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #4A4350; }
.pt-sum--ap b { color: var(--ap-pink); }
.pt-foot { display: flex; justify-content: center; margin: var(--gap) 0 0; }
.pt-foot span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid #ECE6E3; font-size: .9375rem; font-weight: 600; color: #4A4350; text-align: center; }
.pt-foot svg { flex: none; width: 16px; height: 16px; color: #BF27BF; }

/* the end of the line (Dom, 6 Nov 2026: a small grey dashed pill, not a box): it starts again tonight */
.pt-event--end span { border-color: #CFC6CB; background: #F4F0EE; color: #6B6470; }
.pt-event--end b { color: #4A4350; }
.pt-event--end svg { color: #8B8492; }

/* the end of the line: the key points in plain words, in a dashed box the line runs into
   (Dom, 6 Nov 2026: in place of the results and the closing line) */
.pt-end { position: relative; max-width: 620px; margin: var(--gap) auto 0; padding: 26px 32px; border-radius: 20px; border: 1.5px dashed #E58BE5; background: #FDF1FD; }
.pt-end::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: var(--gap); border-left: 1.5px dashed #D9D1D5; }
.pt-end-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #16121A); }
.pt-end-h img { width: 24px; height: 24px; }
.pt-end-l { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pt-end-l li { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--ink, #16121A); }
.pt-end-l svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #1F9D61; color: #fff; }
@media (max-width: 767px) {
    .pt-end { padding: 20px 18px; }
    .pt-end-h { font-size: 1.0625rem; }
    .pt-end-l li { font-size: .9375rem; }
}

/* the progress line (Dom, 10 Nov 2026: "a border that follows the progress"): a brand line
   over the dashed middle line, from the intro down to the part just opened, with a glowing
   dot at its tip; js/personal-agents.js sets its height as each part opens. A moment the
   line has passed turns solid */
.pt { position: relative; }
.pt-rail {
    position: absolute; left: calc(50% - 1.5px); top: 0; z-index: 0; width: 3px; height: 0; border-radius: 3px; pointer-events: none;
    background: linear-gradient(180deg, #EE844C, #D53BD5 30%, #8B5CF6 70%, #4C6BEE);
    transition: height .6s cubic-bezier(.3, .8, .2, 1), opacity .3s ease; opacity: 0;
}
.pt-rail.is-on { opacity: 1; }
.pt-rail::after {
    content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
    background: #fff; border: 3px solid #D53BD5; box-sizing: border-box; box-shadow: 0 0 0 5px rgba(213, 59, 213, .16);
    animation: pt-tip 1.6s ease-in-out infinite;
}
@keyframes pt-tip { 50% { box-shadow: 0 0 0 9px rgba(213, 59, 213, .06); } }
.pt-event span, .pt-intro span { z-index: 1; }
.pt-event.is-past span { border-style: solid; border-color: #E58BE5; background: #fff; }
.pt-event--end.is-past span { border-color: #8B5CF6; background: #F5F1FF; color: #4A3D8F; }
.pt-event--end.is-past b, .pt-event--end.is-past svg { color: #6D4BD8; }
@media (prefers-reduced-motion: reduce) { .pt-rail { transition: none; } .pt-rail::after { animation: none; } }

/* the intro waits until it reaches the middle of the screen (js/personal-agents.js): the
   dashed line draws down from the table, then the pill comes in */
.pa.is-anim .pt-intro::before { transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.pa.is-anim .pt-intro span { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .3s ease .15s, transform .4s cubic-bezier(.2, 1.2, .4, 1) .15s; }
.pa.is-anim .pt-intro.is-in::before { transform: none; }
.pa.is-anim .pt-intro.is-in span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pa.is-anim .pt-intro::before, .pa.is-anim .pt-intro span { transition: none; } }

/* parts not opened yet take no room (their own display rules would beat [hidden]) */
.pt [hidden] { display: none !important; }
/* when the reader has scrolled past the Continue button with the example still unfinished, a
   pill at the bottom of the screen takes them back to it (Dom, 6 Nov 2026); only while the
   section is on screen; above the safe area on phones */
.pt-back {
    position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border: 0; border-radius: 999px;
    background: var(--ink, #16121A); color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(22, 18, 26, .55);
    opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pt-back.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pt-back i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #D53BD5, #4C6BEE); }
.pt-back svg { width: 16px; height: 16px; }
.pt-back:focus-visible { outline: 2px solid #D53BD5; outline-offset: 3px; }
@media (max-width: 767px) { .pt-back { font-size: .875rem; padding: 8px 14px 8px 8px; } .pt-back i { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .pt-back { transition: none; } }

/* the button's wrapper and its pointer (Dom, 6 Nov 2026): a short hint in pink and a
   hand-drawn arrow pointing at the button, on its left; above it on phones. A soft ring
   pulses out from the button every few seconds until it is clicked */
.pt-next-w { position: relative; display: flex; justify-content: center; margin: var(--gap) auto 0; width: max-content; max-width: 100%; }
.pt-hint {
    position: absolute; right: 100%; top: -30px; display: flex; align-items: flex-end; gap: 2px; margin-right: 6px;
    color: #B0279F; pointer-events: none; opacity: 0; transform: translateX(-8px); transition: opacity .4s ease .5s, transform .5s ease .5s;
}
.pt-hint span { padding-bottom: 26px; font-size: .9375rem; font-weight: 700; font-style: italic; white-space: nowrap; transform: rotate(-3deg); }
.pt-hint svg { width: 64px; height: 40px; flex: none; }
.pt-next-w.is-in .pt-hint { opacity: 1; transform: none; }
.pt-next.is-in::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(213, 59, 213, .45); animation: pt-pulse 2.4s ease-out 1s infinite;
}
@keyframes pt-pulse { 0% { box-shadow: 0 0 0 0 rgba(213, 59, 213, .45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(213, 59, 213, 0); } }
@media (prefers-reduced-motion: reduce) { .pt-next.is-in::after { animation: none; } .pt-hint { transition: none; } }
@media (max-width: 900px) {
    .pt-next-w { flex-direction: column; align-items: center; gap: 6px; }
    .pt-hint { position: static; margin: 0; flex-direction: row; align-items: center; transform: none; }
    .pt-hint span { padding-bottom: 0; font-size: .875rem; transform: none; }
    .pt-hint svg { width: 28px; height: 22px; transform: rotate(60deg); }
}

/* the Continue button that opens the story part by part (Dom, 6 Nov 2026; then "make it
   look like a clickable button"): "Continue" in bold, where it goes next after it, the arrow
   in a white circle; a raised edge and shadow; it lifts on hover and presses down on click */
.pt-next {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 8px 8px 24px;
    border: 0; border-radius: 999px; background: linear-gradient(100deg, #D53BD5, #8B5CF6 60%, #4C6BEE); color: #fff;
    font: inherit; font-size: 1.125rem; cursor: pointer; min-height: 56px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(40, 14, 90, .28), 0 16px 30px -14px rgba(110, 60, 220, .75);
    opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.pt-next.is-in { opacity: 1; transform: none; }
.pt-next.is-in:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(40, 14, 90, .28), 0 22px 36px -14px rgba(110, 60, 220, .85); }
.pt-next.is-in:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(40, 14, 90, .28), 0 8px 16px -10px rgba(110, 60, 220, .7); }
.pt-next:focus-visible { outline: 2px solid var(--ink, #16121A); outline-offset: 4px; }
.pt-next-k { font-weight: 800; letter-spacing: -.005em; }
.pt-next-t { font-weight: 500; opacity: .88; }
.pt-next-t::before { content: "\00b7"; margin-right: 8px; opacity: .7; }
.pt-next-i {
    display: grid; place-items: center; width: 38px; height: 38px; margin-left: 6px; border-radius: 50%; background: #fff; color: #7C3AED;
    box-shadow: 0 2px 6px rgba(40, 14, 90, .25); transition: transform .25s ease;
}
.pt-next.is-in:hover .pt-next-i { transform: scale(1.08); }
.pt-next-i svg { width: 18px; height: 18px; animation: pt-bob 1.4s ease-in-out infinite; }
@keyframes pt-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .pt-next-i svg { animation: none; } .pt-next { transition: none; } }
@media (max-width: 767px) { .pt-next { gap: 6px; padding: 6px 6px 6px 18px; font-size: .9375rem; } .pt-next-i { width: 34px; height: 34px; } }

/* ---------- playing (js/personal-agents.js) ---------- */
.pa.is-anim .pa-row:not(.pa-row--head) { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.pa.is-anim .pa-row.is-in { opacity: 1; transform: none; }
.pa.is-anim .pt [data-s] { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.pa.is-anim .pt [data-s].is-in { opacity: 1; transform: none; }
.pa.is-anim .pt-row[data-s] .pt-ap { opacity: 0; transform: translateY(6px); transition: opacity .3s ease .2s, transform .35s cubic-bezier(.2, .8, .2, 1) .2s; }
.pa.is-anim .pt-row[data-s].is-in .pt-ap { opacity: 1; transform: none; }   /* Askpilot just after the left side */
.pa.is-anim .pt-event.is-in span { animation: pt-ping 1.2s ease-out 1; }
@keyframes pt-ping { 0% { box-shadow: 0 0 0 0 rgba(229, 139, 229, .5); } 100% { box-shadow: 0 0 0 14px rgba(229, 139, 229, 0); } }
@media (prefers-reduced-motion: reduce) {
    .pa.is-anim .pa-row, .pa.is-anim .pt [data-s] { transition: none !important; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 767px) {
    .pa { padding: 80px 0; }
    /* phones: no column heads; each row is its capability, big, then two labelled answer
       boxes side by side, each titled with its logo and name (Dom, 10 Nov 2026: bigger titles) */
    .pa-row--head { display: none; }
    .pa-row:nth-child(2) { border-top: 0; }
    .pa-row { grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 18px 14px; }
    .pa-row > * { padding: 0; }
    .pa-row > .pa-need { grid-column: 1 / -1; margin-bottom: 12px; font-size: 1.125rem; }
    .pa-need small { font-size: .875rem; }
    .pa-row > .pa-c {
        flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 12px;
        border-radius: 14px; text-align: left;
    }
    .pa-row > .pa-c:nth-child(2) { background: #F6F2F0; }
    .pa-row > .pa-c:nth-child(3) { background: #FCF1FC; box-shadow: inset 0 0 0 1.5px #F2C4F2; }
    .pa-who { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 800; line-height: 1.2; color: #6B6470; }
    .pa-who--ap { color: #A3239F; }
    .pa-who .pa-ico img { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #EEE8EB; }
    .pa-who .pa-ico img + img { margin-left: -6px; }
    .pa-who--ap .pa-ico img { padding: 0; box-shadow: none; background: none; width: 20px; height: 20px; }
    /* box titles centred (Dom, 10 Nov 2026): Claude or ChatGPT shows its 2 logos only, the
       name hidden; Askpilot its logo and name */
    .pa-row > .pa-c { align-items: center; }
    .pa-who { justify-content: center; }
    .pa-who:not(.pa-who--ap) { font-size: 0; gap: 0; }
    .pa-who:not(.pa-who--ap) .pa-ico img { width: 26px; height: 26px; padding: 4px; }
    .pa-a { flex-direction: row; align-items: flex-start; gap: 8px; }
    /* every answer sits in the middle of the space under the box title, so both boxes of a row
       read alike (Dom, 10 Nov 2026): a lone tick centred; words centred under their mark; the
       "keep using" swap mark is left out on phones, its words alone */
    .pa-row > .pa-c .pa-a { flex: 1; align-self: stretch; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
    .pa-row > .pa-c .pa-t { padding-top: 0; }
    .pa-row > .pa-c--same .pa-same { display: none; }
    .pa-row > .pa-c .pa-yes { width: 30px; height: 30px; }
    .pa-row > .pa-c .pa-yes svg { width: 14px; height: 14px; }
    .pa-t { font-size: .8125rem; line-height: 1.3; padding-top: 3px; }
    .pa-part-i, .pa-yes, .pa-same { width: 24px; height: 24px; }
    .pa-part-i::after { left: 7px; right: 7px; }
    .pa-yes svg, .pa-same svg { width: 12px; height: 12px; }
    .pt { margin-top: 0; }
    .pt-intro span { gap: 8px; padding: 12px 16px; font-size: .875rem; white-space: nowrap; }   /* one line (Dom) */
    .pt-intro svg { width: 18px; height: 18px; }
    .pt-event span { gap: 6px; padding: 7px 12px; font-size: .75rem; white-space: nowrap; }   /* one line (Dom) */
    .pt-event svg { width: 14px; height: 14px; }
    .pt { --gap: 34px; }
    /* phones: the two cards side by side, as on desktop (Dom preferred it), but compact: logo and
       tag small at the top, the heading and its line under them */
    .pt-row, .pt-sums { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
    /* the dashed line runs on down the gap between the two cards, so it reads as one timeline (Dom) */
    .pt-row::before { display: block; }
    .pt-t { display: none; }
    .pt-ai, .pt-ap { flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; }
    .pt-ai .pt-logos img { width: 22px; height: 22px; padding: 3px; }
    .pt-apl { width: 20px; height: 20px; }
    .pt-tag { margin-bottom: 2px; padding: 2px 7px; font-size: .5625rem; letter-spacing: .06em; line-height: 1.5; }
    .pt-tools img { width: 20px; height: 20px; padding: 2px; }
    .pt-ai b, .pt-ap b { font-size: .875rem; line-height: 1.25; }
    .pt-ai small, .pt-ap small { font-size: .75rem; line-height: 1.35; }
    .pt-sums > .pt-sum--ai { grid-column: 1; }
    .pt-sums > .pt-sum--ap { grid-column: 2; }
    .pt-sum { grid-template-columns: 1fr; padding: 14px; }
    .pt-sum b { font-size: 1.25rem; }
    .pt-foot span { font-size: .8125rem; border-radius: 16px; }
}
}
}