/*
 * Prissidorna (/sv/tjanster/{slug}) och priskorten på /tjanster, startsidan
 * och landningssidorna. app.css är en färdigbyggd Tailwind-fil som bara har
 * de klasser som redan används, så allt nytt för prisdelarna ligger här.
 */

.pc-grid{ display:grid; grid-template-columns:1fr; gap:2rem; max-width:72rem; margin-inline:auto; }
@media (width >= 48rem){ .pc-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem; } }
@media (width >= 64rem){ .pc-grid{ gap:2rem; } }
.pc-grid.is-single{ max-width:34rem; }
@media (width >= 48rem){ .pc-grid.is-single{ grid-template-columns:1fr; } }

.pc-badge{ display:inline-block; white-space:nowrap; background:var(--color-brand-accent); color:#fff; font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:.375rem 1rem; border-radius:999px; }

.pc-sub{ font-size:.875rem; margin-top:.25rem; color:color-mix(in oklab, var(--color-brand-dark) 55%, transparent); }
.pc-tagline{ font-size:.9375rem; line-height:1.55; margin-bottom:1.25rem; color:color-mix(in oklab, var(--color-brand-dark) 70%, transparent); }
.pc-tagline-note{ display:block; margin-top:.25rem; font-size:.8125rem; color:color-mix(in oklab, var(--color-brand-dark) 50%, transparent); }
.pc-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.25rem; }
.pc-price .num{ font-size:2.25rem; line-height:1.1; font-weight:700; letter-spacing:-.01em; }
.pc-price .per{ font-size:.875rem; color:color-mix(in oklab, var(--color-brand-dark) 55%, transparent); }
.pc-terms{ font-size:.8125rem; line-height:1.5; margin-top:.375rem; color:color-mix(in oklab, var(--color-brand-dark) 55%, transparent); }

.pc-compare{ display:flex; flex-direction:column; gap:.4rem; padding-top:1rem; margin-bottom:1rem; border-top:1px dashed color-mix(in oklab, var(--color-brand-dark) 18%, transparent); }
.pc-compare-row{ display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; font-size:.8125rem; }
.pc-compare-row .lbl{ color:color-mix(in oklab, var(--color-brand-dark) 55%, transparent); }
.pc-compare-row .was{ text-decoration:line-through; white-space:nowrap; color:color-mix(in oklab, var(--color-brand-dark) 55%, transparent); }
.pc-compare-row .now{ font-weight:700; white-space:nowrap; }
.pc-bar{ height:.4375rem; border-radius:999px; overflow:hidden; background:color-mix(in oklab, var(--color-brand-dark) 8%, transparent); }
.pc-bar > span{ display:block; height:100%; border-radius:999px; background:var(--color-brand-accent); }

