/* Trellis — shared section components v9 (loaded after tr-inner + tr-particles) */

/* ===== AI + Human split: lead statement, then "What AI assists with" → "What people decide" glass panels ===== */
.tr-aih-lead{max-width:900px;margin:clamp(22px,2.4vw,32px) auto 0!important;text-align:center;font-family:var(--tr-display);font-weight:300;font-size:clamp(22px,2.1vw,30px);line-height:1.3;color:var(--tr-stone)}
.tr-aih{display:grid;grid-template-columns:1.15fr auto 1fr;align-items:stretch;gap:clamp(14px,1.6vw,24px);max-width:1160px;margin:clamp(40px,4.4vw,64px) auto 0}
.tr-aih-panel{position:relative;padding:clamp(28px,3vw,44px);background:rgba(245,241,232,.05);border:1px solid rgba(245,241,232,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .6s ease,border-color .6s ease}
.tr-aih-panel:hover{background:rgba(245,241,232,.08);border-color:rgba(245,241,232,.2)}
.tr-aih-panel--human{background:rgba(196,122,74,.1);border-color:rgba(196,122,74,.32)}
.tr-aih-panel--human:hover{background:rgba(196,122,74,.14);border-color:rgba(196,122,74,.5)}
.tr-aih-tag{display:flex;align-items:center;gap:12px;font-family:var(--tr-display);font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tr-stone);margin-bottom:20px}
.tr-aih-tag i{font-style:normal;display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid rgba(245,241,232,.25);border-radius:50%;font-size:10px;letter-spacing:.06em;color:var(--tr-ivory)}
.tr-aih-panel--human .tr-aih-tag i{border-color:var(--tr-terra);color:var(--tr-terra)}
.tr-aih-intro{font-size:14.5px!important;line-height:1.6;color:rgba(245,241,232,.78);margin:0 0 18px!important}
.tr-aih-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;border-top:1px solid rgba(245,241,232,.12)}
.tr-aih-list li{position:relative;padding:11px 0 11px 18px;border-bottom:1px solid rgba(245,241,232,.12);font-family:var(--tr-display);font-weight:300;font-size:15px;line-height:1.35;color:var(--tr-ivory)}
.tr-aih-list li::before{content:"";position:absolute;left:1px;top:18px;width:5px;height:5px;background:var(--tr-terra);transform:rotate(45deg)}
.tr-aih-big{font-family:var(--tr-display);font-weight:300;font-size:clamp(24px,2.3vw,32px)!important;line-height:1.2;color:var(--tr-ivory);margin:0 0 22px!important}
.tr-aih-points{list-style:none;margin:0;padding:0}
.tr-aih-points li{padding:14px 0;border-top:1px solid rgba(245,241,232,.14);font-size:15px;line-height:1.6;color:rgba(245,241,232,.84)}
.tr-aih-points li:last-child{border-bottom:1px solid rgba(245,241,232,.14)}
.tr-aih-bridge{display:grid;place-items:center}
.tr-aih-bridge span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(196,122,74,.6);color:var(--tr-terra);font-size:18px;background:rgba(20,26,18,.4);box-shadow:0 0 0 6px rgba(196,122,74,.08)}
@media (max-width:900px){
  .tr-aih{grid-template-columns:1fr}
  .tr-aih-bridge span{transform:rotate(90deg)}
}
@media (max-width:520px){.tr-aih-list{grid-template-columns:1fr}}

