/* Product mockups — Figma: freRqTBrJMO8LihQm2rIxy / 30785:92947.
   Keep app UI separate from the website's editorial typography and layout. */
:root {
  --mock-cyan: #0da6f2;
  --mock-ink: #262627;
  --mock-muted: #626976;
  --mock-incoming: rgba(244, 242, 240, .93);
  --mock-outgoing: rgba(200, 221, 249, .92);
  --mock-white: rgba(255, 255, 255, .91);
  --mock-orange: #e77828;
  --mock-border: rgba(13, 166, 242, .65);
  --mock-shadow: 0 8px 24px rgba(27, 62, 114, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.ai-icon { display: block; flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
.ai-avatar { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(13,166,242,.3); border-radius: 50%; background: #e4f5ff; }
.product-brand-icon { display: block; width: 32px; height: 32px; object-fit: contain; }
.mock-person { width: 32px; height: 32px; border: 2px solid white; border-radius: 50%; object-fit: cover; }
.mock-ai-label { display: flex; align-items: center; gap: 7px; color: var(--navy); font-size: .75rem; font-weight: 600; letter-spacing: 0; }
.mock-ai-label .ai-icon { width: 18px; height: 18px; }
.mock-due { display: inline-flex; width: fit-content; padding: 2px 7px; border: 1px solid #fecdaa; border-radius: 999px; color: #a64b09; background: rgba(255,244,236,.95); font-size: .75rem; font-weight: 500; font-style: normal; white-space: nowrap; }
.mock-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mock-owner { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 2px; border: 1px solid #dddcdb; border-radius: 999px; color: #404040; background: rgba(244,242,240,.85); font-size: .75rem; }
.mock-owner img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.mock-translation { display: flex; align-items: center; gap: 7px; margin: 10px 0; color: var(--mock-muted); font-size: .75rem; font-style: italic; }
.mock-translation::before, .mock-translation::after { height: 1px; flex: 1; background: rgba(98,105,118,.22); content: ""; }
.mock-source { color: #075a83; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }

/* Translucency belongs to the surface, keeping text and icons fully opaque. */
:is(.mini-message, .mini-task, .mini-status, .search-prompt, .search-answer, .mock-plan-task, .plan-photo,
    .hero-output-card, .hero-output-plan figcaption, .comms-card, .comms-card > div p,
    .action-message, .action-ai, .action-followup, .action-proof, .action-approval, .action-result,
    .consolidation-core, .source-stack span, .action-stack span, .record-graphic ul, .record-foot) {
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
}
:is(.feature-graphic, .comms-card, .action-thread, .hero-output-card) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hero cards retain the existing circular motion paths. */
.hero-output-card { border-color: var(--mock-border); background: var(--mock-white); box-shadow: var(--mock-shadow); }
.hero-output-card--task { border-bottom: 3px solid var(--mock-orange); }
.hero-output-card > .ai-avatar { color: var(--mock-ink); background: #e4f5ff; }
.hero-output-card p { color: var(--navy); font-size: .65rem; letter-spacing: 0; }
.hero-output-card b { font-size: .9rem; font-weight: 600; }
.hero-output-card small { color: var(--mock-muted); font-size: .75rem; }
.hero-output-plan { overflow: hidden; border: 1px solid var(--mock-cyan); border-radius: 16px; background: var(--mock-white); box-shadow: var(--mock-shadow); }
.hero-output-plan > img:first-child { height: 205px; object-fit: cover; }
.hero-output-plan > .hero-plan-pin { position: absolute; top: 35%; left: 53%; width: 28px; height: 32px; }
.hero-output-plan figcaption { right: 7px; bottom: 7px; left: 7px; padding: 7px; text-align: center; color: var(--navy); background: rgba(255,255,255,.93); font-size: .7rem; }

/* Photo message with an attached task, following the Figma orange divider. */
.task-graphic { background: radial-gradient(ellipse at 90% 100%, #3375d8, transparent 65%), #1b3e72; }
.mock-project-label { position: absolute; top: 20px; left: 24px; right: 24px; color: #fff; font-size: .8rem; font-weight: 600; }
.mock-project-label > span { float: right; color: #d4e5ff; font-size: .7rem; font-weight: 400; }
.task-graphic .mini-message { top: 55px; left: 24px; width: calc(100% - 48px); display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--mock-cyan); border-radius: 16px 16px 0 0; background: var(--mock-outgoing); box-shadow: var(--mock-shadow); }
.mini-message .mock-photo { width: 64px; height: 68px; border-radius: 9px; object-fit: cover; }
.feature-graphic .mini-message p { color: var(--mock-ink); font-size: .875rem; line-height: 1.4; }
.task-graphic .mini-task { top: 148px; left: 24px; right: 24px; width: auto; padding: 13px 16px; border: 1px solid var(--mock-cyan); border-top: 2px solid var(--mock-orange); border-radius: 0 0 16px 16px; background: var(--mock-white); box-shadow: var(--mock-shadow); }
.task-graphic .mini-task > small { display: flex; color: var(--navy); font-size: .75rem; letter-spacing: 0; }
.task-graphic .mini-task b { margin-top: 8px; color: var(--mock-ink); font-size: .95rem; font-weight: 600; }
.task-graphic .mini-task .mock-chips span { display: inline-flex; margin: 0; }
.task-graphic .mini-task .mock-owner { color: #404040; font-size: .75rem; }
.task-graphic .mini-task .mock-due { color: #a64b09; font-size: .75rem; }
.task-graphic .mini-status { bottom: 18px; left: 40px; right: 24px; padding: 11px 14px; border: 1px solid var(--mock-cyan); border-radius: 16px 16px 16px 5px; color: var(--mock-ink); background: var(--mock-incoming); box-shadow: var(--mock-shadow); }
.mini-status b { width: 25px; height: 25px; flex-shrink: 0; border: 1px dashed var(--mock-cyan); color: #0876aa; background: transparent; }
.mini-status span { font-size: .85rem; font-weight: 400; }
.mini-status small { display: block; margin-top: 4px; color: var(--mock-muted); font-size: .75rem; font-style: italic; }

/* Flow layout keeps the attached task aligned when message text wraps. */
.task-graphic { display: flex; flex-direction: column; padding: 20px 24px 18px; }
.task-graphic .mock-project-label { position: static; margin-bottom: 18px; }
.task-graphic .mini-message, .task-graphic .mini-task, .task-graphic .mini-status { position: relative; inset: auto; width: 100%; flex: 0 0 auto; }
.task-graphic .mini-message { margin: 0; }
.task-graphic .mini-task { margin-top: -1px; }
.task-graphic .mini-status { margin: auto 0 0; }

/* AI answers use the same quiet message surfaces as the app. */
.search-graphic { padding: 20px 24px; background: linear-gradient(150deg, #e4ebf5, #a2c2e8); }
.search-graphic .search-top { gap: 9px; }
.search-graphic .search-top small { color: var(--navy); font-size: .85rem; letter-spacing: 0; }
.search-graphic > .search-prompt { width: 94%; margin: 16px 0 12px auto; padding: 12px 14px; border: 1px solid var(--mock-cyan); border-radius: 16px 16px 5px 16px; background: var(--mock-outgoing); font-size: .875rem; font-weight: 400; line-height: 1.45; box-shadow: var(--mock-shadow); }
.search-graphic > .search-answer { grid-template-columns: minmax(0, 1fr); width: 96%; margin-left: 0; gap: 7px; padding: 14px; border: 1px solid var(--mock-border); border-radius: 16px 16px 16px 5px; background: var(--mock-incoming); box-shadow: var(--mock-shadow); }
.search-graphic .search-answer small { color: var(--navy); font-size: .75rem; letter-spacing: 0; }
.search-graphic .search-answer b { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; }
.search-answer p { margin: 0; font-size: .875rem; line-height: 1.4; }
.search-graphic > .search-sources { position: static; display: flex; gap: 5px; margin-top: 12px; }
.search-sources span { padding: 4px 7px; color: #075a83; background: rgba(255,255,255,.8); font-size: .7rem; box-shadow: none; }

/* Real keyplan, task callout, and photo from the supplied design. */
.plan-graphic > img:first-of-type { object-position: center 43%; opacity: .8; }
.mock-plan-bar { position: absolute; inset: 0 0 auto; z-index: 2; display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid rgba(27,62,114,.12); color: var(--mock-ink); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mock-plan-bar b { font-size: .875rem; font-weight: 600; }
.plan-graphic .mock-plan-bar span, .plan-graphic .mock-plan-task > span { position: static; padding: 0; border-radius: 0; box-shadow: none; background: transparent; font-weight: 400; }
.mock-plan-bar span { color: #075a83; font-size: .75rem; }
.mock-plan-task { position: absolute; top: 92px; right: 20px; z-index: 3; display: grid; justify-items: start; gap: 5px; max-width: calc(100% - 50px); padding: 12px 15px; border: 1.5px solid var(--mock-orange); border-radius: 12px; color: var(--mock-ink); background: var(--mock-white); box-shadow: var(--mock-shadow); }
.mock-plan-task b { font-size: .875rem; font-weight: 600; }
.mock-plan-task > span { color: var(--mock-muted); font-size: .75rem; }
.mock-plan-task::after { position: absolute; left: 50%; top: 100%; width: 2px; height: 24px; background: var(--mock-orange); content: ""; }
.mock-plan-task::before { position: absolute; left: calc(50% - 5px); top: calc(100% + 20px); width: 12px; height: 12px; border-radius: 50%; background: var(--mock-orange); content: ""; }
.plan-graphic > img.mock-camera-pin { position: absolute; top: auto; bottom: 135px; left: 44px; width: 28px; height: 32px; }
.plan-graphic .plan-photo { bottom: 18px; left: 24px; width: 215px; max-width: calc(100% - 48px); grid-template-columns: 65px 1fr; align-items: center; gap: 4px 12px; padding: 8px; border: 1px solid var(--mock-cyan); border-radius: 12px; background: var(--mock-white); box-shadow: var(--mock-shadow); }
.plan-graphic .plan-photo > img:first-child { position: static; inset: auto; opacity: 1; grid-row: span 2; width: 65px; height: 78px; object-fit: cover; border-radius: 6px; }
.plan-photo b { align-self: end; font-size: .85rem; font-weight: 600; }
.plan-photo small { align-self: start; font-size: .75rem; }
.consolidation-core { background: rgba(13,36,68,.86); }
.source-stack span { background: var(--mock-white); }
.action-stack span { background: rgba(27,62,114,.86); }
.record-head > span { background: rgba(255,255,255,.9); }
.record-head b { font-size: .875rem; }
.record-head small { font-size: .65rem; color: #e2ebf7; }
.record-head i { color: #d9f5e7; font-size: .7rem; }
.record-graphic ul { background: rgba(13,36,68,.82); }
.record-graphic li { color: #e1e9f4; font-size: .8rem; }
.record-graphic .record-foot { background: var(--mock-white); }
.record-foot span { font-size: .7rem; }

/* Figma 30865:92575 — distinct project tiles feeding into a real project workspace. */
.workspace-graphic {
  isolation: isolate;
  background: #4086ec;
}
.workspace-graphic::before {
  position: absolute;
  z-index: -1;
  top: -220px;
  left: 50%;
  width: 760px;
  height: 760px;
  border: 54px solid rgba(255,255,255,.055);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}
.workspace-projects {
  position: absolute;
  z-index: 3;
  top: 18%;
  right: 1.45%;
  left: 1.45%;
  height: 90px;
}
.workspace-project {
  position: absolute;
  top: 0;
  display: grid;
  width: 66px;
  justify-items: center;
  rotate: var(--project-tilt);
  transform-origin: center;
}
.workspace-project img {
  display: block;
  width: 62px;
  height: 62px;
  border: 1px solid #dbdbdc;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(0,0,0,.25);
}
.workspace-project b {
  position: relative;
  z-index: 1;
  min-width: 42px;
  margin-top: -7px;
  padding: 3px 8px;
  border: 1px solid #dbdbdc;
  border-radius: 999px;
  color: #8c8c8c;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.25);
  font-size: .59rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.workspace-project--gspa { top: 11px; left: -1px; --project-tilt: -15deg; }
.workspace-project--apso { top: 2px; left: 20%; --project-tilt: -5deg; }
.workspace-project--spx { top: 0; left: 40%; --project-tilt: 0deg; }
.workspace-project--dlep { top: 3px; left: 60%; --project-tilt: 3deg; }
.workspace-project--rlab { top: 10px; right: -1px; --project-tilt: 11deg; }
.workspace-device {
  position: absolute;
  z-index: 2;
  top: 41%;
  left: 50%;
  width: 63%;
  overflow: hidden;
  border: 2.5px solid var(--mock-cyan);
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 0 42px rgba(0,0,0,.25);
  translate: -50% 0;
}
.workspace-device img {
  display: block;
  width: 100%;
  height: auto;
}
.situation-answer-mark { display: grid; place-items: center; flex: 0 0 32px; }
.situation-answer-mark .ai-icon { width: 26px; height: 26px; }

/* Incoming messages are left aligned; outgoing messages are pale blue. */
.comms-board { gap: 15px; grid-template-columns: minmax(0,1fr) 74px minmax(0,1fr); padding: 26px; background: radial-gradient(ellipse at 80% 100%, #3375d8, transparent 70%), var(--navy); }
.comms-card { padding: 20px; border: 1px solid rgba(255,255,255,.65); background: rgba(244,242,240,.91); box-shadow: var(--mock-shadow); }
.comms-card > b { margin: 20px 0; color: var(--mock-ink); font-size: 1rem; }
.comms-card .card-label { display: flex; gap: 6px; align-items: center; color: #596778; font-size: .65rem; letter-spacing: .07em; }
.comms-card .card-label img { width: 18px; height: 18px; }
.comms-card > div p { padding: 12px; border: 1px solid rgba(13,166,242,.4); border-radius: 14px 14px 14px 4px; color: var(--mock-ink); background: var(--mock-white); font-size: .85rem; line-height: 1.45; }
.comms-card strong { color: #1b3e72; font-size: .75rem; font-weight: 600; }
.comms-card .mock-sent { margin-left: 14px; justify-content: flex-end; }
.comms-card .mock-sent p { border-radius: 14px 14px 4px 14px; background: var(--mock-outgoing); }
.comms-card time { display: block; margin-top: 6px; color: var(--mock-muted); font-size: .65rem; text-align: right; }
.comms-card time span { color: #0876aa; }
.comms-card .avatar { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 4px; font-size: .6rem; }
.comms-card .mock-channel-note { align-items: center; margin-top: 18px; color: #075a83; font-size: .7rem; }
.mock-channel-note .ai-icon { width: 20px; height: 20px; }
.comms-card--external { background: rgba(231,228,214,.93); }
.comms-card--external .mock-sent p { border-color: rgba(116,145,96,.25); background: rgba(231,242,218,.95); }
.comms-card--external > small { margin: 20px 0 0; color: #596778; font-size: .75rem; line-height: 1.4; }
.comms-bridge .onsite-orb { display: grid; place-items: center; background: rgba(255,255,255,.94); }
.comms-bridge i { left: -20px; width: 114px; }

/* Workflow examples retain their scenarios, with real app message styling. */
.action-flows { align-items: start; }
.action-story { min-height: 720px; background: rgba(228,235,245,.93); }
.action-story--leave { background: rgba(244,242,240,.93); }
.action-story--quote { background: rgba(162,194,232,.93); }
.action-story--quote .action-story__head { color: var(--navy-deep); border-color: rgba(13,36,68,.15); }
.action-story__head { min-height: 150px; }
.action-thread { gap: 16px; padding-top: 22px; }
:is(.action-message, .action-followup, .action-proof, .action-approval, .action-ai, .action-result) { border: 1px solid var(--mock-border); color: var(--mock-ink); background: var(--mock-incoming); box-shadow: var(--mock-shadow); }
.action-message { width: 96%; padding: 14px; border-radius: 16px 16px 16px 4px; font-size: .875rem; }
.action-message small, .action-ai small { color: var(--navy); font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.action-message-photo { width: 100%; height: 90px; margin: 0 0 10px; border-radius: 8px; object-fit: cover; object-position: center 38%; }
.action-ai { grid-template-columns: 30px minmax(0,1fr); gap: 9px; margin-left: 5%; padding: 14px; border-top: 2px solid var(--mock-orange); border-radius: 16px; background: var(--mock-white); }
.action-ai > .ai-avatar { width: 30px; height: 30px; border-radius: 50%; background: #e4f5ff; }
.action-ai .ai-icon { width: 23px; height: 23px; }
.action-ai b { font-size: .9rem; font-weight: 600; line-height: 1.4; }
.action-ai em { margin-top: 7px; color: var(--mock-muted); font-size: .75rem; line-height: 1.5; }
.action-proof { width: 94%; margin-left: 0; grid-template-columns: 32px 1fr; gap: 4px 9px; transform: none; }
.action-proof img { grid-row: span 2; }
.action-proof b, .action-approval b { font-size: .85rem; font-weight: 600; }
.action-proof small, .action-approval span { color: var(--mock-muted); font-size: .75rem; }
.action-approval, .action-followup { width: 92%; margin-left: auto; transform: none; border-radius: 16px 16px 4px 16px; background: var(--mock-outgoing); }
.action-followup { font-size: .875rem; }
.action-result { padding: 14px; border-color: rgba(13,166,242,.55); background: rgba(235,246,253,.94); }
.action-result b { font-size: .9rem; font-weight: 600; }
.action-result span { color: var(--mock-muted); font-size: .8rem; line-height: 1.45; }
.voice-wave { color: #527795; }
.voice-wave > span { color: var(--mock-cyan); background: white; }

/* Individual translate composes with scroll/reveal transforms. Decorative cards
   stay non-focusable; interactive cards receive the same response on focus. */
:is(.feature-graphic, .comms-card, .action-story, .team-love-grid article,
    .team-quotes article, .roi-grid article, .pricing-rail article, .security-flows article,
    .journal-card, .team-card, .mini-message, .mini-task, .mini-status, .search-prompt,
    .search-answer, .mock-plan-task, .plan-photo, .source-stack span, .action-stack span,
    .consolidation-core, .action-message, .action-ai, .action-proof, .action-followup,
    .action-approval, .action-result) {
  transition: translate 240ms ease, box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.comms-card, .action-story, .team-love-grid article, .team-quotes article,
      .roi-grid article, .pricing-rail article, .security-flows article, .journal-card, .team-card):hover,
  .feature-card:hover .feature-graphic {
    translate: 0 -5px;
    border-color: rgba(13,166,242,.8);
    box-shadow: 0 24px 48px rgba(13,36,68,.2), inset 0 1px 0 rgba(255,255,255,.7);
  }
  :is(.mini-message, .mini-task, .mini-status, .search-prompt, .search-answer, .mock-plan-task,
      .plan-photo, .source-stack span, .action-stack span, .consolidation-core, .action-message,
      .action-ai, .action-proof, .action-followup, .action-approval, .action-result):hover {
    translate: 0 -3px;
    border-color: var(--mock-cyan);
    box-shadow: 0 13px 30px rgba(13,36,68,.2), inset 0 1px 0 rgba(255,255,255,.8);
  }
}
:is(.pricing-rail article, .journal-card):focus-within { border-color: var(--mock-cyan); box-shadow: 0 16px 36px rgba(13,36,68,.18); }
@media (max-width: 1100px) {
  .comms-board { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .comms-bridge { display: flex; justify-content: center; gap: 12px; }
  .comms-bridge b { font-size: .75rem; }
  .comms-bridge i { display: none; }
  .action-flows { grid-template-columns: 1fr; }
  .action-story { min-height: 0; }
  .action-story__head { min-height: 0; }
}
@media (max-width: 760px) {
  .mock-project-label { font-size: .75rem; }
  .mock-project-label > span { display: none; }
  .feature-graphic, .feature-card:hover .feature-graphic { height: 380px; min-height: 380px; }
  .hero-output-card { grid-template-columns: 30px minmax(0,1fr); width: 210px; }
  .hero-output-card p { font-size: .6rem; }
  .hero-output-card b { font-size: .8rem; }
  .hero-output-card .ai-icon { width: 22px; height: 22px; }
  .hero-output-plan > img:first-child { height: 155px; }
  .hero-output-plan figcaption { font-size: .6rem; }
  .comms-board { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.feature-graphic, .comms-card, .action-story, .team-love-grid article,
      .team-quotes article, .roi-grid article, .pricing-rail article, .security-flows article,
      .journal-card, .team-card, .mini-message, .mini-task, .mini-status, .search-prompt,
      .search-answer, .mock-plan-task, .plan-photo, .source-stack span, .action-stack span,
      .consolidation-core, .action-message, .action-ai, .action-proof, .action-followup,
      .action-approval, .action-result) { transition: none; translate: none !important; }
}

/* One blur layer per conversation avoids nested backdrop compositing artifacts. */
.action-story, .comms-card { isolation: isolate; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.action-thread > *, .comms-card > div p { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-demo:hover .hero-output-card { box-shadow: 0 16px 38px rgba(13,36,68,.24), 0 0 0 1px rgba(13,166,242,.7); }
}