/* About (homepage): a tall rounded photo with a small white Google rating tag on the left; heading, a lead paragraph and
 * the list as ruled check rows on the right. */
.ocf-about { background: transparent; }

.ocf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 540fr) minmax(0, 640fr);
    gap: var(--ocf-split-gap);
    align-items: center;
}

.ocf-about-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--image-radius);
    aspect-ratio: 540 / 560;
}

.ocf-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ocf-about-tag {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 28px 16px 16px;
    border-radius: 24px;
    background: var(--lisbon-card);
    color: var(--ocf-heading);
    box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--lisbon-shadow-color) 45%, transparent);
}

.ocf-about-tag__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ocf-bg);
}

.ocf-about-tag__icon svg { width: 30px; height: 30px; }
.ocf-about-tag__top { display: flex; align-items: center; gap: 10px; }
/* Google's star color, to match the G mark (brand colors, not palette tokens). */
.ocf-about-tag__stars { color: #FBBC05; font-size: 18px; letter-spacing: 0.08em; }
.ocf-about-tag > span:last-child { display: grid; line-height: 1.25; }
.ocf-about-tag__label { margin-top: 2px; color: var(--ocf-body); font-size: 15px; }
.ocf-about-tag strong { font-family: var(--ocf-font-heading), system-ui, sans-serif; font-size: 26px; font-weight: var(--font-weight-bold); line-height: 1; }

.ocf-about-copy { max-width: 600px; }

.ocf-about .prose {
    margin-top: 24px;
    color: var(--ocf-body);
    font-size: var(--font-body-size);
    line-height: 1.65;
}

/* First paragraph reads as a lead. */
.ocf-about .prose > p:first-child {
    color: var(--ocf-heading);
    font-size: calc(var(--font-body-size) * 1.12);
    line-height: 1.6;
}

.ocf-about .prose p { margin-bottom: 18px; }
.ocf-about .prose > :last-child { margin-bottom: 0; }

/* The list: ruled rows, each led by a primary check badge. */
.ocf-about .prose ul {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--ocf-border);
}

.ocf-about .prose li {
    position: relative;
    margin: 0;
    padding: 16px 0 16px 44px;
    border-top: 1px solid var(--ocf-border);
}

.ocf-about .prose li::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 14px no-repeat,
        var(--ocf-primary);
}

.ocf-about .prose li strong { color: var(--ocf-heading); font-weight: var(--font-weight-semibold); }

@media (max-width: 900px) {
    .ocf-about-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ocf-about-photo { aspect-ratio: 4 / 3; }
    .ocf-about-copy { max-width: none; }
}

@media (max-width: 639px) {
    .ocf-about-tag { left: 12px; bottom: 12px; gap: 12px; padding: 12px 20px 12px 12px; }
    .ocf-about-tag__icon { width: 44px; height: 44px; }
    .ocf-about-tag__icon svg { width: 24px; height: 24px; }
    .ocf-about-tag strong { font-size: 22px; }
    .ocf-about-tag__stars { font-size: 15px; }
}

/* About page story: the primary pill under the copy. */
.ocf-about-copy > .btn-primary { margin-top: 32px; }