.pc-save{ display:inline-flex; align-self:flex-start; font-size:.8125rem; font-weight:700; line-height:1.35; padding:.45rem .8rem; border-radius:.5rem; color:var(--color-brand-accent-hover); background:color-mix(in oklab, var(--color-brand-accent) 13%, transparent); }
.pc-save.is-big{ font-size:.875rem; padding:.55rem .9rem; color:#fff; background:var(--color-brand-accent); }
.pc-footnote{ font-size:.8125rem; line-height:1.5; margin-top:.75rem; color:color-mix(in oklab, var(--color-brand-dark) 55%, transparent); }
.pc-actions{ margin-top:1.5rem; }

/* Utvalt kort: mörkt, som de gamla paketkorten */
.pc-card.is-featured .pc-sub,
.pc-card.is-featured .pc-price .per,
.pc-card.is-featured .pc-terms,
.pc-card.is-featured .pc-footnote,
.pc-card.is-featured .pc-tagline-note,
.pc-card.is-featured .pc-compare-row .lbl,
.pc-card.is-featured .pc-compare-row .was{ color:rgb(255 255 255 / .6); }
.pc-card.is-featured .pc-tagline{ color:rgb(255 255 255 / .75); }
.pc-card.is-featured .pc-compare{ border-top-color:rgb(255 255 255 / .18); }
.pc-card.is-featured .pc-bar{ background:rgb(255 255 255 / .12); }
.pc-card.is-featured .pc-save{ color:#fff; background:var(--color-brand-accent); }

.pc-note{ max-width:72rem; margin:2rem auto 0; padding:1rem 1.25rem; border-radius:.75rem; font-size:.9375rem; line-height:1.6; background:#fff; color:color-mix(in oklab, var(--color-brand-dark) 70%, transparent); border:1px solid color-mix(in oklab, var(--color-brand-dark) 8%, transparent); }
.pc-vat{ text-align:center; font-size:.8125rem; margin-top:2rem; color:color-mix(in oklab, var(--color-brand-dark) 50%, transparent); }
.pc-more{ text-align:center; margin-top:2rem; }
.pc-more a{ display:inline-flex; align-items:center; gap:.375rem; font-weight:600; color:var(--color-brand-accent); text-decoration:none; }
.pc-more a:hover{ color:var(--color-brand-accent-hover); }

/* Undermeny mellan prissidorna (i den mörka heron) */
.pc-subnav{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.25rem; }
.pc-subnav a{ display:inline-flex; align-items:center; padding:.5rem 1rem; border-radius:999px; font-size:.875rem; font-weight:500; text-decoration:none; color:rgb(255 255 255 / .75); border:1px solid rgb(255 255 255 / .18); background:rgb(255 255 255 / .05); transition:background-color .2s, color .2s, border-color .2s; }
.pc-subnav a:hover{ color:#fff; border-color:rgb(255 255 255 / .4); }
.pc-subnav a[aria-current="page"]{ color:#fff; background:var(--color-brand-accent); border-color:var(--color-brand-accent); }

.pc-kicker{ display:block; font-size:.875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--color-brand-accent); margin-bottom:1rem; }

/* "Redan en hemsida?" */
.pc-grid4{ display:grid; grid-template-columns:1fr; gap:1rem; max-width:72rem; margin-inline:auto; }
@media (width >= 40rem){ .pc-grid4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (width >= 64rem){ .pc-grid4{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.pc-small{ background:#fff; border-radius:1rem; padding:1.5rem; display:flex; flex-direction:column; gap:.5rem; box-shadow:0 1px 3px rgb(0 0 0 / .08); border:1px solid transparent; }
.pc-small.is-accent{ border-color:var(--color-brand-accent); }
.pc-small h3{ font-size:1.0625rem; font-weight:600; }
.pc-small .p{ font-size:1.375rem; font-weight:700; color:var(--color-brand-accent); }
.pc-small .t{ font-size:.875rem; color:color-mix(in oklab, var(--color-brand-dark) 60%, transparent); }

/* "Vill ni testa innan ni binder er?" */
.pc-table-wrap{ max-width:72rem; margin-inline:auto; overflow-x:auto; background:#fff; border-radius:1rem; box-shadow:0 1px 3px rgb(0 0 0 / .08); }
.pc-table{ width:100%; min-width:40rem; border-collapse:collapse; font-size:.9375rem; }
.pc-table th, .pc-table td{ text-align:left; vertical-align:top; padding:.875rem 1.25rem; border-bottom:1px solid color-mix(in oklab, var(--color-brand-dark) 8%, transparent); }
.pc-table tbody tr:last-child td{ border-bottom:0; }
.pc-table th{ font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:color-mix(in oklab, var(--color-brand-dark) 50%, transparent); }
.pc-table td:first-child{ font-weight:600; }
.pc-table td:nth-child(2){ white-space:nowrap; color:var(--color-brand-accent-hover); font-weight:600; }
.pc-table td:last-child{ color:color-mix(in oklab, var(--color-brand-dark) 70%, transparent); }

/* Översiktskort på /tjanster */
.pc-from{ font-size:.9375rem; font-weight:600; color:var(--color-brand-dark); margin-top:1rem; }