/* ==========================================================================
   BookmarkHub — marketing page components
   Loaded on top of style.css, which owns the tokens and primitives.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */

.hero {
  padding: 108px 0 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}
/* Grid items default to min-width:auto — "at least as wide as my content's
   own minimum" — same overflow trap as flex items, just one level up. That
   silently overrode the proof panel's own internal overflow:hidden/ellipsis
   fix and forced the whole 1fr track (and the page with it) wider than the
   viewport. This is the actual fix; the inner min-width:0 on the URL text
   is still correct to keep, just not sufficient by itself. */
.hero__copy, .hero__proof { min-width: 0; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

/* Quiet entrance on load — each element rises in a beat after the last one.
   Above the fold, so this plays immediately rather than waiting on scroll
   like .reveal does further down the page. */
.hero h1, .hero .lede, .hero .hero__actions, .hero .hero__meta, .hero__proof {
  animation: hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.hero h1 { animation-delay: 0.03s; }
.hero .lede { animation-delay: 0.12s; }
.hero .hero__actions { animation-delay: 0.21s; }
.hero .hero__meta { animation-delay: 0.28s; }
.hero__proof { animation-delay: 0.18s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .lede, .hero .hero__actions, .hero .hero__meta, .hero__proof { animation: none; }
}

.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: italic; }

.lede {
  max-width: 52ch;
  margin-top: 20px;
  font-size: clamp(1rem, 1.5vw, 1.135rem);
  line-height: 1.62;
  color: var(--text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.hero__actions .btn-primary {
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.06), 0 8px 20px -6px rgba(76, 95, 215, 0.45);
}
.hero__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta svg { width: 13px; height: 13px; flex: none; color: var(--success); }

/* The hero's right column — not a decoration, an actual demonstration: the
   exact transformation the product performs, at the scale a screenshot of
   the real app (already lower on the page) can't show in isolation. Plain
   card, no rotation, no drop shadow theatrics. */
.hero__proof {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: #fff;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.hero__proof-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a8a8b3;
}
.hero__proof-plain {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  opacity: 0.85;
}
.hero__proof-plain svg { width: 14px; height: 14px; flex: none; opacity: 0.7; }
.hero__proof-plain span {
  /* A flex item defaults to min-width:auto — "at least as wide as my
     content" — which overrides overflow:hidden/ellipsis entirely unless
     min-width is reset. Without this, the un-wrapped URL text forces this
     span (and everything containing it, right up to the page) wider than
     the viewport instead of actually truncating. */
  min-width: 0;
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero__proof-divider {
  position: relative;
  margin: 22px 0;
  border-top: 1px solid var(--border);
}
.hero__proof-divider::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5fd7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.hero__proof-card {
  margin: 12px -13px 0;
  padding: 13px;
  display: flex;
  gap: 13px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  box-shadow: 0 2px 10px -2px rgba(76, 95, 215, 0.16);
}
.hero__proof-card > div { min-width: 0; }
.hero__proof-tile {
  flex: none;
  width: 36px;
  height: 36px;
  background: url('/favicon.svg') center / contain no-repeat;
  font-size: 0;
  filter: drop-shadow(0 3px 6px rgba(76, 95, 215, 0.4));
}
.hero__proof-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.hero__proof-note { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.hero__proof-tags { margin-top: 9px; display: flex; gap: 6px; }
.hero__proof-tags span {
  font-size: 11.5px;
  font-weight: 550;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: #fff;
  color: var(--accent-hover);
}
.hero__proof-cta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.hero__proof-cta svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.hero__proof-cta:hover { color: var(--accent-hover); }
.hero__proof-cta:hover svg { transform: translateX(2px); }

/* Scroll-reveal — a fade+rise applied via IntersectionObserver in index.html.
   No-JS / reduced-motion always shows content, never hides it. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Stagger — the grid itself reveals invisibly (no opacity/transform of its
   own past the default), and its direct children cascade in one after
   another instead of popping in as a single block. Six nth-child slots
   covers every grid that uses it (notes has the most, at five). */
.reveal.stagger { opacity: 1; transform: none; }
/* Uses the independent `translate` property rather than `transform` so the
   entrance slide composes with each card's own `transform` hover-lift
   instead of one clobbering the other — these are separate properties the
   browser combines, no specificity fight. */
.reveal.stagger > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), translate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.stagger.is-visible > * { opacity: 1; translate: none; }
.reveal.stagger > *:nth-child(1) { transition-delay: 0.02s; }
.reveal.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal.stagger > *:nth-child(3) { transition-delay: 0.14s; }
.reveal.stagger > *:nth-child(4) { transition-delay: 0.2s; }
.reveal.stagger > *:nth-child(5) { transition-delay: 0.26s; }
.reveal.stagger > *:nth-child(6) { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal.stagger > * { opacity: 1; translate: none; transition: none; }
}

/* --------------------------------------------------------------------
   Realistic app screenshot
   -------------------------------------------------------------------- */

.appshot-wrap {
  margin-top: 54px;
  position: relative;
  transition-delay: 0.32s; /* keeps it in the hero's on-load stagger rhythm */
  perspective: 1600px;
}
.appshot-label {
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.appshot {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0px));
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .appshot-wrap:hover .appshot {
    --tilt-lift: -6px;
    box-shadow: 0 32px 64px -18px rgba(9, 9, 11, 0.22), 0 10px 24px -10px rgba(9, 9, 11, 0.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .appshot { transition: none; transform: none !important; }
}
.appshot-wrap::after {
  /* fades the bottom of the shot into the page */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}

.appshot {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  text-align: left;
}

.appshot__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 13px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.appshot__dots { display: flex; gap: 6px; }
.appshot__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2e2e6; }
.appshot__addr {
  flex: 1;
  max-width: 260px;
  margin-inline: auto;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}
.appshot__addr svg { width: 9px; height: 9px; }

.appshot__body { display: grid; grid-template-columns: 196px 1fr; }

.appshot__side {
  border-right: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.appshot__main { padding: 15px 17px 22px; min-width: 0; }

.shot-label {
  padding: 0 8px;
  margin: 14px 0 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shot-label:first-child { margin-top: 0; }

.shot-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
.shot-nav.is-active {
  background: #fff;
  border: 1px solid var(--border);
  padding: 5px 7px;
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.shot-nav svg { width: 14px; height: 14px; opacity: 0.7; flex: none; }
.shot-nav span:first-of-type { flex: 1; }
.shot-nav b { font-weight: 500; font-size: 11.5px; color: var(--text-muted); }

.shot-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px; }
.shot-tag {
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  background: var(--bg-sunken);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}
.shot-tag.is-active { background: var(--accent-soft); color: var(--accent-hover); }

.shot-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
}
.shot-search {
  flex: 1;
  max-width: 300px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
}
.shot-search svg { width: 12px; height: 12px; flex: none; }
.shot-btn {
  height: 30px;
  padding: 0 11px;
  margin-left: auto;
  border-radius: var(--r-md);
  background: var(--text);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.shot-btn svg { width: 12px; height: 12px; }

.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }

.shot-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  padding: 12px;
  min-width: 0;
}
.shot-card__top { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
.shot-card__tile {
  width: 24px; height: 24px; flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.shot-card__title {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.011em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shot-card__domain { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.shot-card__note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 9px;
}
.shot-card__foot { display: flex; align-items: center; gap: 5px; }
.shot-card__foot .shot-tag { height: 18px; font-size: 10px; padding: 0 6px; }
.shot-card__date { margin-left: auto; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

/* --------------------------------------------------------------------
   Extension quick demo — a looping, illustrative animation of the real
   popup.html flow (click → auto-saves → note/tags filled in after),
   built in CSS rather than a recorded video/GIF so it stays crisp at any
   size, needs no asset pipeline, and costs nothing to load. One shared
   --dur drives every element's keyframes off the same 0-100% timeline so
   they stay in sync without JS.
   -------------------------------------------------------------------- */

.ext-demo-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
/* Grid/flex items default to min-width:auto, which overrides the address
   bar's own overflow:hidden/ellipsis and forces everything up the chain —
   .ext-demo, the grid track, the page — wider than the viewport. Same trap
   documented on .hero__proof-plain above; needs resetting at every level
   it occurs. */
.ext-demo-copy, .ext-demo { min-width: 0; }
@media (min-width: 900px) {
  .ext-demo-wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
}
.ext-demo-eyebrow {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.ext-demo-copy h2 { margin-top: 10px; }
.ext-demo-copy p:not(.ext-demo-eyebrow) {
  margin-top: 12px;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 44ch;
}
.ext-demo-link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}
.ext-demo-link svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.ext-demo-link:hover { color: var(--accent-hover); }
.ext-demo-link:hover svg { transform: translateX(2px); }

/* One seamless window — same border/radius/shadow/overflow-hidden
   treatment as .appshot further down this page, with the toolbar as its
   header strip and the popup as its body. Two rounds of feedback on an
   earlier version (a narrower "dropdown" floating below the toolbar with
   its own border/shadow) confirmed that reads as broken/misaligned at
   this size rather than intentional — fusing them removes the seam
   entirely instead of trying to tune it. */
.ext-demo {
  --dur: 9s;
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ext-demo__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.ext-demo__tab-dots { display: flex; gap: 6px; flex: none; }
.ext-demo__tab-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e2e2e6; }
.ext-demo__tab-addr {
  flex: 1;
  min-width: 0;
  height: 23px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ext-demo__tab-addr svg { width: 10px; height: 10px; flex: none; opacity: 0.7; }
/* Styled as an actual toolbar button (bordered square, its own subtle
   shadow) rather than a bare floating icon, so it reads as the thing
   being clicked instead of a decorative badge. */
.ext-demo__toolbar-icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.ext-demo__toolbar-icon .logo__mark { width: 20px; height: 20px; }
.ext-demo__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: extDemoRing var(--dur) infinite;
}
.ext-demo__cursor {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  animation: extDemoCursor var(--dur) infinite;
}

.ext-demo__popup { position: relative; z-index: 1; }
.ext-demo__popup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.ext-demo__popup-head .logo__mark { width: 18px; height: 18px; }

.ext-demo__body { position: relative; }
.ext-demo__stage { padding: 16px; }
.ext-demo__stage--saving { position: absolute; inset: 0; animation: extDemoSaving var(--dur) infinite; }
.ext-demo__stage--done { animation: extDemoDone var(--dur) infinite; }

.ext-demo__preview { display: flex; align-items: center; gap: 10px; }
.ext-demo__preview .hero__proof-tile { width: 30px; height: 30px; }
.ext-demo__preview strong { display: block; font-size: 13px; }
.ext-demo__preview span { font-size: 11.5px; color: var(--text-muted); }
.ext-demo__hint {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.ext-demo__check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-soft, #e6f6ee);
  color: var(--success);
  animation: extDemoCheck var(--dur) infinite;
}
.ext-demo__check svg { width: 15px; height: 15px; }
.ext-demo__stage--done b { display: block; margin-top: 10px; font-size: 13.5px; }
.ext-demo__field { margin-top: 12px; }
.ext-demo__label { display: block; font-size: 10.5px; font-weight: 550; color: var(--text-muted); margin-bottom: 4px; }
.ext-demo__typewriter {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
}
.ext-demo__typewriter span {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: extDemoType var(--dur) infinite;
}
.ext-demo__pills { display: flex; gap: 6px; }
.ext-demo__pills span {
  font-size: 11px;
  font-weight: 550;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-hover);
  opacity: 0;
  transform: translateY(4px);
}
.ext-demo__pills span:nth-child(1) { animation: extDemoTag1 var(--dur) infinite; }
.ext-demo__pills span:nth-child(2) { animation: extDemoTag2 var(--dur) infinite; }

@keyframes extDemoRing {
  0%, 8% { opacity: 0; transform: scale(0.6); }
  9% { opacity: 0.7; transform: scale(0.6); }
  17% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; }
}
@keyframes extDemoCursor {
  0%, 3% { opacity: 0; transform: translate(16px, 14px) scale(0.8); }
  8% { opacity: 1; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; transform: translate(0, 0) scale(0.85); }
  17%, 100% { opacity: 0; }
}
/* Saving and done cross-fade into each other continuously — one of the
   two is always at least partially visible, so the fused window never
   shows an empty body between cycles. 0% and 100% match on every one of
   these so the loop restart is invisible. */
@keyframes extDemoSaving {
  0%, 20% { opacity: 1; }
  26%, 90% { opacity: 0; }
  96%, 100% { opacity: 1; }
}
@keyframes extDemoDone {
  0%, 20% { opacity: 0; }
  26%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes extDemoCheck {
  0%, 20% { transform: scale(0.5); opacity: 0; }
  26% { transform: scale(1.15); opacity: 1; }
  30%, 90% { transform: scale(1); opacity: 1; }
  96%, 100% { transform: scale(0.5); opacity: 0; }
}
@keyframes extDemoType {
  0%, 30% { clip-path: inset(0 100% 0 0); }
  52%, 88% { clip-path: inset(0 0 0 0); }
  96%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes extDemoTag1 {
  0%, 56% { opacity: 0; transform: translateY(4px); }
  62%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes extDemoTag2 {
  0%, 61% { opacity: 0; transform: translateY(4px); }
  67%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(4px); }
}

/* Reduced motion still gets the popup/note/tags sequence — none of that
   is the kind of large, continuous, or parallax-style motion the
   preference exists to avoid, and freezing it entirely defeated the
   point of a section whose whole job is showing something happen. Only
   the click-simulation flourish (ring pulse + cursor dot) is dropped,
   since it's decorative rather than informative.
   This deliberately opts back out of the sitewide reduced-motion reset
   (style.css's `* { animation-duration: 0.01ms !important }`) for just
   these elements — that blanket rule is right for everything else, but
   collapsing an already-gentle, informative product demo to a single
   0.01ms frame makes it look broken rather than calm. */
@media (prefers-reduced-motion: reduce) {
  .ext-demo__ring, .ext-demo__cursor { animation: none !important; opacity: 0; }
  .ext-demo__stage--saving, .ext-demo__stage--done,
  .ext-demo__check, .ext-demo__typewriter span, .ext-demo__pills span {
    animation-duration: var(--dur) !important;
    animation-iteration-count: infinite !important;
  }
}

/* --------------------------------------------------------------------
   Section furniture — left aligned, no repeating kickers
   -------------------------------------------------------------------- */

.section { padding: 88px 0; }
/* Tinted bands used to be separated by a hard 1px rule top and bottom, which
   read as a harsh seam across the page. The tint now fades up out of white and
   back down into it, so neighbouring sections meet without a visible line —
   slightly deeper than --bg-subtle to survive being feathered at both ends. */
.section--tint {
  background: linear-gradient(
    180deg,
    var(--bg) 0,
    #f6f6f8 90px,
    #f6f6f8 calc(100% - 90px),
    var(--bg) 100%
  );
}
.section--tight { padding: 64px 0; }

.section-intro { max-width: 640px; margin-bottom: 44px; }
.section-intro h2 { margin-bottom: 15px; }
.section-intro p { color: var(--text-secondary); font-size: 1.03rem; line-height: 1.62; }
.section-intro.is-centered { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------
   Split layouts
   -------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 52px;
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
.split h2 { margin-bottom: 16px; }
.split > div > p { color: var(--text-secondary); line-height: 1.62; }
.split > div > p + p { margin-top: 14px; }

/* --------------------------------------------------------------------
   The comparison: browser bookmark vs BookmarkHub
   -------------------------------------------------------------------- */

.compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.compare__panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.compare__panel--good { border-color: var(--text); box-shadow: var(--shadow-md); }
@media (hover: hover) and (pointer: fine) {
  .compare__panel:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .compare__panel--good:hover { box-shadow: var(--shadow-lg); }
}

.compare__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.compare__panel--good .compare__label { color: var(--text); }
.compare__label svg { width: 14px; height: 14px; }

/* A browser's idea of a bookmark */
.browser-bm {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.browser-bm + .browser-bm { border-top: 1px solid var(--border); border-radius: 0; }
.browser-bm i {
  width: 15px; height: 15px; flex: none;
  border-radius: 4px;
  background: var(--bg-sunken);
}
.browser-bm span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.compare__verdict {
  margin-top: auto;
  padding-top: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.compare__panel--good .compare__verdict { color: var(--text-secondary); }

/* --------------------------------------------------------------------
   Annotated bookmark anatomy
   -------------------------------------------------------------------- */

.anatomy {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow-md);
}

.anatomy__row { display: flex; gap: 11px; align-items: flex-start; }
.anatomy__tile {
  width: 32px; height: 32px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 14px; font-weight: 600;
}
.anatomy__title { font-size: 15px; font-weight: 550; letter-spacing: -0.013em; line-height: 1.4; }
.anatomy__domain { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.anatomy__note {
  margin: 13px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.anatomy__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.anatomy__foot .tag { cursor: default; }
.anatomy__date { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* Marker chips that tie the card to the list beside it */
.marker {
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.field-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.field-list li {
  display: flex;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.2s var(--ease);
}
.field-list li:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .field-list li:hover { padding-left: 6px; }
  .field-list li:hover .marker { background: var(--accent); color: #fff; transform: scale(1.1); }
}
.field-list strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.field-list p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.field-list code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-sunken);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------
   Search demo
   -------------------------------------------------------------------- */

.search-demo {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.search-demo__input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.search-demo__input svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.search-demo__input .caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  background: var(--accent);
  animation: blink 1.1s steps(2, start) infinite;
  vertical-align: -3px;
}
@keyframes blink { 50% { opacity: 0; } }
.search-demo__count { margin-left: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.search-demo__hit {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s var(--ease);
}
.search-demo__hit:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .search-demo__hit:hover { background: var(--bg-subtle); }
}
.search-demo__hit .anatomy__tile { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.search-demo__hit strong { display: block; font-size: 13.5px; font-weight: 550; letter-spacing: -0.011em; }
.search-demo__hit p { margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.search-demo__hit .why { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }

mark {
  background: #fef3c7;
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------------
   Keyboard shortcuts
   -------------------------------------------------------------------- */

.kbd-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.kbd-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}
.kbd-list li:last-child { border-bottom: none; }
.kbd-list kbd { flex: none; min-width: 26px; }

/* --------------------------------------------------------------------
   Browser support + extension
   -------------------------------------------------------------------- */

.browsers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.browsers__copy, .browsers__grid { min-width: 0; }
@media (min-width: 900px) {
  .browsers { grid-template-columns: 1fr 1.1fr; gap: 56px; }
}
.browsers__copy p {
  margin-top: 14px;
  margin-bottom: 24px;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-secondary);
}
.browsers__copy .btn svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.browsers__copy .btn:hover svg { transform: translateY(2px); }

/* Faint graph-paper field with the logos sitting in some of the cells —
   the empty cells are what make it read as a grid rather than a row. */
/* A wide, sparse field with the logos scattered across it — the empty cells
   are the point, they're what makes it read as a grid rather than a row of
   badges. Below the breakpoint the fillers are dropped and the logos close
   up into a tidy block, since a 6-wide field is unusable on a phone. */
.browsers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 560px) {
  .browsers__grid { grid-template-columns: repeat(6, 1fr); gap: 11px; }
}
.browsers__cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: #fff;
  /* Each tile is nudged a few pixels off its cell so the set reads as
     scattered rather than grid-locked. `translate` rather than `transform`
     so the hover lift below composes with it instead of overwriting it. */
  translate: var(--dx, 0) var(--dy, 0);
  box-shadow:
    0 1px 2px rgba(9, 9, 11, 0.05),
    0 6px 14px -4px rgba(9, 9, 11, 0.1);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
/* Real brand icons come from the same DuckDuckGo icon service the app already
   uses for bookmark favicons. They're 32–48px at source, so they're shown a
   touch under that to stay crisp rather than upscaled and soft. */
.browsers__cell img {
  width: 60%;
  max-width: 44px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
/* Pure spacers — they hold the scatter positions open and draw nothing. */
.browsers__cell.is-empty {
  background: none;
  box-shadow: none;
  translate: none;
}
@media (hover: hover) and (pointer: fine) {
  .browsers__cell:not(.is-empty):hover {
    transform: translateY(-4px);
    box-shadow:
      0 2px 4px rgba(9, 9, 11, 0.06),
      0 14px 26px -8px rgba(9, 9, 11, 0.18);
  }
}
/* On a phone the spacers are dropped and the logos close up into a block —
   the offsets go with them, since a tight grid shouldn't look wobbly. */
@media (max-width: 559px) {
  .browsers__cell.is-empty { display: none; }
  .browsers__cell { translate: none; }
}

.ext-detail {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 760px) {
  .ext-detail { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.ext-detail__item { display: flex; gap: 12px; align-items: flex-start; }
.ext-detail__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ext-detail__item strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.ext-detail__item p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.ext-detail__note {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------
   Trust — plain icon + text columns, deliberately lighter than the
   bordered note-cards above so it doesn't read as "another feature grid"
   -------------------------------------------------------------------- */

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.trust-item svg { width: 22px; height: 22px; color: var(--accent); transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .trust-item:hover svg { transform: scale(1.15) translateY(-1px); }
}
.trust-item h3 { margin-top: 14px; font-size: 14.5px; }
.trust-item p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.trust-more { margin-top: 32px; text-align: center; font-size: 13.5px; color: var(--text-muted); }
.trust-more a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.trust-more a:hover { color: var(--text); }
@media (max-width: 760px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}

/* --------------------------------------------------------------------
   Small feature notes — asymmetric, not a uniform grid
   -------------------------------------------------------------------- */

.notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.note-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .note-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .note-card:hover .note-card__ico { transform: scale(1.08); }
}
.note-card__ico {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 15px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform 0.25s var(--ease);
}
.note-card__ico svg { width: 16px; height: 16px; }
.note-card h3 { margin-bottom: 7px; font-size: 15.5px; }
.note-card p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.note-card code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-sunken);
}

/* --------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------- */

.pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 840px;
  margin-inline: auto;
  align-items: start;
}
.plan {
  position: relative;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: #fff;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.plan--featured { border-color: var(--text); box-shadow: var(--shadow-md); }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .plan--featured:hover { box-shadow: var(--shadow-lg); }
}
.plan__flag {
  position: absolute;
  top: -11px;
  left: 30px;
  height: 22px;
  padding: 0 11px;
  border-radius: var(--r-full);
  background: var(--text);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.plan__name { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.plan__price { display: flex; align-items: baseline; gap: 5px; margin: 13px 0 6px; }
.plan__price b { font-size: 38px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.plan__price span { font-size: 14px; color: var(--text-muted); }
.plan__desc { font-size: 14px; line-height: 1.55; color: var(--text-secondary); min-height: 44px; }
.plan .btn { margin: 20px 0 22px; }

.plan__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-secondary); }
.plan__list svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--accent); }
.plan__list li.is-muted { color: var(--text-muted); }
.plan__list li.is-muted svg { color: var(--text-muted); }

.pricing-note {
  max-width: 840px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}


/* --------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------- */

.cta-band { padding: 80px 0; text-align: center; }
.cta-band__inner {
  padding: 54px 32px;
  border-radius: var(--r-xl);
  background: var(--text);
  color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 48ch; margin: 14px auto 0; color: rgba(255, 255, 255, 0.66); line-height: 1.6; }
.cta-band .btn { margin-top: 26px; --btn-bg: #fff; --btn-fg: var(--text); }
.cta-band .btn:hover { --btn-bg: #eeeef0; }
.cta-band__meta {
  list-style: none;
  padding: 0;
  margin: 26px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.cta-band__meta li { display: inline-flex; align-items: center; gap: 7px; }
.cta-band__meta svg { width: 13px; height: 13px; flex: none; color: #4ade80; }

/* --------------------------------------------------------------------
   Landing footer — a real multi-column footer rather than one long
   row of links, which stopped scaling once the legal pages arrived.
   -------------------------------------------------------------------- */

.site-footer--landing { padding: 64px 0 30px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 30ch;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col h4 {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-col a,
.footer-col button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.footer-col a:hover,
.footer-col button:hover { color: var(--text); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.footer-base p { font-size: 13px; color: var(--text-muted); }
.footer-base > a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.15s var(--ease);
}
.footer-base > a:hover { color: var(--text-secondary); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------
   Legal documents (privacy policy)
   -------------------------------------------------------------------- */

.legal { padding-top: 56px; }
.legal__head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal__updated { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }

.legal__notice {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.legal__notice p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.legal__notice p + p { margin-top: 8px; }

.legal__toc {
  margin-top: 32px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
.legal__toc a {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 3px 0;
  transition: color 0.15s var(--ease);
}
.legal__toc a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.legal__body { margin-top: 44px; }
.legal__body h2 {
  font-size: 1.2rem;
  margin-top: 42px;
  padding-top: 6px;
  scroll-margin-top: 90px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: 0.95rem; margin-top: 22px; scroll-margin-top: 90px; }
.legal__body p { margin-top: 12px; font-size: 14.5px; line-height: 1.68; color: var(--text-secondary); }
.legal__body ul, .legal__body ol { margin-top: 12px; padding-left: 22px; }
.legal__body li { font-size: 14.5px; line-height: 1.68; color: var(--text-secondary); margin-top: 6px; }
.legal__body li::marker { color: var(--text-muted); }
.legal__body strong { color: var(--text); font-weight: 600; }
.legal__body a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.legal__body code { font-size: 0.9em; }
/* .legal__body a above is specific enough to beat .btn's own color rule,
   which silently turned any button placed inside prose (the blog posts'
   CTA links) into invisible same-color-as-background text -- a real bug
   from copy-pasting the article-prose layout for blog posts without
   accounting for a non-text-link element ending up inside it. */
.legal__body .btn { color: var(--btn-fg); text-decoration: none; }

.legal__table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.legal__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal__table th, .legal__table td { text-align: left; padding: 10px 14px; vertical-align: top; }
.legal__table th { background: var(--bg-subtle); color: var(--text); font-weight: 600; white-space: nowrap; }
.legal__table td { color: var(--text-secondary); border-top: 1px solid var(--border); }
.legal__table tr:first-child td { border-top: none; }

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 48px 0 60px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.legal__back:hover { color: var(--text); }
.legal__back svg { width: 14px; height: 14px; }

@media (max-width: 560px) {
  .legal__toc { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Blog — individual posts reuse the legal-doc article layout
   (.legal__body etc.), so most of what's here is the index grid plus
   the illustrative figures dropped into post content.
   -------------------------------------------------------------------- */

.blog-figure { margin: 24px 0; }
.blog-figure > * { max-width: 420px; margin: 0 auto; }
.blog-figure--wide > * { max-width: 100%; }
.blog-figure figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  text-align: center;
  color: var(--text-muted);
}

/* Tags vs. collections diagram */
.tag-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tag-diagram__col {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
}
.tag-diagram__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a8a8b3;
  margin-bottom: 12px;
}
.tag-diagram__bookmark { display: flex; align-items: center; gap: 10px; }
.tag-diagram__pills { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-diagram__pills span {
  font-size: 11.5px;
  font-weight: 550;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.tag-diagram__folder-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.tag-diagram__folder-head svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.tag-diagram__folder-row {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.tag-diagram__note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .tag-diagram { grid-template-columns: 1fr; }
}

/* Extension popup mockup — same visual language as .appshot's browser
   chrome, scaled down to card size instead of a full window. */
.ext-mock {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ext-mock__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.ext-mock__head .logo__mark { width: 20px; height: 20px; }
.ext-mock__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ext-mock__field label { display: block; font-size: 11px; font-weight: 550; color: var(--text-secondary); margin-bottom: 4px; }
.ext-mock__field .input, .ext-mock__field .textarea { font-size: 12.5px; padding: 7px 10px; }
.ext-mock__save {
  margin-top: 2px;
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: var(--r-md);
  background: var(--text);
  color: #fff;
  font-size: 12.5px;
  font-weight: 550;
  text-align: center;
}

/* Crowded bookmarks bar mockup — a wall of unlabelled squares fading out
   at the edge, standing in for "past a certain point they're all the
   same blur of tiny icons." */
.bar-mock {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.bar-mock__row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
  mask-image: linear-gradient(to right, #000 85%, transparent);
}
.bar-mock__row span {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  opacity: 0.85;
}
.bar-mock__labels { margin-top: 10px; display: flex; gap: 6px; }
.bar-mock__labels span {
  flex: 1;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--border);
}

.blog-hero { padding-top: 56px; }
.blog-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.blog-hero p { margin-top: 10px; font-size: 1.03rem; color: var(--text-secondary); max-width: 46ch; }

.blog-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.blog-card {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.blog-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card__meta { font-size: 12.5px; color: var(--text-muted); }
.blog-card h2 { margin-top: 10px; font-size: 1.08rem; letter-spacing: -0.015em; }
.blog-card h2 a { color: var(--text); }
.blog-card h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-card p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.blog-card__read { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 550; color: var(--accent); }

.blog-post__meta { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.blog-post__cta {
  margin-top: 44px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  text-align: center;
}
.blog-post__cta p { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 14px; }

@media (max-width: 700px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--reverse > *:first-child { order: 0; }
  .compare, .notes { grid-template-columns: 1fr; }
  .appshot__body { grid-template-columns: 1fr; }
  .appshot__side { display: none; }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .pricing { grid-template-columns: 1fr; }
  .section { padding: 62px 0; }
  .hero { padding-top: 52px; }
}

@media (max-width: 620px) {
  .shot-grid { grid-template-columns: 1fr; }
  .shot-grid .shot-card:nth-child(n + 3) { display: none; }
  .cta-band__inner { padding: 38px 22px; }
  .anatomy__date { display: none; }

  /* 62px top+bottom per section (124px between consecutive ones) plus a
     44px section-intro margin on top of that reads fine on a tall desktop
     viewport but turns into a lot of dead scrolling on a phone, where
     there's much less content per screen to justify it. */
  .section { padding: 44px 0; }
  .section-intro { margin-bottom: 30px; }
  .cta-band { padding: 56px 0; }
}