/* armadai — Remote product page (/remote/). Sits on top of styles.css for the
   shared nav, footer and tokens. Content is monochrome: black, white and greys. */

.remote {
  --r-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --r-white: #f5f5f4;
  --r-grey-1: #c9cccd;
  --r-grey-2: #9a9fa1;
  --r-grey-3: #6b7073;
  --r-line: #26292b;
  --r-surface: #0f1112;
  font-family: var(--r-sans);
  color: var(--r-white);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.remote a:focus-visible,
.remote button:focus-visible,
.remote summary:focus-visible { outline-color: var(--r-white); }
.remote .eyebrow { font-family: var(--mono); }
.remote h1,
.remote h2,
.remote h3 { font-weight: 600; letter-spacing: -0.02em; }
.remote-soft { color: var(--r-grey-2); }
.remote-eyebrow { color: var(--r-grey-2); letter-spacing: 0.12em; }
.remote-eyebrow span { color: var(--r-grey-3); margin: 0 0.4em; }

/* ---------- hero ---------- */
.remote-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  padding: 110px 0 120px;
}
.remote-hero h1 {
  margin-top: 22px;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.remote-lead {
  margin-top: 26px;
  max-width: 34em;
  font-size: 19px;
  line-height: 1.6;
  color: var(--r-grey-1);
}
.remote-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 38px;
}
.remote-cta-center { justify-content: center; }
.remote-store {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #3a3e40;
  border-radius: 999px;
  background: #141617;
  color: var(--r-grey-1);
  font: 500 15px/1 var(--r-sans);
}
.remote-store:disabled { cursor: default; }
a.remote-store { background: var(--r-white); color: #050505; border-color: var(--r-white); }
.remote-text-link {
  font-size: 15px;
  color: var(--r-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}
.remote-text-link:hover { border-bottom-color: var(--r-white); }
.remote-fineprint {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--r-grey-3);
}

/* ---------- phone illustration ---------- */
.remote-phone { justify-self: center; text-align: center; }
.remote-phone figcaption { margin-top: 18px; font-size: 12px; color: var(--r-grey-3); }
.remote-phone-frame {
  position: relative;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 9 / 19;
  padding: 12px;
  border: 1px solid #3a3e40;
  border-radius: 48px;
  background: #050505;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), inset 0 0 0 6px #121415;
}
.remote-phone-island {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 84px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  z-index: 1;
}
.remote-phone-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 52px 14px 14px;
  border-radius: 38px;
  background: linear-gradient(180deg, #121415, #0a0b0c);
  text-align: left;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
}
.remote-phone-top {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
  color: var(--r-white);
}
.remote-dot { font-weight: 400; color: var(--r-grey-2); display: inline-flex; align-items: center; gap: 6px; }
.remote-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--r-white); }
.remote-msg { max-width: 88%; padding: 9px 11px; border-radius: 14px; }
.remote-msg-you { align-self: flex-end; background: var(--r-white); color: #050505; }
.remote-msg-master { align-self: flex-start; background: #1d2021; color: var(--r-grey-1); }
.remote-agents { display: grid; gap: 6px; }
.remote-agent {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--r-line);
  border-radius: 10px;
  color: var(--r-grey-1);
}
.remote-agent-state { color: var(--r-grey-3); }
.remote-approval {
  margin-top: auto;
  padding: 11px;
  border: 1px solid #3a3e40;
  border-radius: 14px;
  background: #151718;
}
.remote-approval-title { font-weight: 600; color: var(--r-white); }
.remote-approval-body { margin-top: 3px; color: var(--r-grey-2); }
.remote-approval-body code { font-family: var(--mono); color: var(--r-grey-1); }
.remote-approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; text-align: center; }
.remote-approval-actions span { padding: 6px; border-radius: 9px; background: #222526; color: var(--r-grey-1); }
.remote-approval-actions .remote-approve { background: var(--r-white); color: #050505; font-weight: 600; }
.remote-composer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 11px;
  border-radius: 999px;
  background: #1a1c1d;
  color: var(--r-grey-3);
}
.remote-mic { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--r-grey-2); }

/* ---------- sections ---------- */
.remote-section {
  padding: 96px 0;
  border-top: 1px solid var(--r-line);
}
.remote-section h2 {
  margin-top: 18px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.1;
}
.remote-note {
  margin-top: 40px;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.7;
  color: var(--r-grey-2);
}
.remote-note a { color: var(--r-white); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.remote-note a:hover { border-bottom-color: var(--r-white); }

.remote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.remote-card {
  padding: 30px 28px;
  border: 1px solid var(--r-line);
  border-radius: 20px;
  background: var(--r-surface);
}
.remote-card h3 { font-size: 20px; }
.remote-card p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--r-grey-1); }

.remote-steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--r-line);
  border-radius: 20px;
  overflow: hidden;
}
.remote-steps li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 28px 30px;
  border-top: 1px solid var(--r-line);
}
.remote-steps li:first-child { border-top: 0; }
.remote-step-num { font-size: 13px; color: var(--r-grey-3); padding-top: 4px; }
.remote-steps h3 { font-size: 19px; }
.remote-steps p { margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--r-grey-1); }
.remote-steps strong { color: var(--r-white); }

.remote-facts {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}
.remote-fact { padding: 24px 0; border-top: 1px solid var(--r-line); }
.remote-fact dt { font-size: 17px; font-weight: 600; color: var(--r-white); }
.remote-fact dd { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: var(--r-grey-1); }
.remote-reqs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.remote-faq { margin-top: 40px; max-width: 820px; }
.remote-faq details { border-top: 1px solid var(--r-line); }
.remote-faq details:last-child { border-bottom: 1px solid var(--r-line); }
.remote-faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  color: var(--r-white);
}
.remote-faq summary::-webkit-details-marker { display: none; }
.remote-faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 300;
  color: var(--r-grey-2);
  transition: transform 0.2s ease;
}
.remote-faq details[open] summary::after { transform: rotate(45deg); }
.remote-faq details p { padding: 0 40px 24px 0; font-size: 16px; line-height: 1.7; color: var(--r-grey-1); }

.remote-finale { text-align: center; padding: 120px 0 110px; }
.remote-finale h2 { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .remote-hero { grid-template-columns: 1fr; gap: 56px; padding: 80px 0 90px; }
  .remote-reqs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .remote { padding: 0 16px; }
  .remote-hero { padding: 56px 0 72px; }
  .remote-lead { font-size: 17px; }
  .remote-section { padding: 72px 0; }
  .remote-grid,
  .remote-facts,
  .remote-reqs { grid-template-columns: 1fr; }
  .remote-steps li { grid-template-columns: 1fr; gap: 8px; padding: 22px 20px; }
  .remote-phone-frame { width: 270px; }
  .remote-faq details p { padding-right: 0; }
  .remote-finale { padding: 88px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .remote-faq summary::after { transition: none; }
}