/* ============================================================================
   pathway.css — the three pathway instruments.

   The client's ask: "Each page should just have something else of a touch, or
   a little bit of a different colour, so that it feels different from the
   three." A colour swap reads as a tint on the same page, so the difference is
   the instrument each page needs, which follows from each vehicle's nature:

     1031      A CLOCK.   Deadline-governed. 45 days to identify, 180 to close.
                          Already built in cockpit.css (.x-clocks); amplified
                          here so the clock leads the page instead of sitting
                          in two small cards below the lede.
     IRA       A CHAIN.   Custody-governed. The whole subject is who holds
                          title, because the failure mode is a prohibited
                          transaction. So the page teaches one thing: the IRA
                          owns the interest and the account holder does not.
     SECONDARY A STATUS.  Not a procedure at all, because it is not available.
                          A procedure layout implies you can do it today. The
                          dominant element is the availability state, and the
                          stages are shown as reference, not as actions.

   These three stay in the COCKPIT register — they are working surfaces where
   an investor acts, unlike the RECORD pages (record.css) where an investor
   verifies. Every property is --pw-* prefixed. Loaded after cockpit.css.
   ========================================================================== */

body.cockpit{
  --pw-line:#d6d9d7;
  --pw-panel:#071321;
  --pw-ink:#090d12;
  --pw-body:#39424b;
  --pw-mut:#5b6570;
  --pw-gold:#d99b1b;
  --pw-gold-deep:#8f5900;   /* 5.4:1 on white — safe for text */
  --pw-gold-soft:#e0a536;
  --pw-on-dark:#e8ebee;
  --pw-on-dark-mut:#a7b3bf;
  --pw-line-dark:rgba(255,255,255,.11);
}

.pw{width:min(calc(100% - 48px),1180px);margin:0 auto}
@media(max-width:640px){.pw{width:calc(100% - 36px)}}

.pw-eyebrow{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pw-gold-soft);margin:0 0 16px}
.pw-hd{margin:0 0 clamp(20px,2.6vw,32px);max-width:64ch}
.pw-hd h2{margin:0 0 10px;font-size:clamp(21px,2.4vw,29px);line-height:1.16;letter-spacing:-.02em;
  font-weight:800;color:var(--pw-ink)}
.pw-hd p{margin:0;font-size:15.5px;line-height:1.6;color:var(--pw-mut)}

/* ---------------- 1031: the clock leads ---------------- */
.pw-clockband{background:var(--pw-panel);color:var(--pw-on-dark);
  padding:clamp(34px,4.4vw,56px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--pw-line-dark)}
.pw-clockband h1{margin:0 0 14px;max-width:24ch;font-size:clamp(32px,4.6vw,54px);line-height:1.05;
  letter-spacing:-.028em;font-weight:800;color:#fff}
.pw-clockband h1 em{font-style:normal;color:var(--pw-gold-soft)}
.pw-clockband .pw-lede{margin:0 0 clamp(26px,3.2vw,38px);max-width:62ch;font-size:16.5px;line-height:1.62;color:var(--pw-on-dark-mut)}
/* Two numbers are the whole subject of a 1031, so they are the largest thing
   on the page rather than two small cards under the copy. */
.pw-clocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);max-width:760px}
.pw-clock{padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,28px);border:1px solid var(--pw-line-dark);
  border-top:2px solid var(--pw-gold);border-radius:10px;background:rgba(255,255,255,.035)}
.pw-clock b{display:block;font-size:clamp(38px,5.4vw,60px);line-height:1;letter-spacing:-.035em;
  font-weight:800;color:var(--pw-gold-soft)}
.pw-clock span{display:block;margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--pw-on-dark-mut)}
.pw-clock small{display:block;margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pw-on-dark-mut)}
@media(max-width:640px){.pw-clocks{grid-template-columns:1fr}}

/* ---------------- IRA: the chain of custody ----------------
   Four links, and the point of the diagram is that "you" is not the owner. */
.pw-chainband{background:var(--pw-panel);color:var(--pw-on-dark);
  padding:clamp(34px,4.4vw,56px) 0 clamp(32px,4vw,50px);border-bottom:1px solid var(--pw-line-dark)}
