@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;
  --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,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,244,212,0.07) 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.65);
  max-width: 600px;
  margin: 0 auto;
}

/* ===========================
   FEATURES
=========================== */
.features {
  padding: 10rem 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: center;
  justify-content: space-between;
  gap: 100px;
}

.feature-text-side {
  flex: 1;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  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.6);
  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(245,158,11,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(245,158,11,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.65);
  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; }
  .feature-text-side { max-width: 100%; align-items: center; text-align: center; }
  .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: 'Bebas Neue', sans-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;
  -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%);
}

.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.55);
  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.55);
  line-height: 1.65;
}

/* ---- FAQ ---- */
.faq {
  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%);
}

.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.55);
  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.45);
  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.45);
  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: accordion -> open two-column reference list ---- */
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
  max-width: 1000px;
}
.faq-q {
  cursor: default;
  padding: 1.5rem 0 0.5rem;
  font-size: 0.98rem;
}
.faq-q:hover { color: var(--text-primary); }
.faq-toggle { display: none; }
.faq-a {
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding-bottom: 1.5rem;
  font-size: 0.88rem;
}
.faq-item.open .faq-a { padding-bottom: 1.5rem; }

/* ---- 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: 'Bebas Neue', sans-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: 'Bebas Neue', sans-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: cover;
  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; }

/* 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; }
  .slab { 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.7 — GIMMICK CARD GRID + DETAIL MODAL
   grid = TCG card in acrylic holder (clickable) ·
   click -> modal (left details, right bare card) · mobile stacks
=========================================================== */

/* ---- the original RAWLITY TCG card component ---- */
.rcard {
  --tint: #efd8b9;
  width: 100%;
  position: relative;
  border-radius: 11px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  /* matte cardstock + faint print texture, printed colored border */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1b1610, #130f0a);
  border: 2px solid color-mix(in srgb, var(--tint) 52%, #1a140c);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,0.72), inset 0 0 0 1px rgba(0,0,0,0.3);
}
/* real paper fibre grain over the whole card */
.rcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.rc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: color-mix(in srgb, var(--tint) 15%, #0e0a06);
  border: 1px solid color-mix(in srgb, var(--tint) 28%, transparent);
  border-radius: 6px; padding: 6px 10px;
}
.rc-name { font-family: 'DM Serif Display', serif; font-size: 0.92rem; line-height: 1; color: #f4e7cd; }
.rc-cost { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.04em;
  color: #0a0a0a; background: var(--tint); border-radius: 20px; padding: 1px 9px 0; }
.rc-art {
  position: relative; border-radius: 6px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tint) 26%, transparent);
  aspect-ratio: 1 / 1; background: #0c0a07;
}
.rc-art svg { width: 100%; height: 100%; display: block; }
.rc-type {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
  border: 1px solid color-mix(in srgb, var(--tint) 24%, transparent);
  border-radius: 6px; padding: 4px 9px;
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 85%, #fff);
}
.rc-set { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; opacity: 0.8; }
.rc-text {
  flex: 1; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(10,8,5,0.85), rgba(6,5,3,0.9));
  border: 1px solid color-mix(in srgb, var(--tint) 20%, transparent);
  border-radius: 6px; padding: 9px 10px;
}
.rc-flavor { margin-top: auto; font-style: italic; font-size: 0.66rem; color: rgba(239,216,185,0.5); }
.rc-foot { display: flex; align-items: flex-end; justify-content: space-between; }
.rc-cert { font-family: ui-monospace, 'Courier New', monospace; font-size: 0.52rem; letter-spacing: 0.1em; opacity: 0.6; }
.rc-pt { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em; line-height: 1;
  color: #0a0a0a; background: var(--tint); padding: 2px 12px 0; border-radius: 7px; }
.rc-pt small { font-size: 0.65rem; }

/* ---- grid of gimmick slabs ---- */
.gimmick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  max-width: 1180px;
  margin: 0 auto;
}

