:root { --pad: clamp(20px, 12vw, 228px); }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: #000; color: #fff; }
  body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

  nav { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); }
  .nav-left { display: flex; align-items: center; gap: 32px; }
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; color: #fff; text-decoration: none; }
  .logo-mark { height: 26px; width: auto; display: block; }
  .links { display: flex; gap: 28px; }
  .links a { color: #d9d9d9; text-decoration: none; font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
  .links a:hover { color: #fff; }
  .chev { width: 9px; height: 9px; opacity: .7; transition: transform .15s ease; }
  .dd { position: relative; }
  .dd-btn { all: unset; cursor: pointer; color: #d9d9d9; font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
  .dd-btn:hover, .dd.open .dd-btn { color: #fff; }
  .dd-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
  .dd.open .chev { transform: rotate(180deg); }
  .menu { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 280px; background: #0f0f0f; border: 1px solid #242424; border-radius: 14px; padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.6);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 20; }
  .dd.open .menu { opacity: 1; visibility: visible; transform: none; }
  .dd::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
  .links .menu a { display: block; padding: 10px 12px; border-radius: 9px; }
  .links .menu a:hover { background: #1a1a1a; }
  .menu b { display: block; color: #fff; font-size: 14px; font-weight: 600; }
  .menu span { display: block; color: #8a8a8a; font-size: 13px; font-weight: 400; margin-top: 2px; }
  .nav-right { display: flex; align-items: center; gap: 16px; }
  .signin { color: #d9d9d9; text-decoration: none; font-size: 15px; font-weight: 500; }

  .hero { padding: clamp(56px, 11vh, 120px) var(--pad) 0; }
  h1 { margin: 0; font-size: clamp(30px, 3.4vw, 50px); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; }
  .cta { display: inline-block; margin-top: 36px; background: #fff; color: #000; font-weight: 500; font-size: 16px; padding: 11px 17px; border-radius: 9px; text-decoration: none; }
  .cta:hover { background: #e8e8e8; }

  .rail { display: flex; gap: 12px; margin-top: clamp(48px, 9vh, 96px); padding: 0 var(--pad);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .rail::after { content: ''; flex: none; width: 1px; }
  .card { flex: none; border-radius: 16px; position: relative; overflow: hidden; border: 1px solid #1f1f1f; scroll-snap-align: start; }
  .arrows { display: flex; gap: 10px; padding: 20px var(--pad) 48px; }
  .arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2a2a2a; background: #0c0c0c; color: #fff; cursor: pointer; display: grid; place-items: center; }
  .arrow:hover { background: #1a1a1a; }
  .arrow svg { width: 14px; height: 14px; }
  .shot { flex: 0 0 calc((100% - 12px) / 2); aspect-ratio: 1.6 / 1; background: #fff; }
  .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .tag { position: absolute; left: 16px; bottom: 16px; padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #fff;
    background: rgba(0,0,0,.78); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .about { padding: clamp(40px, 8vh, 90px) var(--pad) 0; }
  .about h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; max-width: 20ch; }
  .lead { margin: 18px 0 0; color: #9a9a9a; font-size: 18px; line-height: 1.5; max-width: 46ch; }
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 48px; }
  .feature { border: 1px solid #1f1f1f; border-radius: 16px; padding: 28px; background: #0b0b0b; }
  .feature .n { color: #6f6f6f; font-size: 13px; font-weight: 500; }
  .feature h3 { margin: 40px 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
  .feature p { margin: 0; color: #9a9a9a; font-size: 15px; line-height: 1.55; }

  footer { margin-top: clamp(72px, 12vh, 140px); border-top: 1px solid #1a1a1a; padding: 56px var(--pad) 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
  .foot-brand .logo { margin-bottom: 14px; }
  .foot-brand p { margin: 0; color: #7a7a7a; font-size: 14px; line-height: 1.5; max-width: 28ch; }
  .foot-col h4 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: #7a7a7a; }
  .foot-col a { display: block; color: #d9d9d9; text-decoration: none; font-size: 15px; padding: 5px 0; }
  .foot-col a:hover { color: #fff; }
  .foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid #151515; color: #6f6f6f; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

  @media (min-width: 761px) {
    .arrows { display: none; }
    .rail::after { display: none; }
    .rail { padding-bottom: 56px; }
  }
  @media (max-width: 760px) {
    .links, .signin { display: none; }
    .features { grid-template-columns: 1fr; }
    .feature h3 { margin-top: 24px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1 / -1; }
    .shot { flex-basis: 86%; }
    .tag { left: 10px; bottom: 10px; padding: 6px 12px; font-size: 12.5px; }
  }

  .shot { text-decoration: none; color: inherit; display: block; transition: transform .2s ease, border-color .2s ease; }
  a.shot:hover { transform: translateY(-3px); border-color: #3a3a3a; }
  .tag::after { content: ' \2192'; }

  .page { padding: clamp(48px, 9vh, 100px) var(--pad) 0; }
  .page h1 { max-width: 20ch; }
  .page .lead { margin-top: 20px; }
  .hero-shot { margin-top: clamp(40px, 7vh, 72px); border-radius: 16px; overflow: hidden; border: 1px solid #1f1f1f; aspect-ratio: 1.6 / 1; background: #fff; }
  .hero.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 48px; }
  .plan { border: 1px solid #1f1f1f; border-radius: 16px; padding: 32px; background: #0b0b0b; min-height: 240px; }
  .plan h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
  .plan p { margin: 0; color: #9a9a9a; font-size: 15px; line-height: 1.55; }
  .plan .price { margin-top: 40px; font-size: 20px; font-weight: 600; color: #fff; }
  @media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

  /* Pricing: black page, charcoal plan table with soft lift */
  .pricing { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #34363b; border-radius: 16px; margin-top: 48px; overflow: hidden; background: #26282c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 48px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5); }
  .tier { padding: 24px; display: flex; flex-direction: column; border-left: 1px solid #34363b; }
  .tier:first-child { border-left: 0; }
  .tier-head { padding-bottom: 20px; border-bottom: 1px solid #34363b; min-height: 92px; }
  .tier-head b { display: block; font-size: 18px; font-weight: 600; color: #fff; }
  .tier-head span { display: block; margin-top: 4px; font-size: 18px; color: #9a9ea6; }
  .tier-price { padding-top: 20px; font-size: 22px; font-weight: 600; color: #fff; }
  .tier-price small { font-size: 15px; font-weight: 400; color: #9a9ea6; }
  .tier-box { margin-top: 14px; padding: 12px; border: 1px solid #3a3d43; border-radius: 10px; background: rgba(0,0,0,.18); font-size: 15px; font-weight: 500; color: #e8e9ec; }
  .tier-list { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid #34363b; flex: 1; }
  .tier-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 15px; color: #d6d8dc; }
  .tier-list svg { flex: none; width: 14px; height: 14px; margin-top: 4px; color: #8b8f97; }
  .tier-btn { margin-top: 28px; display: block; text-align: center; padding: 12px; border-radius: 10px; background: #34363b; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .tier-btn:hover { background: #3f4248; }
  .tier-btn.dark { background: #fff; color: #000; }
  .tier-btn.dark:hover { background: #e6e6e6; }
  .switch { display: inline-flex; gap: 4px; padding: 4px; margin-top: 28px; background: #1a1b1e; border: 1px solid #2a2c30; border-radius: 12px; }
  .switch a { padding: 9px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #9a9ea6; text-decoration: none; }
  .switch a:hover { color: #fff; }
  .switch a.on { background: #fff; color: #000; }
  @media (max-width: 1000px) {
    .pricing { grid-template-columns: repeat(2, 1fr); }
    .tier:nth-child(3) { border-left: 0; }
    .tier:nth-child(n+3) { border-top: 1px solid #34363b; }
  }
  @media (max-width: 600px) {
    .pricing { grid-template-columns: 1fr; }
    .tier { border-left: 0; }
    .tier:nth-child(n+2) { border-top: 1px solid #34363b; }
  }

  /* Enterprise features: half visible, rest in a dropdown */
  .tier-list.tier-top { flex: none; }
  .tier-more { flex: 1; margin-top: 2px; }
  .tier-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 15px; font-weight: 500; color: #fff; }
  .tier-more summary::-webkit-details-marker { display: none; }
  .tier-more summary svg { width: 10px; height: 10px; opacity: .7; transition: transform .15s ease; }
  .tier-more[open] summary svg { transform: rotate(180deg); }
  .tier-more .tier-list { margin: 0; padding-top: 4px; border-top: 0; }

  /* Pricing buttons: white, turn black when pressed */
  .tier-btn, .tier-btn.dark { background: #fff; color: #000; transition: background .12s ease, color .12s ease; }
  .tier-btn:hover, .tier-btn.dark:hover { background: #e6e6e6; }
  .tier-btn:active, .tier-btn.dark:active { background: #000; color: #fff; }

  /* Contact / support page */
  .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .contact-card { border: 1px solid #1f1f1f; border-radius: 16px; padding: 32px; background: #0c0c0e; min-height: 320px; display: flex; flex-direction: column; }
  .contact-card h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); font-weight: 600; letter-spacing: -0.03em; }
  .contact-card p { margin: auto 0 0; min-height: 52px; max-width: 34ch; color: #9a9a9a; font-size: 17px; line-height: 1.5; }
  .contact-card a { margin-top: 22px; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; }
  .contact-card a:hover { text-decoration: underline; }
  @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } .contact-card { min-height: 240px; } }

  /* Contact and support form pages */
  .form-page { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
  .form-left { padding-right: 48px; }
  .form-left h1 { max-width: none; }
  .checks { list-style: none; margin: 36px 0 0; padding: 0; }
  .checks li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 20px; color: #e8e9ec; }
  .checks svg { flex: none; width: 20px; height: 20px; color: #fff; }
  .form-right { border-left: 1px solid #1f1f1f; padding: 0 0 0 48px; }
  .form-right h2 { margin: 0; font-size: 18px; font-weight: 500; color: #fff; }
  .form-right p { margin: 18px 0 14px; font-size: 15px; color: #8a8d94; }
  .field { display: block; width: 100%; padding: 14px 16px; margin-bottom: 12px; border: 1px solid #26282c; border-radius: 12px; background: #121315; color: #fff; font: inherit; font-size: 15px; outline: none; }
  .field::placeholder { color: #6f7279; }
  .field:focus { border-color: #4a4d54; }
  textarea.field { min-height: 170px; resize: vertical; }
  .form-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 15px; color: #8a8d94; }
  .form-row a { color: #fff; text-decoration: underline; }
  .send { background: #fff; color: #000; border: 0; border-radius: 9px; padding: 11px 17px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
  .send:hover { background: #e6e6e6; }
  .send:active { background: #000; color: #fff; box-shadow: inset 0 0 0 1px #444; }
  @media (max-width: 860px) {
    .form-page { grid-template-columns: 1fr; gap: 40px; }
    .form-left { padding-right: 0; }
    .form-right { border-left: 0; padding-left: 0; }
    .form-row { flex-direction: column; align-items: flex-start; }
  }

  /* Blog */
  .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 48px; }
  .post-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; padding: 28px; border: 1px solid #1f1f1f; border-radius: 16px; background: #0c0c0e; color: #fff; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
  .post-card:hover { transform: translateY(-3px); border-color: #3a3a3a; }
  .post-card h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
  .post-date { color: #8a8d94; font-size: 14px; }
  .article { max-width: 760px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
  .article h1 { max-width: none; margin-top: 18px; }
  .article .post-date { margin: 18px 0 0; }
  .back { color: #9a9ea6; text-decoration: none; font-size: 15px; }
  .back:hover { color: #fff; }
  .prose { margin-top: 40px; color: #d6d8dc; font-size: 18px; line-height: 1.7; }
  .prose p { margin: 0 0 22px; }
  .prose h2 { margin: 48px 0 16px; color: #fff; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
  .prose h3 { margin: 32px 0 10px; color: #fff; font-size: 20px; font-weight: 600; }
  .prose ul { margin: 0 0 22px; padding-left: 22px; }
  .prose li { margin-bottom: 8px; }
  .prose a { color: #fff; text-decoration: underline; }
  @media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }

  /* Blog image */
  .post-card img { display: block; width: 100%; aspect-ratio: 1.6 / 1; object-fit: cover; border-radius: 10px; border: 1px solid #1f1f1f; margin-bottom: 20px; }
  .post-card { min-height: 0; gap: 14px; }
  .post-hero { display: block; width: 100%; aspect-ratio: 1.6 / 1; object-fit: cover; border-radius: 16px; border: 1px solid #1f1f1f; margin-top: 32px; }

  /* Product pages */
  .page h1 { max-width: 22ch; }
  .p-art { margin-top: clamp(32px, 6vh, 56px); height: clamp(320px, 40vw, 580px); position: relative; border-radius: 24px; border: 1px solid #202225; overflow: hidden;
    background: radial-gradient(110% 85% at 50% -8%, rgba(176,181,188,.82) 0%, rgba(118,122,129,.42) 36%, rgba(11,11,13,0) 74%), linear-gradient(180deg, #181a1c 0%, #09090b 100%); }
  .p-desc { margin-top: 16px; border: 1px solid #1f1f1f; border-radius: 24px; background: #0c0c0e; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
  .p-desc p { margin: 0; max-width: 62ch; color: #c9ccd2; font-size: 20px; line-height: 1.55; }
  .p-desc .cta { margin-top: 0; flex: none; }
  .p-tiles { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .p-tile { border: 1px solid #1f1f1f; border-radius: 20px; background: #0b0b0d; padding: 28px; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-start; gap: 40px; }
  .p-tile .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid #26282c; background: #121315; color: #e9eaee; }
  .p-tile .ico svg { width: 20px; height: 20px; }
  .p-tile h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
  .p-tile p { margin: 0; color: #9a9ea6; font-size: 15px; line-height: 1.55; }
  @media (max-width: 1000px) { .p-tiles { grid-template-columns: repeat(2, 1fr); } .p-desc { flex-direction: column; align-items: flex-start; } }
  @media (max-width: 600px) { .p-tiles { grid-template-columns: 1fr; } .p-desc { padding: 28px; } }

  /* Product page screenshot */
  .p-shot { position: absolute; left: 4%; right: 4%; top: 36px; bottom: 0; overflow: hidden; border-radius: 14px 14px 0 0; border: 1px solid rgba(255,255,255,.16); border-bottom: 0; box-shadow: 0 -8px 60px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.5); background: #0b0b0d; }
  .p-shot img { display: block; width: 100%; height: auto; }
  .p-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.92) 100%); }
  @media (max-width: 600px) { .p-shot { left: 5%; right: 5%; top: 24px; } }

  /* Brighter office screen */
  img.bright { filter: brightness(1.22) contrast(1.1) saturate(1.1); }
  .p-art.light::after { height: 20%; background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.82) 100%); }

  /* Equal-height image cards */
  a.shot[href="/founders"] { flex: 1.6 1 0; aspect-ratio: 1.6 / 1; }
  a.shot[href="/office"] { flex: 1.7778 1 0; aspect-ratio: 16 / 9; }
  @media (max-width: 760px) { a.shot[href] { flex: 0 0 86%; } }