:root {
  --bg: #ffffff;
  --bg-rgb: 255, 255, 255;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --border: #e2e5ec;
  --text: #0a0a0c;
  --muted: #565b66;
  --muted-dim: #8a8f9b;
  --accent: #0e4dca;
  --accent-strong: #0a3899;
  --accent-light: #48a4db;
  --accent-dim: #e7eefd;
  --wordmark-from: #476db5;
  --wordmark-to: #49a2da;
  --nav-bg: #ffffff;
  --nav-hover: var(--accent-dim);
  --icon: #4e75d6;
  --tab-bg-image: url('assets/tab.png');
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1d21;
    --bg-rgb: 28, 29, 33;
    --surface: #232429;
    --surface-2: #2a2c33;
    --border: #34363e;
    --text: #e7e9ee;
    --muted: #a7abb6;
    --muted-dim: #6f7480;
    --accent: #5b8fff;
    --accent-strong: #a9c2ff;
    --accent-light: #6fb6e6;
    --accent-dim: #1e2a49;
    --wordmark-from: #476db5;
    --wordmark-to: #49a2da;
    --nav-bg: #1c1d21;
    --nav-hover: var(--accent-dim);
    --icon: #8fa8e8;
    --tab-bg-image: url('assets/tab-dark.png');
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  scroll-behavior: smooth;
}

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

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */
body { padding-top: 56px; }
#top, #features, #folders, #privacy, #coffee { scroll-margin-top: 54px; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--nav-bg);
  transform: translateY(0);
  transition: transform 0.28s ease;
}
.nav.nav-hidden {
  transform: translateY(-100%);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background: linear-gradient(to bottom, rgb(var(--bg-rgb)), rgba(var(--bg-rgb), 0));
  pointer-events: none;
}
.nav-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 24px 0;
  height: 56px;
}
/* Right-hand group: language switcher, Add to Chrome, hamburger — kept
   together so .nav-inner's space-between only ever splits two groups
   (tab strip vs. this), and the switcher sits directly in front of the
   button instead of floating in whatever space is left between them. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: center;
}
.btn.nav-cta {
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
}
/* ---------- Language switcher ----------
   Two copies exist in the markup: an in-nav one (visible on desktop,
   inline with the Add to Chrome button) and a floating one (visible on
   mobile only, positioned below the header where it scrolls away with
   the page instead of staying pinned like the fixed nav). Only one is
   ever displayed at a given width — see the breakpoints below. */
.lang-switcher-mini {
  position: relative;
}
.lang-switcher-mini.floating {
  position: absolute;
  top: 66px;
  right: 24px;
  z-index: 2;
}
.lang-switcher-mini.floating { display: none; }
.lang-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}
.lang-mini-btn:hover { background: var(--nav-hover); color: var(--text); }
.lang-mini-caret { flex-shrink: 0; transition: transform 0.15s ease; }
.lang-switcher-mini.open .lang-mini-caret { transform: rotate(180deg); }
.lang-mini-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 18, 30, 0.16);
  padding: 6px;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 2px;
}
.lang-switcher-mini.open .lang-mini-menu { display: grid; }
.lang-mini-option {
  display: block;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.lang-mini-option:hover { background: var(--nav-hover); }
.lang-mini-option.is-current { background: var(--accent-dim); color: var(--accent); }

/* Brand icon+name used elsewhere (footer) — plain, no tab shape */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
}
.brand img { width: 28px; height: 28px; }

/* Tab strip — the whole nav reads as a row of browser-style tabs. The logo's
   tab is permanently white/elevated (it's the "current page"); the other
   items just get an instant flat highlight on hover, Chrome-background-tab-style. */
.tab-strip {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.tab-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}
.tab-item::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--muted-dim);
  opacity: 0.5;
}
.tab-item:last-child::after { display: none; }
.tab-item:not(.brand-item):hover {
  background: var(--nav-hover);
}
.tab-item:not(.brand-item):hover::after { opacity: 0; }

/* Logo item: plain flat brand mark + wordmark, no tab graphic — sized and
   spaced just like the other nav items so "TabSee" sits at the same
   distance from "Features" as the other items are from each other, with
   the same divider line between them. */
.tab-item.brand-item {
  flex: 0 0 auto;
  color: var(--text);
}
.tab-item.brand-item img { width: 28px; height: 28px; }

