/*
 * PyawTat — the public site.
 *
 * The same tokens the app is built from, so a visitor who downloads it is not
 * meeting a different product. Burmese leads everywhere: it is the language
 * the app is in, and a page that puts English first would be describing
 * somebody else's app.
 */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: 'Noto Sans Myanmar';
  src: url('/fonts/NotoSansMyanmar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Myanmar';
  src: url('/fonts/NotoSansMyanmar-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Myanmar';
  src: url('/fonts/NotoSansMyanmar-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('/fonts/NotoSansThai-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */

:root {
  --saffron: #f59e0b;
  --saffron-deep: #b45309;
  --amber: #fbbf24;
  --teal: #0f766e;
  --teal-soft: #e6f4f2;

  --cream: #fff9ef;
  --cream-sunk: #fdf3e2;
  --card: #ffffff;
  --line: #efe1c9;
  --line-soft: #f6ecdc;

  --ink: #3f3527;
  --ink-soft: #6b5d47;
  --muted: #8a7b62;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 68rem;

  /* Burmese stacks marks vertically; anything under 1.6 clips them. */
  --lh-my: 1.75;

  --shadow-card: 0 1px 2px rgba(63, 53, 39, .05), 0 8px 24px rgba(63, 53, 39, .06);
  --shadow-phone: 0 2px 6px rgba(63, 53, 39, .08), 0 24px 60px rgba(63, 53, 39, .18);
}

/* ----------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Noto Sans Myanmar', 'Inter', system-ui, sans-serif;
  line-height: var(--lh-my);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* Latin runs are set in Inter; Burmese falls through to Noto. */
.latin { font-family: 'Inter', system-ui, sans-serif; line-height: 1.5; }
.thai { font-family: 'Noto Sans Thai', sans-serif; line-height: 1.5; }

/*
 * No `text-wrap: balance` here, deliberately.
 *
 * Burmese is written without spaces between words, so the browser will break a
 * line anywhere it likes — and balancing makes it likelier to land mid-word.
 * Headings are kept short enough to fit instead, which is the only reliable
 * control this script gives.
 */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
/* `height: auto` is load-bearing: every screenshot carries width/height
   attributes so the layout does not jump while they load, and without this the
   attribute height wins and the phones render stretched. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 249, 239, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { width: 2.25rem; height: 2.25rem; border-radius: .6rem; }
.brand__name { font-weight: 700; font-size: 1.15rem; }
.brand__latin {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .55rem;
  letter-spacing: .22em;
  color: var(--muted);
  margin-top: -.35rem;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.site-nav a {
  text-decoration: none;
  font-size: .95rem;
  color: var(--ink-soft);
  transition: color .15s;
}
.site-nav a:hover { color: var(--ink); }
@media (max-width: 640px) { .site-nav .is-optional { display: none; } }

/*
 * The language switcher.
 *
 * Each name is written in its own script and set in its own font — somebody
 * looking for Burmese is looking for မြန်မာ, not for the word "Burmese" in a
 * language they cannot read. All three are visible rather than hidden behind a
 * dropdown, because three is few enough to show and a dropdown labelled in one
 * language is the problem again.
 */
.langs {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.site-nav .lang {
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--muted);
  transition: background-color .15s, color .15s;
}
.site-nav .lang:lang(my) { font-family: 'Noto Sans Myanmar', sans-serif; }
.site-nav .lang:lang(th) { font-family: 'Noto Sans Thai', sans-serif; }
.site-nav .lang:lang(en) { font-family: 'Inter', sans-serif; }

.site-nav .lang:hover { color: var(--ink); }
.site-nav .lang.is-on {
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
}

@media (max-width: 520px) {
  .site-header .wrap { min-height: 4rem; }
  .site-nav { gap: .75rem; }
  .site-nav .lang { padding: .28rem .55rem; font-size: .8rem; }

  /*
    The header holds a brand, a link and three languages. On a 375px phone that
    is more than fits, and both the brand name and the link were breaking
    across two lines.

    The mark carries the brand on its own at this width, and the download link
    is the same offer the hero already makes twice. The language switcher stays
    because it is the one thing here somebody cannot get anywhere else on the
    page.
  */
  .brand > span { display: none; }
  .site-nav > a:not(.lang) { display: none; }
}

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

/*
 * Asymmetric on purpose.
 *
 * The type block runs wider than the phone column and the phone is allowed to
 * cross into it and off the right edge of the page. A hero where both halves
 * sit politely inside their own column is the shape every template has.
 */
.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

/* One Thai character, very large and very quiet, as a ground for the type.
   It is ผ — the first letter of the phrase the app opens with. */
.hero__glyph {
  position: absolute;
  top: -6vw;
  left: -1vw;
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: min(40vw, 30rem);
  line-height: .8;
  color: var(--saffron);
  opacity: .035;
  user-select: none;
  pointer-events: none;
}

.hero .wrap { position: relative; }

.hero__type { max-width: 40rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--saffron-deep);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.45;
  margin-top: 1.6rem;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(var(--amber), var(--amber)) no-repeat 0 76% / 100% .3em;
  padding-inline: .06em;
  /* Never split: half a highlight at the end of one line and half at the start
     of the next reads as a rendering fault, not as emphasis. */
  white-space: nowrap;
}

.hero__lead {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  color: var(--ink-soft);
  max-width: 30rem;
}

/* The phone crosses the column boundary and leaves the page on the right. */
.hero__device {
  position: absolute;
  top: clamp(1rem, 3vw, 3rem);
  right: calc(-1 * var(--gutter));
  width: min(300px, 34vw);
  transform: rotate(4deg);
}
@media (max-width: 940px) {
  .hero__device {
    position: static;
    width: min(260px, 62vw);
    margin: 3rem auto 0;
    transform: none;
  }
}

/* ---------------------------------------------------------------- store -- */

.stores { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

.store {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.15rem;
  border-radius: .8rem;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.store:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }

.store svg { width: 1.5rem; height: 1.5rem; flex: none; }
.store__text { font-family: 'Inter', sans-serif; line-height: 1.2; }
.store__small { display: block; font-size: .6rem; opacity: .72; letter-spacing: .05em; }
.store__big { display: block; font-size: .98rem; font-weight: 600; }

/* Not live yet. Styled as unavailable rather than hidden, because "coming" is
   information and a dead link is not. */
.store--soon {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: default;
}
.store--soon:hover { transform: none; box-shadow: none; }
.store--soon svg { opacity: .45; }

.store-note { margin-top: 1rem; font-size: .88rem; color: var(--muted); }

/* ---------------------------------------------------------------- phone -- */

.phone {
  position: relative;
  padding: .5rem;
  background: #1c1710;
  border-radius: 2.2rem;
  box-shadow: var(--shadow-phone);
}
.phone::after {
  /* The earpiece slot. Enough to read as a phone, not a photograph of one. */
  content: '';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: .3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
.phone img { border-radius: 1.8rem; }

/* -------------------------------------------------------------- section -- */

.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.section--rule { border-top: 1px solid var(--line); }

.section__head { max-width: 40rem; }
.section__head h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.5; }
.section__head p { margin-top: 1rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- method -- */

/*
 * The product's own text block, blown up and annotated.
 *
 * This is the whole method in one object — Thai, how to say it, what it means —
 * so it is shown at the size of an argument rather than described in a feature
 * card. The labels hang off it on hairlines, the way an annotated diagram
 * works, which is also the least template-like thing on the page.
 */
.method {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 860px) { .method { grid-template-columns: 1.1fr .9fr; } }

.specimen {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-card);
}

.specimen__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .35rem;
}
.specimen__row + .specimen__row { margin-top: .6rem; }

.specimen__th {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.4;
}
.specimen__say {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--saffron-deep);
}
.specimen__my { font-size: clamp(.95rem, 2.4vw, 1.1rem); color: var(--muted); }

/*
 * The annotation: a hairline out to a small label, inside the card.
 *
 * It used to hang in the margin, which only worked on a wide desktop and
 * vanished everywhere else — and the labels are the reason the specimen is on
 * the page at all. Inside, they hold at any width.
 */
.specimen__tag {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--muted);
}
.specimen__tag::before {
  content: '';
  width: clamp(1rem, 4vw, 2.5rem);
  height: 1px;
  background: var(--line);
}
@media (max-width: 520px) { .specimen__tag::before { display: none; } }