/* ===== Flow cards: glass cards, FROM label → TO title, last card spans the row as a conclusion ===== */
.tr-flowcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,20px);margin-top:clamp(44px,4.6vw,64px)}
.tr-flowcards > div{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);background:rgba(245,241,232,.045);border:1px solid rgba(245,241,232,.11);overflow:hidden;transition:background-color .6s ease,border-color .6s ease,transform .7s var(--tr-ease-out)}
.tr-flowcards > div::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tr-terra);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--tr-ease)}
.tr-flowcards > div:hover{background:rgba(245,241,232,.08);border-color:rgba(245,241,232,.2);transform:translateY(-3px)}
.tr-flowcards > div:hover::before{transform:scaleX(1)}
.tr-flowcards .tr-qn{color:var(--tr-terra)!important;font-size:10.5px}
.tr-fc-h{display:flex;flex-direction:column;gap:8px;margin:16px 0 14px!important;line-height:1.15}
.tr-fc-from{font-family:var(--tr-display);font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tr-stone)}
.tr-fc-to{display:flex;align-items:baseline;gap:12px;font-family:var(--tr-display);font-weight:300;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.01em;color:var(--tr-ivory)}
.tr-fc-to i{font-style:normal;color:var(--tr-terra);font-size:.8em;transition:transform .6s var(--tr-ease-out)}
.tr-flowcards > div:hover .tr-fc-to i{transform:translateX(4px)}
.tr-flowcards p{font-size:14px!important;line-height:1.68;color:rgba(245,241,232,.74)!important;margin:0}
.tr-flowcards > div:last-child{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1.2fr;align-items:center;column-gap:clamp(20px,3vw,48px);background:rgba(196,122,74,.1);border-color:rgba(196,122,74,.32)}
.tr-flowcards > div:last-child .tr-fc-h{margin:0!important}
.tr-flowcards > div:last-child:hover{background:rgba(196,122,74,.15);border-color:rgba(196,122,74,.5)}
/* 5 + conclusion layout: 3 cards on row one, 2 wider cards on row two, conclusion full width */
.tr-flowcards--5{grid-template-columns:repeat(6,1fr)}
.tr-flowcards--5 > div:nth-child(-n+3){grid-column:span 2}
.tr-flowcards--5 > div:nth-child(4),.tr-flowcards--5 > div:nth-child(5){grid-column:span 3}
@media (max-width:1000px){
  .tr-flowcards,.tr-flowcards--5{grid-template-columns:1fr 1fr}
  .tr-flowcards--5 > div:nth-child(n){grid-column:auto}
  .tr-flowcards > div:last-child,.tr-flowcards--5 > div:last-child{grid-column:1/-1;grid-template-columns:1fr;row-gap:12px}
}
@media (max-width:600px){.tr-flowcards,.tr-flowcards--5{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tr-flowcards > div{transform:none!important}}

/* ===== Flow cards — stacked rows variant: every card is a full-width row (number | label + title | description) ===== */
.tr-flowcards.tr-flowcards--rows{grid-template-columns:1fr;max-width:1240px;margin-left:auto;margin-right:auto}
.tr-flowcards--rows > div,.tr-flowcards--rows > div:nth-child(n){grid-column:1/-1;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.25fr);align-items:center;column-gap:clamp(20px,3vw,48px)}
.tr-flowcards--rows > div .tr-fc-h{margin:0!important}
.tr-flowcards--rows > div:hover{transform:translateX(4px)}
@media (max-width:1000px){
  .tr-flowcards--rows > div,.tr-flowcards--rows > div:nth-child(n){grid-template-columns:1fr;row-gap:12px}
}

/* ===== Card refinement: pair cards with h3 titles (2x2 / 3-up content cards) ===== */
.tr-pair-card{display:flex;flex-direction:column}
.tr-pair-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tr-terra);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--tr-ease)}
.tr-pair-card:hover::before{transform:scaleX(1)}
.tr-pair-card > .tr-qn{color:var(--tr-terra);font-size:10.5px;letter-spacing:.18em}
.tr-pair-card h3{font-family:var(--tr-display);font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1.18;letter-spacing:-.012em;color:var(--tr-olive);margin:16px 0 0;max-width:22ch;text-wrap:balance}
.tr-pair-card h3::after{content:"";display:block;width:32px;height:1px;background:var(--tr-terra);margin:22px 0 20px;transition:width .7s var(--tr-ease)}
.tr-pair-card:hover h3::after{width:64px}
.tr-pair-card h3 + p,.tr-pair-card h3 + ul{margin-top:0}
.tr-pair-card p{font-size:14.5px;line-height:1.72;color:rgba(63,73,56,.82);max-width:56ch}
.tr-pair-card p strong{font-weight:500;color:var(--tr-olive)}
.tr-pair-card .tr-big + h3{margin-top:4px}
.tr-pair-card > .tr-link{margin-top:auto;padding-top:18px;align-self:flex-start}

