@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
/* Same accent endpoints as the homepage CTA gradient in header.css. */
:root { color-scheme: light; --ink:#191b23; --muted:#686b78; --purple:#8d5fff; --mint:#72ead5; --line:#e6e7ed; --paper:#f6f7fa; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 82% 8%,rgba(123,92,255,.07),transparent 28rem),radial-gradient(circle at 30% 55%,rgba(114,230,208,.14),transparent 38rem),#fbfcfb; color:var(--ink); font:14px/1.6 Inter, sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.6; }
:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:Manrope,Inter,sans-serif; }
h1 { font-size:clamp(28px,3.1vw,42px); font-weight:600; line-height:1.2; letter-spacing:-.045em; }
h2 { font-size:19px; font-weight:700; line-height:1.4; letter-spacing:-.025em; }
small { font-size:11px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.brand { display:block; width:100%; min-width:0; }
.brand-image { display:block; width:100%; height:auto; aspect-ratio:1145 / 190; overflow:hidden; }
.brand-lockup { display:block; }
.brand-subtitle { display:block; margin-top:-1px; color:#f6f4ff; font-size:clamp(7px, .7vw, 10px); letter-spacing:.24em; line-height:1.2; text-align:center; white-space:nowrap; }
.portal-shell { display:grid; grid-template-columns:242px minmax(0,1fr); min-height:100vh; }
.sidebar { background:radial-gradient(circle at 0 90%,rgba(114,230,208,.12),transparent 22rem),radial-gradient(circle at 100% 5%,rgba(123,92,255,.12),transparent 22rem),#0b0e14; color:#fff; padding:30px 24px 24px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.workspace { border:1px solid #303138; border-radius:12px; padding:14px 12px; margin:43px 0 30px; display:flex; align-items:center; gap:12px; }
.workspace small { display:block; font-size:8px; letter-spacing:.12em; color:#a9aab6; }
.workspace strong { display:block; font-size:13px; margin-top:3px; }
.avatar { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; background:#e9e0fa; color:#5c468e; border-radius:11px; font-size:12px; font-weight:700; }
.avatar.small { width:32px; height:32px; border-radius:50%; font-size:10px; }
.portal-nav { display:grid; gap:8px; }
.portal-nav a { display:flex; align-items:center; gap:12px; border-radius:9px; padding:12px; font-size:13px; color:#b8b9c3; }
.portal-nav a>span:first-child { font-size:20px; line-height:1; }
.portal-nav a[aria-current] { color:#f3edff; background:#2a223d; box-shadow:inset 3px 0 #bba5fa; }
.portal-nav a:hover { background:#24232d; color:#fff; }
.nav-count { margin-left:auto; padding:0 6px; background:#34323e; border-radius:4px; font-size:10px; }
.sidebar-bottom { margin-top:auto; padding-top:40px; }
.sidebar-bottom p { font-size:12px; }
.sidebar-bottom small { color:#aaa9b8; font-size:9px; }
.sidebar-bottom a { display:block; border-top:1px solid #2e2e36; margin-top:24px; padding-top:18px; font-size:12px; color:#c8c9d1; }
.portal-topbar { padding:21px 40px; min-height:78px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; color:var(--muted); }
.portal-topbar strong { color:var(--ink); font-weight:500; }
.topbar-divider { margin:0 12px; color:#bbb; }
.topbar-actions { display:flex; align-items:center; gap:24px; }
.language { display:flex; gap:4px; }
.language a { display:grid; place-items:center; min-width:36px; min-height:34px; border:1px solid var(--mint); border-radius:6px; font-size:11px; font-weight:600; }
.topbar-actions > .avatar { border:1px solid var(--mint); background:rgba(141,95,255,.12); color:#5634d8; }
.language a[aria-current] { background:rgba(114,234,213,.16); color:#071019; }
.login-header .language a[aria-current] { color:var(--mint); }
.demo-notice { display:flex; align-items:flex-start; gap:12px; padding:14px 40px; border-bottom:1px solid #e5def4; background:#f0ecf8; color:#5d507d; font-size:11px; }
.demo-notice strong { font-weight:600; }
.demo-notice p { margin-top:2px; }
.notice-dot { display:inline-block; width:7px; height:7px; background:#8061c8; border-radius:50%; flex-shrink:0; margin-top:6px; }
.portal-main { max-width:1350px; margin:auto; padding:28px 32px 20px; }
.page-heading { margin-bottom:28px; }
.page-heading .eyebrow { color:var(--muted); margin-bottom:10px; }
.page-heading>p:last-child { color:var(--muted); margin-top:12px; font-size:13px; }
.overview-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; min-width:0; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.tag { display:inline-block; border-radius:5px; padding:4px 8px; background:#eee8fb; color:#6745a2; font-size:10px; font-weight:600; }
.tag.mint { background:#e1f5ec; color:#2a6855; }
.project-highlight { background:#eeeafa; border-color:#e5dff4; position:relative; overflow:hidden; }
.project-highlight h2 { font-size:25px; max-width:310px; margin:22px 0 8px; position:relative; z-index:1; }
.project-highlight>p { color:#6c5e85; }
.project-highlight .eyebrow { color:#6a558b; }
.project-highlight .tag { background:#fff9; }
.progress-label { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#655b76; margin:27px 0 8px; position:relative; z-index:1; }
progress { appearance:none; width:100%; height:6px; border:0; border-radius:5px; display:block; background:#ddd6ed; accent-color:var(--purple); }
progress::-webkit-progress-bar { background:#ddd6ed; border-radius:5px; }
progress::-webkit-progress-value { background:var(--purple); border-radius:5px; }
progress::-moz-progress-bar { background:var(--purple); border-radius:5px; }
.text-link { display:inline-flex; align-items:center; gap:18px; font-weight:600; font-size:12px; padding:10px 0; }
.project-highlight .text-link { margin-top:14px; }
.project-spark { position:absolute; right:22px; top:62px; font-size:135px; line-height:1; color:#d5cbed; transform:rotate(15deg); }
.milestone { position:relative; }
.milestone .eyebrow { color:var(--muted); }
.date-tile { display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; width:55px; height:63px; font:600 26px/1 Manrope,sans-serif; margin:22px 0 18px; background:#fafafa; }
.date-tile small { font:600 9px Inter,sans-serif; letter-spacing:.08em; color:var(--muted); }
.milestone>p:not(.eyebrow) { margin-top:8px; color:#7052ba; font-size:12px; }
.milestone>small { display:block; margin-top:12px; color:var(--muted); }
.mini-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#ede8fa; color:#7153b6; font-size:19px; }
.update-card>p,.your-turn>p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.8; }
.author { display:flex; gap:10px; align-items:center; margin-top:22px; color:var(--muted); }
.your-turn { background:#edf8f3; border-color:#d7e9df; }
.your-turn .eyebrow { color:#37745d; }
.your-turn .notice-dot { background:#4e9a79; margin:0 4px 0 0; }
.your-turn h2 { margin:14px 0 10px; }
.secondary { display:inline-flex; align-items:center; justify-content:center; gap:18px; border-radius:9px; padding:12px 17px; min-height:44px; border:1px solid transparent; font-weight:600; font-size:12px; line-height:1.5; }
/* The actual gradient, shape, typography and hover come from header.css .cta-button. */
.primary { min-width:0; max-width:100%; border:0; text-align:center; }
.primary:disabled { box-shadow:none; transform:none; }
.your-turn .primary { margin-top:20px; }
.secondary { background:white; color:var(--ink); border-color:#dcdde4; }
.secondary:hover { background:#f1edf8; }
.bottom-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-top:20px; }
.activity { padding:0; margin:15px 0 0; list-style:none; }
.activity li { display:flex; align-items:center; gap:12px; padding:13px 0; }
.activity li+li { border-top:1px solid var(--line); }
.activity li>span:last-child { margin-left:auto; color:var(--muted); }
.activity strong { display:block; font-size:12px; font-weight:500; }
.activity small { display:block; color:var(--muted); margin-top:3px; }
.activity-dot { width:7px; height:7px; border-radius:50%; background:#9175d3; }
.activity-dot.muted { background:#93c3b0; }
.support-callout { padding:26px 12px; }
.callout-star { color:#8464c5; font-size:30px; line-height:1; display:block; margin-bottom:12px; }
.support-callout p { margin:10px 0 8px; color:var(--muted); font-size:12px; }
.portal-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; color:var(--muted); font-size:10px; margin-top:35px; border-top:1px solid var(--line); padding-top:15px; }
.portal-footer .status { flex-basis:100%; margin:0; }
.quiet { border:0; background:transparent; padding:10px 0; color:#694ca3; font-size:11px; min-height:38px; text-align:left; }
.quiet:hover { text-decoration:underline; }
.timeline { list-style:none; padding:8px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.timeline li { min-width:0; border-top:2px solid #e8e6ef; padding-top:8px; color:var(--muted); font-size:11px; }
.timeline .reached { border-color:#9272d8; }
.timeline strong { color:var(--ink); font-size:12px; }
.step-number { display:grid; place-items:center; width:30px; height:30px; background:#f0edf5; border-radius:50%; color:#7255a6; font-weight:600; margin-bottom:6px; }
.project-grid,.support-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:20px; margin-top:20px; align-items:start; }
.muted-copy { font-size:12px; color:var(--muted); margin:12px 0 20px; }
.material-list { margin:22px 0; }
.material { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.material>div { flex:1; min-width:110px; }
.material strong { display:block; font-size:12px; }
.material small { display:block; color:var(--muted); font-size:10px; }
.file-icon { display:grid; place-items:center; background:#f2eef9; color:#7a60af; border-radius:8px; height:36px; width:32px; font-size:20px; }
label { display:block; font-size:12px; font-weight:600; margin:20px 0 8px; }
input,select { display:block; width:100%; min-width:0; border:1px solid #d9dbe3; border-radius:8px; background:#fff; padding:13px 12px; color:var(--ink); font-size:13px; }
select { font-size:12px; text-overflow:ellipsis; }
select+.primary { margin-top:18px; width:100%; }
.status { color:#5a467e; font-size:12px; margin-top:14px; }
.status:empty { display:none; }
.feedback-result { border-left:3px solid #bba5e1; background:#f6f3fc; padding:15px; margin-top:20px; font-size:12px; }
.feedback-result small { color:var(--muted); }
.feedback-result p { margin-top:10px; }
.ticket { border-bottom:1px solid var(--line); }
.ticket summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:22px 0; cursor:pointer; list-style:none; }
.ticket summary::-webkit-details-marker { display:none; }
.ticket summary small { color:var(--muted); width:100%; }
.ticket summary strong { flex:1; font-size:12px; min-width:110px; }
.ticket>p { font-size:12px; color:var(--muted); padding-bottom:20px; line-height:1.9; }
.support-grid .mini-icon { margin-bottom:18px; }
dialog { border:1px solid var(--line); border-radius:18px; padding:28px; width:min(620px,calc(100% - 32px)); max-height:90vh; color:var(--ink); background:#fff; }
dialog::backdrop { background:#15132299; backdrop-filter:blur(4px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:15px; }
.design-preview { background:#efeee5; padding:35px; border-radius:10px; margin-top:20px; color:#304a3d; overflow:hidden; }
.design-preview>p:first-child { font-size:9px; letter-spacing:.14em; }
.design-preview h3 { font-size:42px; line-height:1.1; font-weight:500; max-width:250px; margin:35px 0 14px; }
.design-preview p { font-size:12px; }
.design-shapes { display:flex; gap:16px; height:100px; margin-top:32px; }
.design-shapes span { flex:1; background:#b9c9b3; border-radius:80px 80px 0 0; }
.design-shapes span:nth-child(2) { background:#b8acd3; border-radius:50%; }
.design-shapes span:nth-child(3) { background:#5f7e65; border-radius:0 0 80px 0; }
#document-preview { padding:30px; margin-top:20px; background:#f4f1fa; border-radius:10px; }
.skip { position:fixed; top:10px; left:10px; z-index:10; background:#fff; padding:12px; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }
.skip:focus { clip-path:none; width:auto; height:auto; }
.login-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px 6vw; background:radial-gradient(circle at 90% 20%,rgba(123,92,255,.12),transparent 30rem),linear-gradient(145deg,#07101a,#0b111a); color:#fff; }
.login-header .brand { width:280px; max-width:65%; }
.login-layout { display:grid; grid-template-columns:1.1fr 1fr; min-height:calc(100vh - 99px); }
.login-story { padding:55px 7vw 40px; color:#fff; background:radial-gradient(circle at 12% 80%,rgba(114,230,208,.2),transparent 28rem),radial-gradient(ellipse at 80% 90%,#2c2241,transparent 65%),#0b111a; display:flex; flex-direction:column; align-items:flex-start; }
.login-story .eyebrow { color:#bca8ea; }
.login-story h1 { font-size:clamp(34px,4vw,60px); margin:25px 0; }
.login-story>p:not(.eyebrow) { color:#b6b5c4; max-width:370px; font-size:14px; }
.back-link { color:#c8c5d1; font-size:12px; margin-top:auto; padding-top:25px; }
.login-art { position:relative; width:240px; height:210px; margin:35px auto; display:grid; place-items:center; }
.orbit { position:absolute; width:230px; height:140px; border:1px solid #625675; border-radius:50%; transform:rotate(-30deg); }
.art-tile { width:108px; height:120px; border:1px solid #88729c; border-radius:20px; display:grid; place-items:center; background:linear-gradient(135deg,#4f415f,#272033); color:#ddcdf2; font-size:46px; transform:rotate(-12deg); box-shadow:16px 20px 40px #0004; }
.art-tile>span { color:#b8efd9; font-size:76px; }
.art-dot { position:absolute; bottom:28px; left:24px; background:#b8efd9; width:14px; height:14px; border-radius:50%; }
.login-card { width:min(480px,calc(100% - 64px)); padding:32px; margin:42px auto; align-self:center; border:1px solid rgba(123,92,255,.09); border-radius:28px; background:rgba(255,255,255,.88); box-shadow:0 18px 55px rgba(41,45,63,.07),inset 0 1px 0 #fff; }
.login-card h2 { font-size:32px; margin:20px 0 14px; }
.login-card>p { font-size:13px; color:var(--muted); }
#login-button { width:100%; margin-top:25px; }
#customer-submit { width:50%; min-width:150px; margin:25px auto 0; }
.login-card .fine-print { font-size:11px; margin-top:15px; }
.login-demo { margin-top:30px; border-top:1px solid var(--line); padding-top:25px; font-size:12px; }
.login-demo a { display:inline-flex; gap:20px; margin:10px 0; color:#7252b2; font-weight:600; }
.login-demo small { display:block; color:var(--muted); font-size:10px; }
@media(min-width:1600px) { .portal-main { padding-top:48px; } }
@media(max-width:1150px) { .portal-shell { grid-template-columns:210px minmax(0,1fr); } .sidebar { padding:28px 18px; } .portal-main { padding:28px 24px 20px; } .portal-topbar,.demo-notice { padding-inline:24px; } .project-grid,.support-grid { grid-template-columns:1fr; } .card { padding:22px; } }
@media(max-width:800px) { .portal-shell { display:block; } .sidebar { position:static; height:auto; padding:20px 24px 14px; display:grid; grid-template-columns:1fr auto; gap:20px; } .sidebar .brand { font-size:18px; } .workspace { margin:0; padding:0; border:0; } .workspace .avatar { display:none; } .workspace small { font-size:7px; } .portal-nav { grid-column:1/-1; display:flex; gap:8px; } .portal-nav a { flex:1; justify-content:center; padding:10px 8px; font-size:12px; } .nav-count,.sidebar-bottom { display:none; } .portal-nav a[aria-current] { box-shadow:inset 0 -2px #bba5fa; } .portal-topbar { min-height:65px; padding-block:12px; } .login-story { padding:40px 30px; } .login-art { width:180px; } .orbit { width:180px; } }
@media(max-width:600px) { .portal-main { padding:26px 16px 16px; } .portal-topbar { padding-inline:16px; gap:10px; } .portal-topbar>span { font-size:10px; } .topbar-divider { margin:0 5px; } .topbar-actions { gap:8px; } .topbar-actions>.avatar { display:none; } .demo-notice { padding:14px 16px; font-size:10px; } .overview-grid,.bottom-grid { grid-template-columns:1fr; gap:16px; } .page-heading { margin-bottom:22px; } .page-heading>p:last-child { font-size:12px; } .project-highlight h2 { max-width:240px; font-size:24px; } .milestone .date-tile { float:right; margin:15px 0 0 12px; } .milestone h2 { margin-top:20px; } .milestone>small { clear:both; padding-top:8px; } .support-callout { padding:12px 8px; } .card { padding:22px; border-radius:14px; } .timeline { grid-template-columns:1fr 1fr; gap:25px 15px; } .sidebar { padding:18px 16px 12px; gap:18px 10px; } .sidebar .brand { font-size:16px; gap:10px; } .sidebar .brand small { font-size:6px; } .workspace strong { font-size:12px; } .portal-nav a { font-size:11px; gap:7px; } .portal-nav a>span:first-child { font-size:17px; } .login-header { padding:23px 24px; } .login-layout { display:block; } .login-story { padding:28px 24px 30px; } .login-story h1 { font-size:36px; margin:18px 0; } .login-story>p:not(.eyebrow) { font-size:13px; } .login-art { display:none; } .login-card { margin:36px auto; width:calc(100% - 48px); max-width:420px; } .login-card h2 { font-size:28px; } .login-header .brand { font-size:18px; } .login-header .brand small { font-size:6px; } dialog { padding:20px; } .design-preview { padding:24px; } .design-preview h3 { font-size:35px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }

/* Expanded prototype: compact overview, useful states and real interactive surfaces. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sidebar .brand { margin:4px 0 12px; }
.workspace { margin:28px 0 23px; }
.portal-nav a[aria-current] { background:linear-gradient(110deg,#1e413c,#302542); box-shadow:inset 3px 0 #72e6d0; color:#fff; }
.portal-topbar { background:rgba(255,255,255,.9); min-height:64px; padding-block:14px; }
.demo-notice { background:linear-gradient(105deg,#e6f6f0,#f0ecf8); padding-block:10px; }
.notice-dot { background:#428c76; }
#overview .page-heading { margin-bottom:20px; }
#overview .page-heading>p:last-child { margin-top:8px; }
.overview-grid { gap:16px; }
#overview .card { padding:20px; border-radius:18px; }
#overview .card-top { margin-bottom:12px; }
#overview .project-highlight { background:radial-gradient(circle at 85% 0%,#b9ead766,transparent 70%),linear-gradient(125deg,#f0ecfa,#e7f6f1); }
#overview .project-highlight h2 { font-size:23px; max-width:calc(100% - 55px); margin:12px 0 6px; }
#overview .project-highlight .progress-label { margin-top:17px; }
#overview .project-highlight .text-link { margin-top:5px; }
#overview .project-spark { font-size:95px; top:66px; right:16px; color:#83c7b580; }
#overview .milestone { background:linear-gradient(135deg,#fff,#f0faf5); }
#overview .date-tile { float:right; margin:15px 0 12px 12px; background:#e1f5ed; border-color:#cde5da; }
#overview .milestone h2 { margin-top:20px; }
#overview .milestone>small { clear:both; }
#overview .your-turn { background:linear-gradient(120deg,#dff6eb,#eff8f4); }
#overview .your-turn h2 { margin:10px 0 6px; }
#overview .your-turn>p:not(.eyebrow),#overview .update-card>p { font-size:12px; line-height:1.7; }
#overview .your-turn .primary { margin-top:14px; min-height:54px; font-size:1rem; padding:10px 20px; background:var(--portal-button); color:#fff; }
#overview .your-turn .primary .cta-arrow { color:inherit; }
#overview .author { margin-top:16px; }
.completed-overview { margin-top:16px; display:flex; gap:16px; align-items:center; border-color:#cee6db; background:linear-gradient(115deg,#ecfaf3,#f6f2fc); }
.completed-overview>div { flex:1; }
.completed-overview h2 { font-size:16px; margin:3px 0; }
.completed-overview p:last-child { font-size:11px; color:var(--muted); }
.completed-overview .eyebrow { color:#386f5c; font-size:9px; }
.completion-check { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#2f765c; background:#c8efdf; flex-shrink:0; font-size:18px; }
.bottom-grid { gap:16px; margin-top:16px; }
.bottom-grid h2 { font-size:16px; }
.activity { margin-top:8px; }
.activity li { padding:9px 0; }
.support-callout { padding:18px; }
.callout-star { color:#5cb69b; margin-bottom:7px; }
.interactive-card { position:relative; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.interactive-card:focus-within { outline:2px solid #7052d5; outline-offset:3px; }
.stretched-action::after { content:''; position:absolute; inset:0; border-radius:inherit; }
.phase-button { display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; height:100%; padding:13px; border:1px solid transparent; border-radius:12px; background:transparent; color:inherit; text-align:left; font:inherit; }
.phase-button[aria-pressed="true"] { background:linear-gradient(120deg,#e0f7ec,#eee8fa); border-color:#b7dacf; }
.phase-button .step-number { background:#e5f5ee; color:#30715d; }
.phase-detail { display:grid; grid-template-columns:1.2fr 1fr; gap:26px; padding:22px; background:#f4f9f6; border:1px solid #dfebe4; border-radius:12px; }
.phase-detail h3 { font-size:17px; margin:8px 0; }
.phase-detail p:not(.eyebrow),.phase-detail li { color:#56675e; font-size:12px; }
.phase-detail ul { padding-left:18px; margin:0 0 8px; }
.phase-detail li { padding:3px 0; }
.project-workspace { display:grid; grid-template-columns:1.25fr 1fr; align-items:start; gap:20px; margin-top:20px; }
.project-workspace>div { display:grid; gap:20px; min-width:0; }
.design-card .card-top { align-items:flex-start; flex-wrap:wrap; }
.design-card .muted-copy { margin-bottom:0; }
.design-thumbnail { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; text-align:left; width:100%; padding:25px; border:1px solid #d9dfcf; border-radius:12px; background:#efeee5; color:#304a3d; }
.design-thumb-copy { display:flex; flex-direction:column; gap:13px; }
.design-thumb-copy small { font-size:8px; letter-spacing:.1em; }
.design-thumb-copy strong { font:500 30px/1.12 Manrope,sans-serif; letter-spacing:-.04em; }
.design-thumb-copy>span { font-size:10px; }
.design-thumb-art { display:flex; align-items:flex-end; gap:9px; }
.design-thumb-art i { flex:1; height:105px; border-radius:70px 70px 0 0; background:#9cc4ad; }
.design-thumb-art i:nth-child(2) { height:150px; border-radius:60px; background:#baaed1; }
.design-thumb-art i:nth-child(3) { background:#50745d; height:80px; border-radius:0 0 45px 0; }
.design-thumb-open { grid-column:1/-1; font-size:11px; font-weight:600; }
.approval-block { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.approval-block>p:first-child { font-size:12px; color:var(--muted); margin-bottom:15px; }
.approval-block .primary { width:100%; }
.document-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.document-card { display:flex; flex-direction:column; background:linear-gradient(145deg,#fff,#f2fbf6); }
.document-card>.file-icon { width:42px; height:46px; margin-bottom:22px; background:#d9f3e8; color:#347d64; }
.document-card>.eyebrow { color:#6c7370; font-size:9px; margin-bottom:10px; }
.document-card>p:not(.eyebrow) { color:var(--muted); font-size:12px; }
.document-card .muted-copy { margin-top:8px; }
.document-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:24px; margin-top:auto; }
#document-preview h3 { margin:22px 0 8px; font-size:16px; }
#document-preview p { margin:12px 0; font-size:13px; line-height:1.8; }
#document-preview small { color:var(--muted); }
.dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.dialog-actions .primary { font-size:1rem; min-height:54px; padding:12px 20px; }
.completion-strip { display:flex; align-items:center; gap:16px; padding:20px 24px; border:1px solid #cce5d8; border-radius:16px; background:linear-gradient(110deg,#dcf4e8,#f1f8f4); }
.completion-strip>.tag { margin-left:auto; }
.completion-strip p { font-size:12px; color:#487563; }
.delivery-list { padding:0; margin:22px 0 28px; list-style:none; }
.delivery-list li { display:flex; gap:12px; padding:12px 0; font-size:13px; border-bottom:1px solid var(--line); }
.delivery-list li span { color:#438b70; }
.guide { border-bottom:1px solid var(--line); }
.guide summary { display:flex; align-items:center; gap:12px; padding:20px 0; list-style:none; cursor:pointer; }
.guide summary::-webkit-details-marker { display:none; }
.guide summary>span:nth-child(2) { flex:1; }
.guide strong { display:block; font-size:13px; }
.guide small { display:block; color:var(--muted); }
.guide>p,.guide li { color:var(--muted); font-size:12px; }
.guide ol { padding-left:22px; }
.guide li { padding:5px 0 8px 5px; }
.guide .status { color:#39705b; margin-bottom:15px; }
.ticket .secondary { margin-bottom:15px; }
.ticket .status { color:#4c7765; }
.status:not(:empty) { padding:12px 14px; border:1px solid #d2e8dc; border-radius:9px; background:#edf8f2; color:#355c4b; }
.login-card .primary { width:100%; }
.portal-footer .status:not(:empty) { flex-basis:100%; }
@media(hover:hover) and (pointer:fine) {
  .interactive-card:hover { transform:scale(1.012); box-shadow:0 14px 32px rgba(41,45,63,.12),0 3px 9px rgba(114,230,208,.1); z-index:1; }
}
@media(max-width:1150px) {
  .project-workspace { grid-template-columns:1fr; }
  .document-grid { grid-template-columns:1fr; }
  .sidebar .brand { min-width:0; }
}
@media(max-width:800px) {
  .sidebar { grid-template-columns:minmax(0,1fr) auto; }
  .sidebar .brand { width:200px; max-width:100%; margin:0; }
  .workspace { margin:0; }
  .portal-nav { display:flex; overflow-x:auto; padding-bottom:5px; scrollbar-width:thin; scrollbar-color:#71bda7 #1c2526; }
  .portal-nav a { flex:0 0 auto; min-height:44px; white-space:nowrap; }
  .phase-detail { grid-template-columns:1fr; gap:12px; }
}
@media(max-width:600px) {
  .login-header .brand { width:220px; }
  .login-card { padding:24px; width:calc(100% - 32px); }
  .login-card .primary { font-size:1rem; }
  .sidebar .brand { width:180px; }
  .workspace { max-width:90px; }
  .overview-grid .card { padding:18px; }
  #overview .project-highlight h2 { font-size:22px; }
  .completed-overview { flex-wrap:wrap; gap:12px; }
  .completed-overview>div { min-width:150px; }
  .completed-overview h2 { font-size:15px; }
  .timeline { gap:14px 8px; }
  .phase-button { padding:10px; }
  .phase-detail { padding:16px; }
  .primary { padding:12px 18px; min-height:54px; font-size:1rem; gap:14px; }
  .design-thumbnail { padding:18px; gap:12px; }
  .design-thumb-copy strong { font-size:25px; }
  .design-thumb-art { gap:5px; }
  .completion-strip { flex-wrap:wrap; padding:18px; }
  .completion-strip>.tag { margin-left:0; }
  .document-grid { gap:16px; }
}
@media(hover:none), (pointer:coarse) {
  .primary:hover { transform:none; box-shadow:0 12px 30px rgba(123,92,255,.18); }
  .primary:hover .cta-arrow { transform:none; }
  .interactive-card { transition:none; }
}
@media(prefers-reduced-motion:reduce) {
  .interactive-card,.primary,.primary .cta-arrow { transition:none !important; }
  .interactive-card:hover,.primary:hover,.primary:hover .cta-arrow { transform:none !important; }
}

/* A calm, unified button palette inside the demo; the login keeps its own styling. */
body[data-page="portal"] { --portal-button:#675185; --portal-button-hover:#55416f; }
body[data-page="portal"] :is(button,.primary,.language a) {
  background:var(--portal-button);
  color:#fff;
  border-color:var(--portal-button);
}
body[data-page="portal"] .cta-arrow { color:inherit; }
body[data-page="portal"] button.quiet { padding-inline:13px; border-radius:9px; text-decoration:none; }
body[data-page="portal"] .primary { box-shadow:0 8px 22px rgba(85,65,111,.16); }
body[data-page="portal"] .language a { border-color:var(--mint); }
body[data-page="portal"] .language a[aria-current] { background:var(--portal-button-hover); box-shadow:inset 0 0 0 1px var(--mint); }
body[data-page="portal"] .phase-button strong { color:inherit; }
body[data-page="portal"] .phase-button[aria-pressed="true"] { background:var(--portal-button-hover); border-color:#cdbce4; box-shadow:inset 0 0 0 1px #cdbce4; }
body[data-page="portal"] .phase-button .step-number { background:#e8dff2; color:#55416f; }
body[data-page="portal"] .portal-nav a[aria-current] { background:var(--portal-button-hover); }
body[data-page="portal"] button:disabled { background:#e5dfed; color:#6a6176; border-color:#d7cede; opacity:1; box-shadow:none; }
@media(hover:hover) and (pointer:fine) {
  body[data-page="portal"] :is(button,.primary,.language a):not(:disabled):hover,
  #overview .your-turn .primary:hover { background:var(--portal-button-hover); color:#fff; }
  body[data-page="portal"] .primary:hover { box-shadow:0 12px 28px rgba(85,65,111,.24); }
}

/* Multiple project types use the existing cards, surfaces and controls. */
.customer-phase { cursor:default; }
.customer-phase[aria-current="step"] { background:#f0e9f7; border-color:#675185; }
body[data-customer-page="projects"] .project-workspace>.card { align-self:start; }
@media(max-width:600px) {
  body[data-customer-page="projects"] .portal-topbar { flex-wrap:wrap; gap:12px; }
  body[data-customer-page="projects"] .topbar-actions { flex-wrap:wrap; }
}
.overview-projects,.project-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#overview .project-summary { display:flex; flex-direction:column; }
#overview .project-summary h2 { max-width:none; font-size:21px; margin:10px 0 18px; }
#overview .project-summary .summary-next-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
#overview .project-summary .summary-next { font-size:13px; color:var(--ink); margin:5px 0 12px; flex:1; }
#overview .project-summary>small { color:var(--muted); }
#overview .project-summary .progress-label { margin-top:18px; }
.multi-overview { margin-top:16px; }
.project-updates li { padding-block:13px; }
.project-updates small { font-size:12px; line-height:1.6; }
.next-steps { list-style:none; padding:0; margin:8px 0 16px; }
.next-steps li+li { border-top:1px solid #d4e7dd; }
.next-steps .text-link { display:flex; justify-content:space-between; gap:12px; }
.next-steps strong,.next-steps small { display:block; }
.next-steps small { color:var(--muted); font-size:11px; font-weight:400; margin-top:4px; }
.project-choice { display:flex; flex-direction:column; gap:10px; padding:18px; }
.project-choice small { color:var(--muted); }
.project-choice strong { font:700 16px/1.45 Manrope,sans-serif; }
.project-choice span { color:#675185; font-size:11px; margin-top:auto; }
.project-choice[aria-current] { border-color:#675185; box-shadow:inset 0 0 0 1px #675185; background:#f4f0f9; }
.selected-project-heading { margin:28px 0 20px; }
.selected-project-heading h2 { font-size:clamp(24px,2.5vw,32px); }
.project-tasks { list-style:none; padding:0; margin:16px 0 0; }
.project-tasks li { padding:14px 0; border-top:1px solid var(--line); }
.project-tasks p { font-size:13px; margin-bottom:12px; }
.project-context { max-width:520px; margin-bottom:20px; }
.selected-context { font-size:12px; color:var(--muted); margin-bottom:20px; }
#documents .document-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.document-thumbnail { grid-template-columns:1fr; }
.document-thumbnail .design-thumb-copy strong { font-size:26px; }
.review-points { display:grid; gap:8px; font-size:12px; }
.review-points>span { padding:9px 12px; background:rgba(255,255,255,.12); border-radius:8px; }
#preview-project { max-width:65%; }
@media(max-width:1100px) {
  .overview-projects { grid-template-columns:1fr; }
  #overview .project-summary h2 { margin-bottom:10px; }
  .project-picker { gap:10px; }
  .project-choice { padding:14px; }
  .project-choice strong { font-size:14px; }
}
@media(max-width:600px) {
  .project-picker,#documents .document-grid { grid-template-columns:1fr; }
  .project-choice { gap:5px; }
  .project-choice strong { font-size:16px; }
  .selected-project-heading { margin-top:24px; }
  #preview-project { max-width:100%; }
  .dialog-top { flex-wrap:wrap; gap:8px; }
}