/* AuroOrch additions to the template CSS (assets/template.css).
   Only structure the template does not ship: header dropdowns, a three-column
   grid and the placeholder marker. Colors, type, radii and shadows come from the
   template's own values. */

/* ---- header dropdowns ---- */
.ao-dd { position: relative; }
.ao-dd__btn { display: inline-flex; align-items: center; gap: 5px; }
.ao-caret { opacity: .7; transition: transform .2s ease; }
.ao-dd.is-open .ao-caret { transform: rotate(180deg); }
.ao-dd__panel {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 30;
  min-width: 290px; opacity: 0; pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease-out, transform .24s cubic-bezier(.23, 1, .32, 1);
}
.ao-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.ao-dd.is-open .ao-dd__panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ao-dd:last-child .ao-dd__panel { left: auto; right: -14px; transform: translate(0, 6px); }
.ao-dd:last-child.is-open .ao-dd__panel { transform: translate(0, 0); }
.ao-dd__panel--wide { min-width: 600px; }
.ao-dd__card { display: grid; gap: 4px; padding: 8px; }
.ao-dd__panel--wide .ao-dd__card { grid-template-columns: 1.35fr 1fr; }
.ao-dd__group { display: grid; align-content: start; gap: 2px; }
.ao-dd__group + .ao-dd__group { padding-left: 4px; border-left: 1px solid rgba(13, 17, 23, .06); }
.ao-dd__label { padding: 10px 14px 4px; }
.ao-dd__item { padding: 10px 14px; }
.ao-menu__label { list-style: none; }