/* ---------- Hamburger (mobile nav) ---------- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-self: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hamburger:hover { background: var(--nav-hover); }
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  box-shadow: 0 16px 30px -14px rgba(20, 30, 60, 0.3);
  padding: 16px 24px 24px;
}
.mobile-menu.open { display: flex; }
.mobile-menu .mobile-link {
  padding: 14px 2px;
  font-size: 30px;
  font-weight: 500;
  color: #0a0a0c;
  text-decoration: none;
}
.mobile-menu .btn { margin-top: 12px; justify-content: center; font-size: 17px; padding: 16px 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  background: #1a73e8;
  color: #ffffff;
}
.btn-primary:hover { background: #1557b0; color: #ffffff; }
.btn-light {
  background: #000000;
  color: #ffffff;
}
.btn-light:hover { background: #486db5; color: #ffffff; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  border-radius: 8px;
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { padding: 13px 30px; font-size: 15px; }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 24px 40px;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #476db5;
  margin-bottom: 10px;
}
.wordmark-row {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}
.wordmark {
  font-size: 108px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  padding-right: 0.08em;
  background: linear-gradient(180deg, var(--wordmark-from), var(--wordmark-to));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.free-badge {
  position: absolute;
  top: -14px;
  right: -92px;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
  padding: 0 6px;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 17px;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .free-badge {
    background: #ffffff;
    color: #000000;
  }
}
h1 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  margin: 8px 0 14px;
  letter-spacing: 0.0em;
  color: var(--text);
}
.hero p.lead {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.0em;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 40px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-actions .btn svg { width: 18px; height: 18px; }
.hero-note {
  font-size: 13px;
  color: var(--muted-dim);
  margin-top: -44px;
  margin-bottom: 56px;
}

.hero-shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px -30px rgba(20, 30, 60, 0.35);
  max-width: 780px;
  margin: 0 auto;
}
.hero-shot img { display: block; width: 100%; height: auto; }

/* ---------- Sections ---------- */
section { padding: 72px 0; }
.section-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 44px;
}
.section-head .eyebrow { margin-bottom: 10px; }
h2 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.0em;
  margin: 0 0 14px;
  color: var(--text);
}
.section-head p {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.0em;
  margin: 0;
}

