/* ──────────────────────────────────────────────────────────────────────────
   polish.css — site-wide CRAFT layer (ซา 2026-06-17: "ทำให้เท่ขึ้น/ไม่ AI", Polish ละเอียดทั้งเว็บ)
   Additive only. No layout changes, no existing rules touched. Linked from every page.
   Uses html::before / html::after (verified unused everywhere) + global body niceties so
   it can never collide with a page's own body::before (the 3D grid) / inline styles.
   Goal: premium "analog/printed" depth so the UI reads crafted, not flat-AI.
   ────────────────────────────────────────────────────────────────────────── */

/* 1 ── Film grain — a faint static noise "on the lens". Barely-there (opacity + soft-light)
   so text stays crisp; it just kills the dead-flat digital black. SVG = no asset, no request. */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: .05;
  mix-blend-mode: soft-light;
}

/* 2 ── Edge vignette — gently darkens the corners so the eye is drawn to center content
   and the page gains depth (a photographed-in-a-dark-room feel). Edges only → legibility safe. */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(135% 105% at 50% 28%, transparent 52%, rgba(0, 0, 0, .42) 100%);
}

/* Reduced-motion users: noise is static so it's harmless, but honor the preference by
   dropping the grain (keep the calm vignette) for anyone sensitive to visual texture. */
@media (prefers-reduced-motion: reduce) {
  html::before { display: none; }
}

/* 3 ── Crisper type everywhere (luxury serif/sans deserve real antialiasing). */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 4 ── Custom dark-luxury scrollbar — a small "crafted, not default-browser" signal.
   Cream-tinted thumb on near-black track; matches the accent without shouting. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 216, 185, .22) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(239, 216, 185, .18);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(239, 216, 185, .34); background-clip: content-box; }

/* 5 ── Premium text selection (default blue highlight breaks the dark-gold mood). */
::selection { background: rgba(255, 244, 212, .85); color: #000; }

/* 6 ── Kill the grey/blue tap-flash on mobile taps (reads cheap/default-browser). */
a, button, [role="button"], .btn, input[type="submit"] { -webkit-tap-highlight-color: transparent; }

/* 7 ── Signature flanked eyebrow on content-page kickers (.page-eyebrow) — viewfinder
   hairline tick each side, matching the landing's .section-eyebrow. Editorial, branded,
   works centered or left-aligned. (--accent falls back if a page hasn't defined it.) */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.page-eyebrow::before,
.page-eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, transparent, var(--accent, #FFF4D4));
}
.page-eyebrow::after { transform: scaleX(-1); }

/* ============================================================================
   8 ── INTERACTION POLISH (ซา 2026-06-17 "polish ทั้งเว็บ ทำให้หมด").
   Site-wide micro-interactions. ADDITIVE: only NEW states (:active / :focus-visible)
   and props the base rules don't set — existing hovers/transitions keep working.
   Loads after RAWLITY.css so it layers on top. Honors prefers-reduced-motion.
   ============================================================================ */

/* 8a ── Tactile press: controls dip slightly when clicked (pure feel, no library). */
@media (prefers-reduced-motion: no-preference) {
  button:not(:disabled):active,
  .btn:not(:disabled):active,
  [role="button"]:active,
  input[type="submit"]:not(:disabled):active,
  input[type="button"]:not(:disabled):active {
    transform: translateY(1px) scale(.99);
  }
  /* Primary CTA: warm lift on hover (base only swapped its background colour). */
  .btn-primary:not(:disabled):hover {
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .85), 0 0 24px -11px rgba(255, 244, 212, .5);
  }
}

/* 8b ── Keyboard focus = on-brand gold ring everywhere (kills default blue / invisible). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(255, 244, 212, .6);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 8c ── Form fields: soft gold focus glow (premium; additive box-shadow only). */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(255, 244, 212, .07);
}

/* 8d ── Disabled controls read clearly inert, consistently across pages. */
button:disabled, .btn:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 8e ── Text links: a touch more breathing room under the underline (editorial polish). */
a { text-underline-offset: .18em; }

/* ============================================================================
   9 ── APPLE-LUXE EDITORIAL (ซา 2026-06-18: "หรูเหมือนเว็บ iPhone — text น้อย ภาพเล่า").
   Design skill = Exaggerated Minimalism (oversized type, extreme whitespace, single
   accent). Targets .section-* only → the HERO (.hero-*) is untouched (ซา likes it).
   On-theme dark-gold; additive (loads after RAWLITY.css).
   ============================================================================ */

/* 9a ── Oversized editorial headlines (Apple leads with the word, big).
   SCOPED to the landing sections only — inner content pages (.page-wrap: about/faq/
   grading-scale/etc.) reuse .section-title as a small sub-header, so the bare global
   selector was blowing those up to ~67px. Landing has no .page-wrap; these classes
   never appear as a .section-title ancestor on any inner page (verified). */
.how .section-title, .criteria .section-title, .pricing .section-title,
.sample-cta .section-title, .rg-teaser .section-title, .faq .section-title,
.features .section-title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: -.025em;
  line-height: 1.03;
}

/* 9b ── Supporting copy recedes — smaller, dimmer, tighter measure (it supports, the
   headline + visual lead). Scoped to the landing sections (see 9a). */
.how .section-description, .criteria .section-description, .pricing .section-description,
.sample-cta .section-description, .rg-teaser .section-description, .faq .section-description,
.features .section-description {
  font-size: 1rem;
  color: rgba(239, 216, 185, .6);
  max-width: 52ch;
  line-height: 1.7;
}

/* 9c ── Extreme whitespace between content sections (the Apple "room to breathe").
   craft = cinema (own full-bleed rhythm) intentionally excluded. */
.how, .criteria, .pricing, .sample-cta, .rg-teaser, .faq, .features {
  padding-top: clamp(5.5rem, 10vw, 9.5rem);
  padding-bottom: clamp(5.5rem, 10vw, 9.5rem);
}

/* 9d ── More air under each section headline before its content. */
.how .section-header,
.criteria .section-header,
.pricing .section-header,
.faq .section-header { margin-bottom: clamp(3rem, 6vw, 5rem); }