/* The Better After Studio. Bootstrap's reboot and grid load first; everything else the site looks like is in this file.
   The admin loads it too, under admin.css. */

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/jost-latin-500-normal.woff2") format("woff2");
}

/* The naira sign (U+20A6) is not in the fonts' Latin files, so prices would fall back to another font. These faces give
   it from each font's Latin Extended file, which browsers only download for a page that shows a price. */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+20A6;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/jost-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+20A6;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/jost-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+20A6;
}

/* Design tokens: the five brand colours and nothing else, apart from white cards and the error red.
   Contrast, from the brand guide: Charcoal on Cream 13.1, on Oat 10.7 (any text). Warm Brown on Cream 4.6 (headings,
   links, buttons), on white 4.9, on Oat only 3.7 (large headings only), so small brown text switches to Charcoal on Oat.
   Cream on Warm Brown is 4.6, for button text. Sand is for lines and icons, and for text only on Charcoal (6.3). */
:root {
    --cream: #f8f6f2;
    --charcoal: #2b2b2b;
    --brown: #8b6a48;
    --brown-dark: #6f5439;
    --oat: #eadfcc;
    --sand: #c9a77a;
    --white: #ffffff;
    --muted: #5e564c;
    --field-border: #9c8b74;
    --error: #a3261d;
    --on-dark-soft: #ddd3c4;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 12px;
    --radius-large: 22px;
    --section-space: 4.5rem;
    --shadow-soft: 0 24px 48px -28px rgba(43, 43, 43, 0.35);
    --bs-body-font-family: var(--sans);
    --bs-body-font-weight: 400;
    --bs-body-color: var(--charcoal);
    --bs-body-bg: var(--cream);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.7;
    --bs-link-color-rgb: 139, 106, 72;
    --bs-link-hover-color-rgb: 111, 84, 57;
    --bs-heading-color: var(--brown);
}

/* On a short page the footer still sits at the bottom of the screen, with no gap beneath it. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#main {
    flex: 1 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* The order form sits below a sticky header, so a jump to it leaves the header clear. */
[id] {
    scroll-margin-top: 5.5rem;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--brown);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

h2 {
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

/* Small headings are Charcoal, so they read on Oat as well as Cream. */
h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
}

p {
    max-width: 62ch;
}

a {
    color: var(--brown);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

a:hover {
    color: var(--brown-dark);
}

img {
    max-width: 100%;
    height: auto;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.on-dark :focus-visible {
    outline-color: var(--sand);
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
    color: var(--cream);
}

.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;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--charcoal);
    color: var(--cream);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 0.75rem;
    color: var(--cream);
}

.icon {
    width: 1em;
    height: 1em;
    flex: none;
    stroke-width: 1.5;
}

.text-center {
    text-align: center;
}

.text-center p,
p.text-center {
    margin-inline: auto;
}

/* Small labels in spaced capitals, as the brand guide asks. Brown on Cream and white; Charcoal on Oat, where small brown
   text would be too faint. */
.eyebrow {
    margin-bottom: 1rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brown);
}

.section-oat .eyebrow {
    color: var(--charcoal);
}

/* Buttons: soft pills in Warm Brown. One primary per view; anything secondary is a plain link with an arrow. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 0;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.btn-primary {
    min-height: 3rem;
    padding: 0.75rem 1.75rem;
    background: var(--brown);
    color: var(--cream);
}

.btn-primary:hover {
    background: var(--brown-dark);
    color: var(--cream);
}

/* A form on its way (site.js): the button stays readable but shows it is working, and takes no more clicks. */
.btn-primary:disabled {
    background: var(--brown);
    cursor: progress;
    opacity: 0.8;
}

.btn-secondary {
    padding: 0.75rem 0;
    background: none;
    color: var(--charcoal);
}

.btn-secondary:hover {
    color: var(--brown-dark);
    text-decoration: underline;
}

