/* ActAI page: hero chat stage, example conversation, Claude connector process. */

/* Hero stage: the real chat recording in a phone, with notes on what it shows */
.actai-stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(24px,5vw,80px);padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);border-radius:16px;background:radial-gradient(60% 70% at 50% 55%,#5a3a24 0%,#2a2019 70%);color:#f3e2cd;overflow:hidden}
.actai-stage::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 80px);pointer-events:none}
.actai-phone{position:relative;width:clamp(230px,21vw,300px);border-color:#120d0a;box-shadow:0 0 0 1px #8a6a50,0 40px 90px -25px #000c}
.stage-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:42px;position:relative}
.stage-notes li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;padding-top:16px;border-top:1px solid #e4c3a340;max-width:290px}
.stage-notes-left li{justify-self:end;margin-left:auto}
.stage-notes b{grid-row:span 2;font-size:11px;font-weight:600;color:#e3a271;letter-spacing:.08em;padding-top:3px}
.stage-notes span{font-size:18px;letter-spacing:-.02em;line-height:1.3}
.stage-notes small{font-size:12px;line-height:1.6;color:#d6bfa6}
.actai-hero .stage-caption{margin-bottom:0}

/* Capabilities: numbered hairline list */
.actai-caps .capability{display:grid;grid-template-columns:44px 1fr;column-gap:10px}
.actai-caps .capability p{grid-column:2}
.cap-num{grid-row:span 2;font-size:12px;color:#8c5530;padding-top:6px;letter-spacing:.06em}

/* The chat window */
.actai-chat{padding:95px 6%;background:#e9ddce}
.chat-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.chat-heading h2,.actai-claude h2{font-size:clamp(36px,4vw,64px);font-weight:400;line-height:1.08;letter-spacing:-.05em}
.chat-heading>p{max-width:420px;font-size:15px;line-height:1.8;color:var(--muted)}
.chat-grid{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:6%;align-items:center;margin-top:55px}
.example-chat{background:#faf5ee;border:1px solid #d9c6b2;border-radius:14px;padding:clamp(20px,3vw,34px);box-shadow:0 20px 55px #50351a14}
.example-head{display:flex;gap:14px;align-items:center;font-size:15px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.example-head small{display:block;font-size:11px;color:#8c5530;margin-top:3px}
.example-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#51321e;color:#f0b88c;font-size:16px}
.example-prompts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.example-prompts button{padding:10px 16px;border:1px solid #ab8b6d;border-radius:30px;background:none;color:#51321e;font-size:13px;text-align:left}
.example-prompts button[aria-selected=true]{background:#51321e;color:#fff0db;border-color:#51321e}
.example-prompts button:hover{border-color:#51321e}
.example-thread{display:flex;flex-direction:column;gap:14px;min-height:250px;padding:4px 2px;border-radius:8px}
.bubble-q{align-self:flex-end;max-width:78%;padding:13px 17px;border-radius:18px 18px 4px 18px;background:#e4c3a3;font-size:14px;line-height:1.55}
.bubble-a{align-self:flex-start;max-width:88%;padding:16px 18px;border-radius:18px 18px 18px 4px;background:#fff;border:1px solid #e3d3c2}
.bubble-a p{font-size:15px;line-height:1.7}
.bubble-a p.typing::after{content:'▍';margin-left:2px;color:#c97b4a;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.illustrative-tag{display:inline-block;margin-bottom:9px;padding:3px 9px;border:1px dashed #b5865f;border-radius:20px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8c5530}
.example-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--muted)}
.chat-phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.chat-phone .phone{position:relative}
.chat-phone figcaption{font-size:11px;line-height:1.6;color:var(--muted);max-width:280px;text-align:center}

/* Connect ActAI to Claude */
.actai-claude{padding:95px 6%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:7%;align-items:start;border-bottom:1px solid var(--line)}
.claude-copy{position:sticky;top:30px}
.claude-copy>p{margin-top:25px;font-size:16px;line-height:1.8;color:var(--muted);max-width:470px}
.connector-card{margin-top:32px;padding:20px;border-radius:12px;background:#2a2019;color:#f3e2cd;max-width:520px}
.connector-label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#e3a271}
.connector-url{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.connector-url code{flex:1 1 220px;min-width:0;padding:13px 14px;border-radius:7px;background:#1b1511;border:1px solid #5b4433;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;user-select:all}
.connector-url button{padding:12px 18px;border:0;border-radius:25px;background:#f0b88c;color:#2a2019;font-size:13px;font-weight:600}
.connector-url button:focus-visible{outline-color:#f0b88c}
.connector-status{display:block;min-height:1em;margin-top:8px;font-size:11px;color:#d6bfa6}
.connector-note{display:block;margin-top:16px;max-width:470px;font-size:11px;line-height:1.7;color:var(--muted)}
.process-steps{list-style:none;margin:0;padding:0;position:relative}
.process-steps::before{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:linear-gradient(#c97b4a,#c97b4a55)}
.process-steps li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:24px;padding:0 0 36px}
.step-num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid #c97b4a;color:#8c5530;font-size:15px;transition:background .4s,color .4s}
.process-steps li.is-visible .step-num{background:#51321e;border-color:#51321e;color:#fff0db}
.process-steps h3{font-size:21px;font-weight:400;letter-spacing:-.5px;padding-top:9px}
.process-steps p{margin-top:10px;font-size:15px;line-height:1.75;color:var(--muted)}
.process-steps p b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.process-steps i{font-style:normal;color:#c97b4a}
.step-path{display:flex;flex-wrap:wrap;gap:6px}
.step-path span{padding:6px 12px;border:1px solid #d1b79d;border-radius:6px;background:#faf5ee;font-size:12px;color:#51321e}
.step-path span+span::before{content:'›';margin-right:8px;color:#c97b4a}
.step-fields{margin:14px 0 0;display:grid;gap:8px;max-width:440px}
.step-fields div{display:grid;grid-template-columns:56px 1fr;align-items:center;border:1px solid #d1b79d;border-radius:6px;background:#faf5ee;overflow:hidden}
.step-fields dt{padding:9px 10px;font-size:11px;color:var(--muted);border-right:1px solid #e3d3c2}
.step-fields dd{margin:0;padding:9px 12px;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#392b21;overflow-wrap:anywhere}
.process-done{display:flex;align-items:center;gap:16px;margin-left:0;padding:20px 22px;border-radius:12px;background:#e4c3a3;font-size:18px;letter-spacing:-.02em}
.process-done span{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#51321e;color:#fff0db}

.actai-hero+.product-strip{margin-top:30px}
.faq details p a{color:#8c5530;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1000px){
  .chat-heading{display:block}.chat-heading>p{margin-top:20px}
  .chat-grid{grid-template-columns:1fr;gap:45px}
  .actai-claude{grid-template-columns:1fr;gap:55px}
  .claude-copy{position:static}
}
@media(max-width:1000px){
  /* phone on top, notes in two columns below */
  .actai-stage{grid-template-columns:1fr 1fr;justify-items:center}
  .actai-phone{grid-column:1/-1;grid-row:1}
  .stage-notes-left,.stage-notes-right{display:flex;grid-row:2;grid-column:auto;gap:24px;align-self:start;width:100%}
  .stage-notes-left li{margin-left:0}
  .stage-notes li{max-width:none}
}
@media(max-width:760px){
  .actai-stage{grid-template-columns:1fr;padding:34px 20px;gap:30px}
  .stage-notes-left,.stage-notes-right{grid-row:auto}
  .stage-notes span{font-size:16px}
  .actai-chat,.actai-claude{padding:65px 6%}
  .chat-grid{margin-top:35px}
  .example-thread{min-height:300px}
  .bubble-q,.bubble-a{max-width:100%}
  .process-steps li{grid-template-columns:36px 1fr;gap:16px;padding-bottom:30px}
  .step-num{width:36px;height:36px;font-size:13px}
  .process-steps::before{left:17px}
  .process-steps h3{font-size:19px;padding-top:6px}
  .process-done{font-size:16px}
  .connector-card{padding:16px}.connector-url code{font-size:12px;padding:12px 10px}.step-fields dd{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.bubble-a p.typing::after{animation:none}.step-num{transition:none}}

/* Hero notes link to their sections. */
.stage-notes a{font-size:18px;letter-spacing:-.02em;line-height:1.3;color:inherit;text-decoration:none;border-bottom:1px solid transparent;width:fit-content}
.stage-notes a:hover,.stage-notes a:focus-visible{border-bottom-color:currentColor}
@media(max-width:760px){.stage-notes a{font-size:16px}}
/* Insights, voice and journal: three short answers side by side. */
.actai-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;padding:90px 6%;border-top:1px solid var(--line)}
.actai-trio article{padding-top:24px;border-top:1px solid #8c5530;scroll-margin-top:110px}
.actai-trio h3{font-size:clamp(24px,2.2vw,32px);font-weight:400;letter-spacing:-.04em;line-height:1.15}
.actai-trio p:not(.eyebrow){margin-top:14px;font-size:15px;line-height:1.75;color:var(--muted)}
.actai-apps{border-top:1px solid var(--line)}
.actai-apps .app-row,#assistant,#connect,#on-mobile{scroll-margin-top:90px}
.connector-example{margin-top:14px;font-size:14px;color:var(--muted)}
.process-title{font-size:12px;color:var(--muted);margin-bottom:18px}
@media(max-width:1000px){.actai-trio{grid-template-columns:1fr;gap:34px}}
@media(max-width:760px){.actai-trio{padding:60px 6%}}