/* Phronesis product pages (/retail, /retail/roadmap, /retail/release-notes).
   Brand rules: docs in the phronesis brand folder. Green carries identity, ochre is the one accent
   (dots, numerals, flagged values, big figures), Signal Teal is for interaction only (focus), the mark
   is never teal. Everything is scoped under .phx so the site's shared classes stay untouched; the
   shared .kicker, .num, .figure-big and .mock components from main.css are recoloured here. */

.phx {
    --phx-green: #07332F;
    --phx-green-2: #0B4640;
    --phx-ivory: #F7F5F0;
    --phx-ink: #1C2A28;
    --phx-ink-soft: #4A5856;
    --phx-ochre: #B4762A;
    --phx-ochre-text: #8F5B18;      /* the text cut of ochre: small text on light grounds */
    --phx-ochre-soft: #D8A45E;      /* the ochre for big figures on green (6.2:1) */
    --phx-mint: #6FCFC2;            /* small text and active states on green */
    --phx-teal: #0D9488;
    --phx-rule: #DCD6C8;
    --phx-rule-dark: rgba(247, 245, 240, .18);
    --phx-paper: #FFFFFF;
    /* the product's own type: IBM Plex Sans throughout, Bricolage Grotesque for the wordmark only,
       IBM Plex Mono where the thing drawn is monospaced in life (a receipt, a till screen) */
    --phx-display: 'IBM Plex Sans', system-ui, sans-serif;
    --phx-body: 'IBM Plex Sans', system-ui, sans-serif;
    --phx-wordmark: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
    --phx-receipt: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --phx-wrap: 1180px;

    background: var(--phx-ivory);
    color: var(--phx-ink);
    font-family: var(--phx-body);
    font-size: 17px;
    line-height: 1.6;
}

