/* /myview/ — the one page on the site with a wide column: its pictures are a landscape iPad and
   need the room. Everything else comes from styles.css; the only colour of its own is the app
   icon's gradient, #5C8DF3 → #7A45C7, on the badge and the ticks. */

:root {
  --measure: 1040px;
  --myview-blue: #5c8df3;
  --myview-purple: #7a45c7;
  --myview-ink: #6a3fb3;            /* the purple, dark enough to read on white */
}
@media (prefers-color-scheme: dark) {
  :root { --myview-ink: #8fb0ff; }  /* the blue, light enough to read on near-black */
}

/* ---------------------------------------------------------------- hero */

.badge.soon { background: linear-gradient(135deg, var(--myview-blue), var(--myview-purple)); cursor: default; }
.badge.soon:hover { opacity: 1; }
.hero-note { margin-left: 10px; font-size: 15px; color: var(--secondary-label); }

.hero-shot { margin: 28px 0 0; }
.hero-picture, .feature-picture { width: 100%; height: auto; }
.bare {                              /* a raw capture is the bare screen: give it corners */
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.hero-picture {                      /* framed or bare, the hero gets the site's corners */
  border-radius: 24px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 14px 40px rgb(0 0 0 / 0.14);
}
@media (prefers-color-scheme: dark) {
  .hero-picture { box-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 40px rgb(0 0 0 / 0.5); }
}
@media (max-width: 480px) {
  .bare { border-radius: 12px; }
  .hero-picture { border-radius: 14px; }
}

/* ------------------------------------------------------------ features */
/* Nine pictures, each in its own surface with the caption beside it; the picture swaps sides
   on every other one. On a phone they stack, picture first. */

.features { display: grid; gap: 16px; }
.feature {
  margin: 0;
  display: grid;
  gap: 16px 28px;
  align-items: center;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
}
.feature figcaption h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.feature figcaption p { margin: 0; font-size: 17px; color: var(--secondary-label); }
@media (min-width: 761px) {
  .feature { grid-template-columns: 3fr 2fr; padding: 20px; }
  .feature:nth-child(even) .feature-picture { order: 2; }
  .feature figcaption { padding-inline: 8px; }
}

/* --------------------------------------------------------------- tiers */

.tiers { width: 100%; border-collapse: collapse; font-size: 15px; }
.tiers th, .tiers td { padding: 12px var(--gutter); text-align: left; vertical-align: middle; border-top: 1px solid var(--hairline); }
.tiers thead th {
  border-top: 0;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--secondary-label);
}
.tiers tbody th { font-weight: 600; }
.tiers tbody th small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--secondary-label); }
.tiers .tick, .tiers thead th:not(:first-child) { text-align: center; }
.tiers .tick { width: 1%; white-space: nowrap; font-weight: 600; }
.tiers .tick.yes { color: var(--myview-ink); font-size: 18px; }
.tiers .tick.no { color: var(--tertiary-label); }
.tiers th:first-child { width: 100%; }
@media (max-width: 480px) {
  .tiers th, .tiers td { padding-inline: 12px; }
  .tiers th:first-child, .tiers td:first-child { padding-left: var(--gutter); }
  .tiers th:last-child, .tiers td:last-child { padding-right: var(--gutter); }
  .tiers tbody th small { display: none; }  /* room for the three columns */
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------------- cta */

.cta-body { padding: 16px var(--gutter) 18px; }
.cta-body p { margin: 0; }
.cta-body p + p { margin-top: 8px; }
.cta-line { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }