/* Base layer for every redesigned page: reset, type, header, footer, buttons,
   app icons and page transitions. Page-specific layout lives in home.css and
   product.css; colour, type and motion values come from tokens.css. */

@layer reset, base, components, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
    ol, ul { padding: 0; }
    img, svg, video { display: block; max-width: 100%; }
    img { height: auto; }
    button, input, select, textarea { font: inherit; color: inherit; }
}

@layer base {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 5.5rem;
        overflow-x: clip;
    }

    body {
        min-height: 100vh;
        font-family: var(--font-sans);
        font-size: var(--step-0);
        line-height: 1.6;
        color: var(--text);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: clip;
    }

    h1, h2, h3, h4 {
        font-family: var(--font-display);
        font-weight: 650;
        line-height: 1.04;
        letter-spacing: -0.02em;
        text-wrap: balance;
        font-optical-sizing: auto;
    }

    h1 { font-size: var(--step-5); font-weight: 680; letter-spacing: -0.035em; line-height: 0.96; }
    h2 { font-size: var(--step-4); letter-spacing: -0.03em; }
    h3 { font-size: var(--step-2); }

    p { text-wrap: pretty; }
    a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
    strong { font-weight: 650; }
    code { font-family: var(--font-mono); font-size: 0.9em; }

    ::selection { color: var(--text); background: color-mix(in oklab, var(--signal) 26%, transparent); }

    :focus-visible {
        outline: 2.5px solid var(--focus);
        outline-offset: 3px;
        border-radius: 6px;
    }
}

