/*
 * Ordava — site styles.
 *
 * Colours are the app's real tokens (src/theme/palette.js), not approximations,
 * so the site and the product are the same green. Fraunces is self-hosted
 * rather than pulled from Google Fonts: the app's whole claim is that nothing
 * is shared with third parties, and a marketing site that phones out for a
 * font undercuts it.
 */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces_600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivory-50: #fcfaf5;
  --ivory-100: #f6f3ec;
  --ivory-200: #efeae0;
  --mineral-100: #edefe8;
  --charcoal-900: #1e221f;
  --charcoal-700: #3c423e;
  --charcoal-500: #666e68;
  --sage-700: #47604f;
  --sage-600: #56715e;
  --sage-200: #d2ded4;
  --sage-100: #e8efe9;
  --sand-500: #c2a878;
  --white: #fff;

  --measure: 680px;
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: linear-gradient(
    180deg,
    var(--ivory-50) 0%,
    var(--mineral-100) 100%
  );
  background-attachment: fixed;
  color: var(--charcoal-900);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 22px;
}

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

header {
  padding: 28px 0;
}

.bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--charcoal-900);
}

.brand span {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
}

nav {
  display: flex;
  gap: 20px;
}

nav a {
  color: var(--charcoal-500);
  text-decoration: none;
  font-size: 15px;
}

nav a:hover,
nav a:focus-visible {
  color: var(--sage-700);
}

/* --- type -------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--charcoal-900);
}

h1 {
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1.12;
  margin: 0 0 14px;
}

h2 {
  font-size: clamp(23px, 4vw, 29px);
  line-height: 1.25;
  margin: 44px 0 12px;
}

h3 {
  font-size: 19px;
  margin: 28px 0 6px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sage-600);
  margin: 0 0 12px;
}

.lede {
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--charcoal-700);
  margin: 0 0 28px;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--sage-700);
}

small,
.muted {
  color: var(--charcoal-500);
  font-size: 15px;
}

/* --- blocks ------------------------------------------------------------ */

section {
  padding: 26px 0;
}

.hero {
  padding: 40px 0 18px;
  text-align: center;
}

.hero .lede {
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}

.mark-sm,
.mark-lg {
  display: block;
}

.mark-sm {
  width: 36px;
  height: 36px;
}

.mark-lg {
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
}

.card {
  background: var(--white);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  padding: 30px 28px;
  margin: 0 0 18px;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 26px 0 0;
}

.feature {
  background: var(--white);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  padding: 22px 20px;
}

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

.feature p {
  margin: 0;
  color: var(--charcoal-500);
  font-size: 15px;
}

.pill {
  display: inline-block;
  background: var(--sage-100);
  color: var(--sage-700);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 600;
}

.contact {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(21px, 3.6vw, 27px);
  font-weight: 600;
  color: var(--sage-700);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact:hover,
.contact:focus-visible {
  text-decoration: underline;
}

ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

li {
  margin: 0 0 8px;
}

/* --- legal page -------------------------------------------------------- */

.legal h2 {
  font-size: 21px;
  color: var(--sage-700);
  margin: 34px 0 8px;
}

.legal .card {
  padding: 34px 30px;
}

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

footer {
  border-top: 1px solid var(--sage-200);
  margin-top: 54px;
  padding: 26px 0 60px;
  color: var(--charcoal-500);
  font-size: 15px;
}

footer .bar {
  flex-wrap: wrap;
  row-gap: 8px;
}

footer a {
  color: var(--charcoal-500);
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  color: var(--sage-700);
}

/* Focus visibility is not optional. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sage-600);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- screenshot gallery ------------------------------------------------- */

/*
 * The section is already full width (it sits outside any max-width wrapper),
 * so no negative-vw breakout is needed. That matters: 50vw includes the
 * scrollbar, which left the whole page scrolling sideways by a few pixels.
 *
 * Captions are real page text rather than baked into the images, so they stay
 * selectable, translatable and available to a screen reader.
 */
/* Heading and row share one centred container, so they line up at every width
   instead of the heading sitting at the text measure while the row starts at
   the page edge. */
.gallery {
  max-width: 1272px;
  margin: 0 auto;
}

.gallery h2 {
  padding: 0 22px;
}

.shots {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 8px 22px 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.shots figure {
  flex: 0 0 auto;
  width: 232px;
  margin: 0;
  scroll-snap-align: center;
}

.shots img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.shots figcaption {
  margin-top: 12px;
  text-align: center;
  color: var(--charcoal-500);
  font-size: 14px;
}