.home-workflow-demo {
    --hwd-ink: #211b35;
    --hwd-muted: #777286;
    --hwd-purple: #6b39f4;
    --hwd-line: #eae7f1;
    padding: 92px 0 64px;
    color: var(--hwd-ink);
    font-size: 14px;
    line-height: 1.5;
    background: radial-gradient(ellipse at 15% 68%, #eee8ff 0, transparent 44%), radial-gradient(ellipse at 93% 78%, #eaf0ff 0, transparent 40%), #fff;
    isolation: isolate;
}
.home-workflow-demo * { box-sizing: border-box; }
.home-workflow-demo > .container { max-width: 1320px !important; }
.home-workflow-demo svg { width: 20px; height: 20px; flex-shrink: 0; }
.home-workflow-demo button, .home-workflow-demo a { -webkit-tap-highlight-color: transparent; }
.home-workflow-demo button { font: inherit; cursor: pointer; }
.home-workflow-demo a { text-decoration: none; }
.home-workflow-demo button:focus-visible, .home-workflow-demo a:focus-visible, .hwd-panel:focus-visible { outline: 3px solid #9674ff; outline-offset: 4px; }
.home-workflow-demo h2, .home-workflow-demo h3, .home-workflow-demo h4, .home-workflow-demo p { margin: 0; letter-spacing: normal; }
.hwd-heading { max-width: 820px; margin: 0 auto 38px; text-align: center; }
.hwd-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #7c61b1; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; }
.hwd-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #8d61ff; box-shadow: 0 0 0 5px #f1ebff; }
.home-workflow-demo .hwd-heading h2 { margin: 18px 0 14px; font-size: clamp(30px, 3.15vw, 44px); font-weight: 600; line-height: 1.2; letter-spacing: -1.8px; color: var(--hwd-ink); }
.hwd-heading h2 > span { color: #7550cd; }
.home-workflow-demo .hwd-heading p { color: var(--hwd-muted); font-size: 15px; line-height: 1.8; }
.hwd-shell { display: grid; grid-template-columns: 28% minmax(0, 1fr); position: relative; border: 1px solid #ded7ef; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px -35px #5a398948, 0 3px 10px #211b3505; overflow: hidden; }
.hwd-sidebar { padding: 26px 18px 22px; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(150deg, #fdfbff 10%, #f7f3ff 65%, #f0ebfc); border-right: 1px solid #e8e2f2; }
.hwd-project { display: flex; align-items: center; gap: 11px; padding: 2px 9px 28px; min-width: 0; }
.hwd-project-mark { width: 40px; height: 40px; border-radius: 12px; background: #6b39f4; display: grid; place-items: center; box-shadow: 0 5px 10px #6b39f41c; flex-shrink: 0; }
.hwd-project-mark .hwd-logo { width: 24px; height: 24px; color: #fff; }
.hwd-project > div { min-width: 0; }
.hwd-project strong { display: block; font-size: 14px; line-height: 1.5; color: #332847; font-weight: 600; }
.hwd-project > div > span { display: block; font-size: 11px; color: #8b8399; }
.hwd-project-dot { width: 6px; height: 6px; background: #9b8ab7; border-radius: 50%; margin-left: auto; }
.hwd-tabs { display: flex; flex-direction: column; gap: 8px; }
.hwd-tab { position: relative; display: flex; width: 100%; gap: 12px; align-items: center; border: 1px solid transparent; border-radius: 15px; padding: 17px 13px; background: transparent; text-align: left; color: #83778f; transition: background .22s, color .22s, border-color .22s, box-shadow .22s; }
.hwd-tab:hover { background: #ffffffa6; color: #5e408c; }
.hwd-tab.is-active { background: #fff; border-color: #dfd2ff; box-shadow: 0 4px 16px #7140aa0c; color: #6b39f4; }
.hwd-tab.is-active::before { content: ''; position: absolute; left: -1px; width: 3px; height: 28px; border-radius: 0 3px 3px 0; background: #8656fa; }
.hwd-tab-icon { width: 35px; height: 38px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; transition: background .22s, transform .22s; }
.hwd-tab-icon svg { width: 23px; height: 23px; }
.hwd-tab.is-active .hwd-tab-icon { background: #f2edff; transform: translateY(-1px); }
.hwd-tab-copy { flex: 1; min-width: 0; }
.hwd-tab-copy strong { display: block; font-size: 14px; font-weight: 600; color: #51445e; margin-bottom: 4px; }
.hwd-tab.is-active .hwd-tab-copy strong { color: #6230d9; }
.hwd-tab-copy > span { display: block; font-size: 12px; line-height: 1.6; color: #83768f; max-width: 190px; }
.hwd-tab.is-active .hwd-tab-copy > span { color: #7b6f8d; }
.hwd-workspace { min-width: 0; background: #f8f8fc; }
.hwd-stage { position: relative; background: radial-gradient(ellipse at 75% 5%, #eeebf9 0, transparent 55%); }
.hwd-panel { padding: 26px; }
.hwd-panel[hidden] { display: none !important; }
.hwd-panel.is-entering { animation: hwd-panel-enter .36s cubic-bezier(.2,.8,.2,1) both; }
.hwd-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 22px; }
.hwd-kicker { display: block; font-size: 10px; letter-spacing: 1.15px; font-weight: 600; color: #8a789c; line-height: 1.6; }
.home-workflow-demo .hwd-panel-heading h3 { color: #342843; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.85px; margin-top: 5px; }
.hwd-tag { display: inline-flex; gap: 5px; align-items: center; font-size: 10px; font-weight: 500; white-space: nowrap; padding: 6px 9px; border: 1px solid #e7e2ef; border-radius: 7px; color: #7e698f; background: #ffffffa8; }
.hwd-tag svg { width: 12px; height: 12px; }
.hwd-tag--green { color: #34876a; background: #f0f9f4; border-color: #e0f0e6; }
.hwd-surface { background: #fff; border: 1px solid #e8e4ee; border-radius: 15px; box-shadow: 0 3px 8px #3a254004; }
.hwd-logo { display: inline-block; flex-shrink: 0; width: 165px; height: 26px; color: #6b39f4; background: currentColor; mask-position: center; mask-size: contain; mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; }
.hwd-logo--primary { mask-image: url('../images/home-demo/primary.svg'); -webkit-mask-image: url('../images/home-demo/primary.svg'); }
.hwd-logo--mark { width: 42px; height: 42px; mask-image: url('../images/home-demo/mark.svg'); -webkit-mask-image: url('../images/home-demo/mark.svg'); }
.hwd-logo--wordmark { width: 148px; height: 24px; mask-image: url('../images/home-demo/wordmark.svg'); -webkit-mask-image: url('../images/home-demo/wordmark.svg'); }
.hwd-logo--secondary { width: 120px; height: 76px; mask-image: url('../images/home-demo/secondary.svg'); -webkit-mask-image: url('../images/home-demo/secondary.svg'); }
/* The page owns vertical scrolling. Keep the tool list within reach. */
.hwd-shell { overflow: clip; }
.hwd-stage { height: auto; }
.hwd-panel { height: auto; overflow: visible; }
.hwd-sidebar { display: block; }
.hwd-sidebar-inner { position: sticky; top: 102px; }
.home-workflow-demo .hwd-panel-footnote { margin-top: 20px; color: #81778d; font-size: 11px; line-height: 1.7; text-align: center; }
.hwd-workspace-footer { min-height: 76px; padding: 18px 26px; background: #fff; border-top: 1px solid #e8e3ef; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.home-workflow-demo .hwd-workspace-footer p { color: #776985; font-size: 12px; line-height: 1.7; }
.hwd-workspace-footer > a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 17px; border-radius: 9px; color: #fff; background: #6b39f4; box-shadow: 0 4px 9px #6b39f41c; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background .2s, transform .2s; }
.hwd-workspace-footer > a:hover { background: #5924dd; color: #fff; transform: translateY(-1px); }
.hwd-workspace-footer > a svg { width: 15px; height: 15px; }

/* Review: same card structure, score palette and circular charts as the review. */
.home-workflow-demo .hwd-real-review { padding: 23px; border: 1px solid #e8e4ee; border-radius: 17px; background: #fff; box-shadow: none; }
.hwd-real-review .review-summary-main { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 23px; }
.hwd-real-review .review-card-logo-panel { min-height: 252px; padding: 22px; border: 1px solid #f0edf5; border-radius: 12px; background: #fff; }
.hwd-real-review .review-card-logo-panel .hwd-logo { width: 100%; height: 80px; }
.hwd-real-review .review-summary-content-col { padding: 0; }
.hwd-real-review .review-summary-intro-row { grid-template-columns: 84px minmax(0,1fr); gap: 17px; margin: 0 0 20px; }
.hwd-real-review .review-summary-intro-row .hero-overall-score { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; }
.hwd-real-review .hero-score-label { font-size: 10px; line-height: 1.5; margin-top: 9px; color: #747080; }
.hwd-real-review .review-summary-kicker { display: block; font-size: 10px; color: #8b8494; letter-spacing: .02em; line-height: 1.5; margin-bottom: 5px; }
.home-workflow-demo .hwd-real-review .review-summary-title { font-size: 24px; font-weight: 600; line-height: 1.2; color: #6b39f4; margin-bottom: 10px; }
.home-workflow-demo .hwd-real-review .review-summary-description { font-size: 12px; color: #716b7c; line-height: 1.7; margin: 0 0 12px; }
.hwd-real-review .review-logo-tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 0; }
.hwd-real-review .review-logo-tags span { font-size: 9px; line-height: 1.5; padding: 4px 7px; color: #746b7f; background: #f7f5fa; border: 1px solid #eee9f3; border-radius: 5px; }
.hwd-real-review .hero-score-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding-top: 17px; border-top: 1px solid #efecf3; }
.hwd-real-review .hero-mini-score { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hwd-real-review .hero-mini-score > span { font-size: 9px; line-height: 1.4; color: #777080; }
.hwd-donut { position: relative; width: 52px; height: 52px; flex-shrink: 0; background: var(--donut-track); border-radius: 50%; }
.hwd-donut--large { width: 84px; height: 84px; }
.home-workflow-demo .hwd-donut svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hwd-donut circle { fill: none; stroke-width: 11; }
.hwd-donut-track { stroke: var(--donut-outline); }
.hwd-donut-value { stroke: var(--donut-bar); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.home-workflow-demo .hwd-donut strong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--donut-bar); font-size: 13px; line-height: 1; font-weight: 600; padding: 0; transform: none; }
.home-workflow-demo .hwd-donut--large strong { font-size: 24px; }
.hwd-review-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 17px; }
.hwd-review-bottom > article { padding: 22px; }
.home-workflow-demo .hwd-review-bottom h4 { font-size: 17px; font-weight: 600; line-height: 1.35; color: #302b39; margin: 5px 0 19px; }
.hwd-priority { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 10px; padding: 0 0 16px; }
.hwd-priority + .hwd-priority { border-top: 1px solid #eeeaf3; padding-top: 16px; }
.hwd-priority:last-child { padding-bottom: 0; }
.hwd-list-index { display: grid; place-items: center; width: 25px; height: 25px; font-size: 10px; color: #7e698f; background: #f4effb; border-radius: 7px; }
.hwd-priority strong { display: block; font-size: 12px; font-weight: 600; color: #393140; line-height: 1.6; }
.hwd-priority-pill { display: inline-block; padding: 3px 6px; background: #fff6db; color: #947125; font-size: 9px; border-radius: 5px; margin-top: 5px; }
.home-workflow-demo .hwd-priority p { color: #7a7284; font-size: 12px; line-height: 1.65; margin-top: 7px; }
.hwd-use-case { padding: 10px 0; border-top: 1px solid #eeeaf3; }
.hwd-use-case:first-of-type { border-top: 0; padding-top: 0; }
.hwd-use-case:last-child { padding-bottom: 0; }
.hwd-use-case > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hwd-use-case strong { font-size: 11px; font-weight: 600; color: #393140; }
.hwd-readiness-pill { flex-shrink: 0; color: #3a854b; background: #ecfbf0; border: 1px solid #d8f0df; border-radius: 5px; padding: 3px 5px; font-size: 8px; }
.hwd-readiness-pill.is-adjustment { color: #9b7627; background: #fff9df; border-color: #f5e6b3; }
.home-workflow-demo .hwd-use-case p { color: #857c8d; font-size: 11px; line-height: 1.6; margin-top: 5px; }

/* Continuous vertical color bars, with compact UI roles below. */
.hwd-compact-palette { display:grid;grid-template-columns:1.4fr 1.4fr 1fr 1fr .55fr .55fr .55fr;height:230px;border:1px solid #e8e3ef;border-radius:14px;overflow:hidden; }
.hwd-palette-bar { min-width:0;background:var(--swatch); }
.hwd-ui-system { padding:23px;margin-top:20px; }
.home-workflow-demo .hwd-ui-system h4 { color:#342c3e;font-size:18px;line-height:1.35;font-weight:600;margin:0 0 20px; }
.hwd-ui-examples { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px; }
.hwd-ui-examples > div { display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0; }
.hwd-ui-label { display:grid;grid-template-columns:7px minmax(0,1fr);align-items:center;gap:4px 6px;font-size:11px;font-weight:500;color:#5f4e70;line-height:1.4; }
.hwd-ui-label i { width:7px;height:7px;border-radius:50%; }
.hwd-ui-label > span { grid-column:2;font-size:10px;font-weight:400;color:#9b8da5; }
.hwd-ui-button { display:inline-flex;align-items:center;gap:16px;border:1px solid #6b39f4;border-radius:7px;padding:10px 14px;font-size:12px;background:#6b39f4;color:#fff; }
.hwd-ui-button svg,.hwd-ui-link svg { width:14px;height:14px; }
.hwd-ui-button.is-outline { border-color:#4b22b8;color:#4b22b8;background:#fff; }
.hwd-ui-link { display:inline-flex;align-items:center;gap:8px;color:#6b39f4;font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:9px 0; }
.hwd-ui-surface { padding:11px 14px;background:#f5f3ff;color:#171323;border:1px solid #ddd6ff;border-radius:7px;font-size:12px; }

/* Exact tool scenes, scaled as previews; no tool editor or inner scrolling. */
.hwd-real-mockups { --viz-ui-accent:#6b39f4;--viz-ui-accent-rgb:107,57,244;--viz-brand:#6b39f4;--viz-brand-rgb:107,57,244;--viz-support-1:#ddd6ff;--viz-support-2:#b7a9f0;--viz-neutral:#171323;--viz-on-brand:#fff;--viz-on-brand-filter:brightness(0) invert(1);--viz-ink:#171323;--viz-copy:#6f6a7a;--viz-soft:#f5f3ff;--viz-line:#eae7f1;--viz-logo-scale:1;--viz-post-1:#6b39f4;--viz-post-2:#171323;--viz-post-3:#ddd6ff;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0; }
.hwd-real-mockups .logo-visualizer-preview-card { grid-column: auto; padding: 14px; border: 1px solid #e8e4ef; border-radius: 13px; }
.hwd-real-mockups .logo-visualizer-preview-card > header { padding: 0 0 12px; min-height: 33px; }
.hwd-real-mockups .logo-visualizer-preview-card > header h3 { font-size: 12px; }
.hwd-real-mockups .logo-visualizer-preview-card > footer { min-height: 36px; gap: 8px; align-items: flex-start; }
.hwd-real-mockups .logo-visualizer-preview-card > footer span, .hwd-real-mockups .logo-visualizer-preview-card > footer strong { font-size: 9px; }
.hwd-mockup-frame { --scene-width:600; --scene-max-height:240; width:100%; position:relative; overflow:clip; }
.hwd-mockup-frame > [data-mockup-canvas] { width:calc(var(--scene-width)*1px); transform-origin:top left; }
.hwd-real-mockups .logo-visualizer-preview-mobile .hwd-mockup-frame, .hwd-real-mockups .logo-visualizer-preview-dock .hwd-mockup-frame { --scene-width:480; }
.hwd-real-mockups .logo-visualizer-dock-island img { filter:brightness(0) invert(1)!important; }
.hwd-real-mockups [data-mockup-canvas] button { cursor: default; }
.home-workflow-demo .hwd-real-mockups .logo-visualizer-social-frame > button { font-size: 8px; }

/* Two representative outputs and the remaining files show the full export kit. */
.hwd-export-map { padding:36px 28px;background:radial-gradient(ellipse at 50% 100%,#f5f0ff,transparent 70%),#fff; }
.hwd-map-label { display:block;text-align:center;font-size:12px;color:#8d7d9d;margin-bottom:18px; }
.hwd-export-source { display:grid;place-items:center;width:124px;height:112px;margin:auto;background:#f9f7fc;border:1px dashed #dcd3e9;border-radius:15px; }
.hwd-export-source .hwd-logo { width:52px;height:52px; }
.hwd-export-branch { display:grid;place-items:center;height:52px;color:#8754fb; }
.home-workflow-demo .hwd-export-branch svg { width:24px;height:24px;transform:rotate(90deg); }
.hwd-export-results { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:464px;margin:auto; }
.hwd-export-sample,.hwd-export-remaining { display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:124px;border:1px solid #e5ddef;border-radius:13px; }
.hwd-export-sample { background:var(--sample-background); }
.hwd-export-sample > span { display:flex; }
.hwd-export-sample .hwd-logo { width:56px;height:56px;color:var(--sample-ink); }
.hwd-export-remaining { gap:6px;background:#efe8ff;border-color:#e1d5fc; }
.hwd-export-remaining strong { font-size:43px;font-weight:600;line-height:1.1;letter-spacing:-1.8px;color:#7440f8; }
.hwd-export-remaining > span { font-size:11px;line-height:1.5;color:#987fba; }
.hwd-export-total { text-align:center;margin-top:32px;padding-top:28px;border-top:1px solid #e8dff2; }
.hwd-export-total > strong { display:block;color:#6b39f4;font-size:54px;font-weight:600;line-height:1.1;letter-spacing:-2px; }
.hwd-export-total > strong > span { color:#61417f;font-size:28px;letter-spacing:-.8px; }
.home-workflow-demo .hwd-export-total p { color:#9a86ab;font-size:12px;line-height:1.7;margin-top:12px; }
.hwd-panel.is-entering .hwd-export-results > div { animation:hwd-branch-enter .45s .1s both; }
.hwd-panel.is-entering .hwd-export-results > div:nth-child(2) { animation-delay:.18s; }
.hwd-panel.is-entering .hwd-export-results > div:nth-child(3) { animation-delay:.26s; }
.hwd-panel.is-entering .hwd-export-total { animation:hwd-branch-enter .45s .3s both; }
@keyframes hwd-branch-enter { from { opacity:0;transform:translateY(-5px); } to { opacity:1;transform:translateY(0); } }

/* Client delivery mirrors the portal's asset cards. */
.hwd-client-portal { background: #fff; border: 1px solid #e6dfee; border-radius: 16px; overflow: hidden; }
.hwd-client-hero { padding: 26px 28px 0; background: radial-gradient(ellipse at 80% 20%,#402368,transparent 65%),#171323; text-align: center; }
.hwd-client-hero > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: #c1b2dc; font-size: 9px; letter-spacing: .4px; }
.hwd-client-hero > span:first-child svg { width: 11px; height: 11px; }
.hwd-client-hero > .hwd-logo { display: block; width: min(310px,90%); height: 55px; margin: 29px auto 17px; color: #ddd6ff; }
.home-workflow-demo .hwd-client-hero p { font-size: 12px; color: #c2b4d6; }
.hwd-client-color-strip { display: flex; height: 6px; margin: 28px -28px 0; }
.hwd-client-color-strip i { flex: 1; }
.hwd-client-delivery { padding: 26px; }
.hwd-client-delivery-heading > span { display: block; color: #6b39f4; font-size: 9px; font-weight: 600; letter-spacing: .8px; margin-bottom: 7px; }
.home-workflow-demo .hwd-client-delivery-heading h4 { font-size: 29px; font-weight: 600; line-height: 1.2; color: #18161e; }
.home-workflow-demo .hwd-client-delivery-heading p { color: #716b78; font-size: 12px; line-height: 1.7; margin: 10px 0 21px; }
.hwd-client-delivery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.hwd-client-asset { display: grid; grid-template-columns: 34px minmax(0,1fr) 15px; gap: 11px; align-items: center; padding: 15px; border: 1px solid #e5e1e9; border-radius: 8px; min-height: 90px; }
.hwd-client-asset-icon { width: 34px; height: 34px; background: #f1edff; border-radius: 8px; display: grid; place-items: center; color: #6b39f4; }
.hwd-client-asset-icon svg { width: 18px; height: 18px; }
.hwd-client-asset strong { display: block; color: #25222a; font-size: 12px; font-weight: 600; }
.hwd-client-asset small { display: block; font-size: 10px; color: #817b87; line-height: 1.5; margin-top: 4px; }
.hwd-client-download-icon svg { width: 14px; height: 14px; color: #8e8798; }
.home-workflow-demo .hwd-client-note { display: flex; align-items: center; gap: 6px; margin-top: 19px; font-size: 10px; color: #817b87; line-height: 1.6; }
.hwd-client-note svg { width: 13px; height: 13px; }

@keyframes hwd-panel-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:992px) and (max-width:1199px) {
    .hwd-tab { padding:15px 8px; gap:8px; }
    .hwd-tab-icon { width:27px; }
    .hwd-tab-copy strong { font-size:12px; }
    .hwd-panel { padding:20px; }
    .hwd-panel-heading > .hwd-tag { display:none; }
    .hwd-real-review .review-summary-main { grid-template-columns:1fr; }
    .hwd-real-review .review-card-logo-panel { min-height:110px; }
    .hwd-real-review .review-card-logo-panel .hwd-logo { width:230px; height:45px; }
    .hwd-review-bottom { grid-template-columns:1fr; }
}
@media (max-width:991px) {
    .home-workflow-demo { padding:64px 0 44px; }
    .hwd-shell { display:block; }
    .hwd-sidebar { position:sticky; top:66px; z-index:5; padding:16px 16px 0; border-right:0; border-bottom:1px solid #e6def1; background:linear-gradient(120deg,#fcfaff,#f1ebfc); }
    .hwd-sidebar-inner { position:static; }
    .hwd-project { padding:0 6px 12px; }
    .hwd-project-mark { width:30px;height:30px;border-radius:9px; }
    .hwd-project-mark .hwd-logo { width:19px;height:19px; }
    .hwd-project > div { display:flex;align-items:baseline;gap:10px; }
    .hwd-project strong { font-size:12px; }
    .hwd-project > div > span { font-size:10px; }
    .hwd-tabs { flex-direction:row;gap:6px;overflow-x:auto;padding:3px 3px 12px;scrollbar-width:none; }
    .hwd-tabs::-webkit-scrollbar { display:none; }
    .hwd-tab { flex:1 0 auto;width:auto;padding:10px;gap:7px;border-radius:10px; }
    .hwd-tab.is-active::before { display:none; }
    .hwd-tab-icon { width:22px;height:24px;border-radius:6px; }
    .hwd-tab-icon svg { width:17px;height:17px; }
    .hwd-tab-copy strong { font-size:11px;white-space:nowrap;margin:0; }
    .hwd-tab-copy > span { display:none; }
    .hwd-heading { margin-bottom:28px; }
}
@media (max-width:700px) {
    .hwd-real-review .review-summary-main { grid-template-columns:1fr;gap:20px; }
    .hwd-real-review .review-card-logo-panel { min-height:135px;padding:25px; }
    .hwd-real-review .review-card-logo-panel .hwd-logo { width:250px;height:50px; }
    .hwd-review-bottom { grid-template-columns:1fr; }
    .hwd-real-mockups,.hwd-client-delivery-grid { grid-template-columns:1fr; }
    .hwd-workspace-footer { flex-direction:column;gap:12px; }
    .hwd-workspace-footer > a { width:100%; }
    .hwd-workspace-footer p { text-align:center; }
}
@media (max-width:575px) {
    .home-workflow-demo { padding-top:52px; }
    .home-workflow-demo > .container { padding-left:12px;padding-right:12px; }
    .hwd-heading { padding:0 8px; }
    .hwd-eyebrow { font-size:8px;letter-spacing:1px; }
    .home-workflow-demo .hwd-heading h2 { font-size:31px;letter-spacing:-1.15px;line-height:1.15; }
    .hwd-heading h2 > span { display:block; }
    .home-workflow-demo .hwd-heading p { font-size:12px;line-height:1.8; }
    .hwd-desktop-break { display:none; }
    .hwd-shell { border-radius:20px; }
    .hwd-sidebar { padding:12px 10px 0; }
    .hwd-project > div { gap:8px; }
    .hwd-project > div > span { font-size:9px; }
    .hwd-panel { padding:22px 14px; }
    .hwd-panel-heading { margin-bottom:19px; }
    .hwd-panel-heading > .hwd-tag { display:none; }
    .hwd-kicker { font-size:8px;letter-spacing:.75px; }
    .home-workflow-demo .hwd-panel-heading h3 { font-size:22px; }
    .home-workflow-demo .hwd-real-review { padding:15px; }
    .hwd-real-review .review-summary-intro-row { grid-template-columns:73px minmax(0,1fr);gap:12px; }
    .hwd-donut--large { width:73px;height:73px; }
    .home-workflow-demo .hwd-real-review .review-summary-title { font-size:20px; }
    .hwd-real-review .hero-score-strip { gap:4px; }
    .hwd-donut { width:43px;height:43px; }
    .hwd-donut--large { width:73px;height:73px; }
    .home-workflow-demo .hwd-donut strong { font-size:11px; }
    .home-workflow-demo .hwd-donut--large strong { font-size:21px; }
    .hwd-real-review .hero-mini-score > span { font-size:8px; }
    .hwd-review-bottom > article { padding:19px; }
    .hwd-client-delivery { padding:20px; }
    .hwd-client-hero { padding:23px 20px 0; }
    .hwd-client-color-strip { margin-left:-20px;margin-right:-20px; }
    .hwd-client-asset { padding:14px; }
    .hwd-client-asset strong { font-size:13px; }
    .hwd-client-asset small { font-size:11px; }
    .hwd-workspace-footer { padding:17px; }
    .home-workflow-demo .hwd-workspace-footer p { font-size:11px; }
}
@media (max-width:700px) {
    .hwd-mockup-frame { --scene-max-height:180; }
}
@media (max-width:575px) {
    .hwd-compact-palette { height:190px; }
    .hwd-ui-system { padding:17px;margin-top:16px; }
    .home-workflow-demo .hwd-ui-system h4 { font-size:16px;margin-bottom:18px; }
    .hwd-ui-examples { gap:20px 10px; }
    .hwd-ui-label { font-size:10px; }
    .hwd-ui-label > span { font-size:9px; }
    .hwd-ui-button { padding:9px 8px;font-size:10px;gap:5px; }
    .hwd-ui-button svg,.hwd-ui-link svg { width:11px;height:11px; }
    .hwd-ui-link { font-size:10px;gap:4px; }
    .hwd-ui-surface { font-size:10px;padding:8px 9px;line-height:1.5; }
    .hwd-export-map { padding:26px 14px; }
    .hwd-map-label { font-size:11px;margin-bottom:14px; }
    .hwd-export-source { width:98px;height:90px;border-radius:12px; }
    .hwd-export-source .hwd-logo { width:42px;height:42px; }
    .hwd-export-branch { height:42px; }
    .hwd-export-results { gap:9px; }
    .hwd-export-sample,.hwd-export-remaining { height:92px;border-radius:10px; }
    .hwd-export-sample .hwd-logo { width:38px;height:38px; }
    .hwd-export-remaining strong { font-size:30px;letter-spacing:-1.3px; }
    .hwd-export-remaining > span { font-size:9px; }
    .hwd-export-total { margin-top:26px;padding-top:22px; }
    .hwd-export-total > strong { font-size:43px;letter-spacing:-1.5px; }
    .hwd-export-total > strong > span { font-size:21px;letter-spacing:-.5px; }
    .home-workflow-demo .hwd-export-total p { font-size:11px;margin-top:9px; }
}

@media (prefers-reduced-motion:reduce) {
    .home-workflow-demo *, .home-workflow-demo *::before, .home-workflow-demo *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}