/* Days Since — site styles.
   Self-contained: this file used to be a theme layer sitting on top of another
   site's index.css, which supplied the reset, the body font and the page
   container. That file isn't here, so all of it lives below.

   The palette is the app's own — TrackerColor.blue and the icon's gradient — so
   the page and the product read as the same thing. */

/* ---------------------------------------------------------------- Tokens */

:root {
    color-scheme: light dark;

    --ds-blue: rgb(51, 130, 240);
    --ds-blue-light: rgb(92, 153, 250);
    --ds-blue-deep: rgb(28, 69, 158);

    --ink: rgb(24, 28, 34);
    --body: rgb(78, 86, 97);
    --muted: rgb(122, 132, 145);
    --surface: rgb(247, 248, 250);
    --card: rgb(255, 255, 255);
    --line: rgb(224, 228, 234);
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.14);
    --header-bg: rgba(255, 255, 255, 0.72);

    --radius: 16px;
    --page: 1040px;
    --gutter: clamp(20px, 5vw, 32px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ds-blue: rgb(92, 153, 250);

        --ink: rgb(240, 243, 247);
        --body: rgb(176, 185, 197);
        --muted: rgb(134, 145, 158);
        --surface: rgb(15, 17, 21);
        --card: rgb(24, 27, 33);
        --line: rgb(45, 50, 59);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
        --header-bg: rgba(15, 17, 21, 0.72);
    }
}

/* ----------------------------------------------------------------- Reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

/* An author `display` beats the UA sheet's `[hidden] { display: none }`, so
   anything given a display value here would ignore the attribute without this. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

body {
    /* The system stack: this is an Apple app, and it means no webfont round
       trip and no flash of unstyled text. */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--body);
    background-color: var(--surface);
    -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

a {
    color: var(--ds-blue);
}

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

/* ---------------------------------------------------------------- Layout */

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

section {
    padding-block: clamp(48px, 9vw, 88px);
}

/* Anchored targets would otherwise land under the sticky header. */
section[id],
footer[id] {
    scroll-margin-top: 62px;
}

.section-lead {
    color: var(--muted);
    max-width: 60ch;
    margin-top: 12px;
    text-wrap: pretty;
}

h2 {
    font-size: clamp(1.6rem, 4vw, 2.1rem);
}

/* ---------------------------------------------------------------- Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--header-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
}

.site-header .mark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    /* Two lines of wordmark would double the header height on a phone. */
    white-space: nowrap;
}

.site-header .mark img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.site-header nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.site-header nav a {
    display: inline-flex;
    align-items: center;
    /* 44px tall so it's a comfortable tap target on a phone. */
    min-height: 44px;
    padding-inline: 12px;
    border-radius: 10px;
    font-size: 0.95rem;
    text-decoration: none;
}

.site-header nav a:hover {
    background-color: color-mix(in srgb, var(--ds-blue) 12%, transparent);
}

/* On a phone the wordmark plus three links won't fit. The in-page anchors are
   the ones to drop — they only jump somewhere the user can reach by scrolling,
   whereas Privacy is a real destination. */
@media (max-width: 480px) {
    .site-header nav a.jump {
        display: none;
    }
}

/* ------------------------------------------------------------------ Hero */

.hero {
    background: linear-gradient(150deg, var(--ds-blue-light) 0%, rgb(51, 130, 240) 48%, var(--ds-blue-deep) 100%);
    color: white;
    text-align: center;
    padding-block: clamp(56px, 11vw, 104px);
}

.hero h1,
.hero h2,
.hero h3 {
    color: white;
}

.hero img.app-icon {
    width: clamp(96px, 22vw, 124px);
    height: clamp(96px, 22vw, 124px);
    margin-inline: auto;
    border-radius: 24%;
    box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.6);
}

.hero h1 {
    font-size: clamp(2.25rem, 8vw, 3.4rem);
    margin-top: 26px;
    letter-spacing: -0.03em;
}

.hero .tagline {
    font-size: clamp(1.05rem, 3.6vw, 1.3rem);
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.86);
}

.hero .pitch {
    max-width: 54ch;
    margin: 22px auto 0;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: pretty;
}

.badge {
    display: inline-block;
    margin-top: 30px;
    padding: 11px 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: 500;
    font-size: 0.95rem;
}

.badge-instore {
    color: white;
    font-weight: bold;
}

.badge-instore:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin-top: 26px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.86);
}

.platforms span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.platforms svg {
    width: 17px;
    height: 17px;
}

/* -------------------------------------------------------------- Examples */

.examples {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-top: 28px;
}

.examples li {
    background-color: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 17px;
    font-size: 0.92rem;
    box-shadow: var(--shadow);
}

/* -------------------------------------------------------------- Features */

.features {
    background-color: var(--card);
    border-block: 1px solid var(--line);
}

.feature-grid {
    display: grid;
    /* min(100%, …) keeps a single column from overflowing a narrow phone. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 14px;
    margin-top: 36px;
}

.feature {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}

.icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background-color: color-mix(in srgb, var(--ds-blue) 13%, transparent);
    color: var(--ds-blue);
    margin-bottom: 14px;
}

.icon svg {
    width: 21px;
    height: 21px;
}

.feature h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.05rem;
    margin-bottom: 7px;
}

.feature p {
    font-size: 0.95rem;
    text-wrap: pretty;
}

.pill {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-blue);
    background-color: color-mix(in srgb, var(--ds-blue) 13%, transparent);
    border-radius: 999px;
    padding: 3px 9px;
}

/* A closing full-width card rather than an orphan in the grid. */
.privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 14px;
    padding: 24px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.privacy-note .icon {
    flex: none;
    margin-bottom: 0;
}

/* --------------------------------------------------------------- Pricing */

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 18px;
    margin-top: 36px;
    align-items: start;
}

