/* Real product views, shared sections and the site's pixel typography. */
.bookmarkly-page { --bookmarkly-accent: #f2bf0a; }
.bookmarkly-page .hero-section .hero-content { gap: clamp(2rem, 5vw, 5rem); }
.bookmarkly-page .hero-section.layout-split .hero-media { min-width: 0; }
.bookmarkly-eyebrow { color: var(--color-text-secondary); font-family: var(--font-primary); font-size: 0.7rem; line-height: 1.6; margin: 0 0 1rem; }
.bookmarkly-hero .title { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.25; text-wrap: balance; }
.bookmarkly-hero .hero-description { max-width: 38rem; margin: 0 0 1.75rem; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.7; }
.bookmarkly-page .hero-cta-buttons, .bookmarkly-access-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.bookmarkly-page .btn { min-height: 44px; }
.bookmarkly-hero-note { max-width: 30rem; margin: 1.25rem 0 0; color: var(--color-text-secondary); font-size: 0.8rem; line-height: 1.6; }
.bookmarkly-shot { width: 100%; min-width: 0; margin: 0; }
.bookmarkly-shot a { display: block; border: var(--border); box-shadow: 7px 7px 0 var(--color-border); background: #f8f8f8; }
.bookmarkly-shot img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 0; object-fit: contain; }
.bookmarkly-shot figcaption { margin-top: 1.1rem; color: var(--color-text-secondary); font-size: 0.75rem; line-height: 1.6; }
.bookmarkly-feature .content-html-wrapper { column-count: 1; }
.bookmarkly-page .bento-grid { grid-auto-rows: 240px; }
.bookmarkly-guide, .bookmarkly-access { width: min(calc(100% - 2 * clamp(1rem, 6vw, 4rem)), var(--container-width, 1200px)); margin: clamp(4rem, 8vw, 7rem) auto; }
.bookmarkly-section-heading { max-width: 45rem; margin-bottom: 2rem; }
.bookmarkly-section-heading h2, .bookmarkly-access h2 { font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.4; text-wrap: balance; }
.bookmarkly-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 2rem; padding: 0; border: var(--border); }
.bookmarkly-steps li { padding: clamp(1.25rem, 3vw, 2rem); }
.bookmarkly-steps li + li { border-left: var(--border); }
.bookmarkly-step-number { display: block; margin-bottom: 1.5rem; font-family: var(--font-primary); font-size: 1.5rem; color: var(--color-text-secondary); }
.bookmarkly-steps h3 { font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.75rem; }
.bookmarkly-steps p, .bookmarkly-access p { margin: 0; line-height: 1.7; color: var(--color-text-secondary); }
.bookmarkly-text-link { display: inline-flex; gap: 0.65rem; align-items: center; min-height: 44px; color: var(--color-text-primary); text-underline-offset: 0.25em; }
.bookmarkly-access { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; border: var(--border); border-top: 5px solid var(--bookmarkly-accent); padding: clamp(1.5rem, 4vw, 3rem); background: var(--color-bg); }
.bookmarkly-access p { max-width: 45rem; }
.bookmarkly-access-actions { flex-direction: column; align-items: flex-start; }
@media (max-width: 768px) {
    .bookmarkly-page .hero-section.layout-split .hero-media { max-width: 100%; order: 2; }
    .bookmarkly-page .hero-section.layout-split .hero-text { order: 1; }
    .bookmarkly-steps, .bookmarkly-access { grid-template-columns: minmax(0, 1fr); }
    .bookmarkly-steps li + li { border-left: 0; border-top: var(--border); }
    .bookmarkly-step-number { margin-bottom: 1rem; }
    .bookmarkly-shot a { box-shadow: 4px 4px 0 var(--color-border); }
    .bookmarkly-page .hero-cta-buttons { align-items: stretch; }
    .bookmarkly-page .hero-cta-buttons .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 640px) {
    .bookmarkly-page .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
}