/* ── Fonts ─────────────────────────────────────────────────────── */
/* Sora, self-hosted. Variable across 100-800, so one file covers every weight. */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/sora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
    --bg: #f3f2f2;
    --surface: #fff;
    --surface-2: #f7f5f5;
    --ink: #201e1d;
    --ink-70: rgba(32, 30, 29, .7);
    --ink-65: rgba(32, 30, 29, .65);
    --ink-55: rgba(32, 30, 29, .64);
    --ink-15: rgba(32, 30, 29, .15);
    --ink-10: rgba(32, 30, 29, .1);
    --ink-08: rgba(32, 30, 29, .08);
    --accent: #c05e42;
    --accent-600: #a94f36;
    --accent-700: #8c3f2b;
    --accent-tint: #ffe9e2;
    --ok: #4f7a5f;
    --ok-tint: #eef4ef;
    --err: #9e3526;
    --err-tint: #fdece8;

    --wrap: 1120px;
    --pad: 28px;
    --font: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────── */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Sticky header would otherwise cover an anchored section's heading. */
    scroll-padding-top: 88px;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg {
    display: block;
    max-width: 100%;
}

/* A display rule on a class beats the UA's [hidden], so restate it louder. */
[hidden] {
    display: none !important;
}

a {
    color: var(--accent-700);
}

a:hover {
    color: var(--accent);
}

h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--accent-tint);
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: var(--pad);
}

.wrap-narrow {
    max-width: 820px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--bg);
    padding: 12px 20px;
    border-radius: 0 0 12px 0;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

.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;
}

/* ── Brand mark ────────────────────────────────────────────────── */
/* The shipped app icon, square at every density - never sized on one axis alone. */
.mark {
    width: 36px;
    height: 36px;
    aspect-ratio: 1;
    object-fit: contain;
    flex: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.brand-name {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.01em;
}

/* ── Header ────────────────────────────────────────────────────── */
/* Opaque, not frosted: the badge lives here, and B7's clear space has to stay
   clear of the page content that scrolls under a sticky header. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--ink-08);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 10px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.site-nav a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
}

.site-nav a:hover {
    color: var(--accent);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
    padding-block: 70px 40px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-tint);
    color: var(--accent-700);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
    margin-bottom: 22px;
}

.hero h1 {
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.02;
    letter-spacing: -.03em;
    margin-bottom: 20px;
}

.hero-lede {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0 0 30px;
    max-width: 460px;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-note {
    font-size: 14px;
    color: var(--ink-55);
    font-weight: 600;
}

/* Apple's official badge artwork. The guidelines forbid modifying,
   angling or animating it, so this rule only sizes and spaces it:
   40px tall (the onscreen minimum) with a clear space of at least 1/4 its
   height. The page gutter supplies the clear space on the trailing edge. */
.app-store-badge {
    display: inline-block;
    line-height: 0;
    margin: calc(40px / 4);
    margin-right: 0;
}

.app-store-badge img {
    display: block;
    height: 40px;
    width: auto;
}

/* A plain text link - no Apple mark, so it is not a second badge. */
.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: var(--ink);
    color: var(--bg);
    border-radius: 16px;
    padding: 14px 22px;
    font-weight: 700;
    font-size: 16px;
    transition: background .15s ease;
}

.btn-dark:hover {
    background: #35312f;
    color: var(--bg);
}

/* ── Screenshots in Apple product bezels ───────────────────────────
   The bezels are Apple's own artwork, uniformly scaled and otherwise
   untouched: nothing is cropped, tilted, shadowed or laid over them. The app
   screen sits behind the artwork, so the sensor housing masks it rather than
   the other way round. Aperture offsets are measured from the alpha channel of
   the source PNG, in per cent so they hold at every rendered size. */
.device {
    position: relative;
    margin: 0 auto;
}

