/* ============================================================
   WHAT IT COSTS IN PRACTICE (home page, 24 Oct 2026; simplified the
   same day, Dom: "focus on the key values: how many workflows cost how
   much"). Under the pricing cards: one white card, split in two.
   - Left: how many workflows a month (a big number over a magenta slider),
     what kind of workflow (a three-way switch, its example and credits
     under it), a one-line estimates note at the foot.
   - Right (a faint cream panel): the price big, every plan as a tile showing how many of these workflows it covers (pink
     when open, "Fit" on the one that fits, launch offers in blue), the
     button.
   Above the card, the currency pill; under it, the free trial and expert
   help bands and the AI agent link, moved here from the old pricing section
   (removed from the home page by Dom).
   Stacks below 960px. Script: js/cost.js.
   ============================================================ */
/* the pricing section's light (css/v8.css .price): pink low left, periwinkle
   low right, a white lift behind the title (Dom) */
.co {
    position: relative; padding: 112px 0; border-top: 1px solid var(--line);
    background:
        radial-gradient(52% 34% at 50% 6%, rgba(255, 255, 255, 0.9), transparent 70%),
        radial-gradient(46% 38% at 16% 44%, rgba(255, 167, 255, 0.22), transparent 70%),
        radial-gradient(46% 38% at 84% 46%, rgba(91, 91, 245, 0.13), transparent 70%),
        radial-gradient(60% 30% at 50% 100%, rgba(255, 243, 255, 0.9), transparent 70%),
        var(--cream);
}
.co .sec-head { margin-bottom: 0; }
/* the title breaks after "the" (Dom): "Get charged only for the / work done. Not per seat." */
/* the currency pill (the pricing section's design; js/cost.js keeps the saved choice) */
.co .co-currency { margin: 36px 0 44px; }
/* under the calculator: the free trial and expert help bands, then the AI agent link */
.co-calc + .price-support-grid--trial { margin-top: 40px; margin-bottom: 0; }

.co-calc {
    display: grid; grid-template-columns: minmax(0, 1fr) 440px;
    max-width: 1120px; margin: 0 auto; overflow: hidden;
    border-radius: 24px; background: #fff; border: 1px solid #E3DCDA;
    box-shadow:
        0 1px 2px rgba(20, 17, 26, 0.06),
        0 4px 10px -4px rgba(20, 17, 26, 0.08),
        0 24px 48px -24px rgba(20, 17, 26, 0.2);
}

