/* Shared stylesheet for the written pages: the FAQ, the guides and the legal
   texts. Not for the tool itself, which keeps its own inline styles.

   These pages are documents, not the application. They need type, measure and
   a footer, and none of the modal, report or pricing machinery, which is why
   this file is a few kilobytes instead of the forty the app carries.

   Tokens are copied from index.html rather than shared with it, because the
   app's CSS is still inline. When that gets extracted, these should collapse
   into one set. */

:root {
    color-scheme: light;

    --bg:          #FAFAFA;
    --surface:     #FFFFFF;
    --ink:         #21232E;
    --ink-soft:    #33364A;
    --muted:       #6B6E7B;
    --line:        rgba(33,35,46,.09);
    --accent:      #105BFF;
    --accent-ink:  #0A46C8;
    --accent-soft: rgba(16,91,255,.11);
    --good:        #2E7D12;
    --good-soft:   rgba(46,125,18,.10);
    --money:       #FE8500;
    --money-ink:   #C85F00;
    --money-soft:  rgba(254,133,0,.13);
    --btn-bg:      #105BFF;
    --btn-ink:     #FFFFFF;

    --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --display: 'Nunito', var(--sans);
}

/* The tool has a dark palette, so these pages need the same one. Arriving at a
   white document from a dark home page is the kind of jolt that reads as "this
   page belongs to someone else". Values and structure are the app's, including
   the guard that lets an explicit light choice beat a dark system setting. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg:          #17181F;
        --surface:     #1E2029;
        --ink:         #F4F5F8;
        --ink-soft:    #DDDEE6;
        --muted:       #A3A6B3;
        --line:        rgba(255,255,255,.10);
        --accent:      #5B8CFF;
        --accent-ink:  #9DBAFF;
        --accent-soft: rgba(91,140,255,.16);
        --good:        #8FCB3A;
        --good-soft:   rgba(143,203,58,.14);
        --money:       #FF9E33;
        --money-ink:   #FFB768;
        --money-soft:  rgba(255,158,51,.16);
        --btn-bg:      #105BFF;
        --btn-ink:     #FFFFFF;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:          #17181F;
    --surface:     #1E2029;
    --ink:         #F4F5F8;
    --ink-soft:    #DDDEE6;
    --muted:       #A3A6B3;
    --line:        rgba(255,255,255,.10);
    --accent:      #5B8CFF;
    --accent-ink:  #9DBAFF;
    --accent-soft: rgba(91,140,255,.16);
    --good:        #8FCB3A;
    --good-soft:   rgba(143,203,58,.14);
    --money:       #FF9E33;
    --money-ink:   #FFB768;
    --money-soft:  rgba(255,158,51,.16);
    --btn-bg:      #105BFF;
    --btn-ink:     #FFFFFF;
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-soft);
    font-family: var(--sans);
    /* 17px, not 16: these pages are read, not scanned. */
    font-size: 17px;
    line-height: 1.65;
}

/* One gutter, set once. Everything else lays out inside it. */
.wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding-inline: 20px;
}

/* ---------------------------------------------------------------- header */

.site-head {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.site-head .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 14px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 17px;
    color: var(--ink);
    text-decoration: none;
}

.brand img { width: 26px; height: 26px; display: block; }

.head-links {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.head-links a { color: var(--muted); text-decoration: none; }
.head-links a:hover { color: var(--ink); text-decoration: underline; }

/* The other language is a real link to a real URL, not a button that rewrites
   the page. That is the whole point of these pages having two versions. */
.lang-link {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 11px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ text */

main { padding-block: 44px 8px; }

h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(30px, 6vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 14px;
    text-wrap: balance;
}

.standfirst {
    font-size: 19px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 40px;
    text-wrap: pretty;
}

h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 23px;
    line-height: 1.25;
    color: var(--ink);
    margin: 42px 0 12px;
    text-wrap: balance;
}

h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    margin: 28px 0 8px;
}

p { margin: 0 0 18px; }

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

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 9px; }

strong { color: var(--ink); font-weight: 600; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 40px 0;
}

/* A step in a guide: numbered, so the reader can stop and come back. */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 18px; }

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

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

.steps > li > h3 { margin-top: 0; }

/* Pulled aside from the argument: a caveat, or a thing people get wrong. */
.note {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    padding: 16px 18px;
    margin: 0 0 22px;
    font-size: 16px;
}

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

