/* /how-to/: the step-by-step guide. Rides on legal.css (tokens, running head, foot, light/dark) and only lays out the steps:
   a contents line under the heading, then each step as a spread — words on the left (they hold still), the real screens right. */
.howto { width:min(100% - 40px, 1120px); margin:0 auto; padding:clamp(52px, 8vw, 104px) 0 80px; }
.howto-head { max-width:760px; }
/* the six steps, as the contents of the page: numbered, ruled apart */
.howto-toc { display:flex; flex-wrap:wrap; gap:0; margin:-10px 0 8px; border-top:1px solid var(--ink); counter-reset:toc; }
.howto-toc a {
  display:inline-flex; align-items:center; min-height:48px; padding:0 18px 0 0; margin-right:18px;
  border-right:1px solid var(--line); font-size:.92rem; text-decoration:none; color:var(--muted);
  transition:color .25s var(--ease);
}
.howto-toc a:last-child { border-right:0; margin-right:0; }
.howto-toc a:hover { color:var(--ink); }

.step { display:grid; gap:28px; padding:clamp(44px, 6vw, 84px) 0; border-bottom:1px solid var(--line); scroll-margin-top:80px; }
.step-n { display:flex; align-items:center; gap:12px; margin:0 0 10px; color:var(--ink); font-size:.86rem; font-weight:500; letter-spacing:0; }
.step-n::after {
  content:""; width:38px; height:9px; opacity:.55;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat;
}
.step h2 { margin:0 0 14px; font:300 clamp(1.8rem, 4vw, 2.6rem)/1.32 var(--serif); }
.step-copy p { margin:10px 0; }
.step-tip { padding:14px 18px; border-left:2px solid var(--ink); background:var(--tint); color:var(--muted); font-size:.95rem; }
.step-list { margin:14px 0 0; padding-left:0; list-style:none; }
.step-list li { position:relative; padding-left:1.25rem; }
.step-list li::before { content:""; position:absolute; left:0; top:.92em; width:.55rem; height:1px; background:var(--soft); }
.step-list li + li { margin-top:8px; }

.step-media { display:grid; gap:18px; justify-items:center; align-items:start; }
.step-media--pair, .step-media--wide, .step-media--docs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.step-media figure { margin:0; width:100%; }
.step-media img, .step-media video, .result-shot img { display:block; width:100%; height:auto; }
figcaption { margin-top:12px; color:var(--muted); font-size:.84rem; line-height:1.6; text-align:center; }

/* a phone screen: the real screenshot in the same obsidian body the front page draws */
.phone-shot { max-width:300px; }
.phone-shot img, .phone-shot video { border:7px solid #1C1C1C; border-radius:30px; background:var(--panel); box-shadow:0 30px 54px -30px rgb(0 0 0 / .5), 0 10px 22px -16px rgb(0 0 0 / .3); }
.phone-shot--small { max-width:220px; }
/* a finished clip: it draws its own phone, so no second body around it — rounded paper corners and the same shadow */
.film-shot { max-width:320px; }
.film-shot video { border-radius:18px; background:var(--panel); box-shadow:0 30px 54px -30px rgb(0 0 0 / .45), 0 10px 22px -16px rgb(0 0 0 / .25); }
/* a computer screen: square corners, a hairline */
.desk-shot img, .desk-shot video { border:1px solid var(--line); border-radius:4px; box-shadow:0 26px 48px -32px rgb(0 0 0 / .45); }

.result-shot { margin:8px 0 0; grid-column:1 / -1; }
.result-shot img { border-radius:2px; }
.result-shot figcaption { text-align:left; }
.ai-tag { display:inline-block; margin-right:8px; padding:1px 9px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:.74rem; }

.howto-end { padding:clamp(48px, 6vw, 84px) 0 0; max-width:760px; }
.howto-end h2 { margin:0 0 10px; font:300 clamp(1.8rem, 4vw, 2.6rem)/1.32 var(--serif); }

@media (max-width:600px) {
  .howto { width:min(100% - 40px, 1120px); padding-top:44px; }
  .howto-toc a { padding-right:14px; margin-right:14px; }
  .step-media--wide, .step-media--docs { grid-template-columns:1fr; }
  .phone-shot { max-width:260px; }
  .step-media--pair .phone-shot { max-width:none; }
  .step-media--pair .phone-shot img, .step-media--pair .phone-shot video { border-width:5px; border-radius:22px; }
  .phone-shot--small { max-width:240px; }
  .howto-film .step-media--pair .film-shot video { border-radius:14px; }
}
@media (min-width:900px) {
  .step { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:64px; align-items:start; }
  .step-media--wide { grid-template-columns:minmax(0, 1fr) minmax(0, 2.4fr); align-items:center; }
  .step-media--docs, .result-shot { grid-column:1 / -1; }
  .step-media--docs { grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); }
  #s6 .step-media:not(.step-media--docs) { align-self:start; }
}
/* the tutorial series: words above, the five episodes in one row under them on a computer, three then two on a tablet,
   two a row on a phone (the fifth centred) */