:where(.phx) *, :where(.phx) *::before, :where(.phx) *::after { box-sizing: border-box; }
:where(.phx) p { margin: 0 0 1em; }
:where(.phx) :is(h1, h2, h3) {
    font-family: var(--phx-display);
    color: inherit;
    letter-spacing: -0.01em;
    margin: 0;
}
:where(.phx) a { color: var(--phx-green); text-underline-offset: 3px; }
.phx a:focus-visible, .phx button:focus-visible, .phx summary:focus-visible {
    outline: 3px solid var(--phx-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.phx .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.phx-wrap {
    max-width: var(--phx-wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- buttons ---------- */
.phx-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: var(--phx-body);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.phx-btn--solid { background: var(--phx-ivory); color: var(--phx-green); }
.phx-btn--solid:hover { background: #fff; }
.phx-btn--line { border-color: rgba(247, 245, 240, .5); color: var(--phx-ivory); }
.phx-btn--line:hover { border-color: var(--phx-ivory); }
.phx-btn--green { background: var(--phx-green); color: var(--phx-ivory); }
.phx-btn--green:hover { background: var(--phx-green-2); color: var(--phx-ivory); }

/* ---------- the shared site components, in Phronesis colours ----------
   main.css paints these red; on a Phronesis surface the accent is ochre or green. */
.phx .kicker {
    font-family: var(--phx-body);
    font-size: 15px;
    color: var(--phx-ochre-text);
    margin-bottom: 14px;
}
.phx .num { color: var(--phx-ochre); }
.phx .figure-big { color: var(--phx-ochre); }
.phx-keep .kicker, .phx-close .kicker { color: var(--phx-mint); }
.phx-keep .figure-big, .phx-close .figure-big { color: var(--phx-ochre-soft); }

.phx .mock {
    font-family: var(--phx-body);
    color: var(--phx-ink);
    border-color: var(--phx-rule);
}
.phx .mock-kicker { color: var(--phx-green); }
.phx .mock-title { color: var(--phx-ink); }
.phx .mock-pill { color: var(--phx-ink-soft); border-color: var(--phx-rule); }
.phx .mock-rows li { border-color: var(--phx-rule); }
.phx .mock-rows .ok { color: var(--phx-green); }
.phx .mock-rows .due { color: var(--phx-ochre-text); }
.phx .mock-foot { color: var(--phx-ink-soft); border-color: var(--phx-rule); }

/* ---------- hero ---------- */
.phx-hero {
    background: var(--phx-green);
    color: var(--phx-ivory);
    padding: 72px 0 88px;
    overflow: hidden;
}
.phx-hero .phx-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
    align-items: center;
}
.phx-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
}
.phx-lockup img { width: 52px; height: 52px; }
.phx-wordmark {
    font-family: var(--phx-wordmark);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: .05em;
    line-height: 1;
}
.phx-hero h1 {
    font-size: clamp(40px, 5.2vw, 64px);
    line-height: 1.04;
    font-weight: 700;
    max-width: 16ch;
}
.phx-hero-lede {
    margin-top: 24px;
    font-size: 19px;
    line-height: 1.55;
    max-width: 50ch;
    color: rgba(247, 245, 240, .86);
}
.phx-hero-lede strong { color: var(--phx-mint); font-weight: 600; }
.phx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* the desk: a statement printing from the till, and the evening's cash-up behind it */
.phx-stage {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 460px;
    margin: 0;
    padding-bottom: 210px; /* the cash-up sits low enough that the statement covers only its head */
}
.phx-till { position: relative; z-index: 2; width: 100%; max-width: 340px; }
.phx-till-slot {
    height: 18px;
    border-radius: 10px;
    background: #031F1C;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55);
    position: relative;
    z-index: 2;
}
/* the shadow lives on the clip as a filter: a box-shadow on the receipt would be cut off by its torn-edge mask */
.phx-receipt-clip {
    overflow: hidden;
    margin: -9px 0 0;
    padding: 0 14px 28px;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .4));
}
.phx-receipt {
    background: var(--phx-paper);
    color: #222;
    font-family: var(--phx-receipt);
    font-size: 13px;
    line-height: 1.55;
    padding: 30px 22px 26px;
    /* torn bottom edge */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
                  conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
                  conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
    animation: phx-print 1.6s cubic-bezier(.3, .7, .2, 1) .35s both;
}
@keyframes phx-print {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .phx-receipt { animation: none; }
}
.phx-receipt-head { text-align: center; margin-bottom: 14px; }
.phx-receipt-head b { display: block; font-size: 14px; }
.phx-receipt-row { display: flex; justify-content: space-between; gap: 12px; }
.phx-receipt-row span:last-child { white-space: nowrap; }
.phx-receipt hr { border: 0; border-top: 1px dashed #999; margin: 10px 0; }
.phx-receipt-total { font-weight: 700; font-size: 15px; }
.phx-receipt-total span:last-child { color: var(--phx-ochre-text); }
.phx-receipt-foot { text-align: center; margin-top: 14px; color: #555; }

.phx-cashup {
    position: absolute;
    right: 0;
    bottom: 36px;
    z-index: 1;
    width: 280px;
    background: var(--phx-ivory);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6);
}
.phx-stage-note {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    font-size: 13px;
    color: rgba(247, 245, 240, .7);
}

/* ---------- shared section rhythm ---------- */
.phx-section { padding: 96px 0; }
.phx-paper { background: var(--phx-paper); }
.phx-section h2 {
    font-size: clamp(32px, 3.6vw, 44px);
    line-height: 1.1;
    font-weight: 700;
    color: var(--phx-green);
    max-width: 22ch;
}
.phx-intro { margin-top: 18px; font-size: 19px; color: var(--phx-ink-soft); max-width: 56ch; }

/* ---------- a day in the shop: six moments on one hairline ---------- */
.phx-day h2 { max-width: 24ch; }
.phx-timeline {
    list-style: none;
    margin: 64px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 44px;
}
.phx-timeline li {
    position: relative;
    border-top: 1px solid var(--phx-rule);
    padding: 30px 28px 0 0;
}
.phx-timeline li::before {
    /* the ochre dot sits on the line, ringed in the ground so the line breaks for it */
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--phx-ochre);
    border: 3px solid var(--phx-ivory);
}
.phx-time {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--phx-ochre-text);
    margin-bottom: 8px;
}
.phx-timeline p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--phx-ink); }

