/* HostDrift CDP v1.13.7 — Public + Auth UI; balanced Thai/English index title hierarchy */
:root {
    --hd-orange: #da853c;
    --hd-orange-strong: #b96525;
    --hd-orange-soft: #fff4e9;
    --hd-text: #292929;
    --hd-muted: #74716d;
    --hd-subtle: #96918b;
    --hd-bg: #fafaf8;
    --hd-soft: #f3f1ee;
    --hd-line: #e5e0da;
    --hd-line-strong: #ded9d3;
    --hd-font: "Sukhumvit Set", "Thonburi", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
    --hd-shadow: 0 22px 70px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--hd-bg); -webkit-text-size-adjust: 100%; }
body,
button,
input,
select,
textarea {
    font-family: "Sukhumvit Set", "Thonburi", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
}
body.cdp-public {
    margin: 0;
    min-height: 100vh;
    background: var(--hd-bg);
    color: var(--hd-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.cdp-public a { color: inherit; text-decoration: none; }
body.cdp-public button,
body.cdp-public a { -webkit-tap-highlight-color: transparent; }
.public-wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

/* Header */
.public-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(210,210,215,.7);
    background: rgba(251,251,253,.78);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
}
.nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 26px;
    min-height: 64px;
}
.public-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; min-width: 0; }
.public-brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--hd-text);
    color: #fff;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: -.03em;
}
.public-brand > span:last-child { display: grid; gap: 0; }
.public-brand strong { font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.public-brand small { color: var(--hd-subtle); font-size: 9.5px; font-weight: 500; line-height: 1.3; }
.public-links { display: flex; align-items: center; gap: 28px; }
.public-links a { color: #4b4b4e; font-size: 11px; font-weight: 560; transition: color .16s ease; }
.public-links a:hover { color: var(--hd-text); }
.public-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.public-language,
.nav-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 650;
}
.public-language { color: var(--hd-orange-strong); }
.nav-login { background: var(--hd-text); color: #fff; }

/* Hero */
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: min(900px, calc(100vh - 64px));
    display: grid;
    align-items: center;
    padding: 62px 0 78px;
    background:
        radial-gradient(circle at 76% 50%, rgba(218,133,60,.085), transparent 24%),
        linear-gradient(180deg, #fff 0%, #fafaf8 100%);
}
.hero-ambient {
    position: absolute;
    width: 620px;
    height: 620px;
    right: -160px;
    top: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218,133,60,.08), rgba(218,133,60,0) 68%);
    filter: blur(10px);
    pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(520px,.95fr); align-items: center; gap: clamp(46px,7vw,120px); }
