/* Interaction states for CAPX components.
   Declared here, never inline: an inline property beats a stylesheet selector,
   so anything that changes on hover must be owned by the stylesheet.
   Two hover mechanisms, and the shape of the target decides which —
   a run of text changes colour, a rectangle tints its background. */

a[data-capx-textlink]{color:var(--text-primary);text-decoration:none;transition:var(--transition-color);}
a[data-capx-textlink]:hover{color:var(--accent);}
a[data-capx-textlink][data-dark]{color:var(--text-on-dark);}
a[data-capx-textlink][data-dark]:hover{color:var(--accent);}

[data-capx-button]{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:var(--radius-control);font-family:var(--font-text);font-weight:var(--weight-button);font-size:var(--text-button);padding:var(--button-pad);white-space:nowrap;cursor:pointer;border:0;transition:var(--transition-tint),border-color var(--duration-fast) var(--ease-out),var(--transition-color);}
[data-capx-button="primary"]{background:var(--accent);color:var(--text-on-accent);}
[data-capx-button="primary"]:hover{background:var(--accent-hover);color:var(--text-on-accent);}
[data-capx-button="secondary"]{background:transparent;color:var(--text-primary);border:1px solid var(--text-primary);}
[data-capx-button="secondary"]:hover{background:var(--text-primary);color:var(--ink-fg);}
[data-capx-button="secondary"][data-dark]{color:var(--text-on-dark);border-color:var(--border-on-dark);}
[data-capx-button="secondary"][data-dark]:hover{background:transparent;border-color:var(--text-on-dark);color:var(--text-on-dark);}
[data-capx-button][disabled]{opacity:0.4;pointer-events:none;}

a[data-capx-tile]{color:var(--text-primary);text-decoration:none;transition:var(--transition-tint);}
a[data-capx-tile]:hover{background:var(--surface-hover);}
a[data-capx-tile]:hover [data-capx-tile-cta],a[data-capx-tile]:hover [data-capx-rowtitle]{color:var(--accent);}
[data-capx-tile-cta],[data-capx-rowtitle]{transition:var(--transition-color);}

a[data-capx-row]{display:block;color:var(--text-primary);text-decoration:none;transition:var(--transition-tint);}
a[data-capx-row]:hover{background:var(--surface-hover);}
a[data-capx-row]:hover [data-capx-rowtitle]{color:var(--accent);}

[data-capx-field] input,[data-capx-field] select,[data-capx-field] textarea{font-family:var(--font-text);width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--border-field);background:var(--surface-field);padding:var(--field-pad);font-size:var(--text-body);border-radius:var(--radius-control);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out);}
[data-capx-field] input:focus,[data-capx-field] select:focus,[data-capx-field] textarea:focus{border-color:var(--border-focus);outline:none;}
[data-capx-field] input::placeholder,[data-capx-field] textarea::placeholder{color:var(--text-muted);}

[data-capx-root] *:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);}
[data-capx-root] ::selection{background:var(--accent);color:var(--ink);}

/* Nav. One mark, one meaning: the 2px ink underline means "you are here" and
   nothing else. It sits at bottom:-1px so it covers the nav hairline rather
   than stacking above it. An open menu carries no mark. */
[data-capx-navlink]{position:relative;display:flex;align-items:center;height:var(--nav-height);white-space:nowrap;background:none;border:0;padding:0;margin:0;font:inherit;font-family:var(--font-text);font-weight:var(--weight-structure);font-size:var(--text-ui);color:var(--text-primary);text-decoration:none;cursor:pointer;transition:var(--transition-color);}
[data-capx-navlink]:hover{color:var(--accent);}
[data-capx-navlink][data-current="1"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text-primary);}
[data-capx-nav][data-surface="dark"] [data-capx-navlink]{color:var(--text-on-dark);}
[data-capx-nav][data-surface="dark"] [data-capx-navlink]:hover{color:var(--accent);}
[data-capx-nav][data-surface="dark"] [data-capx-navlink][data-current="1"]::after{background:var(--text-on-dark);}
a[data-capx-panelrow]{display:block;color:var(--text-primary);text-decoration:none;transition:var(--transition-tint);}
a[data-capx-panelrow]:hover{background:var(--surface-hover);}
a[data-capx-panelrow]:hover [data-capx-rowtitle]{color:var(--accent);}
a[data-capx-flink]{color:var(--text-primary);text-decoration:none;transition:var(--transition-color);}
a[data-capx-flink]:hover{color:var(--accent);}

