/* Sales landing page /ennakkomyynti/ (templates/static/ennakkomyynti.html.twig).
   Follows the Claude Design reference, middle column only; no accent bar above headings.
   Flat colour, square cards, orange is the action colour. */
.ps {
    --ps-dark: #282828;
    --ps-orange: #e48348;
    --ps-orange-dark: #cc812c;
    --ps-link: #c8672b;
    --ps-turq-dark: #127a85;
    --ps-turq-tint: #e8f6f8;
    --ps-paper: #faf9f6;
    --ps-line: #e8e7e3;
    --ps-muted: #6b6a66;
    --ps-green: #2d7a3e;
    --ps-serif: "Adelle", "Roboto Slab", Georgia, serif;
    color: var(--ps-dark);
    font-family: "Adelle Sans", "Source Sans 3", Helvetica, Arial, sans-serif;
    padding-bottom: 2rem;
}

.leftside.simple .ps h1,
.leftside.simple .ps h2,
.leftside.simple .ps h3 {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ps-dark);
    font-family: var(--ps-serif);
    font-weight: 600;
    letter-spacing: 0;
}

.leftside.simple .ps h3 {
    text-transform: none;
}

.leftside.simple .ps p,
.leftside.simple .ps ul,
.leftside.simple .ps ol,
.leftside.simple .ps dl,
.leftside.simple .ps dd {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}

.ps ul,
.ps ol {
    list-style: none;
}

.leftside.simple .ps li {
    width: auto;
    max-width: none;
    margin-left: 0;
    float: none;
}

/* Breadcrumb */
.leftside.simple .ps .ps__crumbs {
    padding: 1.25rem 0 0;
    font-size: 0.85rem;
    color: var(--ps-muted);
}

.ps .ps__crumbs a {
    color: var(--ps-link);
    text-decoration: none;
}

.ps .ps__crumbs span[aria-hidden] {
    margin: 0 0.35rem;
}

/* Hero */
.ps .ps__hero {
    padding: 2rem 0 2rem;
}