.hero-copy { max-width: 790px; }
.hero-kicker,
.section-kicker,
.section-heading > span,
.final-cta-inner > span,
.auth-story-copy > span,
.auth-card-heading > span {
    color: var(--hd-orange-strong);
    font-size: 10.5px;
    font-weight: 760;
    letter-spacing: .13em;
    line-height: 1.4;
}
.hero-copy h1 {
    margin: 26px 0 22px;
    color: var(--hd-text);
    font-size: clamp(58px, 6.4vw, 102px);
    font-weight: 760;
    line-height: .96;
    letter-spacing: -.065em;
}
.hero-copy h1 span,
.hero-copy h1 em { display: block; font-style: normal; }
.hero-copy h1 em { margin-top: .17em; color: var(--hd-orange); }
.hero-copy > p { max-width: 720px; margin: 0; color: var(--hd-muted); font-size: clamp(16px,1.4vw,20px); font-weight: 400; line-height: 1.75; letter-spacing: -.012em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.public-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 22px;
    border: 1px solid var(--hd-orange);
    border-radius: 999px;
    background: var(--hd-orange);
    color: #fff !important;
    font-size: 13px;
    font-weight: 680;
    box-shadow: none;
    transition: transform .18s ease, background .18s ease;
}
.public-button:hover { transform: translateY(-1px); background: #b96525; }
.public-button.dark { border-color: var(--hd-text); background: var(--hd-text); }
.public-button.dark:hover { background: #000; }
.text-link { color: var(--hd-orange-strong) !important; font-size: 13px; font-weight: 650; }
.text-link span { display: inline-block; margin-left: 3px; transition: transform .16s ease; }
.text-link:hover span { transform: translateX(3px); }
.hero-proof { margin-top: 38px; color: #9a9a9f; font-size: 9.5px; font-weight: 650; letter-spacing: .13em; }

/* Orbit */
.orbit-shell { display: grid; justify-items: center; min-width: 0; }
.orbit-stage {
    --orbit-radius: clamp(208px, 18vw, 278px);
    --gather-radius: 124px;
    position: relative;
    width: min(100%, 620px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.orbit-halo {
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218,133,60,.14) 0%, rgba(218,133,60,.05) 35%, rgba(218,133,60,0) 70%);
    filter: blur(14px);
    animation: haloBreathe 9s ease-in-out infinite;
}
.orbit-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-ring-outer { inset: 5%; border: 1px solid rgba(218,133,60,.42); box-shadow: inset 0 0 70px rgba(218,133,60,.025); }
.orbit-ring-inner { inset: 22%; border: 1px dashed rgba(218,133,60,.34); }
.orbit-ring-outer::before,
.orbit-ring-inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 6px;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--hd-orange);
    box-shadow: 0 0 16px rgba(218,133,60,.7);
}
.orbit-ring-outer { animation: ringRotate 26s linear infinite; }
.orbit-ring-inner { animation: ringRotateReverse 19s linear infinite; }
.orbit-core {
    position: relative;
    z-index: 8;
    width: clamp(186px, 17vw, 238px);
    aspect-ratio: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 22px;
    border: 1px solid var(--hd-line-strong);
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    box-shadow: 0 24px 58px rgba(78,50,24,.1), inset 0 0 0 8px rgba(255,255,255,.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: corePulse 18s ease-in-out 2s infinite;
}
.orbit-core::after {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(218,133,60,.08);
    opacity: .5;
}
.orbit-core small { color: var(--hd-orange-strong); font-size: 10px; font-weight: 760; letter-spacing: .16em; }
.orbit-core strong { margin-top: 6px; color: var(--hd-text); font-size: clamp(54px,5vw,76px); font-weight: 520; line-height: .95; letter-spacing: -.07em; }
.orbit-core span { margin-top: 5px; color: var(--hd-muted); font-size: 12px; font-weight: 500; }
.orbit-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    animation: orbitRotate 30s linear 1.7s infinite;
}
.orbit-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--angle));
}
.orbit-node-track {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(var(--orbit-radius));
    animation:
        nodeDeploy 1.25s cubic-bezier(.16,.85,.2,1.05) var(--delay) both,
        nodeGather 18s ease-in-out calc(1.8s + var(--delay)) infinite;
}
.orbit-node-card {
    position: absolute;
    left: -39px;
    top: -39px;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(210,210,215,.9);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    color: var(--hd-orange-strong);
    font-size: 12px;
    font-weight: 760;
    box-shadow: 0 14px 34px rgba(0,0,0,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: rotate(var(--counter));
    animation: counterRotate 30s linear 1.7s infinite;
}
.orbit-node-card::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 15px;
    border: 1px solid rgba(218,133,60,.08);
}
.orbit-caption { margin: 4px 0 0; color: #a0a0a5; font-size: 9px; font-weight: 650; letter-spacing: .16em; }

@keyframes nodeDeploy {
    0% { transform: translateX(0) scale(.65); opacity: 0; filter: blur(5px); }
    68% { transform: translateX(calc(var(--orbit-radius) + 10px)) scale(1.04); opacity: 1; filter: blur(0); }
    100% { transform: translateX(var(--orbit-radius)) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes nodeGather {
    0%, 58%, 100% { transform: translateX(var(--orbit-radius)) scale(1); }
    68%, 76% { transform: translateX(var(--gather-radius)) scale(.88); }
    72% { transform: translateX(calc(var(--gather-radius) - 6px)) scale(.82); }
    84% { transform: translateX(calc(var(--orbit-radius) + 8px)) scale(1.03); }
}
@keyframes orbitRotate { to { transform: rotate(360deg); } }
@keyframes counterRotate { to { transform: rotate(calc(var(--counter) - 360deg)); } }
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes ringRotateReverse { to { transform: rotate(-360deg); } }
@keyframes corePulse {
    0%, 58%, 100% { transform: scale(1); box-shadow: 0 24px 58px rgba(78,50,24,.10), inset 0 0 0 8px rgba(255,255,255,.35); }
    69%, 76% { transform: scale(1.07); box-shadow: 0 26px 70px rgba(218,133,60,.20), 0 0 0 12px rgba(218,133,60,.045), inset 0 0 0 8px rgba(255,255,255,.4); }
}
@keyframes haloBreathe { 0%,100% { transform: scale(.96); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

/* Sections */
.public-section { padding: 120px 0; }
.platform-section { background: var(--hd-soft); }
.section-heading { max-width: 840px; margin-bottom: 52px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2,
.activation-copy h2,
.final-cta-inner h2 {
    margin: 12px 0 16px;
    color: var(--hd-text);
    font-size: clamp(40px,5vw,68px);
    font-weight: 730;
    line-height: 1.03;
    letter-spacing: -.052em;
}
.section-heading p,
.activation-copy > p,
.governance-card p { color: var(--hd-muted); }
.section-heading > p { max-width: 760px; margin: 0; font-size: 17px; line-height: 1.75; }
.centered > p { margin-inline: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.feature-card {
    min-height: 280px;
    padding: 24px;
    border: 1px solid var(--hd-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.025);
    transition: transform .22s ease, box-shadow .22s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(0,0,0,.055); }
.feature-card-top { display: flex; align-items: center; justify-content: space-between; }
.feature-card-top > span { color: #aaaab0; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.feature-card-top b { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px; border-radius: 14px; background: var(--hd-orange-soft); color: var(--hd-orange-strong); font-size: 14px; font-weight: 730; }
.feature-card h3 { margin: 54px 0 10px; color: var(--hd-text); font-size: 21px; font-weight: 670; letter-spacing: -.025em; }
.feature-card p { margin: 0; color: var(--hd-muted); font-size: 13px; line-height: 1.7; }

.activation-section { position: relative; overflow: hidden; background: #fff; }
.activation-section::before { content: ""; position: absolute; left: 58%; top: 50%; width: 720px; height: 720px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(218,133,60,.07), transparent 65%); pointer-events: none; }
.activation-grid { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); align-items: center; gap: clamp(60px,8vw,130px); }
.activation-copy h2 em { color: var(--hd-orange); font-style: normal; }
.activation-copy > p { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.8; }
.activation-copy ul { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.activation-copy li { position: relative; padding-left: 25px; color: #4f4f53; font-size: 13px; }
.activation-copy li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--hd-orange-strong); font-weight: 750; }
.activation-console { padding: 20px; border: 1px solid var(--hd-line); border-radius: 30px; background: rgba(248,248,250,.95); box-shadow: var(--hd-shadow); }
.activation-console-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 6px 8px 14px; border-bottom: 1px solid var(--hd-line); }
.activation-console-head > span { color: var(--hd-text); font-size: 12px; font-weight: 700; }
.activation-console-head b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 7px; border-radius: 8px; background: var(--hd-text); color: #fff; font-size: 9px; }
.activation-console-head i { color: var(--hd-subtle); font-size: 9.5px; font-style: normal; font-weight: 600; }
.destination-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 15px 10px; border-bottom: 1px solid #e9e9eb; }
.destination-row:last-child { border-bottom: 0; }
.destination-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--hd-text); border: 1px solid var(--hd-line); font-size: 12px; font-weight: 760; }
.destination-logo.hd { background: var(--hd-text); color: #fff; border-color: var(--hd-text); }
.destination-row > div { display: grid; }
.destination-row strong { color: var(--hd-text); font-size: 12.5px; font-weight: 650; }
.destination-row small { color: var(--hd-subtle); font-size: 10px; }
.destination-row em { padding: 6px 9px; border-radius: 999px; background: #edf8f2; color: #297552; font-size: 9px; font-style: normal; font-weight: 650; }
.destination-row em.connect { background: var(--hd-orange-soft); color: var(--hd-orange-strong); }

.governance-section { background: var(--hd-soft); }
.governance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 46px; }
.governance-card { padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--hd-line); }
.governance-card > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hd-orange-soft); color: var(--hd-orange-strong); font-size: 12px; font-weight: 760; }
.governance-card h3 { margin: 26px 0 9px; color: var(--hd-text); font-size: 19px; font-weight: 670; letter-spacing: -.025em; }
.governance-card p { margin: 0; font-size: 13px; line-height: 1.75; }

.final-cta { padding: 120px 0; background: #fff; }
.final-cta-inner { max-width: 900px; margin-inline: auto; text-align: center; }
.final-cta-inner h2 { margin-bottom: 28px; }
.public-footer { border-top: 1px solid var(--hd-line); background: var(--hd-bg); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 108px; }
.footer-brand small { max-width: 210px; }
.footer-inner > span { color: #99999f; font-size: 9.5px; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-on-load { animation: revealLoad .75s cubic-bezier(.2,.8,.2,1) both; }
.orbit-shell.reveal-on-load { animation-delay: .12s; }
@keyframes revealLoad { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* Auth */
.auth-page { background: var(--hd-soft) !important; }
.auth-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 24px;
    background: rgba(245,245,247,.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.auth-topbar a { color: #57575b; font-size: 10.5px; font-weight: 600; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(430px,.95fr); }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 92px clamp(38px,6vw,90px) 58px; overflow: hidden; background: #fff; }
.auth-story::after { content: ""; position: absolute; width: 600px; height: 600px; right: -270px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(218,133,60,.11), transparent 67%); pointer-events: none; }
.auth-brand { position: relative; z-index: 2; }
.auth-story-copy { position: relative; z-index: 2; max-width: 710px; margin: auto 0; padding: 70px 0; }
.auth-story-copy h1 { margin: 22px 0 22px; color: var(--hd-text); font-size: clamp(54px,5.4vw,86px); font-weight: 750; line-height: .98; letter-spacing: -.06em; }
.auth-story-copy h1 em { color: var(--hd-orange); font-style: normal; }
.auth-story-copy p { max-width: 620px; margin: 0; color: var(--hd-muted); font-size: 17px; line-height: 1.75; }
.auth-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.auth-tags span { padding: 7px 10px; border-radius: 999px; background: var(--hd-soft); color: #77777c; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; }
.auth-card-wrap { display: grid; place-items: center; padding: 90px clamp(30px,5vw,72px) 50px; background: var(--hd-soft); }
.auth-card { width: min(100%, 520px); padding: clamp(28px,4vw,44px); border: 1px solid var(--hd-line); border-radius: 30px; background: rgba(255,255,255,.96); box-shadow: 0 22px 60px rgba(0,0,0,.07); }
.auth-card-heading h2 { margin: 7px 0 5px; color: var(--hd-text); font-size: 34px; font-weight: 710; line-height: 1.1; letter-spacing: -.04em; }
.auth-card-heading p { margin: 0; color: var(--hd-muted); font-size: 12px; }
.auth-form { display: grid; gap: 15px; margin-top: 28px; }
.auth-form label { display: grid; gap: 7px; color: #4a4a4e; font-size: 11px; font-weight: 620; }
.auth-form input[type="email"],
.auth-form input[type="password"] { width: 100%; min-height: 49px; padding: 11px 13px; border: 1px solid var(--hd-line-strong); border-radius: 13px; background: #fff; color: var(--hd-text); font-size: 13px; outline: 0; transition: border-color .16s ease, box-shadow .16s ease; }
.auth-form input:focus { border-color: var(--hd-orange); box-shadow: 0 0 0 4px rgba(218,133,60,.11); }
.auth-form input::placeholder { color: #aaaab0; }
.remember-row { grid-template-columns: auto 1fr !important; align-items: center; width: max-content; gap: 8px !important; }
.remember-row input { accent-color: var(--hd-orange); }
.remember-row span { color: var(--hd-muted); font-size: 10.5px; font-weight: 500; }
.auth-submit { min-height: 48px; border: 0; border-radius: 999px; background: var(--hd-orange); color: #fff; font-size: 12px; font-weight: 680; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.auth-submit:hover { transform: translateY(-1px); background: #b96525; }
.auth-divider { position: relative; display: grid; place-items: center; margin: 24px 0 18px; }
.auth-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hd-line); }
.auth-divider span { position: relative; padding: 0 10px; background: #fff; color: #aaaab0; font-size: 9.5px; }
.crm-login { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 14px; border: 1px solid var(--hd-line-strong); border-radius: 13px; color: #3f3f43 !important; font-size: 11.5px; font-weight: 630; }
.crm-login:hover { border-color: #b7b7bc; background: #fafafa; }
.crm-note { margin: 11px 2px 0; color: #8b8b90; font-size: 9.5px; line-height: 1.6; }
.auth-version { display: block; margin-top: 28px; color: #aaaab0; font-size: 9px; text-align: center; }
.auth-alert { margin-top: 18px; padding: 11px 13px; border: 1px solid #cfe9db; border-radius: 12px; background: #edf8f2; color: #24704e; font-size: 10.5px; }
.auth-alert.error { border-color: #efc5c0; background: #fff0ee; color: #a33a31; }

@media (max-width: 1180px) {
    .hero-grid { grid-template-columns: minmax(0,1fr) minmax(450px,.92fr); gap: 40px; }
    .orbit-stage { --orbit-radius: 210px; }
    .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .activation-grid { grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr); gap: 52px; }
}

@media (max-width: 980px) {
    .public-links { display: none; }
    .nav-inner { grid-template-columns: 1fr auto; }
    .hero-section { min-height: auto; padding: 78px 0 88px; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-copy { margin-inline: auto; }
    .hero-copy > p { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .orbit-stage { --orbit-radius: clamp(190px,35vw,250px); width: min(100%, 570px); margin-top: 24px; }
    .activation-grid { grid-template-columns: 1fr; }
    .activation-copy { max-width: 760px; }
    .activation-console { width: min(100%, 720px); }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .auth-card-wrap { min-height: 100vh; padding-top: 86px; }
}

@media (max-width: 720px) {
    .public-wrap { width: min(1160px, calc(100% - 28px)); }
    .public-nav { position: sticky; }
    .nav-inner { min-height: 58px; }
    .public-brand small { display: none; }
    .public-language { padding-inline: 8px; }
    .nav-login { padding-inline: 11px; }
    .hero-section { padding-top: 58px; }
    .hero-copy h1 { font-size: clamp(48px,14vw,72px); }
    .hero-copy > p { font-size: 15px; }
    .hero-proof { font-size: 8px; }
    .orbit-stage { --orbit-radius: min(41vw, 185px); --gather-radius: 92px; width: 100%; max-width: 440px; }
    .orbit-core { width: 158px; }
    .orbit-core strong { font-size: 51px; }
    .orbit-node-card { left: -31px; top: -31px; width: 62px; height: 62px; border-radius: 17px; font-size: 10px; }
    .orbit-ring-outer { inset: 3%; }
    .public-section { padding: 88px 0; }
    .section-heading h2,
    .activation-copy h2,
    .final-cta-inner h2 { font-size: 42px; }
    .feature-grid,
    .governance-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: 235px; }
    .feature-card h3 { margin-top: 40px; }
    .footer-inner { display: grid; padding: 26px 0; }
    .auth-card-wrap { padding-inline: 15px; }
    .auth-card { padding: 26px 20px; border-radius: 24px; }
}

@media (max-width: 430px) {
    .hero-actions { gap: 14px; }
    .public-button { min-height: 47px; padding-inline: 18px; }
    .orbit-stage { --orbit-radius: min(42vw, 160px); --gather-radius: 80px; }
    .orbit-core { width: 142px; }
    .orbit-core strong { font-size: 46px; }
    .orbit-node-card { left: -27px; top: -27px; width: 54px; height: 54px; border-radius: 15px; font-size: 9px; }
    .destination-row { grid-template-columns: 40px 1fr auto; gap: 9px; padding-inline: 3px; }
    .destination-logo { width: 36px; height: 36px; border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ==============================================================
   v1.13.3 exact compatibility hotfix
   - exact legacy public container width from cdp-landing-v1.2.1.css
   - original HostDrift palette
   - Thai display line boxes expanded to avoid stacked marks collision
   ============================================================== */
:root {
    --hd-orange: #da853c;
    --hd-orange-strong: #b96525;
    --hd-orange-soft: #f7e9dc;
    --hd-text: #292929;
    --hd-muted: #74716d;
    --hd-subtle: #96918b;
    --hd-bg: #fafaf8;
    --hd-soft: #f3f1ee;
    --hd-line: #e5e0da;
    --hd-line-strong: #ded9d3;
}

html,
body.cdp-public {
    background: #fafaf8;
}

/* Exact pre-v1.13 public width: cdp-landing-v1.2.1.css */
.public-wrap {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto;
}

.public-nav {
    border-bottom-color: #e5e0da;
    background: rgba(250,250,248,.94);
}

.hero-section {
    background: #fafaf8;
}

/* Restore the previous two-column measure instead of the wider v1.13 canvas. */
.hero-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
}
.hero-copy { max-width: 720px; }
.hero-copy > p { max-width: 660px; }

/* Keep the animated 360° graphic inside the legacy right column. */
.orbit-stage {
    --orbit-radius: clamp(195px, 17vw, 248px);
    width: min(100%, 560px);
}

/* Thai typography: :lang(th) also matches th-TH / inherited Thai language. */
html:lang(th) body.cdp-public {
    line-height: 1.72;
}

html:lang(th) .hero-copy h1 {
    line-height: 1.34 !important;
    letter-spacing: -0.025em !important;
}
html:lang(th) .hero-copy h1 span,
html:lang(th) .hero-copy h1 em {
    line-height: inherit;
}
html:lang(th) .hero-copy h1 em {
    margin-top: .14em;
}

html:lang(th) .section-heading h2,
html:lang(th) .activation-copy h2,
html:lang(th) .final-cta-inner h2,
html:lang(th) .auth-story-copy h1,
html:lang(th) .auth-card-heading h2 {
    line-height: 1.38 !important;
    letter-spacing: -0.018em !important;
}

html:lang(th) .hero-copy > p,
html:lang(th) .section-heading > p,
html:lang(th) .activation-copy > p,
html:lang(th) .governance-card p,
html:lang(th) .auth-story-copy p,
html:lang(th) .auth-card-heading p,
html:lang(th) .crm-note {
    line-height: 1.82 !important;
}

/* Restore the former login content width. */
.auth-shell {
    width: min(1240px, calc(100% - 56px));
    margin-inline: auto;
}

@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .orbit-stage { --orbit-radius: clamp(185px, 35vw, 235px); }
}

@media (max-width: 620px) {
    .public-wrap {
        width: min(1160px, calc(100% - 28px));
    }
    html:lang(th) .hero-copy h1 {
        line-height: 1.38 !important;
        letter-spacing: -0.015em !important;
    }
    .orbit-stage { --orbit-radius: min(41vw, 185px); }
    .auth-shell { width: min(100% - 24px, 1240px); }
}

/* ==============================================================
   v1.13.3 legacy palette + button contrast lock
   Restore the pre-v1.13 HostDrift CDP color system without changing
   the v1.13 layout, typography fixes, or Single View orbit animation.
   Source palette: cdp-crm-theme-v1.3.0 + cdp-landing-v1.2.1.
   ============================================================== */

/* Header / brand / navigation */
body.cdp-public .public-brand-mark {
    background: #da853c !important;
    color: #fff !important;
    box-shadow: 0 9px 22px rgba(218,133,60,.15) !important;
}
body.cdp-public .public-brand strong { color: #292929 !important; }
body.cdp-public .public-brand small { color: #74716d !important; }
body.cdp-public .public-links a { color: #5d5955 !important; }
body.cdp-public .public-links a:hover { color: #b96525 !important; }
body.cdp-public .public-language {
    border: 1px solid #e5e0da !important;
    background: #f7e9dc !important;
    color: #b96525 !important;
}
body.cdp-public .nav-login {
    border: 0 !important;
    background: #da853c !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(218,133,60,.16) !important;
}
body.cdp-public .nav-login:hover {
    background: #b96525 !important;
    color: #fff !important;
}

/* Primary / text controls — force contrast even against the high-specificity
   body.cdp-public a { color: inherit } rule. */
body.cdp-public a.public-button,
body.cdp-public button.public-button,
body.cdp-public .public-button {
    border-color: #da853c !important;
    background: #da853c !important;
    color: #fff !important;
}
body.cdp-public a.public-button:hover,
body.cdp-public button.public-button:hover,
body.cdp-public .public-button:hover {
    border-color: #b96525 !important;
    background: #b96525 !important;
    color: #fff !important;
}
body.cdp-public .text-link { color: #b96525 !important; }

/* Keep the redesigned geometry, but restore the original public-section palette. */
body.cdp-public .platform-section { background: #fff !important; }
body.cdp-public .feature-card {
    border-color: #e5e0da !important;
    background: #fafaf8 !important;
}
body.cdp-public .feature-card:hover {
    border-color: #e7bd98 !important;
    background: #fff !important;
}
body.cdp-public .feature-card-top b {
    background: #f7e9dc !important;
    color: #b96525 !important;
}

body.cdp-public .activation-section {
    background: #f3f1ee !important;
    color: #292929 !important;
}
body.cdp-public .activation-console {
    border-color: #ded9d3 !important;
    background: #fff !important;
}
body.cdp-public .activation-console-head b,
body.cdp-public .destination-logo.hd {
    border-color: #da853c !important;
    background: #da853c !important;
    color: #fff !important;
}
body.cdp-public .destination-row {
    border-bottom-color: #e5e0da !important;
    background: #fafaf8 !important;
}
body.cdp-public .destination-row em.connect {
    background: #f7e9dc !important;
    color: #b96525 !important;
}

body.cdp-public .governance-section { background: #f3f1ee !important; }
body.cdp-public .governance-card { border-color: #e5e0da !important; background: #fff !important; }
body.cdp-public .governance-card > span { background: #f7e9dc !important; color: #b96525 !important; }

/* The original CTA was orange with a white reverse button. */
body.cdp-public .final-cta {
    background: #da853c !important;
    color: #fff !important;
}
body.cdp-public .final-cta-inner > span { color: #fff1e4 !important; }
body.cdp-public .final-cta-inner h2 { color: #fff !important; }
body.cdp-public .final-cta .public-button.dark {
    border-color: #fff !important;
    background: #fff !important;
    color: #b96525 !important;
    box-shadow: none !important;
}
body.cdp-public .final-cta .public-button.dark:hover {
    border-color: #fff !important;
    background: #fff !important;
    color: #b96525 !important;
    opacity: .92;
}
body.cdp-public .public-footer { background: #fafaf8 !important; }

/* Login: original HostDrift CDP orange control palette, with visible labels. */
body.cdp-public.auth-page { background: #fafaf8 !important; }
body.cdp-public.auth-page .auth-topbar { background: rgba(250,250,248,.94) !important; }
body.cdp-public.auth-page .auth-story { background: #f7f3ee !important; }
body.cdp-public.auth-page .auth-card-wrap { background: #fafaf8 !important; }
body.cdp-public.auth-page .auth-card { background: #fff !important; }
body.cdp-public.auth-page .auth-submit {
    background: #da853c !important;
    color: #fff !important;
}
body.cdp-public.auth-page .auth-submit:hover { background: #b96525 !important; color: #fff !important; }
body.cdp-public.auth-page .crm-login {
    border-color: #414141 !important;
    background: #414141 !important;
    color: #fff !important;
}
body.cdp-public.auth-page .crm-login:hover {
    border-color: #292929 !important;
    background: #292929 !important;
    color: #fff !important;
}
body.cdp-public.auth-page .auth-topbar a:first-child { color: #74716d !important; }
body.cdp-public.auth-page .auth-topbar a:last-child { color: #b96525 !important; }

/* ==============================================================
   v1.13.4 — Index Thai hero size / wrapping hotfix
   Keep legacy width, legacy colors, line-height, and orbit animation.
   Only reduce the large Thai index headline so each intended phrase
   stays visually together on desktop instead of wrapping mid-phrase.
   ============================================================== */

/* Desktop: keep each headline phrase on one line inside the legacy left column. */
@media (min-width: 1181px) {
    html:lang(th) .hero-copy h1 {
        font-size: clamp(48px, 4.0vw, 54px) !important;
    }
    html:lang(th) .hero-copy h1 span,
    html:lang(th) .hero-copy h1 em {
        white-space: nowrap;
    }
}

/* Narrow desktop / tablet landscape: scale down before the layout stacks. */
@media (min-width: 981px) and (max-width: 1180px) {
    html:lang(th) .hero-copy h1 {
        font-size: clamp(42px, 4.0vw, 46px) !important;
    }
    html:lang(th) .hero-copy h1 span,
    html:lang(th) .hero-copy h1 em {
        white-space: nowrap;
    }
}

/* Once the hero becomes one column, keep it prominent but smaller than v1.13.3. */
@media (max-width: 980px) {
    html:lang(th) .hero-copy h1 {
        font-size: clamp(46px, 7.0vw, 62px) !important;
    }
}

@media (max-width: 620px) {
    html:lang(th) .hero-copy h1 {
        font-size: clamp(36px, 9.0vw, 48px) !important;
    }
}

/* v1.13.5 — Thai index section-title hierarchy.
   Keep the v1.13.4 hero, page width, legacy colors/buttons and orbit animation unchanged. */
html:lang(th) body.cdp-public .platform-section .section-heading h2 {
    font-size: clamp(38px, 3.2vw, 46px) !important;
    line-height: 1.38 !important;
    letter-spacing: -0.018em !important;
}

html:lang(th) body.cdp-public .activation-copy h2 {
    font-size: clamp(40px, 3.35vw, 48px) !important;
    line-height: 1.38 !important;
    letter-spacing: -0.018em !important;
}

html:lang(th) body.cdp-public .governance-section .section-heading h2 {
    font-size: clamp(36px, 3vw, 43px) !important;
    line-height: 1.40 !important;
    letter-spacing: -0.016em !important;
}

html:lang(th) body.cdp-public .final-cta-inner h2 {
    font-size: clamp(36px, 3.05vw, 44px) !important;
    line-height: 1.40 !important;
    letter-spacing: -0.016em !important;
}

@media (max-width: 980px) {
    html:lang(th) body.cdp-public .platform-section .section-heading h2 { font-size: clamp(35px, 5vw, 43px) !important; }
    html:lang(th) body.cdp-public .activation-copy h2 { font-size: clamp(37px, 5.2vw, 45px) !important; }
    html:lang(th) body.cdp-public .governance-section .section-heading h2 { font-size: clamp(34px, 4.8vw, 41px) !important; }
    html:lang(th) body.cdp-public .final-cta-inner h2 { font-size: clamp(34px, 4.8vw, 41px) !important; }
}

@media (max-width: 720px) {
    html:lang(th) body.cdp-public .platform-section .section-heading h2 { font-size: clamp(31px, 8vw, 36px) !important; }
    html:lang(th) body.cdp-public .activation-copy h2 { font-size: clamp(33px, 8.4vw, 38px) !important; }
    html:lang(th) body.cdp-public .governance-section .section-heading h2 { font-size: clamp(30px, 7.8vw, 35px) !important; }
    html:lang(th) body.cdp-public .final-cta-inner h2 { font-size: clamp(30px, 7.8vw, 35px) !important; }
}


/* ==============================================================
   v1.13.6 — English / Thai index title balance
   The English locale previously fell back to the older oversized
   68–102px heading scale while Thai had already been tuned down.
   Keep the same layout, legacy palette, buttons, Thai line-height,
   and 360° orbit; only normalize English hero/section headings so
   both locales carry comparable visual weight.
   ============================================================== */

/* Hero — English should feel as prominent as Thai, not dramatically larger. */
@media (min-width: 1181px) {
    html:lang(en) body.cdp-public .hero-copy h1 {
        font-size: clamp(50px, 4.2vw, 58px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
    }
    html:lang(en) body.cdp-public .hero-copy h1 span,
    html:lang(en) body.cdp-public .hero-copy h1 em {
        white-space: nowrap;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    html:lang(en) body.cdp-public .hero-copy h1 {
        font-size: clamp(44px, 4.2vw, 50px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.042em !important;
    }
    html:lang(en) body.cdp-public .hero-copy h1 span,
    html:lang(en) body.cdp-public .hero-copy h1 em {
        white-space: nowrap;
    }
}

@media (max-width: 980px) {
    html:lang(en) body.cdp-public .hero-copy h1 {
        font-size: clamp(46px, 7vw, 60px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.042em !important;
    }
}

@media (max-width: 620px) {
    html:lang(en) body.cdp-public .hero-copy h1 {
        font-size: clamp(36px, 9vw, 46px) !important;
    }
}

/* Section-title hierarchy — English is set a touch tighter than Thai
   because Latin capitals/ascenders read larger at the same pixel size. */
html:lang(en) body.cdp-public .platform-section .section-heading h2 {
    font-size: clamp(36px, 3.05vw, 44px) !important;
    line-height: 1.10 !important;
    letter-spacing: -0.032em !important;
}

html:lang(en) body.cdp-public .activation-copy h2 {
    font-size: clamp(38px, 3.2vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.034em !important;
}

html:lang(en) body.cdp-public .governance-section .section-heading h2 {
    font-size: clamp(35px, 2.9vw, 41px) !important;
    line-height: 1.10 !important;
    letter-spacing: -0.030em !important;
}

html:lang(en) body.cdp-public .final-cta-inner h2 {
    font-size: clamp(35px, 2.95vw, 42px) !important;
    line-height: 1.10 !important;
    letter-spacing: -0.030em !important;
}

@media (max-width: 980px) {
    html:lang(en) body.cdp-public .platform-section .section-heading h2 { font-size: clamp(34px, 4.8vw, 41px) !important; }
    html:lang(en) body.cdp-public .activation-copy h2 { font-size: clamp(36px, 5vw, 43px) !important; }
    html:lang(en) body.cdp-public .governance-section .section-heading h2 { font-size: clamp(33px, 4.6vw, 39px) !important; }
    html:lang(en) body.cdp-public .final-cta-inner h2 { font-size: clamp(33px, 4.6vw, 39px) !important; }
}

@media (max-width: 720px) {
    html:lang(en) body.cdp-public .platform-section .section-heading h2 { font-size: clamp(30px, 7.6vw, 34px) !important; }
    html:lang(en) body.cdp-public .activation-copy h2 { font-size: clamp(32px, 8vw, 36px) !important; }
    html:lang(en) body.cdp-public .governance-section .section-heading h2 { font-size: clamp(29px, 7.4vw, 33px) !important; }
    html:lang(en) body.cdp-public .final-cta-inner h2 { font-size: clamp(29px, 7.4vw, 33px) !important; }
}


/* ==============================================================
   v1.13.7 — Home login navigation guard
   Make the public sign-in/workspace controls explicitly clickable and
   keep them above decorative animation layers. No palette/width/type changes.
   ============================================================== */
body.cdp-public .public-actions,
body.cdp-public .hero-actions,
body.cdp-public .final-cta-inner {
    position: relative;
    z-index: 70;
}
body.cdp-public .nav-login,
body.cdp-public a.public-button {
    position: relative;
    z-index: 71;
    pointer-events: auto !important;
    cursor: pointer;
}