/* A buy button while the product is not on sale yet: plainly switched off, in the brand's Oat. */
.btn-soon,
.btn-soon:disabled {
    min-height: 3rem;
    padding: 0.75rem 1.75rem;
    background: var(--oat);
    color: var(--charcoal);
    cursor: not-allowed;
    opacity: 1;
}

.btn-large {
    min-height: 3.5rem;
    padding-inline: 2rem;
    font-size: 1.0625rem;
}

.btn-block {
    width: 100%;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 2rem;
}

.button-row-center {
    justify-content: center;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(248, 246, 242, 0.94);
    border-bottom: 1px solid var(--oat);
    backdrop-filter: saturate(1.2) blur(8px);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
}

.site-logo {
    display: block;
    margin-right: auto;
}

.site-logo img {
    display: block;
    width: 180px;
    height: auto;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-right: -0.5rem;
    color: var(--charcoal);
    font-size: 1.6rem;
    border-radius: var(--radius);
}

.menu-toggle span:not(.visually-hidden) {
    display: inline-flex;
}

.menu-toggle-close,
.menu-toggle.is-open .menu-toggle-open {
    display: none !important;
}

.menu-toggle.is-open .menu-toggle-close {
    display: inline-flex !important;
}

.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--oat);
    padding: 0.5rem 0.75rem 1.25rem;
}

.site-nav.is-open {
    display: block;
}

.site-nav a {
    display: block;
    padding: 0.85rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--charcoal);
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--brown);
    text-decoration: underline;
    text-decoration-color: var(--sand);
    text-underline-offset: 0.5em;
}

/* Sections: Cream and Oat take turns, and thin Sand rules part two Cream ones. */
.section {
    padding-block: var(--section-space);
}

.section-oat {
    background: var(--oat);
}

.section-rule {
    border-top: 1px solid var(--sand);
}

.section-title {
    margin-bottom: 2.5rem;
}

.narrow {
    max-width: 46rem;
}

.narrow.text-center {
    margin-inline: auto;
}

.hero-lead {
    font-size: 1.1875rem;
    line-height: 1.65;
    max-width: 36rem;
}

.text-center .hero-lead {
    margin-inline: auto;
}

/* A short line in the serif, spoken plainly. */
.statement {
    max-width: 40rem;
    margin-bottom: 0;
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.6vw, 2.15rem);
    font-style: italic;
    line-height: 1.35;
    color: var(--charcoal);
}

.fine-print {
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.fine-print .icon {
    vertical-align: -0.125em;
    color: var(--brown);
}

.fine-print-dots span {
    margin-inline: 0.35rem;
    color: var(--sand);
}

/* Home: the hero, with the horizon drawn large beside it. */
.hero {
    padding-block: 3rem var(--section-space);
}

.hero-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.hero-art {
    order: -1;
    color: var(--sand);
}

.horizon-art {
    display: block;
    width: 96px;
    height: 64px;
    stroke-width: 1.5px;
}

.price {
    margin: 1.5rem 0;
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--brown);
}

.price-large {
    margin-block: 0.25rem 1.75rem;
    font-size: 3.25rem;
}

/* The tools: one product shows large, with its cover beside it; more sit side by side, each cover above its words. */
.tools {
    display: grid;
    gap: 1.5rem;
}

/* The featured product: a soft card. The cover images carry their own Oat surround and shadow, so they fill their panel
   edge to edge, and the panel's Oat shows only around a cover that is narrower than it. */
.feature-card {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--oat);
    border-radius: var(--radius-large);
    background: var(--white);
}

.feature-card-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--oat);
}

.feature-card-cover img {
    display: block;
    width: 100%;
    transition: transform 0.4s ease;
}

.feature-card-cover:hover img {
    transform: scale(1.02);
}

.feature-card-body {
    padding: 2.25rem 1.75rem 2.5rem;
}

