/* ฤกษ์รัก · landing page (loaded only on "/"). Builds on the tokens in ruekrak.css.
   Navy sections use the fixed brand palette in both themes; light sections follow the theme tokens. */

.lp{--navy-2:#0F1A28; --ivory-soft:#C9CFD8; --gold-soft:#E2C994; overflow-x:clip}
.lp .wrap{max-width:1200px}
.serif-i{font-family:var(--f-display); font-style:italic; font-weight:500}
.hl{font-style:normal; white-space:nowrap; color:var(--gold-ink)}
.lp-dark .hl{color:var(--gold-soft)}
.gold-line{display:inline-flex; align-items:center; gap:14px}
.gold-line::before{content:""; width:36px; height:1px; background:currentColor; opacity:.8}

/* ── nav: navy glass in both themes ── */
.lp-nav{position:fixed; inset:0 0 auto; z-index:40; transition:background .4s var(--ease), box-shadow .4s, border-color .4s; border-bottom:1px solid transparent}
.lp-nav .wrap{display:flex; align-items:center; gap:24px; min-height:76px; transition:min-height .4s var(--ease)}
.lp-nav .brand .logo{height:46px; transition:height .4s var(--ease)}
.lp-nav nav{display:flex; gap:2px; margin-left:auto}
.lp-nav nav a{position:relative; padding:10px 14px; color:var(--ivory-soft); text-decoration:none; font-size:.92rem; letter-spacing:.01em; transition:color .25s}
.lp-nav nav a::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--rk-gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.lp-nav nav a:hover{color:var(--rk-ivory)}
.lp-nav nav a:hover::after{transform:scaleX(1)}
.lp-nav .actions{display:flex; align-items:center; gap:10px}
.lp-nav .theme-toggle{color:var(--rk-ivory); border-color:rgba(247,242,235,.22)}
.lp-nav .theme-toggle:hover{background:rgba(247,242,235,.08); border-color:var(--rk-gold)}
.lp-nav .btn.gold{background:var(--rk-gold); border-color:var(--rk-gold); color:var(--rk-navy)}
.lp-nav.scrolled{background:rgba(15,26,40,.82); backdrop-filter:saturate(1.3) blur(16px); -webkit-backdrop-filter:saturate(1.3) blur(16px); border-bottom-color:rgba(199,164,106,.18); box-shadow:0 10px 30px -20px rgba(0,0,0,.6)}
.lp-nav.scrolled .wrap{min-height:64px}
.lp-nav.scrolled .brand .logo{height:40px}

/* ── hero ── */
.lp-hero{position:relative; isolation:isolate; overflow:hidden; min-height:min(100svh,980px); display:flex; align-items:center; padding:128px 0 96px; background:var(--rk-navy); color:var(--rk-ivory)}
.lp-hero::before{content:""; position:absolute; inset:-20%; z-index:-2;
  background:radial-gradient(38% 42% at 78% 32%,rgba(199,164,106,.24),transparent 70%), radial-gradient(34% 40% at 12% 88%,rgba(216,183,176,.15),transparent 70%), radial-gradient(60% 60% at 50% 120%,rgba(10,18,28,.9),transparent 70%);
  animation:aurora 22s ease-in-out infinite alternate}
.lp-hero::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.09; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* fine gold rings, centred behind the hero visual, fading out at the edges */
.lp-arcs{position:absolute; z-index:-1; left:72%; top:52%; width:min(1180px,120vw); aspect-ratio:1; translate:-50% -50%; pointer-events:none; opacity:.9;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%); mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.lp-arcs .spin{transform-origin:100px 100px; animation:ringSpin 120s linear infinite}
.lp-arcs .spin.rev{animation-duration:160s; animation-direction:reverse}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@media (max-width:979px){.lp-arcs{left:50%; top:auto; bottom:-18%; translate:-50% 0; width:150vw}}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.06)}}
.lp-hero .wrap{display:grid; gap:64px; align-items:center; width:100%}
@media (min-width:980px){.lp-hero .wrap{grid-template-columns:1.05fr .95fr}}
.lp-kicker{color:var(--rk-gold); font:500 .78rem/1 var(--f-body); letter-spacing:.28em; text-transform:uppercase}
.lp-hero .tagline{display:block; margin-top:26px; font:italic 500 clamp(1.25rem,2.2vw,1.6rem)/1.3 var(--f-display); color:var(--gold-soft)}
.lp-hero h1{margin-top:10px; color:var(--rk-ivory); font:600 clamp(2.1rem,4.1vw,3.3rem)/1.3 var(--f-body); letter-spacing:-.01em}
@media (min-width:980px){.lp-hero h1 .nw-lg{white-space:nowrap}}
.lp-hero h1 .nb{white-space:nowrap}
.lp-hero h1 .shine{background:linear-gradient(100deg,#B8925A 0%,#E9D3A3 30%,#C7A46A 55%,#F3E3BD 75%,#B8925A 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.lp-hero .lead{max-width:540px; margin-top:24px; font-size:1.08rem; line-height:1.85; color:var(--ivory-soft)}
.lp-hero .cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.lp-hero .btn.gold,.lp-dark .btn.gold{background:var(--rk-gold); border-color:var(--rk-gold); color:var(--rk-navy); box-shadow:0 14px 34px -14px rgba(199,164,106,.7)}
.lp-hero .btn.gold:hover,.lp-dark .btn.gold:hover{background:#D9BC86; border-color:#D9BC86; color:var(--rk-navy)}
.lp-hero .btn.ghost,.lp-dark .btn.ghost{color:var(--rk-ivory); border-color:rgba(247,242,235,.3)}
.lp-hero .btn.ghost:hover,.lp-dark .btn.ghost:hover{background:rgba(247,242,235,.08); border-color:var(--rk-gold); color:var(--rk-ivory)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.lp-hero .trust{display:flex; flex-wrap:wrap; gap:10px 26px; margin:44px 0 0; padding:26px 0 0; list-style:none; border-top:1px solid rgba(247,242,235,.12); color:var(--ivory-soft); font-size:.9rem}
.lp-hero .trust li{display:flex; align-items:center; gap:10px}
.lp-hero .trust .ico{width:18px; height:18px; color:var(--rk-gold)}
.lp-scroll{position:absolute; left:50%; bottom:26px; translate:-50% 0; display:grid; justify-items:center; gap:8px; color:var(--ivory-soft); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; text-decoration:none}
.lp-scroll span{width:1px; height:38px; background:linear-gradient(var(--rk-gold),transparent); animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* hero visual: phone + envelope + floating notes (decorative) */
.lp-visual{position:relative; justify-self:center; width:min(100%,480px); aspect-ratio:480/560; --px:0; --py:0}
.lp-visual > *{position:absolute; transition:transform .6s var(--ease)}
.lp-env{left:2%; top:20%; width:62%; aspect-ratio:1.42; border-radius:10px; background:linear-gradient(160deg,#FBF6EE,#EADFCB); box-shadow:0 40px 70px -30px rgba(0,0,0,.7); transform:rotate(-9deg) translate(calc(var(--px)*-10px),calc(var(--py)*-10px))}
.lp-env::before{content:""; position:absolute; inset:0; border-radius:10px; background:linear-gradient(160deg,#F3EBDD,#E3D5BC); clip-path:polygon(0 0,100% 0,50% 58%)}
.lp-env::after{content:""; position:absolute; inset:10px; border:1px solid rgba(199,164,106,.6); border-radius:6px}
.lp-seal{position:absolute; left:50%; top:58%; translate:-50% -50%; z-index:1; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#E8CC94,#B08A4E 60%,#8C6A35); color:#FBF6EE; font:italic 600 1.35rem/1 var(--f-display); box-shadow:0 6px 14px -4px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.18)}
.lp-phone{right:4%; top:0; width:56%; aspect-ratio:9/18.5; padding:9px; border-radius:40px; background:linear-gradient(145deg,#1E2F45,#0B131E); box-shadow:0 0 0 1px rgba(199,164,106,.35), 0 50px 90px -30px rgba(0,0,0,.85); transform:rotate(4deg) translate(calc(var(--px)*12px),calc(var(--py)*12px))}
.lp-screen{position:relative; height:100%; overflow:hidden; border-radius:32px; display:grid; align-content:center; justify-items:center; gap:10px; padding:28px 18px; text-align:center; color:var(--rk-navy);
  background:radial-gradient(80% 50% at 50% 0%,#F6E7D2,transparent 70%), linear-gradient(#FBF7F0,#F1E8DA)}
.lp-screen.has-shot{display:block; padding:0; background:#F6E7E1}
.lp-screen.has-shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0}
.lp-screen.has-shot::after{display:none}
.lp-screen.has-shot::before{z-index:1}
.lp-screen::before{content:""; position:absolute; top:10px; left:50%; translate:-50% 0; width:34%; height:18px; border-radius:20px; background:#0B131E}
.lp-screen::after{content:""; position:absolute; inset:46px 12px 14px; border:1px solid rgba(199,164,106,.55); border-radius:18px; pointer-events:none}
.lp-screen small{font:500 .52rem/1 var(--f-display); letter-spacing:.32em; text-transform:uppercase; color:#80612B}
.lp-screen .names{font:italic 600 clamp(1.5rem,3.4vw,2rem)/1.1 var(--f-display)}
.lp-screen .names i{font-size:.75em; color:#B08A4E}
.lp-screen .rule{width:40px; height:1px; background:var(--rk-gold)}
.lp-screen p{font-size:.66rem; line-height:1.6; color:#4B5868}
.lp-count{display:flex; gap:6px; margin-top:4px}
.lp-count b{display:grid; width:40px; padding:6px 0; border-radius:8px; background:#fff; box-shadow:0 4px 10px -6px rgba(22,35,52,.4); font:600 .9rem/1 var(--f-body)}
.lp-count b small{margin-top:4px; font:400 .5rem/1 var(--f-body); letter-spacing:0; color:#4B5868; text-transform:none}
.lp-screen .pill{margin-top:8px; padding:8px 18px; border-radius:10px; background:var(--rk-navy); color:var(--rk-ivory); font-size:.66rem}
.lp-note{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r); background:rgba(247,242,235,.97); color:var(--rk-navy); font-size:.8rem; font-weight:500; box-shadow:0 22px 40px -18px rgba(0,0,0,.6); white-space:nowrap}
.lp-note .ico{width:18px; height:18px; color:#80612B}
.lp-note small{display:block; font-weight:400; color:#4B5868; font-size:.7rem}
.lp-note .dots{display:flex} .lp-note .dots i{width:22px; height:22px; margin-right:-7px; border-radius:50%; border:2px solid #FBF7F0}
.lp-note.n1{left:-2%; bottom:14%; transform:translate(calc(var(--px)*18px),calc(var(--py)*18px)); animation:bob 7s ease-in-out infinite}
.lp-note.n2{right:-6%; bottom:4%; transform:translate(calc(var(--px)*22px),calc(var(--py)*22px)); animation:bob 8s ease-in-out -3s infinite}
.lp-note.n3{left:8%; top:4%; transform:translate(calc(var(--px)*-16px),calc(var(--py)*-16px)); animation:bob 9s ease-in-out -5s infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ── marquee ── */
.lp-marquee{overflow:hidden; padding:22px 0; background:var(--navy-2); border-block:1px solid rgba(199,164,106,.18); color:var(--gold-soft)}
.lp-marquee .track{display:flex; width:max-content; animation:marquee 46s linear infinite}
.lp-marquee:hover .track{animation-play-state:paused}
.lp-marquee .track > span{display:flex; align-items:center; gap:28px; padding-right:28px; font:italic 500 1.3rem/1 var(--f-display); white-space:nowrap}
.lp-marquee .track > span::after{content:"✦"; font-style:normal; font-size:.7rem; color:var(--rk-gold)}
.lp-marquee em{font:400 1rem/1 var(--f-body); font-style:normal; color:var(--ivory-soft)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── generic section ── */
.lp-sec{position:relative; padding:clamp(80px,11vw,140px) 0}
.lp-sec.tint{background:var(--surface)}
.lp-head{max-width:680px; margin:0 auto clamp(44px,6vw,72px); text-align:center}
.lp-head .lp-kicker{color:var(--gold-ink)}
.lp-head h2{margin-top:18px; font:600 clamp(1.9rem,4vw,2.9rem)/1.3 var(--f-body); letter-spacing:-.01em}
.lp-head h2 .serif-i{color:var(--gold-ink); font-size:1.05em}
.lp-head p{margin-top:16px; color:var(--soft); font-size:1.04rem}
.lp-head.left{margin-left:0; text-align:left}

/* ── manifesto ── */
.lp-manifesto{text-align:center}
.lp-manifesto .orn{display:block; width:120px; height:auto; margin:0 auto 30px; color:var(--gold-ink)}
.lp-manifesto blockquote{max-width:900px; margin:0 auto; font:500 clamp(1.5rem,3.4vw,2.4rem)/1.6 var(--f-body); color:var(--ink); text-wrap:balance}
.lp-manifesto blockquote em{font-style:normal; color:var(--gold-ink)}
.lp-manifesto .nb{white-space:nowrap}
.lp-manifesto cite{display:block; margin-top:28px; font:italic 500 1.15rem/1 var(--f-display); color:var(--soft)}

/* ── services bento ── */
.lp-bento{display:grid; gap:20px}
@media (min-width:900px){
  .lp-bento{grid-template-columns:1.15fr 1fr; grid-template-rows:auto auto auto}
  .lp-bento .b-main{grid-row:span 3; display:flex; flex-direction:column}
  .lp-bento .b-main .b-phones{flex:1; align-items:center}
}
.b-phones{position:relative; display:flex; justify-content:center; gap:4%; margin:8px 0 4px; padding:26px 16px 22px; border-radius:var(--r); background:radial-gradient(70% 80% at 50% 0%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%), var(--surface-2); overflow:hidden}
.b-phones figure{flex:none; width:42%; max-width:220px; margin:0; padding:5px; border-radius:24px; background:linear-gradient(145deg,#1E2F45,#0B131E); box-shadow:0 0 0 1px rgba(199,164,106,.35), 0 26px 44px -24px rgba(22,35,52,.7)}
.b-phones figure:first-child{rotate:-4deg} .b-phones figure:last-child{rotate:4deg; translate:0 16px}
.b-phones img{display:block; width:100%; height:auto; aspect-ratio:540/1169; object-fit:cover; border-radius:19px}
.b-shot{aspect-ratio:2.56/1; margin:4px 0 2px; border-radius:var(--r); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line)}
.b-shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 72%}
.b-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:36px}
.b-card{position:relative; overflow:hidden; display:grid; gap:14px; align-content:start; padding:clamp(28px,3.4vw,44px); border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s}
.b-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--gold-ink) 60%,var(--line))}
.b-card .num{font:italic 500 .95rem/1 var(--f-display); color:var(--gold-ink)}
.b-card h3{font:600 clamp(1.3rem,2.2vw,1.65rem)/1.35 var(--f-body)}
.b-card p{color:var(--soft)}
.b-card ul{margin:6px 0 0; padding:0; list-style:none; display:grid; gap:10px; font-size:.95rem; color:var(--soft)}
.b-card li{display:flex; gap:10px; align-items:flex-start}
.b-card li .ico{margin-top:.3em; width:16px; height:16px; color:var(--gold-ink)}
.b-card.navy{background:linear-gradient(160deg,#1A2A3F,var(--rk-navy)); border-color:rgba(199,164,106,.28); color:var(--rk-ivory)}
.b-card.navy h3{color:var(--rk-ivory)} .b-card.navy p,.b-card.navy li{color:var(--ivory-soft)} .b-card.navy .num,.b-card.navy li .ico{color:var(--rk-gold)}
/* mini art inside cards */

/* ── style showcase ── */
.lp-styles{display:grid; gap:40px; align-items:center}
@media (min-width:960px){.lp-styles{grid-template-columns:1fr 1.05fr; gap:64px}}
.st-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.st-btn{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 .92rem/1.3 var(--f-body); text-align:left; cursor:pointer; transition:border-color .3s, background .3s, transform .3s var(--ease)}
.st-btn:hover{border-color:var(--gold-ink); transform:translateY(-2px)}
.st-btn[aria-pressed="true"]{border-color:var(--gold-ink); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); box-shadow:inset 3px 0 0 var(--gold-ink)}
.st-sw{display:flex; flex:none} .st-sw i{width:18px; height:18px; margin-right:-5px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line)}
.st-stage{position:relative; display:grid; place-items:center; min-height:520px; padding:40px 20px; border-radius:var(--r); overflow:hidden; background:var(--p-bg,#F5EEDC); transition:background .7s var(--ease)}
.st-stage::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--p-acc,#C2A161) 40%,transparent),transparent 70%); transition:background .7s}
.st-card{position:relative; width:min(100%,340px); padding:16px; border-radius:12px; background:var(--p-card,#FBF7EE); box-shadow:0 40px 70px -34px rgba(0,0,0,.55); transition:background .7s, transform .7s var(--ease)}
.st-stage.swap .st-card{transform:translateY(8px) scale(.98)}
.st-in{display:grid; gap:12px; justify-items:center; padding:40px 20px 34px; text-align:center; border:1px solid var(--p-acc,#C2A161); border-radius:8px; color:var(--p-ink,#3E3117); transition:color .7s, border-color .7s}
.st-in small{font:500 .6rem/1 var(--f-display); letter-spacing:.34em; text-transform:uppercase; opacity:.8}
.st-in .names{font:italic 600 2.4rem/1.1 var(--f-display)}
.st-in .names i{color:var(--p-acc,#C2A161); font-size:.7em}
.st-in .rule{width:50px; height:1px; background:var(--p-acc,#C2A161)}
.st-in .nm{font-weight:600; font-size:1.05rem}
.st-in .ds{font-size:.82rem; opacity:.85}
.st-in .pill{margin-top:6px; padding:9px 22px; border-radius:10px; background:var(--p-ink,#3E3117); color:var(--p-bg,#F5EEDC); font-size:.78rem; transition:background .7s, color .7s}
.st-meta{position:relative; margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.st-meta .btn{background:rgba(255,255,255,.85); color:#162334; border-color:transparent}
.st-meta .btn:hover{background:#fff; color:#162334}


/* ── real wedding showcase ── */
.sc-wrap{display:grid; gap:48px; align-items:center}
@media (min-width:980px){.sc-wrap{grid-template-columns:.9fr 1.1fr; gap:56px}}
.sc-copy h2{margin-top:16px; font:600 clamp(1.9rem,4vw,2.7rem)/1.3 var(--f-body)}
.sc-lead{margin-top:18px; color:var(--soft); font-size:1.02rem; line-height:1.85}
.sc-lead b{color:var(--ink); font-size:1.15em}
.sc-facts{margin:22px 0 30px; padding:0; list-style:none; display:grid; gap:10px; color:var(--ink); font-size:.95rem}
.sc-facts li{display:flex; align-items:center; gap:12px}
.sc-facts .ico{flex:none; width:20px; height:20px; color:var(--gold-ink)}
.sc-soon{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); border:1px dashed color-mix(in srgb,var(--gold-ink) 50%,transparent); color:var(--ink); font-size:.92rem}
.sc-soon a{color:var(--gold-ink); font-weight:500; white-space:nowrap}
.sc-soon a:hover{color:var(--ink)}
.sc-soon .ico{flex:none; width:18px; height:18px; color:var(--gold-ink)}
.sc-phones{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 4px 28px; margin:0 -24px; padding-inline:24px; scrollbar-width:none}
.sc-phones::-webkit-scrollbar{display:none}
.sc-phone{flex:none; width:min(58vw,240px); margin:0; padding:7px; border-radius:30px; background:linear-gradient(145deg,#1E2F45,#0B131E); box-shadow:0 0 0 1px rgba(199,164,106,.35), 0 30px 60px -28px rgba(22,35,52,.7); scroll-snap-align:center}
.sc-phone img{display:block; width:100%; height:auto; aspect-ratio:540/1169; object-fit:cover; border-radius:24px; background:#F6E7E1}
@media (min-width:980px){
  .sc-phones{position:relative; display:block; height:560px; margin:0; padding:0; overflow:visible}
  .sc-phone{position:absolute; top:calc(var(--i) * 26px); left:calc(var(--i) * 23%); width:230px; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
  .sc-phone:nth-child(odd){transform:rotate(-3deg)} .sc-phone:nth-child(even){transform:rotate(3deg) translateY(18px)}
  .sc-phone:hover{z-index:5; transform:translateY(-10px) rotate(0); box-shadow:0 0 0 1px rgba(199,164,106,.6), 0 40px 70px -26px rgba(22,35,52,.8)}
}

/* ── dark band (day-of) ── */
.lp-dark{position:relative; isolation:isolate; overflow:hidden; background:var(--rk-navy); color:var(--rk-ivory)}
.lp-dark::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 70% at 100% 0%,rgba(199,164,106,.2),transparent 70%), radial-gradient(40% 60% at 0% 100%,rgba(216,183,176,.12),transparent 70%)}
.lp-dark .lp-head h2,.lp-dark h3{color:var(--rk-ivory)} .lp-dark .lp-head .lp-kicker{color:var(--rk-gold)} .lp-dark .lp-head p{color:var(--ivory-soft)}
.lp-dark .lp-head h2 .serif-i{color:var(--gold-soft)}
.lp-steps{display:grid; gap:20px; counter-reset:s}
@media (min-width:860px){.lp-steps{grid-template-columns:repeat(3,1fr)}}
.lp-step{position:relative; padding:34px 30px; border-radius:var(--r); border:1px solid rgba(199,164,106,.22); background:rgba(247,242,235,.03); transition:border-color .4s, background .4s}
.lp-step:hover{border-color:rgba(199,164,106,.6); background:rgba(247,242,235,.06)}
.lp-step .n{display:block; font:italic 500 3.4rem/1 var(--f-display); color:transparent; -webkit-text-stroke:1px var(--rk-gold); margin-bottom:22px}
.lp-step h3{font:600 1.2rem/1.4 var(--f-body)}
.lp-step p{margin-top:10px; color:var(--ivory-soft); font-size:.95rem}

/* ── pricing ── */
.lp-plans{display:grid; gap:24px; max-width:920px; margin:0 auto; grid-template-columns:1fr; align-items:stretch}
@media (min-width:720px){.lp-plans{grid-template-columns:repeat(2,1fr)}}
.lp-plan{position:relative; display:flex; flex-direction:column; gap:18px; padding:clamp(30px,4vw,42px) clamp(24px,3.4vw,36px); border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1)}
.lp-plan h3{margin-top:6px; font:600 1.6rem/1.3 var(--f-body)}
.pl-en{font:italic 500 .95rem/1 var(--f-display); color:var(--gold-ink)}
.lp-plan.hot .pl-en{color:var(--gold-soft)}
.lp-plan h3 .mode{padding:3px 10px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--accent) 18%,var(--surface)); color:var(--gold-ink); font:500 .74rem/1.4 var(--f-body)}
.lp-plan.hot h3 .mode{background:rgba(199,164,106,.18); color:var(--gold-soft)}
.lp-plan .for{min-height:3.2em; margin-top:6px}
.lp-plan .for{margin-top:6px; color:var(--soft); font-size:.95rem}
.lp-plan .price{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:16px 0; border-block:1px solid var(--line); color:var(--ink)}
.lp-plan .price .now{font:600 2.3rem/1.1 var(--f-body); letter-spacing:-.02em}
.lp-plan .price .cur{margin-left:6px; font-size:.95rem; font-weight:500; letter-spacing:0; color:var(--soft)}
.lp-plan .price .was{order:-1; width:100%; font-size:.95rem; color:var(--soft)}
.lp-plan .price del{text-decoration-thickness:1.5px}
.lp-plan .price .save{padding:2px 10px; border-radius:var(--r-pill); background:var(--ok-bg); color:var(--ok); font-size:.76rem; font-weight:600}
.lp-plan.hot .price .cur,.lp-plan.hot .price .was{color:var(--ivory-soft)}
.lp-plan.hot .price .save{background:rgba(199,164,106,.2); color:var(--gold-soft)}
.lp-plan .perk{display:flex; gap:8px; align-items:flex-start; margin:-4px 0 0; padding:10px 12px; border-radius:var(--r); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--ink); font-size:.86rem; font-weight:500}
.lp-plan .perk b{display:block; margin-bottom:1px; font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--gold-ink)}
.lp-plan.hot .perk b{color:var(--gold-soft)}
.lp-plan .perk .ico{flex:none; margin-top:.15em; width:16px; height:16px; color:var(--gold-ink)}
.lp-plan.hot .perk{background:rgba(199,164,106,.14); color:var(--rk-ivory)} .lp-plan.hot .perk .ico{color:var(--rk-gold)}
.lp-plan ul{font-size:.92rem}
.pl-promo{display:flex; align-items:center; justify-content:center; gap:10px; width:fit-content; max-width:100%; margin:-24px auto 40px; padding:10px 20px; border-radius:var(--r-pill); background:var(--rk-navy); color:var(--rk-ivory); font-size:.92rem; box-shadow:var(--sh-1)}
.pl-promo .ico{color:var(--rk-gold)} .pl-promo b{color:var(--gold-soft); font-weight:600}
.lp-plan .price small{display:block; margin-top:6px; font:400 .82rem/1.4 var(--f-body); color:var(--soft)}
.lp-plan ul{margin:0; padding:0; list-style:none; display:grid; gap:12px; color:var(--soft)}
.lp-plan li{display:flex; gap:12px; align-items:flex-start}
.lp-plan li .ico{margin-top:.3em; width:16px; height:16px; color:var(--gold-ink)}
.lp-plan .btn{margin-top:auto}
.lp-plan.hot{background:linear-gradient(165deg,#1C2E45,var(--rk-navy) 60%); color:var(--rk-ivory); border:1px solid rgba(199,164,106,.55); box-shadow:0 40px 80px -40px rgba(22,35,52,.9)}
.lp-plan.hot h3,.lp-plan.hot .price{color:var(--rk-ivory)} .lp-plan.hot .for,.lp-plan.hot li,.lp-plan.hot .price small{color:var(--ivory-soft)} .lp-plan.hot li .ico{color:var(--rk-gold)}
.lp-plan.hot .price{border-color:rgba(247,242,235,.14)}
.lp-plan.hot .btn.gold{background:var(--rk-gold); border-color:var(--rk-gold); color:var(--rk-navy)}
.lp-plan .badge{position:absolute; top:-14px; left:50%; translate:-50% 0; padding:5px 16px; border-radius:var(--r-pill); background:linear-gradient(100deg,#C7A46A,#E6CD9A); color:var(--rk-navy); font-size:.76rem; font-weight:600; letter-spacing:.04em; white-space:nowrap}

/* included-features panel + terms */
.pl-all{position:relative; max-width:1040px; margin:56px auto 0; padding:clamp(28px,4vw,48px); border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); overflow:hidden}
.pl-all::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--rk-gold),transparent)}
.pl-all-head{text-align:center; max-width:560px; margin:0 auto 34px}
.pl-all-head h3{margin-top:8px; font:600 clamp(1.3rem,2.4vw,1.6rem)/1.35 var(--f-body)}
.pl-all-head p{margin-top:8px; color:var(--soft); font-size:.95rem}
.pl-groups{display:grid; gap:18px}
@media (min-width:860px){.pl-groups{grid-template-columns:repeat(3,1fr); gap:0}}
.pl-group{padding:22px 20px; border-radius:var(--r); background:color-mix(in srgb,var(--accent) 6%,var(--surface)); border:1px solid var(--line)}
@media (min-width:860px){
  .pl-group{padding:4px 28px 8px; border:0; border-radius:0; background:none}
  .pl-group + .pl-group{border-left:1px solid var(--line)}
}
.pl-group-head{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.pl-group-head .ic{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--rk-navy); color:var(--rk-gold); border:1px solid color-mix(in srgb,var(--rk-gold) 60%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.pl-group-head .ic .ico{width:20px; height:20px}
.pl-group-head h4{margin-top:3px; font:600 1.08rem/1.3 var(--f-body)}
.pl-group ul{margin:0; padding:0; list-style:none; display:grid; gap:4px}
.pl-group li{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:.94rem; color:var(--ink)}
.pl-group li:last-child{border-bottom:0}
.pl-group li .ico{flex:none; width:19px; height:19px; color:var(--gold-ink)}
.pl-terms{max-width:1040px; margin:20px auto 0; padding:22px clamp(20px,3vw,32px); border-radius:var(--r); border:1px dashed color-mix(in srgb,var(--gold-ink) 45%,transparent)}
.pl-terms h4{font:600 .95rem/1.4 var(--f-body); margin-bottom:12px}
.pl-terms ul{margin:0; padding:0; list-style:none; display:grid; gap:10px 32px; color:var(--soft); font-size:.88rem}
@media (min-width:720px){.pl-terms ul{grid-template-columns:1fr 1fr}}
.pl-terms li{display:flex; gap:10px; align-items:flex-start}
.pl-terms li .ico{flex:none; margin-top:.25em; width:15px; height:15px; color:var(--gold-ink)}

/* ── about us ── */
.ab-wrap{display:grid; gap:44px; align-items:center}
@media (min-width:920px){.ab-wrap{grid-template-columns:.75fr 1.25fr; gap:72px}}
.ab-emblem{display:grid; justify-items:center; gap:18px; text-align:center}
.ab-ring{position:relative; width:min(62vw,300px); aspect-ratio:1; padding:18px; border-radius:50%; background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
.ab-ring::before,.ab-ring::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid color-mix(in srgb,var(--gold-ink) 45%,transparent)}
.ab-ring::after{inset:-14px; border-style:dashed; opacity:.6}
.ab-ring img{display:block; width:100%; height:100%; border-radius:28%; box-shadow:0 30px 60px -30px rgba(22,35,52,.7)}
.ab-emblem p{font-size:1.05rem; color:var(--gold-ink)}
.ab-copy h2{margin-top:14px; font:600 clamp(1.9rem,4vw,2.6rem)/1.3 var(--f-body)}
.ab-quote{margin:18px 0 0; padding:4px 0 4px 18px; border-left:2px solid var(--rk-gold); font:500 1.12rem/1.7 var(--f-body); color:var(--gold-ink)}
.ab-sign{display:grid; gap:2px; margin-top:22px}
.ab-sign .serif-i{font-size:1.05rem; color:var(--soft)}
.ab-sign b{font:600 1.5rem/1.3 var(--f-body); color:var(--ink)}
.ab-sign small{color:var(--soft); font-size:.84rem}
.ab-p{margin-top:16px; color:var(--soft); font-size:1.02rem; line-height:1.9}
.ab-values{margin:30px 0 0; padding:0; list-style:none; display:grid; gap:14px}
@media (min-width:720px){.ab-values{grid-template-columns:repeat(3,1fr)}}
.ab-values li{display:grid; gap:12px; align-content:start; padding:20px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.ab-values .ic{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--rk-navy); color:var(--rk-gold); border:1px solid color-mix(in srgb,var(--rk-gold) 55%,transparent)}
.ab-values .ic .ico{width:18px; height:18px}
.ab-values b{display:block; font-weight:600; font-size:.98rem}
.ab-values span:not(.ic){display:block; margin-top:4px; color:var(--soft); font-size:.88rem; line-height:1.65}

/* turnaround line on package cards */
.lp-plan .pl-ready{display:flex; align-items:center; gap:8px; margin:-6px 0 0; font-size:.88rem; font-weight:500; color:var(--ink)}
.lp-plan .pl-ready .ico{flex:none; width:17px; height:17px; color:var(--gold-ink)}
.lp-plan.hot .pl-ready{color:var(--rk-ivory)} .lp-plan.hot .pl-ready .ico{color:var(--rk-gold)}

/* collapsible blocks: open on desktop, closed on phones (landing.js) */
details.pl-all > summary,details.pl-terms > summary{list-style:none; cursor:default}
details.pl-all > summary::-webkit-details-marker,details.pl-terms > summary::-webkit-details-marker{display:none}
.pl-more{display:none}
@media (max-width:860px){
  details.pl-all > summary,details.pl-terms > summary{cursor:pointer}
  .pl-more{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--line-strong); color:var(--ink); font-size:.86rem; font-weight:500}
  .pl-more::after,details.pl-terms > summary h4::after{content:""; width:7px; height:7px; border-right:1.5px solid var(--gold-ink); border-bottom:1.5px solid var(--gold-ink); rotate:45deg; translate:0 -2px; transition:rotate .3s var(--ease)}
  details[open] .pl-more::after,details.pl-terms[open] > summary h4::after{rotate:225deg; translate:0 2px}
  details.pl-all:not([open]) .pl-all-head{margin-bottom:0}
  details.pl-terms > summary h4{display:flex; align-items:center; justify-content:space-between; margin:0}
  details.pl-terms[open] > summary h4{margin-bottom:12px}
}
details.pl-all[open] .pl-more{font-size:0; gap:0; padding:8px 12px} details.pl-all[open] .pl-more::before{content:"ซ่อนรายการ"; font-size:.86rem}

/* reviews */
.rv-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rv-card{margin:0; display:flex; flex-direction:column; gap:16px; padding:28px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1)}
.rv-stars{color:var(--rk-gold); letter-spacing:.15em; font-size:1rem}
.rv-card blockquote{margin:0; flex:1; color:var(--ink); line-height:1.85}
.rv-card blockquote::before{content:"“"; display:block; height:.5em; font:500 3rem/1 var(--f-display); color:color-mix(in srgb,var(--gold-ink) 60%,transparent)}
.rv-card figcaption b{display:block; font-weight:600} .rv-card figcaption span{display:block; margin-top:2px; color:var(--soft); font-size:.85rem}

/* value comparison */
.cp-sum{display:grid; gap:14px; max-width:1040px; margin:0 auto 26px; padding:0; list-style:none}
@media (min-width:720px){.cp-sum{grid-template-columns:repeat(3,1fr)}}
.cp-sum li{display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:16px 18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.cp-sum .ico{grid-row:span 2; width:36px; height:36px; padding:8px; border-radius:50%; background:var(--rk-navy); color:var(--rk-gold); border:1px solid color-mix(in srgb,var(--rk-gold) 55%,transparent)}
.cp-sum b{font-weight:600} .cp-sum span{color:var(--soft); font-size:.86rem}
.cp-wrap{max-width:1040px; margin:0 auto; overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-1)}
.cp-table{min-width:720px; font-size:.92rem}
.cp-table th,.cp-table td{padding:14px 18px; vertical-align:top; line-height:1.65; border-bottom:1px solid var(--line)}
.cp-table thead th{padding:20px 18px; vertical-align:bottom; font:600 .98rem/1.4 var(--f-body); color:var(--ink); text-transform:none; letter-spacing:0; background:var(--surface); border-bottom:2px solid var(--line)}
.cp-h0-t{font:500 .74rem/1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--soft)}
.cp-hd{display:flex; align-items:center; gap:12px}
.cp-hic{display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--surface-2); color:var(--soft); border:1px solid var(--line)}
.cp-hic .ico{width:19px; height:19px}
.cp-ht{display:grid; line-height:1.3}
.cp-ht b{font-weight:600; font-size:1rem}
.cp-ht small{font-weight:400; font-size:.78rem; color:var(--soft)}
.cp-table thead th.us{position:relative; padding-top:34px; background:linear-gradient(165deg,#1C2E45,var(--rk-navy)); border-bottom-color:var(--rk-gold)}
.cp-table thead th.us::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#B8925A,#E9D3A3,#B8925A)}
.cp-table thead th.us .cp-ht b{color:var(--rk-ivory); font-size:1.1rem}
.cp-table thead th.us .cp-ht small{color:var(--rk-gold); font-family:var(--f-display); font-style:italic; letter-spacing:.04em}
.cp-mark{flex:none; width:40px; height:40px; border-radius:11px; box-shadow:0 0 0 1px rgba(199,164,106,.6)}
.cp-best{position:absolute; top:10px; left:18px; padding:2px 10px; border-radius:var(--r-pill); background:var(--rk-gold); color:var(--rk-navy); font-size:.7rem; font-weight:600; letter-spacing:.02em}
.cp-table tbody th{width:170px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; white-space:normal; font-size:.92rem}
.cp-table tbody th small{display:block; font-weight:400; color:var(--soft); font-size:.78rem}
.cp-table td{color:var(--soft)}
.cp-table .us{background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--ink)}
.cp-table td.us{position:relative; padding-left:44px}
.cp-table td.us .ico{position:absolute; left:18px; top:17px; width:17px; height:17px; color:var(--gold-ink)}

.cp-table tr.cp-group th{padding:12px 18px; background:color-mix(in srgb,var(--rk-navy) 6%,var(--surface)); color:var(--gold-ink); font-size:.82rem; font-weight:600; letter-spacing:.04em}
.cp-table tr.cp-group .ico{width:16px; height:16px; margin-right:8px; vertical-align:-3px}
.cp-table tbody tr:hover{background:none}
.cp-toggle{display:none}
.js .cp-wrap:not(.open) .cp-more{display:none}
.js .cp-toggle{display:block; width:100%; min-height:52px; border:0; border-top:1px solid var(--line); background:var(--surface); color:var(--gold-ink); font:500 .95rem/1 var(--f-body); cursor:pointer; transition:background .2s}
.js .cp-toggle:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.st-merged{margin-top:clamp(64px,9vw,110px); padding-top:clamp(56px,8vw,90px); border-top:1px solid var(--line)}
/* phones: every topic becomes a card, ReukRak first; the other two follow as smaller lines */
@media (max-width:720px){
  .cp-wrap{overflow:visible; border:0; background:none; box-shadow:none}
  .cp-table{min-width:0; display:block}
  .cp-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .cp-table tbody{display:grid; gap:12px; margin-bottom:12px}
  .cp-table tr{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
  .cp-table tr.cp-group{border:0; background:none; margin-top:10px}
  .cp-table tr.cp-group th{padding:4px 2px; background:none; border:0; font-size:.86rem}
  .cp-table th,.cp-table td{display:block; width:auto!important; border:0; padding:0 16px}
  .cp-table tbody th[scope=row]{order:0; padding:14px 16px 6px; font-size:1rem}
  .cp-table tbody th small{display:inline; margin-left:6px}
  .cp-table td.us{order:1; margin:0 10px; padding:10px 12px 10px 38px; border-radius:var(--r-sm); font-weight:500}
  .cp-table td.us .ico{left:12px; top:13px}
  .cp-table td:not(.us){order:2; padding:8px 16px 0; font-size:.85rem}
  .cp-table td:not(.us):last-of-type,.cp-table tr > td:nth-of-type(2){padding-bottom:14px}
  .cp-table td::before{content:attr(data-label); display:block; margin-bottom:2px; font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--soft)}
  .cp-table td.us::before{color:var(--gold-ink)}
  .js .cp-wrap:not(.open) .cp-more{display:none}
  .js .cp-toggle{display:block; width:100%; min-height:48px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--gold-ink); font:500 .92rem/1 var(--f-body); cursor:pointer}
}
.cp-note{max-width:1040px; margin:14px auto 0; color:var(--soft); font-size:.8rem; text-align:center}

/* ── FAQ ── */
.lp-faq{max-width:820px; margin:0 auto; border-top:1px solid var(--line)}
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq summary{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 4px; cursor:pointer; list-style:none; font:500 1.08rem/1.5 var(--f-body)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:""; flex:none; width:14px; height:14px; background:linear-gradient(var(--gold-ink),var(--gold-ink)) center/14px 1.5px no-repeat, linear-gradient(var(--gold-ink),var(--gold-ink)) center/1.5px 14px no-repeat; transition:transform .35s var(--ease)}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq summary:hover{color:var(--gold-ink)}
.lp-faq .a{padding:0 4px 26px; color:var(--soft); max-width:700px}

/* ── final CTA ── */
.lp-final{text-align:center; padding:clamp(90px,12vw,150px) 0}
.lp-final .brand{justify-content:center}
.lp-final .brand .logo{height:clamp(64px,8vw,92px)}
.lp-final h2{margin-top:30px; color:var(--rk-ivory); font:600 clamp(2rem,4.6vw,3.3rem)/1.28 var(--f-body)}
.lp-final h2 .serif-i{display:block; margin-bottom:8px; font-size:.62em; color:var(--gold-soft)}
.lp-final p{max-width:560px; margin:18px auto 0; color:var(--ivory-soft); font-size:1.05rem}
.lp-final .row{justify-content:center; margin-top:40px; gap:12px}

/* ── footer ── */
.lp-foot{padding:56px 0 40px; background:var(--navy-2); color:var(--ivory-soft); font-size:.9rem}
.lp-foot .wrap{display:grid; gap:36px}
@media (min-width:820px){.lp-foot .wrap{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.lp-foot small{opacity:.7; font-size:.78em}
.lp-foot .brand .logo{height:52px}
.lp-foot p{margin-top:16px; max-width:340px; line-height:1.8}
.lp-foot h4{font:500 .74rem/1 var(--f-body); letter-spacing:.24em; text-transform:uppercase; color:var(--rk-gold); margin-bottom:16px}
.lp-foot ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.lp-foot a{color:var(--ivory-soft); text-decoration:none} .lp-foot a:hover{color:var(--rk-gold)}
.lp-foot .base{grid-column:1/-1; padding-top:24px; border-top:1px solid rgba(247,242,235,.1); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.82rem}
.lp-foot a:focus-visible,.lp-nav a:focus-visible,.lp-dark a:focus-visible,.lp-hero a:focus-visible{outline-color:var(--rk-gold)}

/* ── sticky CTA (mobile) ── */
.lp-sticky{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:45; display:flex; align-items:center; gap:8px; padding:10px 10px 10px 16px; border-radius:var(--r); background:rgba(15,26,40,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(199,164,106,.35); box-shadow:0 18px 40px -16px rgba(0,0,0,.6); color:var(--rk-ivory); transform:translateY(140%); transition:transform .4s var(--ease)}
.lp-sticky[hidden]{display:none}
.lp-sticky.show{transform:none}
.lp-sticky .txt{display:grid; flex:1; min-width:0; line-height:1.25}
.lp-sticky .txt small{font-size:.7rem; color:var(--gold-soft)}
.lp-sticky .txt b{font-size:1.05rem; font-weight:600}
.lp-sticky .btn{min-height:40px; padding:0 14px}
.lp-sticky .btn.ghost{color:var(--rk-ivory); border-color:rgba(247,242,235,.3)}
.lp-sticky .btn.gold{background:var(--rk-gold); border-color:var(--rk-gold); color:var(--rk-navy)}
@media (min-width:861px){.lp-sticky{display:none!important}}
@media (max-width:860px){.lp-foot{padding-bottom:110px}}
@media (max-width:360px){.lp-sticky .btn.ghost{display:none}}

/* ── responsive ── */
@media (max-width:860px){
  .lp-nav nav{display:none}
  .lp-nav .actions{margin-left:auto}
}
@media (max-width:600px){
  .lp-nav .brand .logo,.lp-nav.scrolled .brand .logo{height:36px}
  .lp-nav .wrap{gap:10px}
  .lp-hero{padding:108px 0 88px}
  .lp-visual{width:min(100%,360px)}
  .lp-note.n3{display:none}
  .lp-scroll{display:none}
  .st-stage{min-height:440px}
  .st-list{grid-template-columns:repeat(2,1fr); gap:8px}
  .st-btn{min-height:50px; padding:8px 10px; gap:8px; font-size:.82rem}
  .st-sw i{width:14px; height:14px}
          .pl-promo{border-radius:var(--r); text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .lp-marquee .track{animation:none; flex-wrap:wrap; width:auto; justify-content:center}
  .lp-marquee span.dup{display:none}
}
.lp-foot .base a{text-decoration:underline; text-underline-offset:3px}

/* nav link that leaves the page (e.g. /wedding → ฤกษ์รัก Gallery) */
.lp-nav nav a.nav-ext{margin-left:6px; padding-left:20px; border-left:1px solid rgba(247,242,235,.18); color:var(--gold-soft)}
.lp-nav nav a.nav-ext::after{left:20px}

/* Thai inside letter-spaced English labels: Thai must not be tracked out (vowel/tone marks drift apart) */
.lp-kicker .kth{letter-spacing:.04em; font-size:1.12em}
.lp-foot h4{letter-spacing:.06em}
/* tap size on phones (WCAG 2.5.5 target 44px) */
@media (max-width:560px){ .lp-nav .actions .btn{min-height:44px} .lp-nav .actions .theme-toggle{width:44px; height:44px} }