/* ---------- split layouts: a lead column beside a list or a mock ---------- */
.phx-split {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 48px 72px;
    align-items: start;
}
.phx-split-lead { position: sticky; top: 96px; }
.phx-split--mock { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.phx-split--mock .phx-audit {
    position: sticky;
    top: 96px;
    width: 100%;
    max-width: 460px;
    justify-self: end;
}

/* five things change: a counted ledger */
.phx-ledger { list-style: none; margin: 0; padding: 0; }
.phx-ledger li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--phx-rule);
}
.phx-ledger li:last-child { border-bottom: 1px solid var(--phx-rule); }
.phx-ledger .num { font-size: 40px; margin: -4px 0 0; }
.phx-ledger h3 { font-size: 21px; line-height: 1.25; color: var(--phx-green); margin-bottom: 8px; }
.phx-ledger p { margin: 0; font-size: 16px; color: var(--phx-ink-soft); max-width: 56ch; }

/* ---------- how we work: the engagement sequence ---------- */
.phx-steps { list-style: none; margin: 40px 0 0; padding: 0; }
.phx-steps li {
    display: grid;
    grid-template-columns: 12ch minmax(0, 1fr);
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--phx-rule);
}
.phx-steps li:last-child { border-bottom: 1px solid var(--phx-rule); }
.phx-step-when { font-size: 15px; font-weight: 600; color: var(--phx-ochre-text); padding-top: 3px; }
.phx-steps h3 { font-size: 19px; line-height: 1.3; color: var(--phx-green); margin-bottom: 6px; }
.phx-steps p { margin: 0; font-size: 15px; color: var(--phx-ink-soft); max-width: 52ch; }

/* the audit page: what month one finds, and what month two sets up */
.phx-audit .mock-head { padding-bottom: 12px; border-bottom: 1px solid var(--phx-rule); }
.phx-audit-lines { list-style: none; margin: 0; padding: 0; }
.phx-audit-lines li {
    position: relative;
    padding: 12px 0 12px 32px;
    font-size: 15px;
    line-height: 1.45;
    border-bottom: 1px solid var(--phx-rule);
}
.phx-audit-lines li:last-child { border-bottom: 0; }
.phx-audit-lines li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--phx-green);
    background: #E7F0EA;
}
.phx-audit-lines li::after {
    content: "";
    position: absolute;
    left: 6.5px;
    top: 16px;
    width: 5px;
    height: 9px;
    border: solid var(--phx-green);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.phx-audit-foot { margin-top: 14px; padding: 14px 16px; background: var(--phx-ivory); border-radius: 12px; }
.phx-audit-foot-label { font-size: 13px; font-weight: 600; color: var(--phx-ochre-text); margin: 0 0 4px; }
.phx-audit-foot p:last-child { margin: 0; font-size: 15px; line-height: 1.5; }

/* ---------- consignment models (the roadmap reuses .phx-models as a white band) ---------- */
.phx-models { background: var(--phx-paper); border-top: 1px solid var(--phx-rule); border-bottom: 1px solid var(--phx-rule); }
.phx-table-wrap { margin-top: 44px; overflow-x: auto; }
.phx-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 16px; }
.phx-table caption { text-align: left; font-size: 14px; color: var(--phx-ink-soft); padding-bottom: 12px; }
.phx-table th, .phx-table td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--phx-rule); }
.phx-table thead th { font-family: var(--phx-display); font-size: 18px; color: var(--phx-green); border-bottom: 2px solid var(--phx-green); }
.phx-table tbody th { font-weight: 600; color: var(--phx-ink); width: 22%; }
.phx-table--models caption { font-size: 15px; font-weight: 600; color: var(--phx-ochre-text); }
.phx-table--models tbody th { color: var(--phx-green); }
.phx-table--models td { color: var(--phx-ink); }
.phx-models-after { margin-top: 28px; max-width: 58ch; color: var(--phx-ink-soft); }
/* the table in three lines, shown on phones only (see the narrow-screen rules) */
.phx-models-short { display: none; }

/* Feature lists fold on phones. The disclosure is open on wider screens with its summary
   hidden; the page's script closes it below 560px and reopens it above. */
.phx-more > summary { display: none; }

/* ---------- what it runs: the roadmap's grouped lists (.phx-areas) ---------- */
.phx-areas { margin-top: 48px; }
.phx-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--phx-rule);
}
.phx-area:last-child { border-bottom: 1px solid var(--phx-rule); }
.phx-area h3 { font-size: 24px; line-height: 1.2; color: var(--phx-green); }
.phx-area-sub { margin-top: 8px; font-size: 15px; color: var(--phx-ink-soft); }
.phx-area ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.phx-area li { break-inside: avoid; padding: 0 0 12px 18px; position: relative; font-size: 16px; }
.phx-area li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--phx-ochre);
}

