/*
 * st-landing-okay.css — /start landing, layout pass 2026-10-21.
 *
 * Layout and section order follow the reference the owner picked
 * (okaydev.co: collage hero + stacked headline, marquee band, full-bleed colour
 * band with a giant bleeding word, alternating rows, light tool band, accent
 * statement band, pricing, FAQ, closing band). Brand stays ShortTrust:
 * violet ground, lavender accent, karaoke yellow as the highlight colour.
 * Loaded after st-polish.css. Backup of the previous page:
 * _BACKUP_2026-10-21_before-landing-okaydev-redesign_by-claude-opus-5-5/.
 */

:root {
  --ok-ground: #0b0814;
  --ok-raise: #161026;
  --ok-raise-2: #211836;
  --ok-ink: #f6f2ff;
  --ok-ink-2: #c9bedf;
  --ok-accent: #d2bbff;
  --ok-accent-ink: #1d0846;
  --ok-violet: #7c3aed;
  --ok-violet-2: #5b21b6;
  --ok-yellow: #ffe24a;
  --ok-light: #f3eeff;
  --ok-light-ink: #160c2b;
  --ok-ease: cubic-bezier(.16, 1, .3, 1);
  --ok-gutter: clamp(1rem, 4vw, 3rem);
}

body.st-landing main.okp { padding: 0 !important; }
/* each section sets its own gutter (old inline rule padded every section) */
body.st-landing main.okp > .okm { padding-left: 0 !important; padding-right: 0 !important; }

/* shared */
.okp h2, .okp h3 { margin: 0; }
.ok-kicker { font-size: .95rem; font-weight: 700; color: var(--ok-accent); margin: 0 0 1rem; }
.ok-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  background: var(--ok-accent); color: var(--ok-accent-ink) !important;
  font-weight: 800; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
  transition: transform .35s var(--ok-ease), background .25s ease, box-shadow .35s var(--ok-ease);
}
.ok-pill:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 10px 0 -2px rgba(0,0,0,.35); }
.ok-pill:active { transform: translateY(1px); }
.ok-pill-ink { background: var(--ok-ground); color: var(--ok-ink) !important; }
.ok-pill-dark { background: var(--ok-light-ink); color: #fff !important; }
.ok-pill-ghost { background: transparent; color: var(--ok-ink) !important; box-shadow: inset 0 0 0 2px rgba(246,242,255,.35); }
.ok-pill-lg { padding: 1rem 1.9rem; font-size: 1.1rem; }

/* kinetic headings: each word rises from a mask (words wrapped by JS) */
.ok-kin .okw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.ok-kin .okw > span { display: inline-block; }
html.ok-motion .ok-kin .okw > span {
  transform: translateY(105%) rotate(4deg);
  transition: transform .9s var(--ok-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
html.ok-motion .ok-kin.is-in .okw > span { transform: none; }

/* reveal cards */
html.ok-motion .ok-rv {
  opacity: 0; transform: translateY(36px) scale(.97);
  transition: opacity .8s var(--ok-ease), transform .9s var(--ok-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.ok-motion .ok-rv.is-in { opacity: 1; transform: none; }

/* ───────── ① hero ───────── */
.okh {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex; align-items: center; justify-content: center;
  padding: 7.5rem var(--ok-gutter) 4rem !important;
  overflow: hidden;
  isolation: isolate;
}
.okh::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(124,58,237,.30), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(210,187,255,.10), transparent 70%);
}
.okh::after {
  /* pixel grid, the reference's textured green read as our violet grid */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(210,187,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210,187,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%);
}
.okh-collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.okh-tile {
  position: absolute; margin: 0;
  width: var(--w, 120px); aspect-ratio: 9 / 16;
  border-radius: 14px; overflow: hidden;
  background: var(--ok-raise);
  box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07);
  transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--r, 0deg));
  opacity: 0;
  animation: ok-tile-in 1.1s var(--ok-ease) forwards, ok-float 7s ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + 1.1s);
  will-change: transform;
}
/* after the entrance only the float runs, so pointer parallax (--px/--py) applies live */
.okh-tile.is-ready { opacity: 1; animation: ok-float 7s ease-in-out infinite; }
.okh-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.okh-tile.t1 { --w: 116px; left: 8%;  top: 16%; --r: -6deg; --d: .15s; }
.okh-tile.t2 { --w: 92px;  left: 21%; top: 8%;  --r: 4deg;  --d: .3s; }
.okh-tile.t3 { --w: 82px;  left: 14%; top: 45%; --r: 5deg;  --d: .45s; }
.okh-tile.t4 { --w: 86px;  right: 22%; top: 8%; --r: -4deg; --d: .25s; }
.okh-tile.t5 { --w: 112px; right: 7%; top: 13%; --r: 7deg;  --d: .4s; }
.okh-tile.t6 { --w: 92px;  right: 21%; bottom: 6%; --r: -5deg; --d: .55s; }
.okh-tile.t7 { --w: 84px;  left: 23%; bottom: 7%; --r: -3deg; --d: .6s; }
@keyframes ok-tile-in {
  from { opacity: 0; transform: translate3d(var(--px,0), calc(var(--py,0px) + 60px), 0) rotate(calc(var(--r,0deg) * 3)) scale(.8); }
  to   { opacity: 1; transform: translate3d(var(--px,0), var(--py,0), 0) rotate(var(--r,0deg)); }
}
@keyframes ok-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.okh-sticker {
  position: absolute; padding: .5rem .9rem; border-radius: 999px;
  font-weight: 800; font-size: .9rem; white-space: nowrap;
  background: var(--ok-yellow); color: #1a1200;
  transform: rotate(var(--r, -6deg));
  opacity: 0; animation: ok-tile-in 1s var(--ok-ease) forwards; animation-delay: var(--d, .9s);
  box-shadow: 0 8px 0 -2px rgba(0,0,0,.35);
}
.okh-sticker em { font-style: normal; text-decoration: underline wavy; }
.okh-sticker.s1 { left: 22%; top: 34%; --r: -8deg; --d: .9s; }
.okh-sticker.s2 { right: 5%; bottom: 9%; --r: 6deg; --d: 1.05s; background: var(--ok-accent); color: var(--ok-accent-ink); }

