/* Best Photo Picker product page.
   Same look as the product's own site (arkalogy.github.io/best-photo-picker):
   warm paper, a serif for headings, a red grease-pencil accent. Scoped to
   .bpp so the Arkalogy nav, breadcrumb and footer keep the company style.
   No web fonts here: on a Mac the serif is Iowan Old Style. */

.bpp-page {
    --paper: oklch(97.2% 0.012 80);
    --paper-2: oklch(94% 0.016 78);
    --ink: oklch(22% 0.02 60);
    --ink-soft: oklch(42% 0.02 60);
    --line: oklch(86% 0.02 75);
    --pencil: oklch(58% 0.19 33);
    --pencil-text: oklch(49% 0.17 33);
    --keep: oklch(48% 0.13 150);
    --night: oklch(19% 0.018 60);
    --night-ink: oklch(93% 0.015 80);
    --night-soft: oklch(74% 0.02 75);
    --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: "Avenir Next", Avenir, "Seravek", "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gutter: clamp(16px, 4vw, 48px);
    background: var(--paper);
}
.bpp-page .nav { background: color-mix(in oklch, var(--paper) 90%, transparent); }

.bpp {
    color: var(--ink);
    font: 400 clamp(16px, 0.9vw + 12px, 18px) / 1.6 var(--sans);
}
.bpp a { color: inherit; text-underline-offset: 3px; }
.bpp img, .bpp video { display: block; max-width: 100%; height: auto; }
.bpp p { margin: 0 0 1em; }
.bpp p:last-child { margin-bottom: 0; }
.bpp code { font: 0.88em var(--mono); background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px; }
.bpp :focus-visible { outline: 2px solid var(--pencil); outline-offset: 3px; border-radius: 4px; }
.bpp .wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.bpp .narrow { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.bpp .kicker { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pencil-text); font-weight: 600; margin: 0 0 12px; }
.bpp h2 { font: 600 clamp(1.8rem, 1.8vw + 1.1rem, 2.6rem) / 1.1 var(--serif); letter-spacing: -0.014em; margin: 0 0 18px; text-wrap: balance; }
.bpp h3 { font: 600 1.18rem/1.3 var(--serif); margin: 0 0 6px; }
.bpp .steps h3 { margin-bottom: 14px; }
.bpp .soft { color: var(--ink-soft); }
.bpp .band { padding-block: clamp(56px, 8vw, 112px); }
.bpp .rule { border-top: 1px solid var(--line); }

/* ---------- hero ---------- */
.bpp .top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding-block: clamp(16px, 4vw, 48px) clamp(48px, 8vw, 104px);
}
.bpp .eyebrow { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; }
.bpp h1 {
    font: 600 clamp(2.2rem, 3.3vw + 0.7rem, 3.6rem) / 1.04 var(--serif);
    letter-spacing: -0.022em;
    margin: 0 0 22px;
    text-wrap: balance;
}
.bpp .circled { position: relative; white-space: nowrap; margin-inline: 0.16em 0.1em; }
.bpp .count { display: inline-block; font-variant-numeric: lining-nums tabular-nums; transition: opacity 0.3s ease-in, transform 0.3s ease-in, filter 0.3s ease-in, color 0.4s var(--ease); }
.bpp .count.flush { opacity: 0; transform: translateY(0.4em) scale(0.9); filter: blur(5px); }
.bpp .count.counting { opacity: 0.55; transition: none; }
.bpp .count.land { animation: bpp-flash 0.7s var(--ease); }
@keyframes bpp-flash {
    30% { transform: scale(1.14); color: var(--pencil-text); text-shadow: 0 0 0.35em color-mix(in srgb, var(--pencil) 45%, transparent); }
    100% { transform: none; color: var(--ink); text-shadow: none; }
}
.bpp .circled svg { position: absolute; left: -17%; top: -26%; width: 134%; height: 152%; overflow: visible; pointer-events: none; }
.bpp .circled path { fill: none; stroke: var(--pencil); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: bpp-draw 1.1s 0.55s var(--ease) forwards; }
.bpp .cycling .circled path { animation: none; transition: opacity 0.25s ease-in; }
.bpp .cycling .circled.wiped path { opacity: 0; }
.bpp .cycling .circled.drawing path { animation: bpp-draw 0.75s var(--ease) forwards; }
@keyframes bpp-draw { to { stroke-dashoffset: 0; } }
.bpp .lede { font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.2rem); color: var(--ink-soft); max-width: 36ch; margin: 0 0 30px; text-wrap: pretty; }
.bpp .lede strong { color: var(--ink); font-weight: 600; }
.bpp .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.bpp .cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--ink); color: var(--paper);
    padding: 15px 22px 15px 18px; border-radius: 10px;
    text-decoration: none; font-weight: 600; font-size: 1.06rem; line-height: 1.25;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.bpp .cta:hover { transform: translateY(-2px); background: color-mix(in oklch, var(--ink) 88%, var(--pencil)); }