/* ---------- what it runs on /retail: five rows, a piece of the product beside each list ---------- */
.phx-feat-list { margin-top: 56px; }
.phx-feat-row {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 48px 72px;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid var(--phx-rule);
}
.phx-feat-row:last-child { border-bottom: 1px solid var(--phx-rule); }
.phx-feat-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.phx-feat-row--flip .phx-feat-mock { order: 2; }
.phx-feat-mock { width: 100%; }
.phx-feat-text h3 { font-size: 26px; line-height: 1.2; color: var(--phx-green); }
.phx-feat-sub { margin: 8px 0 20px; font-size: 16px; color: var(--phx-ink-soft); }
.phx-feat-text ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 36px; }
.phx-feat-text li { break-inside: avoid; padding: 0 0 12px 18px; position: relative; font-size: 16px; line-height: 1.5; }
.phx-feat-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--phx-ochre);
}

/* the till screen: the one mock drawn on green */
.phx-screen {
    background: var(--phx-green);
    color: var(--phx-ivory);
    border-radius: 16px;
    padding: 18px 20px 16px;
    box-shadow: var(--shadow-lg);
    font-family: var(--phx-receipt);
    font-size: 13px;
    line-height: 1.5;
}
.phx-screen-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--phx-rule-dark);
    font-family: var(--phx-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--phx-mint);
}
.phx-screen-lines, .phx-screen-pay { list-style: none; margin: 0; padding: 0; }
.phx-screen-lines { padding: 8px 0; border-bottom: 1px dashed rgba(247, 245, 240, .35); }
.phx-screen-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.phx-screen-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid var(--phx-rule-dark);
}
.phx-screen-pay { padding-top: 6px; }
.phx-screen-pay li { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5em; gap: 14px; align-items: baseline; padding: 6px 0; }
.phx-screen-pay li span:nth-child(2) { text-align: right; }
.phx-screen-pay em {
    font-style: normal;
    font-family: var(--phx-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--phx-mint);
    text-align: right;
}
.phx-screen-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--phx-rule-dark);
    font-family: var(--phx-body);
    font-size: 12px;
    color: rgba(247, 245, 240, .78);
}

/* small tables inside paper mocks: the count sheet and the day book */
.phx-mock-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.phx-mock-table th, .phx-mock-table td {
    text-align: right;
    padding: 8px 0 8px 12px;
    border-top: 1px solid var(--phx-rule);
    white-space: nowrap;
}
.phx-mock-table th:first-child, .phx-mock-table td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.phx-mock-table thead th { border-top: 0; padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--phx-ink-soft); }
.phx-mock-table .ok { color: var(--phx-green); font-weight: 600; }
.phx-mock-table .due { color: var(--phx-ochre-text); font-weight: 600; }
.phx-mock-table tfoot td { font-weight: 600; color: var(--phx-green); border-top: 2px solid var(--phx-green); }

/* the receiving note: three steps down the left edge */
.phx-receive-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.phx-receive-steps li { position: relative; padding: 8px 0 14px 28px; }
.phx-receive-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--phx-green);
    background: var(--phx-green);
}
.phx-receive-steps li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 27px;
    bottom: -8px;
    width: 2px;
    background: var(--phx-rule);
}
.phx-receive-steps li:last-child::after { display: none; }
.phx-receive-steps li.is-gap::before { border-color: var(--phx-ochre); background: var(--phx-ochre); }
.phx-receive-steps li.is-gap b { color: var(--phx-ochre-text); }
.phx-receive-steps b { display: block; font-size: 15px; font-weight: 600; color: var(--phx-ink); }
.phx-receive-steps span { display: block; font-size: 14px; color: var(--phx-ink-soft); }