.step-media--series { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:600px) {
  .step-media--series figure:last-child { grid-column:1 / -1; max-width:calc(50% - 9px); }
  .howto-series .film-shot video { border-radius:14px; }
}
@media (min-width:601px) { .step-media--series { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:900px) {
  .howto-series { grid-template-columns:1fr; gap:36px; }
  .howto-series .step-copy { max-width:760px; }
  .step-media--series { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }
}

/* the cabinet techniques: words above, then one ruled row per technique, numbered. The loop gets the width (its labels are the
   app's own, about 0.7 of the recorded 1024 on a computer), what to press sits beside it; stacked on a tablet and a phone */
.tip-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); counter-reset:tip; }
.tip { counter-increment:tip; display:grid; gap:18px; padding:28px 0; border-bottom:1px solid var(--line); }
.tip:last-child { border-bottom:0; padding-bottom:0; }
.tip figure { margin:0; }
.tip video { display:block; width:100%; height:auto; background:var(--panel); }
.tip-copy h3 { display:flex; align-items:baseline; gap:12px; margin:0 0 8px; font:300 clamp(1.3rem, 2.6vw, 1.6rem)/1.4 var(--serif); }
.tip-copy h3::before { content:counter(tip, decimal-leading-zero); font:italic 400 1.15rem/1 var(--display); color:var(--soft); }
.tip-copy p { margin:8px 0 0; color:var(--muted); font-size:.95rem; line-height:1.75; }
/* its head: the words, and the finished unit turning beside them on a computer (under them on a tablet and a phone) */
.tips-head { display:grid; gap:24px; }
.tips-cover { margin:0; }
.tips-cover video { display:block; width:100%; height:auto; background:var(--panel); }
@media (min-width:900px) {
  .howto-tips { grid-template-columns:1fr; gap:36px; }
  .tips-head { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:64px; align-items:center; }
  .tip { grid-template-columns:minmax(0, 2.2fr) minmax(0, 1fr); gap:40px; align-items:center; padding:36px 0; }
}