/* the existing orbit cards become two big collage pieces */
body.st-landing .okh .st-orbit { z-index: 3; }
body.st-landing .okh .st-orbit-silence { left: max(12px, calc(50% - 46rem)); top: auto; bottom: 9%; }
body.st-landing .okh .st-orbit-motion  { right: max(12px, calc(50% - 46rem)); top: auto; bottom: 22%; }

.okh-copy { position: relative; z-index: 2; text-align: center; max-width: 54rem; }
.okh-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem;
  padding: .45rem 1rem; border-radius: 999px;
  background: rgba(22,16,38,.8); box-shadow: inset 0 0 0 1px rgba(210,187,255,.25);
  font-weight: 700; font-size: .92rem; color: var(--ok-ink-2);
}
.okh-eyebrow .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok-yellow); box-shadow: 0 0 12px var(--ok-yellow); animation: ok-blink 1.6s ease-in-out infinite; }
@keyframes ok-blink { 50% { opacity: .35; } }

.okh-title {
  display: flex; flex-direction: column; align-items: center; gap: .02em;
  margin: 0 0 1.6rem;
  font-size: clamp(3.2rem, 10.5vw, 8.6rem) !important;
  line-height: .98 !important; font-weight: 800 !important; letter-spacing: -.045em !important;
  color: var(--ok-ink);
}
.okh-line { display: block; overflow: hidden; padding: .04em .12em .1em; }
.okh-line .okh-in { display: inline-block; }
html.ok-motion .okh-line .okh-in { transform: translateY(110%); transition: transform 1.05s var(--ok-ease); }
html.ok-motion .okh-line[data-ok-line="1"] .okh-in { transition-delay: .12s; }
html.ok-motion .okh-line[data-ok-line="2"] .okh-in { transition-delay: .24s; }
html.ok-motion .okh-title.is-in .okh-line .okh-in { transform: none; }
.okh-line[data-ok-line="1"] { color: transparent; -webkit-text-stroke: 2px var(--ok-accent); }
.okh-box {
  margin-top: .12em;
  background: var(--ok-accent); color: var(--ok-accent-ink);
  border-radius: .12em; padding: .02em .22em .1em;
  transform: rotate(-2deg);
  box-shadow: .08em .08em 0 var(--ok-violet);
}
html.ok-motion .okh-box { transform: rotate(-2deg) scaleX(0); transform-origin: left; transition: transform .8s var(--ok-ease) .2s; }
html.ok-motion .okh-title.is-in .okh-box { transform: rotate(-2deg) scaleX(1); }
.okh-swap { display: inline-block; transition: transform .45s var(--ok-ease), opacity .3s ease, filter .3s ease; }
.okh-swap.is-out { transform: translateY(-40%) rotate(-4deg); opacity: 0; filter: blur(6px); }
.okh-swap.is-pre { transform: translateY(40%) rotate(4deg); opacity: 0; filter: blur(6px); transition: none; }

