@font-face {
  font-family: "Anek Latin";
  src: url("fonts/AnekLatin-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* Peacock & Cream, the same palette as the extension. */
:root {
  --paper: #FFFFFF;
  --paper-2: #F1F7F7;
  --ink: #15232A;
  --ink-2: #4E626A;
  --ink-3: #74878E;
  --line: #DCE6E8;
  --line-strong: #C4D3D6;
  --teal: #0C7F8C;
  --teal-hover: #0A6D78;
  --teal-ink: #FFFFFF;
  --teal-soft: #E3F2F3;
  --note: #FFF6E2;
  --note-line: #EFD9A6;
  --amber: #F4BC4C;
  --amber-ink: #2A1E00;
  /* The hero chat: white is the store, cream is you, amber marks what they shouldn't know. */
  --night: #0D5B64;
  --night-shadow: rgb(13 91 100 / 0.55);
  --store-bubble: #FFFFFF;
  --store-ink: #15232A;
  --you-bubble: #FFF1D2;
  --you-ink: #0B3F46;
  --marker: rgb(244 188 76 / 0.5);
  --moon: #FFF1D2;
  --font: "Anek Latin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0C191C;
    --paper-2: #10242A;
    --ink: #E7F2F3;
    --ink-2: #9BB3B8;
    --ink-3: #6F878D;
    --line: #1F3237;
    --line-strong: #34494E;
    --teal: #62D2DA;
    --teal-hover: #86DEE4;
    --teal-ink: #06181A;
    --teal-soft: #12363B;
    --note: #2A2310;
    --note-line: #57481F;
    --night: #0E2F35;
    --night-shadow: rgb(0 0 0 / 0.6);
    --store-bubble: #17444B;
    --store-ink: #E7F2F3;
    --marker: rgb(244 188 76 / 0.36);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 420 17px/1.55 var(--font); }
img, svg { max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-hover); }
:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
p, ol, ul, figure, h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.01em; }
p, li { text-wrap: pretty; }
strong { font-weight: 650; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; padding: 8px 14px; background: var(--teal); color: var(--teal-ink); border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; color: var(--teal-ink); }

.site-header { padding-block: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 720; font-stretch: 90%; }
.brand:hover { color: var(--ink); }

