/* ==========================================================================
   Product landing pages (/products/*)
   Shared by every Dot* product page so they read as one family. Ported from the
   DotInventa page after it was checked live on desktop and mobile in both themes.
   Everything is scoped under .pl- so nothing here fights main.css, and it is built
   on the site's theme tokens (--ink, --surface, --accent-color, --bg-deep), so both
   themes resolve without per-component overrides.
   Each product still carries its own hero visual, styled inline on that page: the
   family rule is shared layout, one differentiator per product.
   ========================================================================== */

.pl-page {
    /* Status hues for dots and tints. Every dot sits beside a text label, so colour
       is never the only signal. */
    --pl-good: #22c55e; --pl-warn: #f59e0b; --pl-bad: #ef4444; --pl-info: #38bdf8;
    /* Status hues used as TEXT. Bright on the dark ground; darkened for light mode
       below, because small bright text on white measures near 2:1. */
    --pl-good-ink: #22c55e; --pl-warn-ink: #f59e0b; --pl-bad-ink: #ef4444;
    --pl-line: rgba(var(--ink), .09);
    --pl-line-strong: rgba(var(--ink), .16);
    --pl-soft: rgba(var(--ink), .66);
    --pl-faint: rgba(var(--ink), .5);
    --pl-mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
    /* Accent used as small TEXT (eyebrows, "on" pills). The accent itself is fine on dark. */
    --pl-accent-ink: var(--accent-color);
}
/* Measured against what each label really sits on, not plain white: pills carry a 12%
   status tint that costs contrast. The 700 shades cleared AA by only 0.02 to 0.08 there,
   so tinted pills use the 800 shades (about 6.4:1). Untinted red text uses red-700.
   The light sections tinted #e2ebdd cost contrast too: half-strength ink measured 3.1:1 and
   the #2f8000 accent 4.1:1 there, so light mode lifts both text tints (keeping the step
   between them) and uses a darker green for accent text (5.4:1). */
html[data-theme="light"] .pl-page {
    --pl-good-ink: #166534; --pl-warn-ink: #92400e; --pl-bad-ink: #b91c1c;
    --pl-soft: rgba(var(--ink), .78); --pl-faint: rgba(var(--ink), .68);
    --pl-accent-ink: #276b00;
}

.pl-page .num { font-variant-numeric: tabular-nums; }

.pl-eyebrow {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pl-accent-ink); margin-bottom: 14px;
}
.pl-sect-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.pl-sect-head h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.15; margin: 0 0 14px; text-wrap: balance; }
.pl-sect-head p { color: var(--pl-soft); font-size: 1.05rem; margin: 0; }

/* ---------- hero ---------- */
.pl-hero { padding: 150px 0 72px; position: relative; overflow: hidden; }
.pl-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 55% at 85% 20%, color-mix(in srgb, var(--accent-color), transparent 86%), transparent 70%);
}
.pl-hero .container { position: relative; }
/* Mirrors the site's .page-title breadcrumb without its tinted band, so the hero can
   lead while the trail still matches each page's BreadcrumbList schema. */
.pl-crumbs { margin-bottom: 34px; }
.pl-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.pl-crumbs li { color: var(--pl-faint); }
.pl-crumbs li + li { padding-left: 9px; }
.pl-crumbs li + li::before { content: "/"; padding-right: 9px; color: var(--pl-faint); }
.pl-crumbs a { color: var(--pl-soft); text-decoration: none; }
.pl-crumbs a:hover, .pl-crumbs a:focus-visible { color: var(--accent-color); }
.pl-crumbs .current { color: var(--heading-color); }

.pl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.pl-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.pl-brand .pl-mark { width: 52px; height: 52px; line-height: 0; flex-shrink: 0; }
.pl-brand .pl-mark .product-mark { width: 100%; height: 100%; display: block; border-radius: 13px; }
.pl-brand .pl-name { font-size: 1.15rem; font-weight: 700; color: var(--heading-color); }
.pl-status {
    display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600;
    padding: 5px 12px; border-radius: 100px; border: 1px solid var(--pl-line-strong);
    color: var(--pl-soft); background: var(--surface);
}
.pl-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pl-warn); }
.pl-status.live .dot { background: var(--pl-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-good), transparent 80%); }
.pl-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.35rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; margin: 0 0 20px; text-wrap: balance; }
.pl-hero h1 em { font-style: normal; color: var(--accent-color); }
.pl-lead { font-size: 1.1rem; line-height: 1.7; color: var(--pl-soft); margin: 0 0 32px; max-width: 34em; }
.pl-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pl-actions a { text-decoration: none; }
/* The arrow comes from the icon font (bi-arrow-up-right): a plain U+2197 renders as a blue
   emoji tile on Windows, which reads as a broken image inside a brand button. */