.feature-card-body .card-title {
    margin-bottom: 0.75rem;
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brown);
}

/* Three short ideas, each under a thin Sand line. */
.approach {
    display: grid;
    gap: 2.25rem;
}

.approach li {
    padding-top: 1.5rem;
    border-top: 1px solid var(--sand);
}

.approach p,
.phone-features p {
    margin-bottom: 0;
}

.approach-icon {
    display: inline-flex;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: var(--brown);
}

/* Inner pages */
.page-head {
    padding-block: 3.5rem 2.5rem;
}

.page-head-only {
    padding-bottom: var(--section-space);
}

.page-body {
    padding-bottom: var(--section-space);
}

.horizon-small {
    display: inline-flex;
    margin-bottom: 1.5rem;
    color: var(--sand);
    font-size: 4rem;
}

.horizon-small .icon {
    width: 1.5em;
    height: 1em;
    stroke-width: 1.5px;
}

.prose p {
    font-size: 1.125rem;
}

.about-logo {
    display: block;
    width: min(100%, 360px);
    margin-inline: auto;
}

/* A product in parts, on the thank-you page: each part numbered, named and with its own download button. */
.parts {
    max-width: 34rem;
    margin: 2.25rem auto 0;
    text-align: left;
}

.parts-intro {
    margin-bottom: 1rem;
    font-weight: 500;
    text-align: center;
}

.parts-list {
    border-top: 1px solid var(--sand);
}

.parts-list li {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--sand);
}

.parts-number {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--brown);
}

.parts-label {
    font-weight: 500;
    line-height: 1.4;
}

.parts-note {
    margin-top: 1rem;
    text-align: center;
}

.parts-list .btn {
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.9375rem;
}

/* On the narrowest phones each part's button moves under its name, so the name has room. */
@media (max-width: 399.98px) {
    .parts-list li {
        grid-template-columns: 2.25rem 1fr;
    }

    .parts-list .btn {
        grid-column: 2;
        justify-self: start;
    }
}

.next-steps {
    max-width: 30rem;
    margin: 2.75rem auto 0;
    padding: 1.75rem;
    border: 1px solid var(--oat);
    border-radius: var(--radius-large);
    background: var(--white);
    text-align: left;
}

.next-steps h2 {
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.next-steps ol {
    counter-reset: step;
}

.next-steps li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2.5rem;
    counter-increment: step;
}

.next-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--sand);
    border-radius: 50%;
    font-size: 0.875rem;
    color: var(--brown);
}

/* The product page. Built for phones first: visitors arrive from Facebook and Instagram ads. */
.product-hero {
    padding-block: 2.75rem var(--section-space);
}

.product-cover {
    display: block;
    width: min(100%, 460px);
    margin-inline: auto;
    border-radius: var(--radius-large);
}

.signs {
    margin-bottom: 0;
    border-top: 1px solid rgba(43, 43, 43, 0.2);
}

/* "Is this you?" answered beside the list on larger screens, and after it on phones. */
.pull-quote {
    margin: 0;
    padding: 2rem 1.75rem;
    border-radius: var(--radius-large);
    background: var(--cream);
}

.pull-quote p {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    font-style: italic;
    line-height: 1.3;
    color: var(--charcoal);
}

.pull-quote-mark {
    display: inline-flex;
    margin-bottom: 1.25rem;
    color: var(--sand);
    font-size: 2.5rem;
}

.pull-quote-mark .icon {
    width: 1.5em;
    height: 1em;
    stroke-width: 1.5px;
}

.signs li {
    position: relative;
    padding: 1.1rem 0 1.1rem 2.25rem;
    border-bottom: 1px solid rgba(43, 43, 43, 0.2);
    font-size: 1.125rem;
}

.signs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2.05rem;
    width: 1.1rem;
    height: 1px;
    background: var(--brown);
}

.inside {
    display: grid;
    gap: 1rem;
}

