@charset "utf-8";
/* RAWLITY.css — Clean v3.0 */

/* ===========================
   RESET & ROOT
=========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-dark:      #000000;
  --bg-card:      #1a1a1a;
  --bg-elevated:  #242424;
  --accent:       #FFF4D4;
  --accent-light: #efd8b9;
  --text-primary: #efd8b9;
  --text-muted:   #737373;   /* matches every inner page's :root (consistency pass 2026-07-02) */
  --border:       #2e2e2e;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: #000000;
  color: var(--text-primary);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* ── 3D Animated Grid ── */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image:
    linear-gradient(rgba(255,244,212,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,244,212,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(35deg);
  transform-origin: center top;
  animation: gridFlow 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes gridFlow {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

/* ทุก section ต้องอยู่เหนือ grid */
nav, section, footer, .back-to-top, #rawlity-preloader {
  position: relative;
  z-index: 1;
}

/* ===========================
   PRELOADER
=========================== */
#rawlity-preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  max-width: 280px;
  width: 100%;
  text-align: center;
}

.preloader-logo {
  max-width: 160px;
  height: auto;
  animation: logoPulse 2s infinite ease-in-out;
}

@keyframes logoPulse {
  0%, 100% { opacity: 0.35; filter: drop-shadow(0 0 5px rgba(255,244,212,0.1)); }
  50%       { opacity: 1;    filter: drop-shadow(0 0 25px rgba(255,244,212,0.45)); }
}

.preloader-track {
  width: 100%;
  height: 2px;
  background: rgba(255,244,212,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.preloader-bar {
  width: 0%;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 15px var(--accent);
  border-radius: 10px;
  animation: runBar 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes runBar {
  from { width: 0%; }
  to   { width: 100%; }
}

.preloader-status {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.25em;
  opacity: 0.45;
}

.preloader-fade-out {
  opacity: 0;
  transform: translateY(-100%);
}

/* ===========================
   NAVIGATION
=========================== */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(13,13,13,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(239,216,185,0.06);
}

.nav-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  height: 52px;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-img { height: 32px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin-left: 2rem;
  margin-right: auto;
}

.nav-links a {
  color: rgba(239,216,185,0.65);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.nav-links a:hover { color: var(--accent); }

/* Right group */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.nav-lang-wrap {
  position: relative;
}

.nav-lang {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(239,216,185,0.55);
  background: none;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.nav-lang:hover { color: var(--accent); }

/* Popup */
.lang-popup {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: -10px;
  width: 200px;
  background: #0e0e0e;
  border: 1px solid rgba(239,216,185,0.15);
  z-index: 500;
  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

.lang-popup.open { display: block; animation: popupIn 0.2s ease; }

@keyframes popupIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Arrow */
.lang-popup-arrow {
  position: absolute;
  top: -6px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: #0e0e0e;
  border-left: 1px solid rgba(239,216,185,0.15);
  border-top: 1px solid rgba(239,216,185,0.15);
  transform: rotate(45deg);
}

.lang-popup-inner {
  padding: 0.5rem 0;
  max-height: 280px;
  overflow-y: auto;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 1.2rem;
  background: none;
  border: none;
  color: rgba(239,216,185,0.5);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.lang-option:hover {
  background: rgba(239,216,185,0.05);
  color: var(--accent);
}

.lang-option.active {
  color: var(--accent);
}

.lang-check { opacity: 0; flex-shrink: 0; }
.lang-option.active .lang-check { opacity: 1; }

.nav-cta {
  background: transparent;
  color: var(--accent);
  padding: 0.55rem 1.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all 0.2s;
  border: 1px solid rgba(239,216,185,0.5);
  font-family: inherit;
}

.nav-cta:hover {
  background: rgba(239,216,185,0.08);
  border-color: var(--accent);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ===========================
   HERO
=========================== */
.hero {
  display: flex;
  align-items: center;
  padding: 10rem 2rem 6rem;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.hero-container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

.hero-content {
  flex: 1;
  max-width: 520px;
  display: flex;
  flex-direction: column;
}

.hero-tagline {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.25em;
  opacity: 0.6;
  margin-bottom: 0.3rem;
}

.hero-logo-large {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-bottom: 2.5rem;
}

.hero-buttons-group {
  display: flex;
  gap: 1.2rem;
  max-width: 440px;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.8rem;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  transition: all 0.25s ease;
  flex: 1;
  border: none;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

/* 4-corner viewfinder spans — shared */
.btn-corner {
  position: absolute;
  width: 12px; height: 12px;
  border-color: currentColor;
  border-style: solid;
  opacity: 0.5;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* เริ่มห่างออกจากปุ่ม */
.btn-corner.tl { top: -10px;    left: -10px;  border-width: 2px 0 0 2px; }
.btn-corner.tr { top: -10px;    right: -10px; border-width: 2px 2px 0 0; }
.btn-corner.bl { bottom: -10px; left: -10px;  border-width: 0 0 2px 2px; }
.btn-corner.br { bottom: -10px; right: -10px; border-width: 0 2px 2px 0; }

/* hover — ขมวดเข้าหาปุ่ม */
.btn-hero:hover .btn-corner.tl,
.btn-feature-cta:hover .btn-corner.tl,
.btn-primary:hover .btn-corner.tl,
.pricing-btn:hover .btn-corner.tl { top: -4px;    left: -4px;  opacity: 1; }

.btn-hero:hover .btn-corner.tr,
.btn-feature-cta:hover .btn-corner.tr,
.btn-primary:hover .btn-corner.tr,
.pricing-btn:hover .btn-corner.tr { top: -4px;    right: -4px; opacity: 1; }

.btn-hero:hover .btn-corner.bl,
.btn-feature-cta:hover .btn-corner.bl,
.btn-primary:hover .btn-corner.bl,
.pricing-btn:hover .btn-corner.bl { bottom: -4px; left: -4px;  opacity: 1; }

.btn-hero:hover .btn-corner.br,
.btn-feature-cta:hover .btn-corner.br,
.btn-primary:hover .btn-corner.br,
.pricing-btn:hover .btn-corner.br { bottom: -4px; right: -4px; opacity: 1; }

.btn-hero.primary {
  background: var(--accent);
  color: #000;
  border: 1px solid rgba(239,216,185,0.2);
  justify-content: space-between;
}

.btn-hero.primary .btn-arrow { transition: transform 0.25s ease; }
.btn-hero.primary:hover { background: var(--accent-light); }
.btn-hero.primary:hover .btn-arrow { transform: translateX(5px); }

.btn-hero.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(255,244,212,0.2);
}

.btn-hero.secondary:hover {
  border-color: rgba(255,244,212,0.45);
  background: rgba(255,244,212,0.04);
}

/* Hero media */
.hero-media-column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-video-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(239,216,185,0.15);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7));
}

.hero-video-frame::before,
.hero-video-frame::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--accent);
  border-style: solid;
  z-index: 2;
}
.hero-video-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-video-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.hero-video-label,
.hero-video-footer {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(239,216,185,0.5);
  padding: 0.6rem 1rem;
  text-transform: uppercase;
}

.hero-video-label { border-bottom: 1px solid rgba(239,216,185,0.1); }

.hero-video-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(239,216,185,0.1);
  letter-spacing: 0.15em;
  color: rgba(239,216,185,0.4);
}

.card-animation-box {
  width: 100%;
  height: 480px;
  overflow: hidden;
  background: transparent;
  mask-image:
    linear-gradient(to top,  transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-composite: intersect;
}

.hero-animation-video { width: 100%; height: 100%; object-fit: cover; }

/* ===========================
   SHARED BUTTONS
=========================== */
.btn-primary {
  background: var(--accent);
  color: #000;
  padding: 0.9rem 2rem;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(239,216,185,0.2);
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
  letter-spacing: 0.2em;
  transition: all 0.25s ease;
  position: relative;
}

.btn-primary:hover { background: var(--accent-light); }

/* ===========================
   SHARED SECTION
=========================== */
.section-container { max-width: 1200px; margin: 0 auto; }

.section-header { text-align: center; margin-bottom: 4rem; }

.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -1px;
  margin-bottom: 1rem;
}

.section-description {
  font-size: 1.05rem;
  color: rgba(239,216,185,0.82);
  max-width: 600px;
  margin: 0 auto;
}

/* ===========================
   FEATURES
=========================== */
.features {
  padding: 6rem 2rem;
  background: var(--bg-dark);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.feature-split-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 64px;
}

.feature-text-side {
  flex: 1;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.feature-meta-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.3em;
  opacity: 0.5;
}

.feature-brand-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-brand-img { max-width: 280px; height: auto; display: block; }

.feature-divider {
  width: 60px; height: 1px;
  background: var(--accent);
  opacity: 0.3;
}

.feature-desc {
  font-size: 0.95rem;
  color: rgba(239,216,185,0.82);
  line-height: 1.7;
  max-width: 380px;
  margin-top: -0.5rem;
}

.feature-action-zone {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.btn-feature-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(255,244,212,0.2);
  padding: 1.1rem 2rem;
  max-width: 340px;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: inherit;
  cursor: pointer;
  position: relative;
}

.btn-feature-cta .btn-txt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.25em; }
.btn-feature-cta .btn-arrow { font-size: 1.1rem; transition: transform 0.25s ease; }
.btn-feature-cta:hover { border-color: rgba(255,244,212,0.45); background: rgba(255,244,212,0.04); }
.btn-feature-cta:hover .btn-arrow { transform: translateX(6px); }

.feature-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.status-dot {
  width: 7px; height: 7px;
  background: #00cc99;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #00cc99;
  animation: pingEcho 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}

@keyframes pingEcho {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; }
}

.status-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #00cc99;
  letter-spacing: 0.15em;
  opacity: 0.8;
}

.feature-mockup-side {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockup-frame {
  position: relative;
  display: inline-block;
}

.mockup-frame::before {
  content: '';
  position: absolute;
  top: 10%; left: 10%; right: 10%; bottom: 10%;
  background: radial-gradient(circle, rgba(255,244,212,0.08) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.mockup-img {
  width: 100%;
  max-width: 350px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8));
}

/* ===========================
   SCROLL REVEAL ANIMATIONS
=========================== */
.luxury-popup-slide-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.97);
  filter: blur(4px);
  transition: all 0.85s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.luxury-popup-slide-right {
  opacity: 0;
  transform: translateX(60px) scale(0.97);
  filter: blur(4px);
  transition: all 0.85s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.luxury-popup-slide-up {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(3px);
  transition: all 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.reveal-active {
  opacity: 1 !important;
  transform: translate(0,0) scale(1) !important;
  filter: blur(0) !important;
}

/* Pulse animations */
.luxury-pulse-glow {
  animation: glowPulse 4s infinite ease-in-out;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255,244,212,0.1); }
  50%       { box-shadow: 0 0 35px rgba(255,244,212,0.45); }
}

.luxury-pulse-border {
  animation: borderPulse 3s infinite ease-in-out;
}
@keyframes borderPulse {
  0%, 100% { border-color: rgba(255,244,212,0.25); box-shadow: none; }
  50%       { border-color: rgba(255,244,212,0.85); box-shadow: 0 0 25px rgba(255,244,212,0.15); }
}

/* ===========================
   PRICING
=========================== */
.pricing {
  padding: 6rem 2rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
  position: relative;
  transition: transform 0.3s;
}

.pricing-card:hover { transform: translateY(-4px); }

.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 40px rgba(255,244,212,0.15);
}

.pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
}

.save-badge {
  position: absolute;
  top: 15px; right: 15px;
  background: rgba(255,244,212,0.12);
  color: var(--accent);
  border: 1px solid rgba(255,244,212,0.3);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.pricing-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.pricing-price {
  font-size: 3rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.pricing-price .currency { font-size: 1.5rem; font-weight: 600; }
.pricing-price .period   { font-size: 1rem; font-weight: 400; color: var(--text-muted); }

.pricing-description {
  color: var(--text-muted);
  font-size: 0.9rem;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-divider {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 15px 0;
}

.pricing-features {
  list-style: none;
  margin: 1rem 0 2rem;
  min-height: 160px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.pricing-features li::before { content: '✓'; color: var(--accent); font-weight: 700; }

.pricing-btn {
  display: block;
  text-align: center;
  padding: 1rem;
  font-weight: 700;
  font-size: 0.78rem;
  font-family: inherit;
  letter-spacing: 0.2em;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  position: relative;
}

.pricing-card .pricing-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(255,244,212,0.2);
}
.pricing-card .pricing-btn .btn-corner { border-color: var(--accent); }
.pricing-card .pricing-btn:hover { border-color: rgba(255,244,212,0.45); background: rgba(255,244,212,0.04); }

.pricing-card.featured .pricing-btn {
  background: var(--accent);
  color: #000;
  border: 1px solid rgba(239,216,185,0.2);
}
.pricing-card.featured .pricing-btn .btn-corner { border-color: #000; }
.pricing-card.featured .pricing-btn:hover { background: var(--accent-light); }

/* ===========================
   CTA
=========================== */
.cta {
  padding: 6rem 2rem;
  background: var(--bg-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,244,212,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.cta-content { position: relative; z-index: 1; }

.cta h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: 1rem;
}

.cta p {
  color: rgba(239,216,185,0.82);
  font-size: 1.05rem;
  margin: 0 auto 2rem;
  max-width: 500px;
}

/* ===========================
   FOOTER
=========================== */
footer {
  padding: 2rem;
  border-top: 1px solid var(--border);
}

.footer-container { max-width: 1200px; margin: 0 auto; }

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.footer-top:hover { opacity: 1; transform: translateY(-3px); }
.footer-top:hover svg { transform: translateY(-4px); }
.footer-top svg { transition: transform 0.3s ease; }

.footer-top-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.social-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
  .hero-container { gap: 60px; }
  .feature-split-wrapper { gap: 60px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
}

@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  .mobile-menu-btn { display: block; }

  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(13,13,13,0.98);
    backdrop-filter: blur(20px);
    gap: 0;
  }

  .nav-links.active li { border-bottom: 1px solid var(--border); }
  .nav-links.active a { display: block; padding: 1.35rem 2rem; font-size: 1.1rem; }

  .hero { padding: 6rem 1rem 3rem; }
  .hero-container { flex-direction: column; gap: 40px; padding: 40px 20px; }
  .hero-media-column { display: none; }
  .hero-buttons-group { flex-direction: column; }

  .feature-split-wrapper { flex-direction: column-reverse; gap: 40px; align-items: center; }
  .feature-text-side { max-width: 100%; align-items: center; text-align: center; justify-content: flex-start; }
  .feature-desc { max-width: 100%; }
  .btn-feature-cta { max-width: 100%; }
  .feature-status { justify-content: center; }
}

/* ===========================
   BACK TO TOP
=========================== */
.back-to-top {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
    transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
    bottom 0.2s ease;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.back-to-top svg {
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: arrowFloat 2.5s ease-in-out infinite;
}

.back-to-top:hover svg {
  opacity: 1;
  animation: none;
  transform: translateY(-5px);
}

@keyframes arrowFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ===========================
   SIGN IN MODAL
=========================== */
.signin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.signin-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.signin-modal {
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(239,216,185,0.12);
  padding: 4rem 3.5rem;
  max-width: 600px;
  width: 90%;
  text-align: center;
  animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.signin-close {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: rgba(239,216,185,0.4);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.2s;
  font-family: inherit;
  line-height: 1;
}

.signin-close:hover { color: var(--accent); }

.signin-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 2.5rem;
}

.signin-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.signin-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.signin-sub {
  font-size: 0.75rem;
  color: rgba(239,216,185,0.45);
  letter-spacing: 0.05em;
}

.signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 1.5rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
  border: none;
}

.signin-btn.outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(239,216,185,0.3);
}

.signin-btn.outline:hover {
  border-color: var(--accent);
  background: rgba(239,216,185,0.04);
}

.signin-btn.solid {
  background: var(--accent);
  color: #000;
  border: 1px solid var(--accent);
}

.signin-btn.solid:hover { background: var(--accent-light); }

@media (max-width: 480px) {
  .signin-options { grid-template-columns: 1fr; }
  .signin-modal { padding: 3rem 1.5rem; }
}
/* ===========================
   SOCIAL LOGIN — เพิ่มต่อท้าย RAWLITY.css
=========================== */
.signin-socials {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 0;
}

.signin-social-btn {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .85rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(239,216,185,0.15);
  color: var(--accent);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  position: relative;
}

.signin-social-btn::before {
  content: '';
  position: absolute;
  top: -5px; left: -5px;
  width: 8px; height: 8px;
  border-top: 1px solid rgba(239,216,185,0.15);
  border-left: 1px solid rgba(239,216,185,0.15);
  transition: all .3s cubic-bezier(.16,1,.3,1);
}

.signin-social-btn::after {
  content: '';
  position: absolute;
  bottom: -5px; right: -5px;
  width: 8px; height: 8px;
  border-bottom: 1px solid rgba(239,216,185,0.15);
  border-right: 1px solid rgba(239,216,185,0.15);
  transition: all .3s cubic-bezier(.16,1,.3,1);
}

.signin-social-btn:hover {
  border-color: rgba(239,216,185,0.4);
  background: rgba(239,216,185,0.04);
}

.signin-social-btn:hover::before { top: -3px; left: -3px; border-color: rgba(239,216,185,0.5); }
.signin-social-btn:hover::after  { bottom: -3px; right: -3px; border-color: rgba(239,216,185,0.5); }

.ss-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.ss-label { flex: 1; text-align: left; }

.ss-arrow { font-size: .85rem; opacity: .35; transition: transform .2s; }
.signin-social-btn:hover .ss-arrow { transform: translateX(4px); opacity: .7; }

.signin-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.5rem 0 1rem;
}

.sd-line { flex: 1; height: 1px; background: rgba(239,216,185,0.08); }
.sd-text  {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ===========================================================
   v3.1 — PROFESSIONAL LAYOUT SECTIONS (Trust / How / Criteria / FAQ / Footer)
   เพิ่มต่อท้าย ไม่แตะของเดิม · คงธีม dark luxury
=========================================================== */

/* ---- shared eyebrow label above section titles ---- */
.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 1rem;
  display: block;
}

/* ---- TRUST BAR ---- */
.trust-bar {
  padding: 4rem 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
}

.trust-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.trust-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.75rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border);
}

