:root{
  --blue:#168BFF;--blue2:#006ACE;--cyan:#19C5F4;--ink:#173a55;--muted:#71899d;
  --line:#dce8f2;--soft:#f6fbff;--card:#fff;--bg:#fff;--shadow:0 20px 55px rgba(27,79,120,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;line-height:1.75}
a{color:inherit}
.wrap{width:min(1120px,calc(100% - 40px));margin:auto}
.nav{position:sticky;top:0;z-index:50;padding:9px 0;background:rgba(255,255,255,.76);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,232,242,.75)}
.navin{min-height:62px;display:flex;align-items:center;gap:18px}
.brand{display:block;width:154px;height:50px;flex:0 0 154px;background:url('/reloop-logo-web-light.png.png?v=20260924-legal-v1') left center/contain no-repeat;text-indent:-9999px;overflow:hidden}
.navlinks{display:flex;align-items:center;gap:6px;margin-left:auto}
.navlinks a{padding:9px 11px;border-radius:11px;text-decoration:none;color:#607e93;font-size:12px;font-weight:800}
.navlinks a:hover{background:#eef7ff;color:#0879e8}
.theme{width:39px;height:39px;border:1px solid #d9e6f0;border-radius:12px;background:#fff;color:#5c7890;display:grid;place-items:center;cursor:pointer}
.hero{padding:64px 0 36px;background:radial-gradient(circle at 90% 0%,rgba(22,139,255,.12),transparent 31%),linear-gradient(180deg,#fbfdff,#fff)}
.kicker{display:inline-flex;align-items:center;gap:8px;color:#0879e8;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(25,197,244,.12)}
.hero h1{margin:14px 0 12px;max-width:850px;font-size:clamp(38px,5vw,58px);line-height:1.15;letter-spacing:-1.2px;color:#143552}
.hero p{margin:0;max-width:820px;color:var(--muted);font-size:15px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}
.meta span{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;border:1px solid #dceaf5;background:#fff;color:#638096;font-size:10.5px;font-weight:800}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;padding:40px 0 76px}
.toc{position:sticky;top:92px;align-self:start;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 14px 34px rgba(31,83,123,.045)}
.toc b{display:block;margin-bottom:10px;color:#284c68;font-size:12px}
.toc a{display:block;padding:7px 9px;border-radius:10px;color:#7890a4;text-decoration:none;font-size:11px;font-weight:750}
.toc a:hover{background:#eef7ff;color:#0879e8}
.content{min-width:0}
.notice{padding:18px 20px;margin-bottom:18px;border:1px solid #d7e8f5;border-radius:18px;background:linear-gradient(135deg,#f5fbff,#fff);color:#557289;font-size:12px}
.notice b{color:#214968}
.section{scroll-margin-top:104px;margin:0 0 18px;padding:26px 28px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow)}
.section h2{margin:0 0 11px;color:#19415e;font-size:23px;line-height:1.3}
.section h3{margin:20px 0 7px;color:#2a506d;font-size:15px}
.section p{margin:0 0 12px;color:#607c91;font-size:13px}
.section p:last-child{margin-bottom:0}
.section ul{margin:8px 0 12px;padding-left:20px;color:#607c91;font-size:13px}
.section li{margin:6px 0}
.section a{color:#0879e8;font-weight:800;text-underline-offset:2px}
.table-wrap{overflow:auto;border:1px solid #e0ebf3;border-radius:16px}
table{width:100%;border-collapse:collapse;min-width:650px;background:#fff}
th,td{padding:12px 13px;border-bottom:1px solid #e7eef4;vertical-align:top;text-align:left;font-size:11.5px;line-height:1.55}
th{background:#f6faff;color:#31536e;font-weight:900}
td{color:#637e92}
tr:last-child td{border-bottom:0}
.callout{margin-top:14px;padding:14px 16px;border-radius:15px;background:#eef7ff;border:1px solid #d6e9f8;color:#55758d;font-size:11.5px}
.callout strong{color:#1769ad}
.footer{padding:30px 0 42px;border-top:1px solid #e9f0f5}
.footerin{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
.footbrand .brand{width:165px;height:54px;margin-bottom:8px}
.footbrand p{margin:0;max-width:440px;color:#8398a9;font-size:10.5px}
.footlinks{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.footlinks a{padding:8px 10px;border-radius:10px;text-decoration:none;color:#6f879a;font-size:10.5px;font-weight:800}
.footlinks a:hover{background:#eef7ff;color:#0879e8}
.copy{grid-column:1/-1;padding-top:16px;border-top:1px solid #e7eef4;color:#8ca0af;font-size:9.5px}
html.bf-dark{--bg:#071522;--card:#0e2435;--ink:#eaf5fd;--muted:#96adbf;--line:rgba(132,181,220,.16);color-scheme:dark}
html.bf-dark body{background:#071522;color:#eaf5fd}
html.bf-dark .nav{background:rgba(7,21,34,.78);border-color:rgba(132,181,220,.12)}
html.bf-dark .brand{background-image:url('/reloop-logo-web-dark.png.png?v=20260924-legal-v1')}
html.bf-dark .navlinks a,html.bf-dark .theme{color:#a8bfd0}
html.bf-dark .navlinks a:hover{background:#102b40;color:#fff}
html.bf-dark .theme{background:#10283a;border-color:#31516a}
html.bf-dark .hero{background:radial-gradient(circle at 90% 0%,rgba(25,197,244,.10),transparent 31%),linear-gradient(180deg,#091a29,#071522)}
html.bf-dark .hero h1,html.bf-dark .section h2,html.bf-dark .section h3,html.bf-dark .toc b,html.bf-dark .notice b{color:#edf7ff}
html.bf-dark .hero p,html.bf-dark .section p,html.bf-dark .section ul,html.bf-dark .toc a,html.bf-dark .notice{color:#9bb2c2}
html.bf-dark .meta span,html.bf-dark .toc,html.bf-dark .section{background:#0e2435;border-color:rgba(132,181,220,.16)}
html.bf-dark .notice{background:linear-gradient(135deg,#0d293f,#0e2435);border-color:#284b67}
html.bf-dark .toc a:hover{background:#102f47;color:#bfe2ff}
html.bf-dark table{background:#0d2233}html.bf-dark th{background:#102a3d;color:#dfefff}html.bf-dark td{color:#9fb6c6}html.bf-dark th,html.bf-dark td{border-color:#29475c}
html.bf-dark .callout{background:#0c2b42;border-color:#284b67;color:#a9c1d1}html.bf-dark .callout strong{color:#bfe2ff}
html.bf-dark .footer{border-color:rgba(132,181,220,.12)}html.bf-dark .footbrand p,html.bf-dark .footlinks a,html.bf-dark .copy{color:#8faabd}html.bf-dark .copy{border-color:rgba(132,181,220,.12)}
@media(max-width:860px){
  .navlinks a:not(.keep){display:none}
  .layout{grid-template-columns:1fr}.toc{position:relative;top:auto}.toc{display:none}
}
@media(max-width:620px){
  .wrap{width:min(100% - 28px,1120px)}.navin{min-height:56px}.brand{width:132px;height:44px;flex-basis:132px}
  .hero{padding:45px 0 25px}.hero h1{font-size:38px}.hero p{font-size:14px}
  .layout{padding:26px 0 56px}.section{padding:21px 18px;border-radius:20px}.section h2{font-size:20px}
  .footerin{grid-template-columns:1fr}.footlinks{justify-content:flex-start}.copy{grid-column:auto}
}