/* Page CSS for the tathep landing page: only what sits inside a visual and the kit lacks
   (tasteskill 2.5.1, sections-library.md), plus one --p-h per card group. */

/* hero: the small result card over the window's lower-left corner (hero-collage) */
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.d-card { background: #fff; color: #16181a; border-radius: 12px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text); text-align: left;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 40px -18px rgb(11 28 35 / .45); }
.d-card h5 { margin: 0 0 4px; font: 600 14px/1.3 var(--font-text); }
.d-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 13px; font-weight: 500; background: #e1f4fa; color: #035f7a; white-space: nowrap; }
.d-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
.d-note__line:first-of-type { border-top: 0; }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e1f4fa; color: #035f7a; font-style: normal; font-size: 12px; font-weight: 700; }
.d-note__line b { font-weight: 600; color: #16181a; }
.hero__proof { font-size: var(--t-small); color: var(--muted); }

/* app screenshots (public/img/app-*.webp, from app.tathep.com): plain images, the app's own grey behind */
.shot__img { display: block; width: 100%; height: auto; }

/* hero: the app window holds the Easy mode step 1 screenshot; it keeps --ly-cut-room of app grey at
   its right so the frame cuts empty margin, not the form. */
.ez.shot { --fx-bg: #ffffff; background: #f7f8f8; }
.ez.shot .ui-win__crumb { font-size: 12px; color: var(--u-muted); }
.ez.shot > picture { display: block; width: calc(100% - var(--ly-cut-room)); }
/* a phone gets the app's own phone layout (375px wide), so its text stays readable, in a frame tall
   enough to show the step bar, the pasted link and the upload box */
@media (max-width: 639px) { .hero__art { min-height: 440px; } }
/* the stage card: done stages ticked, the running one marked as working */
.hero__art .d-note__line { padding: 5px 0; }
.d-note__line.is-busy i { background: transparent; box-shadow: inset 0 0 0 2px #02a6d5; }
.hero__art > .ly-piece--main.ez { top: var(--s-6); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { display: none; } .hero__art > .ly-piece--main.ez { top: var(--s-5); } }

/* platform: the Easy mode step 2 screenshot (AI has read the link and picked the billboard) on the app's
   grey, beside the billboard list, which fills its pane without adding height (cut at the foot under
   the pane's fade) */
.app > .app__pane--plan { display: grid; align-items: start; padding: var(--s-6); background: #f7f8f8; }
.app > .app__pane--plan::after { display: none; }
.app > .app__pane--list > .shot__img { position: absolute; inset: 0 0 auto 0; }
#platform .app.fill { min-height: max-content; }
@media (max-width: 1023px) { .app > .app__pane--list { height: 252px; } .app > .app__pane--plan { padding: var(--s-5) var(--s-4); } }


/* the drawn UI's quiet text, darkened to 5.5:1 or more on its white panels */
.ui { --fx-muted: #4f5b61; --u-soft: #59656b; }

/* platform: app-frame (sections-library.md, app-frame: the whole recipe) */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* pricing: the two charging modes as plain facts under the lead */
.facts { display: grid; gap: var(--s-4); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

/* pricing: a square frame with the app's mode chooser screenshot standing in it, cut at the foot */
.pricing__frame { --ratio: 100%; background: #f7f8f8; }
.pricing__frame > .pricing__shot { position: absolute; top: var(--s-7); left: 50%; translate: -50% 0; width: min(80%, 440px); overflow: hidden; }
.pricing__frame::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 72px; background: linear-gradient(transparent, #f7f8f8); pointer-events: none; }
@media (max-width: 639px) { .pricing__frame { --ratio: 150%; } .pricing__frame > .pricing__shot { top: var(--s-5); width: 90%; } }

/* results: a real tathep billboard with its name chip, beside the traffic card */
.live { position: relative; }
.frame.live > .live__chip { position: absolute; left: var(--s-5); top: var(--s-5); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px;
  background: #0b1c23; color: #fff; font: 500 13px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; z-index: 1; }
/* DM Mono has no Thai letters: the Thai chip is set in the text face */
html[lang="th"] .frame.live > .live__chip { font: 500 13px/1 var(--font-text); letter-spacing: 0; }
/* results: an example of the app's "latest vehicles" live table. A row slides in at the top every few
   seconds (Results.astro), inside a window five rows tall, so the panel never changes height. */
.feed { --row: 40px; display: grid; gap: 0; max-width: 440px; padding: 16px 18px 12px; background: #fff; font: 400 14px/1.3 var(--font-text); color: var(--u-text-2); }
.feed > * { margin: 0; }
.feed__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.feed__head p { margin: 0; }
.feed__title { font-weight: 600; font-size: 15px; color: var(--u-ink); }
.feed__sub { margin-top: 2px !important; font-size: 12px; color: var(--u-muted); }
.feed__live { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 500; color: #a3141c; background: #fdecec; }
.feed__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d9232d; animation: feed-beat 1.6s ease-out infinite; }
@keyframes feed-beat { 0% { box-shadow: 0 0 0 0 rgb(217 35 45 / .45); } 70%, 100% { box-shadow: 0 0 0 6px rgb(217 35 45 / 0); } }
.feed__row { display: grid; grid-template-columns: 1fr 1.1fr 1fr 64px; align-items: center; gap: 10px; height: var(--row); padding: 0 4px; border-top: 1px solid var(--u-line); }
.feed__row--cols { height: 30px; border-top: 0; font-size: 12px; color: var(--u-muted); background: var(--u-fill); border-radius: 8px; }
.feed__window { height: calc(var(--row) * 5); overflow: hidden; }
.feed__rows { list-style: none; margin: 0; padding: 0; }
.feed__rows.is-sliding { transition: translate .55s var(--u-ease); }
.feed__row > span:first-child { color: var(--u-ink); font-weight: 500; }
.feed__color { display: inline-flex; align-items: center; gap: 7px; }
.feed__color i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.feed__row > :last-child { text-align: right; }
.feed__time { font: 400 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--u-muted); }
.feed__row.is-new { animation: feed-new 1.6s ease-out; }
@keyframes feed-new { from { background: #e1f4fa; } to { background: transparent; } }
.feed__note { padding-top: 10px; border-top: 1px solid var(--u-line); font-size: 12px; color: var(--u-muted); }
@media (max-width: 639px) { .feed { padding: 14px 14px 10px; } .feed__row { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .feed__live::before { animation: none; } }

/* how: three numbered steps, then the formats marquee in ink at the h3 size */
.steps { list-style: none; padding: 0; margin: 0; }
.step { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.steps { row-gap: var(--s-7); }
/* the step number is drawn by CSS (a counter, styled as the kit's .step-num), so the heading's text
   is the title alone; it sits on the title's first line when the title wraps */
.steps { counter-reset: step; }
.step { counter-increment: step; }
.step h3 { display: flex; align-items: baseline; gap: var(--s-3); }
.step h3::before { content: counter(step); flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 var(--t-small)/1 var(--font-text); font-variant-numeric: tabular-nums; translate: 0 -0.2em; }
.step p { font-size: var(--t-lead); }
html[lang="en"] .formats { margin-top: var(--s-10); }
@media (min-width: 640px) and (max-width: 1023px) { .steps > .step { grid-column: auto / span 6; } }
.formats { margin-top: var(--s-9); display: grid; gap: var(--s-3); overflow: clip; }
.formats > * { min-width: 0; }
.formats .mo-mq__track li { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); color: var(--ink); }

/* sections size to their content instead of the kit's one section per screen (system.css), which left
   empty bands under short sections; the hero still fills the first screen and the close its own */
main > :is(section, .section):not(.hero, .section--hero) { height: auto; min-height: 0; }

/* a phone: the language word lives in the footer, so the bar keeps the logo, button and toggle */
@media (max-width: 639px) { .nav__lang { display: none; } }
@media (max-width: 359px) { .nav__actions .btn { display: none; } }

/* English headings at 600: Urbanist at the kit's 500 read lighter than Prompt 500 on the Thai page */
html[lang="en"] { --display-weight: 600; }

/* Thai: Prompt first (Urbanist has no Thai, so Thai text fell back mid-word next to lighter Latin),
   no negative tracking, room for the marks above and below, and phrases kept on one line (keep.ts) */
html[lang="th"] { --font-display: "Prompt", "Urbanist", system-ui, sans-serif; --font-text: "Prompt", "Urbanist", system-ui, sans-serif; --display-tracking: 0; --display-tracking-xl: -0.01em; }
html[lang="th"] :is(h1, h2) { line-height: 1.3; }
/* element-level only, so a kit class with its own line-height (the closing word) keeps it */
:where(html[lang="th"]) :is(h3, p, dd, li) { line-height: 1.6; }
.nw { white-space: nowrap; }
:is(h1, h2) { text-wrap: balance; }
:is(p, dd) { text-wrap: pretty; }

/* closing: the contact links (only once filled in) beside the main button, so the one-screen close keeps its height */
.closing__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; white-space: nowrap; align-items: center; gap: var(--s-4) var(--s-5); }
/* who is behind the page, under the button: the registered company and where it is */
.closing__company { flex-basis: 100%; margin: 0; text-align: right; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 639px) { .closing__actions { justify-content: flex-start; } .closing__company { text-align: left; } }

/* #billboards: real tathep billboards in a row that scrolls sideways (snap, the next card peeking) */
.proof .section-head { margin-bottom: var(--s-6); }
.proof__row { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: var(--s-5); margin: 0; padding: 0 0 var(--s-4); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.proof__row:focus-visible { outline: 2px solid #02a6d5; outline-offset: 4px; border-radius: 4px; }
.proof__card { scroll-snap-align: start; display: grid; gap: 4px; align-content: start; }
.proof__card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: var(--s-3); background: var(--surface); }
.proof__name { margin: 0; font: 600 16px/1.35 var(--font-text); color: var(--ink); }
.proof__area { margin: 0; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 639px) { .proof__row { grid-auto-columns: 78%; gap: var(--s-4); } }

/* the closing word's tight setting is tuned to Urbanist's line metrics: keep that stack for it */
html[lang="th"] .close__word { font-family: "Urbanist", "Prompt", system-ui, sans-serif; }