.method__note { color: var(--ink-soft); }
.method__note strong { color: var(--ink); }
.method__note p + p { margin-top: 1.1rem; }

/* ------------------------------------------------------------------ day -- */

/*
 * A day, not a feature list.
 *
 * Every row is a real moment from the shipped content, in the order it happens.
 * Three cards saying "practical" and "offline" would claim the same thing and
 * prove none of it.
 */
.day { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.day__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem clamp(1rem, 4vw, 2.5rem);
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

/*
  Rules between the rows, not around them. Ruling every row top and bottom
  turns five moments of somebody's day into a spec table, which is the one
  thing this section is not.
*/
.day__row:first-child { border-top: 0; padding-top: 0; }

.day__time {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--saffron-deep);
  letter-spacing: .04em;
}
.day__where { color: var(--muted); font-size: .92rem; }
.day__line {
  /*
    The Thai spans the row on a phone.

    Three children in a two-column grid put this one back in column one, which
    is the 4.5rem time column: every phrase wrapped inside 72px. The phrase is
    the thing being taught and the audience is on phones, so it was the most
    important line on the page and the most broken.
  */
  grid-column: 1 / -1;
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 720px) {
  .day__row { grid-template-columns: 5rem 12rem 1fr; }
  /* Wide enough for its own column again. */
  .day__line { grid-column: auto; }
}