/* Hero: the question, the short answer, and the chat that shows it. */
.hero { display: grid; gap: clamp(40px, 7vw, 72px); align-items: center; padding-block: clamp(24px, 6vw, 72px) clamp(48px, 7vw, 88px); }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
h1 { font-size: clamp(44px, 8.4vw, 80px); line-height: 0.97; font-weight: 760; font-stretch: 80%; }
.lede { max-width: 46ch; font-size: clamp(18px, 2.2vw, 20px); line-height: 1.5; color: var(--ink-2); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 12px; border: 1.5px solid transparent;
  font: 640 16.5px/1.1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.button.primary { background: var(--teal); color: var(--teal-ink); }
.button.primary:hover { background: var(--teal-hover); color: var(--teal-ink); }
.button.small { min-height: 42px; padding: 10px 16px; font-size: 15px; border-radius: 10px; }
.button svg { flex: none; }
.button:disabled { cursor: progress; opacity: 0.75; }
.button:active { transform: translateY(1px); }

/* The chat: GoKwik's own example message, answered. */
.chat { display: grid; gap: 14px; }
.chat-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 14px;
  padding: 22px 20px 24px;
  background: var(--night); color: #FFFFFF;
  border-radius: 32px;
  box-shadow: 0 28px 50px -34px var(--night-shadow);
}
.chat-from { display: flex; align-items: center; gap: 12px; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.14); }
.chat-name { display: grid; font-size: 15.5px; font-weight: 640; line-height: 1.25; }
.chat-name small { font-size: 13px; font-weight: 450; opacity: 0.7; }
.chat-note { justify-self: center; padding: 5px 12px; border-radius: 8px; background: rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.88); font-size: 13.5px; line-height: 1.35; text-align: center; }
.msg { position: relative; padding: 12px 14px 24px; border-radius: 18px; font-size: 17px; line-height: 1.4; }
.msg.in > time, .msg.out .stamp { position: absolute; right: 12px; bottom: 6px; font-size: 12px; font-weight: 500; font-stretch: 100%; opacity: 0.66; font-variant-numeric: tabular-nums; }
.incoming { position: relative; justify-self: start; max-width: 88%; }
.msg.in { background: var(--store-bubble); color: var(--store-ink); border-bottom-left-radius: 6px; }
.msg.in mark {
  color: inherit; border-radius: 4px; padding-inline: 2px; margin-inline: -2px;
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.msg.out {
  justify-self: end; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 26px;
  background: var(--you-bubble); color: var(--you-ink);
  border-bottom-right-radius: 6px;
  font-size: 23px; font-weight: 720; font-stretch: 84%;
}
.msg.out .stamp { display: inline-flex; align-items: center; gap: 3px; }
.moon-glyph { flex: none; }
.typing { display: none; }
.chat figcaption { font-size: 14.5px; color: var(--ink-2); padding-inline: 6px; }

/* The story plays once, when the chat comes into view (app.js adds .play): the store types, its message
   lands, the tell-tale part gets marked, and you reply. The scene above is the resting state. */
.story .typing {
  position: absolute; left: 0; top: 0;
  display: inline-flex; gap: 5px; padding: 15px 16px;
  background: var(--store-bubble); border-radius: 18px 18px 18px 6px;
  opacity: 0;
}
.story .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--store-ink); opacity: 0.4; }
/* If the story never starts, show the scene after 8 seconds anyway. */
.story .chat:not(.play) :is(.msg.in, .msg.out) { opacity: 0; animation: reveal 0s 8s forwards; }
.story .chat:not(.play) .msg.in mark { background-size: 0% 100%; animation: reveal-mark 0s 8s forwards; }
.play .typing { animation: typing 1250ms ease 150ms both; }
.play .typing i { animation: dot 900ms ease-in-out 150ms 2; }
.play .typing i:nth-child(2) { animation-delay: 300ms; }
.play .typing i:nth-child(3) { animation-delay: 450ms; }
.play .msg.in { animation: msg-in 460ms cubic-bezier(.2, .8, .2, 1) 1300ms both; transform-origin: 0 100%; }
.play .msg.in mark { animation: marker 900ms cubic-bezier(.45, 0, .2, 1) 2000ms both; }
.play .msg.out { animation: msg-out 480ms cubic-bezier(.2, .8, .2, 1) 2900ms both; transform-origin: 100% 100%; }
.play .moon-glyph .bite { animation: bite-small 700ms cubic-bezier(.3, .6, .2, 1) 3250ms both; }
@keyframes reveal { to { opacity: 1; } }
@keyframes reveal-mark { to { background-size: 100% 100%; } }
@keyframes typing { 0% { opacity: 0; transform: translateY(6px) scale(0.9); } 14%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.94); } }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.35; } 30% { transform: translateY(-4px); opacity: 0.8; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes marker { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes msg-out { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bite-small { from { transform: translate(9px, -7px); } to { transform: none; } }

/* Parts: a heading column beside the steps on wide screens, one column on phones. */
.part { display: grid; gap: 28px 64px; padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .part { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
  .part-head { align-self: start; }
}
.part-head { display: grid; gap: 12px; }
h2 { font-size: clamp(32px, 4.6vw, 42px); line-height: 1.02; font-weight: 740; font-stretch: 84%; }
.part-head p { max-width: 40ch; color: var(--ink-2); }
.part-body { display: grid; gap: 32px; align-content: start; min-width: 0; }

/* Steps: every list using these is a real sequence. */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 28px; }
.steps > li { counter-increment: step; position: relative; display: grid; gap: 8px; padding-left: 46px; min-width: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal);
  font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums;
}
.steps :is(h3, h4) { min-height: 28px; display: flex; align-items: center; font-size: 19px; line-height: 1.25; font-weight: 660; font-stretch: 94%; }
.steps p { color: var(--ink-2); }
.steps > li > .button { justify-self: start; margin-top: 4px; }
.small { font-size: 15px; color: var(--ink-2); }

/* Menu paths, named the way the settings screens name them. */
.path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
/* Each arrow stays with the step before it, so a wrapped line never starts with one. */
.path .hop { display: inline-flex; align-items: center; gap: 4px; }
.path .chip { padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--paper); color: var(--ink); font-size: 14.5px; font-weight: 560; line-height: 1.35; }
.path i { font-style: normal; color: var(--ink-3); }

/* Device tabs */
.tabs { display: inline-flex; gap: 4px; width: fit-content; max-width: 100%; overflow-x: auto; padding: 4px; background: var(--paper-2); border-radius: 12px; }
.tabs button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 620 15.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgb(21 35 42 / 0.1); }
.panels { display: grid; }
.no-js-panels { gap: 48px; }
.panel { display: grid; gap: 24px; }
.panel-title { font-size: 21px; font-weight: 700; font-stretch: 90%; }
.js .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.panel-note { color: var(--ink-2); max-width: 56ch; }

