/*
 * /software-cost-calculator (staging, 2026-10-05). Loaded after
 * dash-variants.css and uses its tokens, type and buttons (.dv-*), so the
 * page reads as part of the Bespoke Business Software page. Everything here
 * is .tc-* ("true cost"). Plan: _work/calculator-plan.md.
 */

/* Pink is what the subscriptions cost, green is what the visitor saves
   (Lee, 2026-10-06: savings, never "keep"), amber is the statement's note */
.dv { --tc-pink: #ff5fae; --tc-save: #34d399; --tc-save-ink: #047857; --tc-flag: #f5b921; }
.tc-num { font-variant-numeric: tabular-nums; }

/* Textures that drift as each band passes (core.js driftBg reads data-drift-bg) */
.tc-calc, .tc-one { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='%23224685'%3E%3Ccircle cx='10' cy='14' r='1.1' opacity='.13'/%3E%3Ccircle cx='58' cy='40' r='1' opacity='.1'/%3E%3Ccircle cx='30' cy='72' r='.9' opacity='.1'/%3E%3C/g%3E%3C/svg%3E"); background-size: 88px 88px; }
.tc-open, .tc-ten { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='14' cy='22' r='1.2' opacity='.18'/%3E%3Ccircle cx='76' cy='10' r='.9' opacity='.12'/%3E%3Ccircle cx='98' cy='64' r='1.3' opacity='.16'/%3E%3Ccircle cx='40' cy='88' r='1' opacity='.12'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; }
.tc-plans, .tc-month { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 48h96M48 0v96' stroke='%23224685' stroke-width='1' opacity='.06'/%3E%3C/svg%3E"); background-size: 96px 96px; }

/* =================================================================
   1. Opener: the headline, typical businesses, the bank statement
   ================================================================= */
.tc-open { padding-block: clamp(40px, 5vw, 76px) clamp(48px, 6vw, 88px); overflow: clip; }
@media (min-width: 1024px) { .dv-calculator .tc-open { margin-top: 48px; } }
.tc-open__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dv .tc-open__h1 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); }
.tc-open__h1 em { font-style: normal; color: var(--tc-pink); }
.tc-open__start { margin: 30px 0 12px; font-weight: 600; color: #fff; }
.tc-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tc-preset {
    display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; text-align: left; cursor: pointer;
    font: inherit; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
    transition: background-color .2s, border-color .2s, transform .2s;
}
.tc-preset:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); transform: translateY(-2px); }
.tc-preset.is-on { background: #fff; color: var(--dv-ink); border-color: #fff; }
.tc-preset__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); }
.tc-preset.is-on .tc-preset__ic { background: var(--dv-mist); }
.tc-preset__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-preset b { display: block; font-size: 1rem; line-height: 1.3; }
.tc-preset small { display: block; font-size: .875rem; color: var(--dv-on-ink); }
.tc-preset.is-on small { color: var(--dv-muted); }
.tc-open .dv-proof { color: var(--dv-on-ink); }
.tc-open__own { margin-top: 14px; }

/* The statement: a page from the business's own bank statement */
.tc-stmt-wrap { position: relative; perspective: 1400px; }
.tc-stmt {
    position: relative; background: #fff; color: var(--dv-text); border-radius: 16px; padding: 22px 24px 20px;
    box-shadow: 0 40px 80px -36px rgba(0,0,0,.7); transform: rotate(-1.6deg); transform-origin: 60% 40%;
    font-size: .95rem;
}
.tc-stmt__top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--dv-ink); }
.tc-stmt__bank { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--dv-ink); display: grid; place-items: center; }
.tc-stmt__bank svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.tc-stmt__title { margin: 0; font-weight: 700; color: var(--dv-heading); line-height: 1.3; }
.tc-stmt__sub { margin: 0; font-size: .875rem; color: var(--dv-muted); }
.tc-stmt__month { margin-left: auto; text-align: right; font-size: .875rem; color: var(--dv-muted); line-height: 1.35; }
.tc-stmt__month b { display: block; color: var(--dv-heading); font-size: 1rem; }
.tc-stmt__cols, .tc-stmt__row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tc-stmt__cols { padding: 10px 6px 6px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dv-muted); }
.tc-stmt__rows { list-style: none; margin: 0; padding: 0; min-height: 15.5rem; }
.tc-stmt__row { position: relative; padding: 7px 6px; border-bottom: 1px dashed var(--dv-line); color: var(--dv-heading); }
.tc-stmt__row > * { position: relative; z-index: 1; }
.tc-stmt__row::before { content: ''; position: absolute; inset: 2px -4px; z-index: 0; border-radius: 6px; background: #fde68a; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tc-stmt__row.is-hl::before { transform: scaleX(1); }
.tc-stmt__date { color: var(--dv-muted); font-size: .875rem; }
.tc-stmt__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: .9rem; }
.tc-stmt__amt { font-weight: 700; text-align: right; }
.tc-stmt__more { padding: 8px 6px 0; font-size: .875rem; color: var(--dv-muted); }
.tc-stmt__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fdf0f7; color: var(--dv-stamp-dark); font-weight: 700; }
.tc-stmt__total b { font-size: 1.5rem; color: var(--dv-stamp); }
.tc-stmt__note {
    position: absolute; right: -14px; bottom: -26px; z-index: 2; padding: 12px 16px 10px; background: var(--tc-flag); color: var(--dv-ink);
    border-radius: 4px; transform: rotate(4deg); box-shadow: 0 14px 24px -12px rgba(0,0,0,.6); line-height: 1.2; text-align: center;
}
.tc-stmt__note small { display: block; font-size: .8rem; font-weight: 600; }
.tc-stmt__note b { display: block; font-size: 1.35rem; }
.tc-stmt__label { margin: 14px 0 0; font-size: .875rem; color: var(--dv-on-ink); text-align: center; }

/* =================================================================
   2. The calculator: picker beside the bill
   ================================================================= */
.tc-calc { padding-block: clamp(40px, 4vw, 60px); }
.tc-calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.tc-pick__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.tc-search { position: relative; flex: 1 1 18rem; }
.tc-search input {
    width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; font: inherit; font-size: 1.02rem; color: var(--dv-heading);
    background: #fff; border: 1px solid #cbd5e1; border-radius: 9999px;
}
.tc-search input:focus { outline: none; border-color: #4a6eaa; box-shadow: 0 0 0 3px rgba(74,110,170,.22); }
.tc-search svg { position: absolute; left: 17px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: #64748b; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.tc-team { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--dv-heading); }
.tc-team__label { font-size: .95rem; line-height: 1.3; }
.tc-step { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 9999px; background: #fff; }
.tc-step button { width: 44px; height: 44px; border: 0; background: transparent; font: inherit; font-size: 1.25rem; font-weight: 700; color: var(--dv-brand); cursor: pointer; border-radius: 9999px; }
.tc-step button:hover { background: var(--dv-mist); }
.tc-step input { width: 3.2em; border: 0; text-align: center; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--dv-heading); background: transparent; -moz-appearance: textfield; }
.tc-step input::-webkit-inner-spin-button, .tc-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tc-step--sm button { width: 34px; height: 34px; font-size: 1.05rem; }
.tc-step--sm input { width: 2.4em; font-size: .95rem; }

.tc-tabwrap { position: relative; margin: 16px 0 14px; }
.tc-tabs { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px 0; }
.tc-tabs::-webkit-scrollbar { display: none; }
.tc-tab { flex: none; white-space: nowrap; scroll-snap-align: start; }
.tc-tabwrap.can-l .tc-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px); }
.tc-tabwrap.can-r .tc-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); }
.tc-tabwrap.can-l.can-r .tc-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.tc-tabarrow { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; display: none; place-items: center; border: 1px solid #cbd5e1; border-radius: 50%; background: #fff; color: var(--dv-brand); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(20,42,80,.5); }
.tc-tabarrow:hover { border-color: var(--dv-brand); background: var(--dv-mist); }
.tc-tabarrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tc-tabarrow--l { left: -6px; } .tc-tabarrow--r { right: -6px; }
.tc-tabwrap.can-l .tc-tabarrow--l, .tc-tabwrap.can-r .tc-tabarrow--r { display: grid; }
.tc-tab {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--dv-text); background: #fff; border: 1px solid #cbd5e1; border-radius: 9999px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.tc-tab:hover { border-color: var(--dv-brand); background: var(--dv-mist); }
.tc-tab[aria-pressed="true"] { background: var(--dv-brand); border-color: var(--dv-brand); color: #fff; }
.tc-tab b { min-width: 20px; padding: 0 6px; border-radius: 9999px; background: var(--dv-stamp); color: #fff; font-size: .78rem; line-height: 20px; text-align: center; }
.tc-tab b:empty { display: none; }
.tc-searching .tc-tabs { opacity: .45; }

.tc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 9px; min-height: 18rem; align-content: start; }
.tc-tile {
    position: relative; display: flex; align-items: center; gap: 11px; min-height: 64px; padding: 8px 12px; text-align: left; cursor: pointer;
    font: inherit; color: var(--dv-text); background: #fff; border: 1px solid var(--dv-card-line); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .15s, box-shadow .2s, transform .2s, background-color .2s;
}
.tc-tile[hidden] { display: none; }
.tc-tile:hover { border-color: var(--dv-brand); transform: translateY(-2px); box-shadow: 0 16px 26px -18px rgba(20,42,80,.5); }
.tc-tile[aria-pressed="true"] { border-color: var(--dv-stamp); background: #fdf3f9; box-shadow: inset 0 0 0 1px var(--dv-stamp); }
.tc-tile__logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; }
.tc-tile__logo img { width: 22px; height: 22px; }
.tc-mono { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; color: #fff; font-weight: 800; font-size: .9rem; letter-spacing: -.02em; }
.tc-tile__txt { min-width: 0; flex: 1; }
.tc-tile__name { display: block; font-weight: 700; color: var(--dv-heading); line-height: 1.25; }
.tc-tile__plan { display: block; font-size: .875rem; color: var(--dv-muted); line-height: 1.3; }
.tc-tile__price { display: block; margin-top: 1px; font-size: .9rem; font-weight: 700; color: var(--dv-brand); }
.tc-tile__tick { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--dv-stamp); display: grid; place-items: center; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 0 3px #fff; }
.tc-tile__tick svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tc-tile[aria-pressed="true"] .tc-tile__tick { transform: scale(1); }
.tc-tile--own { border-style: dashed; border-color: #94a3b8; background: transparent; box-shadow: none; }
.tc-tile--own .tc-tile__logo { background: var(--dv-mist); }
.tc-tile--own svg { width: 20px; height: 20px; fill: none; stroke: var(--dv-brand); stroke-width: 2.4; stroke-linecap: round; }
.tc-none { margin: 4px 0 0; color: var(--dv-muted); }
.tc-none[hidden] { display: none; }

/* Add your own */
.tc-own { margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--dv-mist); border: 1px solid var(--dv-line); }
.tc-own[hidden] { display: none; }
.tc-own__title { margin: 0 0 10px; font-weight: 700; color: var(--dv-heading); }
.tc-own__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: end; }
.tc-own label { display: block; font-size: .875rem; font-weight: 600; color: var(--dv-heading); margin-bottom: 5px; }
.tc-input { width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; color: var(--dv-heading); background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; }
.tc-input:focus { outline: none; border-color: #4a6eaa; box-shadow: 0 0 0 3px rgba(74,110,170,.22); }
.tc-money { position: relative; }
.tc-money::before { content: '£'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dv-muted); font-weight: 600; pointer-events: none; }
.tc-money .tc-input { padding-left: 26px; }
.tc-check { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; font-size: .92rem; font-weight: 600; color: var(--dv-heading); cursor: pointer; white-space: nowrap; }
.tc-check input { width: 18px; height: 18px; accent-color: var(--dv-brand); }

/* The bill */
.tc-bill { position: sticky; top: calc(var(--dv-head, 80px) + 18px); background: #fff; border: 1px solid var(--dv-card-line); border-radius: var(--dv-r); box-shadow: var(--dv-shadow); overflow: hidden; }
.tc-bill__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; background: var(--dv-ink); color: #fff; }
.tc-bill__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
.tc-bill__count { font-size: .875rem; color: var(--dv-on-ink); }
.tc-bill__lines { list-style: none; margin: 0; padding: 4px 0; max-height: min(19rem, 36vh); overflow-y: auto; overscroll-behavior: contain; }
.tc-line { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 32px; grid-template-areas: "logo name total x" ". edit edit edit"; gap: 4px 10px; align-items: center; padding: 10px 14px 10px 20px; border-bottom: 1px solid #f1f5f9; }
.tc-line__logo { grid-area: logo; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #f8fafc; }
.tc-line__logo img { width: 18px; height: 18px; }
.tc-line__logo .tc-mono { font-size: .72rem; }
.tc-line__name { grid-area: name; min-width: 0; font-weight: 700; color: var(--dv-heading); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-line__total { grid-area: total; font-weight: 700; color: var(--dv-heading); font-variant-numeric: tabular-nums; }
.tc-line__x { grid-area: x; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #64748b; cursor: pointer; display: grid; place-items: center; }
.tc-line__x:hover { background: #fee2e2; color: #b91c1c; }
.tc-line__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tc-line__edit { grid-area: edit; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .875rem; color: var(--dv-muted); }
.tc-line__edit .tc-money .tc-input { width: 6.4em; min-height: 34px; padding: 4px 8px 4px 22px; font-size: .9rem; border-radius: 8px; }
.tc-line__edit .tc-money::before { left: 9px; font-size: .9rem; }
.tc-bill__empty { margin: 0; padding: 22px 20px 6px; color: var(--dv-muted); }
.tc-bill__empty[hidden] { display: none; }
.tc-bill__presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 4px; }
.tc-bill__presets[hidden] { display: none; }
.tc-bill__presets button { min-height: 40px; padding: 6px 14px; font: inherit; font-size: .875rem; font-weight: 600; color: var(--dv-brand); background: #fff; border: 1px solid #cbd5e1; border-radius: 9999px; cursor: pointer; }
.tc-bill__presets button:hover { border-color: var(--dv-brand); background: var(--dv-mist); }
.tc-bill__sums { padding: 14px 20px 18px; background: #f8fafc; border-top: 1px solid var(--dv-card-line); }
.tc-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--dv-text); }
.tc-sum b { font-size: 1.15rem; color: var(--dv-heading); font-variant-numeric: tabular-nums; }
.tc-sum--big b { font-size: 1.9rem; letter-spacing: -.02em; }
.tc-sum--ten { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--dv-line-2); }
.tc-sum--ten b { color: var(--dv-stamp); font-size: 1.6rem; }
.tc-bill__cta { display: grid; gap: 4px; padding: 0 20px 16px; background: #f8fafc; }
.tc-bill__cta .dv-btn { width: 100%; }
.tc-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: .92rem; font-weight: 600; color: var(--dv-brand); cursor: pointer; text-decoration: underline; text-decoration-color: var(--dv-stamp); text-underline-offset: 3px; }
.tc-share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Phones and tablets: a running total pinned under the header while picking */
.tc-mini { display: none; }
.tc-nojs { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: #fff7e0; color: #7a4f00; }
html.dv-js .tc-nojs { display: none; }

/* =================================================================
   3. What you save: the chart beside the savings panel
   ================================================================= */
.dv-band.tc-ten { padding-block: clamp(40px, 4vw, 60px) clamp(48px, 5vw, 72px); }
.tc-save__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 16px; }
.tc-example { display: block; margin: 0; padding: 8px 14px; border-radius: 12px; background: rgba(245,185,33,.14); border: 1px solid rgba(245,185,33,.4); color: #fde8a8; font-size: .95rem; }
.tc-example[hidden] { display: none; }
.tc-example a { color: #fff; font-weight: 700; }

.tc-save { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: clamp(16px, 2vw, 24px); align-items: stretch; margin-top: 18px; }
.tc-chart { position: relative; align-self: start; min-width: 0; padding: clamp(14px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px) 14px; border-radius: var(--dv-r); background: #0f2244; border: 1px solid rgba(255,255,255,.1); }
.tc-chart__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.tc-ctl__label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; color: var(--dv-on-ink); }
.tc-builds { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 9999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.tc-build { min-height: 40px; padding: 6px 16px; font: inherit; font-weight: 700; color: #fff; background: transparent; border: 0; border-radius: 9999px; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.tc-build:hover { background: rgba(255,255,255,.12); }
.tc-build[aria-checked="true"] { background: #fff; color: var(--dv-ink); }
.tc-spans .tc-build[aria-checked="true"] { background: var(--tc-save); color: #052e1f; }
.tc-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .875rem; font-weight: 600; color: #fff; }
.tc-chart__legend li { display: inline-flex; align-items: center; gap: 8px; }
.tc-chart__legend i { width: 22px; height: 4px; border-radius: 2px; }
.tc-chart__legend i.is-alt { height: 0; border-top: 2px dashed rgba(255,255,255,.45); }
.tc-chart__legend i.is-save { height: 12px; border-radius: 3px; background: rgba(52,211,153,.35); box-shadow: inset 0 0 0 1px var(--tc-save); }
.tc-chart__svgwrap { position: relative; }
.tc-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.tc-grid line { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.tc-axis text, .tc-ends text, .tc-y1__t { fill: #9fb0cc; font-size: 13px; font-family: var(--dv-display); font-variant-numeric: tabular-nums; }
.tc-y1 { fill: #fff; fill-opacity: .045; }
.tc-y1__t { fill: #c9d4e7; font-weight: 600; }
.tc-save-area { fill: var(--tc-save); fill-opacity: .2; }
.tc-line-subs { fill: none; stroke: var(--tc-pink); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.tc-line-sys { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.tc-alt { cursor: pointer; }
.tc-alt__hit { fill: none; stroke: transparent; stroke-width: 16; }
.tc-alt__line { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 2; stroke-dasharray: 6 5; transition: stroke .2s; }
.tc-alt:hover .tc-alt__line { stroke: rgba(255,255,255,.75); }
.tc-alt__dot { fill: rgba(255,255,255,.55); }
.tc-ends text { font-weight: 700; }
.tc-ends .is-subs { fill: var(--tc-pink); }
.tc-ends .is-on { fill: #fff; }
.tc-ends .is-alt { cursor: pointer; }
.tc-ends .is-alt:hover { fill: #fff; }
.tc-be circle { fill: var(--tc-save); }
.tc-be .tc-be__ring { fill: none; stroke: var(--tc-save); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: tc-ring 2.2s ease-out infinite; }
@keyframes tc-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.tc-be text { fill: var(--tc-save); font-size: 14px; font-weight: 700; font-family: var(--dv-display); paint-order: stroke; stroke: #0f2244; stroke-width: 5px; stroke-linejoin: round; }
.tc-scrub line { stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tc-scrub .tc-dot-subs { fill: var(--tc-pink); stroke: #0f2244; stroke-width: 3; }
.tc-scrub .tc-dot-sys { fill: #fff; stroke: #0f2244; stroke-width: 3; }
.tc-chart__svgwrap.is-tip .tc-tip { opacity: 1; }
.tc-tip { opacity: 0; position: absolute; top: 0; left: 0; z-index: 2; min-width: 15rem; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--dv-text); box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); pointer-events: none; font-size: .9rem; line-height: 1.45; transition: transform .12s ease-out, opacity .2s; }
.tc-tip b { color: var(--dv-heading); font-variant-numeric: tabular-nums; }
.tc-tip__when { margin: 0 0 4px; font-weight: 700; color: var(--dv-heading); }
.tc-tip p { margin: 0; display: flex; justify-content: space-between; gap: 14px; }
.tc-tip .is-save, .tc-tip .is-more { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--dv-line); font-weight: 700; }
.tc-tip .is-save, .tc-tip .is-save b { color: var(--tc-save-ink); }
.tc-tip .is-more { color: var(--dv-muted); }
.tc-tip .tc-tip__month { margin-top: 4px; font-size: .84rem; color: var(--dv-muted); }
.tc-scrubber { margin-top: 4px; }
.tc-scrubber .dv-field__top { color: #fff; margin-bottom: 0; font-size: .9rem; }
.tc-scrubber .dv-field__top output { color: #fff; }
.tc-scrubber .dv-range::-webkit-slider-runnable-track { background: rgba(255,255,255,.2); }
.tc-scrubber .dv-range::-moz-range-track { background: rgba(255,255,255,.2); }
.tc-scrubber .dv-range::-webkit-slider-thumb { background: var(--tc-pink); }
.tc-scrubber .dv-range::-moz-range-thumb { background: var(--tc-pink); }
/* The written reading under the chart: phones only, where there is no tip */
.tc-readout { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.tc-readout b { color: var(--tc-save); }

/* The savings panel */
.tc-saving { display: flex; flex-direction: column; padding: clamp(18px, 1.8vw, 26px); border-radius: var(--dv-r); background: linear-gradient(160deg, #0d4a3a 0%, #0f2f3c 55%, #0f2244 100%); border: 1px solid rgba(52,211,153,.35); box-shadow: 0 30px 60px -36px rgba(0,0,0,.8); }
.tc-saving__lead { margin: 0; font-size: 1.05rem; font-weight: 700; color: #d1fae5; }
.tc-saving__big { margin: 2px 0 0; line-height: 1; color: var(--tc-save); }
.tc-saving__big b { font-size: clamp(2.6rem, 1.8rem + 2vw, 3.7rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tc-saving__big span { font-size: 1.4rem; font-weight: 700; }
.tc-saving.is-neg .tc-saving__big, .tc-saving.is-neg .tc-saving__lead { color: #cbd5e1; }
.tc-saving__ten { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.14); color: #d1fae5; font-weight: 600; }
.tc-saving__ten b { white-space: nowrap; font-size: 1.5rem; font-weight: 800; color: var(--tc-save); font-variant-numeric: tabular-nums; }
.tc-saving__ten.is-neg b { color: #cbd5e1; }
.tc-saving__months { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.07); }
.tc-saving__months h3 { margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: #fff; }
.tc-saving__months p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); color: var(--dv-on-ink); font-size: .92rem; line-height: 1.3; }
.tc-saving__months p small { display: block; margin-top: 2px; font-size: .8rem; color: #9fb0cc; }
.tc-saving__months p b { flex: none; font-size: 1.08rem; color: #fff; font-variant-numeric: tabular-nums; }
.tc-saving__months p.is-subs b { color: var(--tc-pink); }
.tc-saving__flag { position: relative; margin: 14px 0 0; padding: 12px 14px 12px 40px; border-radius: 12px; background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.4); color: #d1fae5; font-size: .95rem; line-height: 1.45; }
.tc-saving__flag b { color: #fff; }
.tc-saving__flag::before { content: ''; position: absolute; left: 16px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--tc-save); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: tc-flagpulse 2.4s ease-out infinite; }
@keyframes tc-flagpulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } }
.tc-saving__flag.is-neg { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--dv-on-ink); }
.tc-saving__flag.is-neg::before { background: #94a3b8; animation: none; }
.tc-saving .tc-ctl--rise { margin-top: auto; padding-top: 14px; }
.tc-ctl--rise .dv-field__top { color: #fff; margin-bottom: 0; font-size: .9rem; }
.tc-ctl--rise .dv-field__top output { color: var(--tc-flag); }
.tc-ctl--rise .dv-range::-webkit-slider-runnable-track { background: rgba(255,255,255,.22); }
.tc-ctl--rise .dv-range::-moz-range-track { background: rgba(255,255,255,.22); }
.tc-ctl--rise .dv-range::-webkit-slider-thumb { background: #fff; }
.tc-ctl--rise .dv-range::-moz-range-thumb { background: #fff; }
.tc-ten__note { margin: 16px 0 0; font-size: .92rem; color: var(--dv-on-ink); }
.tc-ten .dv-actions { margin-top: 22px; }
/* Stacked, the saving leads and the chart follows */
@media (max-width: 1100px) { .tc-save { grid-template-columns: minmax(0, 1fr); } .tc-saving { order: -1; } }
@media (max-width: 767px) {
    .tc-readout { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 8px 0 0; font-size: .92rem; color: var(--dv-on-ink); }
}

/* =================================================================
   4. Four builds
   ================================================================= */
.tc-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(26px, 3vw, 40px); align-items: stretch; }
.tc-plan { position: relative; display: flex; flex-direction: column; padding: 24px 22px 20px; background: #fff; border: 1px solid var(--dv-card-line); border-radius: var(--dv-r); box-shadow: var(--dv-shadow); transition: box-shadow .25s, border-color .25s, transform .25s; }
.tc-plan.is-match { border-color: var(--dv-brand); box-shadow: inset 0 0 0 1px var(--dv-brand), 0 30px 50px -30px rgba(20,42,80,.55); }
.tc-plan.is-shown { transform: translateY(-6px); }
.tc-plan__badge { position: absolute; top: -14px; left: 22px; padding: 4px 12px; border-radius: 9999px; background: var(--dv-brand); color: #fff; font-size: .875rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.tc-plan__badge[hidden] { display: none; }
.tc-plan__badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: tc-sheen 3.6s ease-in-out infinite; }
@keyframes tc-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.tc-plan h3 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--dv-heading); font-variant-numeric: tabular-nums; }
.tc-plan h3 small { font-size: .95rem; font-weight: 600; color: var(--dv-muted); letter-spacing: 0; }
.tc-plan__scope { margin: 8px 0 0; font-size: .95rem; color: var(--dv-muted); line-height: 1.5; min-height: 4.4em; }
.tc-plan__month { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--dv-mist); color: var(--dv-text); font-size: .9rem; line-height: 1.45; }
.tc-plan__month b { display: block; font-size: 1.35rem; color: var(--dv-brand); font-variant-numeric: tabular-nums; }
.tc-plan dl { margin: 14px 0 0; display: grid; grid-template-columns: auto auto; gap: 6px 10px; font-size: .95rem; }
.tc-plan dt { color: var(--dv-muted); }
.tc-plan dd { margin: 0; text-align: right; font-weight: 700; color: var(--dv-heading); font-variant-numeric: tabular-nums; }
.tc-plan__save { margin: 16px 0 0; padding: 14px 14px 12px; border-radius: 12px; font-size: .92rem; line-height: 1.45; }
.tc-plan__save span, .tc-plan__save em { display: block; }
.tc-plan__save.is-save { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #a7f3d0; }
.tc-plan__save.is-save b { color: var(--tc-save-ink); }
.tc-plan__save.is-save strong { color: var(--tc-save-ink); }
.tc-plan__save.is-more { background: #f1f5f9; color: var(--dv-muted); }
.tc-plan__save b { display: block; margin: 2px 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: inherit; font-variant-numeric: tabular-nums; }
.tc-plan__save em { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #a7f3d0; font-style: normal; font-weight: 700; }
.tc-plan__foot { margin-top: auto; padding-top: 16px; }
.tc-plan__foot .dv-btn { width: 100%; }
.tc-plans__small { margin: 22px 0 0; color: var(--dv-muted); font-size: .95rem; }

/* =================================================================
   5. One system: the modules, lit for what was ticked
   ================================================================= */
.tc-one__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(26px, 3vw, 40px); }
.tc-mod { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px; border-radius: var(--dv-r); background: #f8fafc; border: 1px solid var(--dv-card-line); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.tc-mod img { grid-row: span 2; width: 68px; height: 68px; object-fit: contain; filter: grayscale(1); opacity: .45; transition: filter .5s, opacity .5s; }
.tc-mod h3 { margin: 4px 0 0; font-size: 1.02rem; font-weight: 700; color: var(--dv-heading); line-height: 1.3; }
.tc-mod p { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--dv-muted); }
.tc-mod.is-lit { background: #fff; border-color: var(--dv-brand); box-shadow: var(--dv-shadow); }
.tc-mod.is-lit img { filter: none; opacity: 1; }
.tc-mod.is-lit p { color: var(--dv-text); }
.tc-mod.is-lit p b { color: var(--dv-stamp-dark); }
.tc-one__count { margin: 16px 0 0; font-weight: 600; color: var(--dv-heading); }

/* =================================================================
   6. Within a month
   ================================================================= */
.tc-weeks { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(30px, 4vw, 48px); padding-top: 34px; list-style: none; padding-left: 0; }
.tc-weeks__rail { position: absolute; top: 9px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--dv-line); overflow: hidden; }
.tc-weeks__rail i { position: absolute; inset: 0; background: var(--dv-stamp); transform-origin: 0 50%; }
.tc-week { position: relative; display: flex; flex-direction: column; }
.tc-week__shot { margin-top: auto !important; }
.tc-week > p:not(.tc-week__when) { margin: 0 0 16px; color: var(--dv-muted); }
.tc-week::before { content: ''; position: absolute; top: -34px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--dv-stamp); box-sizing: border-box; }
.tc-week__when { margin: 0; font-size: .95rem; font-weight: 700; color: var(--dv-stamp-dark); }
.tc-week h3 { margin: 4px 0 8px; font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); font-weight: 700; color: var(--dv-heading); line-height: 1.25; }
.tc-week p:last-child { margin: 0; color: var(--dv-muted); }
.tc-week__shot { display: block; margin-top: 16px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--dv-card-line); background: #fff; box-shadow: 0 18px 30px -22px rgba(20,42,80,.5); }
.tc-week__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1279px) {
    .tc-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
    .tc-one__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .tc-open__grid, .tc-calc__grid { grid-template-columns: minmax(0, 1fr); }
    .tc-stmt-wrap { max-width: 34rem; margin: 10px auto 30px; width: 100%; }
    .tc-bill { position: static; }
    .tc-mini {
        display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: var(--dv-head, 64px); z-index: 20;
        margin: 0 calc(var(--dv-gutter) * -1) 12px; padding: 10px var(--dv-gutter); background: var(--dv-ink); color: #fff; box-shadow: 0 10px 18px -12px rgba(15,23,42,.6);
    }
    .tc-mini__sum { font-size: .92rem; color: var(--dv-on-ink); line-height: 1.3; }
    .tc-mini__sum b { color: #fff; font-size: 1.1rem; }
    .tc-mini a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 9999px; background: #fff; color: var(--dv-brand) !important; font-weight: 700; font-size: .875rem; text-decoration: none !important; }
    .tc-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .tc-weeks__rail { display: none; }
    .tc-one__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .tc-presets { grid-template-columns: minmax(0, 1fr); }
    .tc-own__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tc-own__row > :first-child { grid-column: 1 / -1; }
    .tc-plans__grid, .tc-one__grid, .tc-weeks { grid-template-columns: minmax(0, 1fr); }
    .tc-stmt { padding: 18px 16px 16px; }
    .tc-stmt__note { right: -4px; }
    .tc-tip { display: none; }
    .tc-chart__head { gap: 12px; }
    .tc-chart__head .tc-ctl { width: 100%; }
    .tc-spans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; width: 100%; }
    .tc-plan__scope { min-height: 0; }
}

/* The first screen waits for its fonts (bootScript adds .dv-fonts, at most
   1.5 s in), as the dashboards page's hero does, so the headline is set once
   in Inter instead of reflowing from the fallback face */
html.dv-js:not(.dv-fonts) :is(.tc-open__copy, .tc-stmt-wrap) { opacity: 0; }
html.dv-js.dv-fonts :is(.tc-open__copy, .tc-stmt-wrap) { animation: dv-fade-in .5s ease-out; }
@media (prefers-reduced-motion: reduce) { html.dv-js.dv-fonts :is(.tc-open__copy, .tc-stmt-wrap) { animation: none; } }
.tc-plan__foot .dv-btn { min-height: 46px; }

/* Short laptop screens (1366x768, 1280x720): the opener tightens so the
   buttons and the whole statement sit above the fold */
@media (min-width: 1024px) and (max-height: 820px) {
    .tc-open { padding-block: 22px 40px; }
    .dv .tc-open__h1 { font-size: min(clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem), 7.2vh); }
    .tc-open .dv-lede { margin-top: 14px; font-size: 1.05rem; line-height: 1.5; }
    .tc-open__start { margin: 18px 0 8px; }
    .tc-preset { min-height: 52px; padding: 7px 14px; }
    .tc-preset__ic { width: 34px; height: 34px; }
    .tc-open__own { margin-top: 12px; }
    .tc-open .tc-proof { margin-top: 12px; }
    .tc-stmt { padding: 16px 20px 14px; }
    .tc-stmt__top { padding-bottom: 10px; }
    .tc-stmt__row { padding: 4px 6px; }
    .tc-stmt__rows { min-height: 12rem; }
    .tc-stmt__total { margin-top: 8px; padding: 8px 12px; }
    .tc-stmt__label { margin-top: 8px; }
}

/* Phones: every control a full thumb's width and height */
@media (max-width: 1023px) {
    .tc-tab, .tc-bill__presets button { min-height: 44px; }
    .tc-mini a { min-height: 44px; }
    .tc-step input { height: 44px; }
    .tc-step--sm button { width: 44px; height: 36px; }
    .tc-line { grid-template-columns: 28px minmax(0, 1fr) auto 44px; }
    .tc-line__x { width: 44px; height: 36px; border-radius: 10px; }
}
@media (max-width: 767px) {
    .tc-proof span { display: block; }
    .tc-proof i { display: none; }
}

/* At rest: the week markers pulse one after another along the line, and the
   build that best matches the ticks glows softly */
.tc-week::after { content: ''; position: absolute; top: -34px; left: 0; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(214,21,125,.5); animation: tc-week-pulse 4.8s ease-out infinite; }
.tc-week:nth-of-type(2)::after { animation-delay: 0s; }
.tc-week:nth-of-type(3)::after { animation-delay: 1.2s; }
.tc-week:nth-of-type(4)::after { animation-delay: 2.4s; }
.tc-week:nth-of-type(5)::after { animation-delay: 3.6s; }
@keyframes tc-week-pulse { 0% { box-shadow: 0 0 0 0 rgba(214,21,125,.55); } 25%, 100% { box-shadow: 0 0 0 16px rgba(214,21,125,0); } }
.tc-plan.is-match { animation: tc-glow 3.2s ease-in-out infinite; }
@keyframes tc-glow { 0%, 100% { box-shadow: inset 0 0 0 1px var(--dv-brand), 0 30px 50px -30px rgba(20,42,80,.55); } 50% { box-shadow: inset 0 0 0 1px var(--dv-brand), 0 30px 60px -24px rgba(34,70,133,.75), 0 0 0 6px rgba(34,70,133,.12); } }

/* Reduced motion and no scripts: everything still, nothing waiting */
@media (prefers-reduced-motion: reduce) {
    .tc-be .tc-be__ring, .tc-saving__flag::before, .tc-plan__badge::after, .tc-week::after, .tc-plan.is-match { animation: none; }
    .tc-stmt__row::before, .tc-tile, .tc-tile__tick, .tc-plan { transition: none; }
}