/* --------------------------------------------------------------- claims -- */

/* Plain typographic statements. No icon, no card, no third column that exists
   only because two looked lonely. */
.claims { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .claims { grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; } }

.claim h3 {
  font-size: 1.1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.claim p { margin-top: 1rem; color: var(--ink-soft); font-size: .97rem; }

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

.screens-bleed {
  padding-inline: max(var(--gutter), calc((100vw - var(--measure)) / 2));
}

.screens {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 3rem;
  padding-bottom: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.screens::-webkit-scrollbar { display: none; }

.screens .shot { flex: none; width: min(232px, 58vw); scroll-snap-align: center; }
/* Staggered: a strip that lines up perfectly reads as a contact sheet. */
.screens .shot:nth-child(even) { margin-top: clamp(1rem, 4vw, 2.5rem); }
.shot__label { margin-top: 1rem; font-size: .88rem; color: var(--muted); }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 3rem 0 4rem;
  background: var(--cream);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
}
.site-footer__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__note { width: 100%; color: var(--muted); font-size: .85rem; }
.site-footer__bird { width: 2.75rem; opacity: .85; }

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

.legal { padding: clamp(2.5rem, 7vw, 4.5rem) 0 5rem; }
.legal__inner { max-width: 44rem; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.45; }
.legal h2 {
  font-size: 1.2rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal p, .legal li { color: var(--ink-soft); margin-top: 1rem; }
.legal ul { margin: 0; padding-left: 1.25rem; }
.legal .updated { color: var(--muted); font-size: .9rem; margin-top: .75rem; }

/* The parts only the company can fill in. Marked so nobody publishes the draft
   believing it is finished. */
.legal .todo {
  background: #fbe0dc;
  color: #8c2b21;
  border-radius: .3rem;
  padding: .05rem .35rem;
  font-family: 'Inter', sans-serif;
  font-size: .9em;
}

/*
  Keyboard focus, drawn rather than left to the browser.

  Two rings, not one: the offset white halo keeps the saffron visible where the
  focused thing already sits on a warm background, which is most of this page.
*/
:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
  border-radius: .35rem;
}
.btn-store:focus-visible {
  outline-color: var(--amber);
  box-shadow: 0 0 0 2px var(--cream);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}