@font-face {
  font-family:Helion;
  src:url('../fonts/inter-regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap}

@font-face {
  font-family:Helion;
  src:url('../fonts/inter-medium.ttf') format('truetype');
  font-weight:500;
  font-display:swap}

:root {
  --paper:var(--color-bone-canvas);
  --ink:var(--color-charcoal-ink);
  --ash:var(--color-ash-layer);
  --line:var(--color-mist-border);
  --orange:var(--color-ember)}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.5 Helion,Arial,sans-serif;
  font-feature-settings:'dlig' on,'ss02' on,'ss08' on;
  letter-spacing:.01em}
a {
  color:inherit;
  text-decoration:none}
button,input,select,textarea {
  font:inherit;
  color:inherit}
button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
button {
  cursor:pointer}
button {
  letter-spacing:inherit}
h1,h2,h3,h4,p {
  margin:0}
h1,h2,h3,h4 {
  font-weight:400}
h1,h2 {
  letter-spacing:-.04em;
  line-height:1.02}
h2 {
  font-size:clamp(36px,4.2vw,56px)}
h3 {
  font-size:32px;
  letter-spacing:-.025em;
  line-height:1.15}
p {
  line-height:1.55}
::selection {
  background:var(--orange);
  color:var(--ink)}
:focus-visible {
  outline:2px solid var(--color-signal-blue);
  outline-offset:5px}
.site-header,.hero,.section,.positioning,.footer,.detail-hero,.detail-principle {
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto}
.site-header {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px}
.logo {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:35px;
  letter-spacing:-1.5px;
  font-weight:500}
.logo-symbol {
  width:36px;
  height:36px;
  fill:none;
  stroke:var(--ink);
  stroke-width:2.5}
.logo-symbol circle {
  fill:var(--orange);
  stroke:var(--orange)}
.site-header nav {
  display:flex;
  gap:30px;
  font-size:14px}
.site-header nav a {
  padding:10px 0}
.site-header nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.header-contact {
  font-size:14px;
  border:1px solid var(--line);
  padding:12px 18px;
  border-radius:24px;
  display:flex;
  gap:20px;
  align-items:center;
  transition:background .2s}
.header-contact:hover {
  background:var(--ash)}
.header-contact>span {
  font-size:20px}
.menu-toggle {
  display:none}
.skip {
  position:fixed;
  left:16px;
  top:-100px;
  background:var(--ink);
  color:var(--paper);
  padding:16px;
  z-index:30}
.skip:focus {
  top:16px}
.hero {
  text-align:center;
  padding-top:61px}
.hero-eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.12em;
  margin-bottom:28px}
.hero-eyebrow i {
  height:7px;
  width:7px;
  border-radius:50%;
  background:var(--orange)}
h1 {
  font-size:clamp(56px,6.55vw,92px);
  line-height:1.02;
  letter-spacing:-.05em}
.orange-dot {
  color:var(--orange)}
.hero-sub {
  display:flex;
  justify-content:center;
  margin:29px 0 26px}
.hero-sub p {
  font-size:18px;
  letter-spacing:0;
  line-height:1.5;
  text-align:center}
.arrow-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--ink);
  color:var(--paper);
  padding:7px 23px 7px 7px;
  border:0;
  border-radius:44px;
  font-size:15px;
  transition:transform .2s,background .2s;
  min-height:48px}
.arrow-button>span {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  font-size:21px;
  flex-shrink:0}
.arrow-button:hover {
  transform:translateY(-3px);
  background:#263334}
.system-visual {
  margin:62px 0 0;
  background:var(--ash);
  border-radius:20px;
  padding:27px 32px 20px;
  overflow:hidden}
.visual-top,.visual-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center}
.visual-top {
  font-size:10px;
  letter-spacing:.09em}
.system-visual svg {
  display:block;
  width:100%;
  height:auto;
  margin:-15px 0 -17px}
.diagram-guides {
  stroke:var(--line);
  stroke-width:1;
  fill:none;
  stroke-dasharray:3 6}
.tangled {
  stroke:var(--ink);
  stroke-width:1.4;
  fill:none;
  opacity:.72}
.ordered {
  stroke:var(--ink);
  stroke-width:1.4;
  fill:none}
.ordered circle {
  fill:var(--ink)}
.core {
  fill:var(--orange)}
.core-mark {
  fill:none;
  stroke:var(--ink);
  stroke-width:3}
.core-mark circle {
  fill:var(--ink)}
.diagram-points {
  fill:var(--orange)}
.visual-bottom {
  font-size:11px;
  letter-spacing:0}
.visual-bottom>span:nth-child(2) {
  color:#515958}
.positioning {
  display:grid;
  grid-template-columns:.85fr 1.6fr 1.35fr;
  gap:45px;
  align-items:start;
  padding:54px 0 0}
.positioning>span {
  font-size:10px;
  letter-spacing:.08em;
  max-width:140px;
  line-height:1.7}
.positioning>p {
  font-size:27px;
  line-height:1.2;
  letter-spacing:-.03em}
.positioning>div {
  font-size:15px;
  line-height:1.6}
.section {
  padding-top:112px}
.clients {
  padding-top:44px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  text-align:center}
.clients h2 {
  font-size:11px;
  line-height:1.6;
  letter-spacing:.08em;
  text-transform:uppercase}
.client-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:24px clamp(32px,7vw,100px);
  list-style:none;
  margin:28px 0 0;
  padding:0}
.client-list li {
  min-height:58px;
  display:flex;
  align-items:center;
  font-size:clamp(23px,2.6vw,32px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.3}
.client-list img {
  display:block;
  width:clamp(180px,20vw,240px);
  height:auto;
  filter:brightness(0);
  opacity:.78}
@media(max-width:600px) {
  .client-list {
    flex-direction:column}
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
  font-size:15px}
.section-label>span:first-child {
  display:flex;
  align-items:center;
  gap:12px}
.section-label i {
  display:grid;
  place-items:center;
  font-style:normal;
  border:1px solid var(--ink);
  border-radius:50%;
  width:24px;
  height:24px;
  font-size:16px}
.section-intro {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
  margin:43px 0 38px}
.section-intro>p {
  max-width:365px;
  font-size:16px;
  line-height:1.55}
.problem-tabs {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px}
.problem-tabs button {
  border:1px solid var(--line);
  border-radius:24px;
  padding:13px 23px;
  background:transparent;
  font-size:15px;
  transition:background .2s}
.problem-tabs button:hover {
  background:var(--ash)}
.problem-tabs button[aria-selected=true] {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)}
.solution-panel {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  min-height:440px}
.solution-copy {
  padding:38px 32px;
  display:flex;
  flex-direction:column;
  align-items:start}