.okh-sub { margin: 0 auto 2rem; max-width: 40rem; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; color: var(--ok-ink-2); }
html.ok-motion .okh-sub, html.ok-motion .okh-cta, html.ok-motion .okh-eyebrow { opacity: 0; transform: translateY(16px); transition: opacity .8s ease .55s, transform .9s var(--ok-ease) .55s; }
html.ok-motion .okh-copy.is-in .okh-sub, html.ok-motion .okh-copy.is-in .okh-cta, html.ok-motion .okh-copy.is-in .okh-eyebrow { opacity: 1; transform: none; }
html.ok-motion .okh-copy.is-in .okh-eyebrow { transition-delay: 0s; }
body.st-landing .okh-cta.st-prompt {
  margin: 0 auto; display: inline-flex; align-items: center; gap: .7rem;
  padding: .45rem .45rem .45rem 1.1rem; border-radius: 999px;
  background: rgba(22,16,38,.88) !important; box-shadow: inset 0 0 0 1px rgba(210,187,255,.28), 0 20px 50px rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
}
body.st-landing .okh-cta .material-symbols-outlined { color: var(--ok-accent); }
/* Collapsed = only the "เริ่มตัดต่อ" button; hover/focus slides the icon + copy out (original behaviour) */
body.st-landing .okh-cta.st-prompt { padding: .4rem; gap: 0; transition: padding .55s var(--ok-ease), gap .55s var(--ok-ease); }
body.st-landing .okh-cta.st-prompt > .material-symbols-outlined { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .55s var(--ok-ease), opacity .35s ease; }
body.st-landing .okh-cta .st-prompt-copy { color: var(--ok-ink-2); font-weight: 600; max-width: 0; opacity: 0; }
body.st-landing .okh-cta.st-prompt:hover, body.st-landing .okh-cta.st-prompt:focus-within { padding: .45rem .45rem .45rem 1.1rem; gap: .7rem; }
body.st-landing .okh-cta.st-prompt:hover > .material-symbols-outlined, body.st-landing .okh-cta.st-prompt:focus-within > .material-symbols-outlined { max-width: 2rem; opacity: 1; }
body.st-landing .okh-cta.st-prompt:hover .st-prompt-copy, body.st-landing .okh-cta.st-prompt:focus-within .st-prompt-copy { max-width: 30rem; opacity: 1; }
@media (hover: none) {
  body.st-landing .okh-cta.st-prompt { padding: .45rem .45rem .45rem 1.1rem; gap: .7rem; }
  body.st-landing .okh-cta.st-prompt > .material-symbols-outlined { max-width: 2rem; opacity: 1; }
  body.st-landing .okh-cta .st-prompt-copy { max-width: 30rem; opacity: 1; }
}
.okh-go {
  display: inline-flex; align-items: center; gap: .3rem; padding: .7rem 1.25rem; border-radius: 999px;
  background: var(--ok-accent); color: var(--ok-accent-ink) !important; font-weight: 800; text-decoration: none;
  transition: transform .3s var(--ok-ease);
}
.okh-go:hover { transform: translateX(3px); }
.okh-go .material-symbols-outlined { color: inherit !important; font-size: 1.2rem; }

/* ───────── ② marquee band ───────── */
.okm {
  position: relative; z-index: 2;
  background: var(--ok-accent); color: var(--ok-accent-ink);
  transform: rotate(-1.6deg) scale(1.04);
  margin: -1.5rem 0 0; padding: .9rem 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  overflow: hidden;
}
.okm-track {
  display: inline-flex; align-items: center; gap: 1.4rem; white-space: nowrap;
  font-weight: 800; font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1;
  animation: ok-marquee 28s linear infinite;
  padding-left: 1.4rem;
}
.okm-track .o { color: transparent; -webkit-text-stroke: 1.6px var(--ok-accent-ink); }
.okm-track i { font-style: normal; color: var(--ok-violet); font-size: .8em; }
@keyframes ok-marquee { to { transform: translateX(-50%); } }

/* ───────── ③ statement + style clips ───────── */
.oks { text-align: center; padding: clamp(5rem, 10vw, 8rem) var(--ok-gutter) 4rem !important; position: relative; }
.oks-title { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--ok-ink); }
.oks-title .ok-soft { color: var(--ok-ink-2); font-weight: 600; }
.oks .ok-pill { margin: 1.6rem 0 3rem; }
.oks-stage { position: relative; max-width: 1180px; margin: 0 auto; }
body.st-landing .oks-clips.st-style-clips { position: relative; z-index: 2; }