/* ===== Step grid v3: deep-olive cards on the ivory page ===== */
.tr-stepgrid{gap:clamp(12px,1.2vw,18px);border-top:0}
.tr-stepgrid li,.tr-stepgrid li:nth-child(n){background:var(--tr-olive);background-image:radial-gradient(ellipse 80% 70% at 100% 0%,rgba(216,204,184,.1),transparent 60%),repeating-linear-gradient(45deg,rgba(245,241,232,.025) 0 1px,transparent 1px 48px);border:1px solid rgba(20,26,18,.4);color:var(--tr-ivory);box-shadow:0 20px 40px -30px rgba(20,26,18,.55);transition:background-color .5s ease,transform .7s var(--tr-ease-out),box-shadow .7s var(--tr-ease-out)}
.tr-stepgrid li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tr-terra);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--tr-ease)}
.tr-stepgrid li:hover{background-color:#36402F;transform:translateY(-3px);box-shadow:0 28px 50px -28px rgba(20,26,18,.6)}
.tr-stepgrid li:hover::before{transform:scaleX(1)}
.tr-stepgrid li::after{-webkit-text-stroke:1px rgba(245,241,232,.16)}
.tr-stepgrid li:hover::after{-webkit-text-stroke-color:rgba(196,122,74,.75)}
.tr-stepgrid .tr-qn{color:var(--tr-terra)}
.tr-stepgrid h3{color:var(--tr-ivory)}
.tr-stepgrid p{color:rgba(245,241,232,.76)}
.tr-stepgrid a{color:var(--tr-stone)}
/* A lone card on the last row stretches so the grid never ends on an orphan */
@media (min-width:901px){
  .tr-stepgrid li:last-child:nth-child(3n+1){grid-column:1/-1}
  .tr-stepgrid li:last-child:nth-child(3n+2){grid-column:span 2}
}
@media (max-width:900px) and (min-width:601px){
  .tr-stepgrid li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.tr-stepgrid li{transform:none!important}}

/* ===== Process timeline: columns follow the number of steps (base grid is 5 columns), so 3- and 4-step timelines fill the full width.
   Desktop only: below 1101px the timeline is already a single vertical column. ===== */
@media (min-width:1101px){
  .tr-steps:has(> .tr-step:nth-of-type(4):last-of-type){grid-template-columns:repeat(4,minmax(0,1fr))}
  .tr-steps:has(> .tr-step:nth-of-type(3):last-of-type){grid-template-columns:repeat(3,minmax(0,1fr))}
  .tr-steps:has(> .tr-step:nth-of-type(4):last-of-type) > .tr-step:last-of-type,
  .tr-steps:has(> .tr-step:nth-of-type(3):last-of-type) > .tr-step:last-of-type{padding-right:0}
}

/* ===== Related-page cards: the whole card is clickable. The title link stretches over the card; the "Explore" label is
   decorative, so clicks pass through it to that link instead of being swallowed. ===== */
.tr-rel-card{cursor:pointer}
.tr-rel-card h3 a::after{z-index:2}
.tr-rel-card .tr-link{pointer-events:none}
.tr-rel-card:hover .tr-link{color:var(--tr-terra)}
.tr-rel-card:focus-within{outline:2px solid var(--tr-terra);outline-offset:3px}
.tr-rel-card h3 a:focus-visible{outline:none}

/* ===== Deeper-guide block: no background, closes the section above, separated by a rule ===== */
.tr-guide-light{position:relative;max-width:1320px;margin:clamp(48px,5vw,72px) auto 0;padding:clamp(48px,5vw,72px) 0 0}
.tr-guide-light::before{content:"";position:absolute;top:0;left:var(--tr-gutter);right:var(--tr-gutter);height:1px;background:var(--tr-line)}
.tr-guide-light .tr-head h2{font-size:clamp(26px,2.4vw,34px);margin:12px 0 16px}
.tr-guide-light .tr-head p:not(.tr-eyebrow){margin-bottom:28px}

/* ===== Unordered index lists use the diamond marker; numbers are reserved for real sequences (process steps) ===== */
.tr-index li::before{content:"";width:6px;height:6px;background:var(--tr-terra);transform:rotate(45deg) translateY(-2px)}

/* ===== Statement lists ===== */
/* Rows with a bold label (definition-style): body scale, not display scale */
.tr-statements li:has(> strong){font-family:var(--tr-body);font-weight:400;font-size:15.5px;line-height:1.65;color:rgba(63,73,56,.86);padding:16px 0 16px 28px}
.tr-statements li:has(> strong)::before{top:24px;width:6px;height:6px}
.tr-statements li > strong{font-family:var(--tr-display);font-weight:500;color:var(--tr-olive);margin-right:4px}
.tr-dark .tr-statements li:has(> strong),.tr-pair-card .tr-statements li:has(> strong){color:inherit}
/* Long statement lists (6+ items) are reference lists, not emphasis: match the ruled index-list scale */
.tr-statements:has(> li:nth-child(6)) > li{font-size:16px;line-height:1.4;padding:13px 0 13px 28px;transition:color .3s,padding-left .45s var(--tr-ease)}
.tr-statements:has(> li:nth-child(6)) > li::before{top:20px;width:6px;height:6px}
.tr-statements:has(> li:nth-child(6)) > li:hover{color:var(--tr-terra);padding-left:34px}

/* ===== Comparison table variant: wrapping situation column + "Strong fit" emphasis ===== */
.tr-table--compare tbody th{white-space:normal;width:36%;font-size:clamp(17px,1.35vw,19px)}
.tr-table--compare td{font-size:14.5px}
.tr-table--compare td:nth-child(2){font-family:var(--tr-body);font-weight:400;font-size:14.5px;color:rgba(63,73,56,.86)}
/* Align the label by its text baseline (not the diamond's bottom edge) so it sits level with the sentence that follows; diamond stays centered on the text */
.tr-fit{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--tr-display);font-weight:500;color:var(--tr-terra)}
.tr-fit::before{content:"";flex:none;align-self:center;width:6px;height:6px;background:var(--tr-terra);transform:rotate(45deg)}
.tr-table-note{max-width:1320px;margin:18px auto 0;padding:0 var(--tr-gutter);font-size:14px;line-height:1.7;color:rgba(63,73,56,.8)}

/* ===== Discipline strip (Why Trellis): ruled inline list on dark panels ===== */
.tr-disciplines{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0;max-width:1200px;margin:clamp(28px,3vw,40px) auto 0;padding:0}
.tr-disciplines li{font-family:var(--tr-display);font-weight:300;font-size:clamp(15px,1.2vw,18px);color:var(--tr-ivory);padding:6px clamp(12px,1.2vw,18px);border-left:1px solid rgba(245,241,232,.18);white-space:nowrap}
.tr-disciplines li:first-child{border-left:0}
.tr-disciplines a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(245,241,232,.35)}
.tr-disciplines a:hover{color:var(--tr-stone)}