.trust-value {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--accent);
  line-height: 1;
}

.trust-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(239, 216, 185, 0.5);
}

/* ---- HOW IT WORKS ---- */
.how {
  padding: 9rem 2rem;
  /* Fade the page grid IN from solid black at the TOP edge so the boundary with RAWLITY CONTROL above
     (which fades to black) is a smooth black-to-black blend, not a hard grid seam. The bottom stays grid
     so it flows continuously into the next grid section. (ซา 2026-06-26) */
  background: linear-gradient(to bottom, var(--bg-dark) 0%, rgba(0,0,0,0) 16%);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}

.how-step {
  position: relative;
  padding: 2.5rem 1.8rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 16px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.how-step:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 216, 185, 0.3);
}

.how-num {
  font-family: 'DM Serif Display', serif;
  font-size: 2.6rem;
  color: var(--accent);
  opacity: 0.22;
  line-height: 1;
  margin-bottom: 1.2rem;
}

.how-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
  color: var(--text-primary);
}

.how-desc {
  font-size: 0.85rem;
  color: rgba(239, 216, 185, 0.82);
  line-height: 1.65;
}

/* ---- WHAT WE CHECK (criteria) ---- */
.criteria {
  padding: 9rem 2rem;
  background: var(--bg-dark);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}

.criteria-card {
  padding: 2.8rem 1.8rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.criteria-card:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 216, 185, 0.3);
  background: var(--bg-card);
}

.criteria-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 1.4rem;
  color: var(--accent);
  opacity: 0.85;
}

.criteria-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
  color: var(--text-primary);
}

.criteria-desc {
  font-size: 0.83rem;
  color: rgba(239, 216, 185, 0.82);
  line-height: 1.65;
}

/* ---- FAQ ---- */
.faq {
  padding: 9rem 2rem;
  background: var(--bg-dark);   /* solid bg so the page's 3D grid doesn't show through behind the FAQ (ซา 2026-06-26) */
}

.faq-list {
  max-width: 760px;
  margin: 4rem auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  padding: 1.6rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  transition: color 0.2s;
}

.faq-q:hover { color: var(--accent); }

.faq-toggle {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.3rem;
  line-height: 1;
}

.faq-item.open .faq-toggle { transform: rotate(45deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
  opacity: 0;
  color: rgba(239, 216, 185, 0.82);
  font-size: 0.92rem;
  line-height: 1.75;
}

.faq-item.open .faq-a {
  max-height: 320px;
  padding-bottom: 1.6rem;
  opacity: 1;
}

/* ---- EXPANDED FOOTER ---- */
.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 3rem;
  padding: 1.5rem 0 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.footer-brand-logo { height: 30px; width: auto; margin-bottom: 1.2rem; display: block; }

.footer-brand-desc {
  font-size: 0.85rem;
  color: rgba(239, 216, 185, 0.72);
  line-height: 1.7;
  max-width: 300px;
}

.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 1.3rem;
}

.footer-col a,
.footer-col p {
  display: block;
  color: rgba(239, 216, 185, 0.72);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 0.75rem;
  transition: color 0.2s;
  line-height: 1.5;
}

.footer-col a:hover { color: var(--accent); }

/* ---- RESPONSIVE for new sections ---- */
@media (max-width: 1024px) {
  .how-grid,
  .criteria-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .trust-item:nth-child(2)::after { display: none; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 680px) {
  .how-grid,
  .criteria-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item::after { display: none !important; }
  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
  .how, .criteria, .faq { padding: 6rem 1.5rem; }
}

/* ===========================================================
   v3.2 — REDESIGN POLISH (anti-slop pass)
   warm surfaces · grain · tabular nums · spec-sheet criteria
   · open FAQ · tinted shadows. คงแบรนด์ดำ-ทอง.
=========================================================== */

/* warm-tinted, single-family surfaces (override cool grays) */
:root {
  --bg-card:     #14110c;
  --bg-elevated: #1b160f;
  --border:      #2a241a;
  --shadow-deep: 0 28px 64px -16px rgba(0,0,0,0.85);
  --glow-accent: 0 0 48px -10px rgba(255,244,212,0.22);
}

/* subtle warm ambient depth — cheap, GPU-friendly (no feTurbulence) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,244,212,0.05), transparent 55%),
    radial-gradient(100% 60% at 50% 110%, rgba(255,244,212,0.03), transparent 60%);
}

/* tabular figures so numbers line up like a lab report */
.trust-value,
.pricing-price,
.how-num,
.criteria-card::before { font-variant-numeric: tabular-nums; }

/* ---- Trust bar refinement ---- */
.trust-value { letter-spacing: -0.01em; }

/* ---- How It Works: outlined numerals + process connector ---- */
.how-grid { position: relative; }
.how-step {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
}
.how-step::before {
  content: '';
  position: absolute;
  top: 0; left: 1.8rem; right: 1.8rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 80%);
  opacity: 0.45;
}
.how-num {
  -webkit-text-stroke: 1px rgba(239,216,185,0.4);
  color: transparent;
  opacity: 1;
  font-size: 3.1rem;
}
.how-step:hover { box-shadow: var(--shadow-deep); }

/* ---- What We Check: card grid -> lab spec-sheet rows ---- */
.criteria-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  counter-reset: crit;
}
.criteria-card {
  counter-increment: crit;
  text-align: left;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 2.2rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.3rem;
  align-items: start;
}
.criteria-card:hover { transform: none; background: transparent; }
.criteria-icon {
  margin: 0;
  width: 30px; height: 30px;
  opacity: 0.8;
  grid-row: span 2;
}
.criteria-name {
  margin-bottom: 0.35rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.criteria-name::before {
  content: '0' counter(crit);
  font-size: 0.8rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.45;
}
.criteria-desc { grid-column: 2; max-width: 34ch; }

/* ---- FAQ: numbered accordion (ซา 2026-06-26 — ref look adapted to dark-luxury) ---- */
.faq-list { display: block; max-width: 880px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.faq-item { border-bottom: 1px solid rgba(239,216,185,.12); border-radius: 7px; transition: background .3s; }
.faq-item.open { background: rgba(239,216,185,.045); border-bottom-color: transparent; }
.faq-q { gap: 1.1rem; padding: 1.45rem 1.2rem; cursor: pointer; }
.faq-q:hover { color: var(--accent); }
.faq-q:hover .faq-num { border-color: rgba(239,216,185,.6); }
.faq-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(239,216,185,.32); color: var(--accent-light); font-size: .8rem; font-weight: 700;
  font-family: 'DM Sans', sans-serif; transition: background .3s, color .3s, border-color .3s; }
.faq-item.open .faq-num { background: var(--accent); color: #0a0807; border-color: var(--accent); }
.faq-qtext { flex: 1; font-size: clamp(.95rem, 1.4vw, 1.05rem); font-weight: 600; }
.faq-chev { flex: none; width: 20px; height: 20px; color: var(--accent-light); opacity: .65;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s; }
.faq-item.open .faq-chev { transform: rotate(180deg); opacity: 1; }
.faq-a { max-height: 0; overflow: hidden; opacity: 0;
  padding: 0 1.4rem 0 calc(1.2rem + 30px + 1.1rem);   /* indent under the question text */
  transition: max-height .4s ease, opacity .3s ease, padding .4s ease;
  color: rgba(239,216,185,.78); font-size: .92rem; line-height: 1.75; }
.faq-item.open .faq-a { max-height: 360px; opacity: 1; padding-bottom: 1.5rem; }
@media (max-width: 680px) {
  .faq-q { padding: 1.25rem .7rem; gap: .8rem; }
  .faq-a { padding-left: calc(.7rem + 30px + .8rem); padding-right: .7rem; }
}

/* ---- tinted, single-light-source shadows on premium surfaces ---- */
.pricing-card:hover { box-shadow: var(--shadow-deep); }
.pricing-card.featured { box-shadow: var(--shadow-deep), var(--glow-accent); }

/* ---- responsive: spec rows + faq collapse to 1 col ---- */
@media (max-width: 680px) {
  .criteria-grid { grid-template-columns: 1fr; }
  .faq-list { grid-template-columns: 1fr; gap: 0; }
}

/* ===========================================================
   v3.3 — SLAB HOLDER pricing cards (graded-card frame)
   มุมคม · เส้นคู่ · label strip + cert · featured = แถบทอง
=========================================================== */

/* sharp slab corners + inner hairline (double line via outline) */
.pricing-card {
  border-radius: 3px;
  border-color: rgba(239,216,185,0.18);
  outline: 1px solid rgba(239,216,185,0.10);
  outline-offset: -7px;
  overflow: hidden;            /* keep label strip flush to slab edges */
}

/* slab label strip — breaks out to card edges via negative margin */
.slab-label {
  margin: -2.5rem -2.5rem 1.9rem;
  padding: 0.62rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(239,216,185,0.035);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239,216,185,0.5);
}

.slab-cert {
  font-family: ui-monospace, 'SFMono-Regular', 'Courier New', monospace;
  letter-spacing: 0.14em;
  color: var(--accent);
  opacity: 0.7;
}

/* featured slab: gold label strip instead of the "Most Popular" pill */
.pricing-card.featured { border-radius: 3px; }
.pricing-card.featured::before { display: none; }
.pricing-card.featured {
  border-color: var(--accent);
  outline-color: rgba(255,244,212,0.25);
}
.pricing-card.featured .slab-label {
  background: var(--accent);
  color: #000;
  border-bottom-color: rgba(0,0,0,0.25);
}
.pricing-card.featured .slab-cert { color: #000; opacity: 0.6; }

/* square-up the save badge to match the slab language; clear the label strip */
.save-badge {
  top: 3.5rem;
  right: 1.4rem;
  border-radius: 2px;
}

/* ===========================================================
   v3.4 — ACRYLIC RAWLITY SLAB (hero showcase)
   กรอบใสอะคริลิค + การ์ดข้างใน + label เกรด + เอียง 3D + แสงวิ่ง
=========================================================== */

.slab-stage {
  perspective: 1300px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px;
}

.slab {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 360 / 540;
  border-radius: 18px;
  padding: 20px 16px 16px;
  /* frosted acrylic body — semi-opaque (no backdrop-filter, GPU-cheap) */
  background:
    linear-gradient(135deg, rgba(58,54,46,0.55), rgba(18,16,12,0.42) 42%, rgba(48,44,36,0.5)),
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow:
    0 44px 90px -24px rgba(0,0,0,0.85),
    0 0 60px -20px rgba(255,244,212,0.15),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}

/* acrylic case top lip */
.slab::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 44%; height: 7px;
  border-radius: 0 0 9px 9px;
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

/* moving glare */
.slab-glare {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(255,255,255,0.22) 46%,
    rgba(255,255,255,0.05) 52%,
    transparent 62%);
  background-size: 250% 250%;
  background-position: var(--gx, 30%) var(--gy, 0%);
  z-index: 3;
}

.slab-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateZ(24px);
}

/* ---- grading label ---- */
.grade-label {
  background: #080808;
  border: 1px solid rgba(239,216,185,0.28);
  border-radius: 3px;
  padding: 9px 11px 10px;
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

.gl-brand {
  text-align: center;
  border-bottom: 1px solid rgba(239,216,185,0.22);
  padding-bottom: 5px;
}
.gl-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 1.85rem;
  letter-spacing: 0.07em;
  line-height: 1;
  display: block;
  color: #f0e4ca;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.gl-tag {
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  opacity: 0.6;
  text-transform: uppercase;
}

.gl-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 3px 6px;
  background: #000;
  border: 1px solid rgba(239,216,185,0.18);
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.gl-name span {
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.55;
  flex-shrink: 0;
}

.gl-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.gl-subs { display: flex; flex-direction: column; gap: 3px; }
.gl-subs div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.gl-subs span { width: 66px; opacity: 0.75; }
.gl-subs b { color: #f0e4ca; font-size: 0.7rem; }

.gl-grade { text-align: center; line-height: 1; flex-shrink: 0; }
.gl-pre {
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  display: block;
  opacity: 0.7;
  margin-bottom: 2px;
}
.gl-num {
  font-family: 'DM Serif Display', serif;
  font-size: 2.8rem;
  line-height: 0.85;
  display: block;
  color: #f0e4ca;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.gl-cert {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  opacity: 0.7;
  display: block;
  margin-top: 2px;
}

/* ---- card window ---- */
.slab-card {
  flex: 1;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: #15120c;
  border: 1px solid rgba(239,216,185,0.14);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}
.slab-card > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.slab-card-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: radial-gradient(circle at 50% 42%, rgba(239,216,185,0.07), transparent 62%);
  color: rgba(239,216,185,0.4);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.slab-ph-mark { width: 86px; height: auto; opacity: 0.25; }

/* holographic sample card inside the slab window (matches the collection's holo
   cards). Rainbow foil + a white glare both track the slab's --gx/--gy (set by the
   tilt JS, inherited down here) so the card shimmers as the case rotates. */
.slab-holo {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 16%, #1b1308, #0a0805 72%);
}
.slab-holo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(112deg,
    rgba(255,80,120,0) 0%, rgba(255,110,150,.22) 6%, rgba(255,224,150,.26) 11%,
    rgba(120,225,205,.18) 16%, rgba(150,165,255,.2) 21%, rgba(255,120,205,.2) 26%,
    rgba(255,244,212,0) 32%);
  background-size: 220% 220%;
  background-position: var(--gx, 40%) var(--gy, 30%);
  mix-blend-mode: screen; opacity: 0.55;
}
.slab-holo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255,255,255,0.34), transparent 46%);
  mix-blend-mode: overlay;
}
.slab-holo-gem { width: 60%; max-width: 168px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6)); }

/* show slab on mobile too (smaller) — hero-media-column is hidden <880 by base CSS;
   re-enable just for the slab so the product still shows */