.plan {
    background-color: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.plan.premium {
    border-color: var(--ds-blue);
    box-shadow: 0 0 0 1px var(--ds-blue), 0 16px 40px -22px var(--ds-blue-deep);
}

.plan h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
}

.plan .price {
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    margin-top: 10px;
}

.plan .price small {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
}

.plan ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.plan li {
    position: relative;
    padding: 9px 0 9px 28px;
    font-size: 0.95rem;
    border-top: 1px solid var(--line);
}

.plan li:first-child {
    border-top: 0;
}

.plan li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--ds-blue);
    border-bottom: 2px solid var(--ds-blue);
    transform: rotate(-45deg);
}

.plan .note {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--muted);
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
    background-color: var(--card);
    border-top: 1px solid var(--line);
    padding-block: clamp(40px, 7vw, 64px);
}

.site-footer h2 {
    font-size: clamp(1.4rem, 3.5vw, 1.7rem);
}

.site-footer p {
    max-width: 60ch;
    margin-top: 12px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
}

.footer-links .copyright {
    margin: 0;
    margin-left: auto;
    color: var(--muted);
}

/* ----------------------------------------------------------- Legal pages */

.legal {
    max-width: 76ch;
}

.legal h1 {
    font-size: clamp(1.9rem, 6vw, 2.4rem);
}

.legal h2 {
    font-size: 1.25rem;
    margin-top: 40px;
}

.legal p,
.legal li {
    margin-top: 12px;
    text-wrap: pretty;
}

.legal ul {
    padding-left: 20px;
    margin-top: 4px;
}

.legal li::marker {
    color: var(--ds-blue);
}

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

.legal .updated {
    color: var(--muted);
    font-size: 0.92rem;
    margin-top: 8px;
}

.legal .summary {
    background-color: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ds-blue);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 22px 26px;
    margin-top: 28px;
    box-shadow: var(--shadow);
}

.legal .summary p {
    margin-top: 0;
}

/* --------------------------------------------------------------- Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--ds-blue);
    color: white;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 550;
    cursor: pointer;
}

.button:hover {
    filter: brightness(1.07);
}

.button:disabled {
    opacity: 0.6;
    cursor: default;
    filter: none;
}

.button.ghost {
    background-color: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.button.ghost:hover {
    background-color: color-mix(in srgb, var(--ds-blue) 10%, transparent);
    filter: none;
}

.site-footer .button {
    margin-top: 6px;
}

.icon-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: 10px;
    background-color: transparent;
    color: var(--muted);
    cursor: pointer;
}

.icon-button:hover {
    background-color: color-mix(in srgb, var(--ds-blue) 12%, transparent);
    color: var(--ink);
}

.icon-button svg {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------- Dialog */

dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(88vh, 760px);
    /* A native dialog centres itself with `margin: auto`, which the reset
       above resets away. Put it back. */
    margin: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background-color: var(--card);
    color: var(--body);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

dialog::backdrop {
    background-color: rgba(8, 11, 16, 0.55);
    backdrop-filter: blur(3px);
}

dialog form {
    display: flex;
    flex-direction: column;
    /* The dialog's own max-height, so only the body scrolls. */
    max-height: inherit;
}

.dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px 24px;
    border-bottom: 1px solid var(--line);
}

.dialog-head h2 {
    font-size: 1.2rem;
    margin-right: auto;
}

.dialog-body {
    padding: 22px 24px;
    overflow-y: auto;
}

.dialog-intro {
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 18px;
}

.dialog-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    background-color: var(--surface);
}

/* The copy button only appears after a failure; keep it away from Send. */
.dialog-foot [data-copy-support] {
    margin-right: auto;
}

/* ------------------------------------------------------------------ Form */

.dialog-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}

.dialog-body label:not(:first-of-type) {
    margin-top: 16px;
}

.dialog-body input,
.dialog-body select,
.dialog-body textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: var(--surface);
    color: var(--ink);
    font: inherit;
    /* 16px minimum stops iOS Safari zooming in on focus. */
    font-size: 16px;
}

.dialog-body textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.dialog-body input:focus,
.dialog-body select:focus,
.dialog-body textarea:focus {
    outline: 2px solid var(--ds-blue);
    outline-offset: 1px;
    border-color: transparent;
}

.field-hint {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--muted);
}

.form-status {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

.form-status.pending {
    background-color: color-mix(in srgb, var(--ds-blue) 10%, transparent);
    border-color: color-mix(in srgb, var(--ds-blue) 30%, transparent);
}

.form-status.success {
    background-color: color-mix(in srgb, rgb(38, 160, 90) 14%, transparent);
    border-color: color-mix(in srgb, rgb(38, 160, 90) 40%, transparent);
    color: var(--ink);
}

.form-status.error {
    background-color: color-mix(in srgb, rgb(214, 66, 60) 13%, transparent);
    border-color: color-mix(in srgb, rgb(214, 66, 60) 40%, transparent);
    color: var(--ink);
}

/* Off-screen rather than display:none — bots skip fields that aren't rendered. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}