/* Visual alignment only. Keep the original layout, artwork, and positioning. */
:root {
    --accent-background: #a9a79f;
    --gray-background: #deddd7;
    --accent: #deddd7;
    --button-accent: #9136d8;
    --light-pink: #deddd7;
    --light-gray: #c7c6c0;
    --medium-gray: #bbb9b1;
    --text-main: #111111;
    --text-muted: #4f4d47;
    --bg-main: #c7c6c0;
    --bg-card: #deddd7;
    --button-border: 2px solid #111111;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-full: 0;
    --shadow-sm: 3px 3px 0 #111111;
    --shadow-md: 5px 5px 0 #111111;
    --shadow-lg: 8px 8px 0 #9136d8;
    --concrete-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .32'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
html {
    background: var(--bg-main);
    font-family: "Avenir Next", Futura, "Century Gothic", "Arial Narrow", Arial, sans-serif;
}
/* Use the editor's concrete panels, seams, and inset dots at the same scale. */
html,
body,
#features {
    background-color: var(--bg-main);
    background-image:
        var(--concrete-noise),
        radial-gradient(
            circle at 2rem 2rem,
            rgb(39 39 37 / 34%) 0 2px,
            rgb(255 255 255 / 24%) 2.5px 3.5px,
            transparent 4px
        ),
        linear-gradient(to bottom, rgb(17 17 17 / 14%) 1px, transparent 1px),
        linear-gradient(to right, rgb(17 17 17 / 12%) 1px, transparent 1px);
    background-position: 0 0, 0 0, -1px -1px, -1px -1px;
    background-size: 180px 180px, 14rem 14rem, 28rem 14rem, 28rem 14rem;
    background-attachment: fixed;
    background-blend-mode: soft-light, multiply, multiply, multiply;
}
button { font-family: inherit; }
header {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--container-padding), calc((100vw - var(--container-width)) / 2 + var(--container-padding)));
    background: var(--gray-background);
    border-bottom: 2px solid var(--text-main);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
header nav.menu a,
header button.open-app,
.action-button,
.actions .open-app,
.pricing ul li button {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
header button.open-app {
    background: var(--button-accent);
    border: var(--button-border);
    color: #fff;
}
.action-button {
    border: var(--button-border);
    box-shadow: 5px 5px 0 var(--text-main);
}
.actions .open-app {
    color: var(--text-main);
    background: var(--gray-background);
}
.action-button:hover,
header button.open-app:hover {
    background: var(--text-main);
    transform: none;
    box-shadow: 5px 5px 0 var(--button-accent);
}
.action-button:active,
header button.open-app:active {
    box-shadow: none;
}
.hero h1,
#features h2,
#features ul li div.text h3,
#features .banner h3,
.pricing h1 {
    font-weight: 900;
}
.hero h1 { letter-spacing: -.04em; }
#mark:before {
    background: #f2c230;
    border: 2px solid var(--text-main);
    border-radius: 0;
}
.hero .parallax img { border: 2px solid var(--text-main); }
.hero #skeleton::before,
.hero #pedro::after,
.hero #jim::before,
.hero #kid::after { border-radius: 0; }
/* Extend section dividers without widening their content. */
.companies {
    border-block: 2px solid var(--text-main);
    border-image: linear-gradient(var(--text-main), var(--text-main)) 1 / 2px 0 / 0 100vw;
}
.companies .gg-logos svg { border-radius: 0; }
#features ul li.handy .illustration,
#features ul li.private .illustration,
#features ul li.minimal .illustration {
    border: 2px solid var(--text-main);
    box-shadow: 8px 8px 0 var(--button-accent);
}
#features .banner { border: 2px solid var(--text-main); }
.pricing ul li { border: 2px solid var(--text-main); }
.pricing ul li:nth-child(2) {
    border-color: var(--text-main);
    box-shadow: 8px 8px 0 var(--button-accent);
}
.pricing ul li:nth-child(2) .amount,
.pricing ul li:nth-child(2) h4 { color: var(--text-main); }
.pricing ul li:nth-child(2) button { border-color: var(--text-main); }
.pricing ul li:hover { transform: none; }
footer {
    border-top: 2px solid var(--text-main);
    border-image: linear-gradient(var(--text-main), var(--text-main)) 1 / 2px 0 0 / 0 100vw;
}
:focus-visible { outline: 3px solid var(--button-accent); outline-offset: 3px; }