.pw-chainband h1{margin:0 0 14px;max-width:26ch;font-size:clamp(30px,4.2vw,50px);line-height:1.06;
  letter-spacing:-.028em;font-weight:800;color:#fff}
.pw-chainband h1 em{font-style:normal;color:var(--pw-gold-soft)}
.pw-chainband .pw-lede{margin:0 0 clamp(28px,3.4vw,40px);max-width:62ch;font-size:16.5px;line-height:1.62;color:var(--pw-on-dark-mut)}
.pw-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:stretch}
.pw-chain__node{position:relative;padding:20px clamp(16px,2vw,24px) 22px;border:1px solid var(--pw-line-dark);
  border-right:0;background:rgba(255,255,255,.03)}
.pw-chain__node:first-child{border-radius:10px 0 0 10px}
.pw-chain__node:last-child{border-right:1px solid var(--pw-line-dark);border-radius:0 10px 10px 0}
/* The one node that owns the asset carries the accent. Everything else is a
   participant, which is the distinction the page exists to make. */
.pw-chain__node--owner{background:rgba(217,155,27,.1);border-color:var(--pw-gold);
  border-right:1px solid var(--pw-gold);z-index:1}
.pw-chain__node--owner + .pw-chain__node{border-left:0}
.pw-chain__role{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pw-on-dark-mut);margin:0 0 10px}
.pw-chain__node--owner .pw-chain__role{color:var(--pw-gold-soft)}
.pw-chain__node b{display:block;font-size:16.5px;line-height:1.22;font-weight:700;color:#fff;margin:0 0 8px}
.pw-chain__node span{display:block;font-size:13.5px;line-height:1.5;color:var(--pw-on-dark-mut)}
.pw-chain__node .pw-not{display:inline-block;font-style:normal;margin-top:10px;padding:4px 9px;border-radius:4px;
  border:1px solid var(--pw-line-dark);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pw-on-dark-mut)}
.pw-chain__caption{margin:16px 0 0;max-width:70ch;font-size:14px;line-height:1.6;color:var(--pw-on-dark-mut)}
@media(max-width:900px){
  .pw-chain{grid-template-columns:1fr 1fr}
  .pw-chain__node{border-right:1px solid var(--pw-line-dark);border-radius:0}
  .pw-chain__node:nth-child(-n+2){border-bottom:0}
  .pw-chain__node:nth-child(2n){border-left:0}
  .pw-chain__node--owner + .pw-chain__node{border-left:1px solid var(--pw-line-dark)}
}
@media(max-width:520px){
  .pw-chain{grid-template-columns:1fr}
  .pw-chain__node{border-radius:0;border-bottom:0;border-right:1px solid var(--pw-line-dark);border-left:1px solid var(--pw-line-dark)}
  .pw-chain__node:last-child{border-bottom:1px solid var(--pw-line-dark)}
  .pw-chain__node--owner + .pw-chain__node{border-left:1px solid var(--pw-line-dark)}
}

/* ---------------- Secondary: the status board ----------------
   The client's instruction is that this must read as a future capability, not
   a live product. The availability state is therefore the largest element on
   the page, ahead of any description of how it will work. */
.pw-statusband{background:var(--pw-panel);color:var(--pw-on-dark);
  padding:clamp(34px,4.4vw,56px) 0 clamp(34px,4.2vw,52px);border-bottom:1px solid var(--pw-line-dark)}
.pw-statusband h1{margin:0 0 14px;max-width:26ch;font-size:clamp(30px,4.2vw,50px);line-height:1.06;
  letter-spacing:-.028em;font-weight:800;color:#fff}
.pw-statusband h1 em{font-style:normal;color:var(--pw-gold-soft)}
.pw-statusband .pw-lede{margin:0;max-width:62ch;font-size:16.5px;line-height:1.62;color:var(--pw-on-dark-mut)}
.pw-status{margin:clamp(28px,3.4vw,40px) 0 0;padding:clamp(24px,3vw,34px);
  border:1px solid var(--pw-line-dark);border-left:3px solid var(--pw-gold);border-radius:10px;
  background:rgba(255,255,255,.035);max-width:820px}
.pw-status__tag{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pw-gold-soft)}
.pw-status__tag i{width:8px;height:8px;border-radius:50%;background:var(--pw-gold-soft);flex:none}
.pw-status b{display:block;font-size:clamp(20px,2.4vw,27px);line-height:1.2;letter-spacing:-.02em;
  font-weight:800;color:#fff;margin:0 0 12px}
.pw-status p{margin:0;max-width:66ch;font-size:15.5px;line-height:1.62;color:var(--pw-on-dark)}
.pw-status ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.pw-status li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:15px;line-height:1.55;color:var(--pw-on-dark-mut)}
.pw-status li::before{content:"";margin-top:9px;width:9px;height:1px;background:var(--pw-gold-soft)}
.pw-status .pw-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* Reference stages: numbered, flat, and explicitly NOT interactive, so the
   page cannot be mistaken for a process you can start today. */
