/* Hex Color Codes product page (EN + TH) — "Orbital Studio" presentation.
   Loaded before /site-refinement.css so shared nav/footer refinements still apply.
   Section rules use class selectors (.sec) so the shared `section{}` padding does not override them. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0f2545;--gold:#b8922a;--gold-ink:#8a6e20;--white:#fff;--offwhite:#f8f9fb;
  --ink:#16181d;--ink-2:#4d5058;--paper:#f1f0ec;--off:#faf9f6;--stage:#0b0c10;--indigo:#574cf0;
  --on-dark:rgba(255,255,255,.78);--on-dark-2:rgba(255,255,255,.64);
  --hair:rgba(22,24,29,.16);--hair-dark:rgba(255,255,255,.18);
  --gutter:clamp(20px,5vw,56px);
  --spectrum:conic-gradient(from 0deg,#ff5f6d,#ffb347,#ffe066,#4ade80,#38bdf8,#818cf8,#f472b6,#ff5f6d);
  --c1:#3d338a;--c2:#7678ed;--c3:#f7b801;--c4:#f18701;--c5:#f35b03;
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.skip-link{position:absolute;left:8px;top:-60px;background:var(--white);color:var(--navy);padding:10px 18px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;z-index:200;transition:top .2s ease}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
html[lang="th"] body{font-family:'Noto Sans Thai','Inter',sans-serif;line-height:1.75}
img{display:block;max-width:100%;height:auto}

/* NAV (same behavior as the other product pages) */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(15,37,69,0.97);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-name{font-size:15px;font-weight:500;color:#fff;letter-spacing:0.01em}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;display:flex;gap:26px;list-style:none}
.nav-links a{color:rgba(255,255,255,0.75);text-decoration:none;font-size:14px;transition:color 0.2s}
.nav-links a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;z-index:101}
.nav-toggle-bar{display:block;width:22px;height:2px;background:#fff;margin:5px 0;transition:transform .25s ease,opacity .25s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;top:64px;left:0;right:0;background:var(--navy);display:flex;flex-direction:column;max-height:0;overflow-y:auto;visibility:hidden;transition:visibility 0s linear .3s;z-index:99;border-top:1px solid rgba(255,255,255,0.1)}
.mobile-menu.open{max-height:calc(100vh - 64px);visibility:visible;transition:visibility 0s linear 0s}
.mobile-menu a{color:rgba(255,255,255,0.85);text-decoration:none;font-size:15px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.08)}
.mobile-menu a:hover{background:rgba(255,255,255,0.05)}
.lang-switch{font-size:12px;color:rgba(255,255,255,0.6);text-decoration:none;border:1px solid rgba(255,255,255,0.25);padding:5px 12px;border-radius:20px;transition:color .2s,border-color .2s;white-space:nowrap}
.lang-switch:hover{color:#fff;border-color:rgba(255,255,255,0.6)}
.mobile-lang-switch{display:block;color:var(--gold);text-decoration:none;font-size:14px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.08)}
@media(max-width:860px){nav .nav-links{display:none}.nav-toggle{display:block}}
@media(max-width:768px){nav{padding:0 24px}}