.overline,.capability-number {
  font-size:10px;
  letter-spacing:.09em;
  display:block}
.solution-copy h3 {
  font-size:36px;
  line-height:1.12;
  margin:22px 0 20px;
  letter-spacing:-.04em}
.solution-copy>p {
  font-size:16px;
  max-width:390px}
.solution-tags,.tag-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0}
.solution-tags>span,.tag-list>span {
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 9px;
  font-size:12px}
.text-action {
  display:inline-flex;
  align-items:center;
  gap:22px;
  font-size:15px;
  background:transparent;
  border:0;
  padding:7px 0;
  line-height:1.5;
  text-align:left}
.text-action>span {
  font-size:22px}
.text-action:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.solution-copy>.text-action {
  margin-top:auto}
.product-preview {
  background:var(--ash);
  padding:46px 27px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0}
.preview-window {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transform:perspective(1400px) rotateY(-5deg);
  transform-origin:right center}
.preview-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  font-size:10px}
.preview-brand {
  font-size:13px;
  letter-spacing:-.03em;
  font-weight:500}
.preview-status {
  color:#53605e;
  font-size:9px}
.preview-body {
  display:grid;
  grid-template-columns:45px 1fr}
.preview-sidebar {
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding-top:19px;
  font-size:16px}
.preview-sidebar b {
  font-weight:400;
  color:var(--orange)}
.preview-content {
  padding:22px;
  min-width:0}
.preview-eyebrow {
  font-size:8px;
  letter-spacing:.08em}
.preview-content h4 {
  font-size:21px;
  letter-spacing:-.03em;
  margin:8px 0 20px}
.preview-metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:24px}
.preview-metrics>div {
  background:var(--ash);
  border-radius:8px;
  padding:12px}
.preview-metrics span {
  font-size:9px;
  display:block}
.preview-metrics strong {
  font-size:16px;
  font-weight:400;
  display:block;
  margin-top:3px;
  letter-spacing:-.03em}
.preview-table>div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #e0e1dc;
  padding:10px 0;
  font-size:10px}
.preview-table>div:first-child {
  font-weight:500}
.state {
  font-size:8px;
  background:var(--ash);
  padding:2px 6px;
  border-radius:4px}
.ai-note {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:9px;
  margin-top:17px}
.ai-note>span:first-child {
  color:var(--orange);
  font-size:21px}
.preview-caption {
  font-size:8px;
  letter-spacing:.07em;
  display:block;
  text-align:center;
  margin-top:23px}
.capability-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.capability {
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:start}
.capability-art {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:15px;
  min-height:130px;
  margin:16px 0 22px}
.capability-art>span {
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 12px;
  font-size:12px;
  background:var(--paper)}
.capability-art>i {
  font-style:normal}
.intelligence-art>b {
  font-size:46px;
  font-weight:400;
  color:var(--orange)}
.capability h3 {
  font-size:32px;
  margin-bottom:20px;
  letter-spacing:-.035em}
.capability>p {
  font-size:16px;
  max-width:460px}
.capability>.arrow-button {
  margin-top:auto}
.compact {
  font-size:13px}
.compact>span {
  width:30px;
  height:30px}
.tag-list {
  margin:24px 0 30px;
  gap:8px}
.connected-band {
  margin-top:24px;
  border-radius:20px;
  background:var(--ash);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:60px;
  padding:45px 55px}
.connected-band h3 {
  margin:17px 0;
  font-size:36px}
.connected-band p {
  font-size:16px;
  max-width:480px}
.connected-band .text-action {
  margin-top:18px}
.device-visual {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px}
.device-rings {
  width:190px;
  height:190px;
  border:1px dashed #9ca4a0;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative}
.device-rings:before,.device-rings:after {
  content:'';
  position:absolute;
  border:1px solid #b9bfba;
  border-radius:50%;
  inset:22px}
.device-rings:after {
  inset:45px}
.device-rings>div {
  width:53px;
  height:73px;
  background:var(--ink);
  border-radius:12px;
  position:relative;
  z-index:1}
.device-rings>div:before {
  content:'';
  position:absolute;
  width:9px;
  height:9px;
  background:var(--orange);
  border-radius:50%;
  left:22px;
  top:19px}
.device-rings>div:after {
  content:'';
  position:absolute;
  width:17px;
  height:1px;
  background:var(--paper);
  left:18px;
  bottom:17px}
.device-rings>b {
  position:absolute;
  top:25px;
  right:20px;
  border-radius:50%;
  background:var(--orange);
  width:10px;
  height:10px}
.device-visual>span {
  font-size:8px;
  letter-spacing:.09em}
.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:27px}
.process-number {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--ash);
  display:grid;
  place-items:center;
  font-size:13px;
  margin-bottom:30px}
.process-grid h3 {
  font-size:25px;
  margin-bottom:16px}
.process-grid p {
  font-size:15px;
  min-height:110px}
.deliverable {
  display:block;
  font-size:11px;
  padding-top:20px;
  border-top:1px solid var(--line);
  margin-top:24px;
  line-height:1.5}
.faq-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:55px;
  margin-top:43px}
.faq-grid h2 {
  font-size:42px}
.faq details {
  border-bottom:1px solid var(--line)}
.faq summary {
  list-style:none;
  position:relative;
  padding:22px 35px 22px 0;
  cursor:pointer;
  font-size:16px}
.faq summary::-webkit-details-marker {
  display:none}
.faq summary:after {
  content:'+';
  position:absolute;
  right:0;
  top:17px;
  font-size:25px}
.faq details[open] summary:after {
  content:'−'}
.faq details p {
  padding:0 20px 24px 0;
  font-size:16px}
.contact {
  margin-top:112px;
  padding:55px;
  background:var(--ash);
  border-radius:20px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:65px}
.contact h2 {
  font-size:66px;
  margin:27px 0;
  letter-spacing:-.05em;
  line-height:1}
.contact h2>span {
  color:var(--orange)}
.contact-copy>p {
  font-size:16px;
  max-width:380px}
.contact-email {
  font-size:20px;
  display:inline-block;
  margin-top:32px;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px}
.contact form {
  min-width:0}
.contact form>h3 {
  font-size:25px;
  margin-bottom:27px}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}
.form-row>div {
  min-width:0}
.contact label {
  display:block;
  font-size:12px;
  margin-bottom:8px}
.contact input,.contact select,.contact textarea {
  width:100%;
  padding:12px 13px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px;
  min-height:46px;
  margin-bottom:20px}
.contact textarea {
  resize:vertical}
.contact .arrow-button {
  margin-top:2px}
.form-note,#form-status {
  font-size:11px;
  line-height:1.5;
  max-width:390px;
  margin-top:15px}