@media (max-width: 880px) {
  .hero-media-column:has(.slab-stage) { display: flex; width: 100%; flex: 0 0 auto; }
  .slab { width: 100%; max-width: 300px; }
}

/* ===========================================================
   v3.5 — SLAB-FRAME pricing cards (acrylic holder per tier) + Custom
=========================================================== */

.slab-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  max-width: 1260px;
  margin: 0 auto;
}

/* each tier = acrylic slab holder */
.pricing-card.slab-card-frame {
  padding: 14px;
  border-radius: 14px;
  outline: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(150deg, rgba(58,54,46,0.5), rgba(16,14,10,0.4) 45%, rgba(46,42,34,0.46)),
    linear-gradient(150deg, rgba(255,255,255,0.09), rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.05));
  box-shadow:
    0 30px 64px -22px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
.pricing-card.slab-card-frame:hover {
  transform: translateY(-6px);
  box-shadow:
    0 40px 80px -22px rgba(0,0,0,0.85),
    0 0 50px -18px rgba(255,244,212,0.18),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

/* acrylic case top lip */
.pricing-card.slab-card-frame::before {
  content: '';
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 40%; height: 6px;
  border-radius: 0 0 8px 8px;
  background: rgba(255,255,255,0.13);
  z-index: 5;
  display: block;          /* re-enable (base .featured::before set a pill; this is the frame) */
}

/* moving-ish sheen (cheap, brightens on hover) */
.slab-glare {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.10) 48%, transparent 57%);
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
.pricing-card.slab-card-frame:hover .slab-glare { opacity: 1; }

/* top label strip flush to acrylic edges */
.pricing-card.slab-card-frame .slab-label {
  margin: -14px -14px 0;
  border-radius: 0;
  position: relative;
  z-index: 3;
}

