/* amatya.app (#524): Paper and Kohl, Turmeric once, Night in dark mode, as the app since 1.3.0 (docs/brand/README.md). */
:root {
  --paper: #FAF6EE; --kohl: #2B211C; --muted: #6B5E55; --turmeric: #E3A33B; --rule: #E6DDCE;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1F1D25; --kohl: #F2EFF8; --muted: #CBC4DD; --rule: #3A354E; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--kohl);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
main { max-width: 40rem; margin: 0 auto; padding: 48px 16px 32px; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
header a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-weight: 600; font-size: 1.1rem; }
header img { width: 40px; height: 40px; border-radius: 10px; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 20px; }
h2 { font-size: 1.15rem; margin: 32px 0 8px; }
p, li { margin: 0 0 14px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
code { font: 600 1.05rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }
.lede { font-size: 1.2rem; }
.muted { color: var(--muted); }
/* The one Turmeric on a page: the invite page's "Get the app", kohl on turmeric (7.2:1). */
.primary {
  display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--turmeric); color: #2B211C;
  font-weight: 600; text-decoration: none;
}
[data-placeholder] { border-left: 3px solid var(--rule); padding-left: 12px; color: var(--muted); }
footer { max-width: 40rem; margin: 0 auto; padding: 24px 16px 48px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.95rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }
.updated { color: var(--muted); font-size: 0.95rem; }

/* The home page and What's new (#729), `<body class="mk">`: one big idea per band, real app screens in phone frames, the
   myna as the character, in the Things and Stuff rhythm. Display type is SF Pro Rounded on Apple devices (the brand's
   "rounded, confident grotesque"); the CSP loads no web font, so elsewhere it is the system face. */
:root {
  --paper-2: #F3ECDF; --card: #FFFFFF; --leaf: #3E9B5F; --me: #EFE8DC; --glow: rgba(227, 163, 59, 0.28);
  --dusk: #1F1D25; --on-dusk: #F2EFF8; --on-dusk-muted: #CBC4DD;
  --display: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper-2: #27242F; --card: #2E2B38; --me: #3A354E; --glow: rgba(227, 163, 59, 0.16); --dusk: #16141A; }
}
.mk { font-size: 18px; -webkit-font-smoothing: antialiased; }
.mk main, .mk footer { max-width: none; margin: 0; padding: 0; border: 0; }
.mk header { display: block; margin: 0; }
.mk header img { height: auto; border-radius: 0; }
.mk img, .mk video { max-width: 100%; display: block; }
.mk a:focus-visible { outline: 2px solid var(--turmeric); outline-offset: 3px; border-radius: 6px; }
.mk .wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.mk .band { padding-block: 96px; overflow-x: clip; }
.mk .band.alt { background: var(--paper-2); }
.mk h1, .mk h2, .mk h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.mk h1 { font-size: clamp(3rem, 8vw, 5.4rem); line-height: 0.98; }
.mk h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.04; }
.mk h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.mk p { margin: 0; }
.mk .eyebrow { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mk .lede { font-size: 1.25rem; color: var(--muted); max-width: 34rem; }

/* The top bar */
.mk .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; padding-block: 14px; }
.mk .bar { display: flex; align-items: center; gap: 24px; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--rule); border-radius: 18px; padding: 10px 12px 10px 14px; }
.mk .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.mk .brand img { width: 34px; height: 34px; border-radius: 9px; }
.mk .links { display: flex; gap: 22px; margin-left: auto; font-size: 0.95rem; color: var(--muted); }
.mk .links a { text-decoration: none; }
.mk .links a:hover { color: var(--kohl); }
.mk .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--kohl); color: var(--paper); font-weight: 700; font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
.mk .btn.big { padding: 16px 26px; font-size: 1.05rem; }

/* The hero; "tell" and "every" sit in a chat bubble, because Amatya is a conversation. */
.mk .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; padding-block: 56px 96px; overflow-x: clip; }
.mk .hero > div:first-child, .mk .loghead { display: flex; flex-direction: column; gap: 24px; }
.mk .loghead { padding-block: 64px 40px; align-items: flex-start; }
.mk .bubble { display: inline-block; background: var(--kohl); color: var(--paper); border-radius: 0.42em 0.42em 0.42em 0.12em; padding: 0 0.22em 0.06em; transform: rotate(-3deg); box-shadow: 0 10px 30px rgba(43, 33, 28, 0.18); }
.mk .cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mk .cta small { color: var(--muted); font-size: 0.9rem; line-height: 1.35; }
.mk .stage { position: relative; display: grid; place-items: center; }
.mk .stage::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; background: radial-gradient(closest-side, var(--glow), transparent); }
.mk .perch { position: absolute; width: 150px; top: -40px; right: max(0px, calc(50% - 230px)); z-index: 3; filter: drop-shadow(0 8px 14px rgba(43, 33, 28, 0.18)); }

