:root {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #202b26;
  background: #f6f6f1;
  font-synthesis: none;
  --muted: #68716b;
  --green: #267b50;
  --line: #dce1d9;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #438664; outline-offset: 5px; }
input:focus { outline: 0; border-color: #438664; box-shadow: 0 0 0 3px #4386641c; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, p, figure { margin: 0; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 10; top: 10px; left: 10px; padding: 12px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.page-shell { max-width: 1440px; margin: auto; padding: 0 64px; min-height: 100dvh; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 32px 0; }
.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-symbol { width: 44px; height: 48px; background: #203c2d; color: #dfc38b; display: grid; place-items: center; border-radius: 13px; }
.brand-symbol svg { width: 28px; height: 28px; }
.brand-name { font-size: 18px; font-weight: 750; letter-spacing: 2px; }
.brand-name > span { display: block; color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .2px; margin-top: 6px; }
.header-login { display: flex; align-items: center; gap: 14px; border: 1px solid #ccd4c9; border-radius: 99px; background: transparent; padding: 12px 19px; font-size: 13px; font-weight: 600; color: #263a2e; }
.header-login svg { width: 18px; height: 18px; }
.header-login:hover { background: #e9ede4; }
main { flex: 1; }
.hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: 65px; align-items: center; padding: 40px 0 64px; }
.eyebrow { font-size: 11px; font-weight: 600; color: #4a6353; letter-spacing: 1px; margin-bottom: 26px; display: flex; align-items: center; gap: 8px; }
.eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #2d8355; }
h1 { font-size: clamp(46px, 5.7vw, 78px); line-height: 1.07; font-weight: 650; letter-spacing: -3.6px; }
h1 > span { color: var(--green); }
.hero-description { margin-top: 25px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.primary-action { background: #233d2d; color: white; border: 1px solid #233d2d; border-radius: 11px; display: flex; align-items: center; gap: 35px; padding: 17px 21px; margin-top: 31px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px #18382414; }
.primary-action:hover, .login-submit:hover { background: #31553c; }
.primary-action > span { font-size: 23px; font-weight: 400; line-height: 1; }
.access-note { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; margin-top: 15px; }
.access-note svg { width: 13px; height: 13px; }
.workspace-art { position: relative; min-height: 429px; overflow: hidden; border-radius: 25px; color: #e8eee5; background: radial-gradient(ellipse at 65% 45%, #304c39 0, #23392c 42%, #17281e 95%); box-shadow: 0 20px 45px #203e2213; }
.workspace-art::after { content: ""; pointer-events: none; position: absolute; inset: 0; background-image: linear-gradient(#c4d8bd04 1px, transparent 1px), linear-gradient(90deg, #c4d8bd04 1px, transparent 1px); background-size: 24px 24px; }
.art-heading { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: 27px 27px 0; color: #b7c9b9; font-size: 9px; letter-spacing: 1.4px; }
.art-status { display: flex; align-items: center; gap: 7px; color: #d0dbc9; font-size: 8px; }
.art-status i { width: 5px; height: 5px; border-radius: 50%; background: #a9c896; box-shadow: 0 0 10px #a9c89644; }
.pitch { position: absolute; width: 218px; height: 273px; top: 80px; left: calc(50% - 109px); border: 1px solid #b0caaf24; border-radius: 4px; transform: rotate(-13deg); }
.pitch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #b0caaf24; }
.pitch-center { width: 70px; height: 70px; border: 1px solid #b0caaf24; border-radius: 50%; position: absolute; top: calc(50% - 35px); left: calc(50% - 35px); }
.pitch-box { width: 106px; height: 42px; border: 1px solid #b0caaf24; position: absolute; left: 55px; }
.pitch-box-top { top: -1px; }
.pitch-box-bottom { bottom: -1px; }
.pitch-point { width: 8px; height: 8px; border-radius: 50%; position: absolute; background: #c8dbba; box-shadow: 0 0 0 6px #c8dbba0b, 0 0 20px #c8dbba15; }
.point-one { top: 29px; left: 38px; }
.point-two { top: 161px; right: 27px; }
.point-three { bottom: 36px; left: 24px; }
.art-focus { position: absolute; top: 168px; left: calc(50% - 37px); width: 74px; height: 80px; border: 1px solid #d9c39375; background: #294533; color: #e2c994; border-radius: 19px; display: grid; place-items: center; box-shadow: 0 12px 24px #12231780, 0 0 0 9px #c7d4ae04; transform: rotate(-6deg); }
.art-focus svg { width: 44px; height: 44px; stroke-width: 1.4; }
.art-tag { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; border: 1px solid #91ab813e; background: #314b38; border-radius: 8px; padding: 11px 12px; box-shadow: 0 8px 18px #0e211b44; font-size: 11px; color: #e5ecdf; white-space: nowrap; }
.tag-dot { height: 5px; width: 5px; border-radius: 50%; background: #b8d39e; }
.tag-context { top: 105px; left: 24px; transform: rotate(-4deg); }
.tag-signals { top: 200px; right: 20px; transform: rotate(3deg); }
.tag-market { bottom: 91px; left: 42px; transform: rotate(-2deg); }
.tag-market .tag-dot { background: #d5bb83; }
figcaption { position: absolute; z-index: 1; bottom: 26px; left: 27px; right: 27px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #9cb28e2c; padding-top: 18px; font-size: 12px; color: #c4d1bd; }
figcaption > span:last-child { font-size: 19px; }
.workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--line); padding: 30px 0 34px; }
.workflow > div { position: relative; padding-left: 34px; }
.step-number { position: absolute; left: 0; top: 2px; font-size: 10px; color: #5e7a62; font-weight: 600; }
.workflow h2 { font-size: 13px; font-weight: 600; }
.workflow p { font-size: 11px; margin-top: 8px; line-height: 1.7; color: var(--muted); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 21px 0 25px; font-size: 10px; color: #697368; }
.footer-divider { margin: 0 8px; color: #a0a99b; }

dialog { padding: 30px 34px 25px; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid #e7e9e1; border-radius: 22px; color: #202b26; background: #fffefa; box-shadow: 0 24px 90px #13251d45; }
dialog::backdrop { background: #1b2b2499; backdrop-filter: blur(7px); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.dialog-brand { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 750; letter-spacing: 1.7px; }
.mini-symbol { width: 27px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #233d2d; color: #e0c793; font-size: 19px; letter-spacing: 0; }
.icon-button { display: grid; place-items: center; width: 35px; height: 35px; border: 0; background: #f0f2eb; border-radius: 50%; color: #687568; }
.icon-button:hover { background: #e5e9df; }
.icon-button svg { width: 17px; height: 17px; }
dialog h2 { font-size: 30px; font-weight: 650; letter-spacing: -1px; }
#login-description { margin-top: 9px; font-size: 13px; line-height: 1.7; color: var(--muted); }
#login-form { margin-top: 28px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.form-field input { width: 100%; height: 48px; border: 1px solid #d2dacf; border-radius: 9px; background: #fffefa; padding: 12px 13px; font-size: 14px; color: #202b26; }
.form-field input::placeholder { color: #8a9287; }
.form-field input[aria-invalid="true"] { border-color: #b75b4a; }
.password-control { position: relative; }
.password-control input { padding-right: 48px; }
.password-toggle { position: absolute; top: 3px; right: 3px; width: 42px; height: 42px; background: transparent; color: #798373; border: 0; border-radius: 7px; display: grid; place-items: center; }
.password-toggle:hover { background: #edf0e8; }
.password-toggle svg { width: 20px; height: 20px; }
.eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.field-error, .caps-note { font-size: 11px; margin-top: 7px; line-height: 1.5; }
.field-error { color: #a94437; }
.caps-note { color: #806931; }
.login-submit { display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%; background: #233d2d; color: white; border: 0; min-height: 48px; border-radius: 9px; font-size: 14px; font-weight: 600; margin-top: 27px; }
.login-submit > span { font-size: 20px; font-weight: 400; line-height: 1; }
.form-status { color: #516854; background: #edf3e8; border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.6; margin-top: 14px; }
.dialog-footer { display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); padding-top: 24px; margin-top: 24px; border-top: 1px solid #e5e9df; }
.dialog-footer svg { width: 13px; height: 13px; }
@media (max-width: 1150px) {
  .page-shell { padding: 0 38px; }
  .hero { gap: 34px; padding-top: 28px; }
  h1 { font-size: 62px; letter-spacing: -3px; }
  .workspace-art { min-height: 403px; }
  .art-tag { font-size: 10px; padding: 10px; }
  .tag-context { left: 15px; }
  .tag-signals { right: 14px; }
  .tag-market { left: 27px; }
  .workflow { gap: 24px; }
}
@media (max-width: 800px) {
  .page-shell { padding: 0 26px; }
  .hero { gap: 30px; }
  h1 { font-size: 48px; letter-spacing: -2.2px; }
  .hero-description { font-size: 13px; }
  .desktop-break { display: none; }
  .primary-action { font-size: 12px; gap: 15px; padding: 15px; }
  .workspace-art { min-height: 375px; }
  .pitch { transform: rotate(-13deg) scale(.88); top: 60px; }
  .art-focus { top: 155px; }
  .tag-context { top: 99px; }
  .tag-signals { top: 230px; }
  .tag-market { bottom: 106px; left: 14px; }
  .workflow { gap: 17px; }
  .workflow > div { padding-left: 26px; }
}
@media (max-width: 640px) {
  .page-shell { padding: 0 22px; }
  .site-header { padding: 23px 0; gap: 15px; }
  .brand { gap: 9px; }
  .brand-symbol { width: 33px; height: 37px; border-radius: 10px; }
  .brand-symbol svg { width: 22px; height: 22px; }
  .brand-name { font-size: 14px; letter-spacing: 1.5px; }
  .brand-name > span { display: none; }
  .header-login { padding: 10px 13px; font-size: 11px; gap: 8px; }
  .header-login svg { width: 15px; height: 15px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 35px; padding: 35px 0; }
  .eyebrow { font-size: 10px; margin-bottom: 23px; }
  h1 { font-size: clamp(46px, 12vw, 66px); line-height: 1.08; letter-spacing: -2.8px; }
  .hero-description { font-size: 14px; margin-top: 23px; max-width: 350px; }
  .primary-action { font-size: 13px; gap: 28px; padding: 16px 19px; margin-top: 26px; }
  .access-note { font-size: 10px; }
  .workspace-art { min-height: 340px; border-radius: 20px; }
  .art-heading { margin: 23px 22px 0; }
  .pitch { top: 45px; transform: rotate(-13deg) scale(.8); }
  .art-focus { top: 128px; width: 65px; height: 70px; left: calc(50% - 32px); }
  .art-focus svg { width: 39px; height: 39px; }
  .tag-context { top: 86px; left: 22px; }
  .tag-signals { top: 200px; right: 24px; }
  .tag-market { bottom: 103px; left: 25px; }
  figcaption { bottom: 22px; left: 22px; right: 22px; padding-top: 16px; font-size: 11px; }
  .workflow { grid-template-columns: 1fr; gap: 23px; padding: 26px 0; }
  .workflow > div { padding-left: 33px; }
  .workflow h2 { font-size: 13px; }
  .workflow p { margin-top: 5px; font-size: 12px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px 0 25px; line-height: 1.6; }
  dialog { padding: 24px; border-radius: 18px; width: calc(100vw - 32px); }
  .dialog-top { margin-bottom: 27px; }
  dialog h2 { font-size: 27px; }
  .form-field input { font-size: 16px; }
  .dialog-footer { font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  button, input, a { transition: background .16s, border-color .16s, box-shadow .16s; }
  dialog[open] { animation: enter .18s ease-out; }
  @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

/* GRAAL: neutral canvas, graphite, and lime accents. Original brand raster is unchanged. */
:root { --muted:#626b77; --green:#20252c; --line:#e1e5eb; --accent:#ceff00; color:#171b22; background:#f8f9fb; }
body { background:#f8f9fb; color:#171b22; -webkit-font-smoothing:antialiased; }
.page-shell { max-width:1400px; padding:0 clamp(24px,5vw,72px); }
.site-header { padding:28px 0; }
.brand { gap:18px; }
.graal-logo { display:block; width:238px; height:77px; border-radius:6px; background:#000; flex:none; }
.brand-caption { font-size:11px; color:#66717f; letter-spacing:.1px; max-width:105px; line-height:1.6; }
.header-login { border-color:#cdd3dc; color:#303b4a; border-radius:8px; padding:12px 16px; }
.header-login:hover { background:#eef1f5; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #637700; outline-offset:4px; }
.hero { gap:64px; padding:44px 0 64px; grid-template-columns:1.05fr 1fr; }
.eyebrow { color:#64717f; letter-spacing:1.2px; margin-bottom:25px; }
.eyebrow > span { background:#a0c200; width:7px; height:7px; }
h1 { color:#171b22; font-weight:700; font-size:clamp(46px,5.6vw,78px); letter-spacing:-3.5px; line-height:1.1; }
h1 > span { color:#171b22; background:linear-gradient(transparent 73%, #ceff00 73%, #ceff00 93%, transparent 93%); }
.hero-description { color:#626b77; font-size:15px; line-height:1.85; margin-top:24px; }
.primary-action, .login-submit { background:#20252c; border-color:#20252c; color:white; border-radius:8px; box-shadow:none; }
.primary-action { gap:30px; margin-top:28px; padding:17px 21px; }
.primary-action > span, .login-submit > span { color:#ceff00; }
.primary-action:hover, .login-submit:hover { background:#080a0d; border-color:#080a0d; }
.access-note { color:#6e7886; margin-top:15px; }
.workspace-art { background:#080a0d; color:#f1f4f9; border:1px solid #15191f; border-radius:18px; box-shadow:0 18px 45px #16233912; min-height:429px; }
.workspace-art::after { background-image:linear-gradient(#d9e3f209 1px,transparent 1px),linear-gradient(90deg,#d9e3f209 1px,transparent 1px); background-size:28px 28px; }
.art-heading { color:#9ea8b6; letter-spacing:1.3px; }
.art-status { color:#ceff00; }
.art-status i { background:#ceff00; box-shadow:none; }
.pitch, .pitch-center, .pitch-box { border-color:#76839245; }
.pitch::before { background:#76839245; }
.pitch-point { background:#ceff00; box-shadow:0 0 0 6px #ceff0010; }
.graal-symbol { background:#000; }
.art-focus.graal-symbol svg { width:88%; height:88%; }
.art-focus { width:104px; height:104px; left:calc(50% - 52px); top:157px; border-color:#ceff0060; border-radius:18px; box-shadow:0 14px 30px #0009; transform:rotate(-6deg); }
.art-tag { color:#e6edf6; border-color:#404a57; background:#1a2028; border-radius:7px; box-shadow:0 8px 24px #0004; padding:11px 13px; }
.tag-dot, .tag-market .tag-dot { background:#ceff00; }
.tag-context { top:100px; left:26px; }
.tag-signals { right:20px; }
figcaption { color:#a5afbd; border-color:#343c48; }
figcaption > span:last-child { color:#ceff00; }
.workflow { border-color:#dfe4eb; gap:34px; padding:30px 0 36px; }
.workflow > div { padding-left:42px; }
.step-number { background:#edf2df; color:#536c19; width:29px; height:25px; border-radius:5px; display:grid; place-items:center; }
.workflow h2 { color:#293442; font-size:13px; font-weight:650; }
.workflow p { color:#68727f; }
.site-footer { border-color:#dfe4eb; color:#737e8b; }
dialog { background:#fff; border-color:#dae0e8; border-radius:16px; color:#171b22; box-shadow:0 24px 90px #141e3633; }
dialog::backdrop { background:#10162091; }
.dialog-brand.graal-logo { width:143px; height:42px; border-radius:4px; }
.dialog-top { margin-bottom:24px; }
.icon-button { background:#f0f3f7; color:#687789; border-radius:7px; }
.icon-button:hover { background:#e3e8ef; }
.form-field input { background:#fff; border-color:#cbd3de; color:#222d3c; }
.form-field input::placeholder { color:#6e7a8a; }
.password-toggle { color:#637182; }
.dialog-footer { color:#687788; border-color:#e1e6ed; }
@media(max-width:1000px) {
  .hero { gap:32px; }
  .brand-caption { display:none; }
  h1 { font-size:clamp(44px,6vw,64px); letter-spacing:-2.5px; }
  .workspace-art { min-height:400px; }
}
@media(max-width:720px) {
  .page-shell { padding:0 22px; }
  .site-header { padding:20px 0; gap:14px; }
  .graal-logo { width:154px; height:45px; }
  .header-login { font-size:11px; padding:10px 12px; gap:8px; }
  .header-login svg { width:15px; height:15px; }
  .hero { grid-template-columns:1fr; gap:34px; padding:30px 0 36px; }
  h1 { font-size:clamp(44px,9vw,64px); letter-spacing:-2.4px; }
  .hero-description { font-size:14px; }
  .workspace-art { min-height:360px; }
  .art-focus { top:130px; }
  .pitch { top:50px; }
  .tag-context { top:77px; }
  .tag-signals { top:184px; }
  .tag-market { bottom:78px; }
  .workflow { grid-template-columns:1fr; gap:24px; padding:28px 0; }
  .workflow > div { padding-left:42px; }
  .site-footer { flex-wrap:wrap; font-size:10px; gap:10px; }
  dialog { padding:24px; border-radius:14px; }
}
@media(max-width:380px) { .page-shell { padding:0 16px; } .graal-logo { width:135px; height:40px; } .header-login { font-size:10px; padding:9px; } }