/* SaveEditor.com production homepage - Phase 06 */

.se-home {
    background: var(--se-bg);
}

.se-home-hero {
    position: relative;
    overflow: hidden;
    border-bottom: var(--se-border-2) solid var(--se-border);
}

.se-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(10,10,10,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,10,10,.035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.se-home-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(24rem, .86fr);
    min-height: clamp(42rem, 76vh, 52rem);
}

.se-home-hero__content {
    padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 5vw, 5.5rem) clamp(4rem, 7vw, 7rem) 0;
    border-right: var(--se-border-2) solid var(--se-border);
}

.se-home-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.se-home-hero__eyebrow .se-kicker {
    margin: 0;
}

.se-home-hero__status {
    border: 1px solid var(--se-border);
    padding: .4rem .55rem;
    background: var(--se-surface);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 var(--se-border);
}

.se-home-hero__title {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(4.25rem, 7.7vw, 8.25rem);
    font-weight: 950;
    line-height: .84;
    letter-spacing: -.075em;
    text-transform: uppercase;
}

.se-home-hero__title span {
    display: block;
    color: var(--se-accent);
    -webkit-text-stroke: 2px var(--se-border);
    text-shadow: 5px 5px 0 var(--se-border);
}

.se-home-hero__lede {
    max-width: 48rem;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    color: var(--se-ink-700);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.55;
}

.se-home-search {
    max-width: 50rem;
    margin-top: 2.25rem;
}

.se-home-search__field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-surface);
    box-shadow: var(--se-shadow-md);
}

.se-home-search__icon {
    width: 1.25rem;
    align-self: center;
    margin: 0 0 0 1rem;
}

.se-home-search__field input {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 1rem;
    color: var(--se-text);
    font-size: var(--se-fs-400);
}

.se-home-search__field .se-button {
    min-height: 3.75rem;
    border-width: 0 0 0 var(--se-border-2);
    box-shadow: none;
}

.se-home-search__field .se-button:hover,
.se-home-search__field .se-button:active {
    transform: none;
    box-shadow: none;
}

.se-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.se-home-text-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--se-text);
    font-size: var(--se-fs-200);
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.se-home-text-link svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--se-duration-fast) var(--se-ease);
}

.se-home-text-link:hover svg {
    transform: translateX(.25rem);
}

.se-home-workbench {
    align-self: center;
    margin: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem);
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-surface);
    box-shadow: var(--se-shadow-accent);
}

.se-home-workbench__top,
.se-home-workbench__foot {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .85rem;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .07em;
}

.se-home-workbench__top {
    background: var(--se-ink-950);
    color: white;
}

.se-home-workbench__ready {
    border: 1px solid white;
    background: var(--se-accent);
    color: var(--se-ink-950);
    padding: .25rem .4rem;
    font-family: var(--se-font-mono);
    font-size: .575rem;
    font-weight: 900;
}

.se-home-workbench__body {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.se-home-workbench__mark {
    width: 5rem;
    height: 5rem;
    display: grid;
    place-items: center;
    margin-bottom: 2rem;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-accent);
    box-shadow: 5px 5px 0 var(--se-border);
}

.se-home-workbench__mark svg {
    width: 2.7rem;
    height: 2.7rem;
}

.se-home-workbench h2 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 920;
    line-height: 1;
    letter-spacing: -.045em;
}

.se-home-workbench__list {
    margin: 2rem 0 0;
}

.se-home-workbench__list > div {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--se-ink-300);
}

.se-home-workbench__list dt {
    font-family: var(--se-font-mono);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.se-home-workbench__list dd {
    margin: 0;
    color: var(--se-text-muted);
    font-size: var(--se-fs-300);
    line-height: 1.45;
}

.se-home-workbench__foot {
    border-top: var(--se-border-2) solid var(--se-border);
    background: var(--se-surface-muted);
    flex-wrap: wrap;
}

.se-home-principles {
    border-bottom: var(--se-border-2) solid var(--se-border);
    background: var(--se-ink-950);
    color: white;
}

.se-home-principles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.se-home-principles article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    min-height: 10rem;
    padding: 1.5rem;
    border-right: 1px solid #3a3a3a;
}