/* ---- three-column card grid (template pricing cards come in twos) ---- */
@media (min-width: 768px) { .ao-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } }
@media (min-width: 1024px) { .ao-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- placeholder copy ---- */
.ao-tbd {
  border-radius: 4px; padding: 0 3px;
  background: rgba(245, 158, 11, .12); box-shadow: inset 0 -1px 0 rgba(245, 158, 11, .5);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---- story stage: screens stack inside the phone panel ---- */
.ao-story [data-phone] { will-change: opacity, transform; }
.ao-story [data-dark-panel] { will-change: transform, width, height; }

/* ---- Chinese pages (/zh/) ----
   The template fonts still set Latin text and figures; Chinese characters fall back to
   the system's CJK sans. The template's tight tracking and leading are tuned for Latin
   display type, so headings get a little more air in Chinese. */
html[lang="zh-CN"] {
  --font-sans: "Inter Variable", Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", ui-sans-serif, system-ui, sans-serif;
  --_font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", monospace;
}
html[lang="zh-CN"] h1 { line-height: 1.16; letter-spacing: -0.01em; }
/* Chinese glyphs fill the whole em box, so the dark-hero headline runs ~10% smaller than the Latin one */
html[lang="zh-CN"] [data-section="hero"] h1 { font-size: clamp(42px, 5.6vw, 84px); }
html[lang="zh-CN"] h2 { line-height: 1.24; letter-spacing: -0.005em; }
html[lang="zh-CN"] :is(h3, blockquote) { line-height: 1.38; letter-spacing: 0; }
html[lang="zh-CN"] summary { line-height: 1.5; letter-spacing: 0; }
html[lang="zh-CN"] main :is(p, dd) { line-height: 1.72; }
html[lang="zh-CN"] main :is(p, dd).text-mono { line-height: 1.6; }

/* a heading phrase that should not be split across lines (see ph() in _build/ui.py) */
.ao-ph { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .ao-dd__panel { transition: none; }
}

/* Native iPhone captures. The status bar and Dynamic Island belong to the capture. */
.ao-phone { position: relative; width: 100%; height: 100%; box-sizing: border-box;
  padding: 2.15%; border: 1px solid #85878b; border-radius: 15% / 6.9%;
  background: linear-gradient(125deg,#b8b9ba 0%,#48494d 7%,#121315 28%,#696a6d 70%,#b6b7ba 92%,#27282b);
  box-shadow: inset 0 0 0 2px #222326, 0 0 0 1px #101113, 0 18px 32px -18px #0009;
}
.ao-phone__display { position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 13.5% / 6.2%; background: #131313; box-shadow: 0 0 0 2px #050505; }
.ao-phone__display > img,.ao-phone__video { position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ao-phone__key { position: absolute; display: block; width: 1%; background: #65666a;
  border-radius: 2px; box-shadow: inset 0 0 1px #ddd; }
.ao-phone__key--left { left: -1%; top: 20%; height: 9%; }
.ao-phone__key--left::before { content: ''; position: absolute; bottom: 145%; width: 100%; height: 32%; background: inherit; border-radius: inherit; }
.ao-phone__key--right { right: -1%; top: 25%; height: 11%; }
.ao-phone__toggle { position: absolute; z-index: 3; right: 5%; bottom: 11%; display: grid;
  place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  color: white; background: #222e; border: 1px solid #ffffff40; cursor: pointer; font: 12px system-ui; }
.ao-phone__toggle:focus-visible { outline: 2px solid #8cc8ff; outline-offset: 3px; }

/* One physical phone silhouette in the CTA, without a second widget frame. */
.ao-cta-phone { position:absolute; top:144px; right:92px; width:336px; height:728px;
  pointer-events:auto; transform:perspective(1600px) rotateY(-15deg) rotateX(5deg) rotateZ(2.5deg);
  translate:0 48px; transition:translate 900ms cubic-bezier(.23,1,.32,1); }
.ao-cta-phone .ao-phone__toggle { bottom:auto; top:56%; }

/* Sera capabilities: alternating editorial chapters and native APP captures. */
.ao-sera-capabilities { max-width:1180px; margin:0 auto; padding:clamp(80px,10vw,144px) clamp(16px,4vw,36px) 0;
  overflow:clip; color:#0d1117; }
.ao-sera-heading { max-width:680px; margin:0 auto 72px; text-align:center; }
.ao-sera-eyebrow { display:flex; align-items:center; gap:14px; font-size:11px; font-weight:600;
  letter-spacing:.12em; line-height:1.5; color:#667485; }
.ao-sera-heading .ao-sera-eyebrow { justify-content:center; margin-bottom:20px; }
.ao-sera-heading h2 { font-size:clamp(32px,4vw,52px); line-height:1.12; letter-spacing:-.035em; font-weight:600; }
.ao-sera-heading > p:last-child { font-size:17px; color:#687384; margin:20px auto 0; max-width:540px; }
.ao-sera-chapter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:center;
  gap:clamp(44px,7vw,92px); padding:0 0 104px; }
.ao-sera-chapter:nth-of-type(even) { grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); }
.ao-sera-chapter:nth-of-type(even) .ao-sera-copy { order:2; }
.ao-sera-copy { --ao-enter-x:-48px; }
.ao-sera-visual { --ao-enter-x:48px; }
.ao-sera-chapter:nth-of-type(even) .ao-sera-copy { --ao-enter-x:48px; }
.ao-sera-chapter:nth-of-type(even) .ao-sera-visual { --ao-enter-x:-48px; }
.ao-sera-copy .ao-sera-eyebrow { margin-bottom:24px; }
.ao-sera-eyebrow > span { font-size:13px; color:#214f7b; letter-spacing:0; border-top:1px solid #a6b7c7; padding-top:8px; }
.ao-sera-copy h3 { font-size:clamp(30px,3.15vw,43px); font-weight:550; letter-spacing:-.035em; line-height:1.18; margin-bottom:34px; }
.ao-sera-copy dl { display:grid; gap:23px; }
.ao-sera-copy dt { color:#24527c; font-size:13px; font-weight:600; margin-bottom:7px; }
.ao-sera-copy dd { font-size:15px; line-height:1.65; color:#647080; max-width:39ch; }
.ao-sera-visual { position:relative; margin:0; height:490px; border-radius:28px; overflow:hidden;
  background:#eaf0f5; isolation:isolate; }
.ao-sera-visual--2 { background:#eeeae3; }
.ao-sera-visual--3 { background:#e9eeed; }
.ao-sera-visual--4 { background:#eaf0f6; display:grid; align-items:center; }
.ao-sera-visual-mark { position:absolute; left:28px; top:22px; font-size:85px; font-weight:500; line-height:1;
  letter-spacing:-.08em; color:#0d34560c; }
.ao-sera-phone { position:absolute; top:40px; left:50%; width:258px; height:559px;
  margin-left:-129px; transform:translateY(var(--ao-parallax,0px)) rotate(-5deg); }
.ao-sera-chapter:nth-of-type(even) .ao-sera-phone { transform:translateY(var(--ao-parallax,0px)) rotate(5deg); }
.ao-sera-visual figcaption { position:absolute; z-index:4; bottom:0; left:0; right:0; padding:42px 24px 22px;
  text-align:center; font-size:12px; letter-spacing:.02em; color:#38516b; background:linear-gradient(transparent,#eaf0f5 48%); }
.ao-sera-visual--2 figcaption { background:linear-gradient(transparent,#eeeae3 48%); color:#696052; }
.ao-sera-visual--3 figcaption { background:linear-gradient(transparent,#e9eeed 48%); color:#51695e; }
.ao-sera-visual .ao-phone__toggle { top:8%; bottom:auto; }
.ao-sera-handoff { position:relative; margin:0 34px; transform:translateY(var(--ao-parallax,0px)); }
.ao-sera-handoff::before { content:''; position:absolute; top:28px; bottom:28px; left:32px; width:1px; background:#98b1c8; }
.ao-sera-handoff-step { position:relative; display:flex; gap:16px; align-items:center; padding:22px 20px;
  border:1px solid #d9e2ea; border-radius:17px; background:#f8fafc; }
.ao-sera-handoff-step + .ao-sera-handoff-step { margin-top:25px; }
.ao-sera-handoff-step:last-child { background:#173e61; border-color:#173e61; color:#fff; }
.ao-sera-handoff-dot { flex-shrink:0; display:grid; place-items:center; width:28px; height:28px;
  font-size:11px; border:1px solid #a5bbcf; border-radius:50%; }
.ao-sera-handoff-step strong { display:block; font-size:16px; font-weight:550; }
.ao-sera-handoff-step div > span { display:block; margin-top:6px; font-size:11px; color:#778493; line-height:1.6; }
.ao-sera-handoff-step:last-child div > span { color:#bfcedb; }
@media (prefers-reduced-motion:no-preference) {
  .ao-sera-motion [data-sera-enter] { opacity:0; transform:translateX(var(--ao-enter-x));
    transition:opacity 640ms ease, transform 640ms cubic-bezier(.22,.68,0,1); }
  .ao-sera-motion .ao-sera-visible [data-sera-enter] { opacity:1; transform:translateX(0); }
}
@media (max-width:767px) {
  .ao-sera-heading { margin-bottom:48px; text-align:left; }
  .ao-sera-heading .ao-sera-eyebrow { justify-content:flex-start; }
  .ao-sera-heading > p:last-child { font-size:15px; }
  .ao-sera-chapter,.ao-sera-chapter:nth-of-type(even) { grid-template-columns:1fr; gap:30px; padding-bottom:64px; }
  .ao-sera-chapter:nth-of-type(even) .ao-sera-copy { order:0; }
  .ao-sera-copy h3 { margin-bottom:26px; }
  .ao-sera-copy dd { max-width:48ch; }
  .ao-sera-visual { height:390px; border-radius:22px; }
  .ao-sera-phone { top:30px; width:232px; height:502px; margin-left:-116px; }
  .ao-sera-handoff { margin:0 22px; }
  .ao-sera-handoff-step { padding:17px 16px; gap:12px; }
  .ao-sera-handoff-step + .ao-sera-handoff-step { margin-top:18px; }
  .ao-sera-copy,.ao-sera-visual,.ao-sera-chapter:nth-of-type(even) .ao-sera-copy,.ao-sera-chapter:nth-of-type(even) .ao-sera-visual { --ao-enter-x:0px; }
  .ao-sera-phone,.ao-sera-chapter:nth-of-type(even) .ao-sera-phone { transform:rotate(-3deg); }
  .ao-sera-handoff { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .ao-cta-phone { translate:none; transition:none; }
  [data-sera-enter] { opacity:1; transform:none; transition:none; }
  .ao-sera-phone,.ao-sera-chapter:nth-of-type(even) .ao-sera-phone,.ao-sera-handoff { transform:none; }
}

/* Iris visitor entry; the deployed widget owns the conversation UI. */
.ao-iris-entry{position:fixed;right:24px;bottom:24px;z-index:99998;display:flex;align-items:flex-end;flex-direction:column;gap:8px;max-width:min(340px,calc(100vw - 32px));font-family:Inter,system-ui,sans-serif}
.ao-iris-launcher,.ao-iris-contact-button{border:0;border-radius:999px;background:#0D1117;color:#fff;padding:13px 20px;font:550 14px/1.4 Inter,system-ui,sans-serif;cursor:pointer}
.ao-iris-launcher:focus-visible,.ao-iris-contact-button:focus-visible{outline:3px solid #1C8AF8;outline-offset:3px}
.ao-iris-launcher:disabled,.ao-iris-contact-button:disabled{opacity:.65;cursor:wait}
.ao-iris-entry [hidden]{display:none!important}
.ao-iris-status{background:#fff;color:#0D1117;border:1px solid #d9dde2;border-radius:12px;padding:12px 16px;font-size:13px;line-height:1.6;margin:0}
.ao-iris-fallback{background:#fff;border-radius:12px;padding:8px 12px;color:#075fae;font-size:13px;text-decoration:underline}
.ao-iris-contact{width:100%;padding:24px;background:rgba(13,17,23,.04);border-radius:20px;margin:8px 0 16px;text-align:left;color:#0D1117}
.ao-iris-contact h2{font-size:20px;font-weight:600;line-height:1.4;margin:0 0 8px}
.ao-iris-contact p{font-size:14px;line-height:1.7;margin:0 0 16px;color:#5A6472}
@media(max-width:640px){.ao-iris-entry{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}}