.pl-actions .pl-ext::after {
    content: "\f144"; font-family: bootstrap-icons; font-size: .8em; margin-left: 7px;
    display: inline-block; vertical-align: -.05em; line-height: 1;
}

/* ---------- panel: the generic card every hero visual sits in ---------- */
.pl-panel {
    background: var(--surface); border: 1px solid var(--pl-line-strong); border-radius: 16px;
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.35); overflow: hidden;
}
.pl-panel-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px; border-bottom: 1px solid var(--pl-line);
    font-size: .8rem; color: var(--pl-faint);
}
.pl-panel-bar b { color: var(--heading-color); font-weight: 600; font-size: .86rem; }
.pl-panel-note { padding: 11px 18px; font-size: .74rem; color: var(--pl-faint); border-top: 1px solid var(--pl-line); }

/* data table inside a panel. The scroll wrapper is also a size container, so a table can
   restack by the width of its own panel (see the container query at the end). */
.pl-panel-scroll { overflow-x: auto; container-type: inline-size; }
.pl-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.pl-table th {
    text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pl-faint); padding: 10px 14px; border-bottom: 1px solid var(--pl-line); white-space: nowrap;
}
.pl-table th.r, .pl-table td.r { text-align: right; }
.pl-table td { padding: 13px 14px; border-bottom: 1px solid var(--pl-line); font-size: .88rem; vertical-align: middle; }
.pl-table tr:last-child td { border-bottom: 0; }
.pl-table td.c-title { color: var(--heading-color); font-weight: 500; }
.pl-table td.dim { color: var(--pl-faint); }

.pl-sync { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--pl-soft); white-space: nowrap; }
.pl-sync .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pl-sync.good .dot { background: var(--pl-good); }
.pl-sync.warn .dot { background: var(--pl-warn); }
.pl-sync.bad  .dot { background: var(--pl-bad); }
.pl-sync.info .dot { background: var(--pl-info); }
.pl-bad-text { font-size: .78rem; font-weight: 600; color: var(--pl-bad-ink); }

/* activity or decision log inside a panel */
.pl-log-entry { padding: 16px 18px; border-bottom: 1px solid var(--pl-line); display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: start; }
.pl-log-entry:last-of-type { border-bottom: 0; }
.pl-log-entry time { font-family: var(--pl-mono); font-size: .8rem; color: var(--pl-faint); padding-top: 2px; }
.pl-log-entry .what { font-size: .9rem; color: var(--heading-color); font-weight: 600; margin-bottom: 4px; }
.pl-log-entry .why { font-size: .82rem; color: var(--pl-soft); line-height: 1.5; }
.pl-log-entry .why .num { color: var(--heading-color); }
.pl-out { font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.pl-out.good { color: var(--pl-good-ink); background: color-mix(in srgb, var(--pl-good), transparent 88%); }
.pl-out.warn { color: var(--pl-warn-ink); background: color-mix(in srgb, var(--pl-warn), transparent 88%); }
.pl-out.none { color: var(--pl-soft); background: rgba(var(--ink), .07); }

/* ---------- steps (a real sequence, so the numbers carry meaning) ---------- */
.pl-loop { --pl-steps: 6; display: grid; grid-template-columns: repeat(var(--pl-steps), minmax(0, 1fr)); gap: 0; }
.pl-step { position: relative; padding: 0 12px; text-align: center; }
.pl-step::after {
    content: ""; position: absolute; top: 27px; left: calc(50% + 34px); right: calc(-50% + 34px);
    height: 2px; background: repeating-linear-gradient(90deg, var(--pl-line-strong) 0 6px, transparent 6px 12px);
}
.pl-step:last-child::after { display: none; }
.pl-step .ico {
    width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; display: flex;
    align-items: center; justify-content: center; font-size: 1.35rem;
    color: var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 72%);
}
.pl-step .n { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--pl-faint); display: block; margin-bottom: 4px; }
.pl-step h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.pl-step p { font-size: .86rem; line-height: 1.55; color: var(--pl-soft); margin: 0; }

