/* PaddingPrices' own page. The layout is DDiary's (public/ddiary/ddiary.css);
   the colours are the app icon's navy and lavender, and the type is the
   system sans the app and paddingprices.com use.
   The rest of the site keeps the neutral look in /style.css. */

:root {
  --bg: #f5f4fb;
  --surface: #ffffff;
  --raised: #ebe8f8;
  --ink: #1f2335;
  --muted: #5b5f75;
  --accent: #6c5ae6;
  --accent-text: #5443c9;
  --rule: #e0ddef;
  --maxw: 66rem;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-text);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Top bar ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark img {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
}

/* The language menu: a <details>, so it opens without JavaScript. */
.langs {
  position: relative;
  font-size: 0.95rem;
}

.langs summary {
  list-style: none;
  cursor: pointer;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-text);
}

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

.langs summary::after {
  content: " ▾";
}

.langs ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 10;
  min-width: 10rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  box-shadow: 0 0.75rem 2rem rgba(31, 35, 53, 0.14);
}

.langs a {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}

.langs a:hover {
  background: var(--raised);
}

.langs a[aria-current] {
  color: var(--accent-text);
  font-weight: 600;
}

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3.5rem;
  align-items: center;
  padding: 3.5rem 0 4.5rem;
}

h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
}

/* German and Finnish have words longer than a phone is wide. */
h1,
h2 {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1 em,
h2 em {
  font-style: normal;
  color: var(--accent-text);
}

.lead {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0 0 1.75rem;
  max-width: 32rem;
}

.store {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.store:hover {
  background: var(--accent-text);
}

.fine {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Phone ---------- */

/* The screenshots are full-screen captures with square corners. */
.phone {
  margin: 0 auto;
  width: 100%;
  max-width: 19rem;
  padding: 0.5rem;
  border-radius: 3.1rem;
  background: var(--ink);
  box-shadow: 0 1.5rem 3.5rem rgba(31, 35, 53, 0.22),
    0 0.25rem 0.75rem rgba(31, 35, 53, 0.12);
}

.phone img {
  width: 100%;
  border-radius: 2.6rem;
  background: var(--surface);
}

/* ---------- Feature rows ---------- */

.label {
  margin: 0 0 0.75rem;
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  padding: 4.5rem 0;
  border-top: 1px solid var(--rule);
}

.row.flip .text {
  order: 2;
}

.row p {
  margin: 0 0 1rem;
  max-width: 34rem;
}

.row ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  max-width: 34rem;
}

.row li {
  margin-bottom: 0.45rem;
}

.quiet {
  color: var(--muted);
}

/* ---------- No ads, no tracking ---------- */

.band {
  border-top: 1px solid var(--rule);
  padding: 4.5rem 0;
}

.band h2 {
  max-width: 36rem;
}

.band > p {
  max-width: 40rem;
}

.cards {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.cards li {
  margin: 0;
  padding: 1.35rem 1.4rem;
  border-radius: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.cards strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
}

.cards span {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.5;
}

/* ---------- Closing ---------- */

.closing {
  border-top: 1px solid var(--rule);
  padding: 4.5rem 0 4rem;
  text-align: center;
}

.closing h2 {
  margin-bottom: 1.5rem;
}

.closing .fine {
  margin-top: 1.25rem;
}

footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 3rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

footer nav {
  margin-bottom: 0.75rem;
}

footer nav a {
  margin-right: 1.25rem;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 760px) {
  .hero,
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .hero {
    padding: 2.5rem 0 3.5rem;
  }

  .row,
  .band,
  .closing {
    padding: 3.25rem 0;
  }

  /* On a phone the picture always follows its text. */
  .row.flip .text {
    order: 0;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone {
    max-width: 16.5rem;
  }

  .lead {
    font-size: 1.18rem;
  }
}