.inside li {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--oat);
    border-radius: var(--radius-large);
    background: var(--white);
}

.inside li::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 1px;
    margin-bottom: 1.25rem;
    background: var(--sand);
}

.inside p {
    margin-bottom: 0;
}

.phone-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: var(--oat);
    color: var(--brown);
    font-size: 1.85rem;
}

.phone-features {
    display: grid;
    gap: 1.75rem;
}

.phone-features li {
    padding-top: 1.25rem;
    border-top: 1px solid var(--sand);
}

.phone-features h3 {
    font-size: 1.35rem;
}

/* Sample pages: a row to swipe through on phones, the next page peeking in, four across on larger screens. */
.swipe-hint {
    margin: -1.75rem 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.previews {
    display: grid;
    grid-auto-columns: 68%;
    grid-auto-flow: column;
    gap: 1rem;
    margin-inline: calc(var(--bs-gutter-x) * -0.5);
    padding: 0.5rem calc(var(--bs-gutter-x) * 0.5) 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: calc(var(--bs-gutter-x) * 0.5);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--sand) transparent;
}

.previews li {
    scroll-snap-align: start;
}

.preview-link {
    display: block;
    border-radius: var(--radius);
    cursor: zoom-in;
}

.previews img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

/* The order: what you get on one side, the form on the other. */
.buy-card {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--oat);
    border-radius: var(--radius-large);
    background: var(--white);
}

.buy-summary {
    padding: 2.25rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--oat);
}

.buy-summary h2 {
    margin-bottom: 0.5rem;
}

.buy-points li {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.4rem;
}

.buy-points .icon {
    margin-top: 0.4rem;
    color: var(--brown);
}

.buy-form {
    padding: 2rem 1.5rem 2.25rem;
}

.coming-soon h3 {
    font-size: 1.75rem;
}

/* The larger view of a sample page (site.js): the page as large as the screen allows, on a dark backdrop, with round
   Cream buttons to move between pages and to close. */
.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.lightbox::backdrop {
    background: rgba(43, 43, 43, 0.9);
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

body:has(.lightbox[open]) {
    overflow: hidden;
}

.lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 4rem 1rem 1.5rem;
    max-height: 100%;
}

.lightbox-image {
    display: block;
    max-width: min(100%, 640px);
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    width: auto;
    height: auto;
    border-radius: var(--radius);
}

.lightbox-count {
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--cream);
}

.lightbox-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cream);
    color: var(--charcoal);
    font-size: 1.35rem;
    cursor: pointer;
}

.lightbox-button:hover {
    background: var(--oat);
}

.lightbox-button[hidden] {
    display: none;
}

.lightbox-close {
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
}

.lightbox-previous,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-previous {
    left: 0.75rem;
}

.lightbox-next {
    right: 0.75rem;
}

/* On phones the arrows sit at the bottom, so they never cover the page, which is swiped instead. */
@media (max-width: 767.98px) {
    .lightbox-figure {
        padding-bottom: 5rem;
    }

    .lightbox-previous,
    .lightbox-next {
        top: auto;
        bottom: max(1rem, env(safe-area-inset-bottom));
        transform: none;
    }

    .lightbox-previous {
        left: calc(50% - 3.75rem);
    }

    .lightbox-next {
        right: calc(50% - 3.75rem);
    }
}

/* Common questions, one open at a time if the visitor likes. */
.faq {
    border-top: 1px solid var(--sand);
}

.faq details {
    border-bottom: 1px solid var(--sand);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--charcoal);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary .icon {
    font-size: 1.25rem;
    color: var(--brown);
    transition: transform 0.2s ease;
}

.faq details[open] summary .icon {
    transform: rotate(180deg);
}

.faq details p {
    margin: -0.25rem 0 1.5rem;
}

.care-note {
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--sand);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--white);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.care-note p {
    margin: 0;
}