.device-bezel {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

/* The screen image is the whole device screen, status bar included, cut to the
   screen's own aspect ratio - so it fills the aperture edge to edge and cover
   only ever swallows a sub-pixel rounding difference. */
.device-screen {
    position: absolute;
    object-fit: cover;
    background: #e9e7e8;
}

/* iPhone 17, 1350x2760 artwork, aperture 1206x2622 at (72, 69). */
.device-iphone {
    max-width: 390px;
}

.device-iphone .device-screen {
    left: 5.3333%;
    top: 2.5%;
    width: 89.3333%;
    height: 95%;
}

/* iPad Pro 13-inch, 3000x2300 artwork, aperture 2752x2064 at (124, 118). */
.device-ipad {
    max-width: 666px;
}

.device-ipad .device-screen {
    left: 4.1333%;
    top: 5.1304%;
    width: 91.7333%;
    height: 89.7391%;
}

/* Capped against viewport height too, or the device pushes the headline below
   the fold on a laptop. The 102px floor is what keeps the device itself above
   P4's 200px minimum even on a very short viewport. */
.device-hero {
    max-width: min(390px, max(102px, 70vh / 2.0436));
}

.feature .device {
    max-width: 254px;
    margin-bottom: 22px;
}

/* ── Sections ──────────────────────────────────────────────────── */
.section {
    padding-block: 60px 30px;
}

.section h2 {
    font-size: clamp(27px, 3.4vw, 34px);
    margin-bottom: 8px;
}

.section-lede {
    font-size: 16px;
    color: var(--ink-65);
    margin: 0 0 44px;
    max-width: 520px;
}

.section-center {
    text-align: center;
}

.section-center .section-lede {
    margin-inline: auto;
    margin-bottom: 34px;
}

/* ── Feature grid ──────────────────────────────────────────────── */
.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    max-width: 720px;
    margin: 0 auto;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature h3 {
    font-size: 19px;
    letter-spacing: -.01em;
    margin-bottom: 8px;
}

.feature p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-65);
    margin: 0;
    max-width: 300px;
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq {
    background: var(--surface);
    border-radius: 16px;
    padding: 4px 22px;
    box-shadow: 0 1px 3px rgba(32, 30, 29, .06);
}

.faq > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 18px 0;
    font-weight: 700;
    font-size: 16px;
    list-style: none;
}

.faq > summary::-webkit-details-marker {
    display: none;
}

.faq-plus {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-700);
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    transition: transform .18s ease;
}

.faq[open] .faq-plus {
    transform: rotate(45deg);
}

.faq p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-70);
}

/* ── Contact ───────────────────────────────────────────────────── */
.contact-card {
    background: var(--surface);
    border: 1px solid var(--ink-08);
    border-radius: 28px;
    padding: 40px 44px;
    box-shadow: 0 2px 10px rgba(32, 30, 29, .07);
}

.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-row .field {
    flex: 1;
    min-width: 200px;
}

.field > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-70);
}

.field input,
.field textarea {
    border: 1px solid var(--ink-15);
    background: var(--surface-2);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    width: 100%;
    transition: border-color .15s ease;
}

.field textarea {
    resize: vertical;
    min-height: 120px;
}

.field input:hover,
.field textarea:hover {
    border-color: rgba(32, 30, 29, .3);
}

.field input:focus-visible,
.field textarea:focus-visible {
    border-color: var(--accent);
    outline-offset: 0;
}

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
    border-color: var(--err);
}

.field-error {
    font-size: 13px;
    color: var(--err);
    min-height: 0;
}

.field-error:empty {
    display: none;
}

.submit {
    align-self: flex-start;
    border: none;
    background: var(--accent-600);
    color: #fff;
    border-radius: 999px;
    padding: 14px 30px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(192, 94, 66, .32);
    transition: background .15s ease, transform .15s ease;
}

.submit:hover:not(:disabled) {
    background: var(--accent-700);
    transform: translateY(-1px);
}

.submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* The honeypot must be reachable by a naive bot but never by a person. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-note {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-55);
    margin: 0;
}

.notice {
    border-radius: 16px;
    padding: 26px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.notice-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-title {
    font-weight: 700;
    font-size: 16px;
}

.notice-body {
    font-size: 14px;
    color: var(--ink-65);
}

.notice-ok {
    background: var(--ok-tint);
}

.notice-ok .notice-icon {
    background: var(--ok);
}

.notice-err {
    background: var(--err-tint);
}

.notice-err .notice-icon {
    background: var(--err);
}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--ink-10);
    margin-top: 50px;
}

.footer-inner {
    padding-block: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--ink-55);
}

.footer-brand {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px;
    margin-right: auto;
    text-decoration: none;
}

.site-footer a {
    padding-block: 4px;
    text-decoration: none;
    color: var(--ink-55);
}

.site-footer a:hover {
    color: var(--accent);
}

/* ── Legal / prose pages ───────────────────────────────────────── */
.prose {
    padding-block: 56px 24px;
}

.prose h1 {
    font-size: clamp(30px, 4vw, 40px);
    margin-bottom: 10px;
}

.prose h2 {
    font-size: 21px;
    margin: 40px 0 10px;
}

.prose h3 {
    font-size: 16px;
    margin: 24px 0 6px;
}

.prose p,
.prose li {
    color: var(--ink-70);
    font-size: 15.5px;
    line-height: 1.68;
}

.prose p {
    margin: 0 0 14px;
}

.prose ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.prose li {
    margin-bottom: 7px;
}

.prose a {
    color: var(--accent-700);
}

.updated {
    font-size: 13px;
    color: var(--ink-55);
    margin-bottom: 26px;
}

.lede {
    font-size: 17px !important;
    color: var(--ink-70);
    margin-bottom: 28px;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    margin: 0 0 18px;
}