/* dark readable content well inside the holder */
.slab-window {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  padding: 1.7rem 1.5rem 1.6rem;
  border-radius: 7px;
  background: linear-gradient(180deg, #17120b, #100c07);
  border: 1px solid rgba(239,216,185,0.10);
  box-shadow: inset 0 0 26px rgba(0,0,0,0.55);
}

/* featured + custom accents on the frame */
.pricing-card.slab-card-frame.featured {
  border-color: rgba(255,244,212,0.55);
  box-shadow:
    0 34px 70px -20px rgba(0,0,0,0.85),
    0 0 56px -16px rgba(255,244,212,0.28),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.pricing-card.slab-card-frame.custom .slab-window {
  border-style: dashed;
  border-color: rgba(239,216,185,0.2);
}

/* custom "11+" qty */
.custom-qty {
  font-family: 'DM Serif Display', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
}

/* save badge sits clear of the label strip, inside the holder */
.pricing-card.slab-card-frame .save-badge {
  top: 3.1rem;
  right: 1.1rem;
  z-index: 6;
}

/* responsive: 4 -> 2 -> 1 */
@media (max-width: 1100px) {
  .slab-grid { grid-template-columns: repeat(2, 1fr); max-width: 660px; }
}
@media (max-width: 560px) {
  .slab-grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ===========================================================
   v3.6 — slab pricing: equal height · compact · card-like window
=========================================================== */

/* frame + window as flex column so all 4 slabs match height */
.pricing-card.slab-card-frame { display: flex; flex-direction: column; }

.slab-card-frame .slab-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.3rem 1.3rem;
  /* card-like surface: soft top emblem glow over deep card stock */
  background:
    radial-gradient(120% 70% at 50% -5%, rgba(239,216,185,0.07), transparent 55%),
    linear-gradient(180deg, #17120b, #100c07);
}

/* compact, aligned blocks */
.slab-card-frame .pricing-name { font-size: 1.15rem; margin-bottom: 0.5rem; }
.slab-card-frame .pricing-price {
  font-size: 2.3rem;
  min-height: 2.8rem;          /* absorbs /5 cards vs /card so rows align */
  align-items: baseline;
  flex-wrap: nowrap;
  margin-bottom: 0.1rem;
}
.slab-card-frame .pricing-price .currency { font-size: 1.2rem; }
.slab-card-frame .pricing-price .period { font-size: 0.82rem; white-space: nowrap; }
.slab-card-frame .custom-qty { font-size: 2.3rem; }

.slab-card-frame .pricing-description {
  min-height: 1.1rem;
  font-size: 0.8rem;
  margin-bottom: 0;
}
.slab-card-frame .pricing-divider { margin: 0.85rem 0; }

/* features fill the gap so every Submit button lands on one bottom line */
.slab-card-frame .pricing-features {
  flex: 1;
  min-height: 0;
  margin: 0 0 1.1rem;
}
.slab-card-frame .pricing-features li {
  padding: 0.34rem 0;
  font-size: 0.82rem;
  white-space: nowrap;          /* keep each feature on one line */
}
.slab-card-frame .pricing-btn { margin-top: auto; padding: 0.85rem; }




/* ===========================================================
   v3.8 — CAMERA AUTOFOCUS BUTTONS (gimmick)
   brackets snap in + lock green + blinking AF dot + shutter press
=========================================================== */

.btn-hero, .btn-feature-cta, .btn-primary, .pricing-btn,
.signin-btn, .plan-cta, .nav-cta { position: relative; }

/* AF frame: subtle idle, springy snap-in on hover — uses each button's own
   colour (cream on dark buttons, ink on filled), so it always matches the theme */
.btn-corner {
  width: 12px; height: 12px;
  opacity: 0.22;
  transition: top .42s cubic-bezier(.34,1.7,.5,1),
              left .42s cubic-bezier(.34,1.7,.5,1),
              right .42s cubic-bezier(.34,1.7,.5,1),
              bottom .42s cubic-bezier(.34,1.7,.5,1),
              opacity .25s ease;
}
.btn-hero:hover .btn-corner,
.btn-feature-cta:hover .btn-corner,
.btn-primary:hover .btn-corner,
.pricing-btn:hover .btn-corner,
.signin-btn:hover .btn-corner,
.plan-cta:hover .btn-corner { opacity: 1; }

/* "focus locked" = soft cream glow (theme), not a coloured dot */
.btn-hero.secondary:hover, .btn-feature-cta:hover, .btn-primary:hover, .nav-cta:hover {
  box-shadow: 0 0 26px -8px rgba(255,244,212,0.4);
}

/* shutter press */
.btn-hero:active, .btn-feature-cta:active, .btn-primary:active,
.pricing-btn:active, .signin-btn:active, .plan-cta:active, .nav-cta:active {
  transform: scale(0.975);
}

/* rcard real-scan variant (Task 12.2): a real card image can fill .rc-art
   in place of the generative SVG, keeping the slab frame/label intact. */
.rc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-art--scan { aspect-ratio: 5 / 7; }

/* ===========================================================
   v3.9 — UNIFIED BUTTON STYLE: outline + cream fill-sweep (V2)
   transparent + cream border → hover cream wipes in, text/AF go ink.
   AF corners preserved (no overflow clip — fill uses scaleX).
=========================================================== */
.btn-hero, .btn-hero.primary, .btn-hero.secondary, .btn-feature-cta,
.btn-primary, .pricing-btn, .signin-btn, .signin-btn.solid, .signin-btn.outline,
.plan-cta, .nav-cta {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid rgba(255,244,212,0.45) !important;
  position: relative;
  z-index: 0;
  overflow: visible;
}

/* the cream fill (grows from left, stays inside the button = corners not clipped) */
.btn-hero::before, .btn-feature-cta::before, .btn-primary::before,
.pricing-btn::before, .signin-btn::before, .plan-cta::before, .nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: -1;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.btn-hero:hover::before, .btn-feature-cta:hover::before, .btn-primary:hover::before,
.pricing-btn:hover::before, .signin-btn:hover::before, .plan-cta:hover::before, .nav-cta:hover::before {
  transform: scaleX(1);
}

/* on lock: text + AF corners flip to ink, border full cream */
.btn-hero:hover, .btn-feature-cta:hover, .btn-primary:hover,
.pricing-btn:hover, .signin-btn:hover, .plan-cta:hover, .nav-cta:hover {
  color: #1a1206 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 10px 30px -10px rgba(255,244,212,0.35);
}

/* keep the label/arrow above the fill */
.btn-txt, .btn-arrow { position: relative; z-index: 1; }
/* ── Task 16.6: verify-slip feedback + re-upload (submit step 3) ── */
.verify-feedback {
  display: none;
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--red);
  border-radius: 10px;
  background: rgba(255, 107, 107, 0.06);
}
.verify-feedback-msg {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.65;
  margin: 0 0 0.75rem;
}
.verify-reupload-btn { font-size: 0.74rem; }

/* ── Sign-in modal: clean & calm (RAWLITY wordmark, no viewfinder corners, no flashy hover) ── */
.signin-cert{margin-bottom:.5rem;text-align:center;}
.signin-cert .sc-brand{font-family:'DM Serif Display',serif;font-size:1.75rem;letter-spacing:.24em;color:var(--accent);line-height:1;padding-left:.24em;}
/* kill the viewfinder corner brackets on the Google button + the cream-fill/glow hover on this modal's buttons */
.signin-modal .signin-btn::before{display:none !important;}
.signin-modal .signin-social-btn::before,.signin-modal .signin-social-btn::after{display:none !important;}
.signin-modal .signin-btn.solid{background:var(--accent) !important;color:#000 !important;border:1px solid var(--accent) !important;box-shadow:none !important;}
.signin-modal .signin-btn.solid:hover{background:var(--accent-light) !important;color:#000 !important;border-color:var(--accent-light) !important;box-shadow:none !important;}
.signin-modal .signin-social-btn{box-shadow:none !important;}
.signin-modal .signin-social-btn:hover{box-shadow:none !important;border-color:rgba(239,216,185,.4) !important;color:var(--accent) !important;}
/* popup open → background must be calm: stop the animated grid + make the backdrop more opaque so no drift shows through */
.signin-overlay{background:rgba(0,0,0,.94) !important;backdrop-filter:blur(14px) !important;}
body:has(#signinOverlay.open)::before{animation-play-state:paused !important;}

/* ── Pricing comparison cards (Resend-style: centered name, big price, dividers, ✓/✕ rows) ── */
.pricing .gimmick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch;max-width:920px;margin:0 auto;}
@media(max-width:920px){.pricing .gimmick-grid{grid-template-columns:repeat(3,1fr);max-width:none;}}
@media(max-width:760px){.pricing .gimmick-grid{grid-template-columns:1fr;max-width:420px;}}
.tier{position:relative;display:flex;flex-direction:column;background:#0c0a07;border:1px solid rgba(239,216,185,.1);border-radius:14px;padding:2rem 1.5rem 1.6rem;}
.tier.featured{border-color:rgba(239,216,185,.42);box-shadow:0 0 0 1px rgba(239,216,185,.16) inset;}
.tier-badge{position:absolute;top:1rem;right:1rem;background:var(--accent,#FFF4D4);color:#000;font-family:'DM Sans',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:20px;}
.tier-name{text-align:center;font-family:'DM Sans',sans-serif;font-size:.95rem;color:rgba(239,216,185,.7);margin-bottom:1.4rem;}
.tier-price{text-align:center;font-family:'DM Serif Display',serif;font-size:2.6rem;color:#efd8b9;line-height:1;}
.tier-per{font-family:'DM Sans',sans-serif;font-size:.82rem;color:rgba(239,216,185,.45);margin-left:.35rem;}
.tier-rule{border:none;border-top:1px solid rgba(239,216,185,.1);margin:1.4rem 0;width:100%;}
.tier-sub{text-align:center;font-family:'DM Sans',sans-serif;font-size:.92rem;color:#efd8b9;}
.tier-sub2{text-align:center;font-family:'DM Sans',sans-serif;font-size:.74rem;color:rgba(239,216,185,.42);margin-top:.3rem;}
.tier-feats{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-direction:column;gap:.72rem;}
.tier-feats li{display:flex;align-items:center;gap:.6rem;font-family:'DM Sans',sans-serif;font-size:.79rem;line-height:1.35;color:rgba(239,216,185,.85);}
.tier-feats li.no{color:rgba(239,216,185,.3);}
.tier-fd{display:block;font-family:'DM Sans',sans-serif;font-size:.67rem;color:rgba(239,216,185,.42);margin-top:.12rem;line-height:1.3;}
.tier-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;}
.tier-ic svg{width:18px;height:18px;display:block;}
.tier-cta{position:relative;margin-top:auto;display:block;text-align:center;background:#161109;color:#efd8b9;border:1px solid rgba(239,216,185,.2);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;padding:.85rem 1rem;text-decoration:none;transition:background .2s,transform .1s;}
.tier-cta:hover{background:#221a10;}
.tier-cta:active{transform:translateY(1px);}
.tier.featured .tier-cta{background:var(--accent,#FFF4D4);color:#000;border-color:var(--accent,#FFF4D4);}
.tier.featured .tier-cta:hover{background:#efd8b9;}
/* viewfinder corner brackets — same AF-frame effect as the rest of the site's buttons */
.tier-cta:hover .btn-corner{opacity:1;}
.tier-cta:hover .btn-corner.tl{top:-4px;left:-4px;}
.tier-cta:hover .btn-corner.tr{top:-4px;right:-4px;}
.tier-cta:hover .btn-corner.bl{bottom:-4px;left:-4px;}
.tier-cta:hover .btn-corner.br{bottom:-4px;right:-4px;}
.tier.featured .tier-cta .btn-corner{border-color:var(--accent,#FFF4D4);}
/* cream fill-sweep from the left on hover — same as the rest of the site's dark buttons */
.tier:not(.featured) .tier-cta{z-index:0;overflow:visible;}
.tier:not(.featured) .tier-cta::before{content:'';position:absolute;inset:0;background:var(--accent,#FFF4D4);border-radius:10px;transform-origin:left center;transform:scaleX(0);z-index:-1;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.tier:not(.featured) .tier-cta:hover::before{transform:scaleX(1);}
.tier:not(.featured) .tier-cta:hover{color:#1a1206;border-color:var(--accent,#FFF4D4);}
.tier:not(.featured) .tier-cta:hover .btn-corner{border-color:#1a1206;}

/* ============================================================
   INSIDE THE LAB  ?  founder / craft editorial collage
   Broken magazine grid (intentionally asymmetric, not a 3-card row)
   ============================================================ */
.craft { padding-block: clamp(4rem, 8vw, 7rem); background: var(--bg-dark); }
.craft .section-header { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

.craft-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(150px, 19vw, 228px);
  gap: 14px;
}
.craft-lead     { grid-column: 1 / 8;  grid-row: 1 / 3; }
.craft-portrait { grid-column: 8 / 13; grid-row: 1 / 2; }
.craft-app      { grid-column: 8 / 13; grid-row: 2 / 4; }
.craft-slab     { grid-column: 1 / 8;  grid-row: 3 / 4; }

.craft-cell {
  position: relative; overflow: hidden; margin: 0;
  border: 1px solid var(--border); background: #0a0a0a; border-radius: 2px;
}
.craft-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.03) contrast(1.03);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.craft-cell:hover img { transform: scale(1.045); filter: saturate(1.08) contrast(1.05); }

.craft-cell figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: clamp(14px, 2vw, 22px) clamp(13px, 1.6vw, 18px) clamp(11px, 1.4vw, 15px);
  background: linear-gradient(to top, rgba(0,0,0,.84), rgba(0,0,0,.28) 58%, transparent);
  transform: translateY(6px); opacity: .92;
  transition: transform .45s ease, opacity .45s ease;
}
.craft-cell:hover figcaption { transform: translateY(0); opacity: 1; }
.craft-cell figcaption strong {
  font-family: 'DM Serif Display', serif; color: var(--accent);
  font-size: clamp(.98rem, 1.4vw, 1.18rem); letter-spacing: .01em; line-height: 1.15;
}
.craft-cell figcaption span { font-size: .76rem; color: #cbb89a; letter-spacing: .03em; }

.craft-cell .vf {
  position: absolute; width: 17px; height: 17px; border: 1.5px solid var(--accent);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 2;
}
.craft-cell:hover .vf { opacity: .9; }
.craft-cell .vf.tl { top: 10px; left: 10px;  border-width: 1.5px 0 0 1.5px; }
.craft-cell .vf.tr { top: 10px; right: 10px; border-width: 1.5px 1.5px 0 0; }
.craft-cell .vf.bl { bottom: 10px; left: 10px;  border-width: 0 0 1.5px 1.5px; }
.craft-cell .vf.br { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }

@media (max-width: 900px) {
  .craft-gallery { grid-auto-rows: clamp(128px, 22vw, 190px); gap: 11px; }
}
@media (max-width: 640px) {
  .craft-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 10px; }
  .craft-cell { grid-column: auto !important; grid-row: auto !important; }
  .craft-lead  { grid-column: 1 / 3 !important; aspect-ratio: 16 / 10; }
  .craft-slab  { grid-column: 1 / 3 !important; aspect-ratio: 16 / 9; }
  .craft-portrait { aspect-ratio: 3 / 4; }
  .craft-app   { aspect-ratio: 3 / 4; }
  .craft-cell .vf, .craft-cell figcaption { opacity: 1; }
  .craft-cell figcaption { transform: none; }
}

/* ---- single-image feature presentation (founder inspection) ---- */
.craft-feature{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(2rem,4.5vw,4.8rem); align-items:center; }
.craft-shot{ position:relative; margin:0; overflow:hidden; border:1px solid var(--border); border-radius:3px; background:#0a0a0a; aspect-ratio:4/4.3; }
.craft-shot img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.craft-shot:hover img{ transform:scale(1.04); }
.craft-shot figcaption{ position:absolute; left:14px; bottom:13px; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-light); background:rgba(0,0,0,.55); padding:5px 10px; border:1px solid rgba(255,244,212,.15); }
.craft-shot .vf{ position:absolute; width:22px; height:22px; border:1.5px solid var(--accent); opacity:.5; transition:opacity .35s ease; pointer-events:none; z-index:2; }
.craft-shot:hover .vf{ opacity:.95; }
.craft-shot .vf.tl{ top:12px; left:12px; border-width:1.5px 0 0 1.5px; }
.craft-shot .vf.tr{ top:12px; right:12px; border-width:1.5px 1.5px 0 0; }
.craft-shot .vf.bl{ bottom:12px; left:12px; border-width:0 0 1.5px 1.5px; }
.craft-shot .vf.br{ bottom:12px; right:12px; border-width:0 1.5px 1.5px 0; }
.craft-copy .section-eyebrow{ display:inline-block; margin-bottom:1rem; }
.craft-copy .section-title{ text-align:left; margin:0 0 1.2rem; }
.craft-copy .section-description{ text-align:left; margin:0 0 1.7rem; max-width:48ch; }
.craft-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.75rem; }
.craft-points li{ position:relative; padding-left:1.5rem; color:var(--text-primary); font-size:.92rem; letter-spacing:.01em; }
.craft-points li::before{ content:''; position:absolute; left:1px; top:.5em; width:7px; height:7px; border:1px solid var(--accent); transform:rotate(45deg); }
@media (max-width:768px){
  .craft-feature{ grid-template-columns:1fr; gap:1.8rem; }
  .craft-shot{ aspect-ratio:4/3.6; }
  .craft-shot .vf, .craft-shot figcaption{ opacity:1; }
  .craft-copy .section-title{ font-size:clamp(1.7rem,7vw,2.3rem); }
}

/* ---- full-bleed cinematic feature (single power image) ---- */
.craft { padding-block: clamp(3.5rem, 9vw, 7.5rem); background: #000; }
.craft-cinema { position: relative; width: 100%; min-height: clamp(420px, 64vh, 700px); overflow: hidden; background: #000; }
.craft-cinema > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 36%;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: transform 1.3s cubic-bezier(.2,.7,.2,1);
}
.craft-cinema:hover > img { transform: scale(1.05); }
.craft-cinema::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.55) 24%, rgba(0,0,0,.06) 52%, transparent 78%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 42%, transparent 70%);
}
.craft-cinema-overlay {
  position: absolute; left: 0; bottom: 0; z-index: 3; max-width: 660px;
  padding: clamp(1.8rem, 5vw, 4.5rem) clamp(1.4rem, 5vw, 5rem);
}
.craft-cinema-overlay .section-eyebrow { display: inline-block; margin-bottom: 1rem; }
.craft-cinema-title {
  font-family: 'DM Serif Display', serif; color: var(--accent);
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.01em; margin: 0 0 1rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.craft-cinema-overlay p {
  color: var(--accent-light); font-size: clamp(.9rem, 1.4vw, 1.05rem);
  line-height: 1.6; max-width: 44ch; margin: 0; opacity: .92;
}
.craft-cinema .vf {
  position: absolute; width: 26px; height: 26px; border: 1.5px solid var(--accent);
  opacity: .6; z-index: 4; pointer-events: none;
}
.craft-cinema .vf.tl { top: 18px; left: 18px;  border-width: 1.5px 0 0 1.5px; }
.craft-cinema .vf.tr { top: 18px; right: 18px; border-width: 1.5px 1.5px 0 0; }
.craft-cinema .vf.bl { bottom: 18px; left: 18px;  border-width: 0 0 1.5px 1.5px; }
.craft-cinema .vf.br { bottom: 18px; right: 18px; border-width: 0 1.5px 1.5px 0; }
/* Inside-the-Lab = STATIC "case file" dossier of the 3 RAWLITY inspectors. NO animation at all — a moving
   slider stuttered on this WebGL-heavy page no matter the technique, so the section reads as a dossier of
   framed exhibits: premium through composition + detail, not motion. Cannot stutter. (ซา 2026-06-26) */
.craft-head { text-align: center; max-width: 680px; margin: 0 auto clamp(2.2rem, 5vw, 3.8rem); padding: 0 1.5rem; }
.craft-head .section-eyebrow { display: inline-block; margin-bottom: 1rem; }
.craft-head .craft-cinema-title { text-shadow: none; }
.craft-head p { color: var(--accent-light); font-size: clamp(.9rem, 1.4vw, 1.05rem); line-height: 1.6;
  max-width: 46ch; margin: 1rem auto 0; opacity: .9; }
/* MARQUEE: all 3 inspectors on one long strip drifting left, looping seamlessly (the 3 are duplicated;
   translateX -50% = exactly one set so the wrap is invisible). Spacing via margin-right (not flex gap) so
   -50% aligns perfectly. Pure CSS transform (compositor) + 0 WebGL at this section → smooth. Edge mask =
   cards fade in/out at the sides (premium "endless" feel). Hover pauses. (ซา 2026-06-26 "ยาวกว่านี้ 3 คนพร้อมกัน") */
.craft-marquee-wrap { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.craft-marquee { display: flex; width: max-content; animation: craftMarquee 50s linear infinite; will-change: transform; }
.craft-file { flex: 0 0 clamp(360px, 48vw, 820px); aspect-ratio: 3 / 2;   /* match the 1500×1000 (3:2) photos → no crop, full image */
  margin-right: clamp(.9rem, 1.8vw, 1.6rem);
  position: relative; overflow: hidden; border-radius: 0;   /* sharp corners so the viewfinder marks sit flush */
  border: 1px solid rgba(239,216,185,.16); cursor: pointer;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s, box-shadow .45s; }
@keyframes craftMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.craft-marquee-wrap:hover .craft-marquee { animation-play-state: paused; }
.craft-file img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.craft-file .vf { position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--accent); opacity: .55; z-index: 2; pointer-events: none; transition: opacity .4s; }
.craft-file .vf.tl { top: 0; left: 0;  border-width: 1.5px 0 0 1.5px; }
.craft-file .vf.tr { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.craft-file .vf.bl { bottom: 0; left: 0;  border-width: 0 0 1.5px 1.5px; }
.craft-file .vf.br { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }
.craft-file-no { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-family: 'DM Serif Display', serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; color: var(--accent); letter-spacing: .03em;
  text-shadow: 0 2px 14px rgba(0,0,0,.7); transition: transform .4s, color .4s; }
/* --- hover micro-interactions: user-triggered + brief + compositor-friendly (transform/opacity), NOT a
   continuous loop — so they add "life"/feedback without bringing back the slider stutter. Hover one
   exhibit → the row dims to spotlight it, it lifts with a gold edge + glow, its photo zooms, the
   viewfinder corners brighten (camera "focus"), and its number turns white. --- */
.craft-dossier:hover .craft-file { opacity: .45; }
.craft-dossier .craft-file:hover {
  opacity: 1; transform: translateY(-6px);
  border-color: rgba(255,244,212,.5);
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,244,212,.22);
}
.craft-file:hover img { transform: scale(1.06); }
.craft-file:hover .vf { opacity: 1; }
.craft-file:hover .craft-file-no { transform: translateY(-3px); color: #fff; }
@media (max-width: 640px) {
  .craft-dossier { grid-template-columns: 1fr; gap: 1rem; max-width: 440px; }
  .craft-file { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-marquee { animation: none; }
  .craft-file, .craft-file img, .craft-file .vf, .craft-file-no { transition: none; }
  .craft-file:hover img, .craft-file:hover .craft-file-no { transform: none; }
}

@media (max-width: 640px) {
  .craft-cinema { min-height: 0; }
  .craft-cinema > img { position: relative; height: 58vh; }
  .craft-cinema::after { background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.25) 100%); }
  .craft-cinema-overlay { padding: 1.5rem 1.4rem 2rem; }
  .craft-cinema .vf { width: 18px; height: 18px; }
}

/* ---- Features mockup: real app demo in a phone frame ---- */
/* Replaces the static .mockup-img screenshot with a looping video of the
   RAWLITY Control app in actual use, wrapped in a dark-luxury device bezel. */
.app-phone {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 412 / 892;          /* matches the recorded video — no distortion */
  background: #000;
  border-radius: 44px;
  padding: 10px;
  border: 1px solid rgba(239, 216, 185, 0.16);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 244, 212, 0.05),
    inset 0 0 0 2px rgba(0, 0, 0, 0.9);
}
/* speaker/notch pill */
.app-phone::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 212, 0.06);
  z-index: 2;
  pointer-events: none;
}
.app-phone-screen {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 34px;
  object-fit: cover;
  background: #000;
}

/* ---- Trust bar: faint inspection photo backdrop ---- */
/* Adds a darkened, edge-faded loupe image behind the four proof points.
   Append-only: extends .trust-bar / .trust-grid without rewriting their base rules. */
.trust-bar { position: relative; overflow: hidden; }
.trust-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--bg-dark) 0%, rgba(8,8,8,0.80) 32%, rgba(8,8,8,0.80) 68%, var(--bg-dark) 100%),
    url('/images/714837484_1005434491944568_8991724219684254093_n.jpg') center 28% / cover no-repeat;
  opacity: 0.5;
  filter: grayscale(1) contrast(1.05);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
}
/* keep the numbers crisp and above the backdrop */
.trust-grid { position: relative; z-index: 1; }
/* dividers blend better over imagery */
.trust-item:not(:last-child)::after { background: rgba(239,216,185,0.18); }
@media (max-width: 640px) {
  .trust-bar::before { opacity: 0.4; background-position: center 24%; }
}

/* ---- Real-grade upgrade (PSA / BGS submission, RAWLITY-branded white-label) ---- */
.realgrade {
  padding: 9rem 2rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}
/* asymmetric split: left editorial intro, right one acrylic case holding both graders */
.rg-wrap {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 4rem;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.rg-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #f3e7c9;
  margin: 0 0 1.5rem;
}
.rg-lead {
  font-size: 0.96rem;
  line-height: 1.7;
  color: rgba(239, 216, 185, 0.62);
  max-width: 42ch;
  margin: 0 0 1.9rem;
}
.rg-points { list-style: none; margin: 0 0 2.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.rg-points li {
  position: relative; padding-left: 2rem;
  font-size: 0.86rem; line-height: 1.5; letter-spacing: 0.01em;
  color: rgba(239, 216, 185, 0.78);
}
.rg-points li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 16px; height: 1px; background: var(--accent); opacity: 0.7;
}
.rg-cta { display: inline-flex; margin-bottom: 1.3rem; }
.rg-fineprint { font-size: 0.64rem; line-height: 1.6; letter-spacing: 0.02em; color: rgba(239, 216, 185, 0.34); max-width: 42ch; margin: 0; }

/* the case = one acrylic slab (echoes hero slab) holding the PSA + BGS comparison */
.rg-case {
  position: relative;
  padding: 22px 12px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(58,54,46,0.55), rgba(18,16,12,0.42) 42%, rgba(48,44,36,0.5)),
    radial-gradient(120% 80% at 50% 0%, rgba(255,244,212,0.06), transparent 60%);
  border: 1px solid rgba(239,216,185,0.16);
  box-shadow: 0 30px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.rg-case:hover { transform: translateY(-5px); box-shadow: 0 44px 84px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,255,255,0.08); }
.rg-glare {
  position: absolute; inset: 0; border-radius: 18px; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.14) 48%, rgba(255,255,255,0.03) 54%, transparent 62%);
  opacity: 0.45; transition: opacity 0.4s ease;
}
.rg-case:hover .rg-glare { opacity: 0.9; }
.rg-case .vf { position: absolute; width: 20px; height: 20px; border: 1.5px solid var(--accent); opacity: 0.5; z-index: 5; pointer-events: none; }
.rg-case .vf.tl { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.rg-case .vf.tr { top: 10px; right: 10px; border-width: 1.5px 1.5px 0 0; }
.rg-case .vf.bl { bottom: 10px; left: 10px; border-width: 0 0 1.5px 1.5px; }
.rg-case .vf.br { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }

.rg-cols { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; }
.rg-col { padding: 4px 18px; display: flex; flex-direction: column; }
.rg-col + .rg-col { border-left: 1px solid rgba(239,216,185,0.1); }
.rg-plate { text-align: center; padding: 6px 0 13px; margin-bottom: 11px; border-bottom: 1px solid rgba(239,216,185,0.14); }
.rg-co {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem; line-height: 0.9; letter-spacing: 0.08em;
  display: block; color: #f0e4ca; text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.rg-holo {
  display: block; height: 3px; width: 54%; margin: 9px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, #9a6e2a, #f5c451, #fff4d4, #f5c451, #9a6e2a);
  opacity: 0.75;
}
.rg-col.psa .rg-holo { background: linear-gradient(90deg, #7a1f15, #e74c3c, #ffd9c9, #e74c3c, #7a1f15); }
/* cream brand marks in the cert plate (generated theme-tinted versions) */
.rg-logo { display: block; margin: 0 auto; width: auto; }
.rg-col.psa .rg-logo { height: 28px; }
.rg-col.bgs .rg-logo { height: 54px; }
.rg-tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rg-tier { padding: 0.6rem 0; border-bottom: 1px solid rgba(239,216,185,0.07); }
.rg-tier:last-child { border-bottom: none; }
.rg-tname { font-size: 0.82rem; font-weight: 500; color: #efd8b9; display: flex; flex-direction: column; }
.rg-tname small { font-size: 0.56rem; font-weight: 400; letter-spacing: 0.02em; color: rgba(239,216,185,0.4); margin-top: 1px; }
.rg-row2 { display: flex; justify-content: space-between; align-items: baseline; margin-top: 3px; }
.rg-days { font-family: ui-monospace, 'Courier New', monospace; font-size: 0.56rem; letter-spacing: 0.08em; color: rgba(239,216,185,0.45); }
.rg-price { font-family: 'DM Serif Display', serif; font-size: 1.15rem; line-height: 1; letter-spacing: 0.02em; color: #f0e4ca; }
.rg-col-foot { margin-top: auto; padding-top: 0.9rem; border-top: 1px dashed rgba(239,216,185,0.16); font-size: 0.6rem; letter-spacing: 0.02em; color: rgba(239,216,185,0.5); text-align: center; }

@media (max-width: 860px) {
  .rg-wrap { grid-template-columns: 1fr; gap: 2.6rem; }
  .rg-intro { text-align: center; }
  .rg-points { max-width: 30ch; margin-left: auto; margin-right: auto; text-align: left; }
  .rg-lead { margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) { .realgrade { padding: 6rem 1.2rem; } }
@media (max-width: 460px) {
  .rg-cols { grid-template-columns: 1fr; gap: 0.5rem; }
  .rg-col + .rg-col { border-left: none; border-top: 1px solid rgba(239,216,185,0.1); padding-top: 14px; margin-top: 6px; }
}

/* ---- Real-grade TEASER (landing): mentions the onward PSA/BGS path, no prices ---- */
.rg-teaser {
  padding: 7rem 2rem 7.5rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}
.rg-teaser-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.rg-teaser-rule {
  display: block; width: 40px; height: 1px; margin: 0 auto 2rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.6;
}
.rg-teaser-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.01em;
  color: #f3e7c9; margin: 0 0 1.1rem;
}
.rg-teaser-text {
  font-size: 0.95rem; line-height: 1.75;
  color: rgba(239, 216, 185, 0.6);
  max-width: 50ch; margin: 0 auto 1.8rem;
}
.rg-teaser-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(239, 216, 185, 0.3); padding-bottom: 4px;
  transition: border-color 0.25s ease, gap 0.25s ease;
}
.rg-teaser-link:hover { border-color: var(--accent); gap: 0.8rem; }
.rg-teaser-arrow { transition: transform 0.25s ease; }
.rg-teaser-link:hover .rg-teaser-arrow { transform: translateX(3px); }
/* subtle "we submit to" cream logo row (no prices) */
.rg-teaser-marks { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 2.6rem; }
.rg-teaser-marks-label { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(239, 216, 185, 0.4); }
.rg-mark { width: auto; opacity: 0.72; transition: opacity 0.25s ease; }
.rg-mark:hover { opacity: 1; }
.rg-mark-psa { height: 17px; }
.rg-mark-bgs { height: 33px; }
.rg-mark-txt { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: 0.06em; font-size: 0.92rem; color: rgba(239, 216, 185, 0.85); }
.rg-mark-sep { width: 1px; height: 20px; background: rgba(239, 216, 185, 0.18); }
/* Teaser PSA/Beckett logos — frameless, large, cream transparent PNGs (not buttons) */
.rg-teaser-marks { flex-direction: column; gap: 1.5rem; }
.rg-teaser-logos { display: flex; gap: 3.6rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.rg-biglogo { width: auto; opacity: .9; pointer-events: none; user-select: none; }
.rg-biglogo-psa { height: 54px; }
.rg-biglogo-bgs { height: 88px; }
@media (max-width: 520px) { .rg-teaser-logos { gap: 2.2rem; } .rg-biglogo-psa { height: 40px; } .rg-biglogo-bgs { height: 66px; } }
@media (max-width: 600px) { .rg-teaser { padding: 5rem 1.4rem 5.5rem; } .rg-teaser-marks { gap: 1rem; flex-wrap: wrap; } }

/* Onward-submission CREDENTIAL strip (nominative use): brand NAMES in our own
   type + viewfinder corners. No third-party logos, never paired as "partners". */
.rg-cred { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.7rem 2.7rem; }
.rg-cred-c { position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--accent-light); opacity: .5; }
.rg-cred-c.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.rg-cred-c.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.rg-cred-c.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.rg-cred-c.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.rg-cred-label { display: flex; align-items: center; gap: .85rem; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(239, 216, 185, .45); }
.rg-cred-label::before, .rg-cred-label::after { content: ""; width: 24px; height: 1px; background: rgba(239, 216, 185, .3); }
.rg-cred-names { display: flex; align-items: center; gap: 1.5rem; font-family: 'DM Serif Display', serif; font-size: 2.5rem; line-height: 1; color: var(--accent); }
.rg-cred-div { width: 1px; height: 1.7rem; background: rgba(239, 216, 185, .38); }
.rg-teaser-disclaimer { margin: 1.6rem auto 0; max-width: 460px; font-size: .72rem; line-height: 1.6; color: rgba(239, 216, 185, .34); }
@media (max-width: 520px) { .rg-cred-names { font-size: 2rem; gap: 1.1rem; } .rg-cred { padding: 1.5rem 1.6rem; } }

/* Onward-grading OFFER popup + submission TIMELINE styles (Phase 32: 32.7/32.8)
   live in the portable /grading-offer.css (linked by report.html + collection.html
   etc.), so the popup works on pages that do NOT load this big stylesheet. */

/* ============================================================
   Pricing — recommended-tier emphasis (additive · 2026-06-11)
   The .tier.featured hooks existed but were never applied. JS now
   flags Value Pack as featured; these rules give it real "most
   popular" presence. Purely additive — other tiers' rules untouched.
   ============================================================ */

/* gentle hover lift so every tier feels alive (skill: no flat cards) */
.tier { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease; }
.tier:not(.featured):hover { transform: translateY(-5px); border-color: rgba(239,216,185,.28); }

/* SPECIAL FRAME on the recommended card — a brighter cream border, a soft
   outer cream ring + glow, and a warm top sheen. NO lift/scale, so its price
   and feature rows stay aligned with the other tiers (the offset that read
   as "ไม่สมมาตร" is gone); the frame alone carries the emphasis. */
.tier.featured {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(255,244,212,.06) 0%, rgba(255,244,212,0) 46%), #0c0a07;
  border-color: rgba(255,244,212,.62);
  box-shadow:
    0 0 0 1px rgba(255,244,212,.3),            /* one crisp cream frame line */
    0 24px 60px -30px rgba(0,0,0,.9),
    0 0 60px -14px rgba(255,244,212,.22);       /* one soft warm glow */
}
.tier.featured:hover { box-shadow:
    0 0 0 1px rgba(255,244,212,.45),
    0 24px 60px -30px rgba(0,0,0,.9),
    0 0 72px -10px rgba(255,244,212,.3); }
.tier.featured .tier-name { color: var(--accent, #FFF4D4); }

/* "Most popular" ribbon — pinned ON the top edge (absolute, so it never
   pushes the price/features down → cards stay aligned) */
.tier-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  z-index: 4;
  background: var(--accent, #FFF4D4); color: #1a1206;
  font-family: 'DM Sans', sans-serif; font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .34rem .85rem; border-radius: 30px; white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(255,244,212,.5);
}

/* ============================================================
   Mobile nav — unify the right-side icon cluster (additive · 2026-06-11)
   Before: globe (14px svg) + bell (18px) + ☰ glyph (1.5rem) were three
   different sizes/styles crammed together. Now: equal 36px tap targets,
   even spacing, one cream tint, soft rounded press state — and the ☰
   text glyph is replaced by clean CSS-drawn bars that match the SVG icons.
   CSS-only so it applies to every page's nav without touching markup.
   ============================================================ */
@media (max-width: 880px) {
  .nav-right { gap: .15rem; }

  /* globe (language) → icon button matching the others */
  .nav-lang {
    width: 36px; height: 36px; justify-content: center;
    border-radius: 10px; color: rgba(239,216,185,.72);
    transition: background .2s, color .2s;
  }
  .nav-lang svg { width: 18px; height: 18px; }
  .nav-lang:hover, .nav-lang:active { background: rgba(239,216,185,.08); color: var(--accent); }

  /* notification bell → same box + press state, drop its extra right margin */
  .rwl-bell { width: 36px !important; height: 36px !important; margin-right: 0 !important; border-radius: 10px; }
  .rwl-bell:hover, .rwl-bell:active { background: rgba(239,216,185,.08); }

  /* hamburger → 3 clean CSS bars (the .mmb-bars span) that morph to an X */
  .mobile-menu-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: .1rem; border-radius: 10px;
    font-size: 0; color: rgba(239,216,185,.82);
    transition: background .2s, color .2s;
  }
  .mmb-bars { position: relative; }
  .mmb-bars, .mmb-bars::before, .mmb-bars::after {
    content: ''; display: block; width: 19px; height: 1.7px;
    border-radius: 2px; background: currentColor;
    transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s ease, background .2s ease;
  }
  .mmb-bars::before, .mmb-bars::after { position: absolute; left: 0; }
  .mmb-bars::before { transform: translateY(-6px); }
  .mmb-bars::after  { transform: translateY(6px); }
  .mobile-menu-btn:hover, .mobile-menu-btn:active { background: rgba(239,216,185,.08); color: var(--accent); }

  /* open state: middle bar fades, top/bottom rotate into an X (in a soft box) */
  body.menu-open .mobile-menu-btn { background: rgba(239,216,185,.07); color: var(--accent); }
  body.menu-open .mmb-bars { background: transparent; }
  body.menu-open .mmb-bars::before { transform: translateY(0) rotate(45deg); }
  body.menu-open .mmb-bars::after  { transform: translateY(0) rotate(-45deg); }
}

/* ============================================================
   Mobile nav MENU — slide-in drawer (additive · 2026-06-11, revised).
   Per user feedback: the panel SLIDES in horizontally (parked off the
   right edge, slides left into view — and slides back out on close),
   LOGIN sits top-right, the RAWLITY mark sits near flush-left, and the
   list is just PRICING / POPULATION / ABOUT (the small RC app mark is
   hidden inside the menu). Slide is transform-based so it animates both
   ways; nav's backdrop-filter still makes it the containing block, so we
   size with height (not bottom:0).
   ============================================================ */
@media (max-width: 880px) {
  body.menu-open { overflow: hidden; }

  /* RAWLITY mark almost flush to the left edge */
  .nav-container { padding-left: .9rem; padding-right: .9rem; }

  /* off-canvas drawer: always mounted, parked off the right edge when closed.
     Selectors are scoped under `nav` (and repeat .active) so they out-specify
     the original mobile dropdown rules (.nav-links.active{position:absolute…}). */
  nav .nav-links {
    display: flex; position: fixed; top: 52px; left: 0; right: 0;
    height: calc(100dvh - 52px);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 0; margin: 0; padding: 4.4rem 0 2rem;
    background: #0a0a0a;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); visibility: hidden; pointer-events: none;
    transition: transform .36s cubic-bezier(.16,1,.3,1), visibility 0s linear .36s;
  }
  nav .nav-links.active {
    position: fixed; top: 52px; left: 0; right: 0;
    height: calc(100dvh - 52px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0a0a0a;
    transform: translateX(0); visibility: visible; pointer-events: auto;
    transition: transform .36s cubic-bezier(.16,1,.3,1), visibility 0s;
  }

  /* RC APP is a text link now (last item) — every item shows in the drawer */
  nav .nav-links li { width: 100%; border-bottom: 1px solid rgba(239,216,185,.07); }

  nav .nav-links.active a {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 1.4rem 1.6rem; width: 100%; text-align: left;
    font-size: 1.18rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(239,216,185,.8);
    transition: color .6s cubic-bezier(.06,.81,0,.98), background .25s ease, padding-left .25s ease;
  }
  nav .nav-links.active a:hover, nav .nav-links.active a:active {
    color: var(--accent); background: rgba(239,216,185,.035); padding-left: 1.9rem;
  }

  /* LOGIN reused as a button pinned to the TOP-RIGHT of the drawer */
  body.menu-open .nav-cta {
    display: block; position: fixed; top: 66px; right: .9rem; left: auto; bottom: auto;
    z-index: 1001; padding: .62rem 1.5rem; border-radius: 2px;
    font-size: .78rem; letter-spacing: .16em; color: var(--accent);
    background: rgba(239,216,185,.06); border: 1px solid rgba(239,216,185,.5);
  }
}

/* ============================================================
   How It Works — process connector rail (additive · 2026-06-11).
   Completes the section's "process connector" intent: a hairline rail
   links the four outlined numerals 01→04 with a glowing node in each
   gap, so the steps read as one guided journey instead of four loose
   cards. Desktop 4-up only (the grid stacks ≤1024, where a single
   horizontal rail wouldn't apply). Purely additive.
   ============================================================ */
@media (min-width: 1025px) {
  .how-grid::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: 66px; left: 11.5%; right: 11.5%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239,216,185,.22) 6%, rgba(239,216,185,.22) 94%, transparent);
  }
  .how-step { z-index: 1; }
  .how-step:not(:last-child)::after {
    content: ''; position: absolute; z-index: 2; pointer-events: none;
    top: 66px; right: -12px; transform: translate(50%, -50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent, #FFF4D4);
    box-shadow: 0 0 0 4px rgba(255,244,212,.08), 0 0 12px -2px rgba(255,244,212,.55);
  }
}

/* ============================================================
   Global focus-visible + tap polish (additive · 2026-06-11).
   Keyboard users get ONE consistent cream focus ring on every
   interactive element; mouse/touch clicks show nothing extra
   (:focus-visible only). Removes the blue/grey mobile tap flash so
   presses read with the buttons' own :active feedback instead.
   ============================================================ */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid rgba(255,244,212,.7);
  outline-offset: 3px;
  border-radius: 2px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(255,244,212,.55);
  outline-offset: 1px;
}
:focus:not(:focus-visible) { outline: none; }
a, button, [role="button"], input, textarea, select { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   Pricing slider (additive · 2026-06-12). Replaces the fixed tier cards
   with a Resend-style drag-to-quantity estimator: per-card price drops
   with volume (฿300 → ฿200), all-in (shipping folded in). Mirrors the
   server schedule in migration 043 / verify-slip v13.
   ============================================================ */
.price-slider-wrap { max-width: 660px; margin: 0 auto; text-align: center; padding: 0 1rem; }
/* Compact live readout above the slider (no giant number — the heading carries the
   visual weight; the slider just gives quiet live feedback). */
.ps-readout { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.8rem; font-family: 'DM Sans', sans-serif; }
.ps-rd { font-size: 1rem; color: rgba(239,216,185,.7); }
.ps-rd strong { font-family: 'DM Serif Display', serif; font-weight: 400; color: var(--accent); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ps-rd-total strong { font-size: 1.7rem; }
.ps-rd-dot { color: rgba(239,216,185,.28); }
.ps-qty-lbl { color: rgba(239,216,185,.55); }

.ps-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: 5px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--ps-fill, 0%), rgba(239,216,185,.14) var(--ps-fill, 0%));
}
.ps-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  border: 4px solid #0a0a0a; cursor: grab;
  box-shadow: 0 0 0 1px rgba(239,216,185,.4), 0 6px 18px -3px rgba(255,244,212,.5);
  transition: transform .12s ease;
}
.ps-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.ps-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  border: 4px solid #0a0a0a; cursor: grab;
  box-shadow: 0 0 0 1px rgba(239,216,185,.4), 0 6px 18px -3px rgba(255,244,212,.5);
}
.ps-range::-moz-range-progress { background: transparent; }

/* Ticks are absolutely positioned by JS to sit exactly under each thumb stop
   (native range insets the thumb by its radius, so even spacing would misalign). */
.ps-ticks { position: relative; height: 1.1em; margin-top: 1rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; letter-spacing: .06em; color: rgba(239,216,185,.4); }
.ps-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ps-note { margin: 2.2rem auto 1.9rem; max-width: 460px; font-size: .84rem; line-height: 1.6; color: rgba(239,216,185,.82); }
.ps-cta {
  display: inline-block; padding: .95rem 2.6rem;
  border: 1px solid rgba(239,216,185,.5); border-radius: 2px;
  color: var(--accent); text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.ps-cta:hover { background: rgba(239,216,185,.08); border-color: var(--accent); }
.ps-cta:active { transform: translateY(1px); }

/* Volume-bracket cards under the slider — full .tier cards (name · per-card price ·
   feature list · Submit). The bracket containing the slider value gets .featured;
   tapping a card jumps the slider there. */
/* Compact volume cards — just range · per-card price · saving · Submit (the shared
   feature list lives once in .ps-included below, so the cards stay short + breathable). */
/* Clean 4-card grid — 3 packs (1 / 10 / 50) + Custom: the research-backed sweet spot
   (~3 options), comfortable width, no cramming. */
.ps-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: stretch; max-width: 1280px; margin: 3.2rem auto 0; padding: 0 1.5rem; }
/* Full size cards — heading · big ALL-IN total · per-card rate · feature list · Submit.
   Every card is full-opacity; the recommended pack ("10") carries the cream highlight. */
.ps-card { padding: 2.8rem 1.9rem 2.1rem; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
.ps-card:hover { transform: translateY(-4px); border-color: rgba(239,216,185,.28); }
.psc-head { text-align: center; font-family: 'DM Sans', sans-serif; font-size: .85rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(239,216,185,.6); margin-bottom: 1rem; }
.ps-card.featured .psc-head { color: rgba(239,216,185,.85); }
/* "Most popular" badge — slot reserved on every card (so totals align), shown on featured */
.ps-card-tag { display: block; visibility: hidden; margin: 0 auto .9rem; width: fit-content;
  font-family: 'DM Sans', sans-serif; font-size: .54rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #1a1206; background: var(--accent); padding: .24rem .6rem; border-radius: 20px; }
.ps-card.featured .ps-card-tag { visibility: visible; }
.ps-card .tier-price { margin-bottom: .3rem; font-size: 2.7rem; }
.psc-price-custom { font-size: 1.8rem !important; }
/* the big number above IS the all-in total; this line is the per-card rate */
.psc-sub { text-align: center; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: rgba(239,216,185,.5); }
.ps-card.featured .psc-sub { color: rgba(239,216,185,.72); }
/* in-card feature list (short labels → one line each) */
.ps-card .tier-rule { margin: 1.5rem 0; }
.ps-feats { list-style: none; padding: 0; margin: 0 0 1.7rem; display: flex; flex-direction: column; gap: .7rem; text-align: left; }
.ps-feats li { display: flex; align-items: center; gap: .5rem; font-family: 'DM Sans', sans-serif; font-size: .8rem; line-height: 1.3; white-space: nowrap; color: rgba(239,216,185,.78); }
.ps-card.featured .ps-feats li { color: var(--accent); }
.ps-fic { width: 14px; height: 14px; flex: 0 0 14px; display: inline-flex; }
.ps-fic svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .ps-cards { grid-template-columns: repeat(2, 1fr); max-width: 540px; } }
@media (max-width: 480px) { .ps-cards { grid-template-columns: 1fr; max-width: 330px; } }

/* Custom amount button (Resend's Enterprise/Custom, as a button per the brief) */
.ps-custom-btn { display: inline-block; margin-bottom: 1.2rem; padding: .9rem 2.2rem;
  border: 1px solid rgba(239,216,185,.5); border-radius: 2px; color: var(--accent); text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .1s ease; }
.ps-custom-btn:hover { background: rgba(239,216,185,.08); border-color: var(--accent); }
.ps-custom-btn:active { transform: translateY(1px); }

/* Shared "what's included" — shown once (identical at every volume). */
.ps-included { max-width: 760px; margin: 3.2rem auto 0; padding: 1.9rem 2.2rem; border: 1px solid rgba(239,216,185,.1); border-radius: 16px; background: rgba(255,244,212,.015); }
.ps-inc-title { text-align: center; font-family: 'DM Sans', sans-serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(239,216,185,.5); margin-bottom: 1.4rem; }
.ps-inc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem 1.6rem; }
.ps-inc-list li { display: flex; align-items: center; gap: .55rem; font-family: 'DM Sans', sans-serif; font-size: .82rem; color: rgba(239,216,185,.82); }
.ps-inc-list .tier-ic { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; }
.ps-inc-list .tier-ic svg { width: 18px; height: 18px; }
.ps-inc-list small { color: rgba(239,216,185,.42); font-size: .72rem; }
@media (max-width: 720px) { .ps-included { padding: 1.6rem 1.4rem; } .ps-inc-list { grid-template-columns: 1fr; gap: .8rem; } }

.ps-cta-row { text-align: center; margin-top: 2.6rem; }
.ps-cta-row .ps-note { margin: 0 auto; }

/* All four price lines reserve the same height so the divider + feature lists line
   up, even though "Any amount" (Custom) is a smaller face than the ฿ totals. */
.ps-cards .ps-card .tier-price { display: flex; align-items: center; justify-content: center; min-height: 3rem; }

/* ============================================================
   Pricing cards — VIEWFINDER frame (2026-06-12).
   The rounded-SaaS look read off-brand. Each card is now a camera
   viewfinder: sharp 3px geometry, a near-invisible hairline, and four
   cream corner ticks that tighten inward on hover (focus-lock feel) —
   the same motif as the CTA buttons and the PSA/BGS frame on /about.
   ============================================================ */
.ps-cards .ps-card {
  border-radius: 3px;
  border-color: rgba(239,216,185,.07);
  background: linear-gradient(180deg, rgba(255,244,212,.025) 0%, rgba(255,244,212,0) 42%), #0b0905;
}
.ps-cards .ps-card::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none; z-index: 3;
  --ck: rgba(239,216,185,.6);
  background:
    linear-gradient(var(--ck),var(--ck)) left 0 top 0 / 16px 1px,
    linear-gradient(var(--ck),var(--ck)) left 0 top 0 / 1px 16px,
    linear-gradient(var(--ck),var(--ck)) right 0 top 0 / 16px 1px,
    linear-gradient(var(--ck),var(--ck)) right 0 top 0 / 1px 16px,
    linear-gradient(var(--ck),var(--ck)) left 0 bottom 0 / 16px 1px,
    linear-gradient(var(--ck),var(--ck)) left 0 bottom 0 / 1px 16px,
    linear-gradient(var(--ck),var(--ck)) right 0 bottom 0 / 16px 1px,
    linear-gradient(var(--ck),var(--ck)) right 0 bottom 0 / 1px 16px;
  background-repeat: no-repeat;
  opacity: .45;
  transition: inset .32s cubic-bezier(.16,1,.3,1), opacity .32s ease;
}
.ps-cards .ps-card:hover::after { inset: 4px; opacity: .95; }
/* featured = corners always locked-in + bright (reads "in focus") */
.ps-cards .ps-card.featured::after { --ck: rgba(255,244,212,.95); inset: 4px; opacity: 1; }
/* featured keeps its glow but drops the full bright outline — the corners ARE the frame */
.ps-cards .ps-card.featured {
  border-color: rgba(255,244,212,.22);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), 0 0 60px -14px rgba(255,244,212,.18);
}
.ps-cards .ps-card.featured:hover { box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), 0 0 72px -10px rgba(255,244,212,.26); }
/* sharpen the inner pieces to match the frame geometry */
.ps-cards .ps-card .tier-cta { border-radius: 2px; }
.ps-cards .ps-card .tier-cta::before { border-radius: 2px; }
.ps-cards .ps-card .ps-card-tag { border-radius: 2px; }
/* MOST POPULAR badge straddles the featured card's TOP BORDER, centered (ซา 2026-06-14).
   Absolute → out of flow, so all four cards keep equal height automatically. */
.ps-cards .ps-card .ps-card-tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -58%);
  z-index: 6; margin: 0; white-space: nowrap; line-height: 1; overflow: hidden;
  font-size: .42rem; letter-spacing: .08em; padding: .15rem .46rem;
  box-shadow: 0 0 0 1px rgba(255,244,212,.5), 0 0 15px -1px rgba(255,232,160,.8), 0 3px 9px -3px rgba(0,0,0,.6);
}
/* standout: a light sweep (shimmer) across the featured badge + brighter heading (ซา 2026-06-14) */
.ps-cards .ps-card.featured .ps-card-tag::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
  transform: translateX(-130%); animation: rwlBadgeShine 2.8s ease-in-out infinite;
}
@keyframes rwlBadgeShine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.ps-cards .ps-card.featured .psc-head { color: #FFF4D4; }
@media (prefers-reduced-motion: reduce) {
  .ps-cards .ps-card.featured .ps-card-tag::after { animation: none; opacity: 0; }
}

/* ════════ 3D SLAB PRESET (2026-06-13) ════════
   Homepage hero now uses the SAME clear-sleeve + printed-sticker slab as
   My Collection (sticker art painted by label-preset.js — identical to the
   physical print). Scoped under .slab3d so the legacy acrylic .slab rules
   above keep working anywhere else. */
.slab.slab3d{max-width:330px;aspect-ratio:84/123;border-radius:11px 11px 16px 16px;padding:0;overflow:hidden;
  /* semi-rigid PVC: a faint cool film tints the whole body so it reads as cloudy
     plastic, not glass. layered grad = soft top sheen + body haze + bottom shade */
  background:
    radial-gradient(120% 60% at 50% -8%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(180deg,rgba(214,224,232,.05),rgba(255,255,255,.015) 22%,rgba(255,255,255,.02) 78%,rgba(120,130,140,.07));
  border:1px solid rgba(255,255,255,.28);
  /* THICKNESS — light comes top-left, so the moulded rim is lit on the top/left and
     falls to shadow on the bottom/right; a hard bottom face + a tight contact shadow
     under a wide ambient drop make it read as a solid block lifted off the page */
  box-shadow:
    0 7px 15px -6px rgba(0,0,0,.72),               /* tight contact shadow */
    0 44px 90px -24px rgba(0,0,0,.85),             /* wide ambient drop */
    0 0 60px -20px rgba(255,244,212,.15),          /* gold halo */
    0 5px 0 -2px rgba(7,8,10,.92),                 /* visible bottom thickness face */
    inset 0 2px 0 rgba(255,255,255,.65),           /* crisp top edge highlight */
    inset 2px 2px 1px rgba(255,255,255,.18),       /* top-left lit bevel */
    inset 3px 4px 9px rgba(255,255,255,.05),
    inset -2px -2px 1px rgba(0,0,0,.5),            /* bottom-right shadowed bevel */
    inset -3px -5px 11px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(196,224,228,.16),         /* crystal-clear PVC cut-edge (cool tint) */
    inset 0 0 24px rgba(150,160,170,.05);}
/* card-saver top mouth: the prominent 1/2" insertion lip (≈9% of a real CSI's height)
   — flared open slot, hard highlight on the lip, the inner edge falls to shadow */
.slab.slab3d::before{top:0;left:0;right:0;width:auto;height:9%;transform:none;border-radius:11px 11px 4px 4px / 11px 11px 10px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(214,232,235,.07) 42%,rgba(0,0,0,.18));
  border-bottom:1px solid rgba(0,0,0,.24);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.78),inset 0 -1px 2px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.25);}