/* The bar that keeps the order in reach on phones, shown by site.js once the first button scrolls away. */
.buy-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--oat);
    background: var(--cream);
    box-shadow: 0 -8px 24px rgba(43, 43, 43, 0.08);
}

/* With the cookie bar showing as well, the order bar sits just above it. */
body:has(.consent:not([hidden])) .buy-bar {
    bottom: var(--consent-height, 0px);
    padding-bottom: 0.75rem;
}

/* Forms */
.form-card {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--oat);
    border-radius: var(--radius-large);
    background: var(--white);
}

.field {
    margin-bottom: 1.25rem;
}

.site-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--charcoal);
}

.site-form .optional {
    font-weight: 400;
    color: var(--muted);
}

.site-form input,
.site-form select,
.site-form textarea {
    display: block;
    width: 100%;
    min-height: 3.125rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--charcoal);
    font: inherit;
}

.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus {
    border-color: var(--brown);
    outline: 2px solid var(--brown);
    outline-offset: 0;
}

.site-form [aria-invalid="true"] {
    border-color: var(--error);
    border-width: 2px;
}

.field-error {
    margin: 0.4rem 0 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--error);
}

.field-hint {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.form-alert {
    margin-bottom: 1.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--error);
    border-radius: var(--radius);
    background: #fbf1ef;
    color: var(--error);
    font-weight: 500;
}

.grecaptcha-badge {
    visibility: hidden;
}

.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-form .btn {
    margin-top: 0.5rem;
}

.contact-aside h2 {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}

.contact-aside h2:not(:first-child) {
    margin-top: 2rem;
}

/* The legal pages */
.legal > * {
    max-width: 46rem;
}

.legal h2 {
    margin: 2.75rem 0 0.75rem;
    font-size: 1.75rem;
}

.legal-table {
    margin-bottom: 1rem;
    overflow-x: auto;
}

.legal-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal-table th,
.legal-table td {
    padding: 0.7rem 0.75rem 0.7rem 0;
    border-bottom: 1px solid var(--oat);
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    font-weight: 500;
}

/* Cookie choice: a compact bar along the bottom of the screen. No overlay, so the page stays usable behind it. Accepting
   and declining are the same size, and both are plain to see. consent.js sets --consent-height while it shows, which
   lifts the order bar above it and leaves room at the end of the page. */
.consent {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    padding: 0.875rem max(0rem, env(safe-area-inset-right)) max(0.875rem, env(safe-area-inset-bottom))
        max(0rem, env(safe-area-inset-left));
    border-top: 1px solid var(--oat);
    background: var(--white);
    box-shadow: 0 -8px 24px rgba(43, 43, 43, 0.1);
    animation: consent-rise 0.3s ease-out;
}

.consent[hidden] {
    display: none;
}

/* Focus moves to the bar itself when Cookie settings opens it; the link and buttons inside show their own focus. */
.consent:focus {
    outline: none;
}

.consent-inner {
    display: grid;
    gap: 0.75rem;
}

.consent-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
}

.consent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.consent .btn {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--brown);
    font-size: 0.9375rem;
}

.consent .consent-accept {
    background: var(--brown);
    color: var(--cream);
}

.consent .consent-accept:hover {
    background: var(--brown-dark);
    color: var(--cream);
}

.consent .consent-decline {
    background: var(--white);
    color: var(--charcoal);
}

.consent .consent-decline:hover {
    background: var(--cream);
}

body:has(.consent:not([hidden])) {
    padding-bottom: var(--consent-height, 0);
}

@keyframes consent-rise {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Footer: Charcoal, with the light logo, Sand labels and Cream text. */
.site-footer {
    padding-block: 3.5rem 2rem;
    background: var(--charcoal);
    color: var(--cream);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.site-footer a {
    color: var(--cream);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--cream);
    text-decoration: underline;
    text-decoration-color: var(--sand);
}

.site-footer li {
    margin-bottom: 0.5rem;
}

.footer-logo {
    display: block;
    width: 200px;
    margin-bottom: 1.25rem;
}

.footer-copy {
    max-width: 22rem;
    margin-bottom: 0;
    color: var(--on-dark-soft);
}

.footer-heading {
    margin-bottom: 1rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sand);
}

