/* ============================================
   Design tokens
   ============================================ */
:root {
  --color-canvas: #f1f0eb;
  --color-ink: #131316;
  --color-ink-secondary: #5b5b62;
  --color-ink-tertiary: #6e6e73;
  --color-ink-muted: #8a8a90;
  --color-brand: #3733c6;
  --color-accent: #6d28d9;
  --color-accent-hover: #7c3aed;
  --color-card-border: rgba(0, 0, 0, 0.06);
  --color-card-bg: #fff;
  --color-panel-dark: #161514;
  --color-panel-darker: #0c0c0e;
  --color-footer-bg: #0c0c0e;
  --color-footer-text: #f5f5f7;
  --color-footer-text-muted: #9a9aa0;

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-wordmark: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;

  --radius-card: clamp(24px, 4vw, 36px);
  --radius-pill: 980px;
  --shadow-card: 0 40px 90px -50px rgba(0, 0, 0, 0.25);
  --shadow-card-dark: 0 40px 90px -50px rgba(0, 0, 0, 0.4);

  --max-width-dock: 1120px;
  --max-width-content: 1160px;
}

/* ============================================
   Reset and base
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--color-canvas);
  color: var(--color-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
}

/* Hide scrollbar on horizontally-scrollable rows (dock nav, sub-nav) */
.dg-scroll::-webkit-scrollbar {
  display: none;
}

.dg-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes dockNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ============================================
   Fade-in on scroll (paired with app.v1.js IntersectionObserver)
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ============================================
   View transitions (native cross-document nav)
   We opt in but immediately neutralize the browser's default
   full-page cross-fade — animating two full-viewport snapshots
   is wasteful on phones, and it caused the nav icon to visibly
   "shrink" right as the new page landed. Real cursor :hover was
   then reasserting itself a moment later (since the pointer is
   still sitting on the same icon), producing a jarring double
   bounce. Simplest fix: no artificial nav animation at all —
   the page swap is instant, and :hover behaves exactly as it
   does everywhere else on the site.
   ============================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation: none !important;
  }
}

/* ============================================
   Header — brand + dock nav
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px clamp(12px, 4vw, 24px) 0;
  background: linear-gradient(180deg, var(--color-canvas) 60%, rgba(241, 240, 235, 0));
}

.header__inner {
  max-width: var(--max-width-dock);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
}

.header__logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.header__wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: clamp(18px, 2.6vw, 22px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-brand);
}

.dock-wrap {
  position: relative;
  max-width: 900px;
  width: 100%;
}

.dock {
  display: flex;
  gap: clamp(12px, 2.4vw, 26px);
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  overflow-x: auto;
  padding: 11px clamp(14px, 3vw, 24px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.22);
}

.dock__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--color-ink-secondary);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dock__link:hover,
.dock__link.js-force-hover {
  transform: translateY(-7px) scale(1.048);
  color: var(--color-ink-secondary);
}

.dock__icon {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

.dock__icon--pad {
  padding: 22%;
}

.dock__label {
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--color-ink-secondary);
  white-space: nowrap;
}

/* Note: .dock__link--active intentionally has no distinct styling here —
   the nav stays uniform across pages since the page's own title already
   makes it clear where the user is. The class is still used by the
   inline script above to auto-scroll the active icon into view on
   narrow/mobile screens, so keep it in the markup. */

.dock__fade-l,
.dock__fade-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}

.dock__fade-l {
  left: 0;
  border-radius: 24px 0 0 24px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.dock__fade-r {
  right: 0;
  width: 54px;
  border-radius: 0 24px 24px 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

.dock__fade-r i {
  font-size: 20px;
  color: var(--color-accent);
  display: inline-flex;
  animation: dockNudge 1.4s ease-in-out infinite;
}

.dock__fade-l.is-visible,
.dock__fade-r.is-visible {
  opacity: 1;
}

/* ============================================
   Sub-navigation
   ============================================ */
.subnav {
  padding: 14px clamp(12px, 4vw, 24px) 4px;
}

.subnav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  max-width: var(--max-width-dock);
  margin: 0 auto;
}

.subnav__item {
  flex: 0 0 auto;
}

.subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-secondary);
  transition: color 0.2s;
}