@layer components {
    /* Skip link: out of sight until a keyboard reaches it. */
    .skip-link {
        position: fixed;
        z-index: 100;
        top: 0.75rem;
        left: 0.75rem;
        padding: 0.6rem 1rem;
        border-radius: 999px;
        color: var(--text-inverse);
        background: var(--text);
        font-weight: 650;
        text-decoration: none;
        transform: translateY(-160%);
        transition: transform var(--dur-fast) var(--ease-out);
    }
    .skip-link:focus-visible { transform: none; }

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

    .site-header {
        position: sticky;
        z-index: 50;
        top: 0;
        view-transition-name: site-header;
        background: var(--nav-wash);
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
        backdrop-filter: saturate(1.6) blur(18px);
        border-bottom: 1px solid transparent;
        transition: border-color var(--dur-base) var(--ease-out);
    }

    /* The hairline appears once the page has moved under the header. */
    @supports (animation-timeline: scroll()) {
        .site-header { animation: header-line linear both; animation-timeline: scroll(); animation-range: 0 64px; }
        @keyframes header-line { to { border-bottom-color: var(--line); } }
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        width: min(100% - 2 * var(--gutter), var(--max-width));
        min-height: 4.25rem;
        margin-inline: auto;
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        text-decoration: none;
        font-family: var(--font-display);
        font-size: 1.28rem;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

    /* The mark is a phone in the device-frame orange, tipped as if just set down. */
    .brand__mark {
        position: relative;
        width: 1.05rem;
        height: 1.6rem;
        border-radius: 0.34rem;
        background: var(--signal);
        box-shadow: inset 0 0 0 2.5px color-mix(in oklab, var(--signal) 70%, #000);
        rotate: -9deg;
        transition: rotate var(--dur-slow) var(--ease-spring);
    }
    .brand__mark::after {
        content: "";
        position: absolute;
        top: 0.22rem;
        left: 50%;
        width: 0.38rem;
        height: 0.12rem;
        border-radius: 1rem;
        background: color-mix(in oklab, var(--signal) 55%, #000);
        translate: -50% 0;
    }
    .brand:hover .brand__mark { rotate: 6deg; }

    .site-header__nav {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        font-size: 0.94rem;
        font-weight: 560;
    }

    .site-header__nav a {
        padding: 0.5rem 0.8rem;
        border-radius: 999px;
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--dur-fast), background-color var(--dur-fast);
    }
    .site-header__nav a:hover { color: var(--text); background: var(--bg-muted); }
    .site-header__nav a[aria-current="page"] { color: var(--text); background: var(--bg-muted); }
    .site-header__lang { margin-left: 0.35rem; }

    .theme-toggle {
        display: inline-grid;
        place-items: center;
        width: 2.4rem;
        height: 2.4rem;
        margin-left: 0.2rem;
        border: 0;
        border-radius: 999px;
        color: var(--text-muted);
        background: transparent;
        cursor: pointer;
        transition: color var(--dur-fast), background-color var(--dur-fast), rotate var(--dur-slow) var(--ease-spring);
    }
    .theme-toggle:hover { color: var(--text); background: var(--bg-muted); rotate: 20deg; }

    .site-header__lang-short { display: none; }

    @media (max-width: 560px) {
        .site-header__lang-long { display: none; }
        .site-header__lang-short { display: inline; }
        .site-header__nav { font-size: 0.88rem; }
        .site-header__nav a { padding: 0.45rem 0.55rem; }
        .site-header__nav a[href$="/guides"] { display: none; }
        .brand { font-size: 1.12rem; }
    }

    @media (max-width: 360px) {
        .site-header__nav a[href$="/support"] { display: none; }
    }

    /* ---------- Buttons and links ---------- */

    .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 3rem;
        padding: 0.75rem 1.35rem;
        border: 1px solid transparent;
        border-radius: 999px;
        font-weight: 620;
        line-height: 1.1;
        text-decoration: none;
        transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-out);
    }
    .button:hover { transform: translateY(-2px); }
    .button:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }

    .button--primary { color: var(--text-inverse); background: var(--text); box-shadow: var(--shadow-sm); }
    .button--primary:hover { box-shadow: var(--shadow-md); }
    .button--ghost { border-color: var(--line-strong); background: transparent; }
    .button--ghost:hover { background: var(--bg-elevated); border-color: var(--text-soft); }

    .text-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: 620;
        text-decoration: none;
        white-space: nowrap;
    }
    .text-link .arrow { transition: translate var(--dur-base) var(--ease-spring); }
    .text-link:hover .arrow { translate: 4px 0; }
    .text-link:hover { text-decoration: underline; }

    .store-badge { display: inline-block; border-radius: 9px; transition: transform var(--dur-base) var(--ease-spring); }
    .store-badge:hover { transform: translateY(-2px); }
    .store-badge img { height: 2.75rem; width: auto; }

    /* ---------- App icons ---------- */

    /* Squircle mask so square exports and pre-rounded exports match, plus the
       thin inner edge iOS draws so light icons do not dissolve into paper. */
    .app-icon {
        flex: none;
        border-radius: var(--radius-icon);
        background: var(--bg-elevated);
        box-shadow: 0 0 0 1px light-dark(rgba(26, 25, 21, 0.08), rgba(242, 237, 226, 0.1)), var(--shadow-sm);
    }

    /* ---------- Section headings ---------- */

    .section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: var(--space-3) var(--space-6);
        margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    }
    .section-head > div { max-width: 44rem; }
    .section-head p { margin-top: 0.85rem; color: var(--text-muted); font-size: var(--step-1); line-height: 1.5; }

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

    .site-footer {
        margin-top: var(--section-gap);
        border-top: 1px solid var(--line);
        background: var(--bg-elevated);
    }

    .site-footer__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-6) var(--space-5);
        width: min(100% - 2 * var(--gutter), var(--max-width));
        margin-inline: auto;
        padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-5);
    }

    .site-footer__brand p { margin-top: 0.9rem; color: var(--text-soft); font-size: 0.92rem; }

    .site-footer__nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
    .site-footer__nav div { display: grid; align-content: start; gap: 0.55rem; }
    .site-footer__nav a { width: fit-content; color: var(--text-muted); font-size: 0.95rem; text-decoration: none; }
    .site-footer__nav a:hover { color: var(--text); text-decoration: underline; }
    .site-footer__heading { margin-bottom: 0.2rem; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }

    .site-footer__app { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.9rem; }
    .site-footer__app a { color: var(--text-muted); }
    .site-footer__app a:hover { color: var(--text); }

    .site-footer__legal {
        grid-column: 1 / -1;
        padding-top: var(--space-4);
        border-top: 1px solid var(--line);
        color: var(--text-soft);
        font-size: 0.86rem;
    }

    @media (max-width: 760px) {
        .site-footer__inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
        .site-footer__nav { grid-template-columns: 1fr 1fr; }
    }
}

/* ---------- Page transitions ----------
   Same-origin navigations cross-fade, the header stays put, and an app icon the
   reader clicked flies into the product page's hero icon (site.js names it on
   pageswap). Browsers without cross-document view transitions just navigate. */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 180ms var(--ease-out) both vt-fade-out; }
::view-transition-new(root) { animation: 360ms var(--ease-out) 60ms both vt-rise-in; }
::view-transition-group(app-icon) { animation-duration: 520ms; animation-timing-function: var(--ease-spring); }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}