/*
  Ouch: the image compressor.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Loaded after site.css, app.css and app-light.css. Those carry the shared
  app-page furniture and the light theme; this file only re-tunes the accent to
  Ouch's own colours and adds the parts unique to this product.

  Ouch's icon runs magenta into orange. The magenta is the accent, deepened for
  text because the bright value is a fill colour and sits near 3:1 on white.
*/
.ouch {
  --orange:      #c2185b;              /* 6.4:1 on white, safe as text */
  --orange-2:    #e8467c;              /* fills and hover only */
  --orange-deep: rgba(194, 24, 91, .30);
  --app:         #b8541a;              /* the warm half of the icon gradient */
  --app-2:       #e07b2c;
}

/* the hero drift, retuned from the blue it inherits */
.ouch .oh::before { background: radial-gradient(50% 60% at 50% 0%, rgba(232,70,124,.13), transparent 70%); }
.ouch .oh__aura span:nth-child(1) { background: radial-gradient(circle, rgba(232,70,124,.15), transparent 68%); }
.ouch .oh__aura span:nth-child(2) { background: radial-gradient(circle, rgba(224,123,44,.13), transparent 68%); }
.ouch .oh__aura span:nth-child(3) { background: radial-gradient(circle, rgba(194,24,91,.09), transparent 70%); }
.ouch .oh__icon { border-radius: 22px; box-shadow: 0 20px 44px -18px rgba(194,24,91,.45); }

/* ---------------------------------------------------------------------------
   THE REFUSALS
   The app's own messages, quoted exactly, with the reason beside each. This is
   the lead differentiator: an app that says when it cannot help.
   ------------------------------------------------------------------------ */
.refusals { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 0; }
.refusal {
  display: grid; gap: .5rem 2rem; padding: 1.5rem 0; border-top: 1px solid var(--line);
}
@media (min-width: 54rem) { .refusal { grid-template-columns: 24rem 1fr; align-items: baseline; } }
.refusals .refusal:last-child { border-bottom: 1px solid var(--line); }
.refusal q {
  font-family: var(--mono); font-size: .92rem; color: var(--orange); quotes: none;
  display: block; line-height: 1.5;
}
.refusal span { color: var(--ink-soft); font-size: .96rem; }

/* ---------------------------------------------------------------------------
   THE SPREAD
   Three measured results at different content types. The point of the section
   is that there is no single number, so they are shown side by side.
   ------------------------------------------------------------------------ */
.spread { display: grid; gap: 1.1rem; margin-top: 3rem; }
@media (min-width: 50rem) { .spread { grid-template-columns: repeat(3, 1fr); } }
.spread__item {
  padding: 1.9rem 1.7rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
}
.spread__pct {
  display: block; font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--orange-2), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.spread__what { display: block; margin-top: .7rem; font-weight: 680; color: var(--ink); }
.spread__note { display: block; margin-top: .3rem; font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------------------------
   FREE VS PRO
   ------------------------------------------------------------------------ */
.tiers { width: 100%; border-collapse: collapse; margin-top: 2.5rem; font-size: .98rem; }
.tiers th, .tiers td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tiers thead th { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.tiers thead th:last-child { color: var(--orange); }
.tiers tbody th { font-weight: 650; color: var(--ink); width: 32%; }
.tiers td { color: var(--ink-soft); }
.tiers tr:last-child th, .tiers tr:last-child td { border-bottom: 0; }
.tiers b { color: var(--ink); font-weight: 700; }

/* the App Store gallery */
.shots { display: grid; gap: 1.2rem; margin-top: 3rem; }
@media (min-width: 54rem) { .shots { grid-template-columns: 1fr 1fr; } }
.shots figure { margin: 0; }
.shots img {
  width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.35);
}

/* the proof bar under the hero */
.proofbar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 50rem) { .proofbar { grid-template-columns: repeat(3, 1fr); } }
.proofbar li { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.proofbar b {
  display: block; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800;
  letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.proofbar span { display: block; margin-top: .3rem; font-size: .95rem; color: var(--ink-soft); }
.proofbar__note { margin: 2rem 0 0; font-size: .85rem; color: var(--muted); max-width: 70ch; }

.oh__secondary { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.oh__secondary:hover { color: var(--orange-2); }

.refusals__intro { margin: 2.5rem 0 0; color: var(--ink-soft); }
/* a refusal quoted on its own, with no explanation beside it, should run the
   full width rather than sitting in a lonely first column */
.refusal q:only-child { grid-column: 1 / -1; font-size: 1rem; }