.subnav__link:hover {
  color: var(--color-ink);
}

.subnav__link i {
  font-size: 14px;
  display: inline-flex;
  line-height: 1;
}

/* ============================================
   Main content well
   ============================================ */
.main {
  padding: clamp(12px, 2vw, 20px) clamp(12px, 4vw, 24px) clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 28px);
  max-width: var(--max-width-content);
  margin: 0 auto;
}

/* ============================================
   Cards
   ============================================ */
.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 64px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.card--dark {
  background: var(--color-panel-dark);
  color: #fff;
  box-shadow: var(--shadow-card-dark);
}

.card__glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
}

.card__body {
  position: relative;
}

/* ============================================
   Badges (small uppercase pill labels)
   ============================================ */
.badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: var(--radius-pill);
  transition: transform 0.2s, background 0.2s;
}

.btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.04);
  color: #fff;
}

/* ============================================
   Forms (contact/support-style)
   ============================================ */
.cform {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cform input,
.cform select,
.cform textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: #faf9f7;
  border: 1px solid #dcdbd6;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cform select {
  cursor: pointer;
  appearance: none;
}

.cform textarea {
  resize: vertical;
  min-height: 140px;
}

.cform input::placeholder,
.cform textarea::placeholder {
  color: #a0a0a6;
}

.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.12);
}

.cform__submit {
  width: 100%;
  padding: 15px 32px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: background 0.2s, transform 0.1s;
}

.cform__submit:hover {
  background: var(--color-accent-hover);
}

.cform__submit:active {
  transform: scale(0.98);
}

.form-success {
  padding: 36px 28px;
  background: #e8f7ec;
  border: 1px solid #bfe6c8;
  border-radius: 18px;
  text-align: center;
}

.form-success__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: #1b5e20;
  margin-bottom: 8px;
}

.form-success__text {
  font-size: 15px;
  color: #2e7d32;
}

.form-error {
  margin-top: 10px;
  font-size: 13px;
  color: #c62828;
}

/* ============================================
   Newsletter (footer)
   ============================================ */
.newsletter {
  text-align: center;
  margin-bottom: 40px;
}

.newsletter__title {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.newsletter__text {
  font-size: 15px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 24px;
  color: var(--color-footer-text-muted);
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

.newsletter__input {
  flex: 1 1 240px;
  height: 50px;
  padding: 0 22px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--color-footer-text);
  background: #1a1a1e;
  border: 1px solid #2a2a2f;
  border-radius: var(--radius-pill);
  outline: none;
}

.newsletter__btn {
  height: 50px;
  padding: 0 30px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: transform 0.2s, background 0.2s;
}

.newsletter__btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.03);
}

/* ============================================
   Prose (blog articles, support how-tos)
   ============================================ */
.prose-card {
  max-width: 900px;
  margin: 0 auto;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--shadow-card);
}

.dg-prose {
  max-width: 820px;
  margin: 0 auto;
}

.dg-prose h1 {
  font-weight: 800;
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0 0 16px;
  line-height: 1.02;
}

.dg-prose h2 {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 32px 0 12px;
  line-height: 1.2;
}

.dg-prose h3 {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-ink);
  margin: 24px 0 10px;
}

.dg-prose p {
  margin-bottom: 16px;
  font-size: 17px;
  line-height: 1.75;
  color: #3a3a42;
}

.dg-prose ul,
.dg-prose ol {
  margin: 0 0 16px 24px;
  padding: 0;
}

.dg-prose li {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.7;
  color: #3a3a42;
}

.dg-prose a {
  color: var(--color-accent);
  text-decoration: none;
}

.dg-prose strong {
  color: var(--color-ink);
}

.dg-prose em {
  color: #4b4b52;
}

.dg-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 20px auto;
  display: block;
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.3);
}

.dg-prose figure {
  margin: 20px 0;
}

