/* Components: buttons, cards, figures, lists, modal, lightbox */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6ch; padding: 0.6rem 1rem; border-radius: var(--radius); border: 1px solid var(--color-ui); background: transparent; color: inherit; cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--color-notice); outline-offset: 2px; }
.btn-primary { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--color-ink) 90%, white); }

.pill { border-radius: 999px; padding: 0.4rem 0.9rem; }

.card { border: 1px solid var(--color-ui); border-radius: var(--radius); padding: var(--space-lg); background: white; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.figure { display: grid; gap: var(--space-sm); }
.figure img { border-radius: calc(var(--radius) - 2px); }
.figure figcaption { font-size: var(--fs-sm); color: rgba(18,18,18,0.7); }

ul.tick-list { list-style: none; padding-left: 0; display: grid; gap: 0.5rem; }
ul.tick-list li { padding-left: 1.4rem; position: relative; }
ul.tick-list li::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 0.9rem; height: 0.9rem; -webkit-mask: url('../img/ui/leaf.svg') no-repeat center / contain; mask: url('../img/ui/leaf.svg') no-repeat center / contain; background: var(--color-accent-2); }

/* Hero */
.hero { position: relative; padding-block: clamp(4rem, 12vh, 18rem); }
.hero__inner { display: grid; gap: var(--space-lg); }
.hero .kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-sm); color: rgba(18,18,18,0.7); }
.hero .subhead { font-size: var(--fs-lg); color: rgba(18,18,18,0.85); max-width: 52ch; }
.hero .cta { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.hero--media { padding: 0; }
.hero--media .media { position: relative; aspect-ratio: 16 / 9; background: #e9e7e4; overflow: hidden; }
.hero--media .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,246,244,0.0) 0%, rgba(247,246,244,0.6) 60%, rgba(247,246,244,0.9) 100%); }
.hero--media .content { position: relative; margin-top: -18%; padding-bottom: clamp(2rem, 8vh, 6rem); }

/* Quote */
.quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); max-width: 28ch; }

/* Modal (dialog) */
dialog#demoNotice { border: 1px solid var(--color-ui); border-radius: var(--radius); padding: var(--space-xl); box-shadow: var(--shadow-md); max-width: 560px; width: calc(100% - 2rem); }
dialog::backdrop { background: color-mix(in oklab, #000 30%, transparent); }
dialog h2 { margin-bottom: var(--space-sm); }
dialog .actions { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); justify-content: flex-end; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; display: none; place-items: center; background: color-mix(in oklab, #000 60%, transparent); z-index: 100; }
.lightbox.open { display: grid; }
.lightbox__inner { max-width: 92vw; max-height: 86vh; display: grid; gap: var(--space-sm); }
.lightbox__img { max-height: 78vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__caption { color: #f1f1f1; font-size: var(--fs-sm); }