/* Measure Cards site styles — tokens taken from the app itself: the grouped
   background, card surface and tone colors are the system values the app uses,
   sampled from the App Store screenshots. Dark mode is a pure token swap. */

:root {
    --ground: #F2F2F7;       /* iOS systemGroupedBackground — the app's page */
    --card: #FFFFFF;         /* card surface */
    --edge: #E3E3E8;         /* card border, hairlines */
    --ink: #1C1C1E;          /* primary text */
    --ink-soft: #6C6C70;     /* secondary text */
    --ink-faint: #8E8E93;    /* eyebrow, captions */

    /* The four tones, in the app's own default palette. */
    --tone1: #007AFF;        /* high and level, "blue as the sky" */
    --tone2: #34C759;        /* rising, "like a blade of grass" */
    --tone3: #FF9500;        /* low, "the setting sun" */
    --tone4: #FF3B30;        /* falling, "a bad stock on the ticker" */
    --tone5: #8E8E93;        /* neutral */

    --brand: var(--tone4);

    /* The CJK faces are tacked onto the end of every stack rather than given a
       class of their own: characters appear inline all over this site, and
       without them the system font hands 个 to a thin generic fallback that
       does not look like the app. */
    --han: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Songti SC", "Noto Sans CJK SC", sans-serif;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
    --mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", "PingFang SC", monospace;

    --radius: 14px;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #000000;
        --card: #1C1C1E;
        --edge: #2C2C2E;
        --ink: #F2F2F7;
        --ink-soft: #A1A1A6;
        --ink-faint: #8E8E93;

        --tone1: #0A84FF;
        --tone2: #30D158;
        --tone3: #FF9F0A;
        --tone4: #FF453A;
        --tone5: #98989D;

        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans);
    background-color: var(--ground);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--tone1);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
}

.eyebrow {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: block;
}

.hairline {
    border: none;
    border-top: 1px solid var(--edge);
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    gap: 1rem;
    flex-wrap: wrap;
}

.wordmark {
    font-size: 1.3rem;
    font-weight: 650;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.01em;
}

.wordmark img {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.wordmark .dot {
    color: var(--brand);
}

nav {
    display: flex;
    gap: 1.75rem;
}

nav a {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Hero */
.hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3.5rem 2rem 4.5rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0.6rem 0 1.1rem;
}

.hero h1 .dot {
    color: var(--brand);
}

/* A lone Han character inside a Latin headline picks up whatever weight the
   fallback face happens to offer, which reads as an accident next to bold text.
   Name the face and the weight so it looks chosen. */
.han-inline {
    font-family: var(--han);
    font-weight: 700;
}

.tagline {
    font-size: 1.075rem;
    color: var(--ink-soft);
    max-width: 34rem;
}

.badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.9rem 0 0.9rem;
}

.badges img {
    height: 52px;
    width: auto;
}

.platform-note {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
}

/* The hero visual: the tone palette, which is the thing the app is known for */
.hero-visual {
    display: flex;
    justify-content: center;
}

.tone-card {
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 1.75rem 1.5rem 1.5rem;
    width: 100%;
    max-width: 330px;
}

.tone-card-title {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 1.25rem;
}

.tone-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0;
}

.tone-row + .tone-row {
    border-top: 1px solid var(--edge);
}

.circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--han);
    font-size: 1.65rem;
    color: #FFFFFF;
    flex-shrink: 0;
    line-height: 1;
}

.circle.t1 { background: var(--tone1); }
.circle.t2 { background: var(--tone2); }
.circle.t3 { background: var(--tone3); }
.circle.t4 { background: var(--tone4); }

.tone-row .reading {
    font-size: 0.95rem;
    font-weight: 600;
}

.tone-row .gloss {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

/* Features */
.features {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.section-header {
    margin-bottom: 2.5rem;
}

.section-header h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin-top: 0.4rem;
    font-weight: 700;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.feature-card {
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.feature-card h3 {
    font-size: 1.05rem;
    margin: 0.45rem 0 0.5rem;
    letter-spacing: -0.01em;
}

.feature-card p {
    font-size: 0.925rem;
    color: var(--ink-soft);
}

/* The quiet middle section */
.quiet {
    max-width: 720px;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.quiet .seal {
    font-family: var(--han);
    font-size: 3rem;
    color: var(--brand);
    line-height: 1;
    margin-bottom: 1rem;
}

.quiet h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    font-weight: 700;
}

.quiet p {
    color: var(--ink-soft);
}

/* Privacy strip */
.privacy-highlight {
    background: var(--card);
    border-top: 1px solid var(--edge);
    border-bottom: 1px solid var(--edge);
    padding: 2.25rem 2rem;
}

.privacy-highlight .inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.privacy-highlight strong {
    color: var(--ink);
}

/* Get */
.get {
    max-width: 760px;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.get h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
    font-weight: 700;
}

.get p {
    color: var(--ink-soft);
}

.get .badges {
    justify-content: center;
}

/* Interior pages */
.page-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
}

.page-content h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: -0.025em;
    margin: 0.5rem 0 0.4rem;
    font-weight: 700;
}

.page-content h2 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin: 2.25rem 0 0.6rem;
    font-weight: 650;
}

.page-content h3 {
    font-size: 1rem;
    margin: 1.5rem 0 0.4rem;
}

.page-content p,
.page-content li {
    color: var(--ink-soft);
}

.page-content p + p {
    margin-top: 0.9rem;
}

.page-content ul {
    margin: 0.7rem 0 0.7rem 1.25rem;
}

.page-content li {
    margin-bottom: 0.35rem;
}

.updated {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    margin-bottom: 1.75rem;
}

.contact-email {
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0 0.5rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}

.support-topics {
    margin-top: 1rem;
}

.support-topic {
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.support-topic + .support-topic {
    margin-top: 0.75rem;
}

.support-topic h3 {
    margin: 0.35rem 0 0.4rem;
}

.support-topic p {
    font-size: 0.925rem;
}

/* Footer */
footer {
    border-top: 1px solid var(--edge);
    padding: 2.5rem 2rem;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-wordmark {
    font-weight: 650;
    color: var(--ink);
}

.footer-wordmark .dot {
    color: var(--brand);
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-links a {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.copyright {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-faint);
}

/* 404 */
.notfound {
    max-width: 640px;
    margin: 0 auto;
    padding: 5rem 2rem;
    text-align: center;
}

.notfound .big {
    font-family: var(--han);
    font-size: 4rem;
    color: var(--brand);
    line-height: 1;
    margin-bottom: 1rem;
}

@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 2rem;
        gap: 2.5rem;
    }

    .hero-visual {
        order: -1;
    }
}

@media (max-width: 560px) {
    header {
        padding: 1.25rem 1.25rem;
    }

    .hero,
    .features,
    .quiet,
    .get,
    .page-content {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }
}