/* Full-width product explanations; only the opening problem scene is pinned. */
.statement--answer .statement-inner { text-align:center; }
.statement--answer h2 { max-width:1050px; margin-inline:auto; }
.problem-sequence.statement { display:block; min-height:0; padding:0; }
.problem-pin { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; padding-top:120px; padding-bottom:100px; }
.problem-pin .statement-inner { width:100%; padding:0; text-align:left; }
.problem-pin h2, .problem-scene h3 { font-size:clamp(2.4rem,4.3vw,4.8rem); line-height:1.07; }
.problem-scenes { min-width:0; }
.problem-scene { margin:40px 0; }
.problem-scene h3 { margin:30px 0 0; letter-spacing:-.04em; }
.problem-art { padding:28px; border-radius:24px; background:#edf3fb; color:#183c6c; min-height:250px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.problem-art span { padding:12px 16px; background:white; border-radius:12px; font-size:clamp(.8rem,1.2vw,1rem); box-shadow:0 8px 20px #16365d08; }
.problem-art span:nth-child(2) { margin-left:28px; }
.problem-art .buried-task { border:1px dashed #b7c8df; opacity:.5; }
.problem-art b { font-size:3rem; text-align:center; color:#377edd; }
.problem-art.entry-art { text-align:center; }
.problem-sequence.is-animated { height:450svh; }
.is-animated .problem-pin { position:sticky; top:0; height:100svh; }
.is-animated .problem-scenes { position:relative; height:390px; }
.is-animated .problem-scene { position:absolute; inset:0; margin:0; opacity:0; transform:translateY(35px); will-change:transform,opacity; }
.pillar { padding:110px 0; }
.product-pillars, .product-pillars .pillar { background:#fff; }
.pillar-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:10%; }
.pillar-row--reverse .pillar-visual { order:2; }
.pillar-row--reverse .pillar-copy { order:1; }
.pillar--organize .pillar-row + .pillar-row { margin-top:120px; }
.pillar-heading { margin:0 auto 70px; max-width:100%; text-align:center; }
.pillar h2 { font-size:clamp(2.5rem,4.3vw,4.5rem); line-height:1.05; letter-spacing:-.045em; }
.pillar-copy h3 { font-size:clamp(2rem,3vw,3rem); line-height:1.1; letter-spacing:-.04em; margin:0 0 22px; }
.pillar-copy > p:not(.pillar-number) { color:#64748b; font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.75; margin-top:24px; }
.pillar-visual { min-width:0; }
.pillar-visual .feature-graphic { width:100%; height:480px; min-height:480px; margin:0; border-radius:30px; transform:none; }
.pillar-visual .bridge-preview { justify-content:center; }
.pillar-visual .promo-capture-ai { height:540px; }
.pillar-visual .report-draft-graphic { padding:32px; }
.pillar-visual .report-pdf > img { max-height:230px; }
@media(max-width:760px) {
 .problem-pin { grid-template-columns:1fr; gap:26px; padding-top:110px; padding-bottom:40px; align-content:center; }
 .problem-pin h2, .problem-scene h3 { font-size:2.2rem; }
 .is-animated .problem-scenes { height:330px; }
 .problem-art { min-height:190px; padding:18px; gap:8px; }
 .problem-art span { padding:9px 12px; }
 .problem-scene h3 { margin-top:20px; }
 .pillar { padding:70px 0; }
 .pillar-row { grid-template-columns:1fr; gap:35px; }
 .pillar-row .pillar-copy { order:0; }
 .pillar-row .pillar-visual { order:1; }
 .pillar--organize .pillar-row + .pillar-row { margin-top:80px; }
 .pillar-heading { margin-bottom:50px; }
 .pillar-visual .feature-graphic { height:440px; min-height:440px; }
}
@media(prefers-reduced-motion:reduce) {
 .problem-sequence.is-animated { height:auto; }
 .is-animated .problem-pin { position:static; height:auto; }
 .is-animated .problem-scenes { height:auto; }
 .is-animated .problem-scene { position:static; opacity:1!important; transform:none!important; margin:35px 0; }
}

/* Small chat gestures, without an enclosing illustration panel. */
.chat-mini { position:relative; height:150px; max-width:440px; margin:65px 0 35px; color:#214474; font-size:clamp(.8rem,1.35vw,1rem); }
.pile-pill,.decision-question,.decision-reply { padding:16px 20px; border:1px solid #e0e8f3; border-radius:18px; background:#f0f5fc; box-shadow:0 7px 20px #16365d08; }
.pile-pill { position:absolute; left:0; right:24px; top:20px; white-space:nowrap; }
.pile-task { background:#fff; }
.pile-message-one { top:40px; left:12px; right:12px; }
.pile-message-two { top:60px; left:24px; right:0; }
.unread-badge { position:absolute; right:4px; top:-8px; z-index:4; padding:6px 11px; background:#244f8d; color:white; border-radius:20px; font-size:.75rem; font-weight:700; font-variant-numeric:tabular-nums; }
.decision-question { width:fit-content; max-width:100%; }
.decision-reply { position:relative; margin:12px 0 0 35px; width:190px; height:54px; background:#e5eefb; }
.typing-dots { position:absolute; inset:0; display:flex; gap:5px; align-items:center; padding-left:20px; opacity:0; }
.typing-dots i { width:5px; height:5px; background:#6281ab; border-radius:50%; }
.hesitation { display:block; }
@media(max-width:760px) { .chat-mini { margin-top:30px; height:150px; } .pile-pill { padding:15px 13px; } }
@media(prefers-reduced-motion:reduce) { .chat-mini * { animation:none!important; } .typing-dots { display:none; } }

/* Message styling: Figma 30945:92411. Scale the small reference bubbles
   for legibility while retaining its neutral/cyan palette and soft shadow. */
.chat-mini {
  --message-incoming:#f2f1f1;
  --message-shadow:0 0 10px rgb(0 0 0 / 20%);
  max-width:340px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.35;
  color:var(--mock-ink);
}
.pile-pill,.decision-question,.decision-reply,.report-message {
  padding:12px;
  border:0;
  border-radius:20px;
  background:var(--message-incoming);
  color:var(--mock-ink);
  box-shadow:var(--message-shadow);
  font-weight:400;
}
.pile-pill { white-space:normal; width:calc(100% - 34px); right:auto; }
.pile-task { top:12px; rotate:-4.63deg; }
.pile-message-one { top:42px; left:15px; rotate:3.9deg; }
.pile-message-two { top:74px; left:28px; rotate:-4.85deg; }
.pile-message-one,.pile-message-two,.decision-reply,.report-message--outgoing {
  background:var(--mock-cyan);
  color:#fff;
  border:1px solid var(--mock-cyan);
}
.unread-badge {
  top:-15px;
  right:0;
  background:var(--mock-cyan);
  border:1px solid var(--mock-cyan);
  box-shadow:var(--message-shadow);
  font-weight:400;
}
.decision-question { max-width:calc(100% - 22px); }
.decision-reply { height:44px; width:150px; margin:15px 0 0 35px; }
.typing-dots { padding-left:12px; }
.typing-dots i { background:#fff; }
.report-message { width:calc(100% - 30px); }
.report-message--outgoing { margin:14px 0 0 30px; }
.report-manual-note { margin-top:16px; color:var(--mock-muted); font-size:12px; text-align:right; }
@media(max-width:760px) { .chat-mini { max-width:min(340px,100%); } .pile-pill { padding:12px; } }

/* Align the two headlines on a shared bottom edge while illustrations sit above. */
.problem-pin .statement-inner h2 { margin:0; }
.is-animated .problem-scene { display:flex; flex-direction:column; justify-content:flex-end; }
.is-animated .problem-scene h3 { margin:0; flex:0 0 auto; }
.is-animated .chat-mini { flex:0 0 180px; width:100%; margin:0 0 32px; }
.pile-task { rotate:0deg; }
.pile-extra { opacity:0; top:68px; left:12px; rotate:3deg; }
.pile-extra:nth-child(even) { background:var(--mock-cyan); color:white; }
.pile-extra-2 { top:77px; left:24px; rotate:-6deg; }
.pile-extra-3 { top:85px; left:4px; rotate:5deg; }
.pile-extra-4 { top:96px; left:22px; rotate:-3deg; }
.pile-extra-5 { top:108px; left:8px; rotate:4deg; }
.pile-extra-6 { top:119px; left:26px; rotate:-4deg; }
.unread-badge { z-index:12; }
.decision-question { background:var(--mock-cyan); color:#fff; }
.decision-reply { background:var(--message-incoming); color:var(--mock-ink); border:0; width:max-content; max-width:100%; height:43px; padding:12px; }
.typing-dots i { background:#7a7a7b; }
.problem-scene .decision-mini * { animation:none; }
.report-message--third { margin-top:14px; }
.is-animated .report-mini { flex-basis:210px; }
@media(max-width:760px) {
 .is-animated .problem-scenes { height:330px; }
 .is-animated .problem-scene { justify-content:flex-end; }
 .is-animated .chat-mini { margin-bottom:25px; }
}
@media(prefers-reduced-motion:reduce) {
 .pile-extra { opacity:1; }
 .decision-reply { width:max-content; }
}

.decision-reply { overflow:hidden; }

/* Wait until the decision scene is readable; replay only on a new visit. */

/* Every chat gesture is rendered from scroll progress in homepage-pillars.js. */
.chat-mini * { animation:none!important; transition:none!important; }
.decision-reply { max-width:100%; }
.hesitation { width:max-content; white-space:nowrap; }

/* Compact illustrations and generous scroll pacing. */
.is-animated .chat-mini { margin-bottom:22px; }
.is-animated .decision-mini, .is-animated .report-mini { flex-basis:auto; height:auto; }
.pile-message-one { rotate:9deg; }
.pile-message-two { rotate:-12deg; }
.pile-extra-1 { rotate:6deg; }
.pile-extra-2 { rotate:-15deg; }
.pile-extra-3 { rotate:11deg; }
.pile-extra-4 { rotate:-7deg; }
.pile-extra-5 { rotate:14deg; }
.pile-extra-6 { rotate:-10deg; }
.brain-node { width:128px; min-width:128px; height:42px; padding:8px 10px; font-size:13px; background:#f2f1f1; border:0; gap:7px; box-shadow:0 8px 22px #10274412; }
.brain-node i { width:auto; height:auto; flex-shrink:0; font-size:19px; background:none; border:0; border-radius:0; box-shadow:none; }
.work-story { background:var(--navy-deep); }
@media(max-width:760px) {
 .brain-node { width:112px; min-width:112px; height:38px; padding:7px 9px; font-size:12px; gap:6px; }
 .brain-node i { font-size:17px; }
}

/* The network resolves directly into the example introduction. */
.brain-example-intro .work-story-heading { margin:0 auto; }
.brain-example-intro h2 { font-size:clamp(2.2rem,4.6vw,4.6rem); }
.brain-example-intro h2 em { color:#ffd16a; font-style:normal; }
.brain-example-intro .story-eyebrow { color:#b8c9df; }
.brain-example-intro .work-story-heading > p:last-child { margin:25px auto 0; color:#b8c9df; font-size:1rem; font-weight:400; letter-spacing:0; text-transform:none; }
#workflow { padding-top:0; }
@media(prefers-reduced-motion:reduce) {
 .brain-example-intro { display:block; position:relative; top:auto; left:auto; width:100%; padding:70px 24px; opacity:1; transform:none; background:var(--navy-deep); }
 .brain-stage .brain-sticky { height:auto; }
 .brain-network { min-height:850px; height:auto; }
}

/* Individual cards for the published metrics. */
.usage-ticker { padding: 80px 0 40px; background: #fff; color: var(--navy-deep); scroll-margin-top: 90px; }
.usage-ticker-inner { text-align: center; }
.usage-ticker-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 960px; margin: 0 auto; }
.usage-ticker-stats > div { position: relative; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 8px; min-height: 176px; padding: 64px 20px 24px; border: 1px solid var(--yellow); border-radius: 22px; background: var(--yellow); box-shadow: 0 14px 36px #102b500a; }
.usage-ticker-stats svg { position: absolute; top: 22px; left: calc(50% - 14px); width: 28px; height: 28px; }
.usage-ticker-stats dt { font-size: 15px; font-weight: 700; }
.usage-ticker-stats dd { margin: 0; font: 800 clamp(32px, 3.5vw, 46px)/1.1 "Onest", sans-serif; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .usage-ticker { padding: 48px 0 24px; }
  .usage-ticker-stats { gap: 12px; }
  .usage-ticker-stats > div { min-height: 156px; padding: 58px 10px 20px; border-radius: 20px; gap: 8px; }
  .usage-ticker-stats svg { top: 24px; width: 28px; height: 28px; left: calc(50% - 14px); }
  .usage-ticker-stats dd { font-size: clamp(26px, 5vw, 38px); }
  .usage-ticker-stats dt { font-size: 12px; }
}
@media (max-width: 540px) {
  .usage-ticker-stats { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; gap: 14px; }
  .usage-ticker-stats > div { min-height: 156px; }
  .usage-ticker-stats dd { font-size: 38px; }
  .usage-ticker-stats dt { font-size: 15px; }
}

.pillar--chat .pillar-copy > p + p { margin-top:16px; }
.team-love-grid .love-access { background:var(--card-navy); color:#fff; }
.team-love-grid .love-projects { background:var(--card-blue); color:#fff; }
.team-love-grid .love-onboarding { grid-column:1 / -1; background:var(--card-royal); color:#fff; }
.team-love-grid .love-access h3, .team-love-grid .love-projects h3, .team-love-grid .love-onboarding h3,
.team-love-grid .love-access p, .team-love-grid .love-projects p, .team-love-grid .love-onboarding p { color:#fff; }
.home-integrations { padding:160px 0 20px; text-align:center; }
.home-integrations h2 { font-size:clamp(2.2rem,4.5vw,4.4rem); line-height:1.08; letter-spacing:-.045em; max-width:900px; margin:0 auto; }
.home-integrations > p { margin:24px auto 0; color:#64748b; font-size:1rem; }
.home-integration-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:36px 48px; margin:48px auto 0; }
.home-integration-logos > span { display:flex; align-items:center; gap:12px; max-width:230px; text-align:left; font-size:16px; color:var(--navy); }
.home-integration-logos img { width:38px; height:38px; object-fit:contain; }
.home-integration-logos .integration-procore { width:150px; height:42px; }
@media(max-width:760px) {
 .home-integrations { padding-top:110px; }
 .home-integration-logos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
 .home-integration-logos > span { justify-content:center; font-size:12px; }
 .home-integration-logos img { width:30px; height:30px; }
 .home-integration-logos .integration-procore { max-width:120px; width:100%; }
}

@media (max-width: 960px) {
  .problem-pin { grid-template-columns: 1fr; gap: 26px; align-content: center; }
  .problem-pin .statement-inner, .problem-scene { text-align: center; }
  .problem-scenes { width: 100%; }
  .problem-scene { align-items: center; }
  .problem-scene .chat-mini { width: 100%; margin-inline: auto; text-align: left; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .is-animated .problem-scenes { height: 330px; }
}