/*
  summarizeimage.com — Petrol.

  The palette is the side panel's palette (entrypoints/sidepanel/style.css,
  docs/design-concepts/index.html `.v-petrol`): one drenched petrol surface,
  a second raised tone for bands and rows, apricot as the only accent.
  Surfaces separate by tone, not by borders. No gradients, no glass, no blur.

  The site is allowed to be louder than the panel — larger type, a real
  display step, much more air — but it uses the same tokens so a visitor who
  installs the extension lands somewhere they recognise.

  Measured contrast (composited, sRGB):
    ink #EAF4F1   on bg #0F3B3D      10.92:1
    ink #EAF4F1   on raised #16494B   8.96:1
    muted #9DBFB9 on bg               6.18:1
    muted #9DBFB9 on raised           5.07:1
    accent #F5A25D on bg              5.96:1
    accent #F5A25D on raised          4.89:1
    on-accent #10393B on accent       6.11:1
    edge #6AA3A1  on bg               4.30:1   (non-text, floor 3:1)
    edge #6AA3A1  on raised           3.53:1   (non-text, floor 3:1)
    ink on fill-quiet over bg         8.31:1
*/

:root {
  color-scheme: dark;

  /* surface */
  --bg: #0F3B3D;
  --raised: #16494B;
  --sunk: #0B2B2D;
  --fill-quiet: rgba(255, 255, 255, 0.09);
  --hover: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.13);

  /* ink */
  --ink: #EAF4F1;
  --muted: #9DBFB9;
  --on-accent: #10393B;

  /* signal — apricot is the ONLY accent */
  --accent: #F5A25D;

  /* the one perceptible edge Petrol allows, kept above the 3:1 non-text floor */
  --edge: #6AA3A1;

  /* shape */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* rhythm */
  --page: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(56px, 8vw, 112px);

  /* type — one family, hierarchy from scale and weight */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.35rem, 5.2vw, 4rem);
  --fs-h2: clamp(1.6rem, 2.8vw, 2.35rem);
  --fs-h3: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  /* Light type on a dark surface reads lighter than it is; the extra leading
     is not decoration, it is what keeps 15-16px prose comfortable here. */
  line-height: 1.7;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

/* Every focusable element, including anything added later. Apricot on the
   petrol surface measures 5.96:1, well over the 3:1 non-text floor. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  flex: 1;
}

/* ───────────────────────────── header / footer ───────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 640;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand img {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-sm);
}

.header-link {
  flex: none;
  font-size: var(--fs-small);
  font-weight: 600;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: var(--section-y);
  padding-block: clamp(24px, 4vw, 34px);
  color: var(--muted);
  font-size: var(--fs-small);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* ─────────────────────────────────── hero ────────────────────────────────── */

.hero {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
  padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 76px);
  }
}

h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.032em;
}

.hero-sub {
  max-width: 44ch;
  margin-top: clamp(18px, 2.4vw, 26px);
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.hero-cta {
  margin-top: clamp(26px, 3.4vw, 36px);
}

/* Product image: the panel itself, drawn in the same tokens it ships in. */
.hero-figure {
  margin: 0;
}

.hero-figure svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
}

/* ────────────────────────────────── buttons ──────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--fill-quiet);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 620;
  text-align: center;
  text-decoration: none;
  transition: background-color 140ms var(--ease), color 140ms var(--ease), filter 140ms var(--ease);
}

.button:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button-primary:hover {
  background: var(--accent);
  color: var(--on-accent);
  filter: brightness(1.06);
}

.button-primary:focus-visible {
  outline-color: var(--ink);
}

/*
  The store link does not exist yet, so this is deliberately not a control:
  no accent fill, no hover, no pointer. The dashed edge reads as a placeholder
  rather than a button someone should keep clicking.
*/
.button.is-pending,
.button.is-pending:hover {
  background: var(--fill-quiet);
  color: var(--ink);
  border: 1px dashed var(--edge);
  cursor: default;
  filter: none;
}

/* ───────────────────────────────── sections ──────────────────────────────── */

.band {
  background: var(--raised);
}

.section {
  padding-block: var(--section-y);
}

.section-title {
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
}

/*
  Two shapes on purpose. The feature index needs the full measure, so its
  title sits above it; the sequence and the questions get a sticky title in
  the left column, which is where the extra air on wide screens goes.
*/
.section-split {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
}

@media (min-width: 900px) {
  .section-split {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 80px);
  }

  .section-split .section-title {
    position: sticky;
    top: clamp(28px, 5vw, 56px);
  }
}

/* ─────────────────────────────── feature index ───────────────────────────── */

/*
  The lead sits on its own line; the remaining fifteen flow in balanced
  columns rather than a card grid. Columns pack to the copy instead of
  aligning every item to the tallest one in its row, which is what keeps a
  sixteen-item index from turning into a field of holes.
*/
.features {
  margin-top: clamp(28px, 4vw, 48px);
}

.feature-columns {
  columns: 300px;
  column-gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(30px, 3.6vw, 44px);
}

.feature-columns .feature {
  break-inside: avoid;
  margin-bottom: clamp(26px, 3.2vw, 38px);
}

