/* sgnce — Singapore pre-commencement compliance.
   Brand: deep slate ink + regulatory blue, amber as the "you missed this" signal.
   Fonts: Sora (display) / Outfit (text) — same family as the other sgnce sites. */

/* 见仓库 README《CSS 陷阱》。浏览器给 hidden 的默认样式只是 display:none，
   组件类里的 display:grid/flex 会盖过它——.form 与 .btn 两个都会。
   apply/ 提交成功后 form.hidden=true 却仍显示，就是这条缺失造成的。别删。 */
[hidden]{display:none !important}

:root{
  --ink:#0c1420; --ink-2:#33414f; --ink-3:#67747f;
  --paper:#ffffff; --paper-2:#f4f6f8; --paper-3:#e8ecf0;
  --line:rgba(12,20,32,.10); --line-2:rgba(12,20,32,.17);
  --blue:#12539b; --blue-d:#0d3f78; --blue-soft:rgba(18,83,155,.09);
  --amber:#b8730a; --amber-soft:rgba(184,115,10,.10);
  --red:#c01029; --red-soft:rgba(192,16,41,.08);
  --shadow:0 1px 2px rgba(12,20,32,.05), 0 14px 38px -20px rgba(12,20,32,.30);
  --sans:'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp:'Sora', var(--sans);
  --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

.eyebrow{font-size:12px; letter-spacing:.17em; text-transform:uppercase; color:var(--blue); font-weight:600; margin:0 0 14px}
.lede{font-size:18px; color:var(--ink-2); max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:15px; padding:13px 24px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease}
.btn--sm{padding:9px 18px; font-size:14px}
.btn--solid{background:var(--ink); color:#fff}
.btn--solid:hover{transform:translateY(-1px); background:#000}
.btn--blue{background:var(--blue); color:#fff}
.btn--blue:hover{transform:translateY(-1px); background:var(--blue-d)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper-2); border-color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:17px;
  letter-spacing:-.01em; text-decoration:none}
.brand__mark{width:26px; height:26px; flex:none}
.nav{display:flex; align-items:center; gap:26px}
.nav a{font-size:14.5px; color:var(--ink-2); text-decoration:none; font-weight:500}
.nav a:hover{color:var(--ink)}
@media (max-width:860px){ .nav{display:none} }

/* ---------- hero ---------- */
.hero{padding:76px 0 56px; background:
  radial-gradient(900px 420px at 12% -10%, var(--blue-soft), transparent 62%), var(--paper)}
.hero h1{font-size:clamp(34px, 5.4vw, 58px)}
.hero .lede{margin-top:20px; font-size:19px}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero__stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(158px,1fr)); gap:1px;
  margin-top:52px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.stat{background:var(--paper); padding:20px 22px}
.stat__n{font-family:var(--disp); font-weight:800; font-size:27px; letter-spacing:-.03em; line-height:1}
.stat__l{font-size:13.5px; color:var(--ink-3); margin-top:7px}

/* ---------- alert ---------- */
.alert{display:flex; gap:15px; align-items:flex-start; padding:18px 20px; border-radius:14px;
  background:var(--amber-soft); border:1px solid rgba(184,115,10,.24); margin:44px 0 0}
.alert__ico{flex:none; width:22px; height:22px; color:var(--amber); margin-top:1px}
.alert h4{font-size:15.5px; margin:0 0 4px}
.alert p{font-size:14.5px; color:var(--ink-2)}

/* ---------- sections ---------- */
.sec{padding:76px 0; border-top:1px solid var(--line)}
.sec--tint{background:var(--paper-2)}
.sec__head{max-width:64ch; margin-bottom:44px}
.sec__head h2{font-size:clamp(26px, 3.4vw, 38px)}
.sec__head p{margin-top:16px; color:var(--ink-2); font-size:17px}

/* ---------- stage map ---------- */
.stage{border:1px solid var(--line); border-radius:18px; background:var(--paper);
  padding:26px 26px 8px; margin-bottom:18px; box-shadow:var(--shadow)}
.stage--core{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft), var(--shadow)}
.stage__top{display:flex; align-items:flex-start; gap:16px; padding-bottom:20px}
.stage__n{flex:none; width:38px; height:38px; border-radius:11px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:16px}
.stage--core .stage__n{background:var(--blue)}
.stage__t h3{font-size:20px}
.stage__t p{font-size:14.5px; color:var(--ink-3); margin-top:5px}
.tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); padding:4px 9px; border-radius:6px; margin-left:10px;
  vertical-align:middle; position:relative; top:-2px}

