/* Pip — the same quiet, single-column letter format as Ditto.
   Expanded system type and the sampler-over-name treatment give Pip its own identity. */
:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --ink: #1d1d1f;
    --secondary: #6e6e73;
    --muted: #75757a;
    --accent: #7053db;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1c1c1e;
        --ink: #f5f5f7;
        --secondary: #a1a1a6;
        --muted: #a1a1a6;
        --accent: #b5a0ff;
    }
}

* { box-sizing: border-box; }

html {
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
}

body { margin: 0; }
h1, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }

.page {
    max-width: 658px;
    margin: 0 auto;
    padding: 256px 34px 80px;
}

.hero { text-align: center; }

.hero h1, .tagline {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.hero h1 {
    font-stretch: expanded;
    font-width: expanded;
    font-size: 112px;
    line-height: .95;
    font-weight: 900;
}

.wordmark { position: relative; display: inline-block; }
.wordmark-i { position: relative; display: inline-block; }

/* Clip only the native dot; retain the actual i’s stem and advance width. */
.i-stem { display: inline-block; clip-path: inset(.28em 0 0); }

/* Anchor the ink to the native dot position and the sampler mouth just above it.
   Em units keep the composition proportional at every title size. */
.pipette {
    position: absolute;
    width: 1.65em;
    height: auto;
    max-width: none;
    left: calc(50% - 0.2em);
    bottom: 0.75em;
    pointer-events: none;
}
.drop {
    position: absolute;
    width: .22em;
    height: auto;
    left: 50%;
    top: 0.08em;
    transform: translateX(-50%);
    pointer-events: none;
}

.tagline {
    position: relative;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 48px);
    transform: translateX(-50%);
    margin-top: 26px;
    color: var(--secondary);
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.08;
    font-weight: 700;
    text-wrap: balance;
}

.actions { margin-top: 30px; }

.download-button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 16px 68px 16px 56px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent 0%, rgb(255 255 255 / 5%) 50%, rgb(255 255 255 / 15%) 100%), #151515;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    box-shadow:
        inset 0 1px 1px rgb(0 0 0 / 5%),
        inset 0 1px 4px rgb(255 255 255 / 50%),
        inset 0 -2px 4px rgb(0 0 0 / 94%),
        0 1px 4px rgb(0 0 0 / 20%);
    transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.download-button > svg { flex: none; color: rgb(255 255 255 / 48%); }
.download-button:hover {
    text-decoration: none;
    box-shadow:
        inset 0 1px 1px rgb(0 0 0 / 5%),
        inset 0 1px 4px rgb(255 255 255 / 50%),
        inset 0 -2px 4px rgb(0 0 0 / 94%),
        0 1px 4px rgb(0 0 0 / 5%);
}
.download-button:active {
    transform: translateY(2px);
    color: rgb(255 255 255 / 75%);
    box-shadow:
        inset 0 1px 1px rgb(0 0 0 / 5%),
        inset 0 1px 4px rgb(255 255 255 / 50%),
        inset 0 -2px 4px rgb(0 0 0 / 94%),
        0 0 0 transparent;
}

@media (prefers-color-scheme: dark) {
    .pipette {
        filter: url(#pipette-inner-edge);
    }
    .download-button { background-color: #29292c; }
    .download-button > svg { color: rgb(255 255 255 / 60%); }
}

@media (prefers-reduced-motion: reduce) {
    .download-button { transition: none; }
}
.meta { margin-top: 15px; font-size: 13px; line-height: 1.65; color: var(--muted); }

/* Keep the @2x screenshot at 50%; let the annotation canvas extend beyond the letter. */
.app-preview {
    margin: 36px 0 0;
}
.preview-stage {
    position: relative;
    --mock-width: clamp(280px, 44vw, 364px);
    width: min(900px, calc(100vw - 48px));
    height: calc(var(--mock-width) * 639 / 364);
    left: 50%;
    transform: translateX(-50%);
}
.app-preview img {
    display: block;
    width: var(--mock-width);
    max-width: 100%;
    height: auto;
    aspect-ratio: 364 / 639;
    object-fit: contain;
    margin-inline: auto;
}
.preview-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.arrow-halo { stroke: var(--bg); stroke-width: 6; }
.arrow-ink { stroke: #85858b; stroke-width: 2; }
.preview-stage figcaption { margin: 0; }
.feature-callouts { margin: 0; padding: 0; list-style: none; }
.feature-callout {
    position: absolute;
    width: min(218px, calc((100% - var(--mock-width)) / 2 - 16px));
    padding: 0;
    color: var(--ink);
}
.feature-callout h2 {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 650;
}
.feature-callout p {
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.3;
}
.callout-copy { left: 0; top: calc(100% * 95 / 639); }
.callout-history { right: 0; top: calc(100% * 230 / 639); }
.callout-edit { left: 0; top: calc(100% * 325 / 639); }
.callout-contrast { right: 0; top: calc(100% * 470 / 639); }
.callout-space { left: 0; top: calc(100% * 515 / 639); }

/* Keep text readable while the mockup and the space between columns contract. */
@media (max-width: 959px) {
    .feature-callout h2 { font-size: 14px; }
    .feature-callout p { font-size: 13px; }
    .app-preview { margin-bottom: 44px; }
}

/* Below this width, leave the screenshot alone rather than crowd it with labels. */
@media (max-width: 599px) {
    .preview-stage {
        width: min(364px, 100%);
        --mock-width: 364px;
        height: auto;
        margin-bottom: 0;
        left: auto;
        transform: none;
        margin-inline: auto;
    }
    .preview-connectors,
    .preview-stage figcaption { display: none; }
}

.letter {
    margin-top: 24px;
    font-size: 20px;
    line-height: 1.5;
}
.letter p + p { margin-top: 22px; }
.letter .sign { color: var(--secondary); text-align: center; transform: translateX(calc(-16px + 6pt)); }

@media (max-width: 720px) {
    .page { padding: 224px 24px 64px; }
    .hero h1 { font-size: clamp(72px, 24vw, 96px); }
    .letter { font-size: 19px; }
}