/* The browser check */
.check { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; }
.check-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.check-row > div { flex: 1 1 260px; display: grid; gap: 2px; }
.check-row .button { flex: none; }
.check h3 { font-size: 18px; font-weight: 660; font-stretch: 94%; }
.check-row p { color: var(--ink-2); font-size: 15.5px; }
.check-result { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; font-size: 15.5px; }
.check-result strong { font-size: 17px; font-stretch: 94%; }
.check-result[data-state="exposed"] { background: var(--amber); color: var(--amber-ink); }
.check-result[data-state="protected"] { background: var(--teal-soft); color: var(--ink); }
.check-result[data-state="unknown"], .check-result[data-state="checking"] { background: var(--paper-2); color: var(--ink); }

/* How it works: technical names in code style, and the line that ties it back to the fix. */
code { padding: 1px 5px; border-radius: 5px; background: var(--paper-2); color: var(--ink); font: 500 0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.why { padding: 16px 18px; border-radius: 14px; background: var(--teal-soft); color: var(--ink); }
.policy { display: grid; gap: 10px; padding: 20px 22px; border: 1px solid var(--note-line); border-radius: 14px; background: var(--note); }
.policy h3 { font-size: 21px; line-height: 1.2; font-weight: 720; font-stretch: 90%; color: var(--ink); }
.policy p { color: var(--ink-2); }
.policy blockquote { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 640; font-stretch: 96%; color: var(--ink); }
.policy p + blockquote { margin-top: -6px; }  /* each label sits close to its quote */
.policy blockquote + p { margin-top: 6px; }
.policy .source { font-size: 14.5px; }

/* Sharing, right after the fix: the moment people are most likely to think of someone else. */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.share-row p { font-size: 17px; font-weight: 600; color: var(--ink); }

/* Footer */
/* Footer: Privacy and GitHub, on the right on wide screens. */
.site-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-block: 40px 56px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15px; }
.fine { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (min-width: 700px) { .fine { margin-left: auto; } }  /* links sit at the right edge on every page */

/* Privacy page */
.doc { padding-block: clamp(24px, 6vw, 72px) clamp(56px, 9vw, 104px); }
.doc .prose { display: grid; gap: 18px; max-width: 64ch; }
.doc h1 { font-size: clamp(40px, 7vw, 64px); }
.doc h2 { font-size: clamp(26px, 4vw, 32px); margin-top: 18px; }
.doc ul { padding-left: 1.2em; display: grid; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}