.rows{width:100%; border-collapse:collapse; font-size:14.5px}
.rows th{text-align:left; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:0 14px 10px 0; border-bottom:1px solid var(--line)}
.rows td{padding:14px 14px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2)}
.rows tr:last-child td{border-bottom:0}
.rows td:first-child{color:var(--ink); font-weight:600; width:31%}
.rows td:last-child{padding-right:0}
.rows .law{font-size:13px; color:var(--ink-3); display:block; margin-top:3px}
@media (max-width:760px){
  .rows, .rows tbody, .rows tr, .rows td{display:block; width:100%}
  .rows thead{display:none}
  .rows tr{padding:14px 0; border-bottom:1px solid var(--line)}
  .rows tr:last-child{border-bottom:0}
  .rows td{border:0; padding:2px 0}
  .rows td:first-child{width:auto; font-size:15.5px; margin-bottom:4px}
  .rows td[data-l]::before{content:attr(data-l); display:block; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:9px}
}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px}
.grid--3{grid-template-columns:repeat(auto-fit, minmax(272px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit, minmax(330px,1fr))}
.card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow)}
.card h3{font-size:17.5px; margin-bottom:9px}
.card h4{font-size:15.5px; margin-bottom:7px}
.card p{font-size:14.5px; color:var(--ink-2)}
.card__k{font-family:var(--disp); font-weight:800; font-size:15px; color:var(--blue); margin-bottom:10px}

/* ---------- penalty ---------- */
.pen{border:1px solid rgba(192,16,41,.24); background:var(--red-soft); border-radius:18px; padding:30px}
.pen__n{font-family:var(--disp); font-weight:800; font-size:clamp(30px,4.6vw,46px); color:var(--red);
  letter-spacing:-.03em; line-height:1}
.pen p{font-size:15px; color:var(--ink-2); margin-top:12px}

/* ---------- checklist ---------- */
.chk{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.chk li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink-2)}
.chk svg{flex:none; width:19px; height:19px; color:var(--blue); margin-top:2px}

/* ---------- cta band ---------- */
.band{background:var(--paper-2); border:1px solid var(--line-2); border-radius:22px; padding:clamp(32px,5vw,54px); margin:0 auto}
.band h2{font-size:clamp(26px,3.6vw,38px)}
.band p{color:var(--ink-2); font-size:17px; margin-top:16px; max-width:56ch}
.band__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.band .btn--ghost:hover{background:#fff}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); padding:20px 0}
.faq summary{font-family:var(--disp); font-weight:600; font-size:16.5px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:20px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:22px; color:var(--ink-3); font-weight:400; line-height:1; flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq p{margin-top:13px; font-size:15px; color:var(--ink-2); max-width:74ch}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line); padding:46px 0 40px; background:var(--paper-2)}
.ftr__in{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between}
.ftr a{color:var(--ink-2)}
.ftr__links{display:flex; flex-wrap:wrap; gap:20px; font-size:14.5px}
.disclaimer{margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-3); max-width:88ch; line-height:1.65}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

/* ---------- 站点条：回主站 + 横向跳板块 ---------- */
/* ============================ apply form ============================ */
.form{display:grid; gap:20px; max-width:720px}
.form__row{display:grid; gap:20px; grid-template-columns:1fr 1fr}
@media (max-width:640px){ .form__row{grid-template-columns:1fr} }
.fld{display:flex; flex-direction:column; gap:7px}
.fld label{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.fld .req{color:var(--red)}
.fld .hint{font-size:12.5px; color:var(--ink-3); line-height:1.5}
.fld input, .fld textarea, .fld select{
  font:inherit; font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:9px; padding:11px 13px; width:100%;
  transition:border-color .15s, box-shadow .15s}
.fld textarea{resize:vertical; min-height:96px; line-height:1.6}
.fld input:focus, .fld textarea:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft)}
.fld input:invalid:not(:placeholder-shown){border-color:var(--red)}

.notice{display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:10px;
  font-size:14px; line-height:1.6; border:1px solid var(--line)}
.notice--warn{background:rgba(184,115,10,.07); border-color:rgba(184,115,10,.3); color:var(--ink-2)}
.notice--err{background:rgba(192,16,41,.06); border-color:rgba(192,16,41,.3); color:var(--ink-2)}
.notice--ok{background:rgba(17,122,73,.07); border-color:rgba(17,122,73,.3); color:var(--ink-2)}
.notice b{color:var(--ink)}
.notice[hidden]{display:none}

.form__foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.form__foot .btn[disabled]{opacity:.55; pointer-events:none}

.done{max-width:720px}
.done__ref{display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:20px; font-weight:600; letter-spacing:.04em; color:var(--blue);
  background:var(--blue-soft); border-radius:9px; padding:11px 18px; margin:6px 0 22px}
.done ol{margin:18px 0 0 18px; display:grid; gap:11px; color:var(--ink-2); font-size:15.5px; line-height:1.65}