/* Soonlee brand tokens. Shared by public, account and classroom surfaces. */
:root {
  --background:#fff;
  --foreground:#202322;
  --card:#fff;
  --card-foreground:#202322;
  --primary:#e8ff32;
  --primary-foreground:#202322;
  --secondary:#202322;
  --secondary-foreground:#fff;
  --muted-background:#f7f8f5;
  --muted-foreground:#6a706b;
  --border:#e7e8e4;
  --ring:#202322;
  --radius:6px;
  --ink:var(--foreground);
  --accent:var(--primary);
  --line:var(--border);
  --font-sans:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
body {
  color:var(--foreground);
  font-family:var(--font-sans);
}
[hidden] {
  display:none!important;
}
.lucide {
  width:19px;
  height:19px;
  flex:none;
  vertical-align:middle;
  stroke-width:1.8;
}
.brand-mark {
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--accent);
  margin-right:8px;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--ring);
  outline-offset:4px;
}
.primary:focus-visible {
  outline-color:var(--ring);
}
/* The asymmetric corner repeats the approved wordmark's directional character. */
.account-page .primary,.portal-page .btn.primary,.admin-page .btn.primary,.site-page .btn-primary,.site-page .inquiry-action,.site-page .consult-submit,.legacy-page .submit-btn {
  background:var(--primary);
  color:var(--primary-foreground);
  border:1px solid var(--primary);
  border-radius:5px 18px 5px 5px;
  box-shadow:none;
}
.account-page .primary:hover,.portal-page .btn.primary:hover,.admin-page .btn.primary:hover,.site-page .inquiry-action:hover,.site-page .consult-submit:hover {
  background:#ddf324;
  border-color:#ddf324;
}
.account-page {
  background:#fff;
}
.account-page .back-link {
  font-size:13px;
  color:var(--ink);
}
.account-page .account-main {
  max-width:1180px;
  margin:70px auto 100px;
  padding:0 32px;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:28px 64px;
  align-items:start;
}
.account-page .account-heading {
  background:var(--ink);
  color:#fff;
  padding:40px 36px 60px;
  border-radius:6px;
  min-height:286px;
  position:relative;
}
.account-page .account-heading:before {
  content:'';
  display:block;
  width:16px;
  height:16px;
  background:var(--accent);
  margin-bottom:35px;
}
.account-page .eyebrow {
  font-size:10px;
  letter-spacing:.15em;
  color:#bfc3bd;
}
.account-page h1 {
  font-size:45px;
  margin:12px 0 0;
  font-weight:700;
}
.account-page .highlight {
  background:none;
  padding:0;
  box-shadow:none;
  color:inherit;
}
.account-page .account-card {
  border:0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
  padding:28px 0 32px;
  border-radius:0;
  box-shadow:none;
  margin:0;
}
.account-page .account-card p {
  font-size:19px;
  line-height:1.7;
}
.account-page .account-card .account-note {
  font-size:13px;
  margin-top:24px;
}
.account-page .primary {
  font-size:15px;
  min-height:52px;
  justify-content:space-between;
  padding:14px 20px;
  gap:16px;
}
.account-page .text-link {
  font-size:12px;
  color:var(--muted-foreground);
}
.account-page .text-button {
  border-radius:5px;
  color:var(--ink);
  border-color:var(--line);
  font-size:12px;
}
.account-page .account-toolbar {
  border-bottom:2px solid var(--ink);
  padding-bottom:20px;
}
.account-page .account-toolbar p {
  margin:0;
  font-size:15px;
  font-weight:600;
}
.account-page .course-list {
  gap:0;
}
.account-page .course-card {
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:27px 0;
  box-shadow:none;
}
.account-page .course-card:hover {
  box-shadow:none;
  background:var(--muted-background);
}
.account-page .course-card strong {
  font-size:23px;
  line-height:1.45;
  margin-top:10px;
  letter-spacing:-.04em;
}
.account-page .course-card small {
  font-size:12px;
  color:var(--muted-foreground);
}
.account-page .course-card .lucide {
  padding:10px;
  box-sizing:content-box;
  background:var(--accent);
  border-radius:5px;
}
.account-page .pending-card {
  background:transparent;
  color:var(--muted-foreground);
}
.account-page .pending-badge {
  border-radius:4px;
  background:#f6f7f3;
  border-color:var(--line);
  color:#656b60;
}
.account-page #account-status,.account-page noscript {
  grid-column:2;
}
.account-page #account-status {
  font-size:14px;
}
.account-page #courses-panel {
  min-width:0;
}
/* Existing public content and hero artwork retain their composition. */
.site-page {
  background:#fff;
}
.site-page .btn,.site-page .inquiry-action {
  border-radius:5px 18px 5px 5px;
  box-shadow:none;
}
.site-page .focusrow {
  background:transparent;
  border-radius:0;
  border:0;
  border-top:1px solid var(--ink);
  box-shadow:none;
}
.site-page .focus-photo,.site-page .step-photo {
  border-radius:6px;
  box-shadow:none;
}
.site-page .focus-mono {
  background:var(--accent);
  box-shadow:none;
}
.site-page .step>span {
  background:var(--ink);
  color:var(--accent);
  border-radius:5px;
  box-shadow:none;
}
.site-page .use-case-card {
  background:#fff;
  border:1px solid var(--line);
  border-top:2px solid var(--ink);
  border-radius:6px;
  box-shadow:none;
}
.site-page .use-case-meta>svg {
  background:var(--accent);
  color:var(--ink);
  padding:8px;
  box-sizing:content-box;
  border-radius:5px;
}
.site-page .transform-panel {
  border-radius:5px;
}
.site-page .inquiry-footer {
  background:var(--ink);
  color:#fff;
  border-radius:0;
}
.site-page .inquiry-heading h2 {
  color:#fff;
}
.site-page .footerbottom {
  border-color:#474a46;
}
.site-page .company-info,.site-page .company-info a {
  color:#c9cdc6;
}
.site-page .footerbottom .logo {
  background:transparent;
  padding:0;
  width:138px;
}
.site-page .consult-dialog {
  border:1px solid var(--ink);
  border-radius:6px;
  padding:0;
  box-shadow:0 22px 70px #20232233;
}
.site-page .consult-top {
  background:var(--ink);
  color:#fff;
  padding:24px 28px;
  margin:0;
  border-bottom:4px solid var(--accent);
}
.site-page .consult-top h2 {
  font-size:25px;
  letter-spacing:-.04em;
}
.site-page .consult-close {
  color:#fff;
  background:transparent;
  border-radius:4px;
}
.site-page .consult-form {
  padding:28px;
  gap:20px;
}
.site-page .consult-form input,.site-page .consult-form select,.site-page .consult-form textarea {
  background:#fff;
  border:1px solid #d3d7cf;
  border-radius:5px;
  color:var(--ink);
  box-shadow:none;
}
.site-page .consult-form input:focus,.site-page .consult-form select:focus,.site-page .consult-form textarea:focus {
  border-color:var(--ink);
  box-shadow:none;
}
.site-page .consult-submit {
  font-size:14px;
  font-weight:700;
}
.site-page .consult-consent-notice {
  color:var(--muted-foreground);
}
.legacy-page {
  background:#fff;
}
.legacy-page .hub-card,.legacy-page .card,.legacy-page .submit-card,.legacy-page .work-card {
  border:1px solid var(--line);
  border-top:2px solid var(--ink);
  border-radius:6px;
  box-shadow:none;
}
.legacy-page .btn,.legacy-page .back-link,.legacy-page input,.legacy-page select,.legacy-page textarea {
  border-radius:5px;
}
.legacy-page .hub-num {
  color:var(--ink);
  background:var(--accent);
}
@media(max-width:760px) {
  .account-page .account-main {
    margin:28px auto 60px;
    grid-template-columns:1fr;
    gap:30px;
    padding:0 22px;
  }
  .account-page .account-heading {
    min-height:0;
    padding:26px 26px 30px;
  }
  .account-page .account-heading:before {
    margin-bottom:24px;
    width:12px;
    height:12px;
  }
  .account-page h1 {
    font-size:36px;
  }
  .account-page #account-status,.account-page noscript {
    grid-column:1;
  }
  .account-page .account-card p {
    font-size:17px;
  }
  .account-page .course-card strong {
    font-size:20px;
  }
  .site-page .consult-form {
    padding:22px;
  }
  .site-page .consult-top {
    padding:22px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
.site-page .cta,.site-page .contact {
  border-radius:5px 18px 5px 5px!important;
}
.site-page .consult-top+.consult-form {
  margin-top:0;
}
.site-page .step>span {
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
}
.legacy-page .hub-icon {
  background:var(--accent);
  border-radius:5px;
}
.legacy-page .highlight {
  border-radius:0;
}
.account-page .account-heading h1 {
  overflow-wrap:anywhere;
}
.legacy-page .gallery-card,.legacy-page .submit-form {
  border-radius:6px;
  box-shadow:none;
}
.legacy-page .secondary-button {
  border-radius:5px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}
.account-page .eyebrow>span {
  display:none;
}
.account-page .account-note {
  color:var(--muted-foreground);
}
.check-copy strong {
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.site-page .focusrow:hover {
  background:#f7f8f5;
}
.site-page .inquiry-footer {
  border-top:4px solid var(--accent);
}
.site-page {
  --muted:#6a706b;
}
.site-page #focus .focusrow {
  background:transparent;
  border:0;
  border-top:1px solid var(--ink);
  border-radius:0;
  box-shadow:none;
  padding:22px 0 26px;
}
.site-page #focus .focusrow .focus-photo,.site-page #focus .focusrow:nth-child(2) .focus-photo {
  border-radius:6px;
}
.site-page #focus .focusrow>.mono:before {
  border-radius:0;
  box-shadow:none;
  width:7px;
  height:7px;
}
.site-page #approach .step>span,.site-page #approach .step:nth-child(2)>span,.site-page #approach .step:nth-child(3)>span {
  width:40px;
  height:40px;
  border:0;
  border-radius:5px;
  background:var(--ink);
  color:var(--accent);
  box-shadow:none;
  font-size:13px;
}
.site-page #cases .use-case-card {
  background:#fff;
  border:1px solid var(--line);
  border-top:2px solid var(--ink);
  border-radius:6px;
  box-shadow:none;
}
.site-page #cases .use-case-card:hover {
  border-color:#b7bcb1;
  border-top-color:var(--ink);
}
.site-page #focus .focusrow:hover {
  background:transparent;
}
.site-page #focus .focusrow p,.site-page #cases .use-case-card>p {
  color:var(--muted-foreground);
}
.page-head .btn:focus-visible,.file-viewer-head .btn:focus-visible,.site-page .consult-close:focus-visible {
  outline-color:var(--accent);
}
.legacy-page .work-card:nth-child(n) .work-cover {
  background:#f6f7f3;
  border-bottom:1px solid var(--line);
}
.legacy-page .work-cover:after {
  display:none;
}
.legacy-page .work-icon {
  color:var(--ink);
}
.legacy-page .work-number {
  background:var(--accent);
  color:var(--ink);
  padding:4px 7px;
}
.legacy-page .hub-number {
  color:var(--muted-foreground);
}
.account-page .account-card p {
  word-break:keep-all;
  overflow-wrap:anywhere;
}