.dg-prose figcaption {
  font-size: 13px;
  color: var(--color-ink-muted);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

.dg-prose audio {
  width: 100%;
  margin: 12px 0;
}

.dg-prose iframe {
  max-width: 100%;
  border-radius: 14px;
}

.dg-prose blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 20px 0;
  padding: 4px 0 4px 18px;
  font-style: italic;
  color: #4b4b52;
}

.blog-article__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin-bottom: 20px;
}

.blog-article__title {
  margin: 0 0 12px;
}

.blog-article__meta {
  font-size: 13px;
  color: var(--color-ink-muted);
  margin-bottom: 20px;
}

.blog-article__hero {
  border-radius: 18px;
}

.blog-article__tags {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-article__tags-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 10px;
}

.blog-article__tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: #f4f3ef;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-secondary);
  margin: 0 6px 6px 0;
}

.blog-article__refs {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  color: #6a6a72;
}

/* ============================================
   Blog listing (/blogs index — card grid)
   ============================================ */
.blog-listing__inner {
  text-align: center;
}

.blog-listing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 8px;
  text-align: left;
}

a.blog-listing__card {
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 18px;
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.blog-listing__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.25);
  color: var(--color-ink);
}

img.blog-listing__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  display: block;
}

.blog-listing__card-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-listing__card .blog-listing__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}

.blog-listing__card .blog-listing__card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-listing__card-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 4px;
}

.blog-listing__card-times {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.download-block__btn {
  display: inline-block;
  padding: 13px 30px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.support-apps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-apps__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #f4f3ef;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.support-apps__icon {
  border-radius: 10px;
  margin: 0;
  box-shadow: none;
}

.support-screenshots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.support-screenshots img {
  width: 130px;
  margin: 0;
}

/* ============================================
   Legal pages (privacy policies, terms and conditions)
   ============================================ */
.dg-legal h1 {
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 40px 0 16px;
  line-height: 1.05;
}

.dg-legal h1:first-child {
  margin-top: 0;
}

.dg-legal h2 {
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 24px);
  color: var(--color-ink);
  margin: 30px 0 12px;
  letter-spacing: -0.01em;
}

.dg-legal h3 {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-ink);
  margin: 22px 0 10px;
}

.dg-legal p {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.75;
  color: #3a3a42;
}

.dg-legal ul,
.dg-legal ol {
  margin: 0 0 16px 24px;
  padding: 0;
}

.dg-legal li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a42;
}

.dg-legal a {
  color: var(--color-accent);
  text-decoration: none;
}

.dg-legal strong {
  color: var(--color-ink);
}

.dg-legal .eml::before {
  content: attr(data-u) "@" attr(data-d);
}

/* ============================================
   Cookie consent banner (paired with cookie-consent.v1.js)
   ============================================ */
.consent-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-card-border);
  border-radius: 18px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.3);
  padding: 20px;
  z-index: 10001;
}

.consent-banner__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.consent-banner__message {
  font-size: 13px;
  color: var(--color-ink-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.consent-banner__link {
  color: var(--color-accent);
  text-decoration: none;
}

.consent-banner__buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.consent-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.consent-btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.consent-btn--primary:hover {
  background: var(--color-accent-hover);
}

.consent-btn--secondary {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-ink-secondary);
}

.consent-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: clamp(48px, 7vw, 72px) clamp(16px, 4vw, 24px) 40px;
}

.footer__inner {
  max-width: 980px;
  margin: 0 auto;
}

.footer__social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-footer-text);
  transition: background 0.2s, transform 0.2s;
}

.footer__social-link:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  color: var(--color-footer-text);
}

.footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 32px;
  font-size: 14px;
}

.footer__link {
  color: var(--color-footer-text-muted);
}

.footer__link:hover {
  color: #fff;
}

.footer__divider {
  color: #3a3a40;
}

.footer__values {
  text-align: center;
  margin-bottom: 30px;
}

.footer__values img {
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  opacity: 0.9;
}

.footer__copyright {
  text-align: center;
  font-size: 13px;
  color: #6a6a70;
}