/* Mukindia Collection — site styles.
   Two layers: the company's own look (black and white, airy, wide-spaced
   capitals, from its logo), and each app's colours inside its own pages
   (Wacha's pastel tiles mirror the app's theme in src/theme/colors.ts).
   Light only, on purpose. Text sizes are in rem so a browser's own
   "larger text" setting works. Hover effects are for a mouse only: on a
   touch screen they'd stick after a tap. Anything that moves holds still
   under Reduce Motion. */

@font-face { font-family: 'Sora'; src: url('/fonts/Sora_300Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/fonts/Sora_400Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/fonts/Sora_600SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/fonts/Sora_700Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light only;
  --bg: #FBFAF8;
  --surface: #FFFFFF;
  --text: #121110;
  --text-2: rgba(18, 17, 16, 0.64);
  --border: rgba(18, 17, 16, 0.14);
  --border-strong: rgba(18, 17, 16, 0.5);
  /* Wacha's colours */
  --sage: #D9ECE7;
  --butter: #FBEACB;
  --peach: #FADDD3;
  --dark-tile: #121110;
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, 0.75);
  --dot: #64B0A2;
  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
/* The phone's "Increase contrast" setting: full-strength text and borders. */
@media (prefers-contrast: more) {
  :root { --text-2: var(--text); --border: var(--border-strong); --on-dark-2: var(--on-dark); }
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* no grey flash on tap */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; touch-action: manipulation; }
a[href^="mailto:"] { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }

.wrap { --gutter: 24px; max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 480px) { .wrap { --gutter: 16px; } }

/* Header / footer */
.site-header { border-bottom: 1px solid var(--border); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 76px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; color: var(--text); text-decoration: none; padding: 6px 0; }
.wordmark { width: 250px; height: auto; display: block; }
/* Each link is about 45px tall, so it's easy to hit with a finger; the menu
   wraps if it ever runs out of room. */
nav { display: flex; flex-wrap: wrap; column-gap: 28px; }
nav a { color: var(--text-2); text-decoration: none; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; padding: 12px 0; }
nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }
@media (max-width: 480px) {
  .wordmark { width: 150px; }
  nav { column-gap: 18px; }
  nav a { font-size: 0.75rem; letter-spacing: 0.12em; }
}

.site-footer { border-top: 1px solid var(--border); margin-top: 88px; padding: 18px 0 34px; color: var(--text-2); font-size: 0.875rem; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 0 24px; flex-wrap: wrap; }
.footer-row p { margin: 0; }
.footer-row > p:first-child { padding: 11px 0; }
.footer-links { display: flex; column-gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--text-2); text-decoration: none; padding: 11px 0; }

/* Type */
h1, h2, h3 { line-height: 1.18; margin: 0 0 14px; }
h1 { font-size: clamp(2.125rem, 6vw, 3.5rem); font-weight: 300; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
p, li { text-wrap: pretty; }
.lead { font-size: clamp(1.125rem, 2.4vw, 1.3125rem); font-weight: 300; color: var(--text-2); max-width: 38em; }
.eyebrow { font-size: 0.75rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 14px; }
.eyebrow a { text-decoration: none; }
.small, .note, .updated { font-size: 0.9375rem; color: var(--text-2); }
.note { max-width: 46em; }
.section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-2); margin: 0 0 18px; }