/* ---------- rule cards: icon plus a claim and its reason ---------- */
.pl-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pl-rule {
    background: var(--surface); border: 1px solid var(--pl-line); border-radius: 14px;
    padding: 28px 28px 26px; display: grid; grid-template-columns: 46px 1fr; gap: 18px;
}
.pl-rule .ico {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 88%);
}
.pl-rule h3 { font-size: 1.12rem; font-weight: 700; margin: 2px 0 8px; line-height: 1.3; text-wrap: balance; }
.pl-rule p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--pl-soft); }

/* ---------- split: copy beside a visual ---------- */
.pl-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.pl-split h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.15; margin: 0 0 16px; text-wrap: balance; }
.pl-split > div > p { color: var(--pl-soft); font-size: 1.02rem; line-height: 1.7; margin: 0 0 22px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chips span {
    font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--pl-line-strong); color: var(--heading-color); background: var(--surface);
}

/* ---------- module cards ---------- */
.pl-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pl-mod { background: var(--surface); border: 1px solid var(--pl-line); border-radius: 14px; padding: 26px; }
.pl-mod .top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pl-mod .top i { font-size: 1.3rem; color: var(--accent-color); }
.pl-mod h3 { font-size: 1.08rem; font-weight: 700; margin: 0; }
.pl-mod p { font-size: .9rem; line-height: 1.6; color: var(--pl-soft); margin: 0 0 14px; }
.pl-mod p:last-child { margin-bottom: 0; }
.pl-mod ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.pl-mod li { font-size: .86rem; color: var(--pl-soft); display: grid; grid-template-columns: 16px 1fr; gap: 8px; line-height: 1.5; }
.pl-mod li i { color: var(--accent-color); font-size: .8rem; padding-top: 3px; }

/* ---------- tiers: status-labelled cards (channels, milestones, editions) ---------- */
.pl-tiers { --pl-tier-cols: 4; display: grid; grid-template-columns: repeat(var(--pl-tier-cols), minmax(0, 1fr)); gap: 16px; }
.pl-tier { background: var(--surface); border: 1px solid var(--pl-line); border-radius: 14px; padding: 22px; }
.pl-tier h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.pl-tier p { font-size: .86rem; line-height: 1.55; color: var(--pl-soft); margin: 12px 0 0; }
.pl-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 4px 10px; border-radius: 100px; }
.pl-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pl-pill.on { color: var(--pl-accent-ink); background: color-mix(in srgb, var(--accent-color), transparent 86%); }
.pl-pill.on .dot { background: var(--accent-color); }
.pl-pill.off { color: var(--pl-soft); background: rgba(var(--ink), .07); }
.pl-pill.off .dot { background: var(--pl-faint); }
.pl-note { text-align: center; color: var(--pl-faint); font-size: .9rem; margin: 26px auto 0; max-width: 640px; }

/* ---------- list: icon rows in two columns ---------- */
.pl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.pl-list-item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--pl-line); }
.pl-list-item i { font-size: 1.25rem; color: var(--accent-color); padding-top: 2px; }
.pl-list-item h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; }
.pl-list-item p { font-size: .92rem; line-height: 1.6; color: var(--pl-soft); margin: 0; }

/* ---------- stat tiles, for figures that are the point ---------- */
.pl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pl-stat { background: var(--surface); border: 1px solid var(--pl-line); border-radius: 14px; padding: 22px; }
.pl-stat .v { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--heading-color); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pl-stat .l { font-size: .86rem; color: var(--pl-soft); margin-top: 8px; line-height: 1.45; }