/* One masthead geometry for every route, including the account entry screen. */
:root {
  --brand-header-height:82px;
  --brand-header-gutter:max(24px,4vw);
  --brand-logo-width:138px;
}
html {
  scrollbar-gutter:stable;
}
.site-page>header,.portal-page>.topbar,.admin-page>.topbar,
.account-page>.header,.legacy-page>.header,.privacy-page>.privacy-header {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--brand-header-height);
  width:100%;
  max-width:none;
  margin:0;
  padding:12px var(--brand-header-gutter);
  gap:18px;
  background:#fff;
  border-bottom:1px solid var(--border);
}
body:is(.site-page,.portal-page,.admin-page,.account-page,.legacy-page,.privacy-page)>header>a:first-child {
  display:flex;
  flex:none;
  align-items:center;
}
body:is(.site-page,.portal-page,.admin-page,.account-page,.legacy-page,.privacy-page)>header>a:first-child img {
  display:block;
  flex:none;
  width:var(--brand-logo-width);
  height:auto;
}
@media(max-width:760px) {
  :root {
    --brand-header-height:72px;
    --brand-header-gutter:22px;
    --brand-logo-width:112px;
  }
  .site-page>header nav {
    gap:16px;
  }
  .site-page>header nav>a[href="/account/"] {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    white-space:nowrap;
    font-size:12px;
  }
}
@media(max-width:380px) {
  .site-page>header nav>.contact {
    display:none;
  }
}
