/* ==========================================================================
   App reviews and pricing pages (content/en/c/2026/a/, restyle ticket 04): the few components only this group
   uses, on top of site.css (ticks and crosses, .quote, .verdict/.score, tables, .cta, .btn come from there).
   Linked from each page's front matter: extra_css: [app-reviews-pricing]. Two inks, square corners, rules, text
   left-aligned.
   ========================================================================== */

/* The opening paragraph, a little larger. */
.lede { font-size: 19px; line-height: 1.55; margin-bottom: 1.2em; }

/* The words under the score ("Good product, risky commitment"). */
.verdict-label { font-weight: 700; color: var(--ink); margin-bottom: 4px !important; }

/* A pricing page's verdict: no score, just a ruled block. */
.ruled-block { margin: 24px 0; padding: 14px 0 2px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.ruled-block h3 { margin-top: 0; }

/* Calls to action: the button is .btn (site.css); its words already end in an arrow (.btn-plain). */
.cta .check { margin: 0 0 18px; }

/* --------------------------------------------------------------------------
   The two prices side by side ("LingoAce $21-30 per lesson" VS "MOE Anki Deck Free"), also on a phone. Two ruled
   boxes; the deck's has the heavier line and the red tick of a chosen practice box. Pleco's "use both" pair is
   site.css .pair (stacked on a phone: its boxes hold sentences), with a red "+" between.
   -------------------------------------------------------------------------- */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin: 24px 0 28px; }
.versus-vs, .pair-plus { align-self: center; }
.versus-side { position: relative; padding: 12px; border: 1.5px solid var(--ink); }
.versus-side.ours { border-width: 2.5px; }
.versus-side.ours::after {
    content: "\2713";
    position: absolute;
    top: 6px;
    right: 8px;
    font: 700 18px/1 var(--glyph);
    color: var(--red);
}
.versus-name { padding-right: 18px; font: 700 17px/1.25 var(--serif); color: var(--ink); }
.versus-price { margin-top: 4px; font: 700 26px/1.15 var(--serif); color: var(--ink); }
.versus-note { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.versus-vs, .pair-plus { font: 600 12px/1 var(--sans); letter-spacing: .12em; color: var(--red); }
.pair-plus { font-size: 20px; letter-spacing: 0; }

@media (min-width: 600px) {
    .versus { gap: 16px; align-items: stretch; }
    .versus-side { padding: 14px 16px; }
    .versus-price { font-size: 30px; }
    .versus-note { font-size: 14px; }
}

/* On a phone these three-column tables set a size smaller, so their longest words ("Commitment") fit whole. */
@media (max-width: 599px) {
    .article-content th, .article-content td { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Total cost, P1 to P6: one bar per option. The other option's bar is a cobalt outline; the deck's is solid
   cobalt, its figure just past its end. Each bar's length is set inline, to scale (style="width: 52%": its amount
   over the chart's largest, a range at its midpoint). The track stops 56 px short of the column so a full-length
   deck bar's figure still fits after it.
   -------------------------------------------------------------------------- */
.cost-chart { margin: 28px 0; padding: 14px 0 6px; border-top: 2px solid var(--ink); }
.cost-chart h3 { margin: 0 0 12px; }
.cost-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
.cost-label { font-size: 14px; color: var(--muted); }
.cost-track { position: relative; height: 32px; margin-right: 56px; }
.cost-fill {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0 10px;
    border: 1.5px solid var(--ink);
    background: var(--soft);
    font: 700 14px/1 var(--sans);
    color: var(--ink);
    white-space: nowrap;
}
.cost-fill.ours { padding: 0; background: var(--ink); }
.cost-fill.ours span { position: absolute; left: calc(100% + 8px); color: var(--ink); }
.cost-note { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

@media (min-width: 600px) {
    .cost-row { grid-template-columns: 180px 1fr; gap: 14px; align-items: center; }
}

/* --------------------------------------------------------------------------
   A pricing page's strengths and considerations, side by side on a laptop.
   -------------------------------------------------------------------------- */
.pros-cons { display: grid; grid-template-columns: 1fr; gap: 0 28px; margin: 16px 0 8px; }
.pros-cons h3 { margin-top: 8px; }
@media (min-width: 600px) {
    .pros-cons { grid-template-columns: 1fr 1fr; }
}