/* The phrase guides (/how-to-say-thank-you-in-thai, /khrap-and-kha, /basic-thai-phrases; SEO round 3, 31 October 2026):
   the canvases "How to say thank you in Thai", "Khrap and kha" and "Basic Thai phrases page", approved by the owner,
   built as drawn. Loaded after guide.css,
   which keeps the header, the footer and the fonts; everything here is scoped to main.pg. Phone width: the rows wrap
   (flex-wrap), as on the canvas; there are no breakpoints. */
main.pg { background: #f6f8fb; color: #1b2d45; font-family: Manrope, 'Helvetica Neue', Arial, sans-serif; }
.pg a { color: #285cce; } .pg a:hover { color: #1d47a6; }
.pg h1, .pg h2, .pg h3 { letter-spacing: normal; }
.pg .wrap { max-width: 1040px; margin: 0 auto; padding-inline: 24px; box-sizing: border-box; }
.pg .wrap.narrow { max-width: 820px; }
.pg .rom { font-weight: 700; color: #c4561f; }
.pg .eyebrow { margin: 0; font-weight: 800; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #c4561f; }
.pg .col { display: flex; flex-direction: column; }
.pg .muted { color: #55667d; }

/* Play buttons: guides.js plays every button.hear[data-audio]. Pink is the female voice, blue the male, as in the app. */
.pg .say { display: inline-flex; flex-direction: row; align-self: auto; align-items: center; justify-content: center; width: 32px; height: 32px; max-width: none; margin-left: 6px; vertical-align: middle; border: 0; border-radius: 999px; background: #eaf0fc; color: #285cce; cursor: pointer; padding: 0; gap: 0; flex-shrink: 1; font-size: inherit; line-height: normal; }
.pg .say:hover { background: #d6e2fb; }
.pg .say.f { background: #fde4ee; color: #8a1d4a; } .pg .say.f:hover { background: #fbd0e1; }
.pg .say.m { background: #e0ebff; color: #1d3f8a; } .pg .say.m:hover { background: #cddcff; }
.pg .say svg { width: 16px; height: 16px; }
.pg .say.big { flex: 0 0 auto; width: 44px; height: 44px; }
.pg .pair { display: flex; gap: 8px; flex: 0 0 auto; }
.pg .voice { align-self: flex-start; margin-top: 8px; display: flex; align-items: center; gap: 10px; width: auto; height: auto; border: 0; cursor: pointer; font: 800 16px Manrope, sans-serif; padding: 13px 22px; border-radius: 999px; }
.pg .voice svg { width: 22px; height: 22px; }
.pg .voice.m { background: #e0ebff; color: #1d3f8a; } .pg .voice.f { background: #fde4ee; color: #8a1d4a; }
.pg .say.playing, .pg .voice.playing { background: #285cce; color: #ffffff; }
.pg .say.f.playing, .pg .voice.f.playing { background: #8a1d4a; color: #ffffff; }
.pg .say.m.playing, .pg .voice.m.playing { background: #1d3f8a; color: #ffffff; }

/* The opening: the answer first, then the man's and the woman's form. */
.pg-hero { padding-block: 40px 56px; gap: 20px; }
.pg h1 { margin: 0; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -1.5px; color: #13233a; }
.pg .lead { margin: 0; font-size: 1.2rem; line-height: 1.6; max-width: 720px; }
.pg .lead.wide { max-width: 740px; }
.pg-forms { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.pg-form { flex: 1 1 300px; background: #ffffff; border-radius: 28px; padding: 30px; gap: 10px; box-shadow: 0 10px 30px rgba(20, 40, 70, .07); }
.pg-form .thai { font-size: 3.4rem; line-height: 1.3; }
.pg-form .rom { font-size: 1.5rem; }
.pg-form .means { font-weight: 600; color: #55667d; }
.pg .who { font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.pg .who.m { color: #1d3f8a; } .pg .who.f { color: #8a1d4a; }
.pg-forms.three { gap: 16px; }
.pg-forms.three .pg-form { flex: 1 1 240px; border-radius: 26px; padding: 26px; gap: 8px; }
.pg-forms.three .pg-form .thai { font-size: 3rem; }
.pg-forms.three .pg-form .rom { font-size: 1.4rem; }
.pg-forms.three .voice { margin-top: 6px; font-size: 15px; padding: 12px 20px; }
.pg-forms.three .voice svg { width: 20px; height: 20px; }
.pg .note { margin: 0; font-weight: 600; color: #55667d; }

/* The polite ending a man and a woman add (/basic-thai-phrases): the ending, then Hello with it. */
.pg-hero.short { padding-bottom: 48px; }
.pg-polites { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.pg-polite { flex: 1 1 300px; background: #ffffff; border-radius: 24px; padding: 24px; gap: 8px; box-shadow: 0 10px 30px rgba(20, 40, 70, .07); }
.pg-polite .row > .col .thai { font-size: 2.2rem; }
.pg .row.rule { border-top: 1px solid #dde4ee; padding-top: 10px; }
.pg .more { margin: 0; font-size: 1.05rem; }

/* Sections. */
.pg-band { background: #ffffff; padding: 56px 0; }
.pg-band > .wrap { gap: 16px; }
.pg-plain { padding-block: 56px; gap: 20px; }
.pg h2 { margin: 0; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; color: #13233a; }
.pg .body { margin: 0; font-size: 1.1rem; line-height: 1.65; }
.pg .body.short { max-width: 720px; }
.pg .links { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.pg .gap-18 { gap: 18px; } .pg .gap-20 { gap: 20px; } .pg .gap-14 { gap: 14px; }

/* A list of phrases (/basic-thai-phrases): each row its Thai, karaoke and meaning, both voices at the right. */
.pg-list { padding: 48px 0; }
.pg-list.white { background: #ffffff; }
.pg-list > .wrap { gap: 10px; }
.pg-list h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.pg-phrase { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #dde4ee; padding: 14px 0; }
.pg-phrase > .col { gap: 2px; min-width: 0; }
.pg-phrase .thai { font-size: 1.6rem; }
.pg .mean { font-weight: 600; }
.pg .muted.small { font-size: 0.95rem; }

/* In the app: three screenshots on navy. */
.pg-app { background: #13233a; padding: 64px 0; }
.pg-app > .wrap { gap: 28px; }
.pg-app .eyebrow { color: #f6a06f; }
.pg-app h2 { color: #ffffff; max-width: 760px; }
.pg-shots { display: flex; flex-wrap: wrap; gap: 36px 28px; justify-content: center; }
.pg-shot { flex: 1 1 260px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pg-shot img { width: 100%; max-width: 250px; height: auto; border-radius: 28px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.pg-shot h3 { margin: 6px 0 0; font-weight: 800; font-size: 1.25rem; color: #ffffff; }
.pg-shot p { margin: 0; line-height: 1.6; color: #c9d3e3; max-width: 300px; }
.pg .cta { background: #ed773f; color: #13233a; text-decoration: none; font-weight: 800; font-size: 17px; padding: 15px 28px; border-radius: 999px; }
.pg .cta:hover { color: #13233a; }
.pg-app .cta { align-self: center; }

/* Cards of words and phrases, each with its play buttons at the right of its row. */
.pg-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.pg-card { flex: 1 1 280px; background: #ffffff; border-radius: 22px; padding: 24px; gap: 6px; }
.pg-card .lbl { font-weight: 700; color: #55667d; }
.pg-card.dark { background: #13233a; color: #ffffff; }
.pg-card.dark .lbl, .pg-card.dark .muted { color: #c9d3e3; }
.pg-card.dark .thai { color: #ffffff; }
.pg-card.dark .rom { color: #ffffff; }
.pg-card.i { flex: 1 1 260px; }
.pg .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg .row > .col { gap: 2px; }
.pg-card .row .thai { font-size: 1.9rem; }
.pg-card .row + .row .thai { margin-top: 8px; }
.pg-card.i .row .thai { font-size: 2.2rem; }

/* A conversation from the course: the woman's lines pink, yours blue. */
.pg-lines { display: flex; flex-direction: column; gap: 12px; }
.pg-line { display: flex; gap: 14px; align-items: flex-start; border-radius: 18px; padding: 16px 20px; }
.pg-line.f { background: #fff4f8; } .pg-line.m { background: #eef4ff; }
.pg-line > b { flex: 0 0 64px; font-weight: 800; }
.pg-lines.wide-names .pg-line > b { flex-basis: 86px; }
.pg-line.f > b { color: #8a1d4a; } .pg-line.m > b { color: #1d3f8a; }
.pg-line > .col { gap: 2px; }
.pg-line .thai { font-size: 1.3rem; }
.pg-line .say { margin-left: auto; }

/* Where the endings go (/khrap-and-kha). */
.pg-uses { display: flex; flex-direction: column; gap: 12px; }
.pg-use { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; border-top: 1px solid #dde4ee; padding-top: 14px; }
.pg-use:last-child { border-bottom: 1px solid #dde4ee; padding-bottom: 14px; }
.pg-use > b { flex: 0 0 200px; font-weight: 800; color: #13233a; }
.pg-use > span > .thai { font-size: 1.3rem; }

/* The tones of kòrp-kun. */
.pg-tones { display: flex; flex-wrap: wrap; gap: 16px; }
.pg-tone { flex: 1 1 240px; background: #ffffff; border-radius: 22px; padding: 22px; gap: 8px; }
.pg-tone > b { font-weight: 800; color: #13233a; }
.pg-tone > svg { width: 100%; height: 80px; }
.pg-tone .row { border-top: 1px solid #dde4ee; padding-top: 10px; }
.pg .pg-try { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: #285cce; color: #ffffff; text-decoration: none; font-weight: 800; font-size: 16px; padding: 14px 24px; border-radius: 999px; }
.pg .pg-try:hover { color: #ffffff; }
.pg .pg-try svg { width: 20px; height: 20px; }

/* Questions: the canvas's plain rules, over guide.css's FAQ boxes. */
.pg .faq details { background: none; border: 0; border-top: 1px solid #dde4ee; border-radius: 0; padding: 16px 0; }
.pg .faq details:last-of-type { border-bottom: 1px solid #dde4ee; }
.pg .faq summary { display: list-item; list-style: revert; padding: 0; position: static; font-weight: 800; font-size: 1.1rem; color: inherit; cursor: pointer; }
.pg .faq summary::-webkit-details-marker { display: inline-block; }
.pg .faq summary::after, .pg .faq details[open] summary::after { content: none; } /* guide.css draws a − for an open one, placed against the page: a stray dash at the hero's right edge. */
.pg .faq details p { margin: 10px 0 0; font-size: inherit; line-height: 1.6; color: inherit; }
.pg .faq h2 { margin: 0 0 6px; }

/* The first answer's cards (/basic-thai-phrases). */
.pg .faq .pg-faq-cards { margin: 10px 0 0; gap: 12px; }
.pg .faq .pg-faq-cards p { margin: 0; }
.pg-fcards { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-fcard { flex: 1 1 220px; background: #ffffff; border-radius: 18px; padding: 16px 18px; gap: 4px; }
.pg-fcard .thai { font-size: 1.6rem; }
.pg-fcard .pair { margin-top: 6px; }

/* The end: try it free. */
.pg-end-wrap { padding-block: 56px; }
.pg-end-wrap.tight { padding-top: 0; }
.pg-end { background: #13233a; color: #ffffff; border-radius: 32px; padding: clamp(28px, 5vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.pg-end > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.pg-end h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: #ffffff; }
.pg-end p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #c9d3e3; }
.pg-end .cta { padding: 15px 26px; }

/* Related guides. */
.pg-related { padding-bottom: 48px; gap: 12px; }
.pg-related h2 { font-size: 1.3rem; }
.pg-related > div { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-related > div > a { flex: 1 1 220px; background: #ffffff; border-radius: 18px; padding: 18px 20px; font-weight: 700; text-decoration: none; }

/* Tone colours and tone lines (the owner, 31 October 2026): every romanisation coloured by tone, syllable by syllable,
   with the app's tone line (components/tone-wave.tsx, lib/tone-colours.ts) under each syllable, stretched to its width.
   Written into the page by Website/tone-spelling.mjs from the course's romanisation. */
.pg .rom { white-space: nowrap; }
.pg .tone-spell { display: inline-flex; align-items: flex-start; flex-wrap: wrap; vertical-align: top; }
.pg .tw { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.pg .syl { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; }
.pg .syl svg { display: block; min-width: 18px; }
.pg .sep { align-self: flex-start; }
.pg .rom [data-tone='mid'] { color: #2c7a4a; }
.pg .rom [data-tone='low'] { color: #2458b0; }
.pg .rom [data-tone='falling'] { color: #6f3aa8; }
.pg .rom [data-tone='high'] { color: #b45309; }
.pg .rom [data-tone='rising'] { color: #c8423a; }
.pg .tone-grid line { stroke: #e3e9f1; stroke-width: 1; }
.pg .tone-line { fill: none; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg .tone-line[data-tone='mid'] { stroke: #2c7a4a; }
.pg .tone-line[data-tone='low'] { stroke: #2458b0; }
.pg .tone-line[data-tone='falling'] { stroke: #6f3aa8; }
.pg .tone-line[data-tone='high'] { stroke: #b45309; }
.pg .tone-line[data-tone='rising'] { stroke: #c8423a; }
/* On navy: the syllables white, the lines orange, as drawn. */
.pg-card.dark .rom [data-tone] { color: #ffffff; }
.pg-card.dark .tone-grid line { stroke: rgba(255, 255, 255, .25); }
.pg-card.dark .tone-line[data-tone] { stroke: #f6a06f; }