/* A real screen in a phone frame. The raw screenshots have no Dynamic Island, so the frame draws one; the clip has its own. */
.mk .phone { position: relative; z-index: 1; width: 300px; max-width: 100%; padding: 11px; border-radius: 54px; background: linear-gradient(145deg, #3A302B, #16110F); box-shadow: 0 40px 80px -20px rgba(43, 33, 28, 0.45), 0 0 0 1.5px #5A4C44 inset; }
.mk .screen { border-radius: 44px; overflow: hidden; aspect-ratio: 1320 / 2868; background: #FAF6EE; position: relative; }
.mk .screen.clip { aspect-ratio: 720 / 1566; }
.mk .screen img, .mk .screen video { width: 100%; height: 100%; object-fit: cover; }
.mk .island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 27px; border-radius: 20px; background: #000; z-index: 2; }
.mk .phone.sm { width: 250px; padding: 9px; border-radius: 46px; }
.mk .phone.sm .screen { border-radius: 38px; }
.mk .phone.sm .island { top: 18px; width: 76px; height: 22px; }

/* Why it is different */
.mk .thesis { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mk .thesis h2 { max-width: 15em; }
.mk .thesis h2 em { font-style: normal; color: var(--muted); }
.mk .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; width: 100%; }
.mk .trio > div, .mk .tile { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: 24px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.mk .k { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* A feature: words on one side, a screen on the other */
.mk .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.mk .row.flip > :first-child { order: 2; }
.mk .copy { display: flex; flex-direction: column; gap: 20px; max-width: 30rem; }
.mk .copy p { color: var(--muted); font-size: 1.15rem; }
.mk .said { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mk .said span { align-self: flex-start; background: var(--card); border: 1px solid var(--rule); border-radius: 16px 16px 16px 5px; padding: 7px 13px; font-size: 0.95rem; }
.mk .said b { font-weight: 600; color: var(--leaf); }
.mk .pair { display: flex; justify-content: center; align-items: flex-end; }
.mk .pair .phone + .phone { margin-left: -60px; margin-bottom: -30px; }
.mk .dusk { background: var(--dusk); color: var(--on-dusk); }
.mk .dusk .copy p, .mk .dusk .eyebrow { color: var(--on-dusk-muted); }
.mk .sleeper { width: 200px; }
.mk .mac { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mk .window { width: 100%; max-width: 980px; margin-top: 28px; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 40px 90px -30px rgba(43, 33, 28, 0.45), 0 0 0 1px var(--rule); }
.mk .chrome { height: 34px; display: flex; gap: 8px; align-items: center; padding: 0 14px; background: var(--paper-2); }
.mk .chrome i { width: 12px; height: 12px; border-radius: 50%; background: var(--rule); }
.mk .panel-shot { max-width: 620px; width: 100%; border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(43, 33, 28, 0.5); margin-top: -40px; position: relative; }
.mk .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.mk .tile { padding: 26px; gap: 10px; }
.mk .tile svg { width: 30px; height: 30px; stroke: var(--kohl); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk .tile p { color: var(--muted); font-size: 1rem; }

/* What's new, on the home page */
.mk .news { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.mk .log { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; }
.mk .log a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 20px 24px; text-decoration: none; border-top: 1px solid var(--rule); }
.mk .log a:first-child { border-top: 0; }
.mk .log a:hover { background: var(--paper-2); }
.mk .log time { font-weight: 600; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk .log strong { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.mk .log span { color: var(--muted); font-size: 0.95rem; display: block; margin-top: 2px; }
.mk .final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mk .final img { width: 190px; }
/* The waitlist form (Oct 29, 2026): one email field. The trap field is for scripts, so no person sees it. */
.mk .wait { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 34rem; color: var(--muted); }
.mk .wait .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.mk .wait input { flex: 1 1 14rem; min-width: 0; padding: 12px 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--kohl); font: inherit; }
.mk .wait .btn { border: 0; cursor: pointer; font-family: inherit; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The What's new page: one band per change, a date pill, a picture of it at work, a "Try" line */
.mk .when { display: flex; gap: 10px; align-items: center; margin-bottom: 28px; }
.mk .datepill { font-weight: 700; font-size: 0.85rem; background: var(--kohl); color: var(--paper); border-radius: 999px; padding: 6px 14px; font-variant-numeric: tabular-nums; }
.mk .tag { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; }
.mk .copy .try { display: flex; gap: 10px; align-items: center; color: var(--kohl); font-size: 1.05rem; }
/* The pushed item's turmeric, as on the app's nudge. */
.mk .try span { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--turmeric); color: #2B211C; border-radius: 6px; padding: 3px 8px; }
.mk .dayline { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 16px; }
.mk .hours { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.72rem; color: var(--muted); }
.mk .track { position: relative; height: 38px; background: var(--paper-2); border-radius: 10px; }
.mk .track i { position: absolute; top: 5px; bottom: 5px; border-radius: 7px; }
.mk .track .busy { background: var(--rule); }
.mk .track .gap { border: 2px dashed var(--turmeric); }
.mk .at0 { left: 0; } .mk .at15 { left: 15%; } .mk .at30 { left: 30%; } .mk .at65 { left: 65%; }
.mk .w12 { width: 12%; } .mk .w15 { width: 15%; } .mk .w25 { width: 25%; }
.mk .chatcard { position: relative; z-index: 1; width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--paper); border-radius: 28px; padding: 22px; box-shadow: 0 30px 70px -25px rgba(43, 33, 28, 0.4), 0 0 0 1px var(--rule); }
.mk .b { max-width: 88%; padding: 9px 13px; border-radius: 18px; font-size: 0.95rem; line-height: 1.35; }
.mk .b.me { align-self: flex-end; background: var(--me); border-bottom-right-radius: 6px; }
.mk .b.am { align-self: flex-start; background: var(--card); border: 1px solid var(--rule); border-bottom-left-radius: 6px; }
.mk .card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 14px; font-size: 0.92rem; }
.mk .cardh { font-weight: 700; padding-bottom: 6px; }
.mk .step { padding: 7px 0 7px 26px; border-top: 1px solid var(--rule); position: relative; }
.mk .step::before { content: ""; position: absolute; left: 2px; top: 10px; width: 13px; height: 13px; border: 1.6px solid var(--muted); border-radius: 50%; }
.mk .chips { display: flex; gap: 8px; padding-top: 10px; }
.mk .chip { font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); }
.mk .chip.on { background: var(--kohl); color: var(--paper); border-color: var(--kohl); font-weight: 700; }
.mk .sheet { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* A photo of a handwritten list: lined paper, drawn here so it stays sharp. */
.mk .note { display: flex; flex-direction: column; background: #FFFDF6; color: #2B211C; border-radius: 10px; padding: 12px 16px; transform: rotate(-1.5deg); box-shadow: 0 6px 16px -8px rgba(43, 33, 28, 0.4); font: italic 600 1.05rem/1 "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; }
.mk .note span { padding: 7px 0 6px; border-bottom: 1px solid #DCE6F0; }
.mk .sheetline { display: flex; align-items: center; justify-content: space-between; font-size: 0.92rem; color: var(--muted); }
.mk .sheetline b { background: var(--kohl); color: var(--paper); border-radius: 999px; padding: 5px 14px; font-size: 0.82rem; }
.mk .also { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.mk .also li { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 16px; color: var(--muted); font-size: 1rem; }
.mk .also b { color: var(--kohl); }
.mk .panel-only { position: relative; z-index: 1; width: 100%; max-width: 560px; border-radius: 16px; box-shadow: 0 30px 70px -25px rgba(43, 33, 28, 0.5); }
.mk .fixes { display: flex; flex-direction: column; gap: 14px; }
.mk .fixes ul { margin: 0; padding: 0; list-style: none; max-width: 46rem; }
.mk .fixes li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); margin: 0; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--muted); }
.mk .fixes time { font-weight: 600; font-variant-numeric: tabular-nums; }

.mk footer { border-top: 1px solid var(--rule); padding-block: 32px 48px; color: var(--muted); font-size: 0.92rem; }
.mk footer .wrap { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; }
.mk footer nav { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 0 auto; }

@media (max-width: 860px) {
  .mk .band { padding-block: 64px; }
  .mk .hero, .mk .row, .mk .news { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mk .row.flip > :first-child { order: 0; }
  .mk .hero { padding-block: 24px 64px; }
  .mk .trio, .mk .grid { grid-template-columns: minmax(0, 1fr); }
  .mk .links { display: none; }
  .mk .bar .btn { margin-left: auto; }
  .mk .perch { width: 110px; right: 4%; top: -20px; }
  .mk .pair .phone.sm { width: 200px; }
  .mk .pair .phone + .phone { margin-left: -40px; }
  .mk .log a { grid-template-columns: minmax(0, 1fr) auto; }
  .mk .log time { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .mk .bubble { transform: none; } }