.pw-ref{padding:clamp(34px,4.4vw,54px) 0 0}
.pw-ref ol{list-style:none;margin:0;padding:0;counter-reset:pw;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.pw-ref li{counter-increment:pw;padding:22px clamp(16px,2vw,26px) 24px 0;border-top:1px solid var(--pw-line)}
.pw-ref li + li{padding-left:clamp(16px,2vw,26px);border-left:1px solid var(--pw-line)}
.pw-ref li::before{content:counter(pw,decimal-leading-zero);display:block;margin:0 0 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--pw-gold-deep)}
.pw-ref h3{margin:0 0 9px;font-size:16px;line-height:1.24;font-weight:700;color:var(--pw-ink)}
.pw-ref p{margin:0;font-size:14.5px;line-height:1.6;color:var(--pw-mut)}
@media(max-width:900px){
  .pw-ref ol{grid-template-columns:1fr 1fr}
  .pw-ref li:nth-child(odd){padding-left:0;border-left:0}
  .pw-ref li:nth-child(even){padding-left:clamp(16px,2vw,26px);border-left:1px solid var(--pw-line)}
}
@media(max-width:560px){
  .pw-ref ol{grid-template-columns:1fr}
  .pw-ref li,.pw-ref li + li{padding-left:0;border-left:0}
}

/* ---------------- shared: requirements + deal strip ---------------- */
.pw-body{background:var(--pw-canvas,#eceeed);padding:clamp(32px,4vw,50px) 0 clamp(38px,4.6vw,60px)}
.pw-req{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px)}
.pw-req section{padding:clamp(20px,2.4vw,26px) 0;border-top:1px solid var(--pw-line)}
.pw-req h3{display:flex;align-items:baseline;gap:12px;margin:0 0 13px;font-size:16.5px;line-height:1.2;
  font-weight:700;color:var(--pw-ink)}
.pw-req h3 span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  font-weight:700;letter-spacing:.12em;color:var(--pw-gold-deep);flex:none}
.pw-req ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pw-req li{display:grid;grid-template-columns:15px 1fr;gap:11px;font-size:15px;line-height:1.55;color:var(--pw-body)}
.pw-req li::before{content:"";margin-top:6px;width:9px;height:9px;border:1.5px solid var(--pw-gold-deep);border-radius:2px}
@media(max-width:780px){.pw-req{grid-template-columns:1fr}}

/* The deal strip is where a pathway page ENDS. Every one of these pages used
   to finish by linking to another marketing page. */
.pw-deals{padding:clamp(32px,4vw,50px) 0 0}
.pw-deals__hd{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 16px;
  padding-bottom:12px;border-bottom:2px solid var(--pw-gold)}
.pw-deals__hd h2{margin:0;font-size:clamp(19px,2.1vw,24px);line-height:1.18;letter-spacing:-.018em;
  font-weight:800;color:var(--pw-ink)}
.pw-deals__hd small{font-size:13.5px;color:var(--pw-mut)}
.pw-deals__hd a{margin-left:auto;display:inline-flex;align-items:center;min-height:40px;
  font-size:13.5px;font-weight:700;color:var(--pw-gold-deep)}
.pw-deal{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:12px 14px;margin-bottom:10px;background:#fff;border:1px solid var(--pw-line);border-radius:10px;
  transition:box-shadow .15s,transform .15s}
