/* ---------------------------------------------------------------------
   Advanced Screenshots: marketing site
   One screen: header, pitch, Free plan, footer. Flat, high-contrast,
   no shadows, no decorative borders.
   --------------------------------------------------------------------- */

:root {
  --ink: #121214;
  --paper: #fff;
  --bg: #0f1a3d;
  /* Same gradient as the Chrome Web Store screenshots/promo tiles. */
  --bg-gradient: radial-gradient(1200px 600px at 50% -10%, #3c6ef6 0%, #1d3a9a 45%, #0f1a3d 100%);
  --cloud: #f1f1ef;
  --graphite: #67676b;
  --graphite-light: #9a9a9e;
  --accent: #2e5cff;
  --markup: #ff3b30; /* the extension's red annotation color */

  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 18px/1.5 var(--font);
  color: var(--ink);
  background: var(--bg-gradient) no-repeat, var(--bg);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

a {
  color: inherit;
}

h1, h2 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

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

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
}

.intro {
  text-align: center;
}

.intro h1 {
  color: var(--paper);
  font-size: clamp(2.75rem, 6vw, 4rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.intro p {
  color: var(--paper);
  font-size: 1.5rem;
}

/* ---------------------------------------------------------------------
   Plans
   --------------------------------------------------------------------- */

.plans {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.plan {
  background: var(--cloud);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.plan ul {
  margin-bottom: 1.75rem;
  flex: 1;
}

.plan li {
  font-size: 1.05rem;
  color: var(--graphite);
  padding: 0.35rem 0 0.35rem 1.3em;
  position: relative;
}

.plan li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Install button: the page's main call to action. */

.cta {
  position: relative;
  margin: 0.5rem 0 0.25rem;
}

.cta a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  padding: 1em 1.4em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--paper);
  background: linear-gradient(180deg, #4d7cff 0%, #2e5cff 55%, #1f47e0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -6px rgba(46, 92, 255, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 16px 32px -6px rgba(46, 92, 255, 0.8);
}

.cta a:active {
  transform: translateY(0);
}

.cta__icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* ---------------------------------------------------------------------
   Annotations
   The page is marked up with the extension's own tools: highlighter,
   oval, arrow and label text. Every mark
   uses the editor's finish -- white keyline, color on top, soft shadow
   -- and draws itself in once, in reading order (--at is its start time).
   --------------------------------------------------------------------- */

.scribble {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.3));
}

.scribble .k {
  stroke: #fff;
  stroke-width: 9px;
}

.scribble .c {
  stroke: var(--mark-color, var(--markup));
  stroke-width: 5px;
}

.scribble path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  animation: mark-draw var(--dur, 0.6s) var(--at, 0s) cubic-bezier(0.6, 0, 0.3, 1) forwards;
}

.scribble .head {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: mark-fade 0.15s calc(var(--at, 0s) + var(--dur, 0.6s)) ease-out forwards;
}

/* Headline highlighter: a chisel-tip marker swipes across each phrase in
   turn, in the editor's highlighter colors, and the text flips from white
   to ink exactly where the marker has passed so it stays readable on the
   bright color. The marker lives on .hl, the text on .hl__ink: a
   background-clip:text element can't also sit above its own ::before. */
.hl {
  --dur: 0.45s;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  padding: 0 0.1em;
}

.hl::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.14em -0.04em 0.02em;
  border-radius: 0.06em 0.22em 0.1em 0.28em / 0.2em 0.12em 0.26em 0.1em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 35%, transparent 70%, rgba(0, 0, 0, 0.08)),
    var(--hl);
  transform-origin: left center;
  transform: skewX(-12deg) rotate(-1.2deg) scaleX(0);
  animation: hl-swipe var(--dur) var(--at) var(--ease) forwards;
}

.hl__ink {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, var(--ink) 50%, var(--paper) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: hl-ink var(--dur) var(--at) var(--ease) forwards;
}

@keyframes hl-swipe {
  to { transform: skewX(-12deg) rotate(-1.2deg) scaleX(1); }
}

@keyframes hl-ink {
  to { background-position: 0 0; }
}

.plan {
  position: relative;
}

/* Oval, arrow and label on the install button. */
.cta__oval {
  --at: 1.8s;
  --dur: 0.7s;
  inset: -14px -16px;
  width: calc(100% + 32px);
  height: calc(100% + 28px);
}

.cta__arrow {
  --at: 2.35s;
  --dur: 0.4s;
  left: calc(100% + 26px);
  top: 18px;
  width: 170px;
  height: 120px;
}

.cta__label {
  position: absolute;
  z-index: 2;
  left: calc(100% + 150px);
  top: 124px;
  white-space: nowrap;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--markup);
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(-6deg) scale(0);
  animation: mark-pop 0.35s 2.75s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}

@keyframes mark-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes mark-fade {
  to { opacity: 1; }
}

.cta__label { --rot: -6deg; }

@keyframes mark-pop {
  to { transform: rotate(var(--rot)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .scribble path,
  .scribble .head,
  .hl::before,
  .hl__ink,
  .cta__label {
    animation: none;
  }

  .scribble path {
    stroke-dashoffset: 0;
  }

  .scribble .head {
    opacity: 1;
  }

  .hl::before {
    transform: skewX(-12deg) rotate(-1.2deg);
  }

  .hl__ink {
    background-position: 0 0;
  }

  .cta__label {
    transform: rotate(var(--rot));
  }
}

/* Not enough room beside the card for the button's arrow and label. */
@media (max-width: 1080px) {
  .cta__arrow,
  .cta__label {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Document pages (privacy policy)
   --------------------------------------------------------------------- */

.page {
  flex: 1;
  padding: 2rem 0;
}

.page .wrap {
  max-width: 760px;
  gap: 1rem;
}

.back {
  font-size: 1rem;
  font-weight: 600;
}

.back a {
  color: var(--paper);
  text-decoration: none;
}

.back a:hover {
  text-decoration: underline;
}

.doc {
  background: var(--cloud);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  font-size: 1.05rem;
}

.doc h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.02em;
}

.doc .updated {
  color: var(--graphite);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.doc h2 {
  font-size: 1.3rem;
  margin: 2rem 0 0.6rem;
}

.doc p + p {
  margin-top: 0.75rem;
}

.doc .updated + p {
  margin-top: 1.5rem;
}

.doc ul {
  list-style: disc;
  padding-left: 1.3em;
}

.doc li {
  padding: 0.2rem 0;
}

.doc ul + p {
  margin-top: 0.75rem;
}

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

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

footer {
  flex: none;
  padding: 1rem 0 1.25rem;
  text-align: center;
}

footer p {
  font-size: 1rem;
  color: var(--paper);
}

footer a {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

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

@media (max-width: 640px) {
  .hero {
    padding: 1rem 0;
  }

  .cta a {
    font-size: 1.05rem;
    white-space: nowrap;
  }

  .doc {
    padding: 1.5rem 1.25rem;
  }
}