.footer {
  padding:55px 0 30px}
.footer-main,.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px}
.footer-main p {
  font-size:16px}
.footer-main>a:last-child {
  font-size:14px}
.footer-bottom {
  font-size:11px;
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:45px}
.detail-hero {
  padding-top:65px;
  text-align:center}
.back-link {
  display:block;
  text-align:left;
  font-size:14px;
  margin-bottom:45px}
.detail-hero h1 {
  font-size:80px}
.detail-hero>p {
  max-width:680px;
  text-align:left;
  font-size:18px;
  margin:30px auto}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px}
.detail-grid article {
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px}
.detail-grid h2 {
  font-size:32px;
  margin:25px 0 15px}
.detail-grid p {
  font-size:16px}
.detail-principle {
  background:var(--ash);
  border-radius:20px;
  padding:48px;
  margin-top:90px}
.detail-principle h2 {
  margin:24px 0;
  font-size:44px}
.detail-principle p {
  max-width:650px;
  margin-bottom:25px;
  font-size:18px}
@media(min-width:1500px) {
  .hero {
  padding-top:80px}
h1 {
  font-size:96px}
.system-visual {
  margin-top:70px}
}

@media(max-width:1000px) {
  .site-header,.hero,.section,.positioning,.footer,.detail-hero,.detail-principle {
  width:calc(100% - 48px)}
.site-header {
  gap:20px}
.site-header nav {
  gap:20px;
  font-size:12px}
.header-contact {
  font-size:12px;
  padding:10px 14px;
  gap:13px}
.hero {
  padding-top:50px}
h1 {
  font-size:7vw}
.hero-sub p {
  font-size:17px}
.positioning {
  gap:25px;
  grid-template-columns:.7fr 1.3fr 1.3fr}
.positioning>p {
  font-size:24px}
.positioning>div {
  font-size:14px}
.section {
  padding-top:88px}
.section-intro {
  gap:30px}
.section-intro>p {
  max-width:300px;
  font-size:15px}
.solution-panel {
  grid-template-columns:1fr 1.1fr}
.solution-copy {
  padding:30px 24px}
.solution-copy h3 {
  font-size:30px}
.solution-copy>p {
  font-size:15px}
.product-preview {
  padding:30px 16px}
.preview-content {
  padding:17px 12px}
.preview-content h4 {
  font-size:18px}
.preview-metrics strong {
  font-size:13px}
.preview-table>div {
  font-size:9px}
.preview-metrics>div {
  padding:9px}
.capability {
  padding:25px}
.capability-art {
  gap:9px}
.capability-art>span {
  padding:12px 8px;
  font-size:10px}
.capability h3 {
  font-size:28px}
.capability>p {
  font-size:15px}
.connected-band {
  padding:35px;
  gap:35px}
.connected-band h3 {
  font-size:32px}
.process-grid {
  gap:22px}
.process-grid p {
  font-size:14px}
.process-grid h3 {
  font-size:22px}
.faq-grid {
  gap:35px}
.faq-grid h2 {
  font-size:36px}
.contact {
  padding:38px;
  gap:40px;
  margin-top:88px}
.contact h2 {
  font-size:54px}
.contact .form-row {
  grid-template-columns:1fr;
  gap:0}
.detail-hero h1 {
  font-size:65px}
}

@media(max-width:700px) {
  html {
  scroll-padding-top:30px}
.site-header,.hero,.section,.positioning,.footer,.detail-hero,.detail-principle {
  width:calc(100% - 40px)}
.site-header {
  height:80px;
  position:relative;
  gap:15px}
.logo {
  font-size:29px;
  gap:5px}
.logo-symbol {
  width:29px;
  height:29px}
.header-contact {
  margin-left:auto;
  font-size:12px;
  padding:8px 12px;
  gap:10px}
.menu-toggle {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:10px 5px;
  border:0;
  background:transparent;
  width:32px;
  height:40px}
.menu-toggle span {
  width:20px;
  height:1.5px;
  background:var(--ink)}
.site-header nav {
  display:none;
  position:absolute;
  top:74px;
  left:0;
  right:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  z-index:20;
  font-size:16px}
.site-header nav.open {
  display:flex;
  flex-direction:column;
  gap:12px}
.hero {
  padding-top:42px}
.hero-eyebrow {
  font-size:9px;
  letter-spacing:.1em;
  margin-bottom:25px;
  gap:8px}
h1 {
  font-size:clamp(35px,7.4vw,52px);
  line-height:1.08;
  letter-spacing:-.05em}
.hero-sub {
  margin:22px auto;
  max-width:420px}
.hero-sub p {
  font-size:15px}
.desktop-break {
  display:none}
.arrow-button {
  font-size:13px;
  gap:11px;
  padding-right:18px}
.system-visual {
  margin-top:40px;
  padding:19px 15px 17px;
  border-radius:20px}
.visual-top {
  font-size:6px;
  letter-spacing:.05em}
.system-visual svg {
  width:120%;
  max-width:none;
  margin:5px -10% 3px}
.visual-bottom {
  font-size:7px;
  gap:15px}
.visual-bottom>span:nth-child(2) {
  display:none}
.visual-bottom>span:last-child {
  text-align:right}
.positioning {
  padding-top:35px;
  grid-template-columns:1fr;
  gap:18px}
.positioning>span {
  max-width:none;
  font-size:9px}
.positioning>p {
  font-size:29px}
.positioning>div {
  font-size:16px}
.section {
  padding-top:72px}
.section-label {
  font-size:13px;
  padding-bottom:16px}
.section-label i {
  width:23px;
  height:23px}
.section-intro {
  display:block;
  margin:32px 0 28px}
h2 {
  font-size:37px}
.section-intro>p {
  max-width:none;
  margin-top:22px;
  font-size:16px}
.section-intro>p br {
  display:none}
.problem-tabs {
  gap:8px;
  margin-bottom:20px;
  flex-direction:column;
  align-items:stretch}
.problem-tabs button {
  font-size:14px;
  padding:12px 15px;
  text-align:left}
.problem-tabs button[aria-selected=true]:after {
  content:'↗';
  float:right}
.solution-panel {
  grid-template-columns:1fr}
.solution-copy {
  padding:28px 24px}
.solution-copy h3 {
  font-size:32px;
  margin-top:19px}
.solution-copy>p {
  font-size:16px}
.solution-tags>span,.tag-list>span {
  font-size:11px}
.overline,.capability-number {
  font-size:9px}
.product-preview {
  padding:30px 17px 24px}
.preview-window {
  transform:none}
.preview-content {
  padding:18px 12px}
.preview-content h4 {
  font-size:18px}
.preview-metrics strong {
  font-size:14px}
.preview-header {
  padding:13px 14px}
.preview-body {
  grid-template-columns:32px 1fr}
.preview-sidebar {
  font-size:14px}
.preview-table>div {
  font-size:9px}
.preview-caption {
  font-size:6px}
.capability-grid {
  grid-template-columns:1fr;
  gap:20px}
.capability {
  padding:25px}
.capability h3 {
  font-size:30px}
.capability>p {
  font-size:16px}
.capability-art {
  gap:12px;
  min-height:115px;
  margin:10px 0 20px}
.capability-art>span {
  font-size:11px;
  padding:12px 9px}
.tag-list {
  margin-bottom:25px}
.connected-band {
  grid-template-columns:1fr;
  padding:28px 24px;
  gap:30px}
.device-rings {
  width:160px;
  height:160px}
.connected-band h3 {
  font-size:32px}
.connected-band p {
  font-size:16px}
.process-grid {
  grid-template-columns:1fr 1fr;
  gap:30px 20px}
.process-number {
  margin-bottom:20px}
.process-grid h3 {
  font-size:23px}
.process-grid p {
  font-size:15px;
  min-height:140px;
  line-height:1.5}
.deliverable {
  font-size:10px;
  margin-top:15px;
  padding-top:15px}
.faq-grid {
  grid-template-columns:1fr;
  gap:22px;
  margin-top:30px}
.faq-grid h2 {
  font-size:37px}
.faq summary {
  font-size:16px}
.faq details p {
  font-size:15px}
.contact {
  margin-top:72px;
  padding:30px 24px;
  gap:38px;
  grid-template-columns:1fr}
.contact h2 {
  font-size:56px;
  margin:22px 0}
.contact-copy>p {
  font-size:15px}
.contact-email {
  font-size:19px;
  margin-top:25px}
.contact form>h3 {
  font-size:24px}
.contact input,.contact select,.contact textarea {
  font-size:16px}
.contact label {
  font-size:13px}
.form-note,#form-status {
  font-size:12px}