/* ---------- yours to keep (the roadmap and release notes reuse it as a green closing band) ---------- */
.phx-keep { background: var(--phx-green); color: var(--phx-ivory); }
.phx-keep h2 { color: var(--phx-ivory); }
.phx-keep .phx-intro { color: rgba(247, 245, 240, .82); }
.phx-figures {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--phx-rule-dark);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 32px 48px;
}
.phx-figures .figure-big {
    display: inline-block;
    font-size: clamp(52px, 5.6vw, 80px);
    letter-spacing: -0.03em;
    line-height: 1;
}
.phx-figure-unit {
    display: inline-block;
    margin-left: 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--phx-ivory);
}
.phx-figures p { margin: 12px 0 0; font-size: 16px; color: rgba(247, 245, 240, .82); max-width: 34ch; }
.phx-promises {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--phx-rule-dark);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 56px;
}
.phx-promises h3 { font-size: 22px; color: var(--phx-mint); margin-bottom: 8px; }
.phx-promises p { color: rgba(247, 245, 240, .86); margin: 0; max-width: 46ch; }

/* ---------- pricing ---------- */
.phx-price {
    margin-top: 44px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 48px 80px;
    align-items: start;
}
.phx-price-figure { padding-top: 20px; border-top: 3px solid var(--phx-ochre); }
.phx-price-from { font-size: 16px; font-weight: 600; color: var(--phx-ochre-text); }
.phx-price-amount {
    font-family: var(--phx-display);
    font-weight: 700;
    font-size: clamp(52px, 6.4vw, 88px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--phx-green);
    margin: 8px 0 6px;
    white-space: nowrap;
}
.phx-price-per { font-size: 18px; font-weight: 600; color: var(--phx-ink-soft); margin-bottom: 16px; }
.phx-price-figure p { margin: 0; color: var(--phx-ink-soft); max-width: 36ch; }
.phx-price-terms { margin: 0; border-top: 3px solid var(--phx-green); }
.phx-price-terms div { display: grid; grid-template-columns: 14ch minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--phx-rule); }
.phx-price-terms dt { font-weight: 600; color: var(--phx-green); }
.phx-price-terms dd { margin: 0; color: var(--phx-ink); max-width: 52ch; }

/* ---------- closing call ---------- */
.phx-close { background: var(--phx-green); color: var(--phx-ivory); padding: 88px 0; }
.phx-close h2 { color: var(--phx-ivory); }
.phx-close .phx-intro { color: rgba(247, 245, 240, .82); }
.phx-close .phx-intro a { color: var(--phx-mint); }
.phx-close-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px 64px;
    align-items: center;
}
.phx-close-lockup { width: 210px; height: auto; justify-self: end; }
.phx-close .phx-hero-actions { margin-top: 32px; }

/* ---------- roadmap (/retail/roadmap) ---------- */
.phx-hero--compact { padding: 64px 0 72px; }
.phx-hero .phx-wrap--single { display: block; }
.phx-hero--compact h1 { max-width: none; }

.phx-shipped {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
}
.phx-shipped li {
    position: relative;
    padding: 14px 0 14px 30px;
    border-top: 1px solid var(--phx-rule);
    font-size: 16px;
}
.phx-shipped li::before {
    /* a tick drawn in Phronesis Green */
    content: "";
    position: absolute;
    left: 4px;
    top: 19px;
    width: 12px;
    height: 7px;
    border-left: 2.5px solid var(--phx-green);
    border-bottom: 2.5px solid var(--phx-green);
    transform: rotate(-45deg);
}

/* status marker: how far along, by how full the dot is */
.phx-status {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: 0.06em;
    border: 2px solid var(--phx-ochre);
}
.phx-status--progress { background: var(--phx-ochre); }
.phx-status--research { background: linear-gradient(90deg, var(--phx-ochre) 50%, transparent 50%); }
.phx-status--planned { background: transparent; }
.phx-status--investigate { border-style: dashed; }

.phx-items { display: grid; gap: 22px; }
.phx-items h4 {
    margin: 0 0 4px;
    font-family: var(--phx-body);
    font-size: 17px;
    font-weight: 600;
    color: var(--phx-ink);
}
.phx-items p { margin: 0; color: var(--phx-ink-soft); max-width: 64ch; }

/* ---------- release notes (/retail/release-notes) ---------- */
.phx-rn { padding-top: 56px; }
.phx-rn-summary { color: var(--phx-ink-soft); margin-bottom: 32px; }
.phx-rn-summary strong { color: var(--phx-ink); }

