/* แต้มดี — landing for shop owners.
   Section grammar follows taemdee.com: centred composition, a pill badge above every
   section heading, one coloured word inside the heading, big rounded panels holding
   real product screenshots, and dark bands for the mission and the closing ask.
   Visual language comes from design/index.html and design/ux.html, not from a template:
   ZERO border-radius (the prototypes use none anywhere), flat solid blocks instead of
   tinted panels, white cards on the paper tone, Pridi numerals with tight negative
   tracking, and the exact token set below. Blue stays contained in those blocks so it
   reads as a chosen surface, never as a wash over the whole page. */

:root {
  /* Verbatim from design/index.html */
  --paper: #f6f8fe;
  --soft: #edf2ff;
  --ink: #0b1b55;
  --muted: #5a6c99;
  --line: #d9e3f7;
  --coral: #f08a5d;
  --coral-pale: #fff0e6;
  --coral-ink: #b5512b;
  --wine: #1d3fd1;
  --wine-pale: #e3e9ff;
  --pink: #c7d2fe;
  --mint: #d7f0e6;
  --mint-ink: #1b6d50;
  --butter: #ffe2b8;
  --studio: #071a57;
  /* Local aliases so the rules below read in intent, not in hue */
  --card: #fff;
  --accent: var(--wine);
  --accent-ink: #0f2ba6;
  --accent-soft: var(--wine-pale);
  --coral-soft: var(--coral-pale);
  --head: var(--ink);
  --band: var(--studio);
  --band-card: #0f2470;
  --band-text: #d5ddf5;
  --band-mute: #93a3d8;
  --shadow: rgba(15, 47, 100, .08);
  --shadow-lift: rgba(10, 30, 58, .18);
  --measure: 60ch;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Sarabun", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

h1, h2, h3 {
  color: var(--head);
  font-family: "Pridi", Georgia, "Noto Serif Thai", serif;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.035em;
  margin: 0;
}
h1 { font-size: clamp(40px, 6.6vw, 68px); letter-spacing: -.045em; line-height: 1.06; }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: 20px; letter-spacing: -.025em; }
p { margin: 0 0 16px; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; }

.shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
section { padding: 92px 0; position: relative; scroll-margin-top: 72px; }
.lede { font-size: 19px; color: var(--muted); max-width: var(--measure); margin: 16px auto 0; }
.note { font-size: 14px; color: var(--muted); line-height: 1.65; }
.centre { text-align: center; }
.accent { color: var(--coral-ink); }

/* --- top bar --- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: rgba(246, 248, 254, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in { max-width: 1080px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: "Pridi", serif; font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
/* The mark stands alone next to the wordmark — no container, per design/logo.html */
.mark { width: 26px; height: 26px; flex: none; color: var(--coral); }
.wm-text { display: inline-block; }
.band .mark, .on-dark .mark { color: var(--coral); }
.wordmark span { color: var(--accent); }
.top nav { display: flex; gap: 22px; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--accent); }

/* --- badge above every section heading --- */
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  padding: 7px 16px 7px 12px;
  background: var(--band); color: #fff; font-size: 14px; font-weight: 600;
}
.badge::before { content: ""; width: 9px; height: 9px; background: var(--coral); }
.badge em { font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .16em; color: var(--band-mute); padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .24); }
.band .badge { background: rgba(255, 255, 255, .1); }
.band .badge em { color: var(--butter); border-left-color: rgba(255, 255, 255, .2); }