.bpp .cta small { display: block; font-weight: 400; font-size: 0.74rem; opacity: 0.72; margin-top: 1px; }
.bpp .ghost {
    display: inline-flex; align-items: center; padding: 14px 20px; border-radius: 10px;
    border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600;
    transition: background 0.25s var(--ease);
}
.bpp .ghost:hover { background: var(--paper-2); }
.bpp .alt { font-size: 0.95rem; color: var(--ink-soft); }
.bpp .alt:hover { color: var(--ink); }
.bpp .fine { margin: 22px 0 0; font-size: 0.84rem; color: var(--ink-soft); max-width: 46ch; }

.bpp .stage { position: relative; margin: 0; }
.bpp .shell { position: relative; }
.bpp .window {
    position: relative; border-radius: 12px; overflow: hidden; background: #111;
    box-shadow: 0 30px 60px -24px oklch(20% 0.03 50 / 0.45), 0 10px 22px -10px oklch(20% 0.03 50 / 0.3);
    outline: 1px solid var(--line);
    transform: rotate(0.8deg);
    aspect-ratio: 1600 / 952;
}
.bpp .window video { width: 100%; height: 100%; object-fit: cover; }
.bpp .tape {
    position: absolute; z-index: 2; top: -14px; left: 50%; width: 120px; height: 30px;
    transform: translateX(-50%) rotate(-3deg);
    background: oklch(90% 0.04 85 / 0.72);
    box-shadow: 0 2px 6px oklch(20% 0.02 60 / 0.12);
}
.bpp .playpause { display: none; }
.js .bpp .playpause {
    display: block; position: absolute; z-index: 3; left: 12px; bottom: 12px;
    font: 600 0.74rem/1 var(--sans); letter-spacing: 0.04em; color: oklch(96% 0.01 80);
    background: oklch(18% 0.01 60 / 0.72); border: 1px solid oklch(100% 0 0 / 0.18); border-radius: 999px;
    padding: 7px 12px; cursor: pointer; transform: rotate(0.8deg);
}
.bpp .playpause:hover { background: oklch(18% 0.01 60 / 0.9); }
.bpp .caption { font-size: 0.8rem; color: var(--ink-soft); margin: 34px 0 0; max-width: 60ch; }

/* ---------- thesis ---------- */
.bpp .thesis { background: var(--paper-2); border-block: 1px solid var(--line); padding-block: clamp(48px, 7vw, 88px); }
.bpp .thesis p {
    font: italic 500 clamp(1.45rem, 1.4vw + 1rem, 2.15rem) / 1.3 var(--serif);
    letter-spacing: -0.01em; margin: 0; max-width: 34ch; text-wrap: balance;
}
.bpp .thesis p::before { content: "“"; color: var(--pencil); margin-right: 0.06em; }
.bpp .thesis p::after { content: "”"; color: var(--pencil); margin-left: 0.04em; }

/* ---------- problem ---------- */
.bpp .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.bpp .split > div > p { color: var(--ink-soft); }
.bpp .marked {
    position: relative; margin: 28px 0; padding: 4px 0 4px 26px;
    font: 500 1.2rem/1.45 var(--serif); color: var(--ink);
}
.bpp .marked::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    border: 2.5px solid var(--pencil); border-right: 0; border-radius: 10px 0 0 10px;
}

