/* underpaid.work - shared light theme.
   System fonts only: the site makes no third-party requests, like the apps.

   Direction: a plain light page, and one dark "home screen" stage per app page
   where the real widget behaviour runs. The highlighter yellow is the widget's
   own match highlight, so it only appears where something matches. */

:root {
    color-scheme: light;
    --paper: #eef1f4;
    --surface: #ffffff;
    --ink: #0b1220;
    --muted: #4d596b;
    --line: #d3d9e2;
    --link: #1d4ed8;
    --link-deep: #1639a8;
    --mark: #ffd60a;          /* match highlight, as in the widget */
    --mark-soft: #fff3a8;
    --wall-1: #16233f;        /* home-screen wallpaper */
    --wall-2: #0b1220;
    --radius: 6px;
    --measure: 40rem;
    --display: "Helvetica Neue", "Arial Nova", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { background: var(--paper); }

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-underline-offset: 0.2em; }
a:hover { color: var(--link-deep); }

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

.wrap { width: min(100% - 3rem, 64rem); margin-inline: auto; }

/* Top bar: no box, just a baseline rule */
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    border-bottom: 2px solid var(--ink);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.brand img { width: 1.75rem; height: 1.75rem; border-radius: 7px; display: block; }
.brand:hover { color: var(--ink); }

.topbar nav { display: flex; gap: 1.5rem; font-size: 0.95rem; }
.topbar nav a { color: var(--muted); text-decoration: none; padding-block: 0.25rem; }
.topbar nav a:hover { color: var(--ink); text-decoration: underline; }
.topbar nav a[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }

