/* Brown Linx marketing site.
   Bone paper, forest ink and one green accent. No build step: edit and reload. */

:root {
    --paper: #eff0e8;
    --paper-2: #e1e4d8;
    --paper-3: #d3d8c9;
    --ink: #0f1a14;
    --ink-2: #4a574f;
    --line: rgba(15, 26, 20, .16);
    --line-strong: rgba(15, 26, 20, .45);
    --deep: #1c3a2c;
    --accent: #2f6b4a;
    --accent-strong: #2a6244;
    --error: #a82f08;
    --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1520px;
    --gutter: clamp(20px, 4.2vw, 64px);
    --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#main { flex: 1 0 auto; }
.site-header, .site-footer { flex-shrink: 0; }

[hidden] { display: none !important; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg, iframe { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 4px;
    transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ── Buttons & links ─────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    font: 600 .9375rem/1 var(--font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.btn svg { transition: transform .15s; }
.btn:hover svg { transform: translateX(3px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--deep); border-color: var(--deep); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 1rem; }

.text-link {
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}
.text-link:hover { text-decoration-color: var(--accent); }

.tag {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 2px;
    background: var(--accent-strong);
    color: #fff;
    font: 700 .6875rem/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Header ──────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.header-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.brand-name {
    font-size: 1.375rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -.02em;
}

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-list { display: flex; gap: 2px; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--ink);
    font: 500 .9375rem/1 var(--font);
    text-decoration: none;
    cursor: pointer;
}
.nav-link:hover,
.nav-link[aria-expanded="true"] { background: var(--paper-2); }
.nav-link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}
.nav-link[data-active] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}
.nav-link--badged { position: relative; }
.nav-badge { position: absolute; top: -1px; right: 8px; padding: 3px 5px; border-radius: 2px; background: var(--accent-strong); color: #fff; font-size: .5625rem; font-weight: 750; line-height: 1; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transform: rotate(-6deg); }
.chev { transition: transform .15s; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.has-menu { position: relative; }

.menu-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -14px;
    width: min(660px, 90vw);
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    box-shadow: 0 24px 48px -28px rgba(15, 26, 20, .5);
}
.menu-panel--narrow { width: min(340px, 90vw); }
.menu-panel--narrow .menu-grid { grid-template-columns: 1fr; }
.menu-panel--grouped { width: min(600px, 90vw); border-radius: 8px; }
.menu-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-column { padding: 8px; }
.menu-column + .menu-column { border-left: 1px solid var(--line); }
.menu-column:only-child { grid-column: 1 / -1; }
.menu-column:only-child ul { columns: 2; column-gap: 0; column-rule: 1px solid var(--line); }
.menu-column:only-child li { break-inside: avoid; }
.menu-group-title { padding: 6px 14px; font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.menu-column ul { list-style: none; padding: 0; }
.menu-panel[hidden] { display: none; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; }
.menu-link {
    display: grid;
    gap: 3px;
    padding: 14px;
    border-radius: 4px;
    text-decoration: none;
}
.menu-link:hover { background: var(--paper-2); }
.menu-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.menu-text { color: var(--ink-2); font-size: .9375rem; line-height: 1.4; height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.header-actions { display: flex; align-items: center; gap: 22px; }

/* The signed-in menu: "My workspace" opens a short list and Sign out (same open/close script as the other menus). */
.account-trigger { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font: 600 .9375rem/1 var(--font); cursor: pointer; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: var(--paper-2); }
.account-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.account-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-strong); color: #fff; font-size: .75rem; font-weight: 750; letter-spacing: .02em; }
.menu-panel--account { left: auto; right: 0; width: min(280px, 90vw); padding: 0; border-radius: 10px; overflow: hidden; }
.account-who { display: grid; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.account-who span { color: var(--ink-2); font-size: .75rem; }
.account-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.account-who .account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-list { margin: 0; padding: 6px; list-style: none; }
.account-link { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 500 .9375rem/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.account-link:hover, .account-link:focus-visible { background: var(--paper-2); }
.account-signout { padding: 6px; border-top: 1px solid var(--line); }
.account-signout .account-link { color: #8a2d16; font-weight: 600; }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin-left: auto;
    padding: 0 14px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background: none;
    color: var(--ink);
    font: 600 .9375rem/1 var(--font);
    cursor: pointer;
}
.nav-toggle-icon,
.nav-toggle-icon::before {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
}
.nav-toggle-icon { position: relative; transform: translateY(-3px); }
.nav-toggle-icon::before { content: ""; position: absolute; top: 6px; left: 0; }

/* ── Hero ────────────────────────────────────────────────────── */

.hero { padding-block: clamp(40px, 5.2vw, 72px) clamp(32px, 4.4vw, 56px); }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 40px);
    align-items: center;
}

.hero-text { display: grid; gap: clamp(20px, 2.4vw, 32px); align-content: start; }

.hero h1 {
    max-width: 15em;
    font-size: clamp(1.875rem, .9rem + 2.3vw, 2.875rem);
    font-weight: 800;
    font-stretch: 104%;
    line-height: 1.08;
    letter-spacing: -.026em;
    text-wrap: balance;
}

.lede {
    max-width: 34em;
    color: var(--ink-2);
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    line-height: 1.5;
    text-wrap: pretty;
}

.hero-note {
    color: var(--ink-2);
    font-size: .9375rem;
    font-weight: 500;
}

.hero-offer { justify-self: end; width: min(100%, 440px); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.hero-offer-eyebrow { font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hero-offer-period { display: flex; align-items: flex-end; gap: 18px; margin: 16px 0 24px; color: var(--deep); }
.hero-offer-period strong { font-size: clamp(88px, 9vw, 128px); font-weight: 800; letter-spacing: -.07em; line-height: .9; }
.hero-offer-period span { padding-bottom: 4px; font-size: 1.625rem; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.hero-offer h2 { font-size: 1.625rem; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; }
.hero-offer-copy { margin-top: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.hero-offer .btn { display: flex; justify-content: space-between; margin-top: 24px; width: 100%; }
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-offer { justify-self: start; width: 100%; max-width: 600px; }
}
@media (max-width: 560px) {
    .hero-offer { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px 20px; padding: 24px; }
    .hero-offer-eyebrow, .hero-offer .btn { grid-column: 1 / -1; }
    .hero-offer-period { grid-row: 2 / 4; margin: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
    .hero-offer-period strong { font-size: 80px; }
    .hero-offer-period span { font-size: 1.25rem; }
    .hero-offer-period br { display: none; }
    .hero-offer h2 { align-self: end; font-size: 1.5rem; }
    .hero-offer-copy { margin: 0; font-size: .875rem; }
    .hero-offer .btn { margin-top: 4px; }
}

/* ── Contact ─────────────────────────────────────────────────── */

.contact-item {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding: 20px 0;
    border-top: 1px solid var(--line);
}
.contact-item:last-child { border-bottom: 1px solid var(--line); }
.contact-item h2 { font-size: 1.0625rem; font-weight: 700; }
.contact-item p { color: var(--ink-2); }


/* ── Inner page header ───────────────────────────────────────── */

.page-head {
    padding-block: clamp(16px, 1.8vw, 24px) clamp(18px, 2.2vw, 26px);
    border-bottom: 1px solid var(--line);
}
.page-head h1 {
    font-size: clamp(1.625rem, 1.3rem + .9vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.018em;
    text-wrap: balance;
}
.page-head .lede { margin-top: 6px; font-size: 1rem; }

.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Search ──────────────────────────────────────────────────── */

.search { width: min(100%, 380px); }
.search-field {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(255, 255, 255, .55);
}
.search-field:focus-within { border-color: var(--ink); outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.search-input {
    flex: 1;
    min-width: 0;
    padding: 0 12px 0 38px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 500 1rem/1 var(--font);
    outline: none;
}
.search-input::placeholder { color: #59655d; opacity: 1; }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search-submit {
    padding: 0 16px;
    border: 0;
    border-radius: 0 3px 3px 0;
    background: var(--ink);
    color: var(--paper);
    font: 600 .9375rem/1 var(--font);
    cursor: pointer;
    transition: background-color .15s;
}
.search-submit:hover { background: var(--deep); }
.search-submit:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.results { margin-bottom: 20px; color: var(--ink-2); font-size: .9375rem; }

/* ── Contact form ────────────────────────────────────────────── */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 5vw, 64px);
    padding-block: clamp(28px, 3.5vw, 48px) clamp(48px, 5vw, 72px);
}

.contact-form-panel { min-width: 0; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: 8px; background: #f7f8f2; }
.contact-form-title { margin-bottom: 24px; font-size: 1.375rem; letter-spacing: -.025em; }
.contact-form-panel .form, .contact-form-panel .notice { max-width: none; }
.contact-aside .contact-item:first-child { padding-top: 0; border-top: 0; }
.contact-aside .contact-item p { max-width: 28rem; font-size: .9375rem; }
.contact-aside .text-link { font-size: .875rem; }

.form { display: grid; gap: 22px; max-width: 40rem; }
.form-legal { color: var(--ink-2); font-size: .8125rem; line-height: 1.55; }
.form-legal a { color: var(--ink); text-underline-offset: 3px; }
.form-legal a:hover { color: var(--accent-strong); }
.form-row { display: grid; gap: 22px; }
.form .field-label { color: var(--ink); }
.form-note { color: var(--ink-2); font-size: .9375rem; }

textarea.field-input {
    height: auto;
    min-height: 168px;
    padding: 14px 16px;
    font-weight: 400;
    line-height: 1.5;
    resize: vertical;
}

select.field-input {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%230f1a14' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
}
select.field-input:invalid { color: #59655d; }

.field-input.is-invalid { border-color: var(--error); }
.field-error { margin-top: 6px; color: var(--error); font-size: .875rem; font-weight: 500; line-height: 1.4; }

.notice {
    max-width: 40rem;
    padding: 18px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(255, 255, 255, .45);
}
.notice h2 { margin-bottom: 6px; font-size: 1.0625rem; font-weight: 700; }
.notice p { color: var(--ink-2); }
.notice ul { display: grid; gap: 4px; padding-left: 18px; list-style: disc; }
.notice a { color: var(--ink); text-underline-offset: 3px; }
.notice-error { border-color: var(--error); margin-bottom: 22px; }
.notice-error h2 { color: var(--error); }
.notice:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.notice .text-link { display: inline-block; margin-top: 12px; }

/* Honeypot: present for scripts, invisible and unreachable for people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-aside { display: grid; gap: 0; align-content: start; }

@media (min-width: 640px) {
    .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
    .contact { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .contact-aside { grid-column: 1; grid-row: 1; }
    .contact-form-panel { grid-column: 2; grid-row: 1; }
}

/* Pricing switches remain ordinary links when JavaScript is unavailable. */
.pricing { padding-block: 32px 64px; }
.pricing-tabs { --platform-index: 0; position: relative; display: flex; width: min(100%, 26rem); padding: 5px; border-radius: 10px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
[data-pricing][data-platform="embedded"] .pricing-tabs { --platform-index: 1; }
.pricing-tabs::before { content: ""; position: absolute; top: 5px; left: 5px; width: calc((100% - 10px) / 2); height: calc(100% - 10px); border: 1px solid var(--line); border-radius: 6px; background: #f7f8f2; transform: translateX(calc(var(--platform-index) * 100%)); transition: transform .22s ease; }
.pricing-tab { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px; border-radius: 6px; color: var(--ink-2); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.pricing-tab.is-selected { color: var(--accent-strong); }
.pricing-tab-check { flex: none; opacity: 0; transition: opacity .15s ease; }
.pricing-tab.is-selected .pricing-tab-check { opacity: 1; }
.pricing-tab:hover { color: var(--ink); }
.pricing-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-block: 40px; }
.pricing-eyebrow { color: var(--accent-strong); font-size: .75rem; font-weight: 650; }
.pricing-intro h2 { max-width: 12em; margin-top: 16px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.15; }
.pricing-intro > p:not(.pricing-eyebrow) { max-width: 27rem; margin-top: 20px; color: var(--ink-2); }
.pricing-intro .text-link { display: inline-flex; gap: 12px; margin-top: 24px; font-size: .875rem; }
.pricing-details { min-width: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 8px; background: #f7f8f2; }
.billing-tabs { --billing-index: 0; position: relative; display: flex; padding: 5px; margin-bottom: 24px; border-radius: 8px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
[data-pricing][data-billing="yearly"] .billing-tabs { --billing-index: 1; }
.billing-tabs::before { content: ""; position: absolute; top: 5px; left: 5px; width: calc((100% - 10px) / 2); height: calc(100% - 10px); border-radius: 5px; background: var(--accent-strong); transform: translateX(calc(var(--billing-index) * 100%)); transition: transform .22s ease; }
.billing-tab { position: relative; display: flex; flex: 1; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 44px; padding: 8px; border-radius: 5px; text-decoration: none; font-size: .8125rem; font-weight: 600; transition: color .15s ease; }
.billing-tab.is-selected { color: #f7f8f2; }
.billing-tab:not(.is-selected):hover { color: var(--accent-strong); }
.billing-saving { padding: 3px 6px; border-radius: 3px; background: rgba(42,98,68,.1); color: var(--accent-strong); font-size: .625rem; font-weight: 600; white-space: nowrap; }
.billing-tab.is-selected .billing-saving { background: rgba(255,255,255,.13); color: #f7f8f2; }
.plan-price-label { color: var(--ink-2); font-size: .75rem; font-weight: 600; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 16px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.plan-price strong { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -.045em; }
.plan-price > span { color: var(--ink-2); font-size: .9375rem; }
.price-note { min-height: 2.75em; margin-top: 12px; color: var(--ink-2); font-size: .8125rem; }
.plan-terms { margin: 24px 0; font-size: .9375rem; }
.plan-terms > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); }
.plan-terms > div:last-child { border-bottom: 1px solid var(--line); }
.plan-terms dt { color: var(--ink-2); }
.plan-terms dd { margin: 0; font-weight: 650; }
.pricing-details .btn { width: 100%; }
/* A note right before the button (the Shopify card's trial note) leaves the button touching it: the list above gives its 24px to the note, not to the button. */
.pricing-details .price-note + .btn { margin-top: 24px; }
.pricing-footnote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); }
.pricing-calculator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-block: 40px; border-top: 1px solid var(--line); }
.calculator-controls { min-width: 0; }
.calculator-controls h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.calculator-intro { max-width: 34rem; margin-top: 8px; color: var(--ink-2); font-size: .9375rem; }
.order-input-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.order-input-row label { font-size: .9375rem; font-weight: 600; }
.order-input-row .field-input { width: 9rem; min-width: 0; height: 48px; text-align: right; font-size: 1rem; font-variant-numeric: tabular-nums; }
.order-range { --range-progress: 10%; display: block; width: 100%; height: 48px; margin: 16px 0 0; border: 0; border-radius: 8px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.order-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--accent-strong) 0 var(--range-progress), var(--paper-3) var(--range-progress) 100%); }
.order-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; border: 4px solid var(--accent-strong); border-radius: 50%; background: #f7f8f2; box-shadow: 0 2px 5px rgba(15,26,20,.12); appearance: none; -webkit-appearance: none; }
.order-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--paper-3); }
.order-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent-strong); }
.order-range::-moz-range-thumb { width: 16px; height: 16px; border: 4px solid var(--accent-strong); border-radius: 50%; background: #f7f8f2; box-shadow: 0 2px 5px rgba(15,26,20,.12); }
.order-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(42,98,68,.1); }
.order-range:hover::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(42,98,68,.1); }
.range-labels { display: flex; justify-content: space-between; color: var(--ink-2); font-size: .75rem; font-variant-numeric: tabular-nums; }
.order-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.order-presets button { min-height: 44px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 999px; background: #f7f8f2; color: var(--ink-2); font: 600 .8125rem/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.order-presets button:hover { background: var(--paper-2); }
.order-presets button[aria-pressed="true"] { border-color: var(--accent-strong); color: #f7f8f2; background: var(--accent-strong); }
.calculator-estimate { position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--accent-strong); border-radius: 10px; background: var(--accent-strong); color: #f7f8f2; }
.estimate-plan { display: inline-flex; padding: 5px 10px; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; color: #f7f8f2; font-size: .75rem; font-weight: 600; }
.estimate-label { margin-top: 20px; color: #e5f0e9; font-size: .875rem; }
.estimate-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 4px; font-size: clamp(1.625rem, 4.5vw, 3.5rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.estimate-period { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: #e5f0e9; }
.estimate-breakdown { margin: 24px 0 0; font-size: .875rem; }
.estimate-breakdown > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-block: 12px; border-top: 1px solid rgba(255,255,255,.23); }
.estimate-breakdown dt { color: #e5f0e9; }
.estimate-breakdown dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.estimate-breakdown .estimate-average { font-size: .8125rem; }
.estimate-note { margin-top: 16px; color: #e5f0e9; font-size: .75rem; line-height: 1.5; }
.calculator-estimate.is-invalid .estimate-total { color: #d3e4d8; }
.estimate-sheen { position: absolute; inset: -40px; z-index: 1; transform: translateX(-120%); opacity: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .estimate-sheen { display: none; } }
@media (max-width: 760px) {
    .pricing { padding-block: 20px 40px; }
    .pricing-tab { flex: 1; }
    .pricing-plan { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 28px; }
    .pricing-calculator { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 28px; }
    .pricing-intro h2 { max-width: 16em; }
}
@media (max-width: 560px) {
    .order-input-row { flex-direction: column; align-items: stretch; }
    .order-input-row .field-input { width: 100%; text-align: left; }
}

/* ── Design library ──────────────────────────────────────────── */

.library { --search-gap: 28px; padding-block: var(--search-gap) clamp(56px, 7vw, 104px); }

.design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    grid-auto-rows: 1fr; /* every card is as tall as the tallest one */
    gap: 24px;
}
/* One solid card: the preview and the name belong together. */
.design-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #f7f8f2;
}
/* The preview area has a fixed shape; the preview is fitted inside it and
   never changes the card's size, so portrait and square designs line up. */
.design-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-bottom: 1px solid var(--line);
}
.design-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    object-fit: contain;
}
.design-meta { flex: 1; padding: 14px 16px 16px; }
.design-name { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.design-text { margin-top: 4px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-weight: 500;
}
.pager a { text-underline-offset: 4px; }
.pager [aria-disabled="true"] { color: var(--ink-2); opacity: .55; }

.empty { max-width: 34rem; padding-block: clamp(32px, 4.5vw, 56px) clamp(56px, 7vw, 104px); }
.empty h2 { font-size: 1.25rem; font-weight: 700; }
.empty p { margin-top: 8px; color: var(--ink-2); }
.empty .btn { margin-top: 20px; }

/* ── Feature list (Solutions, Integrations) ──────────────────── */

.features { padding-block: clamp(20px, 2.8vw, 36px) clamp(56px, 7vw, 104px); }
.feature { display: grid; gap: 8px; padding-block: 22px; border-top: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1875rem; font-weight: 700; line-height: 1.25; }
.feature p { max-width: 42rem; color: var(--ink-2); }

@media (min-width: 900px) {
    .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: baseline; }
}

/* ── Live product stage ──────────────────────────────────────── */

.designer {
    padding-block: clamp(48px, 6vw, 96px);
    background: var(--paper-2);
    border-block: 1px solid var(--line);
}

.designer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
    margin-bottom: clamp(20px, 2.4vw, 32px);
}
.designer-head h2 {
    font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}

/* ── Personalization controls ────────────────────────────────── */

.controls {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px 18px;
    margin-top: 24px;
}
.controls[hidden] { display: none; }

.field-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-2);
    font: 600 .875rem/1.2 var(--font);
}

.field-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(255, 255, 255, .45);
    color: var(--ink);
    font: 500 1rem/1 var(--font);
}
.field-input::placeholder { color: #59655d; opacity: 1; }
.field-input:focus-visible { outline-offset: 1px; border-color: var(--ink); }

.field { min-width: 0; }
.field--text, .field--option { grid-column: span 3; }
.field--picker { grid-column: span 2; }
.field--color { grid-column: 1 / -1; }

.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumb {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    /* Artwork is printed on a dark frame; light pieces need a dark tile to read. */
    background: #59635b;
    cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
}
.swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }

.segments {
    display: flex;
    overflow: hidden;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
}
.segment {
    flex: 1;
    height: 43px;
    padding: 0 12px;
    border: 0;
    border-left: 1.5px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font: 600 .9375rem/1 var(--font);
    cursor: pointer;
}
.segment:first-child { border-left: 0; }
.segment[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── Spec strip ──────────────────────────────────────────────── */

.spec-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 28px;
    margin-top: clamp(48px, 7vw, 96px);
    padding-bottom: clamp(48px, 7vw, 96px);
}
.spec { padding-top: 16px; border-top: 2px solid var(--ink); }
.spec-title { margin-top: 0; font-size: 1.25rem; font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; }
.spec-text { margin-top: 8px; max-width: 24em; color: var(--ink-2); font-size: .9688rem; line-height: 1.5; }

/* ── Footer ──────────────────────────────────────────────────── */

/* A deep-forest closing band: the brand, three short columns, and a quiet bottom bar. Colours are solid (not translucent) so every
   text/background pair keeps its contrast: the paper-on-deep pair is about 10.8 : 1, the dimmest text 6 : 1. The only soft element is a
   faint light at the top-left corner and a hairline along the top edge: neither carries text. */
.site-footer {
    --footer-bg: var(--deep);
    --footer-ink: #eff0e8;
    --footer-link: #cdd6ca;
    --footer-muted: #aeb9ab;
    --footer-heading: #9ec4ab;
    --footer-line: rgba(239, 240, 232, .14);
    --footer-line-strong: rgba(239, 240, 232, .34);
    --footer-focus: #cfe3d6;
    position: relative;
    background: radial-gradient(64rem 28rem at 6% -12%, rgba(158, 196, 171, .11), transparent 70%), var(--footer-bg);
    color: var(--footer-muted);
    font-size: .9375rem;
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(158, 196, 171, .5) 18%, rgba(158, 196, 171, .5) 82%, transparent);
    pointer-events: none;
}
.site-footer :focus-visible { outline-color: var(--footer-focus); }

.footer-main {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px);
    padding-block: clamp(52px, 6vw, 88px) clamp(40px, 4.5vw, 64px);
}

/* The brand and every column start on one hairline, so their tops line up whatever their contents are. */
.footer-about, .footer-column { padding-top: 20px; border-top: 1px solid var(--footer-line); }
.footer-about { display: grid; align-content: start; justify-items: start; gap: 16px; }
.footer-brand { display: inline-block; padding-block: 2px; text-decoration: none; }
/* The wordmark's first letter has a little side bearing: pull it back so its edge meets the text below. */
.footer-brand .bl-wordmark { margin-left: -2px; color: var(--footer-ink); font-size: 2.125rem; }
.footer-tagline { max-width: 20rem; color: var(--footer-muted); font-size: 1.0625rem; line-height: 1.55; text-wrap: balance; }
.footer-nowrap { white-space: nowrap; }

.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 36px clamp(24px, 3.5vw, 64px); align-content: start; }
.footer-heading { margin: 0 0 14px; color: var(--footer-heading); font-size: .75rem; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.footer-list { display: grid; gap: 0; }
.footer-list li { display: flex; align-items: center; gap: 10px; }
.footer-list a {
    padding-block: 7px;
    color: var(--footer-link);
    text-decoration: none;
    /* The underline is drawn by a background that grows from the left on hover. */
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1.5px no-repeat;
    transition: color .15s, background-size .22s ease;
}
.footer-list a:hover { color: var(--footer-ink); background-size: 100% 1.5px; }
/* A page that is not ready: shown, labelled and quiet. */
.footer-list a[data-placeholder-link] { color: var(--footer-muted); cursor: default; }
.footer-list a[data-placeholder-link]:hover { color: var(--footer-muted); background-size: 0 1.5px; }
.footer-soon {
    padding: 3px 7px;
    border: 1px solid var(--footer-line-strong);
    border-radius: 999px;
    color: var(--footer-heading);
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
}

.footer-bar { border-top: 1px solid var(--footer-line); }
.footer-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px; }
.footer-note { color: var(--footer-muted); font-size: .875rem; line-height: 1.5; }
.footer-operator { display: inline-block; margin-left: 12px; }
.footer-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--footer-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--footer-link);
    font: 600 .8125rem/1 var(--font);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.footer-top:hover { background: rgba(239, 240, 232, .1); border-color: var(--footer-link); color: var(--footer-ink); }
.footer-top svg { transition: transform .15s; }
.footer-top:hover svg { transform: translateY(-2px); }

@media (max-width: 900px) {
    .footer-main { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .footer-about { border-top: 0; padding-top: 0; }
    .footer-tagline { max-width: 26rem; }
}
@media (max-width: 560px) {
    /* Product is the long list: it spans the row in two columns, Company and Legal share the next one. */
    .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .footer-column--product { grid-column: 1 / -1; }
    .footer-column--product .footer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
    /* Thumb-sized rows on a phone. */
    .footer-list a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
    .footer-operator { display: block; margin: 4px 0 0; }
}
/* Windows high-contrast mode removes backgrounds, and the hover underline is one: draw it as a real underline there. */
@media (forced-colors: active) {
    .footer-list a:hover { text-decoration: underline; text-underline-offset: 5px; }
    .footer-list a[data-placeholder-link]:hover { text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-top:hover svg { transform: none; }
    .footer-list a { transition: color .15s; }
}
@media print {
    .site-footer { background: none; color: #000; }
    .site-footer::before { display: none; }
    .footer-nav, .footer-top, .footer-soon { display: none; }
    .footer-main { padding-block: 16px; }
    .footer-about { border-top: 0; padding-top: 0; }
    .footer-brand .bl-wordmark { color: #000; }
    .footer-bar { border-top-color: #999; }
}

/* ── Responsive ──────────────────────────────────────────────── */

/* Laptop widths: the links sit a little closer. "Sign in" stays: people who already have an account need it on every screen. */
@media (max-width: 1399px) and (min-width: 1201px) {
    .nav-link { padding-inline: 10px; }
}

@media (max-width: 1200px) {
    :root { --header-h: 64px; }

    .nav-toggle { display: inline-flex; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 12px var(--gutter) 28px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
    }
    .site-nav.is-open { display: flex; }

    .nav-list { flex-direction: column; gap: 0; }
    .nav-link { width: 100%; height: 52px; padding-inline: 0; border-bottom: 1px solid var(--line); border-radius: 0; justify-content: space-between; }
    .nav-link:hover, .nav-link[aria-expanded="true"] { background: none; }
    .nav-link--badged { justify-content: flex-start; }
    .nav-badge { position: static; transform: none; }

    .menu-panel { position: static; width: auto; padding: 0; border: 0; box-shadow: none; }
    .menu-grid { grid-template-columns: 1fr; }
    .menu-groups { grid-template-columns: minmax(0, 1fr); }
    .menu-column { padding: 12px 0; }
    .menu-column + .menu-column { border-left: 0; border-top: 1px solid var(--line); }
    .menu-column:only-child ul { columns: 1; column-rule: none; }
    .menu-group-title { padding: 0 0 4px; }
    .menu-link { padding: 12px 0; }
    .menu-link:hover { background: none; }

    .header-actions { justify-content: space-between; flex-wrap: wrap; }
    /* In the drawer the account menu takes the full row and its list opens inline. */
    .account-menu { flex: 1 1 100%; }
    .account-trigger { width: 100%; justify-content: flex-start; }
    .account-trigger .chev { margin-left: auto; }
    .menu-panel--account { width: auto; margin-top: 8px; border: 1px solid var(--line-strong); }

    .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 640px) {
    .field--text, .field--option, .field--picker { grid-column: 1 / -1; }
    .thumb { width: 46px; height: 46px; }
}

@media (max-width: 560px) {
    .design-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .design-grid.design-grid--single { grid-template-columns: minmax(0, 1fr); max-width: none; }
    .design-thumb img { padding: 8px; }
    .design-meta { padding: 10px 12px 12px; }
    .design-name { font-size: .9375rem; }
    .design-text { display: none; }
    .spec-strip { grid-template-columns: minmax(0, 1fr); }
    }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* Shared wordmark, mobile navigation and library refinements. */
.brand { flex: none; padding-block: 8px; }
.header-actions { flex: none; gap: 16px; }
/* A click target of at least 24px (WCAG 2.2, 2.5.8): the text link was 23px high. */
.header-actions .text-link { display: inline-flex; align-items: center; min-height: 32px; }
.library-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: var(--search-gap); }
.library-search { width: 100%; }
.library-search .search-field { height: 52px; border-color: var(--line); border-radius: 8px; background: #f7f8f2; }
.library-search .search-field:focus-within { border-color: var(--accent-strong); }
.library-search .search-icon { left: 16px; }
.library-search .search-input { padding-left: 44px; }
.library-search .search-input::-webkit-search-cancel-button { display: none; }
.library-search .search-submit { align-self: center; height: 40px; margin: 5px; padding-inline: 20px; border-radius: 5px; }
.search-clear { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-2); border-radius: 5px; cursor: pointer; }
.search-clear:hover { background: var(--paper-2); color: var(--ink); }
.search-spinner { flex: none; width: 18px; height: 18px; margin-right: 16px; border: 2px solid var(--line); border-top-color: var(--accent-strong); border-radius: 50%; animation: search-spin .7s linear infinite; }
.search-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: .875rem; }
.search-feedback button { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
[data-design-results][aria-busy="true"] .pager { opacity: .5; pointer-events: none; }
@keyframes search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .search-spinner { animation: none; } }
.design-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 24px; }
.design-card { border-color: var(--line); border-radius: 12px; background: #f7f8f2; box-shadow: 0 2px 6px rgba(15,26,20,.025); }
.design-card-link { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: inherit; }
.design-card-link:hover .design-name { text-decoration: underline; text-underline-offset: 4px; }
.design-card-link:focus:not(:focus-visible), .brand:focus:not(:focus-visible) { outline: none; }
.design-card:has(.design-card-link:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.design-card-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
@supports selector(:has(a:focus-visible)) { .design-card-link:focus-visible { outline: none; } }
.design-thumb { aspect-ratio: 4 / 5; background: linear-gradient(145deg, #f7f8f2, #e8ebdf); border-bottom-color: var(--line); }
.design-thumb img { padding: 24px; }
.design-meta { min-width: 0; padding: 18px 20px 22px; }
.design-type { margin-bottom: 7px; color: var(--accent-strong); font-size: .6875rem; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
/* A long name is cut to one line (the whole name is the tooltip), so every card in a row has the same height. */
.design-name { overflow: hidden; font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.design-text { margin-top: 8px; font-size: .875rem; }
.design-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--ink-2); font-size: .8125rem; text-align: center; }
.design-thumb { overflow: hidden; }
.design-thumb.is-loading img { opacity: 0; }
[data-design-results].is-loading .design-thumb img { opacity: .5; }
[data-design-results].is-loading .design-thumb.is-loading img { opacity: 0; }
.design-thumb.is-loading::after, [data-design-results].is-loading .design-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: design-shimmer 1.35s ease-in-out infinite; pointer-events: none; }
@keyframes design-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .design-thumb.is-loading::after, [data-design-results].is-loading .design-thumb::after { animation: none; background: rgba(255,255,255,.2); } }
[data-design-results][data-live-search] .pager { display: none; }
.library-feed { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
.feed-loading { display: flex; align-items: center; gap: 10px; }
.feed-loading .search-spinner { margin: 0; }
.feed-end { font-size: .8125rem; }
.feed-error { flex-basis: 100%; text-align: center; }
.feed-sentinel { height: 1px; }
.design-detail { padding-block: 24px clamp(36px, 4vw, 56px); }
/* A design's page: tags, what to expect, a call to action for shop owners, and more designs to look at. */
.design-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; padding: 0; list-style: none; }
.design-tag { display: inline-flex; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.design-tag:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }

.design-band { margin-top: clamp(24px, 4vw, 56px); padding-block: clamp(40px, 5vw, 72px); border-block: 1px solid var(--line); background: var(--paper-2); }
.design-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.design-band-eyebrow { color: var(--accent-strong); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.design-band h2 { margin-top: 10px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 780; line-height: 1.12; letter-spacing: -.024em; text-wrap: balance; }
.design-band p:not(.design-band-eyebrow) { margin-top: 12px; max-width: 34em; color: var(--ink-2); }
.design-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.design-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: design-step; }
.design-steps li { padding-top: 14px; border-top: 2px solid var(--ink); counter-increment: design-step; }
.design-steps li::before { content: counter(design-step, decimal-leading-zero); color: var(--accent-strong); font-size: .75rem; font-weight: 750; letter-spacing: .06em; }
.design-steps h3 { margin-top: 6px; font-size: 1rem; font-weight: 700; }
.design-steps p { margin-top: 6px; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }

.design-related { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.design-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; }
.design-related-head h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 780; letter-spacing: -.022em; }
@media (max-width: 900px) {
    .design-band-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .design-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
.design-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--ink-2); font-size: .8125rem; }
.design-breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; text-underline-offset: 3px; }
.design-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personalizer-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.personalizer-preview { position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; }
.personalizer-stage { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--design-ratio, 1); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.personalizer-stage.is-loading { background: linear-gradient(145deg, #f7f8f2, #e8ebdf); }
.personalizer-stage.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.8) 50%, transparent 80%); animation: design-shimmer 1.8s ease-in-out infinite; pointer-events: none; }
.personalizer-stage.is-loading .personalizer-fallback { opacity: .18; }
.personalizer-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: clamp(16px, 3vw, 32px); }
.personalizer-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; background: transparent; }
.personalizer-stage.is-live .personalizer-frame { display: block; position: static; min-height: 120px; opacity: 1; }
.personalizer-loading { position: absolute; bottom: 16px; left: 50%; z-index: 2; transform: translateX(-50%); display: flex; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: .8125rem; white-space: nowrap; }
.personalizer-loading .search-spinner { width: 14px; height: 14px; margin-right: 8px; }
.personalizer-error { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: .875rem; }
.personalizer-error button, .personalizer-reset { border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0; }
/* The word keeps its place; the area around it is big enough to hit (24px). */
.personalizer-reset { min-height: 24px; padding-inline: 6px; margin-inline: -6px; }
.personalizer-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px; }
.personalizer-heading h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -.03em; overflow-wrap: anywhere; }
.personalizer-eyebrow { color: var(--ink-2); font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.personalizer-description { color: var(--ink-2); margin-bottom: 24px; font-size: .9375rem; }
.personalizer-form { display: grid; gap: 24px; }
.personalizer-field { min-width: 0; padding: 0; margin: 0; border: 0; }
.personalizer-field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.personalizer-field label, .personalizer-field legend { font-size: .75rem; font-weight: 650; letter-spacing: .04em; }
.personalizer-field legend { margin-bottom: 10px; }
.personalizer-counter { color: var(--ink-2); font-size: .75rem; }
.personalizer-form textarea.personalizer-text { display: block; min-height: 50px; height: auto; padding: 13px 16px; resize: vertical; font-weight: 400; line-height: 1.5; }
.personalizer-style { margin-top: 10px; font-size: .8125rem; color: var(--ink-2); }
.personalizer-style summary { width: fit-content; cursor: pointer; }
.personalizer-style-row { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.personalizer-style-row select { min-width: 0; font-size: .875rem; }
.personalizer-color { flex: none; width: 52px; height: 44px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }
.personalizer-thumbs { display: flex; flex-wrap: wrap; gap: 8px; max-height: 280px; overflow-y: auto; padding: 3px; }
.personalizer-thumb { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; flex: none; width: 72px; height: 72px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font: 500 .75rem/1.2 var(--font); overflow: hidden; }
.personalizer-thumb[aria-pressed="true"] { border-color: var(--accent-strong); outline: 2px solid var(--accent-strong); }
/* Definite tracks: with an auto row the image's 100% height is circular, the row grew to the picture's own proportion and overflow:hidden cut the bottom off. */
.personalizer-thumb img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.personalizer-image-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.personalizer-filter { padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink-2); font: 500 .75rem/1.4 var(--font); cursor: pointer; }
.personalizer-filter[aria-pressed="true"] { border-color: var(--accent-strong); color: var(--deep); background: var(--paper-2); }
.personalizer-conditional { margin-top: 20px; display: grid; gap: 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.personalizer-conditional-title { font-size: .9375rem; font-weight: 700; }
.personalizer-note { margin-top: 16px; color: var(--ink-2); font-size: .8125rem; }
@media (prefers-reduced-motion: reduce) { .personalizer-stage.is-loading::after { animation: none; background: rgba(255,255,255,.2); } }
/* With products under the design its column is long, so it is the form that stays in view: a tall form scrolls inside itself. The markup has the
   design, the form (the title) and then the products; the areas put the products under the design and the form beside both. The space between the
   design and its products is the grid's own margin (the layout's gap is for the column between the design and the form, which is wide). */
.personalizer-layout.has-products { grid-template-areas: "preview options" "products options"; grid-template-rows: auto 1fr; row-gap: 0; }
.personalizer-layout.has-products .personalizer-preview { position: static; grid-area: preview; }
.personalizer-layout.has-products .design-products { grid-area: products; margin-top: 36px; }
.personalizer-layout.has-products .personalizer-options { grid-area: options; position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-x: hidden; overflow-y: auto; margin: -8px; padding: 8px; scrollbar-width: thin; }
@media (max-width: 900px) {
    .personalizer-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .personalizer-preview { position: static; }
    .personalizer-layout.has-products .personalizer-options { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
    /* Stacked, the form comes straight after the picture and the products after the form: the column's parts take their own places. */
    .personalizer-layout.has-products { display: flex; flex-direction: column; align-items: stretch; row-gap: 28px; }
    .personalizer-layout.has-products .personalizer-preview { display: contents; }
    .personalizer-layout.has-products .personalizer-stage, .personalizer-layout.has-products .personalizer-error, .personalizer-layout.has-products .personalizer-preview > noscript { order: 1; }
    .personalizer-layout.has-products .personalizer-options { order: 2; }
    .personalizer-layout.has-products .design-products { order: 3; margin-top: 28px; }
}
.library-empty { display: grid; justify-items: center; gap: 14px; padding: clamp(40px, 6vw, 80px) 20px; border: 1px dashed var(--line-strong); border-radius: 12px; text-align: center; background: rgba(255,255,255,.25); }
.library-empty-symbol { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent-strong); font-size: 1.5rem; }
.library-empty h2 { max-width: 30ch; font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.library-empty p { color: var(--ink-2); font-size: .9375rem; }
.library-empty .btn { margin-top: 6px; }
.pager { flex-wrap: wrap; }
.pager a, .pager > span:first-child, .pager > span:last-child { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1200px) {
    .site-nav { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }
    .header-actions { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
    .header-actions .text-link { min-height: 44px; display: inline-flex; align-items: center; margin-right: auto; }
}
@media (max-width: 700px) {
    .library { --search-gap: 20px; }
    .library-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
    .library-search { width: 100%; }
    .design-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .design-thumb img { padding: 12px; }
    .design-meta { padding: 12px 12px 16px; }
    .design-name { font-size: .9375rem; }
    .design-type { font-size: .5625rem; letter-spacing: .02em; }
}
@media (max-width: 380px) {
    .hero-offer { grid-template-columns: 5.75rem minmax(0, 1fr); gap: 12px 16px; padding: 20px; }
    .hero-offer-period strong { font-size: 72px; }
    .header-row { gap: 16px; }
    .nav-toggle { padding-inline: 12px; }
    .library-search .search-submit { padding-inline: 12px; }
    .design-grid { gap: 12px; }
}