@import url("/tenant-template.css?v=4");

/* About: questions become a shared rental relationship. Existing CasaBlue shell. */
.tenant-about-page { --tenant-template-canvas: #fff; --about-surface: #f5f8fa; padding-bottom: 96px; }
.tenant-about-page .tenant-template-hero { background: var(--about-surface); }
.tenant-about-story, .tenant-about-trust, .tenant-about-belief { margin-top: clamp(64px, 8vw, 112px); scroll-margin-top: 112px; }
.tenant-about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.tenant-about-page .tenant-template-heading h2 { margin: 16px 0 24px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; text-wrap: balance; }
.tenant-about-page p { color: var(--tenant-template-muted); font-size: 18px; line-height: 1.65; }
.tenant-about-page .tenant-template-hero__copy > p { font-size: var(--casapay-hero-description-size); line-height: var(--casapay-hero-description-line-height); }
.tenant-about-story p + p { margin-top: 18px; }
/* Open questions: not a product UI or an implied answered checklist. */
.tenant-about-questions { padding: 12px 0 12px 24px; }
.tenant-about-questions > p { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.tenant-about-questions ul { list-style: none; padding: 0; margin: 0; }
.tenant-about-questions li { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--tenant-template-line); font-size: 22px; font-weight: 650; line-height: 1.35; }
.tenant-about-questions li:last-child { border-bottom: 0; padding-bottom: 0; }
.tenant-about-question-marker { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--tenant-template-line); border-radius: 50%; font-size: 20px; font-weight: 500; color: var(--tenant-template-muted); }
/* One decisive visual foundation, drawn from the actual narrative. */
.tenant-about-foundation { background: var(--tenant-template-ink); color: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 48px); }
.tenant-about-foundation .tenant-template-eyebrow { color: #c5e5ed; }
.tenant-about-foundation dl { margin: 28px 0 0; }
.tenant-about-foundation dl > div { display: grid; gap: 10px; padding: 24px 0; border-bottom: 1px solid #44636d; }
.tenant-about-foundation dl > div:last-child { border-bottom: 0; padding-bottom: 4px; }
.tenant-about-foundation dt { font-family: var(--casapay-font-display); font-size: clamp(36px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.025em; }
.tenant-about-foundation dd { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.5; color: #d8e5e9; text-align: left; }
.tenant-about-intro { max-width: 760px; margin: 0 auto 36px; text-align: center; }
/* The future ecosystem is explicitly labelled above; no simulated verification. */
.tenant-about-connection { display: grid; grid-template-columns: 1fr minmax(28px, 1fr) auto minmax(28px, 1fr) 1fr; gap: 16px; align-items: center; padding: 48px 40px; margin-bottom: 12px; border-radius: 28px; background: var(--about-surface); }
.tenant-about-connection__party { font-family: var(--casapay-font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; text-align: center; }
.tenant-about-connection__line { height: 1px; background: var(--tenant-template-accent); position: relative; }
.tenant-about-connection__line::before, .tenant-about-connection__line::after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; border: 1px solid var(--tenant-template-accent); border-radius: 50%; background: var(--about-surface); }
.tenant-about-connection__line::before { left: 0; }
.tenant-about-connection__line::after { right: 0; }
.tenant-about-connection__brand { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.tenant-about-connection__brand img { display: block; width: 145px; height: auto; object-fit: contain; }
.tenant-about-connection__brand > span { color: var(--tenant-template-muted); font-size: 14px; line-height: 1.4; text-align: center; }
.tenant-about-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--tenant-template-line); }
.tenant-about-sides article { padding: 36px 40px 36px 0; }
.tenant-about-sides article + article { padding: 36px 0 36px 40px; border-left: 1px solid var(--tenant-template-line); }
.tenant-about-sides h3 { margin: 14px 0; max-width: 24ch; font-family: var(--casapay-font-display); font-size: 32px; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.tenant-about-sides p { margin: 0; max-width: 48ch; }
.tenant-about-page .tenant-about-boundary { max-width: 850px; margin: 24px auto 0; font-size: 14px; line-height: 1.55; text-align: center; }
.tenant-about-belief { max-width: 1180px; text-align: center; background: var(--about-surface); border-radius: 28px; padding: clamp(36px, 6vw, 80px); }
.tenant-about-belief > h2, .tenant-about-belief > p { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.tenant-about-closing { margin-top: 24px; color: var(--tenant-template-ink) !important; font-weight: 650; }
@media (max-width: 900px) {
  .tenant-about-story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tenant-about-foundation { order: 2; }
  .tenant-about-questions { padding: 0; }
  .tenant-about-story .tenant-template-heading { max-width: 700px; }
  .tenant-about-connection { padding: 36px 24px; gap: 12px; }
}
@media (max-width: 760px) {
  .tenant-about-page { padding-bottom: 64px; }
  .tenant-about-page > .tenant-template-section { width: calc(100% - 40px); }
  .tenant-about-story, .tenant-about-trust, .tenant-about-belief { margin-top: 56px; }
  .tenant-about-page p { font-size: 16px; }
  .tenant-about-questions li { font-size: 20px; padding: 20px 0; gap: 16px; }
  .tenant-about-question-marker { flex-basis: 32px; height: 32px; font-size: 18px; }
  .tenant-about-foundation { padding: 28px; }
  .tenant-about-foundation dd { font-size: 15px; }
  .tenant-about-connection { grid-template-columns: 1fr; justify-items: center; gap: 20px; padding: 32px 24px; }
  .tenant-about-connection__line { width: 1px; height: 32px; }
  .tenant-about-connection__line::before, .tenant-about-connection__line::after { left: -3px; top: 0; }
  .tenant-about-connection__line::after { top: auto; bottom: 0; }
  .tenant-about-connection__party { font-size: 26px; }
  .tenant-about-connection__party br { display: none; }
  .tenant-about-sides { grid-template-columns: minmax(0, 1fr); }
  .tenant-about-sides article, .tenant-about-sides article + article { padding: 28px 0; border-left: 0; }
  .tenant-about-sides article + article { border-top: 1px solid var(--tenant-template-line); }
  .tenant-about-sides h3 { font-size: 28px; }
  .tenant-about-belief { padding: 36px 24px; }
}

:root { --about-blue:#0786b5; --about-blue-dark:#075f80; --about-ink:#183c47; --about-muted:#5c7078; --about-line:#d8e5e9; --about-mint:#dff5eb; --about-lilac:#ece8ff; }
.tenant-about { overflow:hidden; background:#fbfcfb; color:var(--about-ink); }
.tenant-about *, .tenant-about *::before, .tenant-about *::after { box-sizing:border-box; }
.tenant-about__eyebrow { display:block; color:var(--about-blue-dark); font-size:13px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.tenant-about__ticker { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; width:min(1180px,calc(100% - 40px)); margin:40px auto 0; color:#63777e; font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.tenant-about__ticker i { width:5px; height:5px; border-radius:50%; background:#92d9c6; }

.tenant-about__section { display:grid; grid-template-columns:minmax(0,1fr) minmax(370px,.82fr); gap:clamp(54px,8vw,110px); align-items:center; width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:130px 0; }
.tenant-about__heading h2, .tenant-about__statement h2, .tenant-about__ecosystem h2, .tenant-about__cta h2 { margin:17px 0 0; color:var(--about-ink); font-family:var(--casapay-font-display,"DD Scoop",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); font-size:clamp(50px,7vw,88px); font-weight:900; letter-spacing:-.055em; line-height:.92; }
.tenant-about__heading>p { max-width:720px; margin:24px 0 0; color:var(--about-muted); font-size:19px; line-height:1.55; }
.tenant-about__question-card { padding:34px; border:1px solid var(--about-line); border-radius:30px; background:#fff; box-shadow:0 16px 48px rgba(24,60,71,.07); }
.tenant-about__question-card>span { color:var(--about-blue); font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.tenant-about__question-card h3 { margin:72px 0 26px; color:var(--about-ink); font-size:31px; line-height:1.08; }
.tenant-about__question-card ul { margin:0; padding:0; list-style:none; }
.tenant-about__question-card li { display:grid; grid-template-columns:40px 1fr; gap:15px; align-items:center; padding:17px 0; border-top:1px solid var(--about-line); }
.tenant-about__question-card b { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--about-blue); color:#fff; font-size:12px; }
.tenant-about__question-card p { margin:0; color:var(--about-muted); line-height:1.45; }

.tenant-about__statement { position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:end; gap:70px; width:min(1380px,calc(100% - 56px)); min-height:590px; margin:0 auto; padding:clamp(54px,8vw,110px); border-radius:40px; overflow:hidden; background:var(--about-ink); color:#fff; }
.tenant-about__statement-mark { position:absolute; top:-115px; right:3%; color:rgba(255,255,255,.055); font-size:430px; font-weight:900; line-height:1; }
.tenant-about__statement>div:not(.tenant-about__statement-mark) { position:relative; z-index:1; }
.tenant-about__statement .tenant-about__eyebrow { color:#8edcec; }
.tenant-about__statement h2 { color:#fff; }
.tenant-about__statement-copy p { margin:0; color:#cce0e5; font-size:clamp(18px,1.6vw,22px); line-height:1.55; }
.tenant-about__statement-copy p+p { margin-top:22px; }

.tenant-about__section--values { display:block; }
.tenant-about__heading--centered { max-width:880px; margin:0 auto 58px; text-align:center; }
.tenant-about__values { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0; }
.tenant-about__values>div { min-height:330px; padding:32px; border:1px solid var(--about-line); border-radius:30px; background:#fff; box-shadow:0 16px 48px rgba(24,60,71,.07); }
.tenant-about__values>div:nth-child(2) { background:var(--about-mint); }
.tenant-about__values>div:nth-child(3) { background:#fff1cf; }
.tenant-about__values span { color:var(--about-blue); font-weight:900; }
.tenant-about__values dt { margin-top:92px; color:var(--about-ink); font-size:30px; font-weight:900; line-height:1.08; }
.tenant-about__values dd { margin:15px 0 0; color:var(--about-muted); font-size:17px; line-height:1.55; }

.tenant-about__ecosystem { width:min(1180px,calc(100% - 40px)); margin:0 auto 130px; padding:clamp(44px,7vw,78px); border-radius:36px; background:linear-gradient(135deg,var(--about-lilac),var(--about-mint)); }
.tenant-about__ecosystem-copy { max-width:850px; }
.tenant-about__ecosystem h2 { font-size:clamp(44px,5.5vw,72px); }
.tenant-about__ecosystem-copy>p { max-width:720px; margin:22px 0 0; color:var(--about-muted); font-size:18px; line-height:1.55; }
.tenant-about__relationship { display:grid; grid-template-columns:1fr auto 1.1fr auto 1fr; gap:16px; align-items:center; margin-top:52px; }
.tenant-about__relationship>div { display:flex; min-height:118px; flex-direction:column; align-items:center; justify-content:center; padding:22px; border-radius:24px; background:rgba(255,255,255,.65); text-align:center; }
.tenant-about__relationship>div>span { font-size:19px; font-weight:900; }
.tenant-about__relationship>div>small { margin-top:6px; color:var(--about-muted); font-size:13px; }
.tenant-about__relationship>b { color:var(--about-blue); font-size:22px; transform:rotate(-90deg); }
.tenant-about__relationship .tenant-about__relationship-core { background:var(--about-ink); color:#fff; }
.tenant-about__relationship .tenant-about__relationship-core small { color:#b7d7de; }
.tenant-about__audiences { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:18px; }
.tenant-about__audiences article { padding:34px; border-radius:28px; background:rgba(255,255,255,.7); }
.tenant-about__audiences h3 { margin:40px 0 14px; color:var(--about-ink); font-size:28px; line-height:1.08; }
.tenant-about__audiences article>p { margin:0; color:var(--about-muted); line-height:1.55; }
.tenant-about__boundary { margin:24px 0 0; color:var(--about-muted); font-size:13px; line-height:1.55; }

.tenant-about__cta { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px 60px; align-items:center; width:min(1380px,calc(100% - 56px)); margin:0 auto 28px; padding:clamp(52px,8vw,100px); border-radius:40px; background:linear-gradient(135deg,#0b7fa8,#075f80); color:#fff; }
.tenant-about__cta .tenant-about__eyebrow { color:#b7ecf5; }
.tenant-about__cta h2 { max-width:900px; color:#fff; }
.tenant-about__cta p { max-width:760px; margin:23px 0 0; color:#d5edf2; font-size:19px; line-height:1.55; }
.tenant-about__cta .tenant-about__closing { color:#fff; font-weight:800; }
.tenant-about__button { display:inline-flex; min-height:54px; align-items:center; justify-content:center; gap:10px; padding:0 25px; border-radius:999px; background:#fff; color:var(--about-ink); font-weight:850; text-decoration:none; box-shadow:0 18px 48px rgba(0,0,0,.14); transition:transform .2s ease; }
.tenant-about__button:hover { transform:translateY(-2px); }
.tenant-about__button:focus-visible { outline:3px solid #fff; outline-offset:4px; }

@media (max-width:980px) {
  .tenant-about__section,.tenant-about__statement,.tenant-about__cta { grid-template-columns:1fr; }
  .tenant-about__values { grid-template-columns:1fr; }
  .tenant-about__values>div { min-height:250px; }
  .tenant-about__values dt { margin-top:55px; }
  .tenant-about__button { justify-self:start; }
}

@media (max-width:680px) {
  .tenant-about__ticker { justify-content:flex-start; overflow:hidden; flex-wrap:nowrap; }
  .tenant-about__ticker span { flex:0 0 auto; }
  .tenant-about__section { width:calc(100% - 24px); padding:90px 0; }
  .tenant-about__heading h2,.tenant-about__statement h2,.tenant-about__ecosystem h2,.tenant-about__cta h2 { font-size:clamp(44px,13vw,62px); }
  .tenant-about__statement,.tenant-about__cta { width:calc(100% - 24px); border-radius:28px; }
  .tenant-about__statement { min-height:620px; padding:52px 28px; gap:42px; }
  .tenant-about__statement-mark { top:-65px; right:-18px; font-size:300px; }
  .tenant-about__question-card { padding:28px 22px; border-radius:28px; }
  .tenant-about__question-card h3 { margin-top:48px; }
  .tenant-about__ecosystem { width:calc(100% - 24px); margin-bottom:90px; padding:46px 26px; border-radius:28px; }
  .tenant-about__relationship { grid-template-columns:1fr; }
  .tenant-about__relationship>b { transform:none; }
  .tenant-about__audiences { grid-template-columns:1fr; }
  .tenant-about__cta { padding:52px 28px; }
}

@media (prefers-reduced-motion:reduce) { .tenant-about__button { transition:none; } }