/* Display type */
.hero h1, .landing h1 {
    font-family: var(--display);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

/* Hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem); }

.hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: center;
    gap: clamp(2rem, 6vw, 4.5rem);
}

.hero.plain .wrap { grid-template-columns: minmax(0, 1fr); }

.hero h1 { font-size: clamp(2.8rem, 8vw, 5.4rem); }

.hero .tagline {
    margin-top: 1.25rem;
    max-width: 28rem;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--muted);
    text-wrap: pretty;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.btn {
    display: inline-block;
    padding: 0.75rem 1.3rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.97rem;
    text-decoration: none;
    border: 2px solid var(--ink);
    color: var(--ink);
    background: transparent;
}

.btn:hover { background: var(--surface); color: var(--ink); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #1c2a45; color: #fff; }

/* Stage: the memorable thing. A dark home screen holding the live widget. */
.stage {
    justify-self: center;
    width: min(100%, 24rem);
    padding: 1.25rem;
    border-radius: 32px;
    color: #fff;
    background:
        radial-gradient(120% 80% at 85% 0%, #2e4a8a 0%, rgba(46, 74, 138, 0) 60%),
        linear-gradient(170deg, var(--wall-1), var(--wall-2));
    box-shadow: 0 30px 50px -30px rgba(11, 18, 32, 0.7);
}

.stage-hint {
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
}

.tile {
    aspect-ratio: 1;
    border-radius: 32%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    position: relative;
    border: 0;
    font-family: inherit;
}

.t1 { background: #4f46e5; }
.t2 { background: #0f9d8a; }
.t3 { background: #e0732b; }
.t4 { background: #2f80ed; }
.t5 { background: #c2410c; }
.t6 { background: #7c3aed; }
.t7 { background: #475569; }
.t8 { background: #be185d; }

.tile .dot {
    position: absolute;
    top: 4%;
    right: 4%;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: #ff3b5c;
    border: 2px solid var(--wall-2);
}

/* Favourite Widget grid on the stage */
.favgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 22px; }

button.tile { cursor: pointer; transition: transform 0.12s ease; }
button.tile:active { transform: scale(0.92); }
button.tile:focus-visible { outline-color: var(--mark); }

/* Search Widget on the stage */
.widget { padding: 0.9rem; background: rgba(255, 255, 255, 0.12); border-radius: 22px; }

.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; min-height: 5.6rem; margin-bottom: 0.8rem; align-content: start; }

.result { text-align: center; font-size: 0.74rem; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.result .tile { margin-bottom: 0.35rem; font-size: 1rem; }
.result mark { background: var(--mark); color: var(--ink); font-weight: 700; border-radius: 2px; padding: 0 1px; }
.results .none { grid-column: 1 / -1; align-self: center; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; }

.keys { display: grid; gap: 0.35rem; }
.keys div { display: flex; justify-content: center; gap: 0.3rem; }

.key {
    flex: 1 1 0;
    max-width: 1.95rem;
    padding-block: 0.5rem;
    text-align: center;
    font: 600 0.85rem/1 var(--mono);
    text-transform: lowercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.key:hover { background: rgba(255, 255, 255, 0.28); }
.key:active { background: var(--mark); color: var(--ink); }
.key:focus-visible { outline-color: var(--mark); outline-offset: 1px; }
.key.wide { max-width: 4.2rem; flex-grow: 1.6; font-size: 0.75rem; }

/* Content */
.content { padding-block: clamp(1.5rem, 4vw, 3rem) 4.5rem; }
.content > .wrap > * { max-width: var(--measure); }

.content h2 {
    margin-top: 3.25rem;
    margin-bottom: 0.75rem;
    font-family: var(--display);
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.content > .wrap > h2:first-child { margin-top: 0; }

.content h3 { margin: 1.75rem 0 0.35rem; font-size: 1.05rem; font-weight: 700; }

.content p { margin-bottom: 1rem; color: #232b3a; text-wrap: pretty; }
.content p.updated { color: var(--muted); font-size: 0.92rem; }

.content ul:not(.steps):not(.apps):not(.features) { padding-left: 1.25rem; margin-bottom: 1rem; }
.content li { margin-bottom: 0.5rem; }

/* Features: ruled rows, no card boxes */
.features { list-style: none; max-width: none !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; margin: 1.25rem 0 0; }

.features li { padding: 1rem 0; border-top: 2px solid var(--ink); margin: 0; }
.features strong { display: block; font-size: 1rem; font-weight: 750; }
.features span { display: block; margin-top: 0.15rem; font-size: 0.93rem; color: var(--muted); }

/* Steps: a real sequence, so numbered */
.steps { list-style: none; counter-reset: step; margin: 0.5rem 0 1rem; }

.steps li {
    counter-increment: step;
    position: relative;
    margin: 0;
    padding: 0.8rem 0 0.8rem 2.75rem;
    border-bottom: 1px solid var(--line);
}

.steps li:last-child { border-bottom: 0; }

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    background: var(--mark);
    color: var(--ink);
    border-radius: 6px;
    font: 800 0.85rem/1 var(--mono);
}

.steps .detail { display: block; margin-top: 0.2rem; font-size: 0.93rem; color: var(--muted); }

/* Callout */
.note {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--mark-soft);
    border-left: 4px solid var(--mark);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink);
    font-size: 0.97rem;
}

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

/* App list on beta page */
.apps { list-style: none; margin: 0.5rem 0 1.5rem; }
.apps li { padding: 1rem 0; border-top: 1px solid var(--line); margin: 0; }
.apps li:last-child { border-bottom: 1px solid var(--line); }
.apps li > a:first-child { font-weight: 700; }
.apps li span { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.95rem; }

/* Demo image */
.demo { display: block; width: 100%; max-width: 20rem; margin: 1.25rem 0 1.5rem; border-radius: 18px; border: 1px solid var(--line); }

/* Privacy tables */
.content table { width: 100%; max-width: var(--measure); border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: 0.93rem; background: var(--surface); border-radius: 8px; overflow: hidden; }
.content th, .content td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.content th { background: #e3e8ef; font-weight: 700; }
.content tr:last-child td { border-bottom: 0; }

code { font-family: var(--mono); font-size: 0.86em; background: #e3e8ef; padding: 0.1rem 0.35rem; border-radius: 4px; overflow-wrap: anywhere; }

/* Footer links */
.links { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.95rem; }

footer .wrap { padding-block: 1.5rem; border-top: 2px solid var(--ink); font-size: 0.85rem; color: var(--muted); }
footer a { color: var(--muted); }

/* Landing: headline left, live widget right, apps below */
.landing { padding-block: clamp(2.5rem, 7vw, 5rem) 4rem; }

.landing .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: center;
    gap: clamp(2rem, 6vw, 4.5rem);
}

.landing h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.02; }
.landing h1 span { display: block; }
.landing .tagline { margin-top: 1.25rem; max-width: 26rem; font-size: 1.25rem; color: var(--muted); text-wrap: pretty; }

.appcards { list-style: none; margin-top: clamp(3rem, 7vw, 5rem); }

.appcards li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0 1.25rem;
    align-items: center;
    max-width: 44rem;
    padding: 1.4rem 0;
    border-top: 2px solid var(--ink);
}

.appcards li:last-child { border-bottom: 2px solid var(--ink); }
.appcards .appicon { display: block; width: 4rem; height: 4rem; border-radius: 22%; box-shadow: 0 0 0 1px var(--line); }
.appcards h2 { font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.15; font-weight: 800; }
.appcards h2 a { color: var(--ink); text-decoration: none; }
.appcards h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--mark); }
.appcards p { color: var(--muted); font-size: 0.97rem; }
.appcards .sub { margin-top: 0.25rem; font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }

.more { margin-top: 2rem; max-width: 40rem; color: var(--muted); font-size: 0.97rem; }

@media (max-width: 760px) {
    .hero .wrap, .landing .top { grid-template-columns: minmax(0, 1fr); }
    .features { grid-template-columns: 1fr; }
    .topbar nav { gap: 0.9rem; font-size: 0.88rem; }
}

@media (max-width: 420px) {
    .topbar nav a:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}