.footer {
  padding:38px 0 25px}
.footer-main {
  align-items:start}
.footer-main p {
  font-size:12px}
.footer-main>a:last-child {
  display:none}
.footer-bottom {
  flex-wrap:wrap;
  gap:15px;
  font-size:10px;
  margin-top:30px;
  padding-top:23px}
.detail-hero {
  padding-top:35px}
.back-link {
  font-size:13px;
  margin-bottom:35px}
.detail-hero h1 {
  font-size:45px}
.detail-hero>p {
  font-size:17px}
.detail-grid {
  grid-template-columns:1fr;
  gap:18px;
  margin-top:30px}
.detail-grid article {
  padding:28px}
.detail-grid h2 {
  font-size:30px}
.detail-principle {
  padding:28px;
  margin-top:65px}
.detail-principle h2 {
  font-size:35px}
.detail-principle p {
  font-size:16px}
}

@media(max-width:360px) {
  .site-header {
  gap:7px}
.logo {
  font-size:26px}
.logo-symbol {
  width:26px}
.header-contact {
  font-size:11px;
  gap:8px;
  padding:8px 10px}
h1 {
  font-size:31px}
.hero-sub p {
  font-size:14px}
.solution-copy {
  padding:24px 20px}
.solution-copy h3 {
  font-size:29px}
.preview-body {
  grid-template-columns:25px 1fr}
.preview-content {
  padding:16px 9px}
.preview-metrics {
  gap:6px}
.preview-metrics strong {
  font-size:12px}
.preview-table>div {
  font-size:8px}
.capability {
  padding:23px 20px}
.capability-art {
  gap:8px}
.capability-art>span {
  font-size:9px;
  padding:12px 7px}
.contact {
  padding:27px 20px}
.contact h2 {
  font-size:48px}
.contact-email {
  font-size:17px}
.process-grid {
  grid-template-columns:1fr}
.process-grid p {
  min-height:0}
.detail-hero h1 {
  font-size:38px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
}


/* The diagram's continuous motion always has a visible pause control. */
.motion-toggle {
  display: block;
  margin: 16px auto 0;
  padding: 8px 15px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: transparent;
  font-size: 11px;
}
.motion-toggle:hover { background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}

/* Each business challenge has its own tangible, illustrative scene. */
[hidden] { display: none !important; }
.product-preview { min-height: 490px; }
.case-scene { width: 100%; min-width: 0; }
.preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.preview-footer .preview-caption { margin: 0; text-align: left; font-size: 7px; }
.scene-replay { flex-shrink: 0; border: 1px solid var(--line); border-radius: 24px; padding: 7px 10px; font-size: 10px; background: transparent; min-height: 34px; }
.scene-replay:hover { background: var(--paper); }
.journey-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 23px; }
.scene-eyebrow { display: block; font-size: 8px; letter-spacing: .07em; }
.scene-badge { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 9px; }
.customer-card { display: flex; align-items: center; gap: 20px; padding: 24px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.customer-avatar { position: relative; width: 62px; height: 62px; flex-shrink: 0; display: grid; place-items: center; font-size: 24px; border-radius: 50%; background: var(--ash); }
.customer-avatar svg { position: absolute; inset: -4px; width: 70px; height: 70px; transform: rotate(-90deg); }
.customer-avatar circle { fill: none; stroke: var(--orange); stroke-width: 2; }
.customer-card h4 { font-size: 23px; letter-spacing: -.035em; margin: 6px 0; }
.customer-card p { font-size: 11px; }
.journey-track { display: flex; align-items: center; margin: 24px 26px 8px; }
.journey-track span { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; flex-shrink: 0; }
.journey-track i { height: 1px; background: var(--ink); flex: 1; transform-origin: left; }
.journey-labels { display: flex; justify-content: space-between; font-size: 9px; margin: 0 8px 20px; }
.message-card { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--paper); margin-right: 30px; }
.message-icon { font-size: 22px; }
.message-card b { font-size: 12px; font-weight: 500; }
.message-card p { font-size: 11px; margin-top: 7px; line-height: 1.6; }
.loyalty-card { margin-top: 15px; margin-left: 30px; padding: 19px; border-radius: 16px; background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.loyalty-card b { display: block; font-weight: 400; font-size: 15px; margin-top: 7px; }
.loyalty-stamps { display: flex; gap: 7px; }
.loyalty-stamps span { width: 26px; height: 26px; border: 1px solid #68716f; border-radius: 50%; display: grid; place-items: center; color: var(--orange); font-size: 20px; }
.loyalty-stamps span:last-child { color: var(--paper); font-size: 13px; }
.ai-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.document-card { padding: 20px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); min-height: 235px; }
.document-icon { font-size: 36px; margin: 12px 0 7px; }
.document-card b { font-size: 12px; font-weight: 500; }
.document-lines { margin-top: 17px; display: grid; gap: 9px; }
.document-lines i { display: block; height: 3px; background: var(--line); border-radius: 2px; }
.document-lines i:nth-child(2) { width: 70%; }
.document-lines i:last-child { width: 50%; }
.scan-line { position: absolute; left: 14px; right: 14px; top: 52px; height: 2px; background: var(--orange); opacity: 0; }
.agent-stack { display: grid; gap: 13px; }
.agent-node { display: flex; align-items: center; gap: 10px; padding: 13px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.agent-node>span { font-size: 21px; color: var(--orange); }
.agent-node b { display: block; font-weight: 500; font-size: 12px; }
.agent-node small { display: block; font-size: 8px; margin-top: 3px; }
.agent-node i { margin-left: auto; font-style: normal; font-size: 11px; }
.review-card { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 19px 15px; background: var(--paper); margin-top: 24px; }
.review-icon { font-size: 27px; }
.review-card b { display: block; font-size: 14px; font-weight: 500; margin: 6px 0; }
.review-card p { font-size: 10px; }
.review-status { margin-left: auto; font-size: 8px; padding: 5px 7px; border-radius: 8px; border: 1px solid var(--line); white-space: nowrap; }
.ai-scene-note { margin: 20px 0 0; font-size: 11px; text-align: center; }
@media(max-width:1000px) and (min-width:701px) {
  .customer-card { gap: 12px; padding: 20px 12px; }
  .customer-card h4 { font-size: 19px; }
  .loyalty-card { margin-left: 0; padding: 16px 12px; flex-wrap: wrap; }
  .ai-workspace { gap: 10px; }
  .document-card { padding: 13px; }
  .agent-node { gap: 6px; padding: 13px 8px; }
  .review-status { display: none; }
}
@media(max-width:700px) {
  .product-preview { min-height: 460px; }
  .customer-card { padding: 20px 13px; gap: 14px; }
  .customer-card h4 { font-size: 19px; }
  .customer-card p { font-size: 10px; }
  .customer-avatar { width: 52px; height: 52px; }
  .customer-avatar svg { width: 60px; height: 60px; }
  .message-card { margin-right: 12px; padding: 16px 13px; }
  .loyalty-card { margin-left: 12px; padding: 16px 13px; gap: 9px; }
  .loyalty-card b { font-size: 12px; }
  .loyalty-stamps { gap: 4px; }
  .loyalty-stamps span { width: 22px; height: 22px; font-size: 16px; }
  .ai-workspace { gap: 10px; }
  .document-card { padding: 13px; }
  .agent-node { padding: 13px 8px; gap: 6px; }
  .agent-node i { display: none; }
  .review-card { gap: 9px; padding: 16px 12px; }
  .review-card b { font-size: 12px; }
  .review-status { display: none; }
  .preview-footer { flex-wrap: wrap; }
}

/* Ember punctuates the paper-and-ink system rather than competing with it. */
:root {
   --ember-wash: #fbe8de;
   }

.problem-tabs button[aria-selected=true] {
   background: var(--ember-wash);
   color: var(--ink);
   border-color: #e5aa90;
   }

.process-number {
   background: var(--ember-wash);
   }

.capability-number {
   color: #9e3619;
   }

.detail-grid article:nth-child(2), .detail-grid article:nth-child(3) {
   background: #f6f3ec;
   }

.detail-principle {
   background: var(--ember-wash);
   }

.detail-principle > .overline {
   color: #9e3619;
   }

.detail-lab {
   width: min(1200px,calc(100% - 80px));
   margin: 55px auto 0;
   border: 1px solid var(--line);
   border-radius: 24px;
   overflow: hidden;
   }

.lab-top {
   padding: 22px 28px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   }

.lab-micro {
   font-size: 10px;
   letter-spacing: .07em;
   }

.lab-tabs {
   display: flex;
   gap: 7px;
   }

.lab-tabs button {
   font-size: 12px;
   padding: 9px 15px;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 24px;
   }

.lab-tabs button:hover {
   background: var(--ash);
   }

.lab-tabs button[aria-selected=true] {
   border-color: var(--line);
   background: var(--ink);
   color: var(--paper);
   }

.lab-bottom {
   padding: 18px 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   }

.lab-bottom p {
   font-size: 11px;
   }

.lab-replay {
   border: 1px solid var(--line);
   border-radius: 24px;
   background: transparent;
   padding: 8px 13px;
   font-size: 11px;
   white-space: nowrap;
   }

.lab-canvas {
   min-height: 360px;
   }

.ai-canvas {
   display: grid;
   grid-template-columns: 1fr 1.15fr 1fr;
   gap: 28px;
   background: var(--ink);
   color: var(--paper);
   padding: 40px;
   align-items: center;
   }

.lab-input,.lab-output {
   padding: 24px;
   border: 1px solid #43504c;
   border-radius: 20px;
   min-height: 280px;
   background: #102120;
   }

.lab-input h3,.lab-output h3 {
   font-size: 22px;
   margin: 18px 0 12px;
   }

.lab-input p,.lab-output p {
   font-size: 13px;
   color: #ced2ce;
   }

.paper-icon {
   position: relative;
   width: 68px;
   height: 80px;
   background: var(--paper);
   border-radius: 8px;
   margin-top: 25px;
   padding: 18px 13px;
   overflow: hidden;
   }

.paper-icon i {
   display: block;
   background: #a2a9a2;
   height: 2px;
   margin-bottom: 9px;
   }

.paper-icon i:nth-child(3){
  width:70%}
.lab-scan {
   position:absolute;
  left:0;
  right:0;
  top:6px;
  height:2px;
  background:var(--orange);
  opacity:0 }

.lab-chips {
   display:flex;
  gap:7px;
  margin-top:18px }
.lab-chips span {
   font-size:10px;
  border:1px solid #43504c;
  border-radius:7px;
  padding:4px 8px }

.lab-engine {
   text-align:center;
  min-width:0 }
.lab-engine svg {
   width:100%;
  max-width:260px;
  display:block;
  margin:auto }

.lab-orbit {
   fill:none;
  stroke:#67746f;
  stroke-width:1 }
.lab-core{
  fill:var(--orange)}
.lab-mark{
  stroke:var(--ink);
  stroke-width:3;
  fill:none}

.lab-engine>span{
  display:block;
  font-size:16px;
  margin-top:8px}
.engine-steps{
  display:flex;
  justify-content:center;
  gap:10px;
  font-size:9px;
  margin-top:17px;
  color:#ced2ce}
.engine-steps i{
  font-style:normal}

.output-check{
  font-size:42px;
  line-height:1;
  margin:28px 0;
  color:var(--orange)}
.review-line{
  font-size:10px;
  margin-top:26px;
  border-top:1px solid #43504c;
  padding-top:14px;
  display:flex;
  align-items:center;
  gap:7px}
.review-line i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange)}

.systems-canvas{
  background:var(--ash);
  display:grid;
  grid-template-columns:65px 1fr}
.workspace-rail{
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:center;
  padding:28px 0}
.workspace-rail b{
  font-size:23px;
  font-weight:500}
.workspace-rail>span{
  font-size:18px}
.workspace-main{
  padding:30px;
  min-width:0}
.workspace-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px}
.workspace-heading h3{
  font-size:25px;
  margin-top:7px}