/* ── CRYSTAL-CLEAR glossy PVC surface: crisp specular streaks (glossy plastic = sharp
   highlights, not diffuse frost) + a soft flex-curve sheen (the semi-rigid holder bows
   gently and catches one broad band) — above card & sticker, below the moving glare ── */
.slab.slab3d::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(101deg,transparent 0 11%,rgba(255,255,255,.075) 15%,rgba(255,255,255,.02) 21%,transparent 30% 49%,rgba(255,255,255,.095) 53%,rgba(255,255,255,.03) 58%,transparent 68% 81%,rgba(255,255,255,.055) 85%,transparent 90%),
    radial-gradient(150% 95% at 26% 20%,rgba(255,255,255,.05),transparent 44%),
    linear-gradient(-58deg,transparent 0 32%,rgba(255,255,255,.03) 45%,transparent 53% 100%),
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 13%);
  mix-blend-mode:screen;opacity:.95;}
.slab.slab3d .slab-glare{border-radius:0;z-index:7;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.3) 47%,rgba(255,255,255,.06) 53%,transparent 64%);background-size:250% 250%;background-position:var(--gx,30%) var(--gy,0%);}
/* the faintest satin micro-texture — real PVC is "crystal-clear with minimal tint",
   not frosted, so this is just a whisper of grain to kill the digital-perfect flatness */