/* --- buttons --- */
.btn {
  display: inline-block; padding: 15px 28px; font: inherit; font-weight: 600;
  text-decoration: none; border: 1.5px solid var(--wine); cursor: pointer;
  background: var(--wine); color: #fff; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.plain { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.plain:hover { background: var(--card); border-color: var(--ink); }
.band .btn { background: var(--coral); border-color: var(--coral); }
.band .btn:hover { background: var(--coral-ink); border-color: var(--coral-ink); }
.band .btn.plain { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.band .btn.plain:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.under-cta { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.centre .cta-pair, .hero .cta-pair { justify-content: center; }

/* --- hero --- */
.hero { padding: 76px 0 88px; text-align: center; position: relative; overflow: hidden; }
.hero h1 { max-width: 22ch; margin: 0 auto; font-size: clamp(34px, 5.4vw, 56px); }
.hero .sub { font-size: 19px; color: var(--muted); max-width: 58ch; margin: 20px auto 0; }
.hero mark { background: linear-gradient(transparent 58%, var(--butter) 58%); color: inherit; padding: 0 .08em; white-space: nowrap; }
.glow { display: none; }

/* The receipt: this product's actual subject, drawn in CSS, not stock art. */
.receipt-stage { display: flex; justify-content: center; margin-top: 46px; }
.receipt {
  --tear: var(--paper);
  position: relative; width: 100%; max-width: 320px; padding: 30px 26px 34px;
  background: #fff; color: #3c4a6b; transform: rotate(-1.4deg); text-align: left;
  box-shadow: 0 12px 30px var(--shadow);
  font-family: var(--mono); font-size: 13px; line-height: 1.9;
}
.receipt::before, .receipt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background:
    linear-gradient(45deg, var(--tear) 50%, transparent 50%) 0 0 / 14px 9px repeat-x,
    linear-gradient(-45deg, var(--tear) 50%, transparent 50%) 0 0 / 14px 9px repeat-x;
}
.receipt::before { top: 0; transform: scaleY(-1); }
.receipt::after { bottom: 0; }
.receipt .shopline { text-align: center; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.receipt .meta { text-align: center; color: var(--muted); font-size: 11px; line-height: 1.6; }
.receipt hr { border: 0; border-top: 1px dashed var(--line); margin: 14px 0; }
.receipt .item { display: flex; justify-content: space-between; gap: 12px; }
.receipt .total { display: flex; justify-content: space-between; font-weight: 700; color: var(--ink); font-size: 15px; }
.receipt .stamp {
  margin: 20px auto 0; width: fit-content; padding: 7px 16px;
  border: 2.5px solid var(--coral); color: var(--coral-ink);
  font-family: "Pridi", serif; font-size: 19px; font-weight: 500; line-height: 1.2;
  transform: rotate(-6deg); text-align: center;
  animation: stamp .5s cubic-bezier(.2, 1.5, .5, 1) .55s both;
}
.receipt .stamp small { display: block; font-size: 11px; letter-spacing: .06em; }
@keyframes stamp { from { opacity: 0; transform: rotate(-16deg) scale(1.5); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* --- the big panel that carries a real screenshot --- */
.panel-card {
  display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center;
  margin-top: 44px; padding: 44px 48px; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 5px 14px var(--shadow);
}
.panel-card.flip { grid-template-columns: auto 1fr; }
.panel-card h3 { font-size: 26px; margin-bottom: 16px; }
.ticks { margin: 0 0 26px; padding: 0; }
.ticks li { list-style: none; position: relative; padding: 9px 0 9px 34px; font-size: 16px; border-top: 1px solid var(--line); }
.ticks li:first-child { border-top: 0; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 12px;
  width: 20px; height: 20px; background: var(--coral); color: #fff;
  font-size: 12px; line-height: 20px; text-align: center; font-weight: 700;
}

/* --- phone mockup --- */
.phone { width: 268px; border: 7px solid #101820; background: #101820; box-shadow: 0 34px 74px var(--shadow-lift), 0 0 0 1px #dce7f5; flex: none; }
.phone img { display: block; width: 100%; height: auto; }
.phone-solo { display: flex; justify-content: center; margin-top: 44px; }
.phone-pair { display: flex; justify-content: center; gap: 28px; margin-top: 48px; }
.shot { margin: 0; }
.shot figcaption { margin-top: 14px; color: var(--muted); font-size: 13.5px; text-align: center; }
.phone-pair .shot:nth-child(2) { margin-top: 34px; }

/* --- feature row --- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; text-align: left; }
.features div { padding: 26px 24px; background: var(--card); border: 1px solid var(--line); }
.features b { display: block; font-family: "Pridi", serif; font-size: 21px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 6px; }
.features p { margin: 0; font-size: 15px; color: var(--muted); }

/* --- dark bands --- */
.band { background: var(--band); color: #fff; }
.band h1, .band h2, .band h3 { color: #fff; }
section.band + section, section + section.band { border-top: 0; }
.band .lede { color: var(--band-text); }
.band h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
/* On navy a highlighter bar goes muddy — colour the line instead. */
.band mark { background: none; color: var(--butter); }
.band .beliefs + .oops, .band .beliefs + .form { margin-top: 40px; }
.beliefs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; text-align: left; }
.beliefs div { padding: 26px 24px; background: var(--band-card); border: 1px solid rgba(255, 255, 255, .09); }
.beliefs .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--band-mute); }
.beliefs b { display: block; font-family: "Pridi", serif; font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -.03em; margin: 10px 0 8px; color: var(--butter); }
.beliefs p { margin: 0; font-size: 15px; color: var(--band-mute); }

/* --- steps (a real sequence) --- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; text-align: left; }
.steps li { list-style: none; padding: 28px 26px; background: var(--card); border: 1px solid var(--line); }
.steps li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  color: var(--coral-ink); margin-bottom: 14px;
}
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: 15.5px; color: var(--muted); margin: 0; }

/* --- honest list (anti-fraud) --- */
.rules { max-width: 780px; margin: 40px auto 0; padding: 26px 30px; text-align: left; background: var(--card); border: 1px solid var(--line); }
.rules li { list-style: none; padding: 15px 0 15px 34px; border-top: 1px solid var(--line); position: relative; font-size: 16px; }
.rules li:first-child { border-top: 0; }
.rules li::before { content: ""; position: absolute; left: 0; top: 22px; width: 14px; height: 14px; background: var(--mint); border: 1.5px solid var(--mint-ink); }

/* --- price --- */
.price-card {
  max-width: 820px; margin: 44px auto 0; padding: 44px 48px; text-align: left;
  display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: start;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 5px 14px var(--shadow);
}
.price { padding: 30px 34px; background: var(--band); color: #fff; }
/* Pridi's ฿ collides with the next digit at heavy negative tracking — keep it light here. */
.price .amount { font-family: "Pridi", serif; font-size: 64px; font-weight: 500; line-height: .9; letter-spacing: -.01em; }
.price .per { color: var(--band-mute); font-size: 15px; }
.price ul { margin: 20px 0 0; padding: 0; }
.price li { list-style: none; font-size: 15px; color: var(--band-text); padding: 5px 0 5px 20px; position: relative; }
.price li::before { content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 2px; background: var(--coral); }

/* --- faq --- */
.faq { max-width: 760px; margin: 40px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--coral); font-weight: 700; }
.faq details[open] summary::before { content: "–"; }
.faq details p { margin: 0 0 20px 28px; color: var(--muted); font-size: 16px; }

/* --- lead form (inside the closing band) --- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; margin: 32px auto 0; text-align: left; }
.form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--band-text); }
.form .full { grid-column: 1 / -1; }
.form input, .form textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 13px 15px;
  border: 1.5px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff;
}
.form input::placeholder, .form textarea::placeholder { color: var(--band-mute); }
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form textarea { min-height: 84px; resize: vertical; }
.form .btn { justify-self: center; }
/* One real question, one optional — a shop owner is standing at the counter. */
.form.one { max-width: 460px; }
.form .opt { font-weight: 400; color: var(--band-mute); }
.band .note { color: var(--band-mute); text-align: center; max-width: 620px; margin: 14px auto 0; }
.said { max-width: 620px; margin: 32px auto 0; padding: 26px 28px; background: var(--mint); color: var(--ink); }
.said h3 { color: var(--mint-ink); margin-bottom: 6px; }
.said p { margin: 0; }
.oops { max-width: 620px; margin: 24px auto 0; padding: 14px 18px; background: var(--coral-pale); border: 1px solid #ffd9c2; color: var(--coral-ink); }
.reassure { margin-top: 22px; font-size: 14px; color: var(--band-mute); }

/* --- footer --- */
footer { padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
footer .shell { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }

/* Short pages (thanks) keep the footer at the bottom instead of floating mid-screen. */
body.short { min-height: 100dvh; display: flex; flex-direction: column; }
body.short > * { width: 100%; }
body.short main { flex: 1; display: flex; align-items: center; }
body.short main section { width: 100%; }

@media (max-width: 900px) {
  section { padding: 62px 0; }
  .hero { padding: 48px 0 60px; }
  .hero h1 { font-size: clamp(27px, 7.4vw, 38px); max-width: 20ch; }
  .hero .sub { font-size: 17px; }
  .panel-card, .panel-card.flip { grid-template-columns: 1fr; gap: 34px; padding: 32px 26px; justify-items: center; }
  .panel-card .copy { width: 100%; }
  .features, .beliefs, .steps, .form { grid-template-columns: 1fr; }
  .price-card { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; }
  .top nav { display: none; }
  .phone { width: 240px; }
  .phone-pair { flex-direction: column; align-items: center; gap: 32px; }
  .phone-pair .shot:nth-child(2) { margin-top: 0; }
}