/* Homepage positioning: equal entry points for team AI and online-store agents.
   Reuses the existing typefaces, components and responsive demo widgets. */
.ai-home {
  --day: #f6f5ef;
  --ink: #242b22;
  --signal: #d1e29a;
  --signal-ink: #242b22;
  --text: #242b22;
  --text-dim: #555f50;
  --text-faint: #64705e;
  --surface: #f6f5ef;
  --surface-warm: #eceee3;
  --border: #aeb5a5;
  --border-light: #d6dacd;
  --accent-yellow: #d1e29a;
  --sketch-line: #354f32;
  background: var(--day);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
}
.ai-home .wrap { max-width: 84rem; }
.ai-home .hour { background: var(--day); color: var(--ink); padding-block: clamp(3.5rem, 7vw, 6rem); }
.ai-home .hour--day-b, .ai-home .ai-example { background: #eceee3; }
.ai-home .hour--day.ai-example { background: var(--day); }
.ai-home .is-dark {
  --text: #242b22;
  --text-dim: #555f50;
  --text-faint: #64705e;
  --border: #aeb5a5;
  --border-light: #d6dacd;
  --sketch-line: #354f32;
}
.ai-home .hour::before, .ai-home .timestamp { display: none; }
.ai-home .chrome {
  position: relative;
  padding: 1.25rem clamp(1.1rem, 4vw, 3.5rem);
  max-width: 84rem;
  margin-inline: auto;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  gap: 1rem;
}
.ai-home .chrome-logo {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  font-size: 1.35rem;
}
.ai-home .chrome-logo span { color: #526b38; }
.ai-home .chrome-nav { margin-left: auto; gap: 1.5rem; }
.ai-home .chrome-nav a, .ai-home .chrome-lang a, .ai-home .chrome-lang span {
  color: var(--ink);
  background: none;
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: 0;
  border-radius: 0;
  padding: .25rem 0;
  opacity: 1;
  border: 0;
}
.ai-home .chrome-nav .chrome-contact { font-weight: 600; }
.ai-home .chrome-lang { gap: .75rem; margin-left: 1.25rem; }
.ai-home .chrome-lang [aria-current] { color: #526b38; border-bottom: 2px solid #526b38; }
.ai-home :focus-visible { outline: 2px solid #354f32; outline-offset: 5px; }
.ai-home .faq-item summary::after { color: #354f32; }
.ai-home .chrome-nav a:hover, .ai-home .chrome-lang a:hover { color: #526b38; }
.ai-home .hour--hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: 0; }
.ai-hero-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ai-home .hero-headline {
  font-size: clamp(2.9rem, 5.7vw, 5.3rem);
  font-weight: 600;
  line-height: 1.02;
  max-width: 16ch;
  letter-spacing: -.055em;
  margin-top: 1.2rem;
}
.ai-home .hero-headline span { color: #526b38; }
.ai-home .hero-subheadline { font-family: var(--display); max-width: 48ch; font-size: 1.08rem; margin-top: 1.6rem; color: var(--text-dim); }
.ai-home .hero-cta-group { gap: 1.5rem; margin-top: 2rem; align-items: center; }
.ai-home .btn { font-family: var(--display); border-radius: .35rem; font-weight: 600; font-size: .9rem; letter-spacing: 0; }
.ai-home .btn-primary { background: var(--signal); color: var(--ink); box-shadow: none; }
.ai-home .btn:hover { transform: translateY(-2px); }
.ai-home .btn:active { transform: translateY(1px); }
.ai-text-link { font-size: .9rem; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .4rem; }
.ai-flow {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: #e5ead9;
  border: 1px solid #c5ceb8;
  border-radius: 1rem;
  position: relative;
}
.flow-heading { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .73rem; color: #43553a; }
.flow-dot { width: .5rem; height: .5rem; background: #526b38; border-radius: 50%; }
.ai-flow ol { list-style: none; margin-top: 1.6rem; }
.ai-flow li { position: relative; display: flex; align-items: flex-start; gap: .85rem; padding-bottom: 1.25rem; }
.ai-flow li:not(:last-child)::after { content: ""; position: absolute; top: 2rem; left: .95rem; bottom: .25rem; width: 1px; background: #a9b699; }
.flow-number { flex: 0 0 2rem; height: 2rem; border-radius: .35rem; display: grid; place-items: center; background: #f6f5ef; font-family: var(--mono); font-size: .68rem; border: 1px solid #c5ceb8; }
.ai-flow strong { display: block; font-size: .95rem; font-weight: 600; }
.ai-flow li p { font-size: .8rem; color: #555f50; margin-top: .15rem; }
.flow-caption { border-top: 1px solid #c5ceb8; padding-top: .8rem; color: #555f50; font-size: .73rem; line-height: 1.6; }
.solution-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(3rem, 5vw, 4.5rem); border-block: 1px solid var(--border); }
.solution-path { padding: clamp(1.5rem, 3vw, 2.5rem); text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; transition: background .2s; }
.solution-path:first-child { padding-left: 0; padding-right: clamp(1.5rem, 4vw, 3rem); border-right: 1px solid var(--border); }
.solution-path:last-child { padding-right: 0; padding-left: clamp(1.5rem, 4vw, 3rem); }
.solution-path:hover { background: #eceee3; }
.path-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: #526b38; }
.ai-home .solution-paths .solution-path h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: .8rem; line-height: 1.2; }
.solution-path p { color: var(--text-dim); font-size: .9rem; margin-block: .8rem 1.25rem; max-width: 44ch; }
.path-link { display: inline-block; font-size: .86rem; font-weight: 600; margin-top: auto; }
.ai-home .section-label { font-family: var(--mono); letter-spacing: .12em; font-size: .72rem; color: #526b38; }
.ai-home .hour h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.12; margin-top: .9rem; max-width: 28ch; letter-spacing: -.035em; }
.ai-home .section-sub { font-family: var(--display); font-size: 1rem; max-width: 63ch; color: var(--text-dim); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; margin-top: 2.5rem; }
.work-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem 0 2rem; border-top: 1px solid var(--border); text-decoration: none; }
.work-card h3 { font-size: 1.4rem; margin-block: .7rem .6rem; letter-spacing: -.02em; }
.work-card p { font-size: .95rem; color: var(--text-dim); max-width: 48ch; }
.work-output { font-family: var(--mono); font-size: .7rem; color: #526b38; margin-block: 1.2rem; }
.work-card:hover h3 { color: #526b38; }
.work-note { display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.work-note p { font-size: .85rem; max-width: 65ch; color: var(--text-dim); }
.work-note a { flex-shrink: 0; }
.ai-home .agent-sketch-card { background: var(--day); border-radius: .6rem; box-shadow: none; }
.ai-home .agent-sketch-number, .ai-home .agent-demo-hint, .ai-home .agent-sketch-metric { font-family: var(--mono); }
.ai-home .agent-sketch-body, .ai-home .step-body, .ai-home .hour .body { font-family: var(--display); font-size: .95rem; }
.ai-home .agent-outcome-tag { background: #e5ead9; }
.ai-home .btn-line, .ai-home .btn-line:hover { color: #354f32; border-color: #526b38; }
.ai-home .msg { box-shadow: none; border: 1px solid var(--border-light); }
.ai-home .ai-example .msg { display: block; max-width: 44rem; margin-block: 1rem; }
.ai-home .ai-example .msg--reply { background: #e5ead9; }
.ai-home .proof-cards { gap: 2rem; }
.ai-home .proof-card-sketch { border: 0; border-top: 1px solid var(--border); padding: 1rem 0; background: transparent; box-shadow: none; }
.ai-home .blog-card-sketch { background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--border); padding: 1.5rem 0; }
.ai-home .blog-card-meta { font-family: var(--mono); font-size: .72rem; color: var(--text-dim); }
.ai-home .blog-card-title { font-size: 1.45rem; line-height: 1.25; margin-block: 1rem 1.5rem; }
.ai-home .section-cta-p { font-family: var(--display); }
.ai-home .foot { background: #e5ead9; color: var(--ink); }
@media (max-width: 900px) {
  .ai-hero-grid { grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
  .ai-home .hero-headline { font-size: clamp(2.8rem, 5.6vw, 4.5rem); }
  .ai-home .chrome-nav { gap: .8rem; }
  .work-note { align-items: flex-start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 640px) {
  .ai-home .chrome { flex-wrap: wrap; gap: .85rem; padding-block: 1rem; }
  .ai-home .chrome-lang { margin-left: auto; }
  .ai-home .chrome-nav { order: 3; width: 100%; margin-left: 0; gap: 1.25rem; }
  .ai-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ai-home .hero-headline { font-size: clamp(2.8rem, 9vw, 3.8rem); max-width: 16ch; }
  .ai-home .hero-subheadline { font-size: 1rem; }
  .ai-home .hero-cta-group { flex-wrap: wrap; gap: 1.2rem; }
  .ai-flow { padding: 1.5rem; }
  .solution-paths, .work-grid { grid-template-columns: 1fr; }
  .solution-path:first-child { border-right: 0; border-bottom: 1px solid var(--border); }
  .solution-path:first-child, .solution-path:last-child { padding: 1.5rem 0; }
  .ai-home .hour { padding-block: 3rem; }
  .ai-home .hour--hero { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-home *, .ai-home *::before, .ai-home *::after { animation: none !important; transition: none !important; }
}

.ai-home .cta-narrow { margin-inline: auto; text-align: center; }
.ai-home .cta-title { margin-top: .5rem; }