/* Pricing page: the plan tiles. Own classes, not the app's .price, so there is
   no collision with the offer card's price text on the main page. Each tile is
   a title + description, a bullet list of what you get, and a price with a CTA. */
.plan-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin: 30px 0 26px;
}
.plan-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.plan-tile.featured {
    border-color: var(--money);
    box-shadow: 0 0 0 1px var(--money-soft);
}
.plan-head { display: flex; gap: 14px; align-items: flex-start; }
.plan-icon { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.plan-tile.featured .plan-icon { color: var(--money-ink); }
.plan-title {
    margin: 0 0 4px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.1;
    color: var(--ink);
}
.plan-sub { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.plan-divider { height: 1px; background: var(--line); }
.plan-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
.plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plan-feats li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}
.plan-feats li svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.plan-tile.featured .plan-feats li svg { color: var(--money-ink); }
.plan-buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    text-align: center;
    min-width: 136px;
}
.plan-price {
    font-family: var(--display);
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
}
.plan-per {
    display: block;
    margin-top: 5px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.plan-cta {
    display: inline-block;
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-weight: 700;
    font-size: 14px;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}
.plan-cta:hover { opacity: .9; color: var(--btn-ink); }
.plan-fine { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 580px) {
    .plan-body { grid-template-columns: 1fr; gap: 18px; }
    .plan-buy { align-items: flex-start; text-align: left; }
}

/* The FAQ. Only the first one is open: the list is long enough now that all of
   them open is a wall of text. The answers are in the markup either way, so
   crawlers and assistants read them closed. */
details {
    border-bottom: 1px solid var(--line);
    padding: 4px 0 8px;
}

summary {
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    cursor: pointer;
    padding: 12px 0;
    list-style: none;
}

summary::-webkit-details-marker { display: none; }

summary::after {
    content: '+';
    float: right;
    font-weight: 600;
    color: var(--muted);
}

details[open] summary::after { content: '\2212'; }

details > *:not(summary) { font-size: 16px; }

/* ------------------------------------------------------------------- cta */

.cta {
    background: var(--accent-soft);
    border-radius: 14px;
    padding: 26px 24px;
    margin: 44px 0 0;
    text-align: center;
}

.cta h2 { margin-top: 0; }

.cta-btn {
    display: inline-block;
    background: var(--btn-bg);
    color: var(--btn-ink);
    text-decoration: none;
    font-family: var(--display);
    font-weight: 800;
    font-size: 16px;
    padding: 13px 26px;
    border-radius: 999px;
}

.cta-btn:hover { color: var(--btn-ink); opacity: .88; }

/* ---------------------------------------------------------------- footer */

.site-foot {
    border-top: 1px solid var(--line);
    margin-top: 56px;
    padding-block: 28px 40px;
    font-size: 14px;
    color: var(--muted);
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 16px;
    padding: 0;
    list-style: none;
}

.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

.site-foot p { margin: 0; }

@media (max-width: 480px) {
    body { font-size: 16px; }
    main { padding-block: 32px 4px; }
    .standfirst { font-size: 17px; margin-bottom: 30px; }
}

/* ---------------------------------------------------------------------------
   Las paginas de acuerdos. Son generadas, hay mas de mil, y todas tienen la
   misma forma: un dato de dinero, un plazo, a quien cubria y donde se
   reclamaba. Lo que sigue es para esa forma. */

/* La miga de pan existe porque estas paginas cuelgan dos niveles abajo y
   mucha gente va a llegar desde una busqueda, sin pasar por la portada. */
.crumbs {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 18px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); }

/* La tabla es lo que se viene a buscar, asi que va antes que la prosa. En el
   telefono rueda en su propio contenedor: el cuerpo de la pagina no se mueve
   de lado nunca. */