.se-home-principles article:last-child {
    border-right: 0;
}

.se-home-principles__icon {
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border: 1px solid white;
    background: var(--se-accent);
    color: var(--se-ink-950);
}

.se-home-principles__icon svg {
    width: 1.65rem;
}

.se-home-principles h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.se-home-principles p {
    margin: .45rem 0 0;
    color: #bdbdbd;
    font-size: var(--se-fs-300);
    line-height: 1.5;
}

.se-home-section {
    padding: clamp(4rem, 8vw, 8rem) 0;
    border-bottom: var(--se-border-2) solid var(--se-border);
}

.se-home-section__header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .65fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.se-home-section__header--compact {
    align-items: center;
}

.se-home-section__header > p,
.se-home-utilities__intro > p,
.se-home-guides__grid > div > p,
.se-home-faq__grid > div > p {
    margin: 0;
    color: var(--se-text-muted);
    font-size: var(--se-fs-500);
    line-height: 1.55;
}

.se-home-section__title {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.6rem, 5vw, 5.25rem);
    font-weight: 950;
    line-height: .94;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

.se-home-family-list {
    border-top: var(--se-border-2) solid var(--se-border);
}

.se-home-family {
    display: grid;
    grid-template-columns: 3.5rem 4rem minmax(0, 1fr) 2rem;
    gap: 1.25rem;
    align-items: center;
    min-height: 7.25rem;
    border-bottom: var(--se-border-2) solid var(--se-border);
    color: var(--se-text);
    text-decoration: none;
    transition: padding var(--se-duration-fast) var(--se-ease), background var(--se-duration-fast) var(--se-ease);
}

.se-home-family:hover {
    padding-left: 1rem;
    background: var(--se-accent);
}

.se-home-family__number {
    font-size: .675rem;
    font-weight: 800;
}

.se-home-family__icon {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-surface);
}

.se-home-family__icon svg {
    width: 1.8rem;
}

.se-home-family__copy {
    display: grid;
    grid-template-columns: minmax(11rem, .45fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.se-home-family__copy strong {
    font-size: clamp(1.3rem, 2vw, 2rem);
    font-weight: 920;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.se-home-family__copy small {
    max-width: 44rem;
    color: var(--se-text-muted);
    font-size: var(--se-fs-300);
    line-height: 1.5;
}

.se-home-family:hover .se-home-family__copy small {
    color: var(--se-ink-800);
}

.se-home-family__arrow svg {
    width: 1.35rem;
}

.se-home-utilities {
    background: var(--se-surface);
}

.se-home-utilities__grid,
.se-home-guides__grid,
.se-home-explainer__grid,
.se-home-faq__grid {
    display: grid;
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 7vw, 9rem);
}

.se-home-utilities__intro {
    align-self: start;
    position: sticky;
    top: 12rem;
}

.se-home-utilities__intro .se-home-text-link {
    margin-top: 1.5rem;
}

.se-home-utility-index,
.se-home-guide-index {
    border-top: var(--se-border-2) solid var(--se-border);
}

.se-home-utility-index a,
.se-home-guide-index a {
    display: grid;
    grid-template-columns: 3.25rem 1fr 1.5rem;
    gap: 1rem;
    align-items: center;
    min-height: 4.75rem;
    border-bottom: var(--se-border-2) solid var(--se-border);
    color: var(--se-text);
    text-decoration: none;
}

.se-home-utility-index a:hover,
.se-home-guide-index a:hover {
    background: #f2ffd1;
}

.se-home-utility-index span,
.se-home-guide-index span {
    padding-left: .5rem;
    color: var(--se-text-muted);
    font-size: .65rem;
}

.se-home-utility-index strong,
.se-home-guide-index strong {
    font-size: var(--se-fs-500);
    font-weight: 850;
}

.se-home-utility-index svg,
.se-home-guide-index svg {
    width: 1rem;
}

.se-home-catalog {
    background: var(--se-paper-200);
}

.se-home-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.se-home-tool-card {
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-surface);
    box-shadow: var(--se-shadow-sm);
    padding: 1.25rem;
}

.se-home-tool-card__top,
.se-home-tool-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.se-home-tool-card__top .se-mono {
    color: var(--se-text-muted);
    font-size: .625rem;
    text-align: right;
    text-transform: uppercase;
}

.se-home-tool-card h3 {
    margin: auto 0 .75rem;
    font-size: clamp(1.5rem, 2.3vw, 2.25rem);
    line-height: 1;
    letter-spacing: -.04em;
}

.se-home-tool-card h3 a {
    color: inherit;
    text-decoration: none;
}

.se-home-tool-card p {
    margin: 0 0 1.5rem;
    color: var(--se-text-muted);
    line-height: 1.5;
}

.se-home-tool-card__foot {
    padding-top: .9rem;
    border-top: 1px solid var(--se-ink-300);
    font-family: var(--se-font-mono);
    font-size: .65rem;
    text-transform: uppercase;
}

.se-home-tool-card__foot a {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-accent);
}