.phx-release { border-top: 1px solid var(--phx-rule); }
.phx-release:last-of-type { border-bottom: 1px solid var(--phx-rule); }
.phx-release summary {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 26px 0;
    cursor: pointer;
    list-style: none;
}
.phx-release summary::-webkit-details-marker { display: none; }
.phx-release summary::after {
    /* open/closed chevron */
    content: "";
    margin-left: auto;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--phx-green);
    border-bottom: 2.5px solid var(--phx-green);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .2s ease;
}
.phx-release[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
@media (prefers-reduced-motion: reduce) { .phx-release summary::after { transition: none; } }
.phx-release-version {
    font-family: var(--phx-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--phx-green);
    min-width: 2.4ch;
}
.phx-release-head { display: flex; flex-direction: column; gap: 6px; }
.phx-release-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--phx-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    color: var(--phx-ink);
}
.phx-release-latest {
    font-family: var(--phx-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--phx-ivory);
    background: var(--phx-green);
    border-radius: 999px;
    padding: 3px 10px;
}
.phx-release-meta { font-size: 15px; color: var(--phx-ink-soft); }
.phx-release-body { padding: 0 0 36px; }
.phx-release-summary { max-width: 70ch; color: var(--phx-ink-soft); }
.phx-rn-table { min-width: 640px; font-size: 15px; }
.phx-rn-table thead th { font-size: 15px; }
.phx-rn-table td, .phx-rn-table th { padding: 12px 16px 12px 0; }
.phx-rn-id, .phx-rn-date { white-space: nowrap; color: var(--phx-ink-soft); }
.phx-rn-id { width: 92px; }
.phx-rn-date { width: 80px; }
.phx-rn-table th:last-child, .phx-rn-table td:last-child { width: 112px; padding-right: 0; }

.phx-imp { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.phx-imp::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 2px solid var(--phx-ochre); }
.phx-imp--critical { font-weight: 600; color: var(--phx-green); }
.phx-imp--critical::before { background: var(--phx-green); border-color: var(--phx-green); }
.phx-imp--high::before { background: var(--phx-ochre); }
.phx-imp--low { color: var(--phx-ink-soft); }
.phx-imp--low::before { border-color: var(--phx-rule); }

