/* Product chapter. Device frames share a scene, stage changes happen inside them. */
.oct-continuation #product {
  --ink: #081a34;
  --muted: #506580;
  --hairline: #9cb4cf66;
  --surface: #f7faff;
  position: relative;
  min-height: auto;
  color: var(--ink);
  font-family: var(--page-font);
  isolation: isolate;
  background: radial-gradient(ellipse at 15% 63%, #d7e7ff, transparent 54%), var(--surface);
}
#product::before {
  content: "";
  position: absolute; z-index: -1; inset: 0 0 auto;
  height: clamp(230px, 22vw, 370px); pointer-events: none;
  mask-image: linear-gradient(#000 0 62%,transparent);
  background: linear-gradient(to bottom, #030710, transparent 10%),
    linear-gradient(to bottom, transparent 14%, #f7faff35 38%, #f7faffc9 70%, #f7faff),
    url("assets/product-horizon.webp") center top / 100% 100% no-repeat;
}
#product > .wrap {
  width: min(1480px, calc(100% - 2 * var(--gutter)));
  padding: clamp(125px,10vw,165px) 0 clamp(48px,5vw,78px);
}
#product h2 {
  font: 500 clamp(48px,5.3vw,84px)/1.01 var(--page-font);
  letter-spacing: -.06em;
  margin: 0;
}
#product h2 em {
  font-style: normal;
  color: #4274bc;
  background: linear-gradient(95deg,#275eaa,#638dbd 80%,#748da9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#product .productgrid {
  display: grid;
  grid-template-columns: minmax(0,41fr) minmax(0,59fr);
  align-items: center;
  gap: clamp(28px,4vw,68px);
  margin: clamp(34px,3.4vw,55px) 0;
}
#product .servicegrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
#product .service {
  padding: clamp(15px,1.45vw,25px);
  border: 0;
  border-top: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  background: radial-gradient(ellipse at 0 0, #9dc6ff30, transparent 75%) no-repeat;
  background-size: 0 0;
  transition: background-color .35s, color .35s;
}
#product .service:nth-child(3n) { border-right:0; }
#product .service:nth-last-child(-n+3) { border-bottom:1px solid var(--hairline); }
#product .service:hover { background-color:#dfedff; color:#174e98; }
#product .ico { width:26px; height:26px; color:#356eb1; }
#product .service h3 { font:600 clamp(16px,1.23vw,21px)/1.17 var(--page-font); letter-spacing:-.035em; margin:19px 0 8px; }
#product .service p { font:450 clamp(13px,.99vw,16px)/1.48 var(--page-font); color:var(--muted); margin:0; }
#product .endnote { border-top:1px solid var(--hairline); margin:0; padding:22px 0 0; }
#product .endnote strong { font-weight:550; font-size:clamp(19px,1.7vw,28px); letter-spacing:-.04em; }
#product .endnote small { color:var(--muted); font-size:clamp(13px,1.05vw,17px); }
.aux-demo { width:100%; max-width:610px; min-width:0; }
.aux-demo button { font:inherit; border:0; cursor:pointer; }
/* Both devices use the scene width as their scale, including their interior UI. */
.aux-devices { container-type:inline-size; position:relative; aspect-ratio:1.43; perspective:1400px; }
.aux-web {
  position:absolute; left:1%; top:3%; width:79%; aspect-ratio:1.55;
  display:flex; flex-direction:column; padding:.42em .42em .72em;
  font-size:2.2cqw; border-radius:1.05em;
  background:linear-gradient(125deg,#76808b,#292e35 8%,#13161c 50%,#575f68);
  border:1px solid #35404b; box-shadow:inset 0 1px 0 #cbd1d7,0 1.8em 2.8em -2em #163454b0;
  transform:rotateY(3deg);
}
.aux-web::after {
  content:""; position:absolute; bottom:-.75em; left:-5%; width:110%; height:.85em;
  border-radius:2% 2% 8% 8% / 18% 18% 85% 85%;
  background:linear-gradient(90deg,#738496,#e2eaf0 9%,#aebcca 40%,#8897a8 52%,#dae2e8 84%,#7b8a97);
  box-shadow:inset 0 -.24em .2em #5062747a,0 .44em .65em #0b223e35;
}
.oct-lens { width:.36em;height:.36em;margin:0 auto .26em;border-radius:50%;background:#0c172c; }
.aux-shell {
  flex:1; min-height:0; border-radius:.55em; padding:1.05em 1.25em;
  background:linear-gradient(160deg,#091120 18%,#101f39 60%,#123360);
  color:#eff6ff; display:flex; flex-direction:column; position:relative; isolation:isolate;
}
.aux-shell::before {
  content:"";position:absolute;inset:45% 0 0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg,#102039 0%,#10203900 60%),
    linear-gradient(90deg,#09182a 10%,#0b1a3030 90%),url("assets/product-horizon.webp") center / cover;
  opacity:.52;
}
.aux-nav { display:flex;align-items:center;gap:1em;padding-bottom:.8em;border-bottom:1px solid #acc5e42b; }
.demo-wordmark { display:flex;align-items:center;margin-right:auto;width:7.2em;height:1.05em;color:#eff6ff;line-height:1; }
.aux-nav button { color:#c2d4eb;background:transparent;padding:.25em 0;font-size:.79em; }
.aux-display { position:relative;flex:1;min-height:0;margin-top:1em; }
.aux-screen { position:absolute;inset:0 10% 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:.55em;
  transition:opacity .38s ease,transform .38s ease,visibility 0s; }
.aux-screen[inert] { opacity:0;visibility:hidden;transform:translateY(3px);transition-delay:0s,0s,.38s; }
.aux-screen[data-web="0"] { display:grid;grid-template-columns:.96fr 1.04fr;gap:.75em;align-items:center; }
.aux-caption { display:block;font-size:.78em;color:#b4c9e2; }
#product .aux-screen h3 { color:white;font:600 1.73em/1.05 var(--page-font);letter-spacing:-.045em;margin:0; }
#product .oct-intro h3 { margin-top:.38em; }
.oct-intro em { display:block;color:#76c7ff;font-style:normal; }
.oct-plan { padding:1em .8em;border:1px solid #82adf44a;border-radius:.9em;
  background:linear-gradient(145deg,#203651ed,#12203aee);box-shadow:0 .7em 1.6em #0003;display:grid;gap:.65em; }
.oct-plan>b { font-size:1.65em;letter-spacing:-.055em;line-height:1.1; }
.oct-plan-note { font-size:.78em;color:#c5d7ec; }
.aux-term,.aux-platforms { display:flex;gap:.3em;flex-wrap:wrap; }
.aux-term button,.aux-platforms button { color:#d8e8ff;border:1px solid #8aabd653;border-radius:.45em;background:#16283f;padding:.4em .5em;font-size:.76em;line-height:1.2; }
.aux-term button[aria-pressed=true],.aux-platforms button[aria-pressed=true] { background:#2856a2;border-color:#89ade9; }
.aux-demo .aux-action,.aux-demo .aux-bot-action { background:linear-gradient(110deg,#2564cc,#427eee);color:white;border-radius:.65em;font-size:.84em;font-weight:650;padding:.66em .85em;line-height:1.2; }
.aux-screen>.aux-action { margin-top:auto; }
.aux-screen dl { width:95%;margin:0; font-size:.91em; }
.aux-screen dl div,.oct-summary { display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a7c9ee2a;padding:.4em 0; }
.aux-screen dt { color:#b6c9de; } .aux-screen dd { margin:0; }
.oct-dot { display:inline-block;width:.48em;height:.48em;background:#67d7a6;border-radius:50%;vertical-align:middle; }
.oct-summary { width:95%;gap:.5em;justify-content:flex-start;color:#b4ebd4;font-size:1em; }
.oct-summary span { margin-left:auto;color:#dceafe; }
.aux-phone {
  position:absolute;right:0;bottom:0;width:27.8%;aspect-ratio:9/19.5;font-size:2.03cqw;
  display:flex;flex-direction:column;border-radius:2.35em;padding:.8em .76em .48em;
  border:.31em solid #263341;background:linear-gradient(153deg,#172942,#142940 40%,#0b1628);
  box-shadow:0 0 0 1px #8493a3,inset 0 0 0 1px #455366,0 .95em 1.5em -.6em #172e4d66;
  color:white;
}
.oct-statusbar,.aux-contact,.oct-compose { display:flex;justify-content:space-between;align-items:center; }
.oct-statusbar { font-size:.7em;margin:0 .5em .8em;line-height:1; }
.oct-statusbar i { width:33%;height:1.22em;background:#03060c;border-radius:1em; }
.aux-contact { padding-bottom:.6em;border-bottom:1px solid #aac3e52b;text-align:center;font-size:.95em; }
.aux-contact>span:first-child { font-size:1.7em;color:#8ebfff; }
.aux-contact .demo-initial { width:1.85em;height:1.85em;border-radius:50%; }
#product .aux-contact small { color:#a5bdd5;font-size:.75em; }
.aux-chat { flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:.58em;padding-top:1em; }
.oct-avatar { width:3.05em;height:3.05em;border-radius:50%;align-self:center;box-shadow:0 0 0 1px #58738e; }
.oct-botname { font-weight:650;text-align:center;font-size:1.05em;line-height:1; }
.oct-bot-status { text-align:center;color:#9dddc8;font-size:.74em; }
.aux-demo[data-stage="0"] .oct-bot-status { color:#b5c7db; }
.aux-message { background:#28415c;padding:.72em .78em;border-radius:.85em .85em .85em .2em;font-size:.96em;line-height:1.35; }
#product .aux-message small { text-align:right;color:#bad0e5;font-size:.72em; }
.aux-chat .aux-platforms { display:grid;grid-template-columns:1fr 1fr; }
.aux-chat .aux-platforms[hidden] { display:none; }
.aux-chat .aux-platforms button { font-size:.77em; }
.oct-bot-links { display:grid; margin:.45em 0 .25em; border-block:1px solid #6f94b840; }
.aux-demo .oct-bot-links button { display:flex;align-items:center;justify-content:space-between;background:none;color:#c7daef;font-size:.8em;padding:.48em 0; }
.oct-compose { margin-top:.5em;background:#23354b;color:#a5b9cf;border-radius:2em;padding:.46em .8em;font-size:.78em; }
.oct-compose span {color:#86baff;}
.aux-home { margin:.55em auto 0;width:32%;height:.24em;background:#bbc9da;border-radius:1em; }
.aux-controls { display:flex; align-items:center; gap:4px; margin-top:16px; }
.aux-controls button { background:transparent; color:#485e7a; border-radius:16px; font-size:11px; padding:6px 9px; }
.aux-controls button[aria-pressed=true] { background:#183654; color:#fff; }
.aux-controls .aux-play { margin-left:auto; border:1px solid var(--hairline); min-width:29px; }
@media(max-width:1150px) {
  #product .servicegrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #product .service:nth-child(n) { border-right:1px solid var(--hairline); border-bottom:0; }
  #product .service:nth-child(even) { border-right:0; }
  #product .service:nth-last-child(-n+2) { border-bottom:1px solid var(--hairline); }
}
@media(max-width:900px) {
  #product .productgrid { grid-template-columns:1fr; }
  .aux-demo { justify-self:center; }
}
@media(max-width:600px) {
  #product h2 { font-size:clamp(33px,8.4vw,49px); }
  #product .productgrid { gap:27px; }
  #product::before { height:190px; background-size:auto,auto,145% 100%; background-position:center top; }
  #product > .wrap { padding-top:98px; }
  .aux-controls { gap:1px; } .aux-controls button { padding:6px; }
  #product .service { padding:16px 10px; }
  #product .service h3 { font-size:16px; }
  #product .service p { font-size:13px; }
  #product .endnote { display:grid;gap:6px; }
}
@media(max-width:370px) {
  #product .servicegrid { grid-template-columns:1fr; }
  #product .service:nth-child(n) { display:grid;grid-template-columns:28px 1fr;gap:4px 12px; border-right:0;border-bottom:0;padding:13px 0; }
  #product .service .ico { grid-row:span 2; }
  #product .service h3,#product .service p { margin:0; }
}
@media(prefers-reduced-motion:reduce) {
  .aux-screen,.aux-screen[inert],#product .service { transition:none; transform:none; }
  .aux-controls .aux-play { display:none; }
}
/* The platform picker replaces the profile summary in Telegram. */
.aux-demo[data-stage="2"] :is(.oct-avatar,.oct-botname,.oct-bot-links) { display:none; }

.aux-demo .demo-initial { display:grid;place-items:center;background:#031631;color:#eff6ff;font-weight:650; }