.slab.slab3d .slab-glare::before{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;
  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.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:130px 130px;mix-blend-mode:soft-light;opacity:.07;}
/* the WHITE PAPER INSERT — edges flush with the BLACK RAWLITY BOX (founder
   2026-06-13): box = 310/448 of the sticker (which is 86% wide at left 7%), so
   paper left/right = 7% + 86%·(69/448) = 20.25%, top = box top (design y6),
   running down to the sticker bottom (design y200) → aspect 310/194. All label
   content is box-locked since v4.1, so everything sits on this paper strip. */
.slab.slab3d .slab-paper{display:none;position:absolute;top:0.8%;left:20.25%;right:20.25%;height:auto;aspect-ratio:310/194;z-index:0;border-radius:2px;
  background:linear-gradient(168deg,#f7f6f2,#edebe5 58%,#e9e6df);
  box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 1px rgba(0,0,0,.4);}
/* the card sits LOW in the sleeve like the real toploader — over the paper insert */
.slab.slab3d .slab-card{position:absolute;top:26%;left:12.5%;right:12.5%;bottom:2.5%;z-index:1;border-radius:4px;overflow:hidden;background:#0d0b07;margin:0;flex:none;
  /* RECESSED into the frame well — dark moulded wall on top/left (frame casting in),
     a thin lit lip on the bottom edge, sitting on its own drop */
  box-shadow:0 1px 0 rgba(255,255,255,.14),-1px -1px 0 rgba(0,0,0,.5),0 -2px 5px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.55);}
.slab.slab3d .slab-card > img{width:100%;height:100%;object-fit:contain;display:block;}
/* the card sits BEHIND a pane of semi-rigid PVC, recessed in the well — directional
   pane sheen (top-left) + a beveled inner wall (dark TL, faint-lit BR) for depth */
.slab.slab3d .slab-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(214,224,232,.04) 28%,transparent 52%),
    linear-gradient(0deg,rgba(0,0,0,.14),transparent 22%);
  /* beveled inner wall: deep shadow biting from top-left, a faint lit edge bottom-right */
  box-shadow:inset 3px 4px 9px rgba(0,0,0,.6),inset 1px 2px 4px rgba(0,0,0,.55),inset -2px -2px 5px rgba(255,255,255,.05),inset 0 0 14px rgba(0,0,0,.4);}
/* the printed sticker — truly CLEAR vinyl like the real product: transparent PNG
   (black ink + white underlay baked in by RawlityLabel) over only a faint plastic
   sheen + edge highlight, no white panel */
.slab.slab3d .slab-label{position:absolute;top:2%;left:50%;right:auto;transform:translateX(-50%);width:62%;min-width:0;max-width:none;bottom:auto;height:auto;z-index:3;overflow:visible;border:none;border-radius:0;background:none;box-shadow:none;padding:0;margin:0;font-size:0;}
/* air-gap physics: the ink sits on the FRONT plastic, the paper sits behind it —
   directional light casts a soft offset shadow of the ink onto the paper
   (drop-shadow follows the PNG alpha = ink only, exactly like real life) */
.slab.slab3d .slab-label-img,.slab.slab3d .slab-label-cv{display:block;width:100%;height:auto;border-radius:2px;filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.4));-webkit-user-drag:none;user-select:none;}