.se-home-tool-card__foot svg {
    width: 1rem;
}

.se-home-empty-catalog {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-surface);
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: var(--se-shadow-md);
}

.se-home-empty-catalog__mark {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-accent);
}

.se-home-empty-catalog__mark svg {
    width: 2.2rem;
}

.se-home-empty-catalog h3 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -.04em;
}

.se-home-empty-catalog p {
    max-width: 50rem;
    margin: .5rem 0 0;
    color: var(--se-text-muted);
}

.se-home-game-list {
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-surface);
    box-shadow: var(--se-shadow-md);
}

.se-home-game-row {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: 1.25rem;
    min-height: 6rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--se-ink-300);
    color: var(--se-text);
    text-decoration: none;
}

.se-home-game-row:last-child {
    border-bottom: 0;
}

.se-home-game-row:hover {
    background: #f2ffd1;
}

.se-home-game-row__initial {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: var(--se-border-2) solid var(--se-border);
    background: var(--se-accent);
    font-family: var(--se-font-mono);
    font-size: 1.2rem;
    font-weight: 900;
}

.se-home-game-row__title {
    display: flex;
    flex-direction: column;
}

.se-home-game-row__title strong {
    font-size: var(--se-fs-600);
    letter-spacing: -.025em;
}

.se-home-game-row__title small {
    color: var(--se-text-muted);
    font-family: var(--se-font-mono);
    font-size: .65rem;
    text-transform: uppercase;
}

.se-home-game-row__action {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--se-fs-200);
    font-weight: 850;
    text-transform: uppercase;
}

.se-home-game-row__action svg {
    width: 1rem;
}

.se-home-game-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border: var(--se-border-2) solid var(--se-border);
    padding: 2rem;
    background: var(--se-surface);
}

.se-home-game-empty p {
    max-width: 56rem;
    margin: 0;
    color: var(--se-text-muted);
}

.se-home-how {
    background: var(--se-ink-950);
    color: white;
}

.se-home-how .se-home-section__header > p,
.se-home-how .se-home-text-link {
    color: #c4c4c4;
}

.se-home-how .se-home-text-link:hover {
    color: white;
}

.se-home-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #454545;
}

.se-home-steps li {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid #454545;
}

.se-home-steps__number {
    color: var(--se-accent);
    font-family: var(--se-font-mono);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1;
}

.se-home-steps h3 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -.035em;
}

.se-home-steps p {
    max-width: 54rem;
    margin: .55rem 0 0;
    color: #bdbdbd;
}

.se-home-guides {
    background: var(--se-accent);
}

.se-home-guides__grid > div:first-child {
    max-width: 36rem;
}

.se-home-guides__grid > div > p {
    color: var(--se-ink-800);
    margin: 1.25rem 0 1.5rem;
}

.se-home-guides .se-button--primary {
    background: var(--se-surface);
}

.se-home-guide-index {
    border-color: var(--se-border);
}