/* ---------- steps ---------- */
.bpp .steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: s; }
.bpp .steps li { counter-increment: s; }
.bpp .steps li::before { content: counter(s); display: block; font: italic 600 2.6rem/1 var(--serif); color: var(--pencil); margin-bottom: 12px; }
.bpp .steps p { color: var(--ink-soft); margin: 0; }

/* ---------- feature list ---------- */
.bpp .features { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 72px); counter-reset: f; }
.bpp .features li { counter-increment: f; position: relative; padding: 26px 0 26px 56px; border-top: 1px solid var(--line); }
.bpp .features li::before {
    content: counter(f, decimal-leading-zero);
    position: absolute; left: 0; top: 26px;
    font: italic 600 1.35rem/1.2 var(--serif); color: var(--pencil-text);
}
.bpp .features p { color: var(--ink-soft); margin: 0; }

/* ---------- case study: decisions and outcome ---------- */
.bpp .decisions { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); counter-reset: d; }
.bpp .decisions li { counter-increment: d; padding: 24px 0 28px; border-top: 1px solid var(--line); }
.bpp .decisions li::before { content: counter(d, decimal-leading-zero); display: block; margin-bottom: 10px; font: italic 600 1.05rem/1 var(--serif); color: var(--pencil-text); }
.bpp .decisions h3 { margin-bottom: 10px; }
.bpp .decisions p { color: var(--ink-soft); margin: 0; }
.bpp .decisions .cost { margin-top: 12px; font-size: 0.9rem; }
.bpp .decisions .cost strong { color: var(--ink); font-weight: 600; }
.bpp .outcome { list-style: none; margin: 0; padding: 0; }
.bpp .outcome li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.bpp .outcome li:last-child { border-bottom: 1px solid var(--line); }
.bpp .outcome strong { color: var(--ink); font-weight: 600; }

/* ---------- screenshots ---------- */
.bpp .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.bpp .gallery figure { margin: 0; }
.bpp .gallery .shot { border-radius: 10px; overflow: hidden; box-shadow: 0 20px 40px -24px oklch(20% 0.03 50 / 0.5), 0 0 0 1px var(--line); cursor: zoom-in; }
.bpp .gallery figure:nth-child(3n + 1) .shot { transform: rotate(-0.6deg); }
.bpp .gallery figure:nth-child(3n + 2) .shot { transform: rotate(0.4deg); }
.bpp .gallery figure:nth-child(3n) .shot { transform: rotate(-0.3deg); }
.bpp .gallery figcaption { font-size: 0.86rem; color: var(--ink-soft); margin-top: 14px; }
.bpp .gallery figcaption strong { color: var(--ink); font-weight: 600; }

/* ---------- privacy band ---------- */
.bpp .night { background: var(--night); color: var(--night-ink); padding-block: clamp(64px, 9vw, 120px); }
.bpp .night .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.bpp .night h2 { font-size: clamp(2rem, 2.8vw + 1rem, 3.3rem); line-height: 1.05; margin: 0; }
.bpp .night .sub { margin: 20px 0 0; max-width: 44ch; color: var(--night-soft); font-size: clamp(1rem, 0.4vw + 0.92rem, 1.12rem); }
.bpp .night ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bpp .night li { padding-left: 30px; position: relative; color: var(--night-soft); }
.bpp .night li strong { color: var(--night-ink); font-weight: 600; }
.bpp .night li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 8px; border-left: 2.5px solid var(--pencil); border-bottom: 2.5px solid var(--pencil); transform: rotate(-45deg); }
.bpp .night a { color: var(--night-ink); }

/* ---------- how it was built ---------- */
.bpp .built details { border-top: 1px solid var(--line); }
.bpp .built details:last-of-type { border-bottom: 1px solid var(--line); }
.bpp .built summary {
    list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
    color: var(--ink-soft);
}
.bpp .built summary::-webkit-details-marker { display: none; }
.bpp .built summary strong { display: block; font: 600 1.15rem/1.3 var(--serif); color: var(--ink); margin-bottom: 2px; }
.bpp .built summary::after {
    content: "+"; position: absolute; right: 4px; top: 18px;
    font: 400 1.6rem/1 var(--serif); color: var(--pencil);
    transition: transform 0.3s var(--ease);
}
.bpp .built details[open] summary::after { transform: rotate(45deg); }
.bpp .built details p { color: var(--ink-soft); margin: 0 0 22px; max-width: 68ch; }

