.icon {
    --icon-url: none;
    display: inline-block;
    flex: 0 0 auto;
    width: var(--size-icon-default);
    height: var(--size-icon-default);
    background: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.icon-storefront { --icon-url: url("/assets/icons/storefront.svg"); }
.icon-house { --icon-url: url("/assets/icons/house.svg"); }
.icon-robot { --icon-url: url("/assets/icons/robot.svg"); }
.icon-book-open { --icon-url: url("/assets/icons/book-open.svg"); }
.icon-megaphone { --icon-url: url("/assets/icons/megaphone.svg"); }
.icon-chat-circle-dots { --icon-url: url("/assets/icons/chat-circle-dots.svg"); }
.icon-image { --icon-url: url("/assets/icons/image.svg"); }
.icon-lightbulb { --icon-url: url("/assets/icons/lightbulb.svg"); }
.icon-paper-plane-tilt { --icon-url: url("/assets/icons/paper-plane-tilt.svg"); }
.icon-chat-teardrop-text { --icon-url: url("/assets/icons/chat-teardrop-text.svg"); }
.icon-note-pencil { --icon-url: url("/assets/icons/note-pencil.svg"); }
.icon-check-circle { --icon-url: url("/assets/icons/check-circle.svg"); }
.icon-arrow-right { --icon-url: url("/assets/icons/arrow-right.svg"); }
.icon-caret-down { --icon-url: url("/assets/icons/caret-down.svg"); }
.icon-sign-in { --icon-url: url("/assets/icons/sign-in.svg"); }
.icon-user-plus { --icon-url: url("/assets/icons/user-plus.svg"); }
.icon-sign-out { --icon-url: url("/assets/icons/sign-out.svg"); }

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    color: var(--accent-primary);
    font-size: var(--text-brand);
    font-weight: var(--weight-emphasis);
    letter-spacing: var(--tracking-brand);
    text-decoration: none;
    white-space: nowrap;
}

.brand-mark {
    display: grid;
    width: var(--size-brand-mark);
    height: var(--size-brand-mark);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-medium);
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.brand-mark .icon {
    width: var(--size-icon-large);
    height: var(--size-icon-large);
}

.brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-name strong {
    font-weight: var(--weight-bold);
}

.primary-navigation {
    display: grid;
    gap: var(--space-2);
}

.navigation-item {
    display: flex;
    min-height: var(--control-navigation-height);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-medium);
    color: var(--text-secondary);
    font-weight: var(--weight-navigation);
    text-decoration: none;
    transition: background-color var(--duration-micro) ease-out, color var(--duration-micro) ease-out;
    white-space: nowrap;
}

.navigation-item:hover {
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.navigation-item.is-active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.sidebar-note {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.sidebar-note > .icon {
    margin-block-start: var(--optical-icon-offset);
    color: var(--accent-primary);
}

.sidebar-note strong {
    display: block;
    color: var(--text-primary);
    font-size: var(--text-body-sm);
}

.sidebar-note p {
    margin-block-start: var(--space-1);
    font-size: var(--text-caption);
}

.intro-label {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-label-height);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-emphasis);
    white-space: nowrap;
}

.keep-together {
    white-space: nowrap;
}

.ask-card {
    scroll-margin-block: var(--space-8);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-large);
    background: var(--surface-primary);
    box-shadow: var(--shadow-prompt);
}

.starter-section h2 {
    color: var(--text-secondary);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-navigation);
    text-align: center;
}

.suggestion-button {
    display: grid;
    min-height: var(--control-suggestion-height);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--text-body-sm);
    font-weight: var(--weight-navigation);
    text-align: start;
    transition: border-color var(--duration-micro) ease-out, background-color var(--duration-micro) ease-out, transform var(--duration-micro) ease-out;
    white-space: nowrap;
}

.suggestion-button > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-accent);
    transform: translateY(var(--hover-lift));
}

.suggestion-icon {
    display: grid;
    width: var(--size-brand-mark-mobile);
    height: var(--size-brand-mark-mobile);
    place-items: center;
    border-radius: var(--radius-small);
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.suggestion-icon .icon {
    width: var(--size-icon-default);
    height: var(--size-icon-default);
}

.suggestion-button > .icon:last-child {
    width: var(--size-icon-small);
    height: var(--size-icon-small);
    color: var(--text-muted);
}

.page-link-card {
    display: grid;
    min-height: var(--control-suggestion-height);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-primary);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--duration-micro) ease-out, background-color var(--duration-micro) ease-out, transform var(--duration-micro) ease-out;
}

.page-link-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-accent);
    transform: translateY(var(--hover-lift));
}

.page-link-card:active {
    transform: scale(var(--press-scale));
}

