/* versa.tile.graphics — monochrome, wide layout (shares design language with tile.graphics/blog) */
:root {
    --bg: #ffffff;
    --bg-soft: #f6f6f6;
    --ink: #0a0a0a;
    --ink-2: #555555;
    --ink-3: #8a8a8a;
    --line: #e5e5e5;
    --line-strong: #0a0a0a;
    --radius: 4px;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --wide: 1760px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a, a:visited, a:active, a:hover { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p { margin: 0; }

.maxwidth {
    width: min(var(--wide), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 2rem; }
.brand { display: flex; align-items: center; gap: 0.9rem; }
.brand img { height: 32px; width: auto; display: block; }
.brand__title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.brand__title span { color: var(--ink-3); }
.site-header__nav { display: flex; align-items: center; gap: 0.25rem 2rem; font-size: 0.9rem; flex-wrap: wrap; }
.site-header__link { font-weight: 500; padding: 0.3rem 0; border-bottom: 1px solid transparent; }
.site-header__link:hover { border-bottom-color: var(--ink); }

/* Buttons */
.button, .button:visited {
    display: inline-block;
    background: var(--ink);
    color: var(--bg);
    padding: 0.7rem 1.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    transition: background 0.2s ease, color 0.2s ease;
}
.button:hover { background: var(--bg); color: var(--ink); }
.button--light, .button--light:visited { background: #fff; color: var(--ink); border-color: #fff; }
.button--light:hover { background: transparent; color: #fff; }
.button--sm { padding: 0.4rem 1.1rem; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; }

/* Hero */
.hero-band {
    position: relative;
    isolation: isolate;
    background: #e5e5e5 var(--hero-tile) repeat left top / 200px 200px;
    color: var(--ink);
    border-bottom: 1px solid var(--line-strong);
}
.hero { padding: clamp(4rem, 9vw, 8rem) 0; display: flex; flex-direction: column; gap: 1.5rem; max-width: var(--wide); }
.hero .eyebrow { color: var(--ink-2); }
.hero__title {
    font-size: clamp(2.4rem, 5.5vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 600;
}
.hero__title span { color: var(--ink-2); }
.hero__lead { color: var(--ink); font-size: 1.15rem; max-width: 80ch; }
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.button--ghost, .button--ghost:visited { background: transparent; color: var(--ink); border-color: var(--ink); }
.button--ghost:hover { background: var(--ink); color: #fff; }

/* Features */
.features { padding: clamp(3rem, 7vw, 6rem) 0 0; display: grid; gap: clamp(3rem, 7vw, 7rem); }
.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}
.feature:nth-child(even) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.feature:nth-child(even) .feature__body { order: 2; }
.feature__body { display: grid; gap: 1.1rem; align-content: center; justify-items: start; }
.feature__title { font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; }
.feature__text { color: var(--ink-2); font-size: 1.05rem; max-width: 46ch; }
.feature__link { font-size: 0.9rem; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

.feature__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--bg-soft);
    background-repeat: repeat;
    background-size: 220px;
    background-position: center;
}
.feature__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.feature__visual--inset img { inset: 12% auto 12% 8%; width: 48%; height: 76%; object-fit: cover; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; }
.feature:hover .feature__visual img { transform: scale(1.02); }

/* Blog feed */
.section-title {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: 1rem;
    border-top: 1px solid var(--line-strong);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}
.section-title a { font-size: 0.9rem; font-weight: 500; border-bottom: 1px solid var(--ink); }
#feed {
    margin-top: 2rem;
    display: grid;
    gap: 2rem clamp(1.25rem, 2vw, 2.5rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.feed-item { display: flex; flex-direction: column; gap: 0.8rem; }
.feed-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-soft); border-radius: var(--radius); display: block; transition: transform 0.5s ease; }
.feed-item .thumb { overflow: hidden; border-radius: var(--radius); }
.feed-item:hover img { transform: scale(1.03); }
.feed-item .feed-title { font-weight: 600; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
.feed-item:hover .feed-title { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 1px; }
#loading { display: none; color: var(--ink-3); font-size: 0.9rem; margin-top: 1rem; }

/* Pricing */
.pricing {
    margin-top: clamp(4rem, 8vw, 7rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.5rem;
}
.price-card { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 0.9rem; align-content: start; }
.price-card--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.price-card--dark .price-card__text, .price-card--dark small { color: rgba(255, 255, 255, 0.7); }
.price-card h3 { font-size: 1.6rem; letter-spacing: -0.02em; font-weight: 600; }
.price-card__price { font-size: 1.05rem; font-weight: 600; }
.price-card__text, .price-card small { color: var(--ink-2); font-size: 0.95rem; }
.price-card .button { justify-self: start; margin-top: 0.5rem; }

/* Feedback */
.feedback { margin-top: clamp(4rem, 8vw, 7rem); padding: clamp(2rem, 4vw, 3.5rem); background: var(--bg-soft); border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.feedback h3 { font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 600; }
.feedback p { color: var(--ink-2); }
.social { display: flex; gap: 1.1rem; font-size: 1.4rem; }
.social a:hover { color: var(--ink-2); }

.site-main { flex: 1 0 auto; padding-bottom: 6rem; }

/* Footer */
.site-footer { background: var(--ink); color: #fff; padding: 4rem 0 2rem; }
.site-footer__inner { display: flex; justify-content: space-between; gap: 2rem 4rem; flex-wrap: wrap; }
.site-footer__brand { display: grid; gap: 0.8rem; align-content: start; max-width: 340px; }
.site-footer__eyebrow { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); }
.site-footer__copy { line-height: 1.5; color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; }
.site-footer nav { display: grid; gap: 0.6rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); align-content: start; }
.site-footer nav h4 { margin: 0 0 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer .social { font-size: 1.2rem; }
.site-footer .social a:hover { color: #fff; opacity: 0.7; }
.site-footer__meta { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); display: grid; gap: 1rem; }
.ads { overflow: hidden; }

/* Cookie notice (markup from preference.js) */
.nodecor, .nodecor:active, .nodecor:visited, .nodecor:hover { color: #fff; text-decoration: underline; }
button:hover { cursor: pointer; }

@media (max-width: 900px) {
    .feature, .feature:nth-child(even) { grid-template-columns: 1fr; }
    .feature:nth-child(even) .feature__body { order: 0; }
    .site-header__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
@media (max-width: 560px) {
    .site-header { position: static; }
}

/* Full-page scroll sections */
html { overflow: hidden; }
.ssY-container { scroll-snap-type: y proximity; overflow-y: scroll; height: 100vh; scroll-behavior: smooth; }
.container { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { padding-bottom: 0; }
.snap { min-height: 100vh; scroll-snap-align: end; }
.relative { position: relative; }
.hero-band.snap { display: flex; align-items: center; }
.hero-band .hero { width: min(var(--wide), 100% - 2 * var(--gutter)); }

.bg { position: absolute; inset: 0; width: 100%; height: 100%; background-repeat: repeat; }
.tiled { opacity: 0; transition: opacity 0.8s ease-out; }
.tiled.visible { opacity: 1; }

.bound {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: min(460px, 100% - 2 * var(--gutter));
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    gap: 1rem;
    justify-items: start;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
}
.bound--wide { width: min(900px, 100% - 2 * var(--gutter)); }
.snap__title { font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; }
.snap__text { color: var(--ink-2); font-size: 1.05rem; }
.bound .pricing { margin-top: 0; width: 100%; }
.blogsec { padding-bottom: clamp(3rem, 6vw, 5rem); }
.price-note { color: var(--ink-3); font-size: 0.8rem; }
.fadeout { transition: opacity 0.8s ease-out; }
.fadeout.faded { opacity: 0; }
.fadeout + .tiled { opacity: 1; }

/* Blog link card fills the rest of the feed row(s) */
.feed-more { grid-column: auto / -1; display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 12rem; background: var(--ink); color: #fff; border-radius: var(--radius); }
.feed-more, .feed-more:visited, .feed-more:active, .feed-more:hover { color: #fff; }
.feed-more .eyebrow { color: rgba(255, 255, 255, 0.55); }
.feed-more__title { font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; max-width: 20ch; }
.feed-more__cta { font-size: 0.9rem; font-weight: 500; border-bottom: 1px solid #fff; align-self: flex-start; padding-bottom: 2px; }