/* ==========================================================================
   Tabbie marketing site
   Brand colors match the shipped extension's default theme exactly
   (Vuetify red.darken1 / red.darken3 — tabbie/src/shared/themes.js)
   ========================================================================== */

:root {
  --primary: #e53935;
  --primary-dark: #c62828;
  --primary-light: #fdeceb;

  /* A near-black with a whisper of red in it (not brown) — ties the dark
     sections back to the brand hue instead of introducing an unrelated
     warm neutral. Text/shadow tones are desaturated versions of the same
     hue rather than pure grey, which is what keeps the page feeling like
     one connected palette instead of "brand red + generic dark UI". */
  --ink: #1c1414;
  --ink-soft: #55494a;
  --ink-faint: #8a7d7e;
  --paper: #ffffff;
  --paper-off: #faf7f6;
  --border: #ece3e2;
  --border-soft: #f2eceb;

  /* A second, cool-toned tint reserved for the privacy section — its
     subject (safety, trust) reads better in a calm slate-blue than the
     warm cream used elsewhere, so the page isn't just white/cream on
     repeat, and the color shift itself signals "this section is
     different in kind" before a reader gets to the copy. */
  --paper-cool: #f6f8fa;
  --border-cool: #e4e9ee;

  --shadow-xs: 0 1px 3px rgba(28, 20, 20, 0.06);
  --shadow-sm: 0 3px 10px rgba(28, 20, 20, 0.08), 0 1px 3px rgba(28, 20, 20, 0.05);
  --shadow-md: 0 14px 34px rgba(28, 20, 20, 0.11), 0 4px 10px rgba(28, 20, 20, 0.06);
  --shadow-lg: 0 36px 84px -14px rgba(28, 20, 20, 0.32), 0 14px 30px -10px rgba(28, 20, 20, 0.18);
  --shadow-glow: 0 20px 44px -14px rgba(229, 57, 53, 0.4);

  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 30px;

  --container: 1120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Grows with the viewport so wide desktop screens get side padding that
     feels proportional to a section's vertical padding, rather than a
     flat 28px margin that reads as an afterthought once the viewport is
     well past --container. */
  --pad-x: clamp(1.5rem, 5vw, 5rem);
}

* { box-sizing: border-box; min-width: 0; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-size: 16px;
}

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