/* ---------- pricing ---------- */
.pl-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pl-plan {
    background: var(--surface); border: 1px solid var(--pl-line); border-radius: 16px; padding: 26px 22px;
    display: flex; flex-direction: column; position: relative;
}
.pl-plan.featured { border-color: color-mix(in srgb, var(--accent-color), transparent 40%); box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--accent-color), transparent 40%); }
.pl-plan .tag {
    position: absolute; top: -11px; left: 22px; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 100px;
    color: #fff; background: var(--accent-fill);
}
.pl-plan h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.pl-plan .for { font-size: .84rem; color: var(--pl-soft); margin: 0 0 16px; line-height: 1.45; min-height: 2.9em; }
.pl-plan .price { font-size: 1.9rem; font-weight: 800; color: var(--heading-color); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pl-plan .price small { font-size: .85rem; font-weight: 500; color: var(--pl-faint); letter-spacing: 0; }
.pl-plan .alt { font-size: .8rem; color: var(--pl-faint); margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.pl-plan ul { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 8px; }
.pl-plan li { font-size: .86rem; color: var(--pl-soft); display: grid; grid-template-columns: 16px 1fr; gap: 8px; line-height: 1.45; }
.pl-plan li i { color: var(--accent-color); font-size: .8rem; padding-top: 3px; }
.pl-plan .pl-actions { margin-top: auto; padding-top: 20px; }
.pl-plan .pl-actions a { flex: 1 1 100%; text-align: center; }
/* Two-plan products (DotZeo): centred pair. Repeated inside the phone breakpoint below,
   because this modifier outranks the plain .pl-plans rule there. */
.pl-plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; }

/* ---------- closing call to action ---------- */
.pl-cta {
    background: var(--surface); border: 1px solid var(--pl-line-strong); border-radius: 20px;
    padding: 52px 40px; text-align: center; position: relative; overflow: hidden;
}
.pl-cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(50% 80% at 50% 0%, color-mix(in srgb, var(--accent-color), transparent 88%), transparent 70%);
}
.pl-cta > * { position: relative; }
.pl-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 700; margin: 0 0 14px; text-wrap: balance; }
.pl-cta p { color: var(--pl-soft); max-width: 540px; margin: 0 auto 28px; font-size: 1.02rem; }
.pl-cta .pl-actions { justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    /* Once the steps wrap, a connector would point at nothing, so drop them all.
       auto-fit rather than min() in the repeat count: a math function there is not
       reliably accepted, and a rejected rule would leave tablets on the desktop columns. */
    .pl-loop { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); row-gap: 36px; }
    .pl-step::after { display: none; }
    .pl-tiers, .pl-stats, .pl-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .pl-hero { padding: 130px 0 56px; }
    .pl-hero-grid, .pl-split { grid-template-columns: 1fr; gap: 40px; }
    .pl-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-rules, .pl-list { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .pl-actions a { flex: 1 1 100%; text-align: center; }
    .pl-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-mods, .pl-tiers, .pl-plans, .pl-plans.two { grid-template-columns: 1fr; }
    .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-rule { grid-template-columns: 1fr; gap: 12px; }
    .pl-log-entry { grid-template-columns: 1fr auto; }
    .pl-log-entry time { grid-column: 1 / -1; }
    .pl-cta { padding: 40px 22px; }
}

/* A data table can be wider than its panel, and scrolling it sideways hides whichever
   column sits last. Opt a table in with .pl-restack and each row becomes a card: title and
   main value, then status on its own line, then two labelled figures. Keyed to the panel's
   width rather than the viewport: between 992 and 1199px the two-column hero leaves the panel
   about 455px wide, narrower than on a large phone. */
@container (max-width: 519.98px) {
    .pl-table.pl-restack { min-width: 0; }
    .pl-table.pl-restack thead { display: none; }
    .pl-table.pl-restack tbody { display: block; }
    .pl-table.pl-restack tr {
        display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
        grid-template-areas: "title main" "status status" "a b";
        padding: 14px 16px; border-bottom: 1px solid var(--pl-line);
    }
    .pl-table.pl-restack tr:last-child { border-bottom: 0; }
    .pl-table.pl-restack td { padding: 0; border: 0; }
    .pl-table.pl-restack td.c-title  { grid-area: title; }
    .pl-table.pl-restack td.c-main   { grid-area: main; font-weight: 600; }
    .pl-table.pl-restack td.c-status { grid-area: status; }
    .pl-table.pl-restack td.c-a      { grid-area: a; text-align: left; font-size: .8rem; }
    .pl-table.pl-restack td.c-b      { grid-area: b; text-align: right; font-size: .8rem; }
    .pl-table.pl-restack td.c-a::before, .pl-table.pl-restack td.c-b::before {
        content: attr(data-label); margin-right: 6px; font-size: .64rem; font-weight: 700;
        letter-spacing: .07em; text-transform: uppercase; color: var(--pl-faint);
    }
    .pl-table.pl-restack .pl-sync { white-space: normal; }
}