.workspace-badge{
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 10px;
  font-size:10px}
.workspace-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px}
.workspace-column>span{
  font-size:11px;
  display:flex;
  justify-content:space-between;
  margin-bottom:13px}
.workspace-column>span b{
  font-weight:400;
  color:#56615b}
.workspace-task{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:15px;
  padding:20px;
  min-height:190px}
.task-dot{
  display:block;
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  margin-bottom:17px}
.workspace-task h3{
  font-size:19px;
  line-height:1.2}
.workspace-task p{
  font-size:12px;
  margin-top:10px;
  min-height:38px}
.task-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:20px;
  font-size:10px}
.task-bottom i{
  font-style:normal;
  font-size:17px}
.workspace-sync{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:30px auto 0;
  max-width:650px;
  gap:12px}
.sync-node{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 12px;
  font-size:10px;
  white-space:nowrap}
.sync-line{
  height:1px;
  background:var(--ink);
  flex:1;
  transform-origin:left}

.iot-canvas{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  background:var(--ink);
  color:var(--paper);
  padding:30px;
  gap:30px;
  align-items:center}
.sensor-map{
  min-width:0}
.map-caption{
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:9px}
.sensor-map>svg{
  width:100%;
  display:block;
  margin:24px 0 10px}
.floor-lines{
  stroke:#50615b;
  stroke-width:1.5;
  fill:none}