.pw-deal:hover{box-shadow:0 10px 30px rgba(9,13,18,.08);transform:translateY(-1px)}
.pw-deal img{width:96px;height:64px;object-fit:cover;border-radius:6px}
.pw-deal__nm b{display:block;font-size:15.5px;font-weight:700;color:var(--pw-ink);line-height:1.25}
.pw-deal__nm span{display:block;margin-top:3px;font-size:13.5px;color:var(--pw-mut)}
/* Availability, on the card. An asset-class page lists everything in the class,
   so each row has to say which of the three states it is in — the same three
   words, the same dot vocabulary, as the discovery chip (.dc-chip). Written by
   _build/make_asset_pages.py from the status in assets/js/discovery.js; it is
   never typed into the HTML. White on the navy panel is 16.7:1. */
.pw-deal__st{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-style:normal;
  padding:4px 9px;border-radius:5px;background:var(--pw-panel);color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pw-deal__st i{width:7px;height:7px;border-radius:50%;flex:none;background:#93a0ac}
.pw-deal__st--available i{background:var(--pw-gold)}
.pw-deal__st--review i{background:transparent;border:1.5px solid var(--pw-gold)}
.pw-deal__go{display:inline-flex;align-items:center;min-height:40px;padding:0 4px;
  font-size:13.5px;font-weight:700;color:var(--pw-gold-deep);white-space:nowrap}
@media(max-width:640px){
  .pw-deal{grid-template-columns:72px minmax(0,1fr);row-gap:8px}
  .pw-deal img{width:72px;height:56px;grid-row:1/3}
  .pw-deal__nm,.pw-deal__go{grid-column:2}
}

.pw-fine{margin:clamp(30px,3.6vw,44px) 0 0;padding-top:16px;border-top:1px solid var(--pw-line);
  max-width:92ch;font-size:12.5px;line-height:1.65;color:var(--pw-mut)}

/* ---------------- 1031, in place ----------------
   1031-exchange was the least broken of the eleven: it already had the clock,
   a stage selector, a stage-specific answer, and real candidate deals. It did
   not need rebuilding, it needed the clock to LEAD. cockpit-page.css rendered
   the two numbers at 1.32rem (21px), so the entire subject of a 1031 was
   smaller than the lede above it. */
body.exchange-cockpit-page .x-clocks{gap:clamp(12px,1.8vw,20px);margin-top:clamp(20px,2.6vw,30px)}
body.exchange-cockpit-page .x-clock{padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,26px);
  border-top:2px solid var(--pw-gold)}
/* Capped so the numeral holds one line. It is white-space:nowrap, so a size
   that does not fit does not wrap — it clips, silently, mid-word.
   SIZE AGAINST "180 DAYS", NOT "45 DAYS". The previous ramp was fitted to the
   shorter of the two clocks, and "180 days" lost its final letter at 360, 375,
   390, 414, 430 and 1024 — every common phone width. It measured clean because
   the clip produces no overflow; it is only visible on screen, magnified.
   Verified across 24 widths from 320 to 1600 with both strings. */
body.exchange-cockpit-page .x-clock b{font-size:clamp(30px,3.1vw,38px);line-height:1.05;letter-spacing:-.03em;white-space:nowrap}
body.exchange-cockpit-page .x-clock small{margin-top:11px;font-size:14px;line-height:1.5}
@media(max-width:640px){
  body.exchange-cockpit-page .x-clock b{font-size:clamp(22px,6.8vw,34px)}
}

/* ---------------- asset class: inventory, not routing ----------------
   The four asset-class pages shared the eleven-page router template: an H1
   that was a question, four interchangeable lens panels each ending in a link
   away, and a strip of three deals regardless of how many the class actually
   holds. They are inventory pages, so the class thesis leads, the lenses are a
   read rather than four buttons, and the page ends at every real deal in that
   class with an honest count. Hospitality holds seven; student housing and
   medical office hold one each, and a class with one deal now says one deal.
   That honesty is the differentiation, and it is on-brand for a firm whose
   stated differentiator is restraint. */
.ac-band{background:var(--pw-panel);color:var(--pw-on-dark);
  padding:clamp(34px,4.4vw,56px) 0 clamp(30px,3.8vw,46px);border-bottom:1px solid var(--pw-line-dark)}
.ac-band h1{margin:0 0 14px;max-width:26ch;font-size:clamp(30px,4.2vw,50px);line-height:1.06;
  letter-spacing:-.028em;font-weight:800;color:#fff}
.ac-band h1 em{font-style:normal;color:var(--pw-gold-soft)}
.ac-band .pw-lede{margin:0;max-width:62ch;font-size:16.5px;line-height:1.62;color:var(--pw-on-dark-mut)}
/* The count is a fact about the shelf, so it is stated up front rather than
   discovered at the bottom. */
.ac-count{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:clamp(24px,3vw,34px) 0 0;
  padding-top:18px;border-top:1px solid var(--pw-line-dark)}
.ac-count b{font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:-.03em;font-weight:800;color:var(--pw-gold-soft)}
.ac-count span{font-size:15px;line-height:1.5;color:var(--pw-on-dark-mut);max-width:46ch}

/* The four lenses as a ruled read: label chip in a rail, question and body in
   the content column. Not four boxes, not four buttons, no CTA per lens. */
.ac-lens{padding:clamp(6px,1vw,12px) 0 0}
.ac-lens dl{margin:0;padding:0}
.ac-lens > dl > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 clamp(18px,2.6vw,36px);
  padding:clamp(20px,2.4vw,26px) 0;border-top:1px solid var(--pw-line)}
.ac-lens > dl > div:last-child{border-bottom:1px solid var(--pw-line)}
.ac-lens dt{grid-column:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pw-gold-deep);
  line-height:1.5;padding-top:3px}