.wordmark {
  font-family: "Damion", cursive;
  color: var(--primary);
  text-decoration: none;
  line-height: 1;
  font-weight: 400;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1rem;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.eyebrow--light { color: #ffab91; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.55rem; }

p { line-height: 1.7; color: var(--ink-soft); margin: 0 0 1rem; }

code {
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 0.15em 0.5em;
  border-radius: 6px;
  font-size: 0.88em;
  font-weight: 600;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 24px 55px -16px rgba(198, 40, 40, 0.45); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  color: var(--ink);
  padding: 0.9rem 1.1rem;
}
.btn--ghost:hover { color: var(--primary); }
.btn--ghost:hover .btn__icon--sm { transform: translateY(2px); }

.btn--small {
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--small:hover { background: var(--primary-dark); }

.btn--large { padding: 1.15rem 2.4rem; font-size: 1.05rem; }

.btn__icon { width: 19px; height: 19px; flex-shrink: 0; }
.btn__icon--sm { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }

/* ---------- topbar ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar .wordmark { font-size: 1.55rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 10rem var(--pad-x) 7rem;
}

/* No overflow:hidden on .hero itself: it was clipping the hero screenshot's
   filter:drop-shadow() on every side where the frame's drop-shadow blur
   (up to 60px) reached past .hero's edge before fading out — worst on
   mobile, where the frame sits close to the top of the stacked layout.
   .hero__bg no longer needs horizontal overscan to bleed into either side,
   since its gradients already fade to transparent well inside 0%/100% —
   only the vertical overscan (top/bottom bleed) is still needed. */
.hero__bg {
  position: absolute;
  inset: -30% 0 auto 0;
  height: 160%;
  background:
    radial-gradient(ellipse 55% 45% at 78% 18%, rgba(229, 57, 53, 0.09) 0%, transparent 62%),
    radial-gradient(ellipse 40% 40% at 8% 65%, rgba(255, 171, 145, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 30% 30% at 95% 85%, rgba(229, 57, 53, 0.06) 0%, transparent 60%);
  z-index: -1;
}

.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero__kicker {
  margin: -0.5rem 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.hero__tagline {
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.4rem;
  line-height: 1.25;
}
.hero__tagline em { color: var(--primary); font-style: normal; }

.hero__sub { font-size: 1.08rem; max-width: 46ch; }

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 1.75rem 0 1.5rem;
}

.hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-faint);
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  background: var(--paper-off);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
}

.hero__meta-icon { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; }

.hero__shot {
  position: relative;
  padding: 2rem;
}

.hero__shot::before {
  content: "";
  position: absolute;
  inset: 8% -6%;
  background: radial-gradient(ellipse 65% 65% at 50% 45%, rgba(229, 57, 53, 0.14) 0%, transparent 70%);
  filter: blur(8px);
  z-index: -1;
}

/* ---------- popup frame (the recurring visual device) ---------- */

/* Shadows here are box-shadow, not filter:drop-shadow(). The filter version
   renders correctly in Chrome but iOS Safari clips it to a few pixels around
   the card (measured on-device: a 32px-blur shadow falling off in under
   10px), so the shadows were effectively invisible there.
   box-shadow needs this element to NOT be overflow:hidden, or it gets
   clipped at the very edge it's meant to extend past — so the rounded
   corners come from border-radius on the children instead of a clip here. */
.popup-frame {
  width: 100%;
  border-radius: var(--radius);
  background: var(--paper);
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 30px 60px rgba(28, 20, 20, 0.28), 0 10px 20px rgba(28, 20, 20, 0.14);
}

/* Replaces the old overflow:hidden clip: round only the outer corners so
   the bar and the image still read as one card. */
.popup-frame__bar {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.popup-frame > img,
.popup-frame__crop {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.popup-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--paper-off);
}

.popup-frame__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}

.popup-frame img { width: 100%; height: auto; }

/* screenshot-3.png is a 640×400 capture; the toggle-list content (icon,
   label, toggle, action icon) occupies its left ~320px, with a bit of
   breathing room after the action icons — past that is dead canvas and
   the edge of the panel behind it (confirmed by cropping at several
   widths up to 340px, where that edge starts showing). 320 is as wide as
   this can go without it bleeding in; height stays 400 so the card's
   proportions don't shift, only how much of the row is visible. */
.popup-frame__crop {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 320 / 400;
}
.popup-frame__crop img {
  width: 200%;
  max-width: none;
}

/* screenshot-4.png's open dropdown menu genuinely borders the app's own
   gray page background on its right and bottom in the source image —
   that boundary is real content, not a shadow or a bad crop (confirmed
   by sampling: white inside the dropdown, ~248 gray immediately outside
   it). What actually read as "cut off" was .popup-frame's box-shadow
   being clipped by its own overflow:hidden, fixed at the frame level
   with filter:drop-shadow() instead. This mask just softens the crop's
   own outer edge slightly so it doesn't end on a hard image boundary. */
.popup-frame__crop--top {
  aspect-ratio: 640 / 340;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%),
    linear-gradient(to right, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%),
    linear-gradient(to right, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.popup-frame__crop--top img {
  width: 100%;
  transform: none;
}

/* Wrapper carries the float animation so .popup-frame stays a static,
   unpromoted element — WebKit gives an animated transform its own
   compositing layer, which is bad company for a shadow. */
.popup-frame__float {
  transform: rotate(-1.5deg);
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50% { transform: rotate(-1.5deg) translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  .popup-frame__float { animation: none; }
}

.popup-frame--hero { max-width: 520px; }

.popup-frame--small { max-width: 300px; }

/* ---------- problem strip ---------- */
/* Deliberately quiet — two sentences of scene-setting, not a pillar
   section, so it shouldn't compete for attention with the privacy block
   further down, which is the section that's actually carrying a claim. */

.problem {
  background: var(--paper-off);
  padding: 5.5rem var(--pad-x);
}

.problem__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.problem__inner .eyebrow { justify-content: center; }

.problem__line {
  color: var(--ink-faint);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.problem__line em { color: var(--primary-dark); font-style: normal; font-weight: 600; }

.problem__answer {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.3;
}

/* ---------- features ---------- */

.features {
  padding: 7rem var(--pad-x);
}

.features__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.features__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3.5rem;
}

.features__head .eyebrow { justify-content: center; }

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.feature {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius);
  padding: 1.85rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--primary-light);
  color: var(--primary-dark);
  margin-bottom: 1.2rem;
}
.feature__icon svg { width: 22px; height: 22px; }

.feature p { margin: 0; font-size: 0.95rem; }

.feature--wide {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}
.feature--wide:hover { box-shadow: var(--shadow-xs); transform: none; }

.feature--wide h3 { font-size: 1.4rem; }
.feature--wide .feature__text p { font-size: 1.05rem; max-width: 42ch; }
.feature--wide .popup-frame { max-width: 460px; }

/* ---------- customize ---------- */

.customize {
  background: var(--paper-off);
  padding: 7rem var(--pad-x);
}

.customize__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.customize__text p { max-width: 44ch; }

.customize__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 44ch;
}

.customize__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