/* ───────── ④ purple band ───────── */
.okb {
  position: relative; overflow: hidden;
}
/* old inline rules force every landing section transparent (id + !important) */
body.st-landing main.okp > section#features.okb {
  background: linear-gradient(160deg, var(--ok-violet) 0%, var(--ok-violet-2) 70%) !important;
}
.okb {
  color: #fff;
  padding: clamp(5rem, 9vw, 7.5rem) var(--ok-gutter) 0 !important;
}
.okb-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.okb-copy h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.okb-hl { color: var(--ok-yellow); }
.okb-copy > p { margin: 1.3rem 0 1.2rem; font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,.86); max-width: 32rem; }
.okb-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .6rem; }
.okb-list li { display: flex; gap: .6rem; align-items: baseline; font-weight: 600; }
.okb-list li::before { content: "✦"; color: var(--ok-yellow); }
.okb-window {
  background: #fff; color: var(--ok-light-ink); border-radius: 18px; padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 30px 70px rgba(20,4,60,.55); transform: rotate(1.5deg);
  transition: transform .6s var(--ok-ease);
}
.okb-window:hover { transform: rotate(0deg) translateY(-4px); }
.okb-bar { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: #6b5a8c; margin-bottom: .9rem; }
.okb-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #e3dcf3; }
.okb-bar span { margin-left: auto; font-weight: 700; }
.okb-lines { display: grid; gap: .3rem; padding: 1.1rem; border-radius: 12px; background: #120a24; color: #fff; text-align: center; min-height: 9.5rem; align-content: center; }
.okb-ln { margin: 0; font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 800; letter-spacing: -.01em; }
.okb-ln span, .okb-ln b { display: inline-block; transition: color .2s ease, transform .3s var(--ok-ease); }
.okb-ln .is-on { color: var(--ok-yellow); transform: translateY(-2px) scale(1.06); }
.okb-ln b { color: var(--ok-yellow); }
.okb-wave { display: flex; align-items: center; gap: 3px; height: 38px; margin: .9rem 0; }
.okb-wave i, .okb-wave b { flex: 1; border-radius: 99px; background: #c9b8f2; height: 60%; animation: st-wave 1.15s ease-in-out infinite; }
.okb-wave i:nth-child(odd) { animation-delay: .15s; }
.okb-wave i:nth-child(3n) { animation-delay: .3s; }
.okb-wave b { height: 4px; background: #ff8a80; animation: none; }
.okb-input { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .8rem .7rem 1rem; border-radius: 12px; background: #f3eeff; font-weight: 600; font-size: .92rem; }
.okb-input em { font-style: normal; font-size: .8rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px; background: var(--ok-light-ink); color: #fff; }
.okb-caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--ok-violet); animation: ok-blink 1s steps(1) infinite; }
.okb-giant {
  position: relative; z-index: 1; margin-top: clamp(3rem, 6vw, 5rem);
  white-space: nowrap; line-height: .78; pointer-events: none;
  font-weight: 800; font-size: clamp(5rem, 19vw, 17rem); letter-spacing: -.06em;
  color: rgba(255,255,255,.10);
  transform: translateX(var(--ok-shift, 0px));
  margin-bottom: -.12em;
}

/* ───────── ⑤ alternating rows ───────── */
.okr-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(5rem, 9vw, 8rem) var(--ok-gutter) !important; display: grid; gap: clamp(5rem, 10vw, 8.5rem); }
.okr { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.okr-flip .okr-text { order: 2; }
.okr-text h3 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: var(--ok-ink); margin-bottom: 1.1rem; }
.okr-text > p:not(.ok-kicker) { color: var(--ok-ink-2); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.6rem; max-width: 30rem; }
body.st-landing .okr-media.st-tool-poster { min-height: 360px; border-radius: 24px; transform: rotate(-1.2deg); transition: transform .6s var(--ok-ease) !important; }
body.st-landing .okr-flip .okr-media.st-tool-poster { transform: rotate(1.2deg); }
body.st-landing .okr-media.st-tool-poster:hover { transform: rotate(0) translateY(-6px); }
.okr-stack { grid-template-columns: 1fr; text-align: center; }
.okr-text-center { margin: 0 auto; }
.okr-text-center > p:not(.ok-kicker) { margin: 0 auto; }
.okr-stack .st-sf-marquee-wrap { width: 100vw; margin-left: calc(50% - 50vw); }

/* studio window (replaces the Tailwind-built mock with the same content) */
.okr-editor { position: relative; aspect-ratio: 4 / 3; }
.okr-editor .st-editor-window { position: absolute; inset: 4%; border-radius: 20px; overflow: hidden; background: #0b1220; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.okw-top { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; font-size: .88rem; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.08); }
.okw-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #38bdf8; }
.okw-body { display: grid; grid-template-columns: 54px 1fr; height: calc(100% - 42px); }
.okw-rail { display: flex; flex-direction: column; gap: .6rem; padding: .6rem; border-right: 1px solid rgba(255,255,255,.08); }
.okw-rail i { height: 2.1rem; border-radius: 8px; background: rgba(255,255,255,.06); }
.okw-rail i.on { background: rgba(56,189,248,.12); box-shadow: inset 0 0 0 1px rgba(56,189,248,.7); }
.okw-stage { display: flex; flex-direction: column; gap: .6rem; padding: .9rem; }
.okw-screen { position: relative; flex: 1; border-radius: 12px; background: #0a1a3a; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1.2rem; overflow: hidden; }
.okw-screen p { margin: 0; font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.2rem); color: #fff; }
.okw-screen span { color: #fcd34d; }
.okw-track { height: 3rem; border-radius: 10px; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; gap: 3px; padding: .4rem .6rem; }
.okw-track i { flex: 1; height: 60%; border-radius: 3px; background: rgba(255,255,255,.5); animation: st-wave 1.2s ease-in-out infinite; }
.okw-track i:nth-child(odd) { animation-delay: .2s; }
.okw-track b { flex: 1; height: 85%; border-radius: 3px; background: rgba(56,189,248,.8); }

/* ───────── ⑥ light tool band ───────── */
body.st-landing main.okp > section#tools.okt { background: var(--ok-light) !important; }
.okt { color: var(--ok-light-ink); padding: clamp(5rem, 9vw, 7.5rem) var(--ok-gutter) !important; }
.okt-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.okt-copy h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--ok-light-ink); }
.okt-copy p { color: #4a3d63; font-size: 1.05rem; line-height: 1.7; margin: 1.2rem 0 1.8rem; max-width: 26rem; }
.okt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.okt-tile {
  position: relative; display: flex; flex-direction: column; gap: .35rem; aspect-ratio: 1 / 1;
  padding: 1.1rem; border-radius: 18px; text-decoration: none;
  background: #fff; color: var(--ok-light-ink);
  box-shadow: 0 1px 0 rgba(22,12,43,.06), 0 10px 30px -18px rgba(22,12,43,.35);
  transition: transform .45s var(--ok-ease), box-shadow .45s var(--ok-ease), background .3s ease, color .3s ease;
}
.okt-tile:nth-child(3n+2) { transform: translateY(1.4rem); }
html.ok-motion .okt-tile.ok-rv:nth-child(3n+2).is-in { transform: translateY(1.4rem); }
.okt-tile:hover { background: var(--ok-light-ink); color: #fff; box-shadow: 0 24px 40px -18px rgba(22,12,43,.6); }
.okt-tile .material-symbols-outlined { font-size: 2.2rem; color: var(--ok-violet); margin-bottom: auto; transition: color .3s ease, transform .45s var(--ok-ease); }
.okt-tile:hover .material-symbols-outlined { color: var(--ok-yellow); transform: rotate(-8deg) scale(1.1); }
.okt-tile b { font-size: 1.02rem; }
.okt-tile small { font-size: .85rem; opacity: .72; }
.okt-tile::after {
  content: attr(data-tag); position: absolute; top: .9rem; right: .9rem;
  font-size: .72rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px;
  background: #ede5ff; color: var(--ok-violet-2);
}

/* ───────── ⑦ accent statement band ───────── */
body.st-landing main.okp > section.okq { background: var(--ok-accent) !important; }
.okq { position: relative; overflow: hidden; color: #1a1200; text-align: center; padding: clamp(5rem, 10vw, 8rem) var(--ok-gutter) !important; color: var(--ok-accent-ink); }
.okq-giant {
  position: absolute; left: 0; top: 50%; transform: translate(var(--ok-shift, 0px), -50%);
  white-space: nowrap; font-weight: 800; font-size: clamp(6rem, 22vw, 20rem); letter-spacing: -.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(29,8,70,.13); pointer-events: none;
}
.okq-inner { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.okq-kicker { font-weight: 800; margin: 0 0 1rem; letter-spacing: .02em; }
.okq h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.okq-copy { margin: 1.4rem auto 2rem; font-size: 1.1rem; line-height: 1.7; max-width: 36rem; color: #3d2470; }

/* ───────── ⑧ pricing ───────── */
.okp-pricing { text-align: center; padding: clamp(5rem, 9vw, 8rem) var(--ok-gutter) !important; }
.okp-pricing h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: var(--ok-ink); }
.okp-pricing h2 .ok-lav { color: var(--ok-accent); }
.okp-sub { color: var(--ok-ink-2); margin: 1rem 0 3rem; }
body.st-landing #pricing .okp-cards.st-pack { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; }
body.st-landing #pricing .okp-cards article {
  position: relative; display: flex; flex-direction: column;
  padding: 1.8rem 1.6rem; border-radius: 22px;
  background: var(--ok-raise) !important; border: 0 !important; box-shadow: none !important;
}
body.st-landing #pricing .okp-cards article.featured { background: var(--ok-accent) !important; color: var(--ok-accent-ink); transform: translateY(-.6rem); }
body.st-landing #pricing .okp-cards article h3 { font-size: 1.35rem; font-weight: 800; }
body.st-landing #pricing .okp-cards .who { color: var(--ok-ink-2); margin: .35rem 0 1.2rem; font-size: .95rem; }
body.st-landing #pricing .okp-cards .featured .who { color: #3d2470; }
body.st-landing #pricing .okp-cards .price { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 1.2rem; color: inherit !important; }
body.st-landing #pricing .okp-cards .price span { font-size: .95rem; font-weight: 600; opacity: .7; }
body.st-landing #pricing .okp-cards ul { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .6rem; flex: 1; }
body.st-landing #pricing .okp-cards li { display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; }
body.st-landing #pricing .okp-cards li .material-symbols-outlined { font-size: 1.15rem; color: var(--ok-accent); }
body.st-landing #pricing .okp-cards .featured li .material-symbols-outlined { color: var(--ok-violet-2); }
body.st-landing #pricing .okp-cards .tag { position: absolute; top: 1.2rem; right: 1.2rem; font-size: .78rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; background: var(--ok-accent-ink); color: var(--ok-yellow); }
body.st-landing #pricing .okp-cards .btn { width: 100%; padding: .85rem 1rem; border-radius: 999px; font-weight: 800; cursor: pointer; border: 0; transition: transform .3s var(--ok-ease); }
body.st-landing #pricing .okp-cards .btn:hover { transform: translateY(-2px); }
body.st-landing #pricing .okp-cards .btn-ghost { background: rgba(255,255,255,.08); color: var(--ok-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
body.st-landing #pricing .okp-cards .btn-primary { background: var(--ok-accent-ink); color: #fff; }

/* ───────── ⑨ FAQ ───────── */
.okf { max-width: 860px; margin: 0 auto; padding: 0 var(--ok-gutter) clamp(5rem, 9vw, 7rem) !important; }
.okf h2 { text-align: center; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--ok-ink); margin-bottom: 2.2rem; }
.okf-list { display: grid; gap: .6rem; }
.okf details { border-radius: 16px; background: var(--ok-raise); overflow: hidden; }
.okf summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem; font-weight: 700; font-size: 1.05rem; color: var(--ok-ink);
}
.okf summary::-webkit-details-marker { display: none; }
.okf summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--ok-accent); transition: transform .4s var(--ok-ease); }
.okf details[open] summary::after { transform: rotate(45deg); }
.okf details p { margin: 0; padding: 0 1.3rem 1.25rem; color: var(--ok-ink-2); line-height: 1.7; }
.okf details[open] p { animation: ok-faq .5s var(--ok-ease); }
@keyframes ok-faq { from { opacity: 0; transform: translateY(-6px); } }

/* ───────── ⑩ closing band ───────── */
body.st-landing main.okp > section#start.okc { background: radial-gradient(80% 120% at 50% 0%, #6d28d9 0%, #3b1a8f 45%, #160b33 100%) !important; }
.okc { position: relative; overflow: hidden; color: var(--ok-accent-ink); text-align: center; padding: clamp(5rem, 10vw, 8rem) var(--ok-gutter) !important; }
.okc .st-cta-bg { position: absolute; inset: 0; opacity: .18; mix-blend-mode: screen; filter: blur(2px); }
.okc-inner { position: relative; z-index: 1; max-width: 50rem; margin: 0 auto; }
.okc-kicker { font-weight: 800; margin: 0 0 1rem; }
.okc h2 { font-size: clamp(2.3rem, 6vw, 4.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; }
.okc { color: #fff !important; }
.okc h2 .ok-mark { display: inline-block; margin-left: .2em; padding: 0 .18em; border-radius: .12em; background: var(--ok-accent); color: var(--ok-accent-ink); transform: rotate(-2deg); box-shadow: .08em .08em 0 var(--ok-yellow); }
.okc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.okc .ok-pill-ink { background: var(--ok-accent); color: var(--ok-accent-ink) !important; }

/* ───────── footer ───────── */
body.st-landing > footer.okfoot { background: var(--ok-ground) !important; }
.okfoot { padding: 4rem var(--ok-gutter) 2rem !important; }
.okfoot-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; }
.okfoot-brand p { color: var(--ok-ink-2); margin: .8rem 0 0; }
.okfoot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.okfoot-cols div { display: grid; gap: .55rem; align-content: start; }
.okfoot-cols b { color: var(--ok-ink); font-size: .95rem; margin-bottom: .2rem; }
.okfoot-cols a { color: var(--ok-ink-2); text-decoration: none; font-size: .92rem; transition: color .2s ease; }
.okfoot-cols a:hover { color: var(--ok-accent); }
.okfoot-copy { max-width: 1180px; margin: 3rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.08); color: #8f80ad; font-size: .85rem; }

/* ───────── responsive ───────── */
@media (max-width: 1100px) {
  body.st-landing .okh .st-orbit { display: none; }
}
@media (max-width: 900px) {
  .okb-inner, .okr, .okt-inner, .okfoot-inner { grid-template-columns: 1fr; }
  .okr-flip .okr-text { order: 0; }
  .okt-grid { grid-template-columns: repeat(2, 1fr); }
  .okt-tile:nth-child(3n+2), html.ok-motion .okt-tile.ok-rv:nth-child(3n+2).is-in { transform: none; }
  body.st-landing #pricing .okp-cards.st-pack { grid-template-columns: 1fr; }
  body.st-landing #pricing .okp-cards article.featured { transform: none; }
  .okh-tile.t2, .okh-tile.t4, .okh-tile.t7, .okh-sticker.s2 { display: none; }
  .okh-tile.t1 { left: -2%; top: 12%; } .okh-tile.t5 { right: -2%; top: 12%; }
  .okh-tile.t3 { left: -3%; top: auto; bottom: 6%; } .okh-tile.t6 { right: -3%; top: auto; bottom: 8%; }
  .okh-sticker.s1 { left: 4%; top: 6.5rem; }
}
@media (max-width: 560px) {
  .okh { padding-top: 6.5rem !important; min-height: 0; }
  .okh-tile { --w: 72px !important; opacity: .55 !important; }
  body.st-landing .okh-cta.st-prompt { flex-wrap: wrap; justify-content: center; border-radius: 22px; padding: .7rem; }
  .okh-line[data-ok-line="1"] { -webkit-text-stroke-width: 1.4px; }
  .okfoot-cols { grid-template-columns: 1fr 1fr; }
  body.st-landing .okr-media.st-tool-poster { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .okh-tile, .okh-sticker { animation: none; opacity: 1; }
  .okm-track { animation-duration: 120s; }
}

/* row 4: the big kinetic heading replaces the marquee's own small heading */
.okr-stack .st-sf-marquee-head { display: none; }
.okr-stack .st-sf-marquee-wrap { margin-top: 2.4rem; }
/* feature cards are bigger than the old tool posters: scale their motion up */
body.st-landing .okr-media.st-tool-poster { display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem !important; }
body.st-landing .okr-media .st-tool-motion { flex: 1; display: flex; align-items: center; justify-content: center; transform: scale(1.9); transform-origin: center; margin: 1rem 0 2rem; }
body.st-landing .okr-media h3 { font-size: 1.6rem !important; }
@media (max-width: 560px) { body.st-landing .okr-media .st-tool-motion { transform: scale(1.3); } }
body.st-landing #pricing .okp-cards article { outline: 0 !important; }
body.st-landing #pricing .okp-cards article.featured h3,
body.st-landing #pricing .okp-cards article.featured li { color: var(--ok-accent-ink) !important; }

/* hero copy never wider than the screen (the CTA pill used to set its width) */
.okh-copy { width: 100%; min-width: 0; }
body.st-landing .okh-cta.st-prompt { max-width: 100%; }
@media (max-width: 560px) {
  .okh-title { font-size: clamp(3.4rem, 17vw, 5rem) !important; }
  body.st-landing .okh-cta .st-prompt-copy { white-space: normal; text-align: center; }
  .okh-sub { font-size: 1rem; }
}
/* st-polish sizes .st-hero-copy h1 with !important: out-rank it */
body.st-landing .okh-copy h1.okh-title { font-size: clamp(3.2rem, 10.5vw, 8.6rem) !important; line-height: .98 !important; max-width: none !important; }
@media (max-width: 560px) { body.st-landing .okh-copy h1.okh-title { font-size: clamp(3.4rem, 17vw, 5rem) !important; } }
.okh-swap { white-space: nowrap; }
@media (max-width: 560px) { .okh-box { font-size: .78em; } }
/* the full-bleed marquee inside the rows must not widen the grid */
.okr-wrap { grid-template-columns: minmax(0, 1fr); }
.okr > *, .okb-inner > *, .okt-inner > * { min-width: 0; }
@media (max-width: 900px) { .okr, .okb-inner, .okt-inner { grid-template-columns: minmax(0, 1fr); } }
/* old #studio min-height + 4:3 forced a 507px-wide box on phones */
#studio .okr-editor.st-editor-showcase { width: 100%; min-height: 0; }
@media (max-width: 560px) { #studio .okr-editor.st-editor-showcase { aspect-ratio: 4 / 3.6; } #studio .okr-editor .st-float-card { font-size: .8rem; padding: .55rem .7rem; } }

/* ───────── round 2 (2026-10-21 evening) ───────── */

/* Thai marks: the word masks (overflow:hidden) clipped tone marks and upper
   vowels (ครบทั้ง read as ครบทัง). Give every mask head- and foot-room. */
.ok-kin .okw { padding-top: .32em; margin-top: -.32em; padding-bottom: .16em; margin-bottom: -.16em; }
.okh-line { padding: .28em .14em .14em; margin-top: -.2em; }
.okh-title { gap: 0; }

/* Orbit cards = shortcuts for members: both sit on the hero's vertical centre */
body.st-landing .okh .st-orbit-silence,
body.st-landing .okh .st-orbit-motion { top: calc(50% - 6.5rem); bottom: auto; }
body.st-landing .okh .st-orbit-silence { left: max(16px, calc(50% - 44rem)); }
body.st-landing .okh .st-orbit-motion  { right: max(16px, calc(50% - 44rem)); }

/* Floating tiles, redesigned: phone-screen frames with a label, three depths,
   each tile on its own float rhythm so they never move together. */
.okh-tile {
  padding: 5px; border-radius: 20px;
  background: linear-gradient(160deg, #2a1d45, #120b20);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(210,187,255,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.okh-tile video { border-radius: 15px; }
.okh-tile::after {
  content: attr(data-label); position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  white-space: nowrap; font-size: .7rem; font-weight: 800; letter-spacing: .01em;
  padding: .28rem .6rem; border-radius: 999px;
  background: var(--ok-ground); color: var(--ok-accent); box-shadow: 0 0 0 1px rgba(210,187,255,.3);
}
.okh-tile.is-ready { animation: ok-float2 var(--fd, 7s) ease-in-out var(--fdl, 0s) infinite; }
@keyframes ok-float2 {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 calc(var(--fa, 12px) * -1); rotate: var(--fr, .8deg); }
  65% { translate: 0 calc(var(--fa, 12px) * .45); rotate: calc(var(--fr, .8deg) * -.6); }
}
.okh-tile.far { filter: saturate(.85) brightness(.82) blur(.6px); z-index: 0; }
.okh-tile.near { z-index: 2; }
/* layout: top + bottom clusters, the vertical middle stays free for the orbit cards */
.okh-tile.t1 { --w: 128px; left: 9%;  top: 12%;  --r: -7deg; --d: .15s; --fd: 7.4s; --fdl: 0s;   --fa: 14px; --fr: 1deg; }
.okh-tile.t2 { --w: 86px;  left: 22%; top: 7%;   --r: 5deg;  --d: .3s;  --fd: 9.2s; --fdl: 1.1s; --fa: 10px; --fr: -1.2deg; }
.okh-tile.t3 { --w: 92px;  left: 6%;  top: auto; bottom: 6%; --r: 6deg; --d: .45s; --fd: 8.1s; --fdl: 2.3s; --fa: 12px; --fr: .7deg; }
.okh-tile.t4 { --w: 84px;  right: 23%; top: 8%;  --r: -5deg; --d: .25s; --fd: 10.3s; --fdl: .6s; --fa: 9px;  --fr: 1.4deg; }
.okh-tile.t5 { --w: 124px; right: 8%; top: 11%;  --r: 7deg;  --d: .4s;  --fd: 6.8s; --fdl: 1.8s; --fa: 15px; --fr: -.9deg; }
.okh-tile.t6 { --w: 96px;  right: 6%; top: auto; bottom: 5%; --r: -6deg; --d: .55s; --fd: 8.8s; --fdl: 3s; --fa: 11px; --fr: 1.1deg; }
.okh-tile.t7 { --w: 80px;  left: 21%; top: auto; bottom: 8%; --r: -3deg; --d: .6s; --fd: 9.7s; --fdl: .4s; --fa: 13px; --fr: -1deg; }
.okh-sticker.s1 { left: 18%; top: 36%; }
.okh-sticker.s2 { right: 18%; bottom: 20%; }
.okh-sticker { animation: ok-tile-in 1s var(--ok-ease) forwards, ok-float2 7.6s ease-in-out 2s infinite; --fa: 8px; --fr: 2deg; }

/* "ชอบสไตล์ไหนเลือกเลย!" now lives under the style clips; marquee spans the full width */
.okst { margin-top: clamp(4rem, 8vw, 6rem); }
.okst-title { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; color: var(--ok-ink); }
.okst-sub { color: var(--ok-ink-2); margin: 1rem 0 0; }
.okst .st-sf-marquee-head { display: none; }
.okst .st-sf-marquee-wrap { width: 100vw; max-width: 100vw; margin: 2.4rem 0 0 calc(50% - 50vw); }
.okst .st-sf-marquee { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

@media (max-width: 1100px) {
  .okh-sticker.s1 { left: 6%; top: 40%; }
}
@media (max-width: 900px) {
  .okh-tile.t1 { left: -2%; top: 10%; } .okh-tile.t5 { right: -2%; top: 10%; }
  .okh-tile.t3 { left: -3%; bottom: 5%; } .okh-tile.t6 { right: -3%; bottom: 6%; }
  .okh-tile::after { display: none; }
}
.okh-tile { overflow: visible; }
.okh-line.okh-box { margin-top: .1em; }
.okh-sticker.s1 { left: 22%; top: 47%; }
.okh-line.okh-box { padding: .16em .24em .12em; }
.okh-box, .okh-box .okh-in, .okh-box .okh-swap { white-space: nowrap; }
@media (max-width: 560px) { body.st-landing .okh-copy .okh-box { font-size: .66em; } }
@media (max-width: 560px) { .okh-sticker { display: none; } }

/* ───────── round 3 ───────── */
/* bigger video tiles */
.okh-tile.t1 { --w: 150px; } .okh-tile.t2 { --w: 108px; } .okh-tile.t3 { --w: 112px; }
.okh-tile.t4 { --w: 104px; } .okh-tile.t5 { --w: 146px; } .okh-tile.t6 { --w: 116px; } .okh-tile.t7 { --w: 100px; }

/* Orbit shortcuts: a soft, slow glow behind each card, out of step with each other */
body.st-landing .okh .st-orbit::after {
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 2rem; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(167,139,250,.55), rgba(124,58,237,.18) 55%, transparent 75%);
  filter: blur(18px); opacity: .15;
  animation: ok-orbit-glow 5.2s ease-in-out infinite;
}
body.st-landing .okh .st-orbit-motion::after { animation-duration: 6.4s; animation-delay: -2.7s; background: radial-gradient(60% 60% at 50% 50%, rgba(165,180,252,.5), rgba(99,102,241,.16) 55%, transparent 75%); }
@keyframes ok-orbit-glow { 0%, 100% { opacity: .12; transform: scale(.96); } 50% { opacity: .55; transform: scale(1.03); } }

/* Style clips: the faded backdrop strip ended in a hard edge at both sides — fade it out */
body.st-landing #st-sf-heygen-backdrop.is-backdrop .st-sf-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%) !important;
}
@media (prefers-reduced-motion: reduce) { body.st-landing .okh .st-orbit::after { animation: none; opacity: .3; } }