/* ---------- comparison ---------- */
.bpp .compare-wrap { overflow-x: auto; margin: 36px 0 12px; }
.bpp .compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; }
.bpp .compare th, .bpp .compare td { padding: 13px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.bpp .compare th { font: 600 0.95rem/1.25 var(--serif); }
.bpp .compare td:first-child, .bpp .compare th:first-child { text-align: left; color: var(--ink-soft); }
.bpp .compare .own { background: color-mix(in oklch, var(--pencil) 9%, var(--paper)); }
.bpp .compare th.own { color: var(--pencil-text); }
.bpp .yes { color: var(--keep); font-weight: 700; }
.bpp .no { color: var(--ink-soft); opacity: 0.7; }
.bpp .qual { color: var(--ink-soft); font-size: 0.84rem; }
.bpp .compare-note { font-size: 0.8rem; color: var(--ink-soft); }
.bpp .punch { font: 600 1.3rem/1.35 var(--serif); margin-top: 28px; max-width: 40ch; }

/* ---------- get it ---------- */
.bpp .opt { padding-block: 24px; border-top: 1px solid var(--line); }
.bpp .opt:last-child { border-bottom: 1px solid var(--line); }
.bpp .opt p { color: var(--ink-soft); margin: 0 0 12px; }
.bpp .cmd { display: flex; align-items: stretch; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.bpp .cmd code { flex: 1; font: 0.86rem/1.5 var(--mono); padding: 12px 14px; overflow-x: auto; white-space: nowrap; background: none; border-radius: 0; }
.bpp .cmd button { flex: none; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 0.82rem var(--sans); padding: 0 16px; cursor: pointer; }
.bpp .cmd button:hover { background: var(--line); }
.bpp .text-link { font-weight: 600; }

/* ---------- closing ---------- */
.bpp .closing { text-align: center; padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.bpp .closing h2 { max-width: 22ch; margin-inline: auto; }
.bpp .closing p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 28px; }
.bpp .closing .actions { justify-content: center; }
.bpp .closing .closing-links { margin: 22px auto 0; color: var(--ink-soft); }
.bpp .closing-links a { color: var(--ink); text-underline-offset: 3px; }
.bpp .credit { font-size: 0.82rem; color: var(--ink-soft); margin-top: 40px !important; }
.bpp .credit.tm { font-size: 0.72rem; opacity: 0.75; margin-top: 6px !important; max-width: none; }

/* ---------- entrance ---------- */
.bpp .rise { opacity: 0; transform: translateY(14px); animation: bpp-rise 0.9s var(--ease) forwards; }
.bpp .rise.d1 { animation-delay: 0.05s; } .bpp .rise.d2 { animation-delay: 0.15s; } .bpp .rise.d3 { animation-delay: 0.25s; } .bpp .rise.d4 { animation-delay: 0.35s; } .bpp .rise.d5 { animation-delay: 0.3s; }
@keyframes bpp-rise { to { opacity: 1; transform: none; } }
.js .bpp .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .bpp .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .bpp .rise, .js .bpp .reveal { opacity: 1; transform: none; animation: none; transition: none; }
    .bpp .circled path { animation: none; stroke-dashoffset: 0; }
    .bpp .count { transition: none; }
    .bpp .cta, .bpp .built summary::after { transition: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 860px) {
    .bpp .top, .bpp .split, .bpp .night .wrap { grid-template-columns: minmax(0, 1fr); }
    .bpp .steps ol, .bpp .features, .bpp .decisions { grid-template-columns: minmax(0, 1fr); }
    .bpp .gallery { grid-template-columns: minmax(0, 1fr); }
    .bpp .window, .bpp .gallery .shot { transform: none !important; }
}
@media (min-width: 861px) and (max-width: 1080px) {
    .bpp .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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