/* One shared RTL grid and motion vocabulary; extends the existing TELETEL design. */
:root {
  --site-max-width: 1240px;
  --page-gutter: clamp(48px, 5vw, 72px);
  --container: min(var(--site-max-width), calc(100% - var(--page-gutter) * 2));
  --section-space: clamp(120px, 10vw, 160px);
  --copy-width: 720px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-height: 88px;
  --frame-radius: 28px;
  --surface-dark: #080808;
  --surface-light: #f8f8f4;
}
html { scroll-padding-block-start: 88px; }
body { overflow-x: clip; }
.container, .site-container { width: var(--container); margin-inline: auto; }
main > section:not(.hero):not(.page-hero) { padding-block: var(--section-space); }
main > section { padding-inline: 0; }
main > section > .container { min-width: 0; }
.site-header {
  height: var(--header-height); padding-inline: max(var(--page-gutter), calc((100% - var(--site-max-width)) / 2));
  background: rgba(5,5,5,.12); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  border-color: transparent; gap: 24px;
  transition: background .6s var(--ease), height .6s var(--ease), border-color .6s var(--ease), backdrop-filter .6s var(--ease);
}
.site-header.is-scrolled { height: 68px; background: rgba(5,5,5,.93); border-color: rgba(255,255,255,.12); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.main-nav a { position: relative; padding-block: 8px; }
.main-nav a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.hero-layout { grid-template-columns: minmax(0,1fr); gap: 72px; padding-block-end: 96px; }
.hero { padding-block-start: calc(var(--header-height) + clamp(60px,8vw,120px)); }
.hero-copy { max-width: 850px; text-align: start; }
.hero h1 { font-size: clamp(3.4rem,6.7vw,6.5rem); line-height: 1.28; margin-block: 24px 32px; }
.hero h1 > span { display: block; overflow: clip; padding-block: .06em; margin-block: -.06em; }
.hero-line-inner { display: block; }
.hero h1 .outline-text .hero-line-inner { color: inherit; -webkit-text-stroke: inherit; }

/* The black/white source is never displayed. The SVG compositor retains the
   original antialiased 1px contour only at the boundary of the combined text
   alpha, removing every internal glyph stroke before applying the brand color. */
.outline-text {
  color: #fff;
  -webkit-text-stroke: 1px #000;
  letter-spacing: 0;
  filter: url(#teletel-arabic-outline);
}
.typography-filters { position: absolute; inline-size: 0; block-size: 0; pointer-events: none; }
.hero-lead { max-width: var(--copy-width); margin: 0; font-size: clamp(1.0625rem,1.4vw,1.25rem); line-height: 1.9; }
.hero-actions { margin-block-start: 32px; }
.hero-product { width: 100%; max-width: none; transform: none; transform-origin: center; }
.product-frame { width: 100%; transform: none; }
/* Preserve the faint ambient light without rasterizing large blur filters. */
.hero-glow, .network-aurora { opacity: .25; filter: none; }
.hero-glow { background: radial-gradient(ellipse,rgba(255,255,255,.07),transparent 72%); }
.network-aurora { background: radial-gradient(ellipse,rgba(255,255,255,.045),transparent 72%); }
.channel-marquee .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 24px; }
.channel-marquee .marquee-track > :nth-child(n+13) { display: none; }
.channel-marquee { padding-inline: var(--page-gutter); }
.manifesto-grid { display: block; }
.manifesto-copy { max-width: 850px; margin-block-start: 24px; }
.manifesto-copy h2 { max-width: 850px; }
.manifesto-points { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; margin-block-start: 64px; padding-block-start: 32px; border: 0; }
.manifesto-points::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px; background: var(--line-light); transform: scaleX(var(--shift-line,1)); transform-origin: right; }
.manifesto-points article { padding: 0; border: 0; }
.section-heading, .network-heading { display: block; max-width: 100%; margin-block-end: 56px; }
.section-heading > div, .network-heading > div { margin-block-end: 20px; }
.section-heading h2, .network-heading h2, .manifesto-copy h2, .workflow-intro h2, .sectors-copy h2, .origin-statement h2, .start-copy h2, .questions-title h2, .integration-showcase-heading h2, .customer-proof-copy h2 { margin-block: 20px 28px; max-width: 920px; line-height: 1.4; }
.section-heading > p, .network-heading > p, .manifesto-copy > p:not(.kicker), .integration-showcase-heading > p, .sectors-copy > p:not(.kicker), .start-copy > p:not(.kicker), .page-hero-copy > p:not(.kicker) { max-width: var(--copy-width); margin-inline: 0; line-height: 1.9; font-size: clamp(1rem,1.3vw,1.1875rem); }
.section-heading, .network-heading, .manifesto-copy, .integration-showcase-heading, .journey-heading, .workflow-intro, .start-copy, .page-hero-copy { direction: rtl; text-align: start; }
.section-index[dir="ltr"], .eyebrow { width: fit-content; max-width: 100%; margin-inline-end: 0; }
.section-index + .kicker { margin-block-start: 20px; }
.kicker + h2 { margin-block-start: 20px; }
.integration-showcase-heading { max-width: none; margin-inline: 0; text-align: start; }
.integration-showcase-footer { margin-block-start: 32px; }
.customer-proof-layout { gap: 64px; }
.customer-proof-logo { clip-path: inset(0); }
.brand-tile, .bento, .sector-list article { transition: border-color .35s var(--ease), background .35s var(--ease); }
.brand-tile:hover, .bento:hover { transform: none; box-shadow: none; border-color: #888; }
.brand-tile img { transition: transform .45s var(--ease), opacity .45s var(--ease); }
.brand-tile:hover img { transform: translateY(-4px); opacity: .75; }
.button { transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.button:hover { transform: none; }
.button-arrow, .arrow-link > span, .sector-list article > b { display: inline-block; transition: transform .4s var(--ease); }
.button:hover .button-arrow, .arrow-link:hover > span, .sector-list article:hover > b { transform: translate(-4px,3px); }
.sectors-copy .arrow-link { margin-block-start: 32px; }
.origin-layout { grid-template-columns: 1fr; gap: 48px; }
.origin-copy { max-width: none; }
.origin-reasons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.start-panel { padding: 0; background: transparent; border: 0; gap: 72px; align-items: start; }
.start-copy { padding: 0; }
.start-steps { padding: 0; border: 0; }
.faq-list details { overflow: hidden; }
.faq-list summary b { transition: transform .38s var(--ease); }
.faq-list details[open] summary b { transform: rotate(45deg); }
.faq-list details > p { line-height: 1.9; }
.footer-top, .footer-bottom { padding-inline: 0; }
.motion-toggle { color: #bbb; background: transparent; border: 1px solid #555; padding: 8px 14px; font: inherit; font-size: .875rem; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
/* Legacy opacity/transform transitions fought GSAP and could leave its target
   at an intermediate opacity. Each entrance now has exactly one animator. */
.reveal { opacity: 1; transform: none; transition: border-color .35s var(--ease), background-color .35s var(--ease); }
.reveal-delay { transition-delay: 0s; }

/* Round only the outer surfaces of the main frames. Child UI geometry stays
   unchanged and is clipped to the same curve, including animated layers. */
.product-frame,
.platform-screen,
.network-shell,
.demo-form-panel,
.analytics-snapshot,
.efficiency-board,
.supervisor-console,
.billing-panel,
.before-after,
.capability-cluster,
.capability-expansion,
.customer-proof-card,
.employee-bots-panel {
  border-radius: var(--frame-radius);
  overflow: hidden;
}
.product-shadow-card { border-radius: var(--frame-radius); }
/* Retain horizontal table scrolling while rounding its outer boundary. */
.table-scroll { border-radius: var(--frame-radius); }
.capability-cluster:not(.capability-cluster-dark) .cluster-link { border-color: var(--line-light); }

/* Structural graphics: the existing sphere remains; the path explains the flow. */
.network-shell { position: relative; height: 620px; min-height: 620px; padding: 0; overflow: hidden; margin-block-start: 48px; }
.network-story.is-scroll-story { height: 160vh; }
.network-story.is-scroll-story .network-shell { position: sticky; inset-block-start: 90px; height: min(620px,calc(100svh - 120px)); min-height: 460px; }
.network-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.network-flow path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.network-flow .flow-base { stroke: #292929; }
.network-flow .flow-active { stroke: #bababa; }
.network-canvas { opacity: .55; }
.network-node { left: auto; top: auto; inset-inline-start: var(--flow-x); inset-block-start: var(--flow-y); transform: translate(50%,-50%); min-width: 0; width: 186px; padding: 12px; animation: none; box-shadow: none; backdrop-filter: none; background: #090909; }
.network-node div b { font-size: 13px; }
.network-node div small { font-size: 9px; }
.network-core { top: auto; left: auto; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(50%,-50%); width: 180px; height: 180px; pointer-events: none; }
.network-core::before { box-shadow: none; animation: none; opacity: .3; }
.core-orbit { animation: none; opacity: .22; }
.core-orbit::after, .network-signal { display: none; }
.core-label { font-size: clamp(18px,2.3vw,28px); }
.network-layers { margin-block-start: 48px; }

/* Desktop product story: one stable interface, four softly changing states. */
.platform .platform-sticky { width: 100%; }
.platform.is-scroll-story { height: 300vh; padding-block: 0; }
.platform.is-scroll-story .platform-sticky { position: sticky; inset-block-start: 68px; min-height: calc(100svh - 68px); padding-block: 28px; }
.platform.is-scroll-story .section-heading { margin-block-end: 20px; }
.platform.is-scroll-story .section-heading > div { margin-block-end: 8px; }
.platform.is-scroll-story .section-heading h2 { font-size: clamp(1.9rem,3vw,3rem); margin-block: 8px 12px; }
.platform.is-scroll-story .section-heading > p { font-size: 1rem; line-height: 1.7; }
.platform.is-scroll-story .section-index { font-size: .75rem; }
.platform.is-scroll-story .kicker { margin-block: 8px; }
.platform-tabs { margin-block: 24px; }
.platform-screen.is-layered { display: grid; }
.platform-screen.is-layered .screen-chrome { grid-area: 1 / 1; }
.platform-screen.is-layered .screen-view { grid-area: 2 / 1; min-height: 0; height: clamp(320px,43vh,490px); overflow: hidden; }
.platform-screen.is-layered .screen-view:not(.is-active) { pointer-events: none; }
.platform-screen.is-layered .screen-view[data-panel="conversations"] { display: grid; }
.platform-screen.is-layered .screen-title-row { margin-block-end: 18px; }
.platform-screen.is-layered .screen-content, .platform-screen.is-layered .screen-insight, .platform-screen.is-layered .screen-nav { padding: 22px; }
.platform-screen.is-layered .table-row { min-height: 48px; }
.platform-screen.is-layered .followup-board, .platform-screen.is-layered .report-view, .platform-screen.is-layered .rules-view { padding: 24px; }
.platform-screen.is-layered .bar-chart { height: 100px; }
.platform-screen.is-layered .metric-row article { padding: 14px; }
.platform-screen.is-layered .metric-row b { font-size: 2rem; }
.platform-screen.is-layered .flow-canvas { min-height: 130px; margin-block: 16px; }
.platform-screen.is-layered .flow-canvas article { padding: 16px 12px; }

/* A separate, vertical reading rhythm for HOW IT WORKS. */
.workflow-layout { display: grid; grid-template-columns: .4fr 1fr; gap: 80px; margin-block-start: 64px; align-items: start; }
.workflow-counter { position: sticky; inset-block-start: 34vh; font: 400 clamp(6rem,15vw,13rem)/1 Arial,sans-serif; color: #eee; letter-spacing: -.07em; }
.workflow-counter::after { content: ''; display: block; width: 60px; height: 1px; margin-block-start: 28px; background: #777; }
.workflow-track { display: flex; flex-direction: column; border: 0; margin: 0; }
.workflow-track article { min-height: 38vh; padding: 40px 0; border: 0; border-block-start: 1px solid #333; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.workflow-track article > span { font-family: "Tajarib", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; font-size: .875rem; }
.workflow-track article > small { display: block; margin-block: 16px; }
.workflow-track article > h3 { font-size: clamp(1.8rem,3.2vw,3rem); margin-block: 20px; }
.workflow-track article > p { max-width: 560px; font-size: 1.125rem; line-height: 1.9; }
.workflow-track article::after { display: none; }
.workflow.is-scroll-story .workflow-track article { opacity: .26; transform: translateY(20px); }
.workflow.is-scroll-story .workflow-track article.is-current { opacity: 1; transform: none; }
.journey-mini { position: relative; display: flex; justify-content: space-between; gap: 8px; padding-block: 28px 0; }
.journey-mini > i { display: none; }
.journey-mini > span { background: none; padding: 0; z-index: 1; }
.mini-journey-svg { position: absolute; inset-inline: 0; inset-block-start: 8px; width: 100%; height: 12px; overflow: visible; }
.mini-journey-svg path { fill: none; stroke: #ccc; stroke-width: 1; }
.mini-journey-svg .mini-progress { stroke: #111; }
.mini-journey-svg circle { fill: #111; }
@media (max-width: 1100px) {
  :root { --page-gutter: clamp(32px,4.5vw,48px); --section-space: 96px; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero h1 { font-size: clamp(3rem,7.5vw,5.5rem); }
  .hero-product .customer-panel { display: none; }
  .hero-product .product-body { grid-template-columns: 150px 220px minmax(0,1fr); }
  .manifesto-points { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }
  .network-node { width: 150px; gap: 8px; }
  .network-node .node-code { width: 26px; font-size: 11px; }
  .network-node div b { font-size: 11px; }
  .start-panel { gap: 40px; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 24px; --section-space: 72px; --header-height: 76px; }
  .site-header { padding-inline: var(--page-gutter); }
  .site-header.is-scrolled { height: 64px; }
  .main-nav { padding-inline: var(--page-gutter); }
  .hero-layout { gap: 48px; padding-block-end: 64px; }
  .hero { padding-block-start: 132px; }
  .hero h1 { font-size: clamp(2.65rem,10vw,4rem); line-height: 1.4; }
  .hero-lead { font-size: 1.0625rem; }
  .hero-product { width: 100%; max-width: 100%; }
  .hero-product .product-body { display: block; }
  .hero-product .product-sidebar, .hero-product .conversation-list, .hero-product .customer-panel { display: none; }
  .hero-product .chat-panel { min-height: 360px; }
  .hero-product .product-search { display: none; }
  .hero-product .product-topbar { padding-inline: 16px; }
  .section-heading h2, .network-heading h2, .manifesto-copy h2, .workflow-intro h2, .origin-statement h2, .start-copy h2 { font-size: clamp(2rem,8vw,3rem); }
  .manifesto-points { gap: 32px 24px; }
  .manifesto-points article p { font-size: 1rem; }
  .customer-proof-layout, .start-panel, .origin-reasons, .sectors-layout, .questions-layout { grid-template-columns: 1fr; gap: 36px; }
  .network-story.is-scroll-story { height: auto; }
  .network-shell, .network-story.is-scroll-story .network-shell { height: 860px; min-height: 860px; position: relative; inset-block-start: auto; margin-block-start: 32px; display: block; padding: 0; }
  .network-node { width: 130px; padding: 10px 8px; }
  .network-node div small { display: none; }
  .network-node div b { font-size: 10px; }
  .network-node .node-code { width: 21px; height: 24px; font-size: 10px; }
  .network-core { width: 150px; height: 150px; }
  .network-core .core-label { font-size: 18px; }
  .network-meta { display: none; }
  .network-layers { grid-template-columns: 1fr; }
  .network-layers article { padding-inline: 0; }
  .platform-tabs { display: none; }
  .platform-screen { border: 0; background: transparent; }
  .platform-screen .screen-chrome { margin-block-end: 24px; border: 1px solid #555; }
  .platform-screen .screen-view { display: block !important; min-height: 0; height: auto; padding: 0; margin-block: 0 40px; border: 1px solid #333; opacity: 1; visibility: visible; }
  .screen-view[data-panel="conversations"] .screen-content { padding: 24px 16px; }
  .screen-view .screen-title-row { flex-wrap: wrap; gap: 12px; }
  .screen-view .screen-nav, .screen-view .screen-insight { display: none; }
  .screen-view .screen-title-row h3 { font-size: 1.4rem; }
  .screen-view .followup-board, .screen-view .report-view, .screen-view .rules-view { padding: 24px 16px; }
  .screen-view .followup-board { grid-template-columns: 1fr; }
  .screen-view .followup-board article { padding: 20px 0; border: 0; border-block-start: 1px solid #ddd; }
  .screen-view .metric-row, .screen-view .report-grid { grid-template-columns: 1fr; }
  .screen-view .metric-row article { padding: 20px; }
  .screen-view .flow-canvas { flex-direction: column; padding: 0; }
  .screen-view .flow-canvas article { width: 100%; }
  .screen-view .flow-canvas > i { transform: rotate(-90deg); }
  .workflow-layout { grid-template-columns: 1fr; gap: 24px; }
  .workflow-counter { display: none; }
  .workflow-track article { min-height: 0; padding-block: 40px; opacity: 1 !important; transform: none !important; }
  .start-steps article { padding-inline: 0; }
  .page-hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .page-hero { padding-inline: 0; }
}
@media (max-width: 380px) { :root { --page-gutter: 20px; } .network-node { width: 118px; } }
.motion-paused .is-scroll-story { height: auto !important; }
.motion-paused .platform-sticky, .motion-paused .network-story .network-shell { position: relative !important; inset-block-start: auto !important; }
.motion-paused .workflow-track article { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .is-scroll-story { height: auto !important; }
  .platform-sticky, .network-story .network-shell { position: relative !important; inset-block-start: auto !important; }
  .workflow-track article { opacity: 1 !important; transform: none !important; }
}
.platform-screen.is-layered { min-height: 0; box-shadow: none; }
.screen-view.is-active { animation: none; }
.platform.is-stacked .platform-tabs { display: none; }
.platform.is-stacked .screen-view { opacity: 1; visibility: visible; margin-block-end: 32px; }
.platform.is-stacked .platform-screen { min-height: 0; }
.sector-list article:hover { padding-inline: 0; }
@media(max-width:760px) {
  #view-conversations, .screen-view .followup-board, .screen-view .report-view, .screen-view .rules-view { width: 100%; transform: none; margin: 0; }
  .screen-view .conversation-table { overflow-x: auto; }
  .screen-view .table-row { grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 16px; }
  .screen-view .table-row.table-head { display: none; }
  .screen-view .table-row > span { min-width: 0; white-space: normal; }
  .screen-view .table-row > span:first-child { grid-column: 1 / -1; }
  .screen-view .table-row > span:nth-child(n+3) { display: block; }
  .screen-view .flow-canvas { display: flex; }
  .screen-view .rule-summary { flex-direction: column; align-items: start; }
}
/* Sticky stories need an unclipped ancestor; clip only their graphic surface. */
.network, .platform, .customer-journey { overflow: visible; }
.network-node { direction: rtl; }
.network-node > div { min-width: 0; direction: ltr; text-align: start; }
.network-node div b { white-space: normal; overflow: visible; text-overflow: clip; }
main > section.platform.is-scroll-story, main > section.customer-journey.is-scroll-story { padding-block: 0; }
/* Keep every product state fully readable inside the shared showcase frame. */
.platform-screen.is-layered .followup-board, .platform-screen.is-layered .report-view, .platform-screen.is-layered .rules-view { min-height: 0; height: 100%; }
.platform-screen.is-layered .followup-board article { min-height: 0; padding: 18px; }
.platform-screen.is-layered .followup-board article strong { margin-block: 24px 12px; font-size: 52px; }
.platform-screen.is-layered .report-view { gap: 10px; }
.platform-screen.is-layered .metric-row article { min-height: 112px; }
.platform-screen.is-layered .screen-insight h3 { font-size: 20px; margin-block: 10px 16px; }
.platform-screen.is-layered .insight-card { padding-block: 10px; }
.platform-screen.is-layered .screen-insight > button { margin-block-start: 14px; }
.platform-screen.is-layered #view-conversations { grid-template-columns: 170px minmax(0,1fr) 220px; }
.platform-screen.is-layered .table-row { gap: 12px; grid-template-columns: 1.15fr 1fr 1.05fr 1.25fr .5fr; padding-inline: 12px; }
.platform-screen.is-layered .table-row > span { min-width: 0; white-space: normal; font-size: 12px; }
.platform-screen.is-layered .screen-title-row h3 { font-size: 24px; }
.platform.is-scroll-story .section-heading { position: relative; z-index: 2; transform: translateZ(0); }
@media(max-width:1100px) and (min-width:761px) { .platform-screen.is-layered #view-conversations { grid-template-columns: 150px minmax(0,1fr); } }
.manifesto-points article { display: block; min-width: 0; }
.manifesto-points h3 { margin-block: 16px; }
.channel-marquee .marquee-track { width: 100%; }
@media(max-width:760px) {
  .network-node { position: absolute; transform: translate(50%,-50%); }
  .screen-view .followup-board, .screen-view .report-view, .screen-view .rules-view { min-height: 0; }
  .screen-view .followup-board article { min-height: 0; }
  .screen-view .followup-board article strong { margin-block: 16px; font-size: 44px; }
  .screen-view .followup-board article p, .screen-view .flow-canvas article p { font-size: 14px; }
  .screen-view .metric-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .screen-view .metric-row article { min-height: 0; padding: 14px; }
  .screen-view .metric-row b { font-size: 30px; }
  .screen-view .metric-row span, .screen-view .metric-row small { font-size: 12px; }
  .screen-view .report-grid { gap: 20px; }
  .screen-view .flow-canvas article { min-height: 0; }
}
.platform.is-stacked .screen-view { background: #eeeeea; color: #111; }
@media(max-width:760px) { .journey-number { text-align: end; } }
.origin-copy { padding-block-start: 0; }
.origin-reasons article { display: block; min-width: 0; }
.origin-reasons h3 { margin-block: 16px; }
.origin-reasons span { font-size: .875rem; }
.hero-product .message { font-size: 13px; line-height: 1.8; }
.hero-product .chat-stage-line { font-size: 11px; }
@media(max-width:760px) {
  .sectors-copy, .industries-intro, .demo-intro { position: static; }
  .screen-view .rule-summary { display: flex; font-size: 14px; }
}
.platform-screen.is-layered .flow-canvas { padding: 16px; }
.platform-screen.is-layered .flow-canvas article { min-height: 100px; box-shadow: none; }
.product-frame::after, .network-meta i, .network-node > i, .orbit-ring { animation: none; }

/* One-shot reveals are prepared near the viewport and leave no inline styles. */
[data-motion-pending="support"], [data-motion-pending="text"] { opacity: 0; }
[data-motion-pending="logo"] { clip-path: inset(0 100% 0 0); }
@media(max-width:760px) {
  .site-header.is-scrolled { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(5,5,5,.97); }
}
@media(prefers-reduced-motion:reduce) {
  [data-motion-pending] { opacity: 1; clip-path: none; }
}

/* One radius for every framed surface, including the nested product UI. */
:is(
  .bento, .brand-tile, .plan-card, .recommended,
  .integration-card, .solution-card, .cycle-card, .report-card, .ai-card,
  .contact-option, .availability-note, .engine-rule, .empty-filter,
  .ai-card-grid, .automation-grid, .control-grid, .governance-grid,
  .report-grid, .outcome-grid, .stakeholder-grid, .method-grid,
  .principles-grid, .contact-option-grid, .cycle-grid, .example-track, .sla-flow,
  .automation-grid > article, .control-grid > article, .governance-grid > article,
  .outcome-grid > article, .stakeholder-grid > article, .method-grid > article,
  .principles-grid > article, .example-track > article, .sla-flow > article,
  .before-after > article, .comparison-mark,
  .product-topbar, .product-search, .product-sidebar, .sidebar-item,
  .channel-stack > span, .conversation-list, .conversation-card, .chat-panel,
  .message, .composer, .composer > b, .customer-panel, .customer-note,
  .network-node, .node-code, .signal-sources > span, .signal-targets > span,
  .screen-chrome, .screen-view, .screen-nav, .screen-nav > a,
  .screen-content, .screen-insight, .screen-title-row > span,
  .conversation-table, .table-row.selected, .table-row.table-head,
  .insight-card, .followup-board > article, .metric-row > article,
  .chart-card, .team-card, .flow-canvas, .flow-canvas > article, .rule-summary,
  .channel-map > span, .mini-routing > span, .sla-meter,
  .followup-mini > span, .role-list > span, .api-code,
  .snapshot-metrics, .snapshot-metrics > div,
  .supervisor-actions > span, .console-critical, .console-row > em,
  .console-footer, .console-footer > div,
  .platform-tabs, .filter-buttons, .billing-toggle,
  .status-chip, .launch-badge, .demo-plan-tag, .demo-signal > span,
  .customer-first, .channel-choices label > span,
  .button, .menu-toggle, .motion-toggle
) { border-radius: var(--frame-radius); }

/* Clip filled nested panels at all four corners, without creating new layouts.
   Price badges keep their existing position outside the pricing card. */
:is(
  .ai-card-grid, .automation-grid, .control-grid, .governance-grid,
  .report-grid, .outcome-grid, .stakeholder-grid, .method-grid,
  .principles-grid, .contact-option-grid, .cycle-grid, .example-track, .sla-flow,
  .product-topbar, .product-sidebar, .conversation-list, .conversation-card,
  .chat-panel, .customer-panel, .screen-chrome, .screen-view, .screen-nav,
  .screen-content, .screen-insight, .flow-canvas, .snapshot-metrics,
  .console-footer, .platform-tabs, .filter-buttons, .billing-toggle,
  .network-node
) { overflow: hidden; }
.conversation-table { border-radius: var(--frame-radius); overflow: auto; }

/* Keep native field behavior and existing field dimensions and padding. */
.demo-form :is(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea),
.integration-search input,
button {
  border-radius: var(--frame-radius);
}

/* The obsolete scaled-preview margin was cutting off the lower mobile corners.
   The preview keeps its dimensions and now occupies its actual layout height. */
.hero-product { margin-block-end: 0; }

/* The white form ends above the dark submission area. Round that actual
   surface, keeping the original field spacing and submission area dimensions. */
.demo-form-panel { padding: 0; background: transparent; }
.demo-form-surface {
  padding: 48px 48px 0;
  background: var(--paper);
  color: var(--black);
  border-radius: var(--frame-radius);
  overflow: hidden;
}
.demo-submit { margin: 0; }
@media (max-width: 760px) {
  .demo-form-surface { padding: 30px 20px 0; }
}

/* Filled Arabic glyphs avoid visible joining seams in the outlined title. */
.network-heading h2 span { color: var(--white); -webkit-text-stroke: 0; }

/* The header's backdrop filter contains fixed descendants. Give the mobile
   menu an explicit viewport height so its opaque background covers every link. */
@media (max-width: 1180px) {
  .site-header { --menu-header-height: var(--header-height); }
  .site-header.is-scrolled { --menu-header-height: 68px; }
  body.menu-open .site-header { background: #050505; }
  .main-nav.is-open {
    position: absolute;
    inset: auto;
    inset-inline: 0;
    inset-block-start: calc(100% + 1px);
    box-sizing: border-box;
    height: calc(100vh - var(--menu-header-height));
    height: calc(100dvh - var(--menu-header-height));
    padding-block: 20px max(32px, env(safe-area-inset-bottom));
    padding-inline: var(--page-gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #050505;
    color: #fff;
  }
  .main-nav.is-open a {
    flex: 0 0 auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    padding-block: 16px;
    padding-inline: 0;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    line-height: 1.6;
    text-align: start;
    border-color: rgba(255,255,255,.16);
  }
  .main-nav.is-open a:focus-visible,
  .menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
}
@media (max-width: 760px) {
  .site-header.is-scrolled { --menu-header-height: 64px; }
}

/* Marketing card color system. Explicit tones follow reading order, not visual
   grid columns, so the same sequence survives every responsive breakpoint.
   Pricing starts light to retain the existing featured second plan. Product UI,
   timelines, the quiet logo wall and form surfaces retain their own hierarchy. */
.color-card[data-card-tone="dark"] {
  --card-surface: var(--surface-dark);
  --card-ink: #fff;
  --card-muted: #ababaa;
  --card-line: #383838;
  --card-line-hover: #707070;
  --card-inset: #1c1c1c;
  --card-logo-filter: grayscale(1) brightness(0) invert(1);
}
.color-card[data-card-tone="light"] {
  --card-surface: var(--surface-light);
  --card-ink: #080808;
  --card-muted: #62625e;
  --card-line: #d1d1cc;
  --card-line-hover: #92928c;
  --card-inset: #eaeae5;
  --card-logo-filter: grayscale(1) brightness(0);
}
article.color-card[data-card-tone] {
  background: var(--card-surface);
  color: var(--card-ink);
  border-color: var(--card-line);
}
.color-card[data-card-tone]:is(:hover, :focus-within) { border-color: var(--card-line-hover); }
.color-card[data-card-tone] :is(h2, h3, h4) { color: var(--card-ink); }
.color-card[data-card-tone] :is(p, li, small, .bento-number, .integration-type),
.color-card[data-card-tone] > span:not(.recommended, .status-chip),
.color-card[data-card-tone] .plan-head > span,
.color-card[data-card-tone] :is(.ai-card-head, .cluster-head, .solution-card-top) > span:not(.status-chip) {
  color: var(--card-muted);
}
.color-card[data-card-tone] :is(li, .cluster-body, .cluster-link, .plan-price, .spark-bars, .role-list span, .mini-routing span, .followup-mini span),
.color-card[data-card-tone] > a:not(.button) {
  border-color: var(--card-line);
}
.color-card[data-card-tone] li::marker { color: var(--card-muted); }
.color-card[data-card-tone] .status-chip {
  background: transparent;
  color: var(--card-ink);
  border-color: var(--card-line-hover);
}
.color-card[data-card-tone] .status-core {
  background: var(--card-ink);
  color: var(--card-surface);
  border-color: var(--card-ink);
}
.color-card[data-card-tone] .status-provider { background: var(--card-inset); }
.color-card[data-card-tone] .integration-icon.has-brand {
  background: var(--card-surface);
  border-color: var(--card-line);
}
.color-card[data-card-tone] .integration-icon.has-brand img { filter: var(--card-logo-filter); }
.color-card[data-card-tone] .button-outline-dark {
  color: var(--card-ink);
  border-color: var(--card-ink);
  background: transparent;
}
.color-card[data-card-tone] .button-outline-dark:is(:hover, :focus-visible) {
  background: var(--card-ink);
  color: var(--card-surface);
}
.color-card[data-card-tone] :is(a, button):focus-visible {
  outline: 2px solid var(--card-ink);
  outline-offset: 4px;
}

/* Miniatures inherit the card's palette without changing their layout/motion. */
.color-card[data-card-tone] :is(.mini-flow, .followup-mini span) { color: var(--card-muted); }
.color-card[data-card-tone] :is(.mini-flow i, .sla-meter > i) { background: var(--card-line); }
.color-card[data-card-tone] .mini-flow b {
  background: var(--card-ink);
  color: var(--card-surface);
}
.color-card[data-card-tone] .followup-mini b { color: var(--card-ink); }
.color-card[data-card-tone] .sla-meter {
  color: var(--card-ink);
  background: var(--card-inset);
  border-color: var(--card-line);
}
.color-card[data-card-tone] :is(.sla-meter em, .spark-bars i) { background: var(--card-ink); }

/* A single paper tone across the editorial sections. Adjacent sections in the
   same chapter have a quiet divider instead of unrelated off-white shades. */
.customer-proof, .integration-showcase {
  background: var(--paper);
  border-color: var(--line-light);
}
.customer-journey { --journey-paper: var(--paper); }
main > .light-section + .light-section,
.start + .questions { box-shadow: inset 0 1px var(--line-light); }
main > .dark-section + .dark-section { box-shadow: inset 0 1px var(--line-dark); }
.hero-product .product-demo-note,
.platform .section-heading .product-demo-note {
  color: rgba(255, 255, 255, .62);
  font-size: .875rem;
  line-height: 1.8;
}
.hero-product .product-demo-note { margin-block: 16px 0; }

.demo-readiness {
  margin-block-start: 36px;
  padding-block-start: 28px;
  border-block-start: 1px solid rgba(255, 255, 255, .16);
}
.demo-readiness h2 { margin: 0 0 20px; font-size: 1.25rem; line-height: 1.6; }
.demo-readiness dl { margin: 0; display: grid; gap: 20px; }
.demo-readiness dt { font-size: 1rem; font-weight: 700; line-height: 1.7; }
.demo-readiness dd { margin: 6px 0 0; color: rgba(255, 255, 255, .68); font-size: .9375rem; line-height: 1.9; }