/* ============================================================================
   COMPARE JURISDICTIONS

   Arial throughout — no display face, no serif. Wide container so a three-way
   comparison has room. Sectional rhythm: white, pale champagne, white, warm
   ivory, white, navy.

   Deliberately fewer components than the previous version: broad bands and
   structured rows rather than cards everywhere, icons only where they earn
   their place, and chips only for Popular comparisons.
   ========================================================================= */

.cj-wrap { font-family: Arial, Helvetica, sans-serif; }
.cj-inner { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }

.cj-h1, .cj-h2, .cj-eyebrow, .cj-th-name, .cj-acc-t { font-family: Arial, Helvetica, sans-serif; }

/* ---- A. Introduction — compact, ~150px ---------------------------------- */
/* §5 — #FDFCFA against white. Almost imperceptible on its own, but it separates
   the introduction from the page and connects it to the champagne bands below. */
.cj-intro { background: #FDFCFA; border-bottom: 1px solid #F4F0E8; }
.cj-head {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4rem); align-items: start;
    max-width: 1400px; margin: 0 auto;
    /* §4 — more room, still compact. Not a hero. */
    padding: clamp(2rem, 3.6vw, 2.9rem) clamp(1rem, 3vw, 2rem) clamp(1.8rem, 3.2vw, 2.4rem);
}
.cj-eyebrow { font-size: var(--cx-fs-label); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #8A6E12; margin: 0 0 .7rem; }
.cj-h1 { font-weight: 700; font-size: var(--cx-fs-h1); line-height: 1.18;
    letter-spacing: -.02em; color: #0B1626; margin: 0 0 .85rem; }
.cj-lede { font-size: var(--cx-fs-base, .94rem); line-height: 1.6; color: #33404F; margin: 0; max-width: 62ch; }

/* Text, no icons: one beside every line is exactly the clutter the brief rejects. */
.cj-benefits { list-style: none; margin: .2rem 0 0; padding: 0 0 0 1.2rem;
    border-left: 1px solid #EADFC6; display: grid; gap: .7rem; }
.cj-benefits strong { display: block; font-size: .88rem; color: #0B1626; }
.cj-benefits span { display: block; font-size: .84rem; line-height: 1.45; color: #5A6675; }

/* ---- B. Jurisdiction cards ---------------------------------------------- */
.cj-slots { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem) 1rem;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.3rem); }

/* Empty slot — compact, never an enormous empty box. */
.cj-slot-btn { width: 100%; min-height: 96px; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: .25rem; padding: 1rem 1.1rem;
    background: #FDFBF7; border: 1px solid #EADFC6; border-radius: 10px;
    font: inherit; font-family: Arial, Helvetica, sans-serif; text-align: left; cursor: pointer;
    transition: border-color .15s ease, background .15s ease; }
.cj-slot-btn:hover { border-color: #D8C08A; background: #FBF7EF; }
.cj-slot-btn:focus-visible { outline: 2px solid #8A6E12; outline-offset: 2px; }
/* The third slot is quieter — it must not carry the weight of an active card. */
.cj-slot-btn--opt { background: #FFF; border-style: dashed; min-height: 86px; }
.cj-slot-n { font-size: .66rem; font-weight: 700; letter-spacing: .1em; color: #8A6E12; }
.cj-slot-l { font-size: .9rem; font-weight: 700; color: #0B1626; }
.cj-slot-o { font-size: .72rem; color: #5A6675; }
.cj-slot-plus { font-size: 1.2rem; line-height: 1; color: #C7AE79; }

/* Active card — image roughly half, caption over a restrained navy scrim. */
.cj-card { border: 1px solid #E7E3DA; border-radius: 10px; overflow: hidden; background: #fff;
    display: flex; flex-direction: column; height: 100%; }
.cj-card--loading { min-height: 96px; align-items: center; justify-content: center;
    flex-direction: row; gap: .5rem; color: #5A6675; font-size: .9rem; }

/* §7 — 4:3 rather than 16:9 is roughly 22% more image height at the same width.
   The photography is the strongest element on the page and should carry it. */
.cj-card-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.cj-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cj-card-scrim { position: absolute; inset: 40% 0 0 0;
    background: linear-gradient(180deg, rgba(11,22,38,0) 0%, rgba(11,22,38,.82) 78%); }
.cj-card-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem 1rem;
    display: grid; gap: .15rem; color: #fff; }
.cj-card-top { display: flex; align-items: center; gap: .5rem; }
.cj-card-flag { width: 24px; height: 17px; border-radius: 2px; flex: none; }
.cj-card-name { font-size: var(--cx-fs-h3); font-weight: 700; }
.cj-card-meta { font-size: var(--cx-fs-xs); color: rgba(255,255,255,.86); }
.cj-card-n { font-size: var(--cx-fs-sm); font-weight: 700; }

.cj-card-noimg { display: flex; align-items: center; gap: .5rem; padding: 1.4rem 1rem; }
.cj-card-noimg .fi { width: 24px; height: 17px; border-radius: 2px; }
.cj-card-noimg .cj-card-name { color: #0B1626; }

.cj-card-acts { display: flex; gap: 1rem; padding: .65rem 1rem; border-top: 1px solid #F0EDE6; }
.cj-card-change, .cj-card-remove { background: none; border: 0; padding: 0;
    font: inherit; font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 700;
    color: #8A6E12; cursor: pointer; }
.cj-card-remove { color: #5A6675; font-weight: 400; }

/* ---- C. Popular comparisons — chips, subordinate --------------------- */
.cmp-shortcuts-wrap { max-width: 1400px; margin: 0 auto; padding: .4rem clamp(1rem, 3vw, 2rem) 1.6rem;
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.cmp-shortcuts-l { margin: 0; font-size: .82rem; color: #5A6675; }
.cmp-shortcuts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cmp-shortcuts a { display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem; border: 1px solid #E7E3DA; border-radius: 999px;
    font-size: .86rem; color: #0B1626; text-decoration: none; background: #fff; }
.cmp-shortcuts a:hover { border-color: #D8C08A; color: #8A6E12; }
.cmp-shortcuts .fi { width: 17px; height: 12px; border-radius: 2px; }
.cmp-vs { color: #8A6E12; }
.cmp-empty-msg { max-width: 1400px; margin: 0 auto; padding: 1.4rem clamp(1rem, 3vw, 2rem) 3rem;
    font-size: .92rem; color: #5A6675; }

/* ---- Bands — the sectional rhythm ------------------------------------- */
.cj-band { padding: clamp(2.6rem, 4.8vw, 4rem) 0; background: #fff; }
.cj-band--glance { background: #FCFAF5; border-top: 1px solid #F0EBE0; border-bottom: 1px solid #F0EBE0; }
.cj-band--cover  { background: #FBF7EF; border-top: 1px solid #F0EBE0; border-bottom: 1px solid #F0EBE0; }
.cj-band--note   { padding: .6rem 0 1.8rem; background: #fff; }

.cj-secthead { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.cj-h2 { margin: 0; font-weight: 700; font-size: var(--cx-fs-label);
    letter-spacing: .08em; text-transform: uppercase; color: #8A6E12; }
.cj-sub { margin: 0; font-size: var(--cx-fs-xs); color: #5A6675; }
.cj-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: #33404F; cursor: pointer; }
.cj-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cj-toggle-ui { width: 38px; height: 21px; border-radius: 999px; background: #DDD8CD;
    position: relative; transition: background .18s ease; }
.cj-toggle-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: #fff; transition: transform .18s ease; }
.cj-toggle input:checked + .cj-toggle-ui { background: #8A6E12; }
.cj-toggle input:checked + .cj-toggle-ui::after { transform: translateX(17px); }
.cj-toggle input:focus-visible + .cj-toggle-ui { outline: 2px solid #8A6E12; outline-offset: 2px; }

/* ---- D. The comparison surface ---------------------------------------- */
.cj-tablewrap { background: #fff; border: 1px solid #EFEBE2; border-radius: 10px; overflow: hidden; }
.cj-table { width: 100%; border-collapse: collapse; }
/* §14 — a very light tint and more weight, so a column is identifiable at a glance
   while scrolling the rows. */
.cj-table thead th { text-align: left; padding: 1rem 1.4rem; background: #FCFAF5;
    border-bottom: 1px solid #EDE7DA; vertical-align: middle; }
.cj-th-flag { width: 22px; height: 16px; border-radius: 2px; margin-right: .45rem; vertical-align: -3px; }
.cj-th-name { font-size: var(--cx-fs-sm); font-weight: 700; letter-spacing: .01em; color: #0B1626; }
.cj-fieldcol { width: 230px; text-align: left; font-size: var(--cx-fs-xs); font-weight: 400;
    color: #4A5666; padding: 1.05rem 1.4rem; }
.cj-table tbody tr { border-top: 1px solid #F4F1EA; }
.cj-table td { padding: 1.05rem 1.4rem; vertical-align: top; }
.cj-v { display: block; font-size: var(--cx-fs-sm); line-height: 1.45; color: #0B1626; }
.cj-n { display: block; margin-top: .3rem; font-size: var(--cx-fs-xs); line-height: 1.5; color: #6B7688; }
.cj-na { color: #9AA3AF; }
.cj-for { display: none; }
.cj-reviewed { margin: .9rem 0 0; font-size: .74rem; color: #6B7688; }

/* ---- F. Accordions ----------------------------------------------------- */
.cj-acc { border-top: 1px solid #EFEBE2; }
.cj-acc-item { border-bottom: 1px solid #EFEBE2; }
.cj-acc-h { margin: 0; }
.cj-acc-btn { width: 100%; display: grid;
    grid-template-columns: 44px minmax(190px, 260px) 1fr 24px; align-items: center; gap: .6rem;
    padding: 1.5rem .6rem; background: none; border: 0; text-align: left; cursor: pointer;
    font: inherit; font-family: Arial, Helvetica, sans-serif; }
.cj-acc-btn:hover { background: #FCFAF5; }
.cj-acc-btn:focus-visible { outline: 2px solid #8A6E12; outline-offset: -2px; }
.cj-acc-n { font-size: .88rem; font-weight: 700; color: #B99B4E; }
.cj-acc-t { font-size: var(--cx-fs-h3); font-weight: 700; color: #0B1626; }
.cj-acc-b { font-size: var(--cx-fs-xs); color: #4A5666; }
.cj-acc-chev { width: 11px; height: 11px; justify-self: end; margin-right: .6rem;
    border-right: 2px solid #8A6E12; border-bottom: 2px solid #8A6E12;
    transform: rotate(45deg); transition: transform .18s ease; }
.cj-acc-btn[aria-expanded="true"] .cj-acc-chev { transform: rotate(-135deg); }
.cj-acc-body { padding: 0 0 1.3rem; }

/* ---- G. Sticky context -------------------------------------------------- */
.cj-sticky { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96);
    backdrop-filter: saturate(150%) blur(6px); border-bottom: 1px solid #EFEBE2; }
.cj-sticky[hidden] { display: none; }
.cj-sticky-in { display: flex; align-items: center; gap: 1.1rem; padding-top: .55rem; padding-bottom: .55rem; }
.cj-sticky-l { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A6E12; }
.cj-sticky-j { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 700; color: #0B1626; }
.cj-sticky-j .fi { width: 18px; height: 13px; border-radius: 2px; }

/* ---- H. Coverage — a pathway, not an inventory ------------------------- */
.cj-cover { display: grid; grid-template-columns: repeat(var(--cj-n, 3), 1fr);
    gap: clamp(1.1rem, 2.2vw, 2.2rem); align-items: start; }
/* §24 — align-self:start so a card ends where its content ends. Equal heights
   here would mean one card padded with blank space to match another's longer
   family list, which is the "administrative report" look the brief rejects. */
.cj-cover-col { background: #fff; border: 1px solid #EFEBE2; border-radius: 10px;
    padding: 1.4rem 1.5rem 1.3rem; align-self: start; }
.cj-cover-j { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem;
    font-size: var(--cx-fs-h3); font-weight: 700; color: #0B1626; }
.cj-cover-j .fi { width: 22px; height: 16px; border-radius: 2px; }
/* §23 — the total becomes a visual anchor: noticeable, not enormous. */
.cj-cover-n { margin: .5rem 0 1rem; display: flex; align-items: baseline; gap: .5rem;
    padding-bottom: .9rem; border-bottom: 1px solid #EDE7DA; }
.cj-cover-n strong { color: #8A6E12; font-size: 1.75rem; font-weight: 700; line-height: 1; }
.cj-cover-n span { font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #5A6675; }
.cj-cover-fams { list-style: none; margin: 0 0 1rem; padding: 0; }
.cj-cover-fams li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
    padding: .5rem 0; border-bottom: 1px solid #F2EFE7; font-size: var(--cx-fs-xs); color: #33404F; }
.cj-cover-fams em { font-style: normal; font-weight: 700; color: #0B1626; }
.cj-cover-go { font-size: .82rem; font-weight: 700; color: #8A6E12;
    text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---- I. Continue your research -------------------------------------------
   No card rules. The section uses partials.related-knowledge and the `.rk-*`
   styles in knowledge.css. A second set here would fork the design the moment
   either was touched.

   The one line below is spacing, not design: `.rk` carries its own section
   margin for pages that drop it into running content, and `.cj-band` already
   supplies the same rhythm as padding. Both together is one gap of daylight
   twice over. */
.cj-band > .cj-inner > .rk { margin-top: 0; }

/* ---- J. Adviser CTA ----------------------------------------------------- */
.cj-cta { background: #0B1626; color: #fff; padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; }
.cj-cta-in { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; }
.cj-cta-eyebrow { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #D9B65A; line-height: 1.7; border-left: 2px solid #D9B65A; padding-left: .9rem; }
.cj-cta-h { margin: 0 0 .3rem; font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 700; }
.cj-cta-p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.8); }
.cj-cta-acts { display: grid; gap: .6rem; justify-items: end; }
.cj-cta-a { display: inline-block; padding: .8rem 1.5rem; border-radius: 8px;
    background: #C9A227; color: #0B1626; font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cj-cta-b { font-size: .84rem; font-weight: 600; color: #fff; text-decoration: underline;
    text-underline-offset: 3px; white-space: nowrap; }

/* ---- K. Disclaimer ------------------------------------------------------ */
.cj-note { margin: 0; max-width: 92ch; font-size: var(--cx-fs-xs); line-height: 1.65; color: #6B7688; }
.cj-note-l { font-weight: 700; color: #0B1626; }
.cj-note a { color: #8A6E12; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

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

/* ---- Picker ------------------------------------------------------------- */
.cmp-pk { position: fixed; inset: 0; z-index: 2000; background: rgba(11,22,38,.42);
    display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 1rem;
    font-family: Arial, Helvetica, sans-serif; }
.cmp-pk[hidden] { display: none; }
body.cmp-locked { overflow: hidden; }
.cmp-pk-panel { width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(11,22,38,.22); }
.cmp-pk-head { display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem .8rem; border-bottom: 1px solid #EFEBE2; }
.cmp-pk-title { margin: 0; font-size: 1rem; font-weight: 700; color: #0B1626; }
.cmp-pk-close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #5A6675; }
.cmp-pk-search { display: block; padding: .8rem 1.1rem; }
.cmp-pk-search input { width: 100%; height: 42px; border: 1px solid #E7E3DA; border-radius: 9px;
    padding: 0 .8rem; font: inherit; font-family: Arial, Helvetica, sans-serif; font-size: .92rem; }
.cmp-pk-search input:focus-visible { outline: 2px solid #8A6E12; outline-offset: 1px; }
.cmp-pk-results { overflow-y: auto; padding: 0 .6rem 1rem; }
.cmp-pk-group { margin: .6rem .5rem .3rem; font-size: .64rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #6B7688; }
.cmp-pk-list { list-style: none; margin: 0; padding: 0; }
.cmp-pk-row { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .5rem;
    background: none; border: 0; border-radius: 8px; font: inherit;
    font-family: Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; }
.cmp-pk-row:hover, .cmp-pk-row:focus-visible { background: #FBF7EF; outline: none; }
.cmp-pk-flag { width: 22px; height: 16px; border-radius: 2px; flex: none; }
.cmp-pk-name { font-weight: 600; font-size: .92rem; color: #0B1626; }
.cmp-pk-meta { font-size: .74rem; color: #6B7688; }
.cmp-pk-n { margin-left: auto; font-size: .74rem; color: #6B7688; white-space: nowrap; }
.cmp-pk-none { padding: 1rem .5rem; font-size: .9rem; color: #6B7688; }
.cmp-nojs label { display: block; margin-bottom: .6rem; }

/* ---- N. Tablet ---------------------------------------------------------- */
@media (max-width: 1100px) {
    .cj-head { grid-template-columns: 1fr; gap: 1.2rem; }
    .cj-benefits { border-left: 0; padding-left: 0; border-top: 1px solid #EADFC6; padding-top: .9rem;
        grid-template-columns: repeat(3, 1fr); }
    .cj-acc-btn { grid-template-columns: 34px 1fr 20px; }
    .cj-acc-b { display: none; }      /* the title carries it at this width */
    .cj-cta-in { grid-template-columns: 1fr; }
    .cj-cta-acts { justify-items: start; }
    .cj-fieldcol { width: 170px; }
}

/* ---- N. Mobile — field-by-field, never a shrunken table ---------------- */
@media (max-width: 760px) {
    .cj-slots { grid-template-columns: 1fr; }
    .cj-benefits { grid-template-columns: 1fr; }
    .cj-cover { grid-template-columns: 1fr; }
    .cmp-pk { padding: 0; }
    .cmp-pk-panel { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }

    .cj-tablewrap { border: 0; background: none; }
    .cj-table, .cj-table tbody, .cj-table tr, .cj-table td, .cj-table th { display: block; width: auto; }
    .cj-table thead { display: none; }
    .cj-table tbody tr { border: 0; background: #fff; border: 1px solid #EFEBE2;
        border-radius: 10px; padding: .9rem 1rem; margin-bottom: .7rem; }
    .cj-fieldcol { width: auto; padding: 0 0 .55rem; font-size: .7rem; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase; color: #6B7688; }
    .cj-table td { padding: .45rem 0; border-top: 1px solid #F6F3EC; }
    .cj-table td:first-of-type { border-top: 0; }
    .cj-for { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem;
        font-size: .78rem; font-weight: 700; color: #0B1626; }
    .cj-for .fi { width: 18px; height: 13px; border-radius: 2px; flex: none; }
    .cj-sticky-in { gap: .6rem; overflow-x: auto; }
    .cj-sticky-j { font-size: .76rem; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .cj-acc-chev, .cj-toggle-ui, .cj-toggle-ui::after { transition: none; }
}

/* Grid children that need no rules of their own, declared so nothing depends on
   an implicit default. */
.cj-slot { min-width: 0; display: flex; }
.cj-slot > * { width: 100%; }
.cj-head-main { min-width: 0; }
.cj-cta-mid { min-width: 0; }

/* §15 — decision-critical values: corporate tax, VAT/GST, foreign ownership,
   local director and the service count.

   Weight and size only. No colour, no traffic lights: a green figure would imply
   a judgement, and this tool compares rather than ranks. */
.cj-v--key { font-size: var(--cx-fs-h3); font-weight: 700; letter-spacing: -.005em; }
@media (max-width: 760px) { .cj-v--key { font-size: .98rem; } }

/* §1 — no residual space when the instruction is gone. `hidden` alone is beaten
   by the display rule that gives the paragraph its padding. */
.cmp-empty-msg[hidden] { display: none; }