.ac-lens dd{grid-column:2;margin:0}
.ac-lens dd b{display:block;margin:0 0 8px;font-size:clamp(17px,1.8vw,20px);line-height:1.24;
  letter-spacing:-.015em;font-weight:700;color:var(--pw-ink)}
.ac-lens dd span{display:block;max-width:72ch;font-size:15.5px;line-height:1.62;color:var(--pw-body)}
@media(max-width:700px){
  .ac-lens > dl > div{grid-template-columns:1fr;gap:9px}
  .ac-lens dt,.ac-lens dd{grid-column:1}
}

/* One route to the Opportunities page, replacing this page's own deal
   browser (2026-09-10): "Should be going to the same opportunities page." */
.pw-route{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 28px;margin:clamp(34px,4.4vw,56px) 0 0;
  padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--pw-line,#d6d9d7);
}
.pw-route h2{margin:0;font-family:var(--hd-serif,Georgia,serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.8rem)}

/* ------------------------------------------------------------ 1031 form --
   Inline by default: an ordinary section at the foot of the page, reachable by
   the stage buttons as anchor links. exchange.js adds .is-modal once it has
   bound the buttons, which hides it until one is pressed. */
.x-form{padding:clamp(40px,5vw,72px) 0}
.x-form__panel{position:relative;max-width:760px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.x-form__close{
  position:absolute;top:10px;right:12px;width:40px;height:40px;
  font-size:26px;line-height:1;background:transparent;border:0;cursor:pointer;color:var(--hd-ink,#0C1B2E);
}
.x-form .ik-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px 18px;margin-top:18px}
.x-form .ik-group{margin-top:20px}
.x-form .ik-group__body{display:flex;flex-wrap:wrap;gap:8px}
.x-form .ik-group--consent .ik-group__body{display:block}
.x-form .ik-fine{margin-top:14px;font-size:.8125rem;color:var(--hd-ink-3,#5C6D80)}
.ik-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.x-form.is-modal{display:none}
.x-form.is-modal.is-open{
  display:flex;position:fixed;inset:0;z-index:1000;
  align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:clamp(12px,4vh,48px) 12px;background:rgba(5,13,26,.62);
}
.x-form.is-modal.is-open .x-form__panel{
  width:100%;padding:clamp(22px,3vw,34px);background:var(--hd-paper,#F7F5F0);
  border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.35);
}
html.x-lock{overflow:hidden}

.pw-custodians{margin:14px 0 0;font-size:.9375rem;line-height:1.55;color:var(--pw-body,#33455A)}
.pw-custodians b{display:block;margin-bottom:3px;color:var(--pw-ink,#0C1B2E)}
.pw-custodians__fine{margin:6px 0 0;font-size:.8125rem;color:var(--pw-mut,#5C6D80)}