/* Layout pieces */
.hero { padding: 64px 0 20px; }
.company-hero { text-align: center; padding: 80px 0 32px; }
.company-hero .lead { margin: 0 auto; }
.company-hero .monogram { width: 92px; height: auto; margin: 0 auto 28px; display: block; }
.section { margin-top: 56px; }
.section.center { text-align: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tiles.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tile { border-radius: 24px; padding: 26px 26px 12px; background: var(--surface); }
.tile.line { background: transparent; border: 1px solid var(--border); border-radius: 4px; }
.tile.sage { background: var(--sage); }
.tile.butter { background: var(--butter); }
.tile.peach { background: var(--peach); }
.tile.dark { background: var(--dark-tile); color: var(--on-dark); padding: 32px 32px 16px; }
.tile.dark p { color: var(--on-dark-2); }
.tile p { color: var(--text-2); }
.tile.sage p, .tile.butter p, .tile.peach p { color: var(--text); opacity: 0.84; }
@media (max-width: 480px) {
  .tile { padding: 22px 20px 10px; }
  .tile.dark { padding: 26px 22px 12px; }
}
address { font-style: normal; margin-bottom: 14px; }

/* App cards: shrink a touch the moment a finger lands, so the press feels instant. */
.app-card { display: flex; gap: 22px; align-items: center; text-decoration: none; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 24px; max-width: 640px; margin: 0 auto; text-align: left; background: var(--surface); transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.app-card:active { transform: scale(0.985); }
.app-card + .app-card { margin-top: 16px; }
.app-card > div { min-width: 0; }
.app-card img { flex: none; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--border); }
.app-card h3 { margin-bottom: 4px; font-size: 1.375rem; }
.app-card p { margin: 0 0 6px; color: var(--text-2); }
.app-card .more { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.14em; }
.app-card .arrow { display: inline-block; transition: transform 160ms var(--ease-out); }
@media (max-width: 480px) { .app-card { align-items: flex-start; } .app-card img { width: 56px; height: 56px; border-radius: 14px; } }

.about { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }

.app-hero { display: flex; gap: 28px; align-items: flex-start; }
.app-hero > div { min-width: 0; }
.app-hero h1 { font-weight: 700; letter-spacing: -0.03em; }
.app-icon { border-radius: 26px; flex: none; box-shadow: 0 10px 30px rgba(18, 17, 16, 0.12); }
.availability { font-weight: 600; }
@media (max-width: 640px) { .app-hero { flex-direction: column; gap: 20px; } .app-icon { width: 88px; height: 88px; border-radius: 21px; } }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shots figure { margin: 0; }
.shots img { border-radius: 26px; border: 1px solid var(--border); }
.shots figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--text-2); text-align: center; }
/* On a phone the screenshots become a swipeable strip that runs to the
   screen edge, and keeps the swipe to itself (no accidental "back"). */
@media (max-width: 720px) {
  .shots {
    grid-template-columns: repeat(3, 72%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 8px;
    scroll-padding-inline: var(--gutter);
  }
  .shots figure { scroll-snap-align: start; }
}

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 46em; }
.checks li { padding-left: 30px; position: relative; }
.checks li::before { content: ''; position: absolute; left: 6px; top: 0.6em; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }

.link-row { display: flex; gap: 0 22px; flex-wrap: wrap; font-weight: 600; }
.link-row a { padding: 10px 0; }

/* Documents (privacy, terms, support, contact) */
.doc { max-width: 720px; padding-top: 56px; }
.doc h1 { font-weight: 300; }
.doc h2 { font-size: 1.25rem; margin-top: 36px; }
.doc .lead { margin-bottom: 8px; }
.contact-tile { margin: 24px 0 8px; }
.contact-tile h2 { margin-top: 0; }
.contact-tile p:first-of-type { font-size: 1.1875rem; font-weight: 600; }
.tiles .tile h2 { margin-top: 0; }

/* Questions: the whole row is tappable, a thin arrow on the right turns as
   it opens, and the answer fades in. */
details { border-bottom: 1px solid var(--border); }
details:first-of-type { border-top: 1px solid var(--border); }
summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; cursor: pointer; font-weight: 600; touch-action: manipulation; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; flex: none; width: 9px; height: 9px; margin: 0.45em 4px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
details p { margin: 0 0 16px; color: var(--text-2); }
details[open] p { animation: answer-in 200ms var(--ease-out); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } }

/* Mouse only. */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
  nav a:hover, .footer-links a:hover { color: var(--text); }
  .app-card:hover { border-color: var(--border-strong); }
  .app-card:hover .arrow { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .app-card, .app-card .arrow { transition: border-color 160ms ease; }
  .app-card:active { transform: none; border-color: var(--border-strong); }
  .app-card:hover .arrow { transform: none; }
  summary::after { transition: none; }
  details[open] p { animation: none; }
}