[data-capx-burger]{display:none;background:none;border:1px solid var(--border-firm);border-radius:var(--radius-control);width:var(--tap-min);height:var(--tap-min);align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:5px;padding:0;}
[data-capx-burger] span{display:block;width:18px;height:1.5px;background:var(--text-primary);}
[data-capx-nav][data-surface="dark"] [data-capx-burger]{border-color:var(--border-on-dark);}
[data-capx-nav][data-surface="dark"] [data-capx-burger] span{background:var(--text-on-dark);}

/* Long-form article body. */
[data-capx-body] p{margin:0 0 24px;font-size:var(--text-lead);line-height:var(--lh-longform);color:var(--text-longform);text-wrap:pretty;}
[data-capx-body] h2{scroll-margin-top:108px;margin:56px 0 20px;font-family:var(--font-display);font-optical-sizing:var(--font-display-optical-sizing);font-size:var(--display-sub);line-height:1.25;font-weight:var(--weight-structure);letter-spacing:-0.012em;color:var(--text-primary);text-wrap:pretty;}
[data-capx-body] h3{margin:40px 0 14px;font-size:17px;line-height:1.4;font-weight:var(--weight-structure);letter-spacing:0.02em;color:var(--text-primary);}
[data-capx-body] ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;}
[data-capx-body] li{position:relative;padding-left:32px;font-size:var(--text-lead);line-height:var(--lh-body);color:var(--text-longform);text-wrap:pretty;}
[data-capx-body] li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--border-firm);}
[data-capx-body] strong{font-weight:var(--weight-structure);color:var(--text-primary);}
[data-capx-body] em{font-style:italic;}
[data-capx-body] a{color:var(--text-primary);border-bottom:1px solid var(--border-firm);text-decoration:none;transition:var(--transition-color),border-color var(--duration-fast) var(--ease-out);}
[data-capx-body] a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* Responsive. Collapse thresholds are set by measure, not by device: a 3-up
   grid collapses before its columns fall below 42ch, which is 1080px — not 900.
   Odd counts go 3 → 1; even counts may take the 2-up step. */
@media (max-width:1080px){
  [data-capx-root] section,[data-capx-nav]>div,[data-capx-footer]{padding-left:var(--gutter-md)!important;padding-right:var(--gutter-md)!important;}
  [data-capx-navlinks],[data-capx-navlogin]{display:none!important;}
  [data-capx-burger]{display:flex!important;}
  [data-capx-nav] [data-capx-navactions]>[data-capx-button]{display:none!important;}
  [data-capx-burger]{border:0!important;width:auto!important;height:auto!important;padding:15px!important;margin:-15px!important;}
  [data-capx-burger] span{width:20px!important;}
  [data-capx-comparison]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;}
  [data-capx-comparison]>a[data-capx-tile]{border-right:0!important;border-bottom:var(--rule-hairline);grid-row:auto!important;grid-template-rows:none!important;}
  [data-capx-comparison]>a[data-capx-tile]:last-of-type{border-bottom:0;}
  [data-capx-comparison]>a[data-capx-tile]>ul{grid-row:auto!important;grid-template-rows:none!important;}
  [data-capx-comparison]>div{grid-row:auto!important;grid-template-rows:none!important;}
  [data-capx-twocol]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;gap:var(--column-gap-md)!important;}
  [data-capx-twocol]>*{grid-row:auto!important;grid-template-rows:none!important;}
  [data-capx-outcomes]{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:20px!important;}
  [data-capx-outcomes]>div:nth-child(odd){border-left:0!important;padding-left:0!important;}
}
@media (max-width:900px){
  [data-capx-proofband]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:40px 32px!important;}
  [data-capx-h1]{font-size:40px!important;}
  [data-capx-footer-grid]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:40px!important;}
  [data-capx-footer-grid]>div:first-child{grid-column:span 2;}
  [data-capx-root] section{padding-top:72px!important;padding-bottom:72px!important;}
}
@media (max-width:600px){
  [data-capx-root] section,[data-capx-nav]>div,[data-capx-footer]{padding-left:var(--gutter-sm)!important;padding-right:var(--gutter-sm)!important;}
  [data-capx-proofband],[data-capx-outcomes]{grid-template-columns:minmax(0,1fr)!important;row-gap:32px!important;}
  [data-capx-outcomes]>div{border-left:0!important;padding-left:0!important;}
  [data-capx-footer-grid]{grid-template-columns:minmax(0,1fr)!important;}
  [data-capx-footer-grid]>div:first-child{grid-column:span 1;}
  [data-capx-h1]{font-size:34px!important;}
}

