/* Home3: a calm, editorial alternative built on the functional Home2. */
.homepage {
  --wrap: 1180px;
  --ink: #1c2028;
  --muted: #717681;
  --line: #e5e7ed;
  background: var(--paper);
  color: var(--ink);
}
/* Use the shared full-width header; keep this design’s logo treatment below. */
.homepage .site-header {
  height: 72px;
  background: #fbfbfdcc;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.homepage .nav-buy { border-radius: 9px; }
.homepage .btn { border-radius: 9px; }
.homepage .btn-dark { background: #22242b; border-color: #22242b; }
.homepage .btn-dark:hover { background: #353a46; border-color: #353a46; }
.homepage .hero.wrap { position: relative; width: min(var(--wrap), calc(100% - 64px)); isolation: isolate; padding: 40px 0 0; }
.homepage .hero-label,
.homepage .hero h1,
.homepage .hero-copy,
.homepage .hero-actions,
.homepage .hero-checks { position: relative; z-index: 1; }
.homepage .hero-label { font-size: 14px; color: var(--muted); gap: 9px; }
.homepage .tiny-mark { background: var(--accent); }
.homepage .hero h1 { font-size: clamp(46px, 5.1vw, 68px); line-height: 1.08; font-weight: 600; letter-spacing: -.055em; margin-top: 20px; }
.homepage .hero h1 > span { color: var(--accent); }
.homepage .hero-copy { color: var(--muted); font-size: 17px; line-height: 1.65; margin-top: 22px; }
.homepage .hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 26px; }
.homepage .hero-actions .btn { min-height: 48px; font-size: 14px; padding: 13px 22px; }
.homepage .hero-secondary { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: #525b69; }
.homepage .hero-secondary:hover { color: var(--accent); }
.homepage .hero-secondary .icon { width: 17px; height: 17px; }
.homepage .connection-landscape { position: relative; width: 100%; height: 290px; margin: 28px auto 0; border: 0; isolation: isolate; }
.homepage .connection-landscape::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 600px; z-index: -1; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 50%, #fbfafd 70%, #f9f8fe 77%, #f6f5ff 100%); pointer-events: none; }
.homepage .landscape-contours { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; border-radius: 0 0 22px 22px; pointer-events: none; }
.homepage .hero-connection-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 350px; padding: 18px 22px; text-align: left; border: 1px solid #ffffffc9; border-radius: 15px; background: #ffffffc9; backdrop-filter: blur(16px); box-shadow: 0 22px 44px -24px #414b8140, 0 1px 2px #fff9 inset; }
.homepage .connection-card-label { display: flex; align-items: center; gap: 9px; color: #4d5565; font-size: 12px; font-weight: 500; }
.homepage .connection-card-mark { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border: 1px solid #e0e3f3; border-radius: 8px; color: #656bd4; }
.homepage .connection-card-mark .icon { width: 16px; height: 16px; }
.homepage .connection-example { font-size: 10px; font-weight: 400; color: #858b99; margin-left: auto; }
.homepage .connection-route { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 12px; color: #77808e; }
.homepage .connection-route > :last-child { font-size: 10px; letter-spacing: .05em; }
.homepage .hero-connection-card > code { display: block; margin-top: 6px; font-size: 20px; font-weight: 500; letter-spacing: -.06em; color: #303744; }
.homepage .hero-connection-card > code > span { color: #7a82a0; }
.homepage .connection-card-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e3e7f1; padding-top: 12px; margin-top: 18px; font-size: 11px; color: #77808e; }
.homepage .connection-card-bottom a { display: grid; place-items: center; border: 1px solid #e0e4ef; border-radius: 50%; width: 27px; height: 27px; background: #ffffff7a; color: #6069bd; }
.homepage .connection-card-bottom a .icon { width: 15px; height: 15px; }
.homepage .landscape-endpoint { position: absolute; display: inline-flex; align-items: center; gap: 8px; color: #6c7590; font-size: 12px; padding: 9px 13px; border-radius: 50px; background: #ffffff78; border: 1px solid #ffffff80; }
.homepage .endpoint-start { left: 9%; top: 49%; }
.homepage .endpoint-finish { right: 7%; top: 49%; }
.homepage .endpoint-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.homepage .landscape-caption { position: absolute; bottom: 17px; left: 22px; color: #7b8498; font-size: 11px; }
.homepage .hero-checks { margin-top: 18px; font-size: 12px; color: #717681; gap: 30px; }
.homepage .hero-checks .icon { color: #62696c; width: 15px; height: 15px; }
.homepage .products-section { padding-top: 104px; }
.homepage .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .13em; color: var(--accent); margin-bottom: 17px; }
.homepage .section-heading h2,
.homepage .connect-section h2,
.homepage .faq-section h2 { font-size: 42px; line-height: 1.15; font-weight: 600; letter-spacing: -.045em; }
.homepage .section-heading > p { color: #717681; font-size: 14px; line-height: 1.8; max-width: 320px; }
.homepage .plan-grid { margin-top: 32px; gap: 20px; }
.homepage .plan-card { padding: 28px; border-color: #e1e3eb; border-radius: 15px; box-shadow: none; }
.homepage .plan-card:hover { border-color: #c6c8dc; box-shadow: 0 14px 35px -24px #38467440; }
.homepage .plan-card.featured { background: #f8f9ff; border-color: #d4d7f8; }
.homepage .product-heading { margin-bottom: 18px; }
.homepage .product-heading h2 { font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.homepage .plan-description { font-size: 14px; line-height: 1.75; min-height: 50px; }
.homepage .plan-card .btn { min-height: 45px; }
.homepage .plans-foot { font-size: 12px; margin-top: 22px; color: #858c99; }
.homepage .workflow { padding: 110px 0 105px; }
.homepage .workflow .section-heading { margin-bottom: 40px; }
.homepage .steps-grid { gap: 40px; }
.homepage .steps-grid article { border-color: #e5e7ed; }
.homepage .steps-grid h3 { font-size: 19px; font-weight: 600; letter-spacing: -.035em; }
.homepage .steps-grid p { font-size: 14px; line-height: 1.8; color: #717681; }
.homepage .dashboard-section { background: #f4f5fb; border: 0; padding: 92px 0 46px; }
.homepage .dashboard-section .section-heading { margin-bottom: 42px; }
.homepage .workspace { border-color: #e0e3f0; border-radius: 16px; box-shadow: 0 22px 52px -35px #303d6666; }
.homepage .dashboard-caption { margin-top: 25px; font-size: 12px; color: #858b99; }
.homepage .connect-section { padding: 106px 0; gap: 86px; }
.homepage .section-copy { font-size: 15px; line-height: 1.85; color: #717681; }
.homepage .protocol-tags { margin-top: 25px; }
.homepage .protocol-tags span { border-color: #e5e7f0; background: #f5f6fb; color: #778095; }
.homepage .code-card { border-color: #e1e4ef; border-radius: 15px; box-shadow: 0 2px 6px -2px #303d6608, 0 14px 35px -18px #303d6626; }
.homepage .code-card-top { border-color: #e8eaf2; }
.homepage .code-note { border-color: #e8eaf2; }
.homepage .faq-section { padding: 70px 0 96px; border-color: #e7eaf2; gap: 90px; }
.homepage .faq-list summary { font-size: 15px; font-weight: 500; letter-spacing: -.015em; }
.homepage .faq-list p { font-size: 14px; color: #717681; line-height: 1.8; }
.homepage .faq-list details { border-color: #e5e7ef; }
.homepage .final-cta { background: #eeeefa; border: 1px solid #e5e2f3; padding: 40px 45px; border-radius: 15px; }
.homepage .final-cta h2 { font-size: 32px; font-weight: 600; letter-spacing: -.045em; }
.homepage .final-cta p { font-size: 14px; color: #737d93; }
.homepage .cta-mark { opacity: .025; }
.homepage .footer.wrap { width: min(var(--wrap), calc(100% - 64px)); }
@media (max-width: 1000px) {
  .homepage .endpoint-start { left: 4%; }
  .homepage .endpoint-finish { right: 3%; }
  .homepage .landscape-endpoint { font-size: 10px; padding: 8px 10px; }
  .homepage .hero-connection-card { width: 330px; }
  .homepage .plan-card { padding: 23px; }
  .homepage .connect-section { gap: 50px; }
}
@media (max-width: 800px) {
  .homepage .site-header { height: 60px; }
  .homepage .hero.wrap { width: calc(100% - 40px); padding-top: 42px; }
  .homepage .hero h1 { font-size: 56px; }
  .homepage .hero-copy { font-size: 16px; }
  .homepage .connection-landscape { height: 260px; }
  .homepage .footer.wrap { width: calc(100% - 40px); }
  .homepage .endpoint-start { left: 4%; top: auto; bottom: 42px; }
  .homepage .endpoint-finish { right: 4%; top: 29px; }
  .homepage .products-section { padding-top: 80px; }
  .homepage .section-heading h2,
  .homepage .connect-section h2,
  .homepage .faq-section h2 { font-size: 36px; }
  .homepage .plan-grid { gap: 12px; }
  .homepage .plan-card { padding: 20px 16px; }
  .homepage .product-heading h2 { font-size: 19px; }
  .homepage .workflow { padding: 80px 0; }
  .homepage .steps-grid { gap: 22px; }
  .homepage .steps-grid h3 { font-size: 17px; }
  .homepage .dashboard-section { padding-top: 70px; }
  .homepage .connect-section { padding: 80px 0; gap: 38px; }
  .homepage .faq-section { gap: 38px; }
}
@media (max-width: 600px) {
  .homepage .site-header { height: 60px; }
  .homepage .hero.wrap { width: calc(100% - 36px); padding-top: 35px; }
  .homepage .hero-label { font-size: 11px; }
  .homepage .hero h1 { font-size: clamp(43px, 11vw, 55px); margin-top: 19px; }
  .homepage .hero-copy { font-size: 15px; margin-top: 20px; max-width: 290px; }
  .homepage .hero-copy br { display: none; }
  .homepage .hero-actions { gap: 19px; flex-direction: column; margin-top: 24px; }
  .homepage .hero-actions .btn { min-height: 45px; }
  .homepage .connection-landscape { height: 290px; margin-top: 24px; }
  .homepage .connection-landscape::before { height: 550px; }
  .homepage .landscape-contours { border-radius: 0 0 15px 15px; }
  .homepage .footer.wrap { width: calc(100% - 36px); }
  .homepage .hero-connection-card { width: calc(100% - 36px); max-width: 330px; padding: 18px; }
  .homepage .connection-card-label { font-size: 11px; gap: 7px; }
  .homepage .connection-card-mark { width: 25px; height: 25px; }
  .homepage .connection-example { font-size: 9px; }
  .homepage .hero-connection-card > code { font-size: 20px; }
  .homepage .landscape-endpoint { display: none; }
  .homepage .landscape-caption { bottom: 13px; left: 17px; font-size: 10px; }
  .homepage .hero-checks { font-size: 11px; gap: 12px 16px; margin-top: 18px; }
  .homepage .products-section { padding-top: 65px; }
  .homepage .section-heading h2,
  .homepage .connect-section h2,
  .homepage .faq-section h2 { font-size: 33px; }
  .homepage .section-heading > p { font-size: 14px; margin-top: 17px; }
  .homepage .plan-grid { gap: 17px; margin-top: 27px; }
  .homepage .plan-card { padding: 25px; }
  .homepage .product-heading h2 { font-size: 22px; }
  .homepage .plan-description { min-height: 0; }
  .homepage .plans-foot { font-size: 12px; }
  .homepage .workflow { padding: 68px 0; }
  .homepage .workflow .section-heading { margin-bottom: 32px; }
  .homepage .steps-grid { gap: 27px; }
  .homepage .steps-grid h3 { font-size: 19px; }
  .homepage .dashboard-section { padding: 62px 0 32px; }
  .homepage .dashboard-section .section-heading { margin-bottom: 30px; }
  .homepage .dashboard-caption { font-size: 12px; }
  .homepage .connect-section { padding: 67px 0; gap: 30px; }
  .homepage .section-copy { font-size: 15px; }
  .homepage .faq-section { padding: 50px 0 62px; gap: 29px; }
  .homepage .final-cta { padding: 29px 25px; }
  .homepage .final-cta h2 { font-size: 30px; }
}
/* Short laptop displays keep the hero together without shrinking its text. */
@media (min-width: 801px) and (max-height: 760px) {
  .homepage .hero.wrap { padding-top: 32px; }
  .homepage .hero h1 { margin-top: 16px; }
  .homepage .hero-copy { margin-top: 18px; }
  .homepage .hero-actions { margin-top: 22px; }
  .homepage .connection-landscape { height: 280px; margin-top: 24px; }
  .homepage .hero-checks { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage .plan-card { transition: none; }
}

/* Home1's quieter workflow typography, on Home3's wider content grid. */
.homepage .workflow { padding: 104px 0 95px; }
.homepage .workflow .section-heading { margin-bottom: 35px; }
.homepage .workflow h2 { font-weight: 650; letter-spacing: -.055em; }
.homepage .workflow .eyebrow { letter-spacing: .12em; margin-bottom: 14px; }
.homepage .workflow .section-heading > p { max-width: 310px; }
.homepage .steps-grid { gap: 30px; }
.homepage .steps-grid h3 { font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
@media (max-width: 800px) { .homepage .workflow { padding: 75px 0; } .homepage .steps-grid { gap: 23px; } .homepage .steps-grid h3 { font-size: 15px; } }
@media (max-width: 600px) { .homepage .workflow { padding: 65px 0; } .homepage .workflow .section-heading { margin-bottom: 30px; } .homepage .steps-grid { gap: 27px; } .homepage .steps-grid h3 { font-size: 17px; } }

/* Original Home2 wordmark with a slightly smaller, centered filled mark. */
.homepage .site-header .brand { align-items: center; }
.homepage .site-header .brand img,
.homepage .footer .brand img { width: 30px; height: 30px; transform: translateY(2px); }
@media (max-width: 600px) {
  .homepage .site-header .brand img,
  .homepage .footer .brand img { width: 27px; height: 27px; }
}

/* Keep closing surfaces and social controls in the shared violet family. */
.homepage .footer .footer-socials a { background: #eeeefa; border-color: #e5e2f3; color: var(--accent); }
.homepage .footer .footer-socials a:hover { background: #e5e0fa; border-color: #d6cef3; color: var(--accent-hover); }