.intro-page { color: #212121; background: #fff; }
.intro-cover { position: relative; min-height: 640px; height: clamp(640px, calc(100svh - 88px), 800px); isolation: isolate; overflow: hidden; background: #f1eee6; }
.intro-cover-photo { position: absolute; z-index: -2; inset: 0 0 0 auto; width: min(60%,960px); height: 100%; max-width: none; object-fit: cover; object-position: 50% 68%; }
.intro-cover::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#f1eee6 0%,#f1eee6 28%,rgba(241,238,230,.85) 41%,rgba(241,238,230,.15) 60%,transparent 74%); content: ""; }
.intro-cover-inner { display: flex; min-height: inherit; height: 100%; align-items: center; }
.intro-cover-copy { width: 45%; padding-block: 48px; }
.intro-cover-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.intro-cover-brand img { width: 180px; height: auto; }
.intro-cover-brand span { font-size: 38px; font-weight: 700; line-height: 1.3; }
.intro-page .intro-cover h1 { margin-bottom: 20px; font-size: clamp(42px,4vw,60px); font-weight: 600; line-height: 1.15; letter-spacing: -.05em; }
.intro-page p { color: #59655d; font-size: clamp(16px,1.3vw,18px); line-height: 1.85; }
.intro-section { padding-block: clamp(68px,7vw,100px); }
.intro-page .intro-section h2 { margin-bottom: 26px; font-size: clamp(30px,3.1vw,44px); font-weight: 600; line-height: 1.3; letter-spacing: -.045em; }
.intro-page .intro-section h3 { margin-block: 30px 18px; font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: -.035em; }
.intro-section [data-figma-text] > p + p { margin-top: 6px; }
.intro-section [data-figma-text] + [data-figma-text] { margin-top: 26px; }
.intro-opening-copy { max-width: 880px; }
.intro-brand-line { margin-block: 26px 40px; }
.intro-note { margin-top: 32px; }
.intro-page .intro-note p { font-size: 16px; }
.intro-section--tinted { background: #f4f5f1; }
.intro-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.intro-feature-column { display: flex; flex-direction: column; gap: 24px; }
.intro-feature { position: relative; container-type: inline-size; overflow: hidden; border-radius: 16px; background: #eee; }
.intro-feature-photo { position: absolute; max-width: none; }
.intro-feature-copy { position: relative; z-index: 1; padding: 30px 28px 0; }
.intro-page .intro-feature h3 { margin: 0 0 8px; font-size: 24px; font-weight: 600; line-height: 1.4; }
.intro-page .intro-feature p { font-size: 18px; line-height: 1.7; }
.intro-feature [data-figma-text] + [data-figma-text] { margin-top: 0; }
.intro-feature-shade { position: absolute; top: 0; left: 0; max-width: none; transform: scale(calc(100cqw / 540px)); transform-origin: top left; }
.intro-feature--landscape { aspect-ratio: 540 / 680; color: #383838; }
.intro-feature--landscape .intro-feature-photo { top: -.01%; left: -1.22%; width: 102.62%; height: 108.66%; }
.intro-feature--landscape p { color: #5b5b5b; }
.intro-feature--power { aspect-ratio: 540 / 400; color: #2c2c2c; }
.intro-feature--power .intro-feature-photo { top: .1%; left: -18.19%; width: 140.98%; height: 100%; }
.intro-feature--power p { color: #3a3a3a; }
.intro-feature--controls { aspect-ratio: 540 / 520; color: #fff; }
.intro-feature--controls .intro-feature-photo { top: 0; left: -14.13%; width: 138.85%; height: 108.14%; }
.intro-page .intro-feature--controls h3,.intro-page .intro-feature--controls p { color: #fff; }
.intro-feature--workspace { aspect-ratio: 540 / 739; color: #403f3f; }
.intro-feature--workspace .intro-feature-photo { top: 0; left: -95.77%; width: 242.61%; height: 100%; }
.intro-feature--workspace p { color: #272727; }
.intro-feature--water { aspect-ratio: 540 / 614; color: #272727; }
.intro-feature--water .intro-feature-photo { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-feature--water p { color: #4d4c4c; }
.intro-feature--miniapp { aspect-ratio: 540 / 252; color: #555; background: #fbe2ca; }
.intro-feature--miniapp .intro-feature-copy { padding: 9.444% 9.815% 0; }
.intro-feature--miniapp p { color: #777; }
.intro-miniapp-icon { position: absolute; container-type: inline-size; top: 15.476%; left: 62.593%; width: 32.037%; aspect-ratio: 1; overflow: hidden; }
.intro-miniapp-icon img { display: block; max-width: none; transform: scale(calc(100cqw / 173px)); transform-origin: top left; }
.intro-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(40px,6vw,86px); }
.intro-story-copy { min-width: 0; }
.intro-story--landscape { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.intro-page .intro-story--landscape h2 { font-size: clamp(30px,2.5vw,36px); }
.intro-landscape-notes { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px 86px; margin-top: 44px; }
.intro-landscape-notes [data-figma-text] + [data-figma-text] { margin-top: 0; }
.intro-landscape-notes > .intro-feature-list { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: end; text-align: right; white-space: nowrap; }
.intro-landscape-notes > .intro-full-width { grid-column: 1; grid-row: 2; }
.intro-feature-list p { font-weight: 600; }
.intro-full-width { grid-column: 1 / -1; }
.intro-board-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.intro-image { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #eaece7; }
.intro-image img { position: absolute; max-width: none; }
.intro-board-grid .intro-image { aspect-ratio: 352 / 661; }
.intro-board--black img { top: -2.27%; left: -23.05%; width: 146.39%; height: 107.78%; }
.intro-board--tree img { top: -3.12%; left: -23.44%; width: 147.44%; height: 108.55%; }
.intro-board--fossil img { top: -.01%; left: -17.5%; width: 135.54%; height: 99.79%; }
.intro-workspace { aspect-ratio: 1104 / 900; }
.intro-workspace img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.intro-section-heading { max-width: 920px; margin-bottom: 36px; }
.intro-power { aspect-ratio: 1104 / 580; }
.intro-power img { top: -.06%; left: .03%; width: 100%; height: 100.01%; }
.intro-pair-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.intro-water-tube,.intro-water-drain { aspect-ratio: 540 / 734; }
.intro-water-tube img { top: -32.13%; left: -38.47%; width: 195%; height: 194.11%; }
.intro-water-drain img { top: -92.19%; left: -48.61%; width: 172.63%; height: 229%; }
.intro-light-warm,.intro-light-cool { aspect-ratio: 540 / 719; }
.intro-light-warm img { top: -.04%; left: -1.64%; width: 103.28%; height: 104%; }
.intro-light-cool img { top: -.27%; left: -4.09%; width: 109.24%; height: 110%; }
.intro-controls,.intro-miniapp { aspect-ratio: 540 / 650; }
.intro-controls img,.intro-miniapp img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-control-copy { max-width: 920px; margin-top: 32px; }
.intro-resource-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding-block: 20px 60px; }
.intro-resource-links a { display: flex; min-height: 68px; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #cdd5cc; color: #4b5d4f; font-size: 14px; }
.intro-resource-links a span { font-size: 20px; }
.intro-resource-links a:hover { color: #111; border-color: #111; }
@media (max-width:980px) {
 .intro-cover-photo { width: 65%; }
 .intro-cover-copy { width: 46%; }
 .intro-cover-brand { gap: 12px; }
 .intro-cover-brand img { width: 140px; }
 .intro-cover-brand span { font-size: 30px; }
 .intro-feature-copy { padding: 22px 20px 0; }
 .intro-page .intro-feature h3 { font-size: 22px; }
 .intro-page .intro-feature p { font-size: 16px; }
 .intro-feature--miniapp .intro-feature-copy { padding: 8% 8% 0; }
 .intro-feature--miniapp .intro-miniapp-icon { left: 70%; width: 27%; top: 18%; }
 .intro-story { gap: 36px; }
}
@media (max-width:760px) {
 .intro-cover { min-height: 700px; height: min(860px,max(700px,calc(100svh - 78px))); }
 .intro-cover-photo { inset: auto 0 0; width: 100%; height: 76%; object-position: 50% 56%; }
 .intro-cover::after { background: linear-gradient(180deg,#f1eee6 0%,rgba(241,238,230,.97) 11%,rgba(241,238,230,.9) 25%,rgba(241,238,230,.5) 41%,transparent 57%); }
 .intro-cover-inner { align-items: flex-start; }
 .intro-cover-copy { width: 100%; padding-top: 38px; }
 .intro-cover-brand { margin-bottom: 18px; gap: 12px; }
 .intro-cover-brand img { width: 126px; }
 .intro-cover-brand span { font-size: 28px; }
 .intro-page .intro-cover h1 { margin-bottom: 16px; font-size: 38px; }
 .intro-page p { font-size: 16px; line-height: 1.85; }
 .intro-section { padding-block: 58px; }
 .intro-page .intro-section h2 { margin-bottom: 24px; font-size: 30px; line-height: 1.3; }
 .intro-page .intro-section h3 { font-size: 23px; }
 .intro-features { display: block; }
 .intro-feature-column { gap: 24px; }
 .intro-feature-column + .intro-feature-column { margin-top: 24px; }
 .intro-feature-copy { padding: 26px 22px 0; }
 .intro-page .intro-feature h3 { margin: 0 0 8px; font-size: 23px; }
 .intro-page .intro-feature p { font-size: 16px; }
 .intro-feature--miniapp { min-height: 190px; aspect-ratio: auto; }
 .intro-feature--miniapp .intro-feature-copy { padding: 26px 22px; }
 .intro-feature--miniapp .intro-miniapp-icon { top: 34px; left: auto; right: 12px; width: 28%; }
 .intro-feature--miniapp .intro-feature-copy { max-width: 72%; }
 .intro-story,.intro-story--landscape { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .intro-story--landscape .intro-board-grid { order: 1; }
 .intro-landscape-notes { grid-template-columns: minmax(0,1fr); gap: 26px; margin-top: 32px; }
 .intro-landscape-notes > .intro-feature-list { grid-column: auto; grid-row: auto; justify-self: stretch; align-self: auto; text-align: left; white-space: normal; }
 .intro-landscape-notes > .intro-full-width { grid-column: auto; grid-row: auto; }
 .intro-full-width { grid-column: auto; }
 .intro-board-grid { gap: 8px; }
 .intro-image { border-radius: 12px; }
 .intro-workspace { aspect-ratio: 1104 / 780; }
 .intro-pair-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
 .intro-note { margin-top: 26px; }
 .intro-page .intro-note p { font-size: 16px; }
 .intro-resource-links { grid-template-columns: minmax(0,1fr); gap: 0; padding-bottom: 20px; }
 .intro-resource-links a { font-size: 16px; }
}