/* The studio's social accounts: round outlined icons in Sand, filled on hover. */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.site-footer .footer-social li {
    margin: 0;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(201, 167, 122, 0.55);
    border-radius: 50%;
    color: var(--sand);
    font-size: 1.15rem;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.footer-social a:hover {
    border-color: var(--sand);
    background: var(--sand);
    color: var(--charcoal);
    text-decoration: none;
}

.footer-legal {
    max-width: none;
    margin: 3rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(201, 167, 122, 0.35);
    font-size: 0.8125rem;
    color: var(--on-dark-soft);
}

.footer-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cream);
    font: inherit;
    cursor: pointer;
}

.footer-button:hover {
    text-decoration: underline;
    text-decoration-color: var(--sand);
}

.footer-button[hidden] {
    display: none;
}

.footer-simple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

.footer-simple ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.footer-simple li,
.footer-simple p {
    margin: 0;
}

/* Roomier side margins on phones than Bootstrap's default. */
.container {
    --bs-gutter-x: 2.5rem;
}

@media (max-width: 575.98px) {
    .button-row .btn-primary {
        width: 100%;
    }

    .button-row-center .btn-secondary {
        width: auto;
    }
}

@media (min-width: 576px) {
    .feature-card-body,
    .buy-summary,
    .buy-form,
    .form-card {
        padding-inline: 2.5rem;
    }
}

@media (min-width: 768px) {
    .approach {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    .inside {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .phone-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .swipe-hint {
        display: none;
    }

    .previews {
        grid-auto-columns: auto;
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .tools:not(.tools-single) {
        grid-template-columns: repeat(2, 1fr);
    }

    .tools-single .feature-card {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .tools-single .feature-card-body {
        align-self: center;
        padding: 3rem;
    }

    .consent-inner {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 1.5rem;
    }

    .consent .btn {
        min-width: 7.5rem;
    }

    .buy-bar {
        display: none;
    }
}

@media (min-width: 992px) {
    :root {
        --section-space: 7rem;
    }

    .tools:not(.tools-single) {
        grid-template-columns: repeat(3, 1fr);
    }

    .site-logo img {
        width: 220px;
    }

    .menu-toggle {
        display: none;
    }

    .site-nav {
        display: block;
        position: static;
        padding: 0;
        border: 0;
        background: none;
    }

    .site-nav ul {
        display: flex;
        gap: 1.25rem;
    }

    .site-nav a {
        padding: 0.5rem 0.25rem;
    }

    .hero {
        padding-block: 6rem var(--section-space);
    }

    .hero-grid {
        grid-template-columns: 1.35fr 1fr;
        gap: 4rem;
    }

    .hero-art {
        order: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 60%, var(--oat) 0%, rgba(234, 223, 204, 0.35) 55%, transparent 70%);
    }

    .horizon-art {
        width: 72%;
        height: auto;
        aspect-ratio: 3 / 2;
        stroke-width: 2px;
    }

    .product-hero {
        padding-top: 5rem;
    }

    .page-head {
        padding-block: 6rem 3.5rem;
    }

    .inside {
        grid-template-columns: repeat(3, 1fr);
    }

    .buy-card {
        grid-template-columns: 1fr 1.15fr;
    }

    .buy-summary {
        padding: 3.5rem;
        border-bottom: 0;
        border-right: 1px solid var(--oat);
        background: var(--cream);
    }

    .buy-form {
        padding: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consent {
        animation: none;
    }

    .btn,
    .feature-card-cover img,
    .faq summary .icon {
        transition: none;
    }

    .feature-card-cover:hover img {
        transform: none;
    }
}