/* ---------- narrow screens ---------- */
@media (max-width: 1200px) {
    /* the hero's right column narrows: the cash-up drops lower so the statement covers only its head */
    .phx-stage { padding-bottom: 210px; }
    .phx-cashup { bottom: 33px; }
}
@media (max-width: 1024px) {
    .phx-shipped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .phx-area ul { columns: 1; }
    .phx-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
    .phx-split { gap: 40px 48px; }
    .phx-feat-row { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; }
    .phx-feat-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
    .phx-feat-text ul { columns: 1; }
    .phx-figures { gap: 28px 32px; }
    .phx-price { gap: 40px 48px; }
}
@media (max-width: 860px) {
    .phx-hero { padding: 48px 0 64px; }
    .phx-hero .phx-wrap { grid-template-columns: 1fr; gap: 48px; }
    .phx-section { padding: 64px 0; }
    .phx-area { grid-template-columns: 1fr; gap: 16px; }
    .phx-promises { grid-template-columns: 1fr; gap: 28px; }
    .phx-price { grid-template-columns: 1fr; gap: 36px; }

    /* the desk unstacks: the statement, then the cash-up beneath it */
    .phx-stage { justify-self: start; max-width: 460px; padding-bottom: 0; }
    .phx-cashup { position: static; width: 100%; max-width: 340px; margin-top: 20px; }
    .phx-stage-note { position: static; margin-top: 14px; }

    /* the day runs down the page: one rail on the left */
    .phx-timeline { grid-template-columns: 1fr; row-gap: 0; margin-top: 48px; }
    .phx-timeline li { border-top: 0; border-left: 1px solid var(--phx-rule); padding: 0 0 28px 28px; }
    .phx-timeline li:last-child { padding-bottom: 0; }
    .phx-timeline li::before { top: 2px; left: -10px; }

    .phx-split, .phx-split--mock { grid-template-columns: 1fr; }
    .phx-split-lead { position: static; }
    .phx-split--mock .phx-audit { position: static; justify-self: start; max-width: 480px; }

    .phx-feat-row, .phx-feat-row--flip { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
    .phx-feat-row--flip .phx-feat-mock { order: 0; }
    .phx-feat-mock { max-width: 440px; }

    .phx-figures { grid-template-columns: 1fr; gap: 28px; }
    .phx-close { padding: 64px 0; }
    .phx-close-wrap { grid-template-columns: 1fr; gap: 36px; }
    .phx-close-lockup { justify-self: start; width: 150px; }
}
@media (max-width: 560px) {
    .phx-release summary { gap: 16px; }
    /* release rows stack: id, date and importance on one line, the change in full below */
    .phx-rn-table { min-width: 0; }
    .phx-rn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .phx-rn-table tbody, .phx-rn-table tr { display: block; }
    .phx-rn-table tr {
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-template-areas: "id date imp" "chg chg chg";
        gap: 4px 12px;
        padding: 14px 0;
        border-bottom: 1px solid var(--phx-rule);
    }
    .phx-rn-table td { display: block; border: 0; padding: 0; width: auto; }
    .phx-rn-table td.phx-rn-id { grid-area: id; width: auto; }
    .phx-rn-table td.phx-rn-date { grid-area: date; width: auto; }
    .phx-rn-table td.phx-rn-imp { grid-area: imp; justify-self: end; width: auto; }
    .phx-rn-table td.phx-rn-change { grid-area: chg; }
    .phx-release-version { font-size: 34px; }
    .phx-release-title { font-size: 19px; }
    .phx-shipped { grid-template-columns: 1fr; }
    .phx { font-size: 16px; }
    .phx-wrap { padding: 0 16px; }
    .phx-price-terms div { grid-template-columns: 1fr; gap: 4px; }
    .phx-hero-actions .phx-btn { width: 100%; justify-content: center; }

    .phx-ledger li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
    .phx-ledger .num { font-size: 32px; margin-top: -2px; }
    .phx-steps li { grid-template-columns: 1fr; gap: 6px; }
    .phx-step-when { padding-top: 0; }
    .phx-figures .figure-big { font-size: 56px; }
    .phx-figure-unit { font-size: 19px; }
    .phx-mock-table { font-size: 13px; }
    .phx-feat-text h3 { font-size: 23px; }

    /* Phones read the retail page as a summary (owner, 2026-10-26: "this feels like a novel on
       mobile"): a shorter hero, one mock per idea, the models table as three lines, lists folded */
    .phx-hero { padding: 36px 0 48px; }
    .phx-hero .phx-wrap { gap: 36px; }
    .phx-hero h1 { font-size: 36px; }
    .phx-lockup { margin-bottom: 24px; }
    .phx-hero-lede { font-size: 17px; margin-top: 18px; }
    .phx-cashup { display: none; }
    .phx-section { padding: 52px 0; }
    .phx-intro { font-size: 17px; }
    .phx-split--mock .phx-audit { display: none; }
    .phx-models-section .phx-table-wrap { display: none; }
    .phx-models-short { display: block; list-style: none; margin: 24px 0 0; padding: 0; }
    .phx-models-short li { padding: 14px 0; border-top: 1px solid var(--phx-rule); color: var(--phx-ink); }
    .phx-models-short li:last-child { border-bottom: 1px solid var(--phx-rule); }
    .phx-models-short b { color: var(--phx-green); }
    /* the eight changes as a list of titles; the feature rows below carry the detail */
    .phx-ledger li { padding: 14px 0; align-items: baseline; }
    .phx-ledger .num { font-size: 26px; }
    .phx-ledger h3 { font-size: 19px; margin-bottom: 0; }
    .phx-ledger p { display: none; }
    .phx-feat-row, .phx-feat-row--flip { gap: 20px; padding: 36px 0; }
    /* two product mocks on a phone (the till and the restock sheet), not five */
    .phx-feat-row:nth-child(n+3) .phx-feat-mock { display: none; }
    .phx-feat-sub { margin-bottom: 6px; }
    .phx-more > summary {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        cursor: pointer;
        list-style: none;
        font-weight: 600;
        color: var(--phx-green);
        text-decoration: underline;
        text-decoration-color: var(--phx-ochre);
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
    }
    .phx-more > summary::-webkit-details-marker { display: none; }
    .phx-more > summary:focus-visible { outline: 2px solid var(--phx-teal); outline-offset: 3px; border-radius: 4px; }
    .phx-more-hide { display: none; }
    .phx-more[open] > summary { margin-bottom: 10px; }
    .phx-more[open] .phx-more-show { display: none; }
    .phx-more[open] .phx-more-hide { display: inline; }
}