.facts {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.facts th,
.facts td {
    text-align: left;
    vertical-align: top;
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid var(--line);
}
.facts th {
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    width: 38%;
}
.facts td { color: var(--ink); font-weight: 500; }

.exposed {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.exposed li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 14px;
    color: var(--ink-soft);
}

.source {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 24px;
}

/* El indice. Una fila por caso, con el dinero alineado a la derecha para que
   la columna se lea de un barrido. */
.settle-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}
.settle-filters a {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
}
.settle-filters a[aria-current="page"] {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-ink);
}
.settle-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.settle-list li {
    border-bottom: 1px solid var(--line);
}
.settle-list a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 13px 0;
    text-decoration: none;
    color: var(--ink);
}
.settle-list a:hover .settle-name { color: var(--accent-ink); }
.settle-name { font-weight: 600; flex: 1 1 58%; }
.settle-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.settle-when {
    font-size: 14px;
    color: var(--muted);
    flex: 0 0 100%;
}
@media (min-width: 620px) {
    .settle-when { flex: 0 0 auto; width: 13em; text-align: right; }
}
.settle-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-ink);
    background: var(--accent-soft);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Buscador del indice. Grande y arriba del todo: es lo primero que la pagina
   invita a hacer, buscar la empresa con la que tuviste trato. */
.settle-search { margin: 0 0 8px; }
.settle-search input {
    width: 100%;
    border: 1.5px solid var(--line);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.2' stroke='%238A8A8F' stroke-width='1.7'/%3E%3Cpath d='M11 11l3.2 3.2' stroke='%238A8A8F' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 18px center;
    border-radius: 999px;
    padding: 15px 20px 15px 48px;
    font-family: var(--sans);
    font-size: 17px;
    color: var(--ink);
}
.settle-search input::placeholder { color: var(--muted); }
.settle-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.settle-search-hint { font-size: 14px; color: var(--muted); margin: 0 2px 28px; }
.settle-empty { color: var(--muted); margin: 0 0 28px; }

/* Los abiertos van en tarjetas, no en filas al ras, para que esta seccion
   — la que tiene dinero reclamable hoy — se despegue del resto. */
.open-list { display: grid; gap: 8px; margin: 0 0 32px; }
.open-list .open-row { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.open-list .open-row a { padding: 14px 16px; }
.open-list .settle-amount { color: var(--accent-ink); }
.open-soon .settle-when { color: #C2410C; font-weight: 600; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .open-soon .settle-when { color: #FDBA74; }
}
:root[data-theme="dark"] .open-soon .settle-when { color: #FDBA74; }

/* ====================================================================
   MONEY POOL hub extras: the eyebrow, the three-stat row and the price
   cards. The home-page badge links here, so this page carries the same
   Money Pool identity. Tokens only, so it themes with the rest.
   ==================================================================== */
.pool-eyebrow {
    display: inline-block;
    font-family: var(--display); font-weight: 900;
    font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--money-ink); margin-bottom: 10px;
}
.pool-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin: 6px 0 30px;
}
.pstat {
    border: 1px solid var(--line); border-radius: 16px; padding: 16px 14px;
    background: var(--surface); text-align: center;
}
.pstat-n { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.1; }
.pstat-n.money { color: var(--money-ink); }
.pstat-l { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 560px) { .pstat { padding: 13px 10px; } .pstat-n { font-size: 21px; } }

.pool-prices {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin: 10px 0 8px;
}
.pp {
    border: 1px solid var(--line); border-radius: 16px; padding: 16px;
    background: var(--surface); display: flex; flex-direction: column;
}
.pp.featured { border-color: var(--money); background: var(--money-soft); }
.pp-k { font-size: 13px; color: var(--muted); font-weight: 600; }
.pp-v { font-family: var(--display); font-weight: 900; font-size: 22px; margin: 3px 0; }
.pp-v small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.pp-d { font-size: 12.5px; color: var(--muted); }
@media (max-width: 720px) { .pool-prices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .pool-prices { grid-template-columns: 1fr; } }

/* "What it costs" collapsed behind an expand toggle under Open now, so the
   open-to-claim cards stay the focus and pricing unfolds on demand. Native
   <details>, so this page needs no extra JS. */
.costs-fold { margin: 26px 0 8px; }
.costs-fold > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 15px 18px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface);
    transition: border-color .15s ease;
}
.costs-fold > summary::-webkit-details-marker { display: none; }
.costs-fold > summary:hover { border-color: var(--accent); }
.costs-title { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--ink); }
.costs-hint { font-size: 13.5px; color: var(--muted); }
.costs-fold > summary::after {
    content: ""; margin-left: auto; align-self: center;
    width: 9px; height: 9px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform .2s ease;
}
.costs-fold[open] > summary::after { transform: rotate(-135deg); }
.costs-fold[open] > summary { border-radius: 16px 16px 0 0; border-bottom-color: transparent; }
.costs-fold .pool-prices { margin-top: 12px; }