/* NAV */
  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:28px;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:max-height .3s ease,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:max-height .3s ease,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 */
  .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)}

  /* FOOTER */
  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}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#0f2545;--gold:#b8922a;--gold-ink:#8a6e20;--white:#fff;--ivory:#fff5df;--cosmic:#090e2a;--muted:#d1cce0;--line:#363753}
html{scroll-padding-top:88px}body{font-family:'Inter','Noto Sans Thai',sans-serif;line-height:1.7;color:var(--ivory);background:var(--cosmic)}
::selection{background:#dbc18a;color:#10182f}a{color:#ead09b;text-underline-offset:4px}a:hover{color:#fff}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #e9c77b;outline-offset:4px}
.skip-link{position:fixed;top:-80px;left:16px;background:var(--ivory);color:var(--navy);padding:12px 20px;z-index:200}.skip-link:focus{top:8px}
.skip-link:hover{color:var(--navy)}
main{padding-top:64px}h1,h2{font-family:'Playfair Display','Noto Sans Thai',serif;font-weight:600;line-height:1.2;text-wrap:balance}h1{font-size:clamp(38px,4.6vw,64px);letter-spacing:-.025em}h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:24px}h3{font-size:20px;line-height:1.4}p{margin:0 0 20px}img{max-width:100%;height:auto;display:block}section{scroll-margin-top:88px}.dc-wrap{width:min(1120px,calc(100% - 96px));margin:auto}
/* Donut Circuit product pages */
.dc-product .dc-wrap { width: min(1080px, calc(100% - clamp(40px, 10vw, 128px))); }
.dc-product main > section { padding-inline: 0; }
.dc-product main :where(h2) { font-size: clamp(27px, 3.3vw, 42px); margin: 0 0 12px; }
.dc-hero {
  padding-block: 0;
  background: radial-gradient(ellipse at 78% 45%, #31225b, transparent 58%), #11142e;
}
.dc-hero .dc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(30px, 4vw, 56px);
}
.dc-title h1 { font-size: clamp(38px, 5.2vw, 76px); }
.dc-mark { width: 60px; border-radius: 14px; margin-bottom: 14px; }
.dc-tagline { color: #f0d29e; font-size: clamp(21px, 2.3vw, 31px); line-height: 1.35; margin: 8px 0 14px; }
.dc-intro { max-width: 42ch; color: var(--muted); font-size: clamp(16px, 1.45vw, 19px); margin-bottom: 20px; }
.dc-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; }
.dc-action { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px; background: #e6c889; color: #17213b; font-weight: 600; text-decoration: none; border-radius: 5px; }
.dc-action:hover { background: #f7dfa9; color: #17213b; }
.dc-action:focus-visible { outline: 2px solid #fff5df; outline-offset: 3px; }
.dc-play { gap: 10px; }
.dc-play-icon { width: 20px; height: 20px; flex-shrink: 0; }
.dc-text-action {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: transparent; border: 0; color: #f0d29e;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.dc-text-action:hover { color: #fff; }
.dc-ios-status { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.dc-ios-status strong { color: var(--ivory); font-weight: 600; }
.dc-ios-status span { margin-inline: 4px; }
.dc-home { width: min(100%, 270px); justify-self: center; }
.dc-home img, .dc-shot img, .dc-tablet img, .dc-preview video { border-radius: 10px; }
.dc-product figcaption { color: var(--muted); font-size: 14px; line-height: 1.45; margin-top: 8px; }
.dc-section { padding-block: clamp(36px, 5.4vw, 68px); }
.dc-how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 6vw, 80px); }
.dc-how h2 { max-width: 20ch; }
.dc-how p, .dc-gallery-head p, .dc-media-item p, .dc-availability-copy > p:first-of-type { max-width: 48ch; color: var(--muted); }
.dc-how p, .dc-gallery-head p { margin-bottom: 0; }
.dc-steps { padding-inline-start: 28px; margin: 0; }
.dc-steps li { padding-inline-start: 6px; line-height: 1.55; }
.dc-steps li + li { margin-top: 9px; }
.dc-steps li::marker { color: #edc990; font-weight: 700; }

.dc-gallery { background: #15152f; }
.dc-gallery-head { max-width: 620px; margin: 0 auto 24px; text-align: center; }
.dc-gallery-head p { margin-inline: auto; }
.dc-spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.5vw, 34px); max-width: 728px; margin-inline: auto; }
.dc-shot img { width: 100%; }
.dc-shot figcaption { text-align: center; }

.dc-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 6vw, 88px); }
.dc-media-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.dc-product .dc-media-item h2 { font-size: clamp(24px, 2.7vw, 34px); margin-bottom: 8px; }
.dc-media-item p { margin-bottom: 18px; }
.dc-tablet { width: min(100%, 282px); }
.dc-preview video { display: block; width: min(100%, 266px); height: auto; aspect-ratio: 340 / 480; background: #100a28; }
.dc-features { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: clamp(24px, 4vw, 46px); padding-top: clamp(18px, 3vw, 30px); }
.dc-product .dc-features h2 { font-size: clamp(22px, 2.4vw, 30px); }
.dc-feature-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; }
.dc-feature-list h3 { font-size: 16px; }
.dc-feature-list p { color: var(--muted); margin: 3px 0 0; }

.dc-availability { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); background: #17192f; }
.dc-availability-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 18px clamp(28px, 6vw, 76px); }
.dc-availability-copy > p:first-of-type { margin-bottom: 16px; }
.dc-availability .dc-ios-status { margin-top: 10px; }
.dc-availability-grid > img { width: 100%; border-radius: 8px; }
.dc-social { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 18px; border-top: 1px solid var(--line); padding-top: 8px; }
.dc-social-title { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0; }
.dc-social-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.dc-social-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--ivory); font-size: 14px; text-decoration: underline; }
.dc-social-link:focus-visible { outline: 2px solid #f0cf68; outline-offset: 3px; }
.dc-social-icon { width: 16px; height: 16px; flex-shrink: 0; }
.dc-share .share-button { cursor: pointer; }
.dc-share .share-button[aria-disabled="true"] { cursor: progress; }
.dc-share .share-status { margin: 0; color: #f0d29e; font-size: 14px; }
.dc-share .share-url { display: inline-block; max-width: 100%; overflow-wrap: anywhere; color: #f0d29e; font-size: 14px; }
.dc-share [hidden] { display: none; }

@media (max-width: 640px) {
  .dc-product .dc-wrap { width: calc(100% - 40px); }
  .dc-hero .dc-wrap, .dc-how, .dc-media-grid, .dc-availability-grid { grid-template-columns: minmax(0, 1fr); }
  .dc-hero .dc-wrap { gap: 24px; }
  .dc-home { width: min(100%, 224px); }
  .dc-gallery-head { text-align: start; margin-bottom: 18px; }
  .dc-gallery-head p { margin-inline: 0; }
  .dc-shot figcaption { font-size: 13px; text-align: start; }
  .dc-media-grid { row-gap: 28px; }
  .dc-media-item { grid-row: auto; grid-template-rows: auto; }
  .dc-features { margin-top: 0; }
  .dc-feature-list { grid-template-columns: 1fr; }
}
.dc-document{background:#fbf9f4;color:#172744}.dc-document main{padding:120px 24px 80px}.dc-prose{max-width:760px;margin:auto}.dc-prose h1{font-size:clamp(34px,5vw,48px);margin:16px 0 24px}.dc-prose h2{font-size:26px;margin:40px 0 16px}.dc-prose h3{margin:28px 0 12px}.dc-prose p,.dc-prose li{max-width:72ch}.dc-prose ul{padding-left:24px;margin-bottom:24px}.dc-prose li{margin-bottom:10px}.dc-prose a{color:#725616}.dc-prose a:hover{color:#0f2545}.dc-prose .dc-action{color:#17213b}.dc-breadcrumb{font-size:14px;display:flex;gap:12px;flex-wrap:wrap}.dc-meta{color:#576176;font-size:14px}.dc-draft{padding:24px;background:#f1e4c9;margin:28px 0;color:#26324a;border-radius:4px}.dc-draft p:last-child{margin-bottom:0}.dc-prose details{border-bottom:1px solid #d9d5ca;padding:18px 0}.dc-prose summary{font-size:18px;font-weight:600;cursor:pointer;min-height:44px;display:list-item;padding-right:16px}.dc-prose details p{margin:12px 0}.dc-contact{margin:28px 0;padding:24px;background:#f0ede5}.dc-contact a{overflow-wrap:anywhere}.dc-contact p:last-child{margin:0}.dc-links{display:flex;gap:16px 28px;flex-wrap:wrap;margin-top:40px}.dc-links a{display:inline-block;min-height:44px;padding:10px 0}
footer .fr{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center}footer a{display:inline-block;padding-block:6px}footer .fl,footer .fr{color:#c1c8d2}footer .fr a{color:#e0e4ea}
@media(max-width:1160px){nav .nav-links{display:none}.nav-toggle{display:block}}
@media (max-width: 640px) {
  nav { padding: 0 20px; }
  .dc-document main { padding: 100px 20px 56px; }
  .dc-prose h2 { font-size: 24px; }
  .dc-draft, .dc-contact { padding: 20px; }
  footer { padding: 24px 20px; flex-direction: column; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep long-form policy sections free of shared showcase spacing. */
.dc-prose section{padding:0;margin:0}
.dc-prose ol{padding-inline-start:24px;margin-bottom:24px}
.dc-data-table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:14px}
.dc-data-table th,.dc-data-table td{border-bottom:1px solid #d9d5ca;padding:8px;text-align:start;vertical-align:top;overflow-wrap:anywhere}
.dc-data-table thead{background:#f0ede5}

/* Product legal navigation follows HCC's paper surface and ruled text links. */
.dc-legal{background:#fbf9f4;color:#172744;padding:clamp(36px,5vw,64px) 0}
.dc-legal-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.dc-legal h2{font-size:clamp(26px,3vw,40px);margin:0 0 20px}
.dc-legal p{color:#576176;margin:0;max-width:42ch}
.dc-legal ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,56px);border-bottom:1px solid #d9d5ca;margin:0;padding:0}
.dc-legal a{display:flex;align-items:center;min-height:48px;padding:12px 0;border-top:1px solid #d9d5ca;color:#172744;text-decoration:none;font-weight:500;font-size:16px;overflow-wrap:anywhere}
.dc-legal a:hover{color:#725616;text-decoration:underline}
.dc-legal a:focus-visible{outline:2px solid #725616;outline-offset:3px}
@media(max-width:900px){.dc-legal-layout{grid-template-columns:1fr}}
@media(max-width:640px){.dc-legal ul{grid-template-columns:1fr}}