/* ---- left: the workflows ---- */
.co-in { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 44px 48px; }
/* the questions read as labels, like the panel's "Best fit for your volume" */
.co-q { display: block; margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.co-q--2 { margin-top: 44px; }

/* the number: big, like the price it leads to */
.co-big { position: relative; display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.co-big input {
    width: 2.4ch; max-width: 100%; min-width: 0; padding: 0 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; outline: none;
    font: inherit; font-size: 5.5rem; font-weight: 800; line-height: .95; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield; transition: border-color .18s ease;
}
.co-big input:hover { border-bottom-color: #E6DFDC; border-bottom-style: dashed; }
.co-big input:focus { border-bottom-color: var(--brand-magenta, #D53BD5); }
.co-big input::-webkit-inner-spin-button, .co-big input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.co-big > span:not(.co-steps) { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: var(--muted); white-space: nowrap; }
.co-steps { display: flex; gap: 8px; margin-left: auto; align-self: center; }
.co-step {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
    border: 1px solid #E3DCDA; background: #fff; color: var(--ink); cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 17, 26, .06); transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.co-step svg { width: 16px; height: 16px; }
.co-step:hover { border-color: #CFC5C2; background: #FBF8F7; transform: translateY(-1px); }
.co-step:active { transform: none; }
.co-step:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 2px; }

/* the slider: a thin track, filled magenta up to the thumb (--p, set by the script) */
.co-range {
    --p: 0%;
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 22px 0 0;
    background: transparent; cursor: pointer;
}
.co-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 6px;
    background: linear-gradient(90deg, var(--brand-magenta, #D53BD5) 0, #F27BE6 var(--p), #ECE5E3 var(--p), #ECE5E3 100%);
}
.co-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand-magenta, #D53BD5); box-shadow: 0 2px 8px rgba(20, 17, 26, .2);
    transition: transform .15s ease;
}
.co-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.co-range::-moz-range-track { height: 6px; border-radius: 6px; background: #ECE5E3; }
.co-range::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-magenta, #D53BD5), #F27BE6); }
.co-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-magenta, #D53BD5); box-shadow: 0 2px 8px rgba(20, 17, 26, .2); }
.co-range:focus-visible { outline: none; }
.co-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(76, 107, 238, .28); }
.co-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(76, 107, 238, .28); }

/* the kind: a three-way switch; the chosen one in the brand pink (Dom) */
.co-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding: 4px; border-radius: 14px; background: #F4EFED; }
.co-kind {
    height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; cursor: pointer;
    font: inherit; font-size: .9375rem; font-weight: 700; color: var(--body); white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.co-kind:hover { color: var(--ink); }
.co-kind[aria-checked="true"] {
    background: var(--pink-wash, #FFF3FF); color: var(--pink-deep, #D53BD5);
    box-shadow: inset 0 0 0 1.5px var(--brand-magenta, #D53BD5), 0 6px 14px -10px rgba(213, 59, 213, .55);
}
.co-kind:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 2px; }
.co-ex { margin: 12px 0 0; font-size: .875rem; line-height: 1.45; color: var(--muted); }
.co-ex b { font-weight: 750; color: var(--pink-deep, #D53BD5); }

.co-est { display: flex; align-items: flex-start; gap: 8px; margin: 36px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.co-est svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* ---- right: the price ---- */
.co-out { display: flex; flex-direction: column; min-width: 0; padding: 44px 36px 36px; background: #FBF8F7; border-left: 1px solid var(--line); }
.co-out-k { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-deep, #D53BD5); }
.co-offer {
    padding: 1px 7px; border-radius: 999px; background: #EEF1FD; border: 1px solid #D5DCFA;
    font-size: .625rem; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--brand-blue, #4C6BEE);
}
.co-offer[hidden] { display: none; }
.co-price { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 0; color: var(--ink); }
.co-price b { font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.co-price small { font-size: 1.0625rem; font-weight: 600; color: var(--muted); }

/* every plan as a tile: price, and how many of these workflows it covers */
.co-pl-h { margin: 28px 0 10px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.co-pls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
.co-pl {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
    padding: 9px 11px; border-radius: 11px; border: 1px solid #E3DCDA; background: #fff; cursor: pointer;
    text-align: left; font: inherit; color: var(--ink);
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.co-pl:hover { border-color: #CFC5C2; transform: translateY(-1px); }
.co-pl b { font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.co-pl span { font-size: .6875rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.co-pl-h span { font-weight: 650; letter-spacing: .02em; text-transform: none; }
.co-pl[data-offer] span { color: var(--brand-blue, #4C6BEE); }
.co-pl.is-fit { border-color: #EBA6EB; }
.co-pl.is-fit::after, .co-pl.is-offer::after {
    content: "Fit"; position: absolute; top: -7px; right: 8px; padding: 1px 6px; border-radius: 999px;
    background: var(--brand-magenta, #D53BD5); color: #fff; font-size: .5625rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5;
    white-space: nowrap;
}
/* the open plan with the launch offer: the tag says so, in the offer's blue (Dom) */
.co-pl.is-offer::after { content: "Launch offer"; background: var(--brand-blue, #4C6BEE); }
/* the open plan in the brand pink, not black: only the button is dark (Dom) */
.co-pl[aria-pressed="true"] { background: var(--pink-wash, #FFF3FF); border-color: var(--brand-magenta, #D53BD5); box-shadow: inset 0 0 0 1px var(--brand-magenta, #D53BD5); }
.co-pl[aria-pressed="true"] span, .co-pl[aria-pressed="true"][data-offer] span { color: var(--pink-deep, #D53BD5); }
.co.is-over .co-pl[aria-pressed="true"] { background: #FFF5E8; border-color: #EE7A1F; box-shadow: inset 0 0 0 1px #EE7A1F; }
.co.is-over .co-pl[aria-pressed="true"] span { color: #B85C0C; }   /* too small for the volume */
.co-pl:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 2px; }
/* six Pro plans in two rows of three; Enterprise runs the full width under them */
.co-pl--ent { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; }

.co-cta { width: 100%; min-height: 48px; margin-top: 24px; background: var(--ink); color: #fff; font-size: 1rem; }
.co-cta:hover { background: #2B2430; transform: translateY(-1px); box-shadow: var(--shadow-low); }
.co-cta:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 2px; }

@media (max-width: 1100px) {
    .co-calc { grid-template-columns: minmax(0, 1fr) 380px; }
    .co-in { padding: 36px 32px 32px; }
    .co-out { padding: 36px 28px 30px; }
    .co-big input { font-size: 4.5rem; }
    .co-big > span:not(.co-steps) { font-size: 1.1875rem; }
}
@media (max-width: 959px) {
    .co-calc { grid-template-columns: 1fr; }
    .co-out { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
    .co { padding: 80px 0; }
    .co .co-currency { margin: 28px 0 32px; }
    .co-calc + .price-support-grid--trial { margin-top: 28px; }
    .co-calc { border-radius: 20px; }
    .co-in { padding: 26px 18px 22px; }
    /* phones: no -/+ (the slider and the field do it), the number centred under its label (Dom) */
    .co-in > .co-q:first-child { text-align: center; }
    .co-big { justify-content: center; gap: 8px; margin-top: 10px; }
    .co-big input { flex: none; font-size: 3.75rem; }
    .co-big > span:not(.co-steps) { font-size: 1rem; }
    .co-steps { display: none; }
    .co-range { margin-top: 18px; }
    .co-q--2 { margin-top: 30px; }
    .co-kind { height: 40px; padding: 0 2px; font-size: .75rem; letter-spacing: -.01em; }
    .co-est { margin-top: 24px; }
    .co-pl { padding: 9px 9px; }
    .co-pl span { font-size: .625rem; }
    .co-out { padding: 26px 18px 20px; }
    .co-price b { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .co-kind, .co-pl, .co-step, .co-big input, .co-range::-webkit-slider-thumb { transition: none; }
}