.page-link-icon {
    display: grid;
    width: var(--size-brand-mark);
    height: var(--size-brand-mark);
    place-items: center;
    border-radius: var(--radius-medium);
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.page-link-copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.page-link-copy strong {
    font-weight: var(--weight-emphasis);
}

.page-link-copy > span {
    color: var(--text-secondary);
    font-size: var(--text-body-sm);
    line-height: var(--line-height-body);
    word-break: keep-all;
}

.page-link-card > .icon:last-child {
    width: var(--size-icon-small);
    height: var(--size-icon-small);
    color: var(--text-muted);
}

.tool-menu-card {
    display: grid;
    min-height: var(--control-tool-card-min-height);
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-primary);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--duration-micro) ease-out, background-color var(--duration-micro) ease-out, transform var(--duration-micro) ease-out;
}

.tool-menu-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-accent);
    transform: translateY(var(--hover-lift));
}

.tool-menu-card:active {
    transform: scale(var(--press-scale));
}

.tool-menu-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.tool-menu-icon {
    display: grid;
    width: var(--size-brand-mark);
    height: var(--size-brand-mark);
    place-items: center;
    border-radius: var(--radius-medium);
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.tool-menu-icon .icon {
    width: var(--size-icon-large);
    height: var(--size-icon-large);
}

.tool-menu-type {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--weight-navigation);
    white-space: nowrap;
}

.tool-menu-copy {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
}

.tool-menu-copy strong {
    font-size: var(--text-h3);
    font-weight: var(--weight-emphasis);
}

.tool-menu-copy > span {
    color: var(--text-secondary);
    font-size: var(--text-body-sm);
    line-height: var(--line-height-body);
    word-break: keep-all;
}

.tool-menu-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent-primary);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-navigation);
    white-space: nowrap;
}

.tool-menu-action .icon {
    width: var(--size-icon-small);
    height: var(--size-icon-small);
}

.section-heading > p {
    color: var(--accent-primary);
    font-size: var(--text-caption);
    font-weight: var(--weight-emphasis);
}

.section-heading h2 {
    margin-block-start: var(--space-2);
    font-size: var(--text-h2);
}

.step-item {
    list-style: none;
}

.step-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--space-4);
    border-block-end: var(--border-width) solid var(--border-default);
}

.step-number {
    color: var(--accent-primary);
    font-size: var(--text-step-number);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.step-icon {
    width: var(--size-icon-large);
    height: var(--size-icon-large);
    color: var(--accent-primary);
}

.step-item h3 {
    margin-block-start: var(--space-4);
    font-size: var(--text-h3);
}

.step-item p {
    margin-block-start: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-body-sm);
}

.site-footer {
    display: grid;
    gap: var(--space-5);
    padding-block-start: var(--space-6);
    border-block-start: var(--border-width) solid var(--border-default);
    color: var(--text-muted);
    font-size: var(--text-caption);
}

.site-footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.site-footer-mark {
    display: grid;
    width: var(--control-label-height);
    height: var(--control-label-height);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-medium);
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.site-footer-mark .icon {
    width: var(--size-icon-large);
    height: var(--size-icon-large);
}

.site-footer-brand strong {
    color: var(--text-primary);
    font-size: var(--text-body-sm);
}

.site-footer-brand p {
    margin-block-start: var(--space-1);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.site-footer-links a {
    display: inline-flex;
    min-height: var(--control-navigation-height-mobile);
    align-items: center;
    padding-inline: var(--space-3);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-weight: var(--weight-navigation);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-micro) ease-out, border-color var(--duration-micro) ease-out, color var(--duration-micro) ease-out;
}

.site-footer-links a:hover,
.site-footer-links a[aria-current="page"] {
    border-color: var(--border-strong);
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.help-footer-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    padding-block-end: var(--space-8);
    border-block-end: var(--border-width) solid var(--border-default);
}

.help-footer-menu div {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.help-footer-menu strong {
    margin-block-end: var(--space-1);
    color: var(--text-primary);
    font-size: var(--text-body-sm);
}

.help-footer-menu a {
    display: inline-flex;
    min-height: var(--control-navigation-height-mobile);
    align-items: center;
    color: var(--text-muted);
    font-size: var(--text-caption);
    text-decoration: none;
    white-space: nowrap;
}

.help-footer-menu a:hover,
.help-footer-menu a:focus-visible {
    color: var(--accent-primary);
}

.site-footer-company {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    color: var(--text-secondary);
    font-style: normal;
}

.site-footer-company span {
    overflow-wrap: anywhere;
}

.site-footer-company strong {
    margin-inline-end: var(--space-1);
    color: var(--text-primary);
}

.site-footer-company a,
.site-footer-copyright a {
    color: var(--accent-primary);
    font-weight: var(--weight-navigation);
}

.site-footer-company a {
    display: inline-flex;
    min-height: var(--control-navigation-height-mobile);
    align-items: center;
}

.site-footer-copyright {
    padding-block-end: var(--space-2);
}

@media (width < 45rem) {
    .help-footer-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}