.se-home-guide-index a {
    border-color: var(--se-border);
}

.se-home-guide-index a:hover {
    background: var(--se-surface);
}

.se-home-explainer__grid {
    align-items: start;
}

.se-home-explainer__copy {
    max-width: 52rem;
    font-size: var(--se-fs-500);
}

.se-home-explainer__copy p {
    margin-top: 0;
    color: var(--se-ink-700);
    line-height: 1.7;
}

.se-home-explainer__links {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: var(--se-border-2) solid var(--se-border);
}

.se-home-explainer__links a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 850;
    text-decoration: none;
}

.se-home-explainer__links svg {
    width: 1rem;
}

.se-home-faq {
    background: var(--se-surface);
}

.se-home-faq__grid > div:first-child {
    align-self: start;
    position: sticky;
    top: 12rem;
}

.se-home-faq__grid > div > p {
    margin: 1.25rem 0 1.5rem;
}

.se-home-faq__list summary {
    font-size: var(--se-fs-500);
}

.se-home-final {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--se-paper-200);
}

.se-home-final__inner {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
}

.se-home-final h2 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 950;
    line-height: .93;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.se-home-final__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (max-width: 75rem) {
    .se-home-hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(21rem, .75fr);
    }

    .se-home-hero__title {
        font-size: clamp(4rem, 7vw, 6.6rem);
    }

    .se-home-workbench {
        margin-left: 2rem;
    }

    .se-home-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 64rem) {
    .se-home-hero__grid,
    .se-home-section__header,
    .se-home-utilities__grid,
    .se-home-guides__grid,
    .se-home-explainer__grid,
    .se-home-faq__grid {
        grid-template-columns: 1fr;
    }

    .se-home-hero__content {
        padding-right: 0;
        border-right: 0;
    }

    .se-home-workbench {
        margin: 0 0 4rem;
    }

    .se-home-principles__grid {
        grid-template-columns: 1fr;
    }

    .se-home-principles article {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid #3a3a3a;
    }

    .se-home-principles article:last-child {
        border-bottom: 0;
    }

    .se-home-utilities__intro,
    .se-home-faq__grid > div:first-child {
        position: static;
    }

    .se-home-family__copy {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .se-home-section__header {
        align-items: start;
    }
}

@media (max-width: 44rem) {
    .se-home-hero__grid {
        min-height: 0;
    }

    .se-home-hero__content {
        padding-top: 3.25rem;
        padding-bottom: 3rem;
    }

    .se-home-hero__title {
        font-size: clamp(3.5rem, 17vw, 5.4rem);
    }

    .se-home-hero__title span {
        -webkit-text-stroke-width: 1.5px;
        text-shadow: 4px 4px 0 var(--se-border);
    }

    .se-home-search__field {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .se-home-search__field .se-button {
        grid-column: 1 / -1;
        border: 0;
        border-top: var(--se-border-2) solid var(--se-border);
    }

    .se-home-workbench {
        box-shadow: 5px 5px 0 var(--se-accent);
    }

    .se-home-workbench__list > div {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .se-home-family {
        grid-template-columns: 2.5rem 3.25rem 1fr;
        gap: .8rem;
        padding: 1rem 0;
    }

    .se-home-family:hover {
        padding-left: .5rem;
    }

    .se-home-family__icon {
        width: 3rem;
        height: 3rem;
    }

    .se-home-family__arrow {
        display: none;
    }

    .se-home-tool-grid {
        grid-template-columns: 1fr;
    }

    .se-home-empty-catalog {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .se-home-game-row {
        grid-template-columns: 3.25rem 1fr;
    }

    .se-home-game-row__initial {
        width: 2.75rem;
        height: 2.75rem;
    }

    .se-home-game-row__action {
        grid-column: 2;
        justify-self: start;
        font-size: .7rem;
    }

    .se-home-game-empty {
        align-items: flex-start;
        flex-direction: column;
    }

    .se-home-steps li {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .se-home-final__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .se-home-final__actions {
        width: 100%;
    }

    .se-home-final__actions .se-button {
        flex: 1;
    }
}