.legal-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-55);
    padding: 10px 12px 10px 0;
    border-bottom: 2px solid var(--ink-10);
    vertical-align: bottom;
}

.legal-table td {
    padding: 12px 12px 12px 0;
    border-bottom: 1px solid var(--ink-10);
    vertical-align: top;
    color: var(--ink-70);
    line-height: 1.55;
}

.table-scroll {
    overflow-x: auto;
}

.callout {
    background: var(--surface);
    border: 1px solid var(--ink-08);
    border-radius: 18px;
    padding: 22px 26px;
    margin: 0 0 22px;
}

.callout p:last-child {
    margin-bottom: 0;
}

/* ── 404 ───────────────────────────────────────────────────────── */
.center-page {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: 80px;
    gap: 8px;
}

.center-page h1 {
    font-size: clamp(38px, 6vw, 60px);
}

/* ── Breakpoints ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 44px;
        padding-block: 48px 30px;
        text-align: center;
    }

    .hero-lede {
        margin-inline: auto;
    }

    .hero-cta {
        justify-content: center;
    }

    .section-lede {
        margin-inline: auto;
    }

    .section {
        text-align: center;
    }

    .faq-list, .contact-card {
        text-align: left;
    }
}

@media (max-width: 720px) {
    :root {
        --pad: 20px;
    }

    .site-nav {
        gap: 16px;
    }

    /* The wordmark, two hash links and the badge are what a phone has room for. */
    .site-nav .nav-hide {
        display: none;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 40px;
    }

        .contact-card {
        padding: 26px 22px;
        border-radius: 22px;
    }

    .section {
        padding-block: 44px 24px;
    }

    .prose h2 {
        margin-top: 32px;
    }

    .footer-inner {
        gap: 14px;
    }

    .footer-brand {
        flex-basis: 100%;
        margin-right: 0;
    }
}

/* Below this the brand, both hash links and the badge no longer fit on one row.
   The badge itself never shrinks - B8 sets its floor at 40px tall. */
@media (max-width: 430px) {
    .site-nav .nav-hide-sm {
        display: none;
    }

    .brand {
        gap: 9px;
    }
}

@media (max-width: 420px) {

    .hero-note {
        font-size: 13px;
    }

    .notice {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .site-nav .nav-hide-xs {
        display: none;
    }
}



/* ── Guide pages ───────────────────────────────────────────────────
   Shared by the how-to and reference articles. The shapes here exist
   because answer engines quote them: a direct answer at the top, a
   table for anything numeric, and a stated date on anything that can
   go out of date. */
.breadcrumb {
    font-size: 13px;
    color: var(--ink-55);
    margin-bottom: 18px;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--ink-15);
}

.breadcrumb a {
    color: var(--ink-55);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--accent-700);
    text-decoration: underline;
}

/* The short answer, stated before the explanation. */
.answer {
    background: var(--surface);
    border: 1px solid var(--ink-10);
    border-left: 3px solid var(--accent-600);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 0 0 28px;
}

.answer p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink);
}

.answer p + p {
    margin-top: 10px;
}

.toc {
    background: var(--surface-2);
    border: 1px solid var(--ink-08);
    border-radius: 14px;
    padding: 18px 24px;
    margin: 0 0 32px;
}

.toc h2 {
    font-size: 12px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin: 0 0 10px !important;
}

.toc ol {
    margin: 0;
    padding-left: 20px;
}

.toc li {
    margin-bottom: 5px;
    font-size: 14.5px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    margin: 0 0 8px;
}

.data-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-55);
    padding: 10px 14px 10px 0;
    border-bottom: 2px solid var(--ink-10);
    vertical-align: bottom;
    white-space: nowrap;
}

.data-table td {
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid var(--ink-10);
    vertical-align: top;
    color: var(--ink-70);
    line-height: 1.5;
}

.data-table tbody tr:hover {
    background: var(--surface-2);
}

.table-note {
    font-size: 13px;
    color: var(--ink-55);
    margin: 0 0 22px;
}

/* Anything with a shelf life says when it was checked. */
.checked {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-55);
    background: var(--surface-2);
    border: 1px solid var(--ink-08);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 22px;
}

.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 44px;
    margin-bottom: 18px;
}

.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steps strong {
    display: block;
    color: var(--ink);
    margin-bottom: 3px;
}

/* Where a guide hands off to the app or to another guide. */
.related {
    border-top: 1px solid var(--ink-10);
    margin-top: 44px;
    padding-top: 26px;
}

.related h2 {
    font-size: 12px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin: 0 0 14px !important;
}

.related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.related a {
    font-weight: 600;
}

@media (max-width: 560px) {
    .answer {
        padding: 18px 20px;
    }

    .data-table {
        font-size: 13.5px;
    }
}