/* the questions at the end of /boq/ and /built-in/ (pages that ride on this layout) */
.faq-list { margin:0; max-width:680px; }
.faq-list dt { margin:0 0 8px; font:400 clamp(1.1rem, 2.2vw, 1.3rem)/1.5 var(--serif); }
.faq-list dd { margin:0 0 22px; padding-bottom:22px; border-bottom:1px solid var(--line); color:var(--muted); }
.faq-list dd:last-child { margin-bottom:0; border-bottom:0; }
/* /glossary/: one ruled entry per word like the questions above; a link to /glossary/#word lands on its dt */
.gloss { margin:0; max-width:680px; }
.gloss dt { margin:0 0 8px; font:400 clamp(1.1rem, 2.2vw, 1.3rem)/1.5 var(--serif); scroll-margin-top:80px; }
.gloss dt:target { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.gloss dd { margin:0 0 22px; padding-bottom:22px; border-bottom:1px solid var(--line); color:var(--muted); }
.gloss dd:last-child { margin-bottom:0; border-bottom:0; }
.gloss-table { margin:16px 0 12px; }
.gloss-refs { margin:0; max-width:680px; padding-left:1.4rem; color:var(--muted); font-size:.95rem; }
.gloss-refs li + li { margin-top:8px; }
.nw { white-space:nowrap; } /* keeps a Thai phrase whole in a heading (styles.css has the same rule for the front page) */
html[lang="en"] .nw { white-space:normal; }

/* /guides/: the contents page — one ruled row per guide, numeral · title · what it covers */
.guide-list { list-style:none; margin:clamp(20px, 3vw, 36px) 0 0; padding:0; border-top:1px solid var(--ink); }
.guide-list li { border-bottom:1px solid var(--line); }
.guide-list a { display:grid; grid-template-columns:2.6rem minmax(0, 1fr); gap:6px 14px; padding:24px 0; text-decoration:none; color:inherit; }
.guide-n { grid-row:span 2; font:italic 400 1.35rem/1.25 var(--display); color:var(--soft); }
.guide-t { font:300 clamp(1.4rem, 3.4vw, 1.9rem)/1.35 var(--serif); }
.guide-d { color:var(--muted); font-size:.95rem; line-height:1.75; }
.guide-list a:hover .guide-t, .guide-list a:focus-visible .guide-t { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
@media (min-width:900px) {
  .guide-list a { grid-template-columns:4rem minmax(0, 5fr) minmax(0, 6fr); align-items:baseline; gap:0 32px; padding:30px 0; }
  .guide-n { grid-row:auto; }
}

/* calculators (/btu/): inputs, room-type chips, the answer, and a table of common sizes */
.calc { display:grid; gap:20px; margin:clamp(28px, 4vw, 48px) 0 0; padding:clamp(20px, 4vw, 40px); border:1px solid var(--line); background:var(--panel); }
.calc-h { margin:0; font:300 clamp(1.5rem, 3.4vw, 2rem)/1.3 var(--serif); }
.calc-fields { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; align-items:end; } /* a label that wraps (English) keeps the inputs in one line */
.calc-f { display:grid; gap:6px; font-size:.86rem; color:var(--muted); }
.calc-f input { box-sizing:border-box; width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:2px; background:var(--paper); color:var(--ink); font:400 1.2rem/1.2 var(--ui); }
.calc-f input:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.calc-chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; border:0; }
.calc-chips legend { margin-bottom:8px; padding:0; font-size:.86rem; color:var(--muted); }
.calc-chips label { position:relative; }
.calc-chips input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.calc-chips span { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:999px; font-size:.95rem; }
.calc-chips input:checked + span { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.calc-chips input:focus-visible + span { outline:2px solid var(--ink); outline-offset:2px; }
.calc-out { padding-top:18px; border-top:1px solid var(--ink); }
.calc-big { margin:0; font:300 clamp(2.6rem, 8vw, 4rem)/1 var(--display); font-variant-numeric:lining-nums; }
.calc-big small { font:400 1rem/1 var(--ui); color:var(--muted); }
.calc-sum { margin:10px 0 0; color:var(--muted); font-size:.95rem; }
.calc-units { display:grid; gap:10px; margin:18px 0 0; }
.calc-units div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.calc-units dt { color:var(--muted); }
.calc-units dd { margin:0; }
.calc-out.is-bad .calc-sum, .calc-out.is-bad .calc-units { opacity:.35; }
.calc-bad { margin:12px 0 0; font-weight:500; }
.calc-note { margin:0; color:var(--muted); font-size:.86rem; }
.calc-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.calc-table caption { margin-bottom:10px; color:var(--muted); font-size:.86rem; text-align:left; }
.calc-table th, .calc-table td { padding:12px 8px 12px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.calc-table thead th { border-bottom:1px solid var(--ink); font-weight:500; }
.calc-table td i { display:block; color:var(--muted); font-size:.84rem; font-style:normal; }
@media (max-width:600px) { .calc-fields { gap:8px; } .calc-f input { padding:10px 8px; font-size:1.1rem; } }
/* the tile plan: the room in paper, whole tiles light, cut tiles toned, slivers outlined hard */
.tile-plan { margin:20px 0 0; }
.tile-plan svg { display:block; width:100%; max-height:420px; }
.tile-plan .tp-room { fill:var(--paper); stroke:var(--ink); stroke-width:.03; }
.tile-plan polygon { stroke:var(--soft); stroke-width:.008; }
.tile-plan .tp-full { fill:var(--panel); }
.tile-plan .tp-cut { fill:var(--tint); }
.tile-plan .tp-sl { fill:var(--tint); stroke:var(--ink); stroke-width:.03; }
.tile-plan figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px 10px; text-align:left; }
.tp-k { display:inline-block; width:14px; height:14px; border:1px solid var(--soft); vertical-align:middle; }
.tp-k.tp-cut { background:var(--tint); }
.tp-k.tp-sl { background:var(--tint); border:2px solid var(--ink); }
/* the light map (/lighting/): light on a dark floor, the same in both themes, as a light map reads */
.lux-plan { margin:20px 0 0; }
.lux-plan svg { display:block; width:100%; max-height:420px; }
.lux-plan .lx-room { fill:#1C1C1C; stroke:#1C1C1C; stroke-width:.04; }
.lux-plan .lx-cell { fill:#F7F5F1; }
.lux-plan .lx-dl { fill:#1C1C1C; stroke:#F7F5F1; stroke-width:.02; }
.calc-table th i { display:block; color:var(--muted); font-size:.78rem; font-style:normal; font-weight:400; }
/* /styles/: the thirteen render styles, each with the three swatches its card in the app shows (STYLE_SW) */
.style-list { list-style:none; width:100%; margin:0; padding:0; border-top:1px solid var(--ink); }
.style-list li { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 16px; padding:18px 0; border-bottom:1px solid var(--line); }
.style-list h3 { margin:0; font:300 clamp(1.25rem, 2.6vw, 1.5rem)/1.35 var(--serif); }
.style-list h3 i { display:block; color:var(--soft); font:italic 400 .92rem/1.5 var(--display); }
html[lang="en"] .style-list h3 i { display:none; } /* the English page already names the style in the heading */
.style-sw { display:flex; align-self:start; margin-top:6px; }
.style-sw b { width:22px; height:22px; box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1); }
.style-list p { grid-column:1 / -1; margin:0; color:var(--muted); font-size:.95rem; line-height:1.75; }
/* /sample/: the sample set from the app — two files to download, the sheets inside, why they stay one set, then a dark
   band that ends on the brand signature. Printed paper keeps its colour in dark mode (a sheet is a physical thing). */
.sample-page { display:block; }
.sample-page > .howto { padding-bottom:0; }
.sample-head { max-width:760px; }
.sample-head .legal-lede { margin-bottom:clamp(28px, 4vw, 44px); }
.dl-list { list-style:none; display:grid; gap:40px; margin:0; padding:0; }
.dl a { display:grid; gap:18px; color:inherit; text-decoration:none; }
/* the set: the sheet on top, two more sheets' edges behind it */
.dl-paper { position:relative; display:block; margin:0 10px 10px 0; }
.dl-paper img { position:relative; z-index:2; display:block; width:100%; height:auto; aspect-ratio:1600 / 1131; object-fit:cover;
  background:#FFFFFF; border:1px solid rgb(167 163 156 / .55); box-shadow:0 26px 48px -32px rgb(0 0 0 / .45); transition:transform .5s var(--ease); }
.dl-paper::before, .dl-paper::after { content:""; position:absolute; inset:0; background:#FBFAF7; border:1px solid rgb(167 163 156 / .55); }
.dl-paper::before { z-index:0; transform:translate(10px, 10px); }
.dl-paper::after { z-index:1; transform:translate(5px, 5px); }
.dl a:hover .dl-paper img, .dl a:focus-visible .dl-paper img { transform:translate(-3px, -3px); }
.dl-body { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:4px 16px; padding-top:14px; border-top:1px solid var(--ink); }
.dl-t { grid-column:1; font:300 clamp(1.6rem, 4.6vw, 2.1rem)/1.3 var(--serif); }
.dl-meta { grid-column:1; display:flex; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:.92rem; line-height:1.6; }
.dl-meta > span + span::before { content:""; display:inline-block; width:1px; height:.9em; margin:0 10px; vertical-align:-.1em; background:var(--soft); }
.dl-meta [data-pages], .dl-meta [data-size] { font-variant-numeric:lining-nums tabular-nums; }
.dl-from { grid-column:1; color:var(--muted); font-size:.86rem; }
.dl-go {
  grid-column:2; grid-row:1 / span 3; align-self:center; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px;
  border-radius:999px; background:var(--ink); color:var(--paper); font-weight:500; font-size:.95rem; white-space:nowrap; transition:background-color .3s var(--ease);
}
/* the arrow is a dimension line turned down: a hairline and its tick */
.dl-go::after { content:""; width:9px; height:14px; opacity:.85;
  background:linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.dl a:hover .dl-go { background:#3D3D3D; }
.sample-try { margin:clamp(32px, 4vw, 44px) 0 0; }
.sample-try a { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:2px 16px; padding:16px 0; border-block:1px solid var(--line); text-decoration:none; transition:padding .3s var(--ease); }
.sample-try a::after { content:""; grid-column:2; grid-row:1 / span 2; width:34px; height:9px; opacity:.6; transition:width .3s var(--ease);
  background:linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat; }
.sample-try a:hover::after { width:44px; }
.sample-try-t { font:400 clamp(1.15rem, 3vw, 1.3rem)/1.5 var(--serif); }
.sample-try-d { color:var(--muted); font-size:.9rem; line-height:1.6; }

.sample-sec { padding:clamp(56px, 7vw, 96px) 0 0; scroll-margin-top:80px; }
.sample-folio { display:flex; align-items:center; gap:12px; margin:0 0 12px; font-size:.86rem; font-weight:500; }
.sample-folio i { font:italic 400 1.15rem/1 var(--display); }
.sample-folio i::after { content:""; display:inline-block; width:38px; height:9px; margin-left:12px; opacity:.55; vertical-align:middle;
  background:linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat; }
.sample-sec h2 { margin:0 0 12px; max-width:760px; font:300 clamp(1.8rem, 4vw, 2.6rem)/1.32 var(--serif); }
.sample-sec > p { max-width:640px; margin:0; color:var(--muted); }

/* the sheets: a sideways strip on a phone (one sheet and the edge of the next), four across on a computer */
.sheet-rail { list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:84%; gap:14px; margin:26px -20px 0; padding:4px 20px 14px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:20px; scrollbar-width:none; }
.sheet-rail::-webkit-scrollbar { display:none; }
.sheet-rail li { scroll-snap-align:start; min-width:0; }
.sheet-rail figure { margin:0; }
.sheet-rail a { display:block; color:inherit; text-decoration:none; }
.sheet-rail img { display:block; width:100%; height:auto; aspect-ratio:1600 / 1131; background:#FFFFFF; border:1px solid rgb(167 163 156 / .55);
  box-shadow:0 18px 36px -28px rgb(0 0 0 / .45); transition:transform .4s var(--ease); }
.sheet-rail a:hover img { transform:translateY(-3px); }
.sheet-rail figcaption, .deck-grid figcaption { display:flex; align-items:baseline; gap:10px; margin-top:12px; text-align:left; color:var(--muted); font-size:.88rem; line-height:1.5; }
.sheet-rail figcaption b, .deck-grid figcaption b { font:italic 400 1.05rem/1 var(--display); color:var(--soft); font-weight:400; }
.rail-hint { margin:4px 0 0; color:var(--soft); font-size:.82rem; }
.kind-list { list-style:none; margin:30px 0 0; padding:0; border-top:1px solid var(--ink); counter-reset:kind; }
.kind-list li { counter-increment:kind; display:grid; grid-template-columns:2.2rem minmax(0, 1fr); gap:0 10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.95rem; line-height:1.65; }
.kind-list li::before { content:counter(kind, decimal-leading-zero); font:italic 400 1rem/1.65 var(--display); color:var(--soft); }
.kind-note { margin:14px 0 0; max-width:640px; color:var(--muted); font-size:.88rem; }
.deck-grid { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 14px; margin:26px 0 0; padding:0; }
.deck-grid figure { margin:0; }
.deck-grid img { display:block; width:100%; height:auto; aspect-ratio:1600 / 1131; background:#EDE9E3; border:1px solid rgb(167 163 156 / .55); box-shadow:0 18px 36px -28px rgb(0 0 0 / .45); }
.why-list { list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--ink); counter-reset:why; }
.why-list li { counter-increment:why; display:grid; grid-template-columns:2.6rem minmax(0, 1fr); gap:4px 12px; padding:22px 0; border-bottom:1px solid var(--line); }
.why-list li::before { content:counter(why, decimal-leading-zero); grid-row:span 2; font:italic 400 1.3rem/1.3 var(--display); color:var(--soft); }
.why-list h3 { margin:0; font:300 clamp(1.25rem, 3vw, 1.55rem)/1.4 var(--serif); }
.why-list p { margin:0; color:var(--muted); font-size:.95rem; line-height:1.75; }

/* the end band: dark in both themes, like the front page's start band; the signature closes it the way every RAYA ad closes */
.sample-end { margin-top:clamp(64px, 8vw, 112px); padding:clamp(64px, 9vw, 120px) 20px; background:#1C1C1C; color:#F7F5F1; }
.sample-end-in { max-width:1120px; margin:0 auto; } /* the band's words start where the page's do */
.sample-end h2 { max-width:760px; }
.sample-end h2 { margin:0 0 12px; font:300 clamp(2rem, 5vw, 3rem)/1.28 var(--serif); }
.sample-end p { margin:0; color:#D9D2C8; max-width:620px; }
.sample-end-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:26px; }
.sample-end .legal-action { margin-top:0; background:#F7F5F1; color:#1C1C1C; }
.sample-end .legal-action:hover { background:#D9D2C8; }
.sample-end-link { display:inline-flex; align-items:center; min-height:48px; color:#F7F5F1; text-underline-offset:5px; }
.signature { display:grid; gap:6px; margin:clamp(56px, 8vw, 96px) 0 0 !important; padding-top:26px; border-top:1px solid rgb(167 163 156 / .4); color:#F7F5F1 !important; }
.signature span:first-child { font:500 .78rem/1.4 var(--ui); letter-spacing:.32em; }
.signature span:nth-child(2) { font:300 clamp(2.2rem, 7vw, 3.4rem)/1.25 "Noto Serif Thai", var(--serif); }
.signature span:last-child { font:italic 400 1.25rem/1.3 var(--display); color:#D9D2C8; }
.sample-page + .legal-foot { border-top:0; }

@media (min-width:700px) {
  .deck-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
  .kind-list { columns:2; column-gap:40px; }
  .kind-list li { break-inside:avoid; }
}
@media (min-width:900px) {
  .dl-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:56px; }
  .sheet-rail { grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-columns:auto; gap:34px 24px; margin:32px 0 0; padding:0; overflow:visible; }
  .rail-hint { display:none; }
  .why-list li { grid-template-columns:4rem minmax(0, 5fr) minmax(0, 6fr); align-items:baseline; gap:0 32px; padding:28px 0; }
  .why-list li::before { grid-row:auto; }
  /* the band as an ad's end card: the call on the left, the signature standing on the right */
  .sample-end-in { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:72px; align-items:end; }
  .sample-end-in > :not(.signature) { grid-column:1; }
  .signature { grid-column:2; grid-row:1 / span 3; align-self:end; margin:0 !important; padding:6px 0 4px 40px; border-top:0; border-left:1px solid rgb(167 163 156 / .4); }
}
/* dark: the page is obsidian too, so the band steps up to the panel tone and a hairline marks where it starts */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sample-end { background:#232220; border-top:1px solid rgb(167 163 156 / .32); } }
:root[data-theme="dark"] .sample-end { background:#232220; border-top:1px solid rgb(167 163 156 / .32); }
@media (prefers-reduced-motion: reduce) { .dl-paper img, .sheet-rail img, .sample-try a, .sample-try a::after { transition:none; } }
/* "ศัพท์ในหน้านี้" at the foot of each guide: links into /glossary/#word, the way an encyclopaedia page links its terms */
.gloss-see-list { display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 16px; padding:0; list-style:none; max-width:680px; }
.gloss-see-list a { display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:inherit; }
.gloss-see-list a:hover, .gloss-see-list a:focus-visible { border-color:currentColor; }