/* Homepage product story: apps, shared foundation and next steps. */
#apps, #shared-foundation, #next-workflow { box-sizing:border-box; scroll-margin-top:88px; }
#apps { padding-block:104px 88px; background:#151412; color:#F2EEE6; }
#apps *, #shared-foundation *, #next-workflow * { box-sizing:border-box; }
.hp-eyebrow { margin:0 0 22px; font:13px/1.5 var(--mono); }
#apps .hp-eyebrow { color:#C9962E; }
.hp-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:end; margin-bottom:48px; }
#apps h2, #shared-foundation h2, #next-workflow h2 { margin:0; font:700 clamp(38px,4.2vw,60px)/1.04 var(--display); letter-spacing:-.03em; }
.hp-heading > p { max-width:490px; margin:0; font-size:18px; line-height:1.6; color:#C9C2B6; }
.hp-workspace { display:grid; grid-template-columns:240px minmax(0,1fr); border:1px solid #3A3631; border-radius:var(--radius); overflow:hidden; }
.hp-app-nav { padding:28px 18px; background:#1E1C19; }
.hp-nav-label { padding:0 12px; margin:0 0 22px; font:12px/1.5 var(--mono); color:#BDB6AA; }
#apps .hp-app-tab { display:flex; flex-direction:column; gap:8px; width:100%; min-height:94px; padding:18px 12px; text-align:left; border:1px solid transparent; background:transparent; color:#F2EEE6; cursor:pointer; border-radius:var(--radius); font:500 17px/1.25 var(--sans); }
#apps .hp-app-tab small { font-size:12px; color:#BDB6AA; }
#apps .hp-app-tab[aria-selected="true"] { background:#F2EEE6; color:#151412; }
#apps .hp-app-tab[aria-selected="true"] small { color:#5E5A52; }
#apps .hp-app-tab:hover:not([aria-selected="true"]) { background:#2B2824; }
.hp-nav-note { margin:36px 12px 0; color:#BDB6AA; font-size:13px; line-height:1.6; }
.hp-app-panel { min-width:0; background:#F8F6F0; color:#151412; }
.hp-preview-top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 30px; border-bottom:1px solid #DDD6CA; font:11px/1.5 var(--mono); }
.hp-preview-top > span:last-child { color:#5E5A52; }
.hp-preview-intro { padding:30px 30px 24px; }
#apps .hp-preview-intro h3 { font:700 29px/1.15 var(--display); letter-spacing:-.025em; margin:0 0 10px; }
.hp-preview-intro p { margin:0; max-width:650px; font-size:15px; line-height:1.6; color:#5E5A52; }
.hp-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 30px; border-bottom:1px solid #D6CFC2; }
#apps .hp-stage { min-height:66px; background:transparent; color:#5E5A52; border:0; border-bottom:3px solid transparent; cursor:pointer; text-align:left; font:400 13px/1.4 var(--sans); padding:12px 6px; }
.hp-stage .hp-stage-number { display:block; font:10px/1.4 var(--mono); margin-bottom:4px; }
#apps .hp-stage[aria-selected="true"] { border-bottom-color:#C9962E; color:#151412; }
#apps .hp-stage:hover { background:#EDE8DE; }
.hp-stage-content { padding:28px 30px 30px; min-height:362px; }
.hp-sheet-heading { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; }
#apps .hp-sheet-heading h4 { margin:0; font:600 19px/1.3 var(--display); letter-spacing:-.01em; }
.hp-sheet-heading > span { font:11px/1.4 var(--mono); color:#5E5A52; }
.hp-record { margin:0; border-top:1px solid #D6CFC2; }
.hp-record > div { display:grid; grid-template-columns:145px minmax(0,1fr); gap:24px; padding:13px 0; border-bottom:1px solid #DDD6CA; }
.hp-record dt { color:#5E5A52; font-size:13px; line-height:1.5; }
.hp-record dd { margin:0; font-size:15px; line-height:1.5; }
.hp-review-note { margin:18px 0 0; display:flex; gap:12px; font-size:13px; line-height:1.6; color:#5E5A52; }
.hp-review-note .hp-review-arrow { flex:none; color:#5E5A52; }
.hp-stage-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
#apps .hp-next { min-height:44px; padding:10px 15px; background:#151412; color:#F2EEE6; border:1px solid #151412; border-radius:var(--radius); font:400 13px/1.4 var(--sans); cursor:pointer; }
#apps .hp-next:hover { background:#2B2824; }
.hp-stage-bottom > span { font-size:12px; color:#5E5A52; }
.hp-caption { margin:20px 0 0; max-width:840px; font-size:13px; line-height:1.6; color:#BDB6AA; }
#apps button:focus-visible { outline:2px solid #C9962E; outline-offset:4px; position:relative; z-index:1; }
#apps .hp-app-panel button:focus-visible { outline-color:#151412; }
#shared-foundation { background:var(--calce-2); color:#151412; padding-block:88px; }
#shared-foundation .hp-eyebrow { color:#5E5A52; }
.hp-foundation-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; }
.hp-foundation-intro > p:not(.hp-eyebrow) { font-size:18px; line-height:1.6; max-width:470px; color:#4A463F; margin:24px 0 32px; }
.hp-permission-note { border-top:1px solid #D6CFC2; padding-top:22px; max-width:470px; }
.hp-permission-note strong { font-size:15px; font-weight:600; }
.hp-permission-note p { font-size:15px; line-height:1.6; color:#4A463F; margin:10px 0 0; }
.hp-foundation-list { margin:0; }
.hp-foundation-list > div { padding:20px 0; border-top:1px solid #D6CFC2; display:grid; grid-template-columns:126px minmax(0,1fr); gap:18px; }
.hp-foundation-list > div:last-child { border-bottom:1px solid #D6CFC2; }
.hp-foundation-list dt { font:600 19px/1.4 var(--display); letter-spacing:-.01em; }
.hp-foundation-list dd { margin:0; font-size:15px; line-height:1.6; color:#4A463F; }
#next-workflow { padding-block:64px; background:#151412; color:#F2EEE6; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
#next-workflow h2 { font-size:38px; }
#apps .hp-app-panel { border-radius:0 var(--radius) var(--radius) 0; }
#apps .hp-stage[aria-selected="true"] .hp-stage-number { color:#8A6516; }
#shared-foundation .hp-foundation-list dt::before { content:''; display:inline-block; width:9px; height:9px; margin-right:12px; border-radius:1px; transform:rotate(-12deg); vertical-align:1px; background:var(--tile,var(--oro)); }
.hp-foundation-list > div:nth-child(1) { --tile:var(--azzurro); } .hp-foundation-list > div:nth-child(2) { --tile:var(--ocra); } .hp-foundation-list > div:nth-child(3) { --tile:var(--lapis); } .hp-foundation-list > div:nth-child(4) { --tile:var(--oro); } .hp-foundation-list > div:nth-child(5) { --tile:var(--cinabro); }
#next-workflow p { font-size:16px; line-height:1.6; color:#BDB6AA; max-width:490px; margin:18px 0 0; }
.hp-destinations { display:flex; flex-direction:column; }
#next-workflow .hp-destinations a { color:#F2EEE6; text-decoration:none; min-height:62px; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #3A3631; font-size:18px; }
#next-workflow .hp-destinations a:hover { color:#C9962E; }
.hp-destinations span { color:#C9962E; }
@media (min-width:1500px) { .hp-workspace { grid-template-columns:280px minmax(0,1fr); } .hp-stage-content { min-height:350px; } }
@media (max-width:1100px) { .hp-heading { gap:36px; } .hp-workspace { grid-template-columns:200px minmax(0,1fr); } .hp-foundation-layout { gap:40px; } .hp-preview-top,.hp-preview-intro,.hp-stage-content { padding-inline:24px; } .hp-stages { margin-inline:24px; } }
@media (max-width:760px) { .hp-heading,.hp-foundation-layout { grid-template-columns:1fr; gap:28px; } .hp-heading { margin-bottom:32px; } .hp-workspace { grid-template-columns:minmax(0,1fr); } .hp-app-nav { padding:14px; } .hp-app-nav [role="tablist"] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; } .hp-nav-label,.hp-nav-note { display:none; } #apps .hp-app-tab { padding:12px 10px; font-size:15px; min-height:92px; } #apps .hp-app-tab small { font-size:11px; } .hp-preview-top { flex-wrap:wrap; gap:5px 16px; padding-block:14px; } .hp-stage-content { min-height:370px; } .hp-foundation-list > div { grid-template-columns:105px minmax(0,1fr); } }
@media (max-width:480px) { .hp-preview-top,.hp-preview-intro,.hp-stage-content { padding-inline:18px; } .hp-stages { margin-inline:18px; } #apps .hp-stage { font-size:12px; padding-inline:3px; } .hp-record > div { grid-template-columns:1fr; gap:4px; padding-block:12px; } .hp-sheet-heading { align-items:flex-start; } .hp-sheet-heading > span { max-width:75px; text-align:right; } .hp-stage-content { min-height:480px; } #apps .hp-app-tab { font-size:14px; padding-inline:7px; } .hp-app-nav { padding:9px; } .hp-foundation-list > div { grid-template-columns:1fr; gap:8px; } }