.customize__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.customize__shots {
  position: relative;
  /* Sized to the actual visible card cluster (roughly 0-275px given the
     current frame sizes/offsets), not a rough guess — .customize__inner's
     align-items:center centers this box against the text column, so if
     the box were taller than its real content the cards would visually
     sit lower than the text rather than centered against it. */
  min-height: 275px;
  /* No overflow:hidden here — both frames are individually width-capped
     to fit their column (min(px, %)), so they can't overflow it, and
     clipping this container was cutting off the frames' own
     filter:drop-shadow() the same way overflow:hidden on .popup-frame
     itself did. */
}

/* Both cards are cropped views of a 640px-wide screenshot at different
   zoom levels (offset-a shows a 320px-wide column magnified; offset-b
   shows the full 640px width close to native size), so matching card
   widths doesn't mean matching text size — offset-a's UI was rendering
   visibly larger than offset-b's. These widths keep the ratio between
   the two frames' effective zoom close to 1:1 instead. */
.popup-frame--offset-a {
  position: absolute;
  top: 0;
  left: 2%;
  width: min(220px, 46%);
  z-index: 2;
  transform: rotate(3deg);
}

.popup-frame--offset-b {
  position: absolute;
  top: 10%;
  right: 0;
  width: min(420px, 76%);
  z-index: 1;
  transform: rotate(-4deg);
  /* Softer than .popup-frame's default drop-shadow — this card sits
     behind offset-a, so a lighter shadow reads as depth rather than
     competing with the front card's own shadow in the overlap area. */
  filter: drop-shadow(0 10px 24px rgba(28, 20, 20, 0.12));
}

/* ---------- privacy ---------- */

.privacy {
  background: var(--paper);
  padding: 7rem var(--pad-x);
}

.privacy__inner {
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}

.privacy h2 {
  max-width: 700px;
  margin: 0 auto 3.5rem;
  font-weight: 700;
}

.privacy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: left;
}

.privacy__item {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius);
  padding: 1.85rem;
  transition: box-shadow 0.35s ease, transform 0.35s var(--ease);
}
.privacy__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.privacy__item strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--primary-dark);
}

.privacy__item p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.92rem;
}

/* ---------- final cta ---------- */

.final-cta {
  background: var(--paper-off);
  padding: 8rem var(--pad-x);
}

.final-cta__inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.wordmark--footer { font-size: 2.1rem; margin-bottom: 0.6rem; }

.final-cta h2 { margin-bottom: 2.25rem; }

.final-cta__meta {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- footer ---------- */

.site-footer {
  text-align: center;
  padding: 2.5rem var(--pad-x) 3.5rem;
  background: var(--paper);
  border-top: 1px solid var(--border);
}

.site-footer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.site-footer a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.site-footer a:hover { color: var(--primary); }

.site-footer__heart { color: var(--primary); }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero__ctas { justify-content: center; }
  .hero__meta { margin-inline: auto; }
  .hero__shot { order: -1; margin-bottom: 1rem; padding: 2.5rem; }
  .popup-frame { max-width: 420px; }
  /* Tighter than the desktop shadow (60px/20px blur) so it fully fades
     within the smaller clearance available once the frame sits centered
     in a narrower column, instead of needing extra padding that would
     shrink the frame back down to compensate. */
  .popup-frame--hero { filter: drop-shadow(0 16px 32px rgba(28, 20, 20, 0.26)) drop-shadow(0 6px 12px rgba(28, 20, 20, 0.13)); }

  .features__grid { grid-template-columns: 1fr 1fr; }
  .feature { text-align: center; }
  .feature__icon { margin-inline: auto; }
  .feature--wide { grid-column: span 2; grid-template-columns: 1fr; }
  .feature--wide .feature__text p { margin-inline: auto; }
  /* Stacked layout gives the screenshot the card's full width instead of
     the two-column cap meant for sitting beside text — without this it
     stays pinned at 460px while the card grows, leaving dead space. */
  .feature--wide .popup-frame { max-width: 560px; }

  .customize__inner { grid-template-columns: 1fr; }
  .customize__shots { min-height: 340px; margin-top: 1.5rem; }

  .privacy__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { padding: 8rem 1.25rem 4.5rem; }
  .hero__shot { padding: 2.5rem 1.5rem; }
  .topbar__inner { padding: 0.85rem 1.25rem; }
  .topbar .wordmark { font-size: 1.35rem; }
  .btn--small { padding: 0.55rem 0.85rem; font-size: 0.78rem; }
  .problem { padding: 4rem 1.25rem; }
  .features { padding: 5rem 1.25rem; }
  .features__grid { grid-template-columns: 1fr; }
  .feature--wide { grid-column: span 1; }
  .customize { padding: 5rem 1.25rem; }
  .privacy { padding: 5rem 1.25rem; }
  .final-cta { padding: 5.5rem 1.25rem; }
  .site-footer { padding: 2.5rem 1.25rem 3rem; }

  .hero__ctas { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .btn { white-space: normal; text-align: center; justify-content: center; }
  .btn--primary { width: 100%; }
  .btn--ghost { justify-content: center; }
}