/* Small-screen corrections (audited on the CAPX website at 390 / 768 / 1024).
   Text links are punctuation-sized by design, so on touch they get the 44px
   tap box the system already declares in --tap-min without changing their ink. */
@media (max-width:900px){
  a[data-capx-textlink]{display:inline-flex;align-items:center;min-height:var(--tap-min);}
}
@media (max-width:600px){
  /* The nav bar carries logo + burger + the primary CTA. At 390 that row is
     6px too wide, so the row tightens rather than dropping the CTA. */
  [data-capx-navactions]{gap:12px!important;}
  [data-capx-nav] [data-capx-navactions] [data-capx-button]{padding:12px 14px!important;font-size:13.5px!important;}
  /* Four lender names across a 350px column clips them; two columns keeps the
     grid even, so no orphan in the last row. */
  [data-capx-lendergrid]>div{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  /* An odd name count would leave an orphan in the last row; the final cell
     takes the whole row instead. */
  [data-capx-lendergrid]>div>div:last-child:nth-child(odd){grid-column:span 2;}
}

/* ArticleRow. The index row is three tracks — 200px category / title+dek / 150px
   date — so 446px of it is fixed. The title track falls under ~30ch once the
   content column drops below ~850px, which is a 920px viewport at the md
   gutter: collapse there, not at a round 900. The featured row's 7fr track
   fails at the same width, so both stack, with more air between the headline
   and the dek in the featured case (selected by its h2 title). */
@media (max-width:920px){
  a[data-capx-row]>div{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important;}
  a[data-capx-row]:has(h2[data-capx-rowtitle])>div{gap:26px!important;}
}

/* The wordmark link is 24px tall — correct as ink, short as a touch target.
   The nav bar is 76px, so a 44px tap box is invisible. */
@media (max-width:900px){
  [data-capx-nav] a:has(img){min-height:var(--tap-min);}
}

/* Below 700px a five-column tombstone table stops being a table: each deal
   becomes a card — figure first, then labelled lines — instead of a swipe. */
@media (max-width:700px){
  [data-capx-tombstone]{overflow-x:visible!important;}
  [data-capx-tombstone-inner]{min-width:0!important;}
  [data-capx-tombstone-head]{display:none!important;}
  [data-capx-tombstone-row]{grid-template-columns:minmax(0,1fr)!important;row-gap:20px!important;column-gap:10px!important;padding:24px 0!important;align-items:start!important;}
  [data-capx-tombstone-row]>span[data-figure]{margin-bottom:4px;}
  [data-capx-tombstone-row]>span[data-l]:not([data-figure])::before{content:attr(data-l);display:block;font-size:var(--text-label);line-height:var(--lh-label);font-weight:var(--weight-structure);letter-spacing:var(--track-column);text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
}

/* Touch has no :hover — mirror every hover mechanism as :active so a tap gives the
   same confirmation on mobile/tablet. hover:none targets touch input specifically,
   so mouse users keep plain :hover and never see this. */
@media (hover: none) {
  a[data-capx-textlink]:active{color:var(--accent);}
  a[data-capx-textlink][data-dark]:active{color:var(--accent);}
  [data-capx-button="primary"]:active{background:var(--accent-hover);color:var(--text-on-accent);}
  [data-capx-button="secondary"]:active{background:var(--text-primary);color:var(--ink-fg);}
  [data-capx-button="secondary"][data-dark]:active{background:transparent;border-color:var(--text-on-dark);color:var(--text-on-dark);}
  a[data-capx-tile]:active{background:var(--surface-hover);}
  a[data-capx-tile]:active [data-capx-tile-cta],a[data-capx-tile]:active [data-capx-rowtitle]{color:var(--accent);}
  a[data-capx-row]:active{background:var(--surface-hover);}
  a[data-capx-row]:active [data-capx-rowtitle]{color:var(--accent);}
  [data-capx-navlink]:active{color:var(--accent);}
  [data-capx-nav][data-surface="dark"] [data-capx-navlink]:active{color:var(--accent);}
  a[data-capx-panelrow]:active{background:var(--surface-hover);}
  a[data-capx-panelrow]:active [data-capx-rowtitle]{color:var(--accent);}
  a[data-capx-flink]:active{color:var(--accent);}
  [data-capx-body] a:active{color:var(--accent);border-bottom-color:var(--accent);}
}