/* AI services page: shared Jenlu shell, local editorial layouts. */
.ai-page { --ai-cream: #fbf8f3; --ai-orange: #f18933; --ai-dark: #151d2d; background: var(--ai-cream); }
.ai-page main p { line-height: 1.65; }
.ai-page .site-header { background: rgba(251, 248, 243, 0.96); }
.ai-page main [id] { scroll-margin-top: 8rem; }
.ai-page .button-solid { gap: 0.75rem; }
.ai-hero { padding: clamp(3rem, 7vw, 6rem) 0 4rem; }
.ai-hero-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.ai-hero-copy h1 { max-width: 11ch; font-size: clamp(3.15rem, 6vw, 5.55rem); line-height: 0.99; margin-bottom: 1.55rem; }
.ai-hero-copy > p:not(.eyebrow) { max-width: 35rem; }
.ai-hero-copy .ai-lead { font-size: 1.3rem; line-height: 1.5; color: var(--ink); }
.ai-hero-copy .hero-actions { align-items: center; gap: 1.3rem; margin-top: 1.75rem; }
.ai-text-link { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 1px; text-decoration-color: rgba(18, 24, 38, 0.3); }
.ai-text-link:hover { text-decoration-color: var(--brand-deep); }
.ai-text-link > span { text-decoration: none; }
.ai-hero-copy .ai-hero-note { margin-top: 1.3rem; font-size: 0.8rem; }
.ai-workflow { margin: 0; padding: clamp(1.3rem, 2.5vw, 2rem); background: var(--ai-dark); color: #fff; border-radius: 1.5rem; box-shadow: 0 24px 50px rgba(18, 24, 38, 0.12); }
.ai-workflow-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 2rem; color: #c0c7d3; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.ai-window-dots { display: flex; gap: 0.35rem; }
.ai-window-dots i { height: 0.4rem; width: 0.4rem; background: #6c7485; border-radius: 50%; }
.ai-window-dots i:first-child { background: var(--ai-orange); }
.ai-workflow figcaption { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.18; }
.ai-workflow-steps { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.ai-workflow-steps li { display: flex; align-items: center; gap: 0.85rem; position: relative; padding: 0.9rem 0; color: #fff; }
.ai-workflow-steps li + li { border-top: 1px solid #364051; }
.ai-step-icon { flex: 0 0 2.2rem; display: flex; align-items: center; justify-content: center; height: 2.2rem; border: 1px solid #677184; border-radius: 50%; font-size: 0.65rem; color: #e2e7ef; }
.ai-workflow-steps strong { display: block; font-size: 0.95rem; font-weight: 650; }
.ai-workflow-steps div > span { display: block; color: #bcc5d3; font-size: 0.8rem; margin-top: 0.15rem; }
.ai-workflow-highlight .ai-step-icon { background: var(--ai-orange); border-color: var(--ai-orange); color: var(--ai-dark); }
.ai-workflow-highlight strong { color: #ffc58e; }
.ai-workflow .ai-workflow-note { font-size: 0.72rem; color: #aeb7c6; padding-top: 1rem; margin: 0.65rem 0 0; border-top: 1px solid #364051; }
.ai-intro-strip { border-block: 1px solid #e3ded5; background: #f3eee6; }
.ai-intro-strip > .wrap { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.5rem; }
.ai-intro-strip p { margin: 0; max-width: 55rem; font-size: 0.95rem; }
.ai-intro-strip strong { color: var(--ink); }
.ai-intro-strip .ai-text-link { flex-shrink: 0; font-size: 0.9rem; }
.ai-section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 3rem; margin-bottom: 2.2rem; }
.ai-section-heading h2 { margin-bottom: 0; }
.ai-section-heading > p { margin: 0; max-width: 30rem; }
.ai-jump-links { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 2rem; }
.ai-jump-links a { padding: 0.65rem 0.9rem; border: 1px solid #dcd6cd; background: #fffdf9; border-radius: 999px; font-size: 0.85rem; font-weight: 650; }
.ai-jump-links a:hover { background: #fff0e2; border-color: #d79b62; }
.ai-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ai-service { display: flex; flex-direction: column; padding: 1.6rem; background: #fff; border: 1px solid #e4dfd7; border-radius: 0.9rem; }
.ai-service-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.3rem; color: #5d6475; font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.ai-service-label > span { display: inline-flex; align-items: center; justify-content: center; background: #fff0e2; color: #843808; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 0.65rem; }
.ai-service h3 { font-size: 1.45rem; line-height: 1.14; margin-bottom: 0.8rem; }
.ai-service > p:not(.ai-example) { font-size: 0.91rem; margin: 0 0 0.6rem; }
.ai-service ul { padding-left: 1.05rem; font-size: 0.87rem; margin: 0.4rem 0 1.4rem; }
.ai-service li { margin: 0.3rem 0; }
.ai-service li::marker { color: var(--brand-deep); }
.ai-service .ai-example { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid #ece7df; font-size: 0.82rem; }
.ai-example strong { color: var(--ink); }
.ai-catalogue-end { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.5rem; }
.ai-catalogue-end p { margin: 0; }
.ai-catalogue-end .ai-text-link { flex-shrink: 0; }
.ai-approach { background: #f1ece4; border-block: 1px solid #e3ded5; }
.ai-approach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.ai-approach-grid article { border-top: 1px solid #cec6ba; padding-top: 1.5rem; }
.ai-small-label { display: block; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.085em; margin-bottom: 0.85rem; color: #5d6475; }
.ai-approach-grid h3 { font-size: 1.7rem; max-width: 21ch; }
.ai-approach-grid p { margin-bottom: 0; font-size: 0.95rem; }
.ai-approach-note { margin: 2rem 0 0; padding: 1.1rem 1.3rem; background: #fffbf5; border-left: 3px solid var(--ai-orange); font-size: 0.9rem; }
.ai-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ai-proof-card { overflow: hidden; border-radius: 1rem; border: 1px solid #e2ddd5; background: #fff; }
.ai-proof-visual { position: relative; height: 15rem; overflow: hidden; }
.ai-proof-map { background-color: #e9ece4; background-image: linear-gradient(32deg, transparent 46%, #fffdf8 46%, #fffdf8 49%, #dadcd3 49%, #dadcd3 49.5%, #fffdf8 49.5%, #fffdf8 53%, transparent 53%), linear-gradient(115deg, transparent 38%, #fffdf8 38%, #fffdf8 44%, transparent 44%); }
.ai-map-zone { position: absolute; border-radius: 42% 55% 33% 48%; transform: rotate(-15deg); border: 2px solid; }
.ai-map-zone-one { width: 10rem; height: 8.5rem; top: 2.5rem; left: 16%; background: #f7b16e80; border-color: #a65115; z-index: 1; }
.ai-map-zone-two { width: 16rem; height: 11rem; top: 1.2rem; right: 13%; background: #90acbb40; border-color: #758d9b; }
.ai-map-pin { position: absolute; top: 6.2rem; left: 41%; z-index: 3; width: 1.1rem; height: 1.1rem; background: #151d2d; border: 3px solid #fff; box-shadow: 0 0 0 2px #151d2d; border-radius: 50%; }
.ai-map-label { position: absolute; z-index: 3; padding: 0.4rem 0.7rem; border-radius: 0.3rem; background: #fff; font-size: 0.7rem; font-weight: 650; box-shadow: 0 3px 9px #151d2d12; }
.ai-map-label-one { left: 12%; top: 3rem; }
.ai-map-label-two { right: 10%; bottom: 3.8rem; }
.ai-visual-note { position: absolute; bottom: 0.75rem; left: 1rem; font-size: 0.6rem; color: #555f62; text-transform: uppercase; letter-spacing: 0.06em; }
.ai-proof-documents { display: flex; justify-content: center; align-items: center; gap: 1.3rem; background: #ece9e6; }
.ai-document { width: 8rem; height: 9.7rem; background: #fff; padding: 1.1rem 1rem; border-radius: 0.3rem; box-shadow: 0 9px 20px #151d2d10; transform: rotate(-6deg); }
.ai-document > span { display: block; width: 1.8rem; height: 0.6rem; background: #596578; margin-bottom: 1rem; }
.ai-document i { display: block; width: 100%; height: 0.25rem; background: #d7dce2; margin-block: 0.65rem; }
.ai-document i:nth-of-type(2) { width: 70%; }
.ai-document b { display: block; font-size: 0.52rem; margin-top: 1rem; color: #5d6475; }
.ai-document-signed { transform: rotate(6deg); }
.ai-document-signed > span { background: var(--ai-orange); }
.ai-document-signed b { border-bottom: 2px solid #c26c32; padding-bottom: 0.3rem; }
.ai-document-arrow { font-size: 1.5rem; color: #667081; }
.ai-proof-copy { padding: 1.6rem; }
.ai-proof-copy h3 { font-size: 1.7rem; }
.ai-proof-copy > p:not(.ai-small-label) { font-size: 0.95rem; }
.ai-proof-copy .ai-text-link { margin-top: 0.6rem; font-size: 0.9rem; }
.ai-delivery { background: var(--ai-dark); }
.ai-delivery h2, .ai-delivery h3 { color: #fff; }
.ai-delivery .eyebrow { color: #ffc58e; }
.ai-delivery p { color: #c0c7d3; }
.ai-process { list-style: none; padding: 0; margin: 2.75rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.ai-process li { padding-top: 1.2rem; border-top: 1px solid #505969; }
.ai-process li > span { color: #ffc58e; font-size: 0.85rem; display: block; margin-bottom: 1.4rem; }
.ai-process h3 { font-size: 1.25rem; }
.ai-process p { font-size: 0.88rem; margin-bottom: 0; }
.ai-control { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; margin-top: 3rem; padding: 1.5rem 1.75rem; border: 1px solid #485162; border-radius: 0.85rem; background: #1c2739; }
.ai-control h3 { margin: 0; max-width: 18ch; font-size: 1.6rem; }
.ai-control p { font-size: 0.9rem; margin: 0; }
.ai-pricing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.ai-pricing-layout .button { margin-top: 0.75rem; }
.ai-costs { margin: 0; border-top: 1px solid #d8d1c7; }
.ai-costs > div { padding: 1.1rem 0; border-bottom: 1px solid #d8d1c7; }
.ai-costs dt { display: flex; align-items: center; gap: 0.8rem; font-size: 1.05rem; font-weight: 650; }
.ai-costs dt > span { color: #8f410f; font-size: 0.7rem; }
.ai-costs dd { margin: 0.4rem 0 0 1.8rem; font-size: 0.9rem; color: var(--muted); }
.ai-faq-section { padding-top: 0; }
.ai-faq-layout { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 4rem; padding-top: 3.5rem; border-top: 1px solid #ddd6cd; }
.ai-faq-layout h2 { max-width: 10ch; }
.ai-faqs details { border-bottom: 1px solid #d8d1c7; padding: 1.15rem 0; }
.ai-faqs details:first-child { padding-top: 0; }
.ai-faqs summary { position: relative; list-style: none; padding-right: 2rem; cursor: pointer; font-weight: 650; font-size: 1.05rem; line-height: 1.4; color: var(--ink); }
.ai-faqs summary::-webkit-details-marker { display: none; }
.ai-faqs summary::after { content: "+"; position: absolute; right: 0.1rem; top: 0; font-weight: 400; color: #934212; font-size: 1.3rem; line-height: 1.15; }
.ai-faqs details[open] summary::after { content: "−"; }
.ai-faqs summary:focus-visible { outline: 2px solid #8f410f; outline-offset: 5px; border-radius: 2px; }
.ai-faqs p { margin-bottom: 0.3rem; font-size: 0.95rem; }
.ai-final-section { padding-top: 0; }
.ai-final-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 1rem; background: #f6e4d2; }
.ai-final-cta h2 { font-size: clamp(2.6rem, 4.5vw, 3.75rem); }
.ai-final-cta > div > p:not(.eyebrow) { max-width: 38rem; }
.ai-final-cta .hero-actions { align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.ai-final-cta aside { align-self: center; padding: 1.75rem; background: #fffaf4; border: 1px solid #e7cdb2; border-radius: 0.7rem; }
.ai-final-cta aside p { font-size: 1.25rem; line-height: 1.7; letter-spacing: -0.025em; color: var(--ink); }
.ai-final-cta aside > span:last-child { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 1100px) {
  .ai-hero-layout { gap: 2.1rem; }
  .ai-services-grid { gap: 0.8rem; }
  .ai-service { padding: 1.2rem; }
  .ai-service-label { font-size: 0.6rem; }
  .ai-process { gap: 1.2rem; }
  .ai-pricing-layout, .ai-faq-layout { gap: 2.5rem; }
}
@media (max-width: 900px) {
  .ai-hero-layout { grid-template-columns: 1fr; }
  .ai-hero-copy h1 { max-width: 14ch; font-size: clamp(3.5rem, 8vw, 5rem); }
  .ai-hero-copy > p:not(.eyebrow) { max-width: 45rem; }
  .ai-workflow { max-width: 40rem; width: 100%; margin-inline: auto; }
  .ai-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .ai-service { padding: 1.5rem; }
  .ai-service-label { font-size: 0.7rem; }
  .ai-section-heading { gap: 2rem; }
  .ai-intro-strip > .wrap { align-items: start; flex-direction: column; gap: 0.75rem; }
  .ai-process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
  .ai-approach-grid, .ai-proof-grid { gap: 1.4rem; }
  .ai-proof-visual { height: 13rem; }
  .ai-document { width: 6rem; height: 8.5rem; padding: 1rem 0.6rem; }
  .ai-proof-documents { gap: 0.65rem; }
  .ai-document b { font-size: 0.45rem; }
  .ai-map-zone-one { left: 8%; }
  .ai-map-zone-two { right: -10%; }
  .ai-map-label-two { right: 4%; }
  .ai-final-cta { gap: 1.5rem; }
  .ai-final-cta aside { padding: 1.2rem; }
}
@media (max-width: 640px) {
  .ai-page .hero-actions .button { flex: 0 0 auto; }
  .ai-hero { padding: 2.7rem 0 2.5rem; }
  .ai-hero-copy h1 { font-size: clamp(3rem, 13vw, 4rem); max-width: 12ch; }
  .ai-hero-copy .ai-lead { font-size: 1.15rem; }
  .ai-hero-copy .hero-actions { align-items: start; flex-direction: column; gap: 1.1rem; }
  .ai-hero-copy .ai-hero-note { font-size: 0.72rem; }
  .ai-workflow { padding: 1.4rem 1.15rem; border-radius: 1rem; }
  .ai-workflow-top { margin-bottom: 1.5rem; font-size: 0.61rem; }
  .ai-workflow figcaption { font-size: 1.7rem; }
  .ai-workflow-steps strong { font-size: 0.9rem; }
  .ai-workflow-steps div > span { font-size: 0.75rem; }
  .ai-section-heading, .ai-approach-grid, .ai-proof-grid, .ai-pricing-layout, .ai-faq-layout, .ai-final-cta, .ai-control { grid-template-columns: 1fr; gap: 1.5rem; }
  .ai-section-heading h2 br { display: none; }
  .ai-section-heading > p { max-width: none; }
  .ai-services-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .ai-service h3 { font-size: 1.6rem; }
  .ai-service-label { margin-bottom: 1rem; }
  .ai-catalogue-end { align-items: start; flex-direction: column; gap: 0.75rem; }
  .ai-approach-grid h3 { max-width: 24ch; }
  .ai-proof-visual { height: 13.5rem; }
  .ai-document { width: 7rem; height: 9rem; padding: 1rem; }
  .ai-document b { font-size: 0.5rem; }
  .ai-proof-documents { gap: 1rem; }
  .ai-map-zone-one { left: 13%; }
  .ai-map-zone-two { right: 3%; }
  .ai-process { gap: 1.6rem 1.25rem; }
  .ai-process h3 { font-size: 1.2rem; }
  .ai-process p { font-size: 0.84rem; }
  .ai-control { padding: 1.35rem; }
  .ai-control h3 { max-width: none; }
  .ai-faq-layout { padding-top: 2.5rem; }
  .ai-faq-layout h2 { max-width: none; }
  .ai-final-cta { width: var(--wrap); padding: 1.5rem; }
  .ai-final-cta h2 { font-size: clamp(2.45rem, 10vw, 3rem); }
  .ai-final-cta .hero-actions { align-items: start; flex-direction: column; gap: 1.1rem; }
  .ai-final-cta aside { padding: 1.3rem; }
}
@media (max-width: 360px) {
  .ai-process { grid-template-columns: 1fr; }
  .ai-service { padding: 1.2rem; }
  .ai-jump-links a { font-size: 0.75rem; padding: 0.55rem 0.7rem; }
}