/* SHARED LAYOUT */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{position:relative;padding:clamp(72px,9vw,140px) 0;scroll-margin-top:64px;overflow-x:clip}
.sec--paper{background:var(--paper)}
.sec--off{background:var(--off)}
.sec--white{background:#fff}
.sec--dark{background:var(--stage);color:#fff}

.kicker{display:flex;align-items:center;gap:12px;margin-bottom:clamp(16px,2vw,24px);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
html[lang="th"] .kicker{letter-spacing:.03em;text-transform:none;font-size:14px}
.sec--dark .kicker{color:var(--on-dark-2)}
/* numbered ring marker — echoes the numbered palette rings inside the app */
.mark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ring,var(--c1));font-size:12px;font-weight:700;color:var(--ink);letter-spacing:0;position:relative}
.mark::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.mark span{position:relative;z-index:1;font-variant-numeric:tabular-nums}
.sec--dark .mark::before{background:#f3f3f5}

h2{font-weight:650;font-size:clamp(30px,3.7vw,54px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:inherit}
html[lang="th"] h2{letter-spacing:0;line-height:1.28;font-weight:600}
.body{font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:var(--ink-2);max-width:34em;margin-top:clamp(16px,2vw,24px)}
html[lang="th"] .body{line-height:1.85}
.sec--dark .body{color:var(--on-dark)}
.text-link{color:inherit;font-weight:600;text-underline-offset:4px;text-decoration-thickness:1px}
.arrow{display:inline-block;margin-inline-start:.25em;transition:transform .2s ease}
.text-link:hover .arrow{transform:translateX(3px)}

/* SCREENS — real screenshots, clipped to the device's corner radius; no frame, no bezel */
.shot{display:block;width:100%;height:auto;border-radius:12.8%/5.9%;background:#e8e6e0;box-shadow:0 0 0 1px rgba(22,24,29,.1),0 38px 64px -34px rgba(22,24,29,.5)}
.shot--ipad{border-radius:1.9%/2.5%;background:#ddd}
.sec--dark .shot{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 48px 90px -40px #000}

/* HERO */
.hero{position:relative;background:var(--stage);color:#fff;overflow-x:clip;padding:calc(64px + clamp(40px,6vw,96px)) 0 0;z-index:2}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(ellipse 52% 62% at 76% 42%,rgba(104,92,240,.34),transparent 70%),
  radial-gradient(ellipse 44% 46% at 92% 92%,rgba(240,100,10,.26),transparent 72%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;column-gap:clamp(24px,4vw,64px)}
.hero-copy{padding-bottom:clamp(40px,5vw,72px)}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--on-dark);margin-bottom:clamp(18px,2.4vw,28px)}
.eyebrow-ring{width:28px;height:28px;border-radius:50%;background:var(--spectrum);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px))}
.hero h1{font-weight:700;font-size:clamp(36px,5.2vw,72px);line-height:1.04;letter-spacing:-.036em;text-wrap:balance;max-width:11.5em}
html[lang="th"] .hero h1{letter-spacing:0;line-height:1.22;font-weight:700;font-size:clamp(34px,4.6vw,62px)}
.hero .lede{margin-top:clamp(16px,2vw,26px);font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--on-dark);max-width:31em}
html[lang="th"] .hero .lede{line-height:1.85;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(22px,2.8vw,36px)}
.store-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;background:#fff;color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;border-radius:10px;padding:13px 24px;transition:transform .18s ease,background-color .18s ease}
.store-btn:hover{background:#ecebf5;transform:translateY(-1px)}
.store-btn svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.hero .text-link{color:#fff;min-height:44px;display:inline-flex;align-items:center}
.platforms{margin-top:clamp(18px,2.2vw,28px);display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--on-dark-2)}
.platforms b{color:#fff;font-weight:600}
.platforms span{display:inline-flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:#4ade80;flex:none}
.dot--soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--on-dark-2)}

.hero-visual{position:relative;justify-self:center;margin-bottom:calc(-1 * clamp(90px,13vw,190px));padding-top:8px}
.hero-stage{--phone:min(340px,66vw);--orbit:1.8;position:relative;width:var(--phone)}
.hero-stage .shot{position:relative;z-index:1}
/* the orbit: a hue ring with the five Daybreak palette colors travelling on it, numbered like the app */
.orbit{position:absolute;left:50%;top:46%;width:calc(var(--phone) * var(--orbit));aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.orbit-spin{position:absolute;inset:0;border-radius:50%;animation:orbit-turn 140s linear infinite}
.orbit-ring{position:absolute;inset:0;border-radius:50%;background:var(--spectrum);opacity:.9;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
.orbit-node{position:absolute;left:50%;top:50%;width:calc(var(--phone) * .09);aspect-ratio:1;margin:calc(var(--phone) * -.045);border-radius:50%;background:radial-gradient(circle,#f3f3f5 0 27%,var(--c) 29%);box-shadow:0 0 0 2px var(--stage);transform:rotate(var(--a)) translateY(calc(var(--phone) * var(--orbit) * -.5))}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.orbit-spin{animation:none}}

/* STORY ROWS */
.story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);row-gap:clamp(36px,6vw,64px);align-items:center}
.story-copy{grid-column:1 / span 5}
.story-visual{grid-column:7 / span 6;min-width:0}
.story--flip .story-copy{grid-column:9 / span 4;grid-row:1}
.story--flip .story-visual{grid-column:1 / span 8;grid-row:1}
.hero + .sec{padding-top:calc(clamp(72px,9vw,140px) + clamp(90px,13vw,190px))}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,36px);align-items:start;max-width:560px}
.duo > :nth-child(2){margin-top:14%}
.family{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr);gap:clamp(16px,3vw,40px);align-items:end}
.family .shot--ipad{width:100%}
.duo-shift{max-width:420px;margin-inline:auto}

/* PALETTES (dark showpiece) */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);row-gap:20px;align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.split > div{grid-column:1 / span 6}
.split > .body{grid-column:8 / span 5;margin-top:0}
.stage-fig{position:relative}
.stage-fig::before{content:"";position:absolute;inset:-12% -8%;background:radial-gradient(closest-side at 30% 70%,rgba(118,120,237,.26),transparent),radial-gradient(closest-side at 78% 78%,rgba(243,91,3,.28),transparent);pointer-events:none}
.stage-fig img{position:relative}
.spec{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(12px,2vw,28px);margin-top:clamp(24px,3vw,40px);position:relative}
.spec li{border-top:1px solid var(--hair-dark);padding-top:14px;display:grid;gap:2px;font-variant-numeric:tabular-nums}
.spec .sw{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#f3f3f5 0 27%,var(--c) 29%);margin-bottom:8px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.spec b{font-size:clamp(15px,1.4vw,18px);font-weight:600;letter-spacing:.01em}
.spec span{font-size:13px;color:var(--on-dark-2)}
.spec-cap{margin-top:18px;font-size:13px;color:var(--on-dark-2);position:relative}

/* CREATE — phones emerge from the section edge */
.sec--bleed{padding-bottom:0}
.bleed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,36px);max-width:600px;align-items:end}
/* each phone is cropped by its container: 1.85 x width of a 2.16 x width screen, so the bottom always runs off the section edge */
.bleed-clip{overflow:hidden;aspect-ratio:1 / 1.85}
.bleed > div:nth-child(2) .bleed-clip{aspect-ratio:1 / 1.7}
.bleed-clip .shot{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:0 0 0 1px rgba(22,24,29,.1)}
.bleed-step{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
html[lang="th"] .bleed-step{letter-spacing:.02em;text-transform:none;font-size:13px}
.note{margin-top:clamp(18px,2vw,26px);padding-top:16px;border-top:1px solid var(--hair);font-size:15px;line-height:1.65;color:var(--ink-2);max-width:32em}

/* KEEP (typographic, no screenshots) */
.keep-head{max-width:15em}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,88px);margin-top:clamp(36px,5vw,64px)}
.facts div{border-top:1px solid var(--hair);padding:22px 0 30px}
.facts dt{font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.facts dd{margin-top:8px;font-size:16px;line-height:1.7;color:var(--ink-2);max-width:30em}
html[lang="th"] .facts dd{line-height:1.85}

/* GALLERY */
.gallery-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin-bottom:clamp(20px,3vw,36px)}
.gallery-head h2{font-size:clamp(24px,2.6vw,34px)}
.gallery-head p{font-size:15px;color:var(--ink-2)}
.strip{display:flex;gap:clamp(16px,2.4vw,32px);overflow-x:auto;scroll-snap-type:x proximity;padding:6px 0 28px calc(max(0px,(100% - 1240px) / 2) + var(--gutter));scroll-padding-inline:calc(max(0px,(100% - 1240px) / 2) + var(--gutter));overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.strip figure{flex:none;scroll-snap-align:start}
.strip::after{content:"";flex:none;width:var(--gutter)}
.strip img{height:clamp(300px,36vw,430px);width:auto;max-width:none}
.strip figcaption{margin-top:12px;font-size:13px;color:var(--ink-2)}

/* AVAILABILITY */
.get{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);margin-top:clamp(32px,4vw,56px)}
.get > div{border-top:1px solid var(--hair-dark);padding-top:22px}
.get h3{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
html[lang="th"] .get h3{letter-spacing:.02em;text-transform:none;font-size:15px}
.state{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:clamp(22px,2.4vw,30px);font-weight:650;letter-spacing:-.02em}
html[lang="th"] .state{letter-spacing:0}
.get p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--on-dark);max-width:32em}
html[lang="th"] .get p{line-height:1.85}
.get .store-btn{margin-top:22px}
.launch-link{margin-top:clamp(28px,4vw,48px);font-size:16px}
.launch-link a{color:#fff}

/* App download sharing only — independent of color/palette sharing. */
.app-share-tools{margin-top:32px;padding-top:24px;border-top:1px solid var(--hair-dark)}
.app-share-tools .share-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;padding:12px 20px;border:1px solid #8c8d94;border-radius:10px;color:#fff;background:transparent;font-family:inherit;font-size:15px;line-height:1.5;font-weight:600;cursor:pointer}
.app-share-tools .share-button[hidden]{display:none}
.app-share-tools .share-button[aria-disabled="true"]{cursor:progress}
.app-share-tools .share-button:hover{background:#24252c}
.app-share-tools :focus-visible{outline-color:#b8b2ff}
.app-share-tools .share-description{margin-top:12px;font-size:15px;color:var(--on-dark)}
.app-share-tools .share-status{min-height:1.6em;margin-top:8px;font-size:14px;color:var(--on-dark)}
.app-share-tools .share-url{display:inline-block;max-width:100%;padding:8px 0;overflow-wrap:anywhere;font-size:14px;color:#fff}

/* SUPPORT / LEGAL */
.support{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.support h2{font-size:clamp(26px,3vw,40px)}
.links{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,56px);border-bottom:1px solid var(--hair)}
.links a{display:flex;align-items:center;min-height:48px;border-top:1px solid var(--hair);color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
.links a:hover{color:var(--indigo)}
.social-group{margin-top:clamp(24px,3vw,36px)}
.social-group-title{font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.social-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.social-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none}
.social-link:hover{color:var(--indigo)}
.social-icon{width:18px;height:18px;flex-shrink:0}

footer{background:#09192e;padding:28px 48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.fl,.fr{font-size:13px;color:rgba(255,255,255,0.55)}
.fr a{color:rgba(255,255,255,0.65);text-decoration:none}

/* RESPONSIVE */
@media(max-width:1160px) and (min-width:901px){
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero-stage{--phone:min(290px,28vw);--orbit:1.5}
  .story-copy{grid-column:1 / span 6}
  .story-visual{grid-column:7 / span 6}
  .story--flip .story-copy{grid-column:7 / span 6}
  .story--flip .story-visual{grid-column:1 / span 6}
}
@media(max-width:900px){
  .hero-bg{background:radial-gradient(ellipse 95% 38% at 50% 78%,rgba(104,92,240,.34),transparent 72%),radial-gradient(ellipse 80% 28% at 62% 98%,rgba(240,100,10,.26),transparent 74%)}
  .hero-grid{grid-template-columns:1fr;row-gap:36px}
  .hero-visual{margin-top:4px}
  .hero-stage{--phone:min(300px,70vw)}
  .story{grid-template-columns:1fr}
  .story-copy,.story-visual,.story--flip .story-copy,.story--flip .story-visual{grid-column:1;grid-row:auto}
  .story--flip .story-visual{order:2}
  .duo,.bleed{max-width:480px}
  .split{grid-template-columns:1fr}
  .split > div,.split > .body{grid-column:1}
  .spec{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .get,.support{grid-template-columns:1fr}
  .family{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .family .shot--ipad{grid-column:1 / -1;grid-row:2}
  .family{align-items:start}
}
@media(max-width:768px){
  footer{padding:24px;flex-direction:column}
}
@media(max-width:560px){
  .facts{grid-template-columns:1fr}
  .links{grid-template-columns:1fr}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-row{gap:6px 24px}
  .store-btn{width:100%;justify-content:center}
  .hero .text-link{margin-inline:auto}
}
/* landscape phones: keep the hero and story rows side by side instead of one very tall column */
@media(max-height:520px) and (orientation:landscape) and (max-width:900px){
  .hero{padding-top:calc(64px + 24px)}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);row-gap:0}
  .hero h1{font-size:clamp(28px,4.4vw,38px)}
  .hero .lede{font-size:15px}
  .hero-copy{padding-bottom:24px}
  .hero-stage{--phone:min(150px,26vw)}
  .hero-visual{margin-bottom:-60px}
  .hero + .sec{padding-top:calc(48px + 60px)}
  .sec{padding:48px 0}
  .story{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .story-copy,.story-visual,.story--flip .story-copy,.story--flip .story-visual{grid-column:auto}
  .story--flip .story-visual{order:0}
  .store-btn{width:auto}
  .duo,.bleed{max-width:300px}
  .strip img{height:260px}
}

@media(max-height:430px) and (orientation:landscape) and (max-width:900px){.hero .lede{display:none}}