/* Adapted from the approved site-proposal-2026-11-10/site.css: preserve the approved composition and interaction. Production routes, accessibility and language changes stay here. */

@import url("tokens-semantic.css");

:root {
  --font-sans: var(--rikyu-font-sans);
  --font-serif: var(--rikyu-font-serif);
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh);
  overflow-wrap: anywhere;
}
:lang(th) body, body:lang(th) { line-height: 1.75; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }


.site-head { border-bottom: 1px solid var(--border); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.logo img { width: 132px; }
.nav { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; font-size: var(--t-label-size); }
.nav a { text-decoration: none; color: var(--muted-foreground); padding: var(--space-1) 0; }
.nav a[aria-current="page"] { color: var(--foreground); box-shadow: inset 0 -1px 0 var(--foreground); }
.nav .lang { font-family: var(--font-mono); font-size: var(--t-small-size); }
.nav .signin { border: 1px solid var(--input); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); color: var(--foreground); }


.kicker { font-family: var(--font-mono); font-size: var(--t-kicker-size); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 var(--space-3); }
h1, h2, h3 { font-weight: 700; margin: 0; text-wrap: balance; }
.display { font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); }
.h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); }
.h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); }
.h3 { font-size: var(--t-section-size); line-height: var(--t-section-lh); }
.lede { font-size: var(--t-lede-size); line-height: var(--t-lede-lh); max-width: var(--rikyu-measure-max); color: var(--muted-foreground); margin: var(--space-4) 0 0; }
.prose { max-width: var(--rikyu-measure-max); }
.prose p { margin: 0 0 var(--space-3); }
.muted { color: var(--muted-foreground); }
.serif { font-family: var(--font-serif); font-weight: 400; }
.hl { background: linear-gradient(transparent 62%, var(--rikyu-sabi) 62%); }


.sec { padding: var(--space-8) 0; border-top: 1px solid var(--border); }
.sec:first-of-type { border-top: 0; }
.hero { padding: clamp(64px, 12vw, 160px) 0 var(--space-8); }
.split { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 4fr 8fr; } }


.ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg); padding: 0 var(--space-4); border-radius: var(--radius-full); text-decoration: none; font-weight: 500; font-size: var(--t-label-size); border: 1px solid var(--primary); transition: background var(--dur-fast) var(--ease); }
.btn.primary { background: var(--primary); color: var(--primary-foreground); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.ghost { background: transparent; color: var(--foreground); border-color: var(--input); }
.btn.ghost:hover { background: var(--overlay-hover); }
.btn svg { width: 16px; height: 16px; }


.steps { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); } }
.steps li { border-top: 1px solid var(--foreground); padding-top: var(--space-3); }
.steps .n { font-family: var(--font-mono); font-size: var(--t-small-size); color: var(--muted-foreground); }
.steps h3 { margin: var(--space-2) 0; }
.steps p { margin: 0; font-size: var(--t-body-size); color: var(--muted-foreground); }
.steps .lands { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--t-small-size); color: var(--foreground); }


.decide { display: grid; gap: 0; margin-top: var(--space-6); grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--foreground); }
@media (min-width: 700px) { .decide { grid-template-columns: repeat(3, 1fr); } }
.decide div { padding: var(--space-4) var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-width: 0; }
.decide .w { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.01em; }
.decide .n { display: block; font-family: var(--font-mono); font-size: var(--t-small-size); color: var(--muted-foreground); margin-bottom: var(--space-2); }
.decide .is-build { background: var(--rikyu-stone); }


.svc-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.svc { display: grid; gap: var(--space-3) var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--border); grid-template-columns: 1fr; }
@media (min-width: 900px) { .svc { grid-template-columns: 4fr 8fr; } }
.svc .meta { display: flex; gap: var(--space-3); align-items: baseline; font-family: var(--font-mono); font-size: var(--t-small-size); color: var(--muted-foreground); }
.svc .meta b { color: var(--foreground); font-weight: 500; }
.svc h3 { margin-top: var(--space-2); font-size: clamp(19px, 2vw, 24px); line-height: 1.35; }
.svc p { margin: 0; color: var(--muted-foreground); max-width: var(--rikyu-measure-max); }
.go { margin-top: var(--space-3); display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--foreground); }
.go svg { width: 14px; height: 14px; }
.dl { display: grid; gap: var(--space-4) var(--space-6); margin: var(--space-4) 0 0; grid-template-columns: 1fr; }
@media (min-width: 700px) { .dl { grid-template-columns: 1fr 1fr; } }
.dl dt { font-family: var(--font-mono); font-size: var(--t-small-size); }
.dl dd { margin: var(--space-2) 0 0; font-size: var(--t-body-size); color: var(--muted-foreground); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ticks li { display: flex; gap: var(--space-3); }
.ticks li::before { content: ""; flex: 0 0 12px; height: 1px; margin-top: .85em; background: var(--foreground); }






.case-shape { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin: var(--space-6) 0 var(--space-4); padding: 0; list-style: none; }
@media (min-width: 900px) { .case-shape { grid-template-columns: repeat(4, 1fr); } }
.case-shape li { border-left: 1px solid var(--foreground); padding: var(--space-1) var(--space-3); }
.case-shape b { display: block; }
.case-shape span { font-size: var(--t-small-size); color: var(--muted-foreground); }


.apps { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.app { display: grid; gap: var(--space-2) var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border); grid-template-columns: 1fr; align-items: baseline; }
@media (min-width: 900px) { .app { grid-template-columns: 3fr 6fr 3fr; } }
.app h3 { font-size: var(--t-section-size); }
.app p { margin: 0; color: var(--muted-foreground); font-size: var(--t-body-size); }
.app .where { font-family: var(--font-mono); font-size: var(--t-small-size); }
.status { display: inline-block; font-family: var(--font-mono); font-size: var(--t-small-size); border: 1px solid var(--input); border-radius: var(--radius-full); padding: 0 var(--space-2); margin-left: var(--space-2); }
.status.live { background: var(--rikyu-kuro); color: var(--rikyu-shiro); border-color: var(--rikyu-kuro); }


.band-dark { background: var(--rikyu-kuro); color: var(--rikyu-shiro); padding: var(--space-8) 0; }
.band-dark .muted, .band-dark .kicker { color: color-mix(in srgb, var(--rikyu-shiro) 74%, var(--rikyu-kuro)); }
.band-dark .btn.primary { background: var(--rikyu-shiro); color: var(--rikyu-kuro); border-color: var(--rikyu-shiro); }
.band-dark .btn.ghost { color: var(--rikyu-shiro); border-color: var(--rikyu-nezumi); }


.site-foot { padding: var(--space-7) 0 var(--space-6); font-size: var(--t-small-size); color: var(--muted-foreground); border-top: 1px solid var(--border); }
.site-foot .cols { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .site-foot .cols { grid-template-columns: 4fr 2fr 2fr 2fr; } }
.site-foot h4 { margin: 0 0 var(--space-2); font-size: var(--t-small-size); color: var(--foreground); font-weight: 500; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-foot a { text-decoration: none; }
.site-foot .legal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.crumb { font-family: var(--font-mono); font-size: var(--t-small-size); color: var(--muted-foreground); margin: 0 0 var(--space-4); }
.crumb a { text-decoration: none; }