.feature h3 {
  font-size: var(--fs-h3);
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.feature p {
  max-width: 44ch;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* The region snip is the capture path the product is built around, so it gets
   the width and the type size the other fifteen do not. */
.feature-lead h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 660;
  letter-spacing: -0.022em;
}

.feature-lead p {
  max-width: 54ch;
  margin-top: 12px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ──────────────────────────────── the sequence ───────────────────────────── */

.steps {
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 14px;
  max-width: 62ch;
  color: var(--muted);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

/* ──────────────────────────────── the questions ──────────────────────────── */

.qa {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
  max-width: 68ch;
}

.qa h3 {
  font-size: var(--fs-h3);
  font-weight: 640;
  letter-spacing: -0.012em;
}

.qa p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ─────────────────────────── inner pages (shared) ────────────────────────── */

/* Inner pages hold one column of copy, so the column is centred in the page
   rather than left in a wide empty canvas. */
.page-shell {
  max-width: 820px;
  padding-block: clamp(40px, 6vw, 80px) 0;
}

.page-shell h1 {
  max-width: 20ch;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
}

.intro {
  max-width: 56ch;
  margin-top: clamp(16px, 2vw, 22px);
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--fill-quiet);
  color: var(--ink);
  font: inherit;
  font-size: 0.875em;
  font-weight: 640;
  white-space: nowrap;
}

/* Post-install steps. Numbered because the order is the instruction. */
.setup {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
  margin: clamp(34px, 5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: setup;
}

.setup > li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 16px;
  max-width: 62ch;
}

.setup > li::before {
  counter-increment: setup;
  content: counter(setup);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.setup h2 {
  font-size: 1.125rem;
  font-weight: 640;
  line-height: 1.35;
}

.setup p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Toolbar illustration for the pin step: the real product icon, on the
   raised tone, with the pin affordance in the one accent. */
.toolbar-mock {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 420px);
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--raised);
}

.toolbar-mock img {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 6px;
}

.toolbar-mock .toolbar-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar-mock .toolbar-icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}

.toolbar-mock .toolbar-pin {
  color: var(--accent);
}

/* Feedback and uninstall reason rows. The row is identified by its label and
   its accent action text, not by a border: Petrol separates by tone. */
.reason-list {
  display: grid;
  gap: 8px;
  max-width: 46rem;
  margin-top: clamp(28px, 4vw, 40px);
}

.reason-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 140ms var(--ease);
}

.reason-button::after {
  content: "Send feedback";
  flex: none;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 640;
}

.reason-button:hover {
  background: #1B5557;
  color: var(--ink);
}

.reason-button.is-clicked::after {
  content: "Thanks";
  color: var(--muted);
}

.direct-contact {
  margin-top: clamp(22px, 3vw, 30px);
}

/* ───────────────────────────────── 404 ───────────────────────────────────── */

.not-found {
  display: grid;
  place-items: center;
  min-height: 52vh;
  padding-block: clamp(48px, 9vw, 110px);
  text-align: center;
}

.not-found h1 {
  font-size: clamp(3.5rem, 12vw, 6rem);
  letter-spacing: -0.045em;
}

.not-found p {
  margin: 14px 0 28px;
  color: var(--muted);
}

/* ──────────────────────────────── privacy ────────────────────────────────── */

.legal-shell {
  max-width: 820px;
  padding-block: clamp(40px, 6vw, 80px) 0;
}

.legal-shell h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
}

.legal-shell h2 {
  margin-top: clamp(38px, 5vw, 56px);
  font-size: 1.25rem;
  font-weight: 660;
  letter-spacing: -0.015em;
}

.legal-shell p,
.legal-shell li {
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.9375rem;
}

.legal-shell p {
  margin-top: 14px;
}

.legal-shell h1 + p {
  margin-top: 18px;
}

.legal-shell strong {
  color: var(--ink);
  font-weight: 640;
}

.legal-shell ul {
  margin: 14px 0 0;
  padding-left: 1.15rem;
}

.legal-shell li {
  margin-top: 10px;
}

.legal-shell code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--fill-quiet);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

/* Contents list: the policy is long and every section already has an id. */
.legal-toc {
  margin-top: clamp(26px, 4vw, 38px);
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--raised);
}

.legal-toc h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 640;
  letter-spacing: 0.02em;
}

.legal-toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px 24px;
  margin: 12px 0 0;
  padding-left: 1.1rem;
}

.legal-toc li {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* A wide table must scroll inside its own box, never the page. */
.table-scroll {
  margin-top: 18px;
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--raised);
}

.legal-shell table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.legal-shell th,
.legal-shell td {
  padding: 12px 14px;
  color: var(--muted);
  text-align: left;
  vertical-align: top;
}

.legal-shell th {
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 640;
  white-space: nowrap;
}

.legal-shell tbody tr + tr td {
  border-top: 1px solid var(--line);
}

/* ───────────────────────────────── motion ────────────────────────────────── */

/*
  One entrance, on the hero only. `from` is the only keyframe, so the resting
  state is the document's own state: if the animation never runs, nothing is
  hidden.
*/
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.rise {
  animation: rise 460ms var(--ease) backwards;
}

.rise-2 {
  animation-delay: 70ms;
}

.rise-3 {
  animation-delay: 140ms;
}

.rise-4 {
  animation-delay: 210ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .band,
  .reason-button,
  .toolbar-mock,
  .legal-toc,
  .table-scroll {
    background: Canvas;
    color: CanvasText;
  }

  .button,
  .reason-button {
    border: 1px solid CanvasText;
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* The only date on the privacy page: one quiet line at the very end. The
   effective/canonical header block was owner-flagged as clutter (2026-07-29). */
.policy-date {
  margin-top: 34px;
  color: var(--muted, #9DBFB9);
  font-size: 0.85rem;
}