.gimmick-slab {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  padding: 12px;
  border-radius: 16px;
  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 26px 56px -22px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.gimmick-slab::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;
}
.gimmick-slab:hover {
  transform: translateY(-8px) rotate(-0.4deg);
  box-shadow: 0 40px 80px -22px rgba(0,0,0,0.85), 0 0 50px -16px rgba(255,244,212,0.25);
}
.gimmick-slab.featured { border-color: rgba(255,244,212,0.5); }
.gimmick-slab .rcard { width: 100%; }
.tap-hint {
  display: block; text-align: center; margin-top: 9px;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(239,216,185,0.4);
}
.gimmick-slab .save-badge { top: 54px; left: 20px; right: auto; z-index: 6; border-radius: 2px; }

/* ---- detail modal ---- */
.plan-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.86);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.plan-overlay.open { opacity: 1; pointer-events: auto; }
.plan-modal {
  position: relative;
  display: flex; align-items: center; gap: 60px;
  max-width: 920px; width: 100%;
  background: #0c0a07;
  border: 1px solid rgba(239,216,185,0.15);
  border-radius: 16px;
  padding: 56px 60px;
  box-shadow: 0 50px 110px rgba(0,0,0,0.8);
  animation: modalIn 0.35s cubic-bezier(0.16,1,0.3,1);
}
.plan-details { flex: 1; min-width: 0; }
.plan-cardview { flex-shrink: 0; position: relative; }
/* tint-colored glow halo behind the card = wow */
.plan-cardview::before {
  content: '';
  position: absolute; inset: -20%;
  background: radial-gradient(circle, color-mix(in srgb, var(--halo, #efd8b9) 55%, transparent), transparent 62%);
  filter: blur(36px);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.plan-cardview .rcard {
  width: 300px;
  position: relative;
  z-index: 1;
  animation: cardFloat 4.5s ease-in-out infinite;
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-12px) rotate(0.6deg); }
}

/* simplified modal card — title + art only, breathing room */
.rcard-simple { aspect-ratio: auto; gap: 12px; padding: 13px; }
.rcard-simple .rc-head { padding: 8px 11px; }
.rcard-simple .rc-name { font-size: 1.05rem; }
.rcard-simple .rc-cost { font-size: 1.1rem; }
.rcard-simple .rc-art { aspect-ratio: 5 / 6; }

.plan-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: rgba(239,216,185,0.5);
  font-size: 1.15rem; cursor: pointer; line-height: 1; z-index: 2; font-family: inherit;
}
.plan-close:hover { color: var(--accent); }

.pd-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); opacity: 0.6; }
.pd-name { font-family: 'DM Serif Display', serif; font-size: 2.3rem; font-weight: 400; margin: 0.4rem 0 0.9rem; line-height: 1.05; }
.pd-name::after { content: ''; display: block; width: 48px; height: 2px; margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.6; }
.pd-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.pd-cost { font-size: 2.6rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.pd-unit { color: var(--text-muted); font-size: 0.95rem; }
.pd-meta { font-size: 0.82rem; color: rgba(239,216,185,0.6); margin-bottom: 1.4rem; }
.pd-ship { color: var(--accent); opacity: 0.75; }
.pd-feats { list-style: none; margin: 0 0 1.7rem; display: flex; flex-direction: column; gap: 0.65rem; }
.pd-feats li { display: flex; gap: 0.65rem; font-size: 0.9rem; line-height: 1.4; color: rgba(239,216,185,0.85); }
.pd-feats li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.plan-cta { width: 100%; justify-content: center; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .gimmick-grid { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
}
@media (max-width: 760px) {
  .plan-modal { flex-direction: column; gap: 24px; padding: 40px 24px 32px; max-height: 92vh; overflow-y: auto; }
  .plan-cardview .rcard { width: 210px; }
  .pd-name { font-size: 1.7rem; }
}
@media (max-width: 560px) {
  .gimmick-grid { grid-template-columns: 1fr; max-width: 300px; }
}

/* ===========================================================
   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:'Bebas Neue',sans-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(4,1fr);gap:1rem;align-items:stretch;}
@media(max-width:920px){.pricing .gimmick-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pricing .gimmick-grid{grid-template-columns:1fr;}}
.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: 0 !important; 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; }

@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: 'Bebas Neue', sans-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: 'Bebas Neue', sans-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. */