/* ---------- Feature grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.card .icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--accent-dim);
  color: var(--icon);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.card .icon svg { width: 18px; height: 18px; }
.card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--text);
}
.card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.section-cta {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 20px;
}

/* ---------- Split (screenshot + copy) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse .split-copy { order: 2; }
.split.reverse .split-shot { order: 1; }
.split-shot img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px -24px rgba(20, 30, 60, 0.3);
  display: block;
}
.split-copy .eyebrow { margin-bottom: 10px; }
.split-copy h2 { margin-bottom: 16px; }
.split-copy p { color: var(--muted); font-size: 20px; line-height: 1.4; letter-spacing: 0.0em; margin: 0 0 20px; }
.split-copy ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.split-copy li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.split-copy li::before {
  content: "•";
  color: var(--wordmark-from);
  flex-shrink: 0;
}

/* ---------- Privacy callout ---------- */
.privacy-band {
  background: var(--bg);
}
.privacy-inner {
  display: flex;
  align-items: center;
  gap: 226px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.privacy-text .eyebrow { margin-bottom: 10px; }
.privacy-text h3 {
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.0em;
  color: var(--text);
  max-width: 420px;
}
.privacy-text p { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.4; letter-spacing: 0.01em; max-width: 420px; }
.privacy-inner .btn-light { flex-shrink: 0; }

/* ---------- CTA ---------- */
.cta {
  text-align: center;
}
.cta h2 { margin-bottom: 10px; }
.cta p { color: var(--muted); font-size: 20px; line-height: 1.4; letter-spacing: 0.01em; margin: 0 0 30px; }

.cta-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.cta-action p { color: var(--muted); font-size: 20px; line-height: 1.4; letter-spacing: 0.01em; margin: 0; }
@media (max-width: 600px) {
  .cta-action { flex-direction: column; gap: 16px; }
}

/* ---------- Donation ---------- */
.donate {
  position: relative;
  background: #f5f5f7;
  padding: 64px 0;
  overflow: visible;
}
.donate-card {
  position: relative;
}
/* Desktop: .donate-text shrink-wraps to just the button (the paragraph and
   the dog are both pulled out of flow and anchored to it), then centers via
   margin:auto — so the BUTTON itself lands on the page's true horizontal
   center, with the prompt hanging off its left edge and the dog off its
   right edge, both gap-anchored to the button's actual rendered width
   rather than a guessed fixed offset. */
.donate-text {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.donate-card p {
  position: absolute;
  right: calc(100% + 20px);
  top: 50%;
  transform: translateY(-50%);
  color: #0a0a0c;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0;
  white-space: nowrap;
}
.btn-donate {
  background: transparent;
  color: #476db5;
  border: 1px solid #476db5;
  font-size: 16px;
  font-weight: 400;
}
.btn-donate:hover { background: #476db5; color: #ffffff; }
.donate-dog {
  position: absolute;
  left: calc(100% + 28px);
  bottom: -64px;
  height: 224px;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 950px) {
  .donate { margin-top: 20px; padding: 52px 0 48px; }
  .donate-text {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding-bottom: 170px;
  }
  .donate-card p {
    position: static;
    transform: none;
    white-space: normal;
    max-width: 260px;
    font-size: 24px;
  }
  .donate-card .btn-donate { white-space: normal; max-width: 240px; text-align: center; line-height: 1.3; }
  .donate-dog {
    left: 50%;
    right: auto;
    bottom: -48px;
    top: auto;
    transform: translateX(-50%);
    height: 210px;
  }
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-inner .brand { font-size: 15px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 22px;
}
.footer-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.footer-links a:hover { color: var(--accent); }
.footer-backtotop {
  display: none;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.footer-backtotop:hover { color: var(--accent); }
.footer-note {
  color: var(--muted-dim);
  font-size: 13px;
  margin-top: 18px;
}

/* ---------- Privacy policy page ---------- */
.policy {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 100px;
}
.policy h1 { font-size: 34px; margin-bottom: 6px; }
.policy .updated { color: var(--muted-dim); font-size: 14px; margin-bottom: 40px; }
.policy h2 {
  font-size: 20px;
  margin: 40px 0 12px;
  padding-top: 6px;
}
.policy p, .policy li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}
.policy strong { color: var(--text); }
.policy table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.policy th, .policy td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.policy th:first-child, .policy td:first-child { width: 34%; }
.policy th {
  background: var(--surface-2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.policy code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13.5px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 28px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse .split-copy { order: 1; }
  .split.reverse .split-shot { order: 2; }
  .wordmark { font-size: 90px; }
  .free-badge { width: 46px; height: 46px; font-size: 13px; top: -9px; right: -61px; }
  h1 { font-size: 26px; }
  .privacy-inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 24px; }
  .privacy-text { width: 100%; }
  .privacy-text h3, .privacy-text p { max-width: 100%; }
  .privacy-inner .btn-light { align-self: center; white-space: normal; text-align: center; max-width: 100%; margin-top: 12px; }
}
/* Nav collapses to a hamburger before the tab strip + button get cramped */
@media (max-width: 760px) {
  .tab-item:not(.brand-item) { display: none; }
  .tab-item.brand-item::after { display: none; }
  .tab-item.brand-item img { width: 34px; height: 34px; }
  .tab-item.brand-item { margin-left: 0; padding-left: 0; }
  .nav-right .btn.nav-cta { display: none; }
  .hamburger { display: flex; margin-right: 0; }
  .nav-inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .card p { font-size: 16px; }
  .wordmark { font-size: 108px; }
  /* Free badge floats independently in the top-right of the hero on mobile,
     instead of being pinned to the wordmark's corner (that treatment stays
     for desktop/tablet). .wordmark-row is taken out of the positioning
     chain here so .free-badge's absolute offsets resolve against .hero. */
  .wordmark-row { position: static; }
  .free-badge { position: absolute; width: 56px; height: 56px; font-size: 14px; top: 50px; right: 32px; }
  h1 { font-size: 32px; }
  .hero { position: relative; padding: 124px 20px 32px; }
  .hero p.lead { font-size: 20px; }
  section { padding: 56px 0; }
  footer { padding: 32px 20px; }
  .footer-inner .brand { font-size: 20px; }
  .footer-inner .brand img { width: 36px; height: 36px; }
  .footer-links { display: none; }
  .footer-backtotop { display: inline-block; font-size: 17px; }
  .wrap:not(.nav-inner) { padding-left: 20px; padding-right: 20px; }
  .mobile-menu { padding-left: 20px; padding-right: 20px; }
}