.zapier-home { background: #fff; color: #111214; font-family: 'Inter', sans-serif; }
.zapier-home * { font-family: inherit; }
.zapier-home p { margin-block: 1em; }
.zapier-home [hidden] { display: none !important; }
.zapier-home a:focus-visible, .zapier-home summary:focus-visible { outline: 3px solid #ba5100; outline-offset: 5px; border-radius: 4px; }
.zp-announcement { background: #111214; color: #fff; padding: 10px 20px; text-align: center; font-size: 12px; letter-spacing: .04em; }
.zp-announcement strong { color: #ffc98e; }
.zp-hero { padding: 88px 0 80px; background: linear-gradient(118deg, #fff 47%, #fff9f2); }
.zp-hero-grid { display: grid; grid-template-columns: 1.14fr 1fr; gap: 65px; align-items: center; }
.zp-hero h1 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: clamp(44px, 4.5vw, 64px); font-weight: 800; line-height: 1.06; letter-spacing: -.045em; margin: 22px 0 25px; }
.zp-hero h1 em { color: #d95f00; font-style: normal; }
.zp-lead { color: #55585f; font-size: 18px; line-height: 1.7; max-width: 560px; }
.zp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.zp-actions .api-button { font-size: 14px; padding: 14px 18px; min-height: 51px; }
.zp-small { font-size: 13px; line-height: 1.65; color: #666970; }
.zp-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.zp-hero-tags span { border: 1px solid #e8ddd1; border-radius: 30px; padding: 6px 10px; font-size: 11px; color: #6b5847; background: #fffaf4; }
.zp-workflow { background: #fff; border: 1px solid #e5e0d9; box-shadow: 0 28px 70px #4e321314; border-radius: 16px; padding: 26px; transform: rotate(1deg); }
.zp-workflow-top { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #64666b; display: flex; gap: 8px; align-items: center; padding-bottom: 23px; }
.zp-dot { background: #37814b; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.zp-flow-step { display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid #e4e5e6; border-radius: 10px; }
.zp-flow-step > div { min-width: 0; }
.zp-flow-step small { display: block; font-size: 10px; color: #686b73; font-weight: 600; letter-spacing: .025em; margin-bottom: 4px; }
.zp-flow-step strong { display: block; font-size: 17px; letter-spacing: -.03em; }
.zp-flow-step p { font-size: 11px; color: #67696e; margin: 5px 0 0; overflow-wrap: anywhere; }
.zp-flow-featured { border-color: #ffb775; background: #fff7ee; }
.zp-app-icon { align-items: center; justify-content: center; display: inline-flex; width: 48px; height: 48px; border-radius: 12px; font-size: 22px; font-weight: 800; flex-shrink: 0; }
.zp-app-icon.drive { background: #edf6ee; color: #277543; }
.zp-app-icon.docs { background: #edf2ff; color: #325eb0; }
.zp-app-icon.dropbox { background: #e9f2ff; color: #1261bc; }
.zp-app-icon.onedrive { background: #ebf7ff; color: #076da2; }
.zp-app-icon.fta { background: #ffe3c6; }
.zp-app-icon.ink { background: #efefed; color: #202123; }
.zp-app-icon.plum { background: #f4eaf3; color: #702a68; }
.zp-app-icon.red { background: #fcebea; color: #b62f38; }
.zp-app-icon.violet { background: #eeedff; color: #5755a7; }
.zp-app-icon.gold { background: #fff4d4; color: #866000; }
.zp-app-icon.coral { background: #ffede3; color: #b84825; }
.zp-app-icon.teal { background: #e5f4f1; color: #1d6660; }
.zp-app-icon img { width: 28px; height: 28px; }
.zp-step-check { margin-left: auto; color: #357649; font-weight: 700; }
.zp-connector { text-align: center; color: #b16a2f; height: 29px; line-height: 29px; }
.zp-workflow-note { color: #757575; font-size: 11px; text-align: center; margin-top: 20px; }
.zp-section { padding: 86px 0; }
.zp-soft { background: #f6f6f3; }
.zp-section h2, .zp-final h2 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.13; letter-spacing: -.04em; margin: 14px 0 18px; }
.zp-section-heading { max-width: 720px; margin-bottom: 36px; }
.zp-section-heading > p:last-child { color: #666970; }
.zp-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.zp-explain-card { padding: 26px 28px; border-left: 2px solid #ffd3a8; }
.zp-number { font-size: 12px; font-weight: 800; color: #ba5100; letter-spacing: .1em; }
.zp-section h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.025em; margin: 18px 0 12px; }
.zp-explain-card p { color: #666970; font-size: 14px; line-height: 1.8; }
.zp-route-note { margin: 22px 0 0; }
.zp-faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 75px; align-items: start; }
.zp-inline-link, .zp-faq a { color: #ae4a00; text-decoration: underline; text-underline-offset: 3px; }
.zp-apps-section { background: #f6f6f3; border-block: 1px solid #e9e9e4; }
.zp-apps-heading { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.zp-apps-heading .zp-section-heading { max-width: 690px; }
.zp-directory-link { flex-shrink: 0; padding: 22px 0 22px 30px; border-left: 2px solid #ff9c46; }
.zp-directory-link strong { display: block; font-family: 'Inter Tight', sans-serif; font-size: 35px; letter-spacing: -.035em; }
.zp-directory-link span { display: block; font-size: 12px; margin-top: 8px; color: #934900; text-decoration: underline; text-underline-offset: 3px; }
.zp-app-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.zp-app-wall > a { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 16px; background: #fff; border: 1px solid #e0e0da; border-radius: 12px; transition: transform .15s, border-color .15s; }
.zp-app-wall > a:hover { transform: translateY(-3px); border-color: #d4772b; }
.zp-app-wall .zp-app-icon { width: 42px; height: 42px; font-size: 20px; margin-bottom: 17px; }
.zp-app-wall strong { font-size: 13px; line-height: 1.45; }
.zp-app-wall small { font-size: 10px; color: #717169; margin-top: 5px; line-height: 1.5; }
.zp-app-disclaimer { max-width: 960px; margin: 24px 0 15px; }
.zp-apps-section > div > .zp-inline-link { font-size: 14px; font-weight: 650; }
.zp-recipe { display: flex; flex-direction: column; padding: 26px 22px; background: #fff; border: 1px solid #dedfdf; border-radius: 12px; min-width: 0; }
.zp-use-case { font-size: 10px; color: #a64900; font-weight: 700; letter-spacing: .055em; }
.zp-recipe h3 { margin-bottom: 24px; }
.zp-recipe-flow { list-style: none; padding: 0; margin: 0; }
.zp-recipe-flow li { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 10px; border: 1px solid #e4e5e6; border-radius: 8px; }
.zp-recipe-flow li + li { margin-top: 25px; }
.zp-recipe-flow li + li::before { content: '↓'; position: absolute; top: -24px; left: calc(50% - 4px); color: #ae5b1a; font-size: 16px; }
.zp-recipe-flow .zp-app-icon { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
.zp-recipe-flow strong { display: block; font-size: 12px; line-height: 1.4; }
.zp-recipe-flow small { display: block; font-size: 11px; color: #666970; line-height: 1.6; margin-top: 4px; }
.zp-recipe-flow .zp-recipe-ai { background: #fff7ef; border-color: #f4bc8b; }
.zp-recipe > p { font-size: 13px; line-height: 1.8; color: #666970; margin: 20px 0; }
.zp-recipe > a { margin-top: auto; font-size: 12px; font-weight: 650; }
.zp-features { gap: 30px; }
.zp-features > article { padding: 26px; border: 1px solid #e9e3dc; border-radius: 12px; }
.zp-feature-symbol { display: inline-flex; height: 38px; min-width: 38px; padding: 0 8px; align-items: center; justify-content: center; background: #fff0e0; color: #ad4b00; border-radius: 9px; font-size: 16px; font-weight: 750; }
.zp-features p { font-size: 14px; line-height: 1.8; color: #666970; margin-bottom: 0; }
.zp-get-started { background: #fff5e9; border-block: 1px solid #f0dcc6; padding: 40px 0; }
.zp-get-started > div { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.zp-get-started h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.03em; margin: 12px 0; }
.zp-get-started p:last-child { font-size: 14px; color: #76604a; max-width: 720px; line-height: 1.8; }
.zp-get-started .api-button { flex-shrink: 0; font-size: 14px; }
.zp-faq-grid > div:first-child > p:last-child { font-size: 14px; line-height: 1.8; color: #666970; max-width: 350px; }
.zp-faq details { border-bottom: 1px solid #dcded7; padding: 20px 0; }
.zp-faq details:first-child { padding-top: 0; }
.zp-faq summary { display: flex; gap: 20px; justify-content: space-between; font-size: 15px; font-weight: 650; cursor: pointer; list-style: none; }
.zp-faq summary::-webkit-details-marker { display: none; }
.zp-faq summary::after { content: '+'; color: #ac4a00; font-size: 20px; }
.zp-faq details[open] summary::after { content: '−'; }
.zp-faq details p { color: #666970; font-size: 14px; line-height: 1.85; margin-bottom: 0; }
.zp-final { text-align: center; background: #131416; padding: 80px 0; color: #fff; }
.zp-final .api-eyebrow { justify-content: center; color: #ffc997; }
.zp-final h2 { margin-bottom: 30px; }
.zp-final > div > p:last-child { font-size: 13px; color: #b6b7b9; margin-top: 24px; }
.zp-final > div > p:last-child a { color: #fff; text-decoration: underline; }
.zp-footer { padding: 30px 0; }
.zp-footer > div { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.zp-footer img { width: 185px; height: auto; }
.zp-footer p, .zp-footer nav { font-size: 12px; color: #666970; }
.zp-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 1000px) {
  .zp-hero-grid { gap: 30px; }
  .zp-faq-grid { gap: 38px; }
  .zp-app-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zp-apps-heading { align-items: flex-start; }
  .zp-directory-link { padding-left: 18px; }
  .zp-directory-link strong { font-size: 29px; }
  .zp-recipes { grid-template-columns: 1fr; }
  .zp-recipe-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .zp-recipe-flow li + li { margin-top: 0; }
  .zp-recipe-flow li + li::before { content: '→'; left: -22px; top: calc(50% - 13px); }
}
@media (max-width: 760px) {
  .zapier-home .api-shell { padding-inline: 20px; }
  .zp-hero { padding: 45px 0; }
  .zp-hero-grid, .zp-faq-grid, .zp-three-grid { grid-template-columns: 1fr; }
  .zp-hero-grid { gap: 30px; }
  .zp-hero h1 { font-size: clamp(38px, 9vw, 54px); }
  .zp-lead { font-size: 16px; }
  .zp-actions { flex-direction: column; }
  .zp-actions .api-button { width: 100%; }
  .zp-workflow { transform: none; padding: 18px; }
  .zp-flow-step { padding: 14px; gap: 12px; }
  .zp-flow-step strong { font-size: 15px; }
  .zp-workflow-top { font-size: 10px; }
  .zp-apps-heading, .zp-get-started > div { display: block; }
  .zp-directory-link { display: block; margin: 0 0 24px; padding: 4px 0 4px 16px; }
  .zp-app-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .zp-app-wall > a { padding: 15px 10px; }
  .zp-app-wall strong { font-size: 12px; }
  .zp-get-started .api-button { margin-top: 12px; }
  .zp-recipe-flow { display: block; }
  .zp-recipe-flow li + li { margin-top: 25px; }
  .zp-recipe-flow li + li::before { content: '↓'; top: -24px; left: calc(50% - 4px); }
  .zp-section { padding: 48px 0; }
  .zp-section-heading { margin-bottom: 25px; }
  .zp-final { padding: 48px 0; }
  .zp-footer > div { gap: 15px; }
}
@media (max-width: 420px) {
  .zp-app-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .zapier-home { scroll-behavior: auto; }
  .zp-app-wall > a { transition: none; }
}