/*
 * Deal Shelf — shared styles for every page on dealshelfapp.com.
 *
 * No web fonts, no analytics, no third-party requests of any kind. That is a
 * deliberate constraint rather than minimalism: the privacy policy this site
 * hosts says the app collects nothing and shares nothing, and a policy page that
 * phones a font CDN to say so undercuts itself. It also means the site works
 * offline, loads instantly, and needs no cookie banner.
 */

:root {
  --brand: #2384ec;
  --brand-deep: #0a3a8e;
  --accent: #12a050;

  --bg: #ffffff;
  --bg-raised: #f5f7fa;
  --text: #16202e;
  --text-muted: #5b6b7f;
  --border: #dde3ea;

  --radius: 14px;
  --max-width: 940px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1520;
    --bg-raised: #172231;
    --text: #eef3f9;
    --text-muted: #9dadc0;
    --border: #26344a;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

a {
  color: var(--brand);
}

/* ---- header ------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.site-header .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  /* Pushes the nav to the right without a spacer element. */
  margin-right: auto;
  /* Two words, and without this they split across two lines the moment the nav
     gets tight — which doubles the header height before anything looks wrong
     enough to notice. */
  white-space: nowrap;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: block;
}

.site-nav {
  display: flex;
  gap: 6px;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 15px;
  /* 44px of touch target on a phone, where this nav is hardest to hit. */
  min-height: 40px;
  display: flex;
  align-items: center;
}

.site-nav a:hover {
  color: var(--text);
  background: var(--bg-raised);
}

.site-nav a[aria-current='page'] {
  color: var(--text);
  background: var(--bg-raised);
}

/* The download link is the only thing in this nav that is a call to action
   rather than a place to go, so it is filled rather than quiet. It is on every
   page because two of the three are the URLs Apple itself publishes — someone
   can land on the privacy policy from a search without ever seeing the hero. */
.site-nav a.nav-cta {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.site-nav a.nav-cta:hover {
  background: var(--brand-deep);
  color: #fff;
}

/* Four items is one more than this header was built for, and at 375px the
   Download button ran off the right edge while the wordmark wrapped to two
   lines. The wordmark is the first thing that can go: the icon beside it still
   reads as the brand and still links home. Hidden visually rather than removed,
   so the link keeps its accessible name. */
@media (max-width: 460px) {
  .site-header .inner {
    gap: 10px;
    padding: 14px;
  }

  .site-nav a {
    padding: 8px 10px;
  }

  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- layout ------------------------------------------------------------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 20px 72px;
}

main.prose {
  max-width: 720px;
}

h1 {
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 40px 0 10px;
}

.lede {
  color: var(--text-muted);
  font-size: 19px;
  margin: 0 0 8px;
}

.meta {
  color: var(--text-muted);
  font-size: 15px;
}

/* ---- landing ------------------------------------------------------------ */

.hero {
  text-align: center;
  padding: 24px 0 8px;
}

.hero img.app-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  margin-bottom: 20px;
}

.hero h1 {
  max-width: 16ch;
  margin-inline: auto;
}

.hero .lede {
  max-width: 46ch;
  margin: 12px auto 0;
}

/* The hero's one call to action. Deliberately *not* Apple's official badge
   artwork: that is a PNG/SVG we would have to host ourselves to keep the site's
   no-external-requests rule, and a hand-drawn approximation of a trademarked
   badge is worse than text. Apple's marketing guidelines permit a plain text
   link, and "Download on the App Store" is the wording they ask for. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
}

.store-badge:hover {
  background: var(--brand);
  color: #fff;
}

/* The three facts someone weighs before tapping, in the one place they are
   still deciding. All of them are read off the live App Store listing, so if
   the minimum iOS ever rises this line has to move with it. */
.hero-meta {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 14.5px;
}

/* Phone shots. `auto-fit` collapses three across to one on a phone without a
   media query, and the images carry their own aspect so nothing jumps as they
   load. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin: 56px 0 8px;
}

.shots figure {
  margin: 0;
  text-align: center;
}

.shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  display: block;
}

.shots figcaption {
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 12px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 56px;
}

.feature {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.feature h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15.5px;
}

/* Tip jar. Centred and boxed like a `.feature`, but full width and last, so it
   reads as a closing note rather than a seventh selling point.

   The button is deliberately *not* `.store-badge`: that treatment is the hero's
   primary call to action, and a tip jar borrowing it would compete with the one
   thing the page is actually for. Outline on `--bg-raised` reads as available
   without asking for the click. */
.tipjar {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 22px;
  margin-top: 56px;
  text-align: center;
}

.tipjar h2 {
  margin: 0 0 10px;
}

.tipjar p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--text-muted);
}

.tip-button {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.tip-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.tipjar .tip-note {
  margin-top: 16px;
  font-size: 14.5px;
}

/* ---- prose pages -------------------------------------------------------- */

.callout {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0;
}

.callout p {
  margin: 0;
}

details {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}

details summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: '+';
  float: right;
  color: var(--text-muted);
  font-weight: 400;
}

details[open] summary::after {
  content: '−';
}

details p {
  margin: 0 0 16px;
  color: var(--text-muted);
}

ul.plain {
  padding-left: 20px;
  color: var(--text-muted);
}

ul.plain li {
  margin-bottom: 8px;
}

.contact-box {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin: 24px 0 8px;
}

/* ---- footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

.site-footer .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 20px 44px;
  color: var(--text-muted);
  font-size: 14.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.site-footer .spacer {
  margin-right: auto;
}

.disclaimer {
  flex-basis: 100%;
  font-size: 13.5px;
  line-height: 1.55;
}