/* ════════ Language toggle (EN · ไทย) — bilingual customer site ════════ */
.rwl-langtog-wrap{position:relative;}
.rwl-langtog{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-family:inherit;padding:.3rem;color:rgba(239,216,185,.55);transition:color .2s;line-height:0;}
.rwl-langtog:hover,.rwl-langtog-wrap.open .rwl-langtog{color:var(--accent);}
.rwl-langtog svg{display:block;}
/* language selection popup (globe → choose English / ไทย) */
.rwl-langpop{display:none;position:absolute;top:calc(100% + 12px);right:-8px;min-width:168px;background:#0e0e0e;border:1px solid rgba(239,216,185,.15);box-shadow:0 20px 44px rgba(0,0,0,.8);border-radius:4px;padding:.45rem 0;z-index:600;}
.rwl-langpop.open{display:block;}
.rwl-langpop::before{content:"";position:absolute;top:-6px;right:14px;width:10px;height:10px;background:#0e0e0e;border-left:1px solid rgba(239,216,185,.15);border-top:1px solid rgba(239,216,185,.15);transform:rotate(45deg);}
.rwl-langopt{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.6rem 1.1rem;background:none;border:none;color:rgba(239,216,185,.5);font-family:inherit;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:left;transition:background .15s,color .15s;}
.rwl-langopt:hover{background:rgba(239,216,185,.05);color:var(--accent);}
.rwl-langopt.active{color:var(--accent);}
.rwl-langopt .rwl-lang-check{opacity:0;flex-shrink:0;}
.rwl-langopt.active .rwl-lang-check{opacity:1;}
html.lang-th .hero-tagline{letter-spacing:0;}

/* ── Accessibility: respect reduced-motion (homepage runs several infinite loops) ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  body::before{animation:none!important;}
}

/* ── Cream chevron on selects so dropdowns stop showing OS chrome on dark pages ── */
select,.sel{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23efd8b9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem;
}
select::-ms-expand,.sel::-ms-expand{display:none;}
select option,.sel option{background:#111;color:var(--accent-light,#efd8b9);}

/* ── Unified disabled state for the cream button system (kill hover fill-sweep) ── */
.btn-primary:disabled,.btn:disabled,.ps-cta:disabled,.tier-cta:disabled,.btn-feature-cta:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary:disabled::before,.btn:disabled::before,.ps-cta:disabled::before,.tier-cta:disabled::before{transform:scaleX(0)!important;}

/* ── Back-to-top: now a real <button>; neutralise UA chrome so layout is unchanged ── */
.back-to-top{appearance:none;-webkit-appearance:none;background:none;border:none;padding:0;font:inherit;}

/* ── Sample-report CTA: viewfinder-button language (sharp corners), cream/on-brand.
   Replaces the old rounded pill + inline onmouseover (moved to :hover here). ── */
.sample-report-link{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.9rem 1.8rem;border:1px solid var(--accent-light,#efd8b9);
  color:var(--accent,#FFF4D4);text-decoration:none;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-radius:0;background:transparent;transition:background .2s,border-color .2s;
}
.sample-report-link:hover{background:rgba(239,216,185,.08);border-color:var(--accent,#FFF4D4);}
.sample-report-link:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
.sample-report-link:hover .btn-corner.tl{top:-4px;left:-4px;opacity:1;}
.sample-report-link:hover .btn-corner.tr{top:-4px;right:-4px;opacity:1;}
.sample-report-link:hover .btn-corner.bl{bottom:-4px;left:-4px;opacity:1;}
.sample-report-link:hover .btn-corner.br{bottom:-4px;right:-4px;opacity:1;}

/* ── Footer legal links: inline onmouseover moved to CSS :hover ── */
.footer-legal-link{color:rgba(239,216,185,.55);text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.footer-legal-link:hover{color:#efd8b9;}

/* ═══════════════════════════════════════════════════════════════════════════
   CRAFT POLISH — Phase 2 (ซา 2026-06-17: "ทำให้เท่ขึ้น/ไม่ AI", per-page craft)
   Appended; existing rules untouched. Pushes distinctive brand detail, not layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Signature flanked eyebrow — a viewfinder/measurement hairline tick on each side of
   the section kicker, so every section intro reads editorial + branded, not generic
   centered text. Scoped to .section-header so the left-aligned craft eyebrows are safe. */
.section-header .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  opacity: .6;
}
.section-header .section-eyebrow::before,
.section-header .section-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  flex: none;
}
.section-header .section-eyebrow::after { transform: scaleX(-1); }

/* Section title: a hair tighter + optical leading for the big DM Serif display sizes
   (more editorial drama, no size/position change). */
.section-header .section-title { line-height: 1.04; }

/* Hero one-shot entrance cascade (ซา 2026-06-26 — "ให้มันสด, ทุก section มีไอเดีย"): the eyebrow, logo
   and CTA buttons rise + fade in sequence on load, so the hero feels *assembled* instead of static.
   transform + opacity ONLY (compositor) and it plays exactly ONCE (no loop) → cannot reintroduce the
   slider-style stutter. Animates the elements (not their text) so it's i18n-safe. */
@keyframes heroRise    { from { opacity: 0;  transform: translateY(22px); } to { opacity: 1;  transform: translateY(0); } }
@keyframes heroRiseDim { from { opacity: 0;  transform: translateY(22px); } to { opacity: .6; transform: translateY(0); } }  /* eyebrow keeps its .6 */
.hero-content .hero-tagline      { animation: heroRiseDim .8s cubic-bezier(.2,.7,.2,1) .10s backwards; }
.hero-content #hero-logo3d       { animation: heroRise   .9s cubic-bezier(.2,.7,.2,1) .28s backwards; }
.hero-content .hero-buttons-group{ animation: heroRise   .8s cubic-bezier(.2,.7,.2,1) .48s backwards; }
@media (prefers-reduced-motion: reduce) {
  .hero-content .hero-tagline,
  .hero-content #hero-logo3d,
  .hero-content .hero-buttons-group { animation: none; }
}

/* ===========================================================
   WHAT WE CHECK — real lab photo + 4 inspection criteria (ซา 2026-06-18)
   Image-led with an ACTUAL RAWLITY inspection photo (left) + the four
   condition dimensions (right). Real photography, not synthetic art.
=========================================================== */
.criteria-inspect {
  /* photo removed (ซา 2026-06-19) — the four dimensions now stand alone, centered. */
  max-width: 620px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
}
.ci-stage { margin: 0; position: relative; }
.ci-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(239, 216, 185, 0.18);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.8);
}
.ci-axes { list-style: none; margin: 0; padding: 0; }
.ci-axis {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.3rem;
  align-items: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--border);
}
.ci-axis:first-child { border-top: none; }
.ci-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  padding-top: 0.4rem;
}
.ci-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}
.ci-note {
  font-size: 0.86rem;
  color: rgba(239, 216, 185, 0.72);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0;
}
@media (max-width: 760px) {
  .criteria-inspect { grid-template-columns: 1fr; gap: clamp(2rem, 8vw, 2.5rem); }
  .ci-stage { order: -1; max-width: 460px; margin: 0 auto; }
  .ci-axes { max-width: 480px; margin: 0 auto; }
}

/* ── Sample-report showcase (homepage "What a finished report looks like") ───────
   The actual rawtool-rendered report of a real published card, framed as a premium
   clickable preview. Image is populated at runtime (index.html). Do NOT recreate the
   report design here — this only frames the real render. ─────────────────────────── */
.sample-report-frame {
  position: relative; display: block; width: 100%; max-width: 680px; margin: 0 auto;
  border-radius: 14px; overflow: hidden; cursor: pointer; text-decoration: none;
  background: #0c0a07; border: 1px solid #2c2820;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,244,212,.04);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.sample-report-frame.failed { display: none; }
.sample-report-frame:hover {
  border-color: rgba(255,244,212,.32);
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(255,244,212,.10);
}
/* Show the FULL report render, centered + large (ซา: เต็ม ๆ กลางจอ). No crop. */
.srf-img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .55s ease; }
.sample-report-frame.ready .srf-img { opacity: 1; }
.srf-skeleton {
  display: block; width: 100%; padding-top: 100%;
  background: linear-gradient(100deg, #161310 30%, #211d17 50%, #161310 70%);
  background-size: 200% 100%; animation: srf-shimmer 1.4s ease-in-out infinite;
}
.sample-report-frame.ready .srf-skeleton { display: none; }
@keyframes srf-shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.srf-open {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1rem .9rem; z-index: 3;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  background: linear-gradient(to top, rgba(8,6,4,.94), rgba(8,6,4,0));
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.sample-report-frame:hover .srf-open { opacity: 1; transform: none; }
.sample-report-frame .srf-corner { position: absolute; width: 16px; height: 16px; border: 1.5px solid rgba(255,244,212,.5); z-index: 4; pointer-events: none; transition: border-color .35s ease; }
.sample-report-frame .srf-corner.tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.sample-report-frame .srf-corner.tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
.sample-report-frame .srf-corner.bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }
.sample-report-frame .srf-corner.br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
.sample-report-frame:hover .srf-corner { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .sample-report-frame, .srf-open, .srf-img { transition: none; }
  .srf-skeleton { animation: none; }
}

/* ── "What We Check" LIVE INSPECTION (research-led rebuild 2026-06-19) — a REAL card is
   examined across the four axes the way credible graders actually show it: a real
   measurement drawn on a real card, cream-on-black, instrument (mono) labels, raking
   light — NOT a synthetic card + neon scanner HUD. #ci-inspect[data-axis] (set by JS)
   selects the active overlay + highlights the axis row. On-screen only; reduced-motion →
   axis 0 static, no sweep. Refs: AGS/Edge centering measurement · TAG/CGC macro · raking
   light (conservation/forensics). ── */
:root { --ci-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
#ci-inspect {
  max-width: 1000px;
  margin: clamp(2.5rem,6vw,4.5rem) auto 0;
  display: grid;
  grid-template-columns: minmax(300px,400px) 1fr;
  gap: clamp(1.75rem,5vw,4rem);
  align-items: center;
}
.ci-specimen { position: relative; margin: 0; }
.ci-stage {
  position: relative; border-radius: 12px; overflow: hidden; background: #0a0807;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(239,216,185,.12);
  transition: box-shadow .6s ease;
}
.ci-cardimg { display:block; width:100%; height:auto; }
.ci-dim { position:absolute; inset:0; opacity:0; pointer-events:none; background:rgba(6,5,4,.7); transition:opacity .5s ease; }
/* 01 CENTERING — bold double frame + 4 margin-measuring arrows; the gap = the border */
.ci-cf { position:absolute; opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease;
  border:2px dashed var(--accent); box-shadow:0 0 16px rgba(255,244,212,.5), inset 0 0 14px rgba(255,244,212,.2); }
.ci-cf-out { inset:0; border-radius:11px; }
.ci-cf-in { inset:3.2% 4.4%; border-radius:5px; border-style:dashed; box-shadow:0 0 16px rgba(255,244,212,.5); transform:scale(1.04); }  /* 3.2% = 4.4%×(600/825) → equal pixel margin all four sides (concentric); dashed = centering guide */
/* double-headed arrows that measure each margin (the centering gap) */
.ci-arr { position:absolute; opacity:0; pointer-events:none; transition:opacity .5s ease; background:var(--accent); box-shadow:0 0 7px rgba(255,244,212,.7); z-index:3; }
.ci-arr::before, .ci-arr::after { content:""; position:absolute; width:6px; height:6px; border:1.6px solid var(--accent); }
.ci-arr-l, .ci-arr-r { top:50%; height:2px; transform:translateY(-50%); }
.ci-arr-l::before, .ci-arr-l::after, .ci-arr-r::before, .ci-arr-r::after { top:50%; }
.ci-arr-l::before, .ci-arr-r::before { left:-1px; border-right:0; border-top:0; transform:translateY(-50%) rotate(45deg); }
.ci-arr-l::after, .ci-arr-r::after { right:-1px; border-left:0; border-bottom:0; transform:translateY(-50%) rotate(45deg); }
.ci-arr-l { left:0; width:4.4%; } .ci-arr-r { right:0; width:4.4%; }
.ci-arr-t, .ci-arr-b { left:50%; width:2px; transform:translateX(-50%); }
.ci-arr-t::before, .ci-arr-t::after, .ci-arr-b::before, .ci-arr-b::after { left:50%; }
.ci-arr-t::before, .ci-arr-b::before { top:-1px; border-right:0; border-bottom:0; transform:translateX(-50%) rotate(45deg); }
.ci-arr-t::after, .ci-arr-b::after { bottom:-1px; border-left:0; border-top:0; transform:translateX(-50%) rotate(45deg); }
.ci-arr-t { top:0; height:3.2%; } .ci-arr-b { bottom:0; height:3.2%; }
#ci-inspect[data-axis="0"] .ci-cf { opacity:1; }
#ci-inspect[data-axis="0"] .ci-cf-in { transform:scale(1); }
#ci-inspect[data-axis="0"] .ci-arr { opacity:1; }
/* 02 CORNERS — big magnifying loupe (bg + position set by JS) over a dimmed card */
.ci-loupe { position:absolute; width:32%; aspect-ratio:1; left:50%; top:50%; border-radius:50%; opacity:0; z-index:6;
  transform:translate(-50%,-50%) scale(.6); background-repeat:no-repeat; background-color:#0a0807;
  box-shadow:0 0 0 6px rgba(6,5,4,.55), 0 16px 36px -10px rgba(0,0,0,.9);
  transition:opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1), left .6s ease, top .6s ease; }
.ci-loupe-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,244,212,.9);
  box-shadow:0 0 16px rgba(255,244,212,.45), inset 0 0 22px rgba(0,0,0,.55); }
.ci-loupe-ring::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(120% 120% at 32% 26%, rgba(255,255,255,.16), transparent 45%); }
#ci-inspect[data-axis="1"] .ci-dim { opacity:1; }
#ci-inspect[data-axis="1"] .ci-loupe { opacity:1; transform:translate(-50%,-50%) scale(1); }
/* 03 EDGES — dim perimeter baseline + a bright bar that runs around each edge in turn */
.ci-edge { position:absolute; inset:0; opacity:0; pointer-events:none; border-radius:11px; transition:opacity .45s ease;
  box-shadow: inset 0 0 0 2px rgba(255,244,212,.32); }
.ci-eb { position:absolute; opacity:0; pointer-events:none; background:var(--accent); transition:opacity .35s ease, box-shadow .35s ease; }
.ci-eb-t { top:0; left:0; right:0; height:3px; } .ci-eb-b { bottom:0; left:0; right:0; height:3px; }
.ci-eb-l { top:0; bottom:0; left:0; width:3px; } .ci-eb-r { top:0; bottom:0; right:0; width:3px; }
#ci-inspect[data-axis="2"] .ci-edge { opacity:1; }
#ci-inspect[data-axis="2"] .ci-eb { opacity:.28; }
#ci-inspect[data-axis="2"] .ci-eb.on { opacity:1; box-shadow:0 0 18px rgba(255,244,212,.85), 0 0 6px rgba(255,244,212,.9); }
/* 04 SURFACE — bold raking-light sweep */
.ci-rake { position:absolute; inset:0; opacity:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg, transparent 38%, rgba(255,244,212,0) 44%, rgba(255,244,212,.85) 50%, rgba(255,244,212,0) 56%, transparent 62%);
  background-size:240% 100%; background-position:160% 0; transition:opacity .45s ease; }
#ci-inspect[data-axis="3"] .ci-rake { opacity:1; animation:ciRake 2.6s ease-in-out infinite; }
#ci-inspect[data-axis="3"] .ci-stage { box-shadow:0 30px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(216,184,120,.45), 0 0 40px -6px rgba(216,184,120,.35); }
@keyframes ciRake { 0%{background-position:160% 0} 100%{background-position:-60% 0} }
/* right column = a numbered 1→4 stepper that advances */
.ci-axes { position:relative; }
.ci-axis { position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:1.15rem; align-items:start;
  padding:0 0 1.7rem; border-top:0; transition:opacity .4s ease; }
.ci-axis:last-child { padding-bottom:0; }
.ci-axis:not(.active):not(.done) { opacity:.4; }
.ci-axis.done { opacity:.72; }
.ci-axis:not(:last-child)::before {
  content:""; position:absolute; left:15px; top:32px; bottom:-2px; width:2px; transform:translateX(-1px);
  background:rgba(239,216,185,.16); transition:background .45s ease; }
.ci-axis.done::before { background:var(--accent); box-shadow:0 0 8px rgba(255,244,212,.4); }
.ci-dot { position:relative; z-index:1; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--ci-mono); font-size:.78rem; font-weight:600; color:rgba(239,216,185,.55);
  border:1.5px solid rgba(239,216,185,.3); background:#0a0807; transition:color .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease; }