.sensor-wires{
  fill:none;
  stroke:var(--orange);
  stroke-width:1.5;
  stroke-dasharray:5 6}
.sensor-points{
  fill:var(--orange)}
.map-center{
  fill:var(--orange)}
.map-mark{
  fill:none;
  stroke:var(--ink);
  stroke-width:2.5}
.map-text{
  font-size:8px;
  fill:#acb9b2;
  font-family:monospace}
.map-key{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:10px;
  color:#cbd4cf}
.map-key i{
  height:5px;
  width:5px;
  border-radius:50%;
  background:var(--orange)}
.map-key span{
  margin-left:15px}
.telemetry-card{
  border:1px solid #43504c;
  border-radius:20px;
  padding:25px;
  background:#102120}
.telemetry-card h3{
  font-size:23px;
  margin:18px 0 8px}
.telemetry-card>p{
  font-size:13px;
  color:#cbd4cf}
.telemetry-value{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:22px}
.telemetry-value>span{
  font-size:56px;
  letter-spacing:-.05em}
.telemetry-value small{
  font-size:18px;
  color:#cbd4cf}
.signal-chart{
  width:100%;
  height:55px;
  stroke:var(--orange);
  stroke-width:2;
  fill:none}
.telemetry-result{
  border-top:1px solid #43504c;
  padding-top:17px;
  margin-top:16px}
.telemetry-result>span{
  font-size:9px;
  color:#cbd4cf}
.telemetry-result h4{
  font-size:16px;
  margin-top:6px}
.telemetry-result p{
  font-size:11px;
  margin-top:7px;
  color:#cbd4cf}

.capability-mini{
  height:85px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px}
.capability-mini span,.capability-mini b{
  font-size:10px;
  font-weight:400;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px}
.capability-mini b{
  background:var(--ember-wash);
  border-color:#e5aa90}
.capability-mini i{
  font-style:normal;
  font-size:13px}
.detail-grid article>.overline{
  color:#9e3619}

@media(max-width:1000px){
  .detail-lab{
  width:calc(100% - 48px)}
.ai-canvas{
  padding:25px;
  gap:16px}
.lab-input,.lab-output{
  padding:18px}
.lab-input h3,.lab-output h3{
  font-size:20px}
.workspace-main{
  padding:24px}
.workspace-columns{
  gap:12px}
.workspace-task{
  padding:15px}
.workspace-task h3{
  font-size:17px}
.iot-canvas{
  gap:20px;
  padding:24px}
.telemetry-card{
  padding:20px}
.capability-mini{
  gap:7px}
.capability-mini span,.capability-mini b{
  padding:8px;
  font-size:9px}
}

@media(max-width:700px){
  .detail-lab{
  width:calc(100% - 40px);
  margin-top:38px}
.lab-top{
  padding:22px 20px;
  flex-direction:column;
  align-items:start;
  gap:14px}
.lab-tabs{
  width:100%;
  justify-content:space-between;
  gap:4px}
.lab-tabs button{
  font-size:11px;
  padding:9px 12px}
.lab-bottom{
  padding:18px 20px;
  flex-wrap:wrap;
  gap:12px}
.lab-bottom p{
  font-size:10px}
.ai-canvas{
  grid-template-columns:1fr;
  padding:24px;
  gap:20px}
.lab-input,.lab-output{
  min-height:0;
  padding:22px}
.lab-input h3,.lab-output h3{
  font-size:23px}
.paper-icon{
  width:58px;
  height:65px;
  margin-top:18px;
  float:right;
  margin-left:15px}
.lab-engine svg{
  max-width:210px}
.lab-engine{
  padding:5px 0 14px}
.output-check{
  margin:18px 0;
  font-size:32px}
.systems-canvas{
  grid-template-columns:1fr}
.workspace-rail{
  display:none}
.workspace-main{
  padding:22px 18px}
.workspace-heading{
  align-items:start}
.workspace-heading h3{
  font-size:23px}
.workspace-badge{
  display:none}
.workspace-columns{
  grid-template-columns:1fr;
  gap:20px}
.workspace-task{
  min-height:0;
  padding:20px}
.workspace-task h3{
  font-size:21px}
.workspace-task p{
  min-height:0;
  font-size:13px}
.workspace-column>span{
  font-size:12px}
.workspace-sync{
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px}
.sync-node{
  font-size:8px;
  padding:7px}
.sync-line{
  min-width:5px}
.iot-canvas{
  grid-template-columns:1fr;
  padding:24px 20px;
  gap:25px}
.map-caption{
  font-size:8px}
.map-key{
  font-size:9px;
  gap:7px}
.map-key span{
  margin-left:5px}
.telemetry-card h3{
  font-size:24px}
.capability-mini{
  gap:8px;
  flex-wrap:wrap;
  height:auto;
  min-height:65px}
.capability-mini span,.capability-mini b{
  font-size:9px;
  padding:8px}
.detail-grid article{
  padding:25px}
}

.unique-canvas{
  padding:36px;
  background:var(--ash);
  min-height:430px;
  gap:32px;
  display:grid;
  grid-template-columns:1.1fr 1fr}
.unique-canvas h3{
  font-size:29px;
  line-height:1.15;
  margin:18px 0;
  letter-spacing:-.035em}
.unique-canvas p{
  font-size:13px}
.conversation-window{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:17px}
.conversation-top{
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:16px}
.conversation-avatar,.profile-avatar{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--ember-wash);
  font-size:22px}
.conversation-top b{
  font-size:14px;
  font-weight:500}
.conversation-top small{
  display:block;
  font-size:10px;
  margin-top:3px}
.chat-message{
  padding:13px 16px;
  border-radius:14px;
  max-width:90%}
.chat-message small{
  font-size:8px;
  display:block;
  margin-bottom:7px}
.customer-message{
  background:var(--ash);
  align-self:flex-end}
.assistant-message{
  background:var(--ink);
  color:var(--paper);
  align-self:flex-start}
.context-lookup{
  font-size:10px;
  display:flex;
  gap:9px;
  align-items:center;
  color:#6a4032}
.context-lookup>span{
  font-size:22px}
.handoff-panel{
  align-self:center}
.context-tile{
  display:flex;
  gap:15px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line)}
.context-tile>span{
  font-size:11px;
  color:#9e3619}
.context-tile b{
  font-size:15px;
  font-weight:500}
.context-tile p{
  margin-top:6px}
.handoff-result{
  display:flex;
  gap:12px;
  background:var(--ember-wash);
  border-radius:12px;
  padding:16px;
  font-size:12px;
  margin-top:25px}
.automation-canvas{
  display:block;
  background:var(--ink);
  color:var(--paper)}
.automation-heading h3{
  margin-bottom:26px}
.automation-flow{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px}
.automation-stage{
  background:#102120;
  border:1px solid #43504c;
  border-radius:18px;
  padding:23px}
.stage-icon{
  display:block;
  font-size:30px;
  color:var(--orange);
  margin-bottom:20px}
.automation-stage>small{
  font-size:9px;
  color:#cbd4cf}
.automation-stage h4{
  font-size:22px;
  line-height:1.2;
  margin:12px 0 21px}
.inbox-item,.agent-task{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #43504c;
  padding:12px 0;
  font-size:11px}
.agent-task i{
  font-style:normal;
  color:var(--orange)}
.approval-stage p{
  color:#cbd4cf}
.approval-ticket{
  background:var(--ember-wash);
  color:var(--ink);
  padding:15px;
  border-radius:12px;
  margin-top:24px;
  font-size:12px}
.approval-ticket span{
  display:block;
  font-size:9px;
  margin-top:7px}
.automation-footer{
  display:flex;
  gap:15px;
  align-items:center;
  max-width:650px;
  margin:28px auto 0;
  font-size:10px}
.automation-footer i{
  flex:1;
  height:1px;
  background:#69766f;
  transform-origin:left}
.crm-canvas{
  grid-template-columns:.95fr 1.05fr}
.crm-summary{
  padding:25px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px}
.crm-profile{
  display:flex;
  gap:14px;
  align-items:center;
  margin:27px 0}
.profile-avatar{
  width:52px;
  height:52px;
  font-size:17px}
.crm-profile b{
  font-size:17px;
  font-weight:500}
.crm-profile small{
  display:block;
  font-size:10px;
  margin-top:5px}
.profile-fact{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:11px}
.profile-fact b{
  font-weight:400}
.customer-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px}
.customer-tags span{
  font-size:9px;
  padding:5px 9px;
  border-radius:8px;
  background:var(--ember-wash)}
.crm-journey{
  padding:15px 0}
.crm-event{
  display:flex;
  gap:18px;
  margin-top:29px}
.crm-event>i{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  font-style:normal;
  font-size:10px}
.crm-event small{
  font-size:9px;
  color:#9e3619}
.crm-event h4{
  font-size:21px;
  line-height:1.2;
  margin:8px 0}
.crm-reminder{
  padding:17px;
  border-radius:12px;
  background:var(--ink);
  color:var(--paper);
  font-size:11px;
  margin-top:30px}
.integration-canvas{
  background:var(--ember-wash);
  grid-template-columns:1fr 1.2fr;
  align-items:center}
.integration-copy>p{
  max-width:400px}
.integration-log{
  margin-top:30px}
.integration-log>div{
  display:flex;
  gap:12px;
  border-top:1px solid #d7b8aa;
  padding:14px 0;
  font-size:10px}
.integration-log b{
  margin-left:auto;
  font-weight:400;
  font-size:8px}
.integration-map svg{
  display:block;
  width:100%}
.integration-wires{
  stroke:var(--ink);
  stroke-width:1.5;
  fill:none}
.integration-hub circle{
  fill:var(--orange)}
.integration-hub text{
  fill:var(--ink);
  font-size:20px}
.integration-node rect{
  fill:var(--paper);
  stroke:#c7ab9e}
.integration-node text{
  fill:var(--ink);
  font-size:13px}
.integration-map>span{
  display:block;
  text-align:center;
  font-size:8px;
  margin-top:20px;
  letter-spacing:.06em}

@media(max-width:1000px){
  .unique-canvas{
  padding:25px;
  gap:22px}
.unique-canvas h3{
  font-size:25px}
.automation-flow{
  gap:12px}
.automation-stage{
  padding:17px}
.automation-stage h4{
  font-size:19px}
.crm-summary{
  padding:20px}
.integration-log>div{
  gap:7px;
  font-size:9px}
}

@media(max-width:700px){
  .unique-canvas{
  padding:24px 20px;
  grid-template-columns:1fr;
  gap:28px}
.conversation-window{
  padding:17px}
.conversation-top b{
  font-size:12px}
.conversation-top small{
  font-size:8px}
.chat-message{
  max-width:95%;
  padding:13px}
.unique-canvas h3{
  font-size:27px}
.automation-flow{
  grid-template-columns:1fr;
  gap:17px}
.automation-stage{
  padding:22px}
.automation-stage h4{
  font-size:23px}
.automation-footer{
  gap:8px;
  font-size:8px}
.crm-summary{
  padding:20px}
.crm-event h4{
  font-size:20px}
.integration-log>div{
  font-size:9px}
.integration-log b{
  font-size:8px}
.integration-map{
  min-width:0}
.integration-map>span{
  font-size:7px}
}

.loyalty-canvas{
  background:var(--ember-wash);
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:55px}
.loyalty-phone{
  max-width:300px;
  width:100%;
  margin:auto;
  border:1px solid var(--ink);
  border-radius:28px;
  background:var(--paper);
  padding:23px}
.phone-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
  margin-bottom:30px}
.phone-top i{
  width:24px;
  height:5px;
  border-radius:8px;
  background:var(--ink)}
.loyalty-phone h3{
  font-size:27px;
  margin:10px 0}
.loyalty-phone>p{
  font-size:11px}
.member-pass{
  background:var(--ink);
  color:var(--paper);
  border-radius:16px;
  padding:19px;
  margin-top:23px}
.member-pass>span,.reward-coupon>span{
  font-size:8px;
  letter-spacing:.04em}
.member-pass>b{
  display:block;
  font-size:19px;
  font-weight:400;
  margin:10px 0 17px}
.visit-stamps{
  display:flex;
  gap:7px}
.visit-stamps i{
  width:30px;
  height:30px;
  border:1px solid #75817a;
  border-radius:50%;
  font-style:normal;
  font-size:22px;
  display:grid;
  place-items:center;
  color:var(--orange)}
.visit-stamps i:last-child{
  color:var(--paper);
  font-size:15px}
.member-pass small{
  display:block;
  font-size:8px;
  margin-top:16px;
  color:#cbd4cf}
.reward-coupon{
  border:1px solid var(--line);
  padding:17px;
  border-radius:14px;
  margin-top:17px}
.reward-coupon>b{
  display:block;
  font-size:17px;
  font-weight:400;
  margin:9px 0}
.reward-coupon p{
  font-size:10px}
.coupon-code{
  font-size:26px;
  letter-spacing:3px;
  margin-top:13px}
.phone-nav{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:20px;
  font-size:8px}
.loyalty-explainer>p{
  max-width:420px;
  font-size:15px}
.loyalty-event{
  display:flex;
  gap:17px;
  border-top:1px solid #d7b8aa;
  padding-top:20px;
  margin-top:24px}
.loyalty-event>i{
  font-size:10px;
  font-style:normal;
  margin-top:3px}
.loyalty-event b{
  font-size:17px;
  font-weight:400}
.loyalty-event p{
  margin-top:7px;
  font-size:13px}
.operations-summary{
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:25px;
  font-size:11px}

.equipment-canvas{
  background:var(--ink);
  color:var(--paper);
  align-items:center}
.machine-view svg{
  width:100%;
  display:block;
  margin:25px 0}
.machine-outline{
  fill:#102120;
  stroke:#7b8e83;
  stroke-width:1.5}
.machine-rotor{
  fill:none;
  stroke:#cbd4cf;
  stroke-width:2}
.machine-sensor{
  fill:var(--orange)}
.machine-link{
  fill:none;
  stroke:var(--orange);
  stroke-width:1.5}
.machine-view text{
  fill:#cbd4cf;
  font-size:8px}
.machine-caption{
  font-size:9px;
  letter-spacing:.07em}
.equipment-insights{
  padding:25px;
  border:1px solid #43504c;
  background:#102120;
  border-radius:20px}
.equipment-reading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  margin-top:24px}
.equipment-reading>b{
  font-size:42px;
  font-weight:400;
  letter-spacing:-.04em}
.equipment-reading small{
  font-size:13px;
  letter-spacing:0}
.vibration-wave{
  width:100%;
  height:65px;
  stroke:var(--orange);
  stroke-width:1.8;
  fill:none;
  margin:18px 0}
.equipment-fact{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:14px 0;
  border-top:1px solid #43504c;
  font-size:10px}
.equipment-fact b{
  font-weight:400;
  color:#cbd4cf}
.maintenance-note{
  padding:17px;
  background:var(--ember-wash);
  color:var(--ink);
  border-radius:12px;
  margin-top:18px}
.maintenance-note b{
  font-size:14px;
  font-weight:500}
.maintenance-note p{
  font-size:11px;
  margin-top:6px}
.alerts-canvas{
  background:var(--ash);
  align-items:center}
.threshold-chart{
  border:1px solid var(--line);
  background:var(--paper);
  padding:22px;
  border-radius:18px;
  margin:24px 0}
.threshold-chart>span{
  font-size:10px;
  color:#9e3619}
.threshold-chart svg{
  display:block;
  width:100%;
  margin:15px 0}
.threshold-line{
  stroke:#9e3619;
  stroke-width:1;
  stroke-dasharray:5 5;
  fill:none}
.threshold-signal{
  stroke:var(--ink);
  stroke-width:2;
  fill:none}
.threshold-point{
  fill:var(--orange)}
.threshold-chart>div{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  gap:15px}
.alert-trigger>p{
  font-size:13px}
.notification-card{
  padding:24px;
  background:var(--ink);
  color:var(--paper);
  border-radius:18px}
.notification-card>div{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 14px}
.notification-card i{
  font-size:20px;
  font-style:normal;
  background:var(--orange);
  color:var(--ink);
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center}
.notification-card h4,.response-card h4{
  font-size:23px}
.notification-card p{
  font-size:12px;
  color:#cbd4cf}
.notification-label{
  display:block;
  font-size:9px;
  margin-top:20px;
  border-top:1px solid #43504c;
  padding-top:14px}
.response-card{
  padding:24px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  margin-top:20px}
.response-card h4{
  margin:17px 0}
.response-step{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px;
  margin-top:15px}
.response-step i{
  font-style:normal;
  color:#9e3619;
  font-size:16px}

@media(max-width:1000px){
  .loyalty-canvas{
  gap:28px}
.loyalty-phone{
  padding:20px}
.visit-stamps{
  gap:5px}
.visit-stamps i{
  width:26px;
  height:26px}
.equipment-insights{
  padding:20px}
.equipment-fact{
  font-size:9px}
}

@media(max-width:700px){
  .loyalty-canvas{
  grid-template-columns:1fr;
  gap:35px}
.loyalty-phone{
  max-width:285px}
.loyalty-explainer h3{
  font-size:29px}
.loyalty-event b{
  font-size:16px}
.operations-summary{
  font-size:10px}
.equipment-reading>b{
  font-size:37px}
.equipment-fact{
  font-size:9px;
  gap:9px}
.machine-view svg{
  margin:15px 0}
.notification-card,.response-card{
  padding:21px}
.notification-card h4,.response-card h4{
  font-size:21px}
}