.leftside.simple .ps .ps__eyebrow {
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.leftside.simple .ps h1 {
    max-width: 14em;
    margin-bottom: 1.25rem;
    font-size: clamp(1.7rem, 4.2vw, 2.4rem);
    line-height: 1.1;
    text-transform: none;
}

.leftside.simple .ps .ps__lead {
    max-width: 30em;
    margin-bottom: 2rem;
    font-family: "Adelle Sans", "Source Sans 3", Helvetica, Arial, sans-serif;
    font-size: clamp(18px, 2.6vw, 21px);
    line-height: 1.5;
}

.leftside.simple .ps .ps__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ps .ps__button {
    display: inline-block;
    padding: 1rem 1.75rem;
    border: 2px solid var(--ps-orange);
    background: var(--ps-orange);
    color: #fff;
    font-family: var(--ps-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.ps .ps__button:hover,
.ps .ps__button:focus {
    border-color: var(--ps-orange-dark);
    background: var(--ps-orange-dark);
}

.ps .ps__button--ghost {
    background: transparent;
    border-color: var(--ps-dark);
    color: var(--ps-dark);
}

.ps .ps__button--ghost:hover,
.ps .ps__button--ghost:focus {
    background: var(--ps-dark);
    border-color: var(--ps-dark);
    color: #fff;
}

.ps .ps__button--ghost-light {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.ps .ps__button--ghost-light:hover,
.ps .ps__button--ghost-light:focus {
    background: #fff;
    border-color: #fff;
    color: var(--ps-dark);
}

/* Numbers */
.leftside.simple .ps dl.ps__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 2px solid var(--ps-dark);
    border-bottom: 1px solid var(--ps-line);
}

.ps .ps__stats div {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.2rem;
}

.leftside.simple .ps .ps__stats dd {
    font-family: var(--ps-serif);
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
}

.leftside.simple .ps .ps__stats dt {
    margin: 0;
    font-size: 0.95rem;
}

/* Sections: hairline between, no accent bar */
.ps .ps__section {
    padding: 3rem 0;
    border-bottom: 1px solid var(--ps-line);
}

.leftside.simple .ps h2 {
    margin-bottom: 1.5rem;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    line-height: 1.2;
    text-transform: uppercase;
}

.leftside.simple .ps .ps__prose {
    max-width: 40em;
    margin-bottom: 1rem;
    font-size: 17px;
    line-height: 1.6;
}

/* Comparison: label, then the two options as stacked boxes */
.ps .ps__compare {
    border-top: 2px solid var(--ps-dark);
    padding-top: 1.25rem;
}

.ps .ps__row {
    margin-bottom: 1.25rem;
}

.leftside.simple .ps .ps__row h3 {
    margin-bottom: 0.5rem;
    font-family: "Adelle Sans", "Source Sans 3", Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.leftside.simple .ps .ps__cell {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ps-line);
    background: #fff;
    color: var(--ps-muted);
    font-size: 16px;
    line-height: 1.45;
}

.leftside.simple .ps .ps__cell--ms {
    border-color: #cfeaee;
    background: var(--ps-turq-tint);
    color: var(--ps-dark);
}

.ps .ps__cell span {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--ps-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Steps */
.ps ol.ps__steps {
    counter-reset: step;
    border: 1px solid var(--ps-line);
}

.ps .ps__steps li {
    position: relative;
    padding: 1.25rem 1.5rem 1.25rem 4.5rem;
    border-bottom: 1px solid var(--ps-line);
    counter-increment: step;
}

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

.ps .ps__steps li::before {
    content: counter(step);
    position: absolute;
    left: 1.5rem;
    top: 1.1rem;
    color: var(--ps-turq-dark);
    font-family: var(--ps-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.leftside.simple .ps .ps__steps h3,
.leftside.simple .ps .ps__uses h3,
.leftside.simple .ps .ps__know h3 {
    margin-bottom: 0.35rem;
    font-size: 19px;
    line-height: 1.3;
}

.leftside.simple .ps .ps__steps p,
.leftside.simple .ps .ps__uses p,
.leftside.simple .ps .ps__know p {
    color: #444;
    font-size: 16px;
    line-height: 1.55;
}

/* Use cases */
.ps ul.ps__uses {
    display: grid;
    gap: 1rem;
}

.ps .ps__uses li {
    position: relative;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ps-line);
    background: var(--ps-paper);
}

.ps .ps__uses h3 a {
    color: var(--ps-dark);
    text-decoration: none;
}

.ps .ps__uses h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ps .ps__uses li:hover,
.ps .ps__uses li:focus-within {
    border-color: var(--ps-orange);
}

/* Example campaigns: picture on top, white body, green full bar (goal reached) */
.ps ul.ps__examples {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.ps .ps__ex {
    border: 1px solid var(--ps-line);
    background: #fff;
}

.ps .ps__ex-img {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ps-paper);
    overflow: hidden;
}

.ps .ps__ex-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps .ps__ex-body {
    padding: 1rem 1.25rem 1.25rem;
}

.leftside.simple .ps .ps__ex h3 {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    line-height: 1.3;
}

.ps .ps__ex h3 a {
    color: var(--ps-dark);
    text-decoration: none;
}

.ps .ps__ex h3 a:hover,
.ps .ps__ex h3 a:focus {
    text-decoration: underline;
}

.ps .ps__bar {
    height: 6px;
    margin-bottom: 0.9rem;
    background: var(--ps-line);
}

.ps .ps__bar span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ps-green);
}

.leftside.simple .ps dl.ps__ex-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.ps .ps__ex-stats div {
    display: flex;
    flex-direction: column;
}

.leftside.simple .ps .ps__ex-stats dd {
    font-family: var(--ps-serif);
    font-size: 1.05rem;
    font-weight: 600;
}

.leftside.simple .ps .ps__ex-stats dt {
    margin: 0;
    color: var(--ps-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.leftside.simple .ps .ps__note {
    margin-top: 1rem;
    color: var(--ps-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Know */
.ps ul.ps__know {
    border-top: 2px solid var(--ps-dark);
}

.ps .ps__know li {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--ps-line);
}

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

.ps a.ps__more {
    display: inline-block;
    margin-top: 0.4rem;
    color: var(--ps-link);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

/* Final CTA */
.ps .ps__final {
    margin-top: 2.5rem;
    padding: 2.5rem 1.75rem;
    background: var(--ps-dark);
    color: #fff;
}

.leftside.simple .ps .ps__final h2 {
    margin-bottom: 0.75rem;
    color: #fff;
}

.leftside.simple .ps .ps__final p {
    max-width: 34em;
    margin-bottom: 1.5rem;
    color: #fff;
    line-height: 1.55;
}

.leftside.simple .ps .ps__final p:last-child {
    margin-bottom: 0;
}

@media (min-width: 700px) {
    .ps ul.ps__examples {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}