.ci-axis.done .ci-dot { color:var(--accent); border-color:var(--accent); }
.ci-axis.active .ci-dot { color:#0a0807; background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,244,212,.14), 0 0 16px rgba(255,244,212,.5); transform:scale(1.08); }
.ci-axes .ci-name { margin:.15rem 0 .4rem; transition:color .4s ease; }
.ci-axis.active .ci-name { color:var(--accent); }
/* premium: the specimen gently floats under the inspection light */
.ci-specimen { animation: ciFloat 7s ease-in-out infinite; }
@keyframes ciFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (max-width: 760px) {
  #ci-inspect { grid-template-columns: 1fr; gap: clamp(1.8rem,7vw,2.5rem); }
  .ci-specimen { order:-1; max-width:300px; margin:0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #ci-inspect .ci-rake { animation:none; }
  .ci-specimen { animation:none; }
  .ci-stage,.ci-dim,.ci-cf,.ci-arr,.ci-loupe,.ci-edge,.ci-eb,.ci-rake,.ci-axis,.ci-axis::before,.ci-dot,.ci-axes .ci-name { transition:none; }
}

/* ── RAWLITY CONTROL free-app section: "Free" badge + the usage CLIP reframed in RAWLITY's
   viewfinder motif (branded screen + corner marks + "live" caption + soft gold glow) —
   NOT a generic iPhone mockup. Video files = images/app-demo.{mp4,webm}. ──────────────── */
.feature-meta-row { display:flex; align-items:center; gap:.7rem; }
.feature-free-badge { font-family:'DM Sans',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#0a0807; background:var(--accent); padding:.2rem .6rem; border-radius:999px; line-height:1; }
/* RAWLITY CONTROL — the dark-luxury ROOM is the FULL-WIDTH .features section (flush to
   the left & right screen edges); content stays centered; device mockup (transparent)
   floats inside. Square grid bg removed (see body::before). */
/* RAWLITY CONTROL section — SOLID BLACK, same as the sibling sections (.criteria / .craft). The
   transparent bg let the page's 3D grid show through, which read as off-theme + looked "connected"
   to the section above. Solid black covers the grid = consistent with the inspection sections. (ซา 2026-06-25) */
/* RAWLITY CONTROL — black section + a bold perspective GRID floor (the brand 3D grid, receding).
   No box / no frame — the clip + content float on it. (ซา 2026-06-25) */
.features { background:transparent; position:relative; }   /* LOCK MERGE TEST: transparent so the page body::before grid shows; the fixed rc-grid overlay (locked to the same viewport) adds the fold → reads as ONE continuous grid, no scroll drift (ซา 2026-06-26). [ver 1 = background:var(--bg-dark); overflow:hidden; clip-path:inset(0)] */
.features .section-container { position:relative; z-index:1; }
.feature-split-wrapper { position:relative; }
.feature-text-side, .feature-mockup-side { position:relative; z-index:1; }
/* container for the real-3D FOLDED grid (rc-grid3d.js): a bent plane folds the grid into a floor —
   continuous UV grid so lines cross the crease exactly. Wall bend = 35° (same as the site grid).
   (ซา 2026-06-25) */
.rc-grid { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .6s ease; }   /* LOCK: viewport-fixed like body::before so the fold can't drift vs the page grid; faded in only while RAWLITY CONTROL is in view (ซา 2026-06-26) — no bottom mask: ซา 2026-06-28 "ไม่ต้องทำให้จาง" */
.rc-grid canvas { position:absolute; inset:0; }
/* Fade the folded grid into solid black at the section's top & bottom edges so RAWLITY CONTROL melts
   into the neighbouring sections instead of hard-cutting (ซา 2026-06-26). Painted above the grid (z0,
   later in source) but below the content (.section-container z1) → only the grid/bg fades, content stays
   bright. */
.features::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg-dark) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, var(--bg-dark) 100%);
}
.rc-room { position:relative; width:100%; max-width:760px; margin:0 auto; }
.rc-clip-video { width:100%; height:auto; display:block; aspect-ratio:1280/800; object-fit:contain; background:transparent; }

/* ============================================================
   SLAB POLISH v2 (2026-06-21) — premium acrylic hero holder.
   Appended (reuses --accent tokens). Elevates gloss / edge / glow
   only — no layout change. Honors prefers-reduced-motion.
   ============================================================ */
.slab {
  box-shadow:
    0 54px 110px -28px rgba(0,0,0,0.92),
    0 16px 44px -30px rgba(0,0,0,0.80),
    0 0 92px -30px rgba(255,244,212,0.20),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1.5px 1px rgba(0,0,0,0.50),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
/* polished-acrylic gloss sheet + beveled edge, floated above the inner content */
.slab::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(28px);
  background:
    linear-gradient(133deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 15%, transparent 33%),
    radial-gradient(150% 56% at 84% -14%, rgba(255,255,255,0.13), transparent 50%);
  box-shadow:
    inset 1.5px 1.5px 0.5px rgba(255,255,255,0.26),
    inset -1.5px -1.5px 1.5px rgba(0,0,0,0.50);
}
/* brighter prismatic glare sweep (still tracks the tilt --gx/--gy) */
.slab-glare {
  background: linear-gradient(115deg,
    transparent 36%,
    rgba(255,244,212,0.09) 45%,
    rgba(255,255,255,0.36) 49%,
    rgba(176,216,255,0.11) 53%,
    transparent 62%);
}
/* deeper, glossier card window */
.slab-card {
  box-shadow:
    inset 0 0 38px rgba(0,0,0,0.72),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -10px 26px rgba(0,0,0,0.40);
}
/* richer holographic shimmer in the sample window */
.slab-holo::before { opacity: 0.72; }

/* hero slab: the holo SAMPLE placeholder was covering the real card because
   .slab-holo{display:flex} overrode the [hidden] attribute. Let [hidden] win so
   the featured/sample CARD image shows — with a holographic foil overlaid on it. */
.slab-holo[hidden] { display: none; }
/* holographic foil shimmer ON the actual card (premium graded-holo look, tracks tilt) */
.slab-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-radius: inherit;
  background: repeating-linear-gradient(112deg,
    rgba(255,80,120,0) 0%, rgba(255,110,150,.15) 6%, rgba(255,224,150,.17) 11%,
    rgba(120,225,205,.12) 16%, rgba(150,165,255,.14) 21%, rgba(255,120,205,.14) 26%,
    rgba(255,244,212,0) 32%);
  background-size: 220% 220%;
  background-position: var(--gx, 40%) var(--gy, 30%);
  mix-blend-mode: screen; opacity: .5;
}
.slab-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,40%), rgba(255,255,255,0.20), transparent 44%);
  mix-blend-mode: overlay;
}

/* ── PRESET layout tweak (ซา 2026-06-21): sticker flush to the top edge,
   card window nudged up to sit closer beneath it. Override only (positions),
   same canonical .slab.slab3d artwork. ── */
.slab.slab3d .slab-label { top: 0; }
.slab.slab3d .slab-card  { top: 22%; }

/* ── card window: drop the surrounding frame (border + inset vignette) so the
   scan reads clean inside the sleeve, no visible box around it (ซา 2026-06-21) ── */
.slab.slab3d .slab-card { border: none; box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════════
   APPLE-STYLE LUXURY POLISH (appended 2026-06-24) — bigger confident type +
   more breathing room. Additive (wins by load order); doesn't rewrite existing.
   ════════════════════════════════════════════════════════════════════════ */
.section-title {
  font-size: clamp(2.3rem, 4.6vw, 4rem);   /* larger, more confident */
  letter-spacing: -1.4px;
  line-height: 1.05;
}
.section-header { margin-bottom: 5rem; }    /* more air under the title */
.section-description {
  font-size: 1.12rem;
  line-height: 1.75;
  color: rgba(239, 216, 185, 0.68);         /* lighter = calmer, less shouty */
  max-width: 560px;
}
/* eyebrow labels: wider tracking = quiet luxury */
.section-eyebrow, .page-eyebrow { letter-spacing: 0.3em; }

/* trust bar: thin-line icons + more breathing room (premium proof feel) */
.trust-bar { padding: 5.5rem 2rem; }
.trust-grid { gap: 2.5rem; }
.trust-item { gap: 0.8rem; align-items: center; }
.trust-ic { color: var(--accent-light); opacity: 0.72; line-height: 0; }   /* size lives on the <svg> (cache-proof) */
.trust-ic svg { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   60-30-10 GOLD RATIONING (ซา 2026-06-26 "เอาให้สมดุล")
   Audit (code + rendered): bright --accent #FFF4D4 was the DEFAULT emphasis — 99 CSS rules / 36 visible
   text elements — so the "10% accent" was everywhere and nothing popped. Demote the repeated DECORATIVE
   brights to cream --accent-light (#efd8b9) so they join the 30% mass; bright #FFF4D4 is now reserved
   for the true 10% only: primary CTA, the featured "Most Popular" pricing card, active states, the grade.
   Colour-only, no layout change. Appended last → wins at equal specificity. ═══════════════════════════ */
.section-eyebrow { color: var(--accent-light); }
.section-header .section-eyebrow::before,
.section-header .section-eyebrow::after { background: linear-gradient(90deg, transparent, var(--accent-light)); }
.feature-meta-label { color: var(--accent-light); }
.trust-value { color: var(--accent-light); }
.craft-cinema-title { color: var(--accent-light); }   /* match the other (cream) section titles, not gold */
.craft-file-no { color: var(--accent-light); }
.pricing-features li::before { color: var(--accent-light); }   /* the ✓ on every feature line was bright gold ×many */
.hero-tagline { color: var(--accent-light); }                   /* hero eyebrow → cream (match other eyebrows) */
.footer-col h4 { color: var(--accent-light); }                  /* footer column headings (Service/Account…) */
.ps-card.featured .ps-feats li { color: var(--accent-light); }  /* featured slider card: keep border/price/CTA gold, calm the 5 feature lines */

/* SINGLE-LINE merge (ซา 2026-06-26): while RAWLITY CONTROL is in view, hide the CSS page grid so the
   WebGL rc-grid is the ONLY grid drawn there — one continuous set of lines that folds, no double/overlay.
   The rc-grid3d.js IntersectionObserver toggles body.rc-grid-active. */
body::before { transition: opacity .6s ease; }
body.rc-grid-active::before { opacity: 0; }

/* INSIDE THE LAB — captioned auto-slide (ซา 2026-06-26, replaces .craft-marquee). Crossfade = opacity only
   (compositor) + mostly static → stays smooth next to the always-on WebGL grid. No CSS filter (photos are
   already grayscale; a filter on the fading layer would re-raster every frame). */
.lab-slider { position: relative; max-width: min(980px, 92vw); margin: clamp(2.5rem,5vw,4rem) auto 0;
  aspect-ratio: 3 / 2; overflow: hidden; background: #0a0807; }
.lab-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.lab-slide.is-active { opacity: 1; pointer-events: auto; }
.lab-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block;
  transform: scale(1.005); transition: transform 6.5s ease-out; will-change: transform; }
.lab-slide.is-active img { transform: scale(1.075); }   /* subtle real-photo zoom only — enough to show each auto-change. No synthetic glow/pan/AI (ความน่าเชื่อถือ: ผู้ตรวจคนจริง ไม่แตะ effect ปลอม, ซา 2026-06-27) */
@media (prefers-reduced-motion: reduce) { .lab-slide img { transition: none; transform: none; } }
.lab-slide::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.22) 30%, transparent 52%); }
.lab-slide .vf { position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--accent); opacity: .55; z-index: 3; pointer-events: none; }
.lab-slide .vf.tl { top: 14px; left: 14px;  border-width: 1.5px 0 0 1.5px; }
.lab-slide .vf.tr { top: 14px; right: 14px; border-width: 1.5px 1.5px 0 0; }
.lab-slide .vf.bl { bottom: 14px; left: 14px;  border-width: 0 0 1.5px 1.5px; }
.lab-slide .vf.br { bottom: 14px; right: 14px; border-width: 0 1.5px 1.5px 0; }
.lab-cap { position: absolute; left: clamp(1.2rem,3.5vw,2.4rem); bottom: clamp(1.2rem,3.5vw,2.2rem); z-index: 4;
  display: flex; align-items: baseline; gap: .9rem; }
.lab-num { font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .18em; color: var(--accent-light); opacity: .75; }
.lab-title { font-family: 'DM Serif Display', serif; font-size: clamp(1.25rem,2.8vw,2rem); line-height: 1.05; color: var(--accent); }
.lab-dots { position: absolute; right: clamp(1.2rem,3.5vw,2.2rem); bottom: clamp(1.3rem,3.5vw,2.3rem); z-index: 4; display: flex; gap: .55rem; }
.lab-dot { width: 8px; height: 8px; box-sizing: content-box; padding: 18px; margin: -18px; background-clip: content-box; border-radius: 50%; border: 1px solid rgba(239,216,185,.45); background-color: transparent; cursor: pointer; transition: background-color .3s, border-color .3s, transform .3s; }
.lab-dot:hover { border-color: var(--accent); }
.lab-dot.is-active { background-color: var(--accent); border-color: var(--accent); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .lab-slide { transition: none; } }

/* INSIDE THE LAB — full-width cinematic band with the section heading EMBEDDED at the band's bottom-left
   (ซา 2026-06-26: "เอาไปใส่ในซ้ายล่างของกรอบรูป ฝังไปเลย"). Per-slide label → top-left; dots → bottom-right. */
.lab-slider { width: 100%; max-width: none; margin: 0; aspect-ratio: 5 / 2; position: relative; z-index: 1;
  overflow: hidden; box-shadow: 0 36px 80px -46px rgba(0,0,0,0.85); }
.lab-slider .craft-head { position: absolute; left: clamp(1.4rem, 5vw, 4rem); bottom: clamp(1.4rem, 4vw, 2.8rem);
  z-index: 5; text-align: left; max-width: min(620px, 72%); margin: 0; padding: 0; }
.lab-slider .craft-head .section-eyebrow { display: block; margin-bottom: .55rem; }
.lab-slider .craft-head .craft-cinema-title { font-size: clamp(1.5rem, 3vw, 2.7rem); margin: 0; text-shadow: 0 2px 26px rgba(0,0,0,.55); }
.lab-slider .craft-head p { margin: .65rem 0 0; max-width: 460px; font-size: clamp(.85rem, 1.3vw, 1rem); color: rgba(239,216,185,.86); text-shadow: 0 1px 14px rgba(0,0,0,.7); }
.lab-cap { top: clamp(1.1rem, 3.2vw, 1.9rem); bottom: auto; left: clamp(1.4rem, 5vw, 4rem); }   /* per-slide label → top-left */
.lab-slide::after { background:
  linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.38) 32%, transparent 60%),
  linear-gradient(to right, rgba(0,0,0,.5) 0%, transparent 48%); }
@media (max-width: 760px) { .lab-slider { aspect-ratio: 3 / 4; } .lab-slider .craft-head { max-width: 86%; } }

/* Bigger navigation bar on desktop (ซา 2026-06-27). Mobile stays 52px so the mobile dropdown math
   (top:52px / calc(100dvh - 52px)) is untouched. scroll-padding keeps anchor jumps clearing the taller bar. */
@media (min-width: 768px) {
  .nav-container { height: 70px; }
  .logo-img { height: 42px; }
  .nav-links { gap: 2.4rem; margin-left: 2.8rem; }
  .nav-links a { font-size: 0.9rem; letter-spacing: 0.12em; }
  .nav-cta { font-size: 0.84rem; padding: 0.72rem 1.95rem; }
  .nav-right { gap: 1.2rem; }
  html { scroll-padding-top: 120px; }
}

/* RAWLITY CONTROL left column — tighter / less floaty (ซา 2026-06-27: "ด้านซ้ายลอย-ห่าง"). Group the
   eyebrow+logo as one brand unit, shrink the oversized logo, pull the copy+CTA closer so it reads as one
   cohesive block instead of scattered clusters with big gaps. */
.feature-text-side { gap: 1.55rem; }
.feature-meta-row { margin-bottom: -0.35rem; }       /* eyebrow sits right above the logo (one unit) */
.feature-brand-group { gap: 0.9rem; }
.feature-brand-img { max-width: 226px; }             /* was 280 — less dominant/floaty */
.feature-divider { opacity: 0.22; }
.feature-desc { margin-top: 0.15rem; max-width: 360px; }
/* RAWLITY CONTROL mockup video — bigger, kept centered/symmetric (ซา 2026-06-27). Widen this section's
   container + the room so the laptop video grows; margin:0 auto + flex-center keep it perfectly centered. */
@media (min-width: 1000px) {
  .features .section-container { max-width: 1320px; }
  .rc-room { max-width: 900px; }
}