/* The cost comparison, on the home page and the costs page */
/* Costs */
.costgrid{display:grid;gap:22px;max-width:1120px;margin-inline:auto}
@media(min-width:940px){.costgrid{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:28px;align-items:start}}
.cmpbox{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(18px,3vw,32px);box-shadow:0 40px 70px -44px rgba(18,24,38,.8)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cmp-for{margin:0 0 16px;font-size:14px;color:rgba(255,255,255,.78)}
.tabs button{font:inherit;font-size:14px;font-weight:650;color:#fff;background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.28);border-radius:99px;padding:8px 13px;cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);border-color:#fff}
.js .cmp[hidden]{display:none}
html:not(.js) .cmp+.cmp{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.row .nm{grid-column:1/-1;font-weight:650;font-size:15.5px;line-height:1.25}
.row .nm small{display:block;font-weight:500;font-size:12.5px;color:rgba(255,255,255,.72)}
.row .trk{height:34px;border-radius:12px;background:rgba(255,255,255,.1);overflow:hidden}
.row .trk i{display:block;height:100%;border-radius:12px;background:#8d96a8;animation:grow 1s cubic-bezier(.3,.8,.3,1) forwards;animation-play-state:paused}
.row.fct .trk{height:44px}
.row.fct .trk i{background:linear-gradient(90deg,#23775a,#4cc09a)}
.in-view .row .trk i{animation-play-state:running}
html:not(.js) .row .trk i{animation:none}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.row .trk i{transform-origin:left}
.row .pr{text-align:right;min-width:104px;line-height:1.1}
.row .pr b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(24px,4.4vw,32px);letter-spacing:-.01em}
.row.fct .pr b{color:#7fe3bd;font-size:clamp(28px,5vw,38px)}
.row .pr small{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-top:3px}
.save{margin:22px 0 0;padding:13px 16px;border-radius:16px;background:rgba(127,227,189,.14);color:#cdf5e3;font-size:15.5px}
.save b{color:#fff;font-family:var(--serif);font-weight:500;font-size:21px}
.cmp-note{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.cmp-note a{color:#fff}
.tease{background:#fff;border:1px solid var(--line-2);border-radius:26px;padding:22px;box-shadow:0 30px 60px -40px rgba(18,24,38,.55)}
.tease h3{font-family:var(--serif);font-weight:500;font-size:26px;margin:0 0 14px}
.tease-in{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.tease label{display:block;font-size:13px;font-weight:650;color:var(--ink-3);margin-bottom:4px}
.tease input{width:100%;font:inherit;font-size:18px;font-weight:600;border:1.5px solid var(--ink-5);border-radius:12px;padding:10px 12px}
.out-line{margin:0 0 8px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.out-line b{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3vw,38px);line-height:1.05;color:var(--sapphire);letter-spacing:-.01em}
.out-line.zero-line b{color:var(--emerald-d)}
.out-line span{color:var(--ink-2);font-size:15px}
.tease .more{display:inline-block;margin-top:8px;font-size:15px}


.zero{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.18)}
.zero b{font-family:var(--serif);font-weight:500;font-size:clamp(64px,10vw,96px);line-height:.9;letter-spacing:-.03em;color:#7fe3bd}
.zero span{font-size:clamp(15px,1.8vw,18px);line-height:1.35;color:rgba(255,255,255,.9);max-width:15em}
.row .trk{height:38px}
.row.fct .trk{height:50px}

.zero{padding-top:6px}
@media(max-width:420px){.tabs button{font-size:13.5px;padding:7px 11px}}