/* PrimeTel ROI calculator — styled to match the primeteltd.co.uk contact form
   (navy card, darker navy fields with a 1px grey underline, sky-blue headings, white values). */
.ptroi {
	--ptroi-card: #1f3375;        /* form card background */
	--ptroi-field: #232c70;       /* input background */
	--ptroi-underline: #656565;   /* input bottom border */
	--ptroi-accent: #4baff5;      /* heading / highlight blue */
	--ptroi-accent-ink: #14205a;
	--ptroi-ink: #ffffff;
	--ptroi-body: #c1c5d8;
	--ptroi-placeholder: #b0b3cb;
	--ptroi-cost: #e2b04a;
	--ptroi-benefit: #4baff5;
	--ptroi-radius: 24px;
	--ptroi-field-radius: 0;
	background: var(--ptroi-card);
	color: var(--ptroi-ink);
	padding: 3rem clamp(1.25rem, 5vw, 3.75rem);
	max-width: 960px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.45;
}
/* Every corner set explicitly (and important) so no inherited per-corner rule can flatten two of them. */
div.ptroi {
	border-top-left-radius: var(--ptroi-radius) !important;
	border-top-right-radius: var(--ptroi-radius) !important;
	border-bottom-right-radius: var(--ptroi-radius) !important;
	border-bottom-left-radius: var(--ptroi-radius) !important;
}
.ptroi *, .ptroi *::before, .ptroi *::after { box-sizing: border-box; }
.ptroi { overflow-wrap: break-word; }

.ptroi__section { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.ptroi__legend { color: var(--ptroi-accent); font-weight: 700; font-size: 1.35rem; margin-bottom: 1rem; padding: 0; }
.ptroi__field { margin-bottom: 1.25rem; }
.ptroi__field--inline label { display: block; margin-bottom: .6rem; color: var(--ptroi-body); }
.ptroi__label { display: block; font-weight: 600; margin-bottom: .45rem; color: var(--ptroi-ink); }
.ptroi__label--sub { font-weight: 500; color: var(--ptroi-body); }
.ptroi__label output { font-weight: 400; color: var(--ptroi-accent); margin-left: .5rem; }
.ptroi__help { color: var(--ptroi-body); font-size: .85rem; margin: 0 0 .9rem; }

/* Fields */
.ptroi__input, .ptroi__adv input {
	width: 100%; padding: 1rem 1.5rem; min-height: 52px;
	background: var(--ptroi-field); color: var(--ptroi-ink);
	border: 0; border-bottom: 1px solid var(--ptroi-underline); border-radius: var(--ptroi-field-radius);
	font: inherit; -webkit-appearance: none; appearance: none;
}
.ptroi__input::placeholder { color: var(--ptroi-placeholder); }
.ptroi__input--num { max-width: 10rem; }
.ptroi__input:focus, .ptroi__adv input:focus { outline: none; border-bottom-color: var(--ptroi-accent); box-shadow: inset 0 -1px 0 var(--ptroi-accent); }
.ptroi input[type="number"] { -moz-appearance: textfield; }
.ptroi input[type="number"]::-webkit-outer-spin-button, .ptroi input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ptroi input[type="range"] { width: 100%; max-width: 420px; accent-color: var(--ptroi-accent); }
.ptroi input[type="checkbox"] { accent-color: var(--ptroi-accent); width: 1.1rem; height: 1.1rem; }

/* Business type toggle */
.ptroi__segment { display: inline-flex; background: var(--ptroi-field); border-bottom: 1px solid var(--ptroi-underline); }
.ptroi__seg { position: relative; }
.ptroi__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ptroi__seg span { display: block; padding: .9rem 1.75rem; cursor: pointer; color: var(--ptroi-placeholder); font-weight: 600; }
.ptroi__seg input:checked + span { background: var(--ptroi-accent); color: var(--ptroi-accent-ink); }
.ptroi__seg input:focus-visible + span { outline: 2px solid var(--ptroi-accent); outline-offset: -2px; }

.ptroi__tip {
	display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-left: .35rem;
	border-radius: 50%; background: var(--ptroi-accent); color: var(--ptroi-accent-ink); font-size: .75rem; font-weight: 700; cursor: help; position: relative;
}
.ptroi__tip:hover::after, .ptroi__tip:focus::after {
	content: attr(aria-label); position: absolute; left: 50%; bottom: 140%; transform: translateX(-50%);
	background: #0d1745; color: #fff; padding: .4rem .6rem; border-radius: 6px; font-size: .8rem; font-weight: 400;
	width: max-content; max-width: min(260px, 70vw); z-index: 5;
}

/* Service line grid */
.ptroi__lines { border-bottom: 1px solid var(--ptroi-underline); }
.ptroi__lines-head, .ptroi__line {
	display: grid; grid-template-columns: 1fr 10rem 10rem; gap: 1rem; align-items: center; padding: .75rem 0;
}
.ptroi__lines-head { font-size: .75rem; font-weight: 600; color: var(--ptroi-accent); text-transform: uppercase; letter-spacing: .06em; padding-bottom: .5rem; }
.ptroi__line + .ptroi__line { border-top: 1px solid rgba(255,255,255,.08); }
.ptroi__line.is-off .ptroi__input, .ptroi__line.is-off .ptroi__line-novalue { opacity: .35; pointer-events: none; }
.ptroi__line-name { display: flex; align-items: center; gap: .6rem; cursor: pointer; color: var(--ptroi-ink); }
.ptroi__line-novalue { font-size: .8rem; color: var(--ptroi-body); }
.ptroi__money { position: relative; display: block; }
.ptroi__money::before { content: "£"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ptroi-placeholder); }
.ptroi__money .ptroi__input { padding-left: 1.9rem; }
.ptroi__line .ptroi__input--num { max-width: none; }
.ptroi__line-cell { display: block; min-width: 0; }
.ptroi__line-cap { display: none; }

/* Assumptions */
.ptroi__assumptions { border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 2rem; }
.ptroi__assumptions > summary { cursor: pointer; font-weight: 600; color: var(--ptroi-accent); padding: 1rem 0; list-style: none; display: flex; align-items: center; gap: .6rem; }
.ptroi__assumptions > summary::-webkit-details-marker { display: none; }
.ptroi__assumptions > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--ptroi-accent); border-radius: 50%; font-weight: 700; }
.ptroi__assumptions[open] > summary::before { content: "–"; }
.ptroi__assumptions-body { padding: .5rem 0 1.25rem; }
.ptroi__advanced { margin-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; }
.ptroi__adv { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; font-size: .9rem; padding: .35rem 0; color: var(--ptroi-body); }
.ptroi__adv label { white-space: nowrap; }
.ptroi__adv input { width: 4.5rem; min-height: 0; margin: 0 .2rem 0 .5rem; padding: .35rem .5rem; }

.ptroi__error { color: #ff8a80; margin: .5rem 0; }
.ptroi__hp { position: absolute; left: -9999px; }

.ptroi__note { background: var(--ptroi-field); border-left: 3px solid var(--ptroi-accent); padding: .85rem 1rem; margin: 0 0 1.25rem; font-size: .9rem; color: var(--ptroi-ink); }

/* Results */
.ptroi__results { margin-top: 1rem; }
.ptroi__notice { border: 2px solid var(--ptroi-cost); padding: 1.1rem 1.4rem; margin-bottom: 1.5rem; color: var(--ptroi-ink); font-size: .95rem; }
.ptroi__notice p { margin: 0; }
.ptroi__notice .ptroi__notice-title { color: var(--ptroi-cost); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin-bottom: .4rem; }
.ptroi__tile-sub strong { color: var(--ptroi-accent); }
.ptroi__tile-staff { font-size: 1rem; color: var(--ptroi-ink); }
.ptroi__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.ptroi__tile { background: var(--ptroi-field); border-bottom: 2px solid var(--ptroi-accent); padding: 1.5rem 1.75rem; }
.ptroi__tile--headline { margin-bottom: 1.5rem; }
.ptroi__tile-text { margin: 0; font-size: 1.25rem; color: var(--ptroi-ink); }
.ptroi__tile--headline .ptroi__tile-text { font-size: 1.7rem; font-weight: 600; }
.ptroi__tile-text strong { color: var(--ptroi-accent); white-space: nowrap; }
.ptroi__tile-sub { margin: .4rem 0 0; color: var(--ptroi-body); font-size: .9rem; }

.ptroi__gate { background: var(--ptroi-field); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.ptroi__gate-text { margin: 0 0 1rem; font-weight: 600; color: var(--ptroi-ink); }
.ptroi__gate-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.ptroi__gate-row .ptroi__input { flex: 1 1 240px; background: var(--ptroi-card); }
.ptroi__gate-note { margin: .75rem 0 0; font-size: .8rem; color: var(--ptroi-body); }

.ptroi__btn {
	display: inline-block; padding: 1rem 2rem; border: 1px solid var(--ptroi-accent);
	font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; border-radius: 0;
	transition: background .15s, color .15s;
}
.ptroi__btn--primary { background: var(--ptroi-accent); color: var(--ptroi-accent-ink); }
.ptroi__btn--primary:hover { background: #fff; border-color: #fff; color: var(--ptroi-accent-ink); }
.ptroi__btn[disabled] { opacity: .6; cursor: wait; }

.ptroi__chart { margin: 0 0 2rem; }
.ptroi__chart figcaption { font-weight: 700; color: var(--ptroi-accent); margin-bottom: .75rem; font-size: 1.1rem; }
.ptroi__chart svg { width: 100%; height: auto; display: block; }
.ptroi__grid { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.ptroi__axis { fill: var(--ptroi-body); font-size: 12px; }
.ptroi__chart svg.is-narrow .ptroi__axis { font-size: 15px; }
.ptroi__bar--cost { fill: var(--ptroi-cost); }
.ptroi__bar--benefit { fill: var(--ptroi-benefit); }
.ptroi__chart-legend { list-style: none; display: flex; gap: 1.25rem; padding: 0; margin: .5rem 0 0; font-size: .85rem; color: var(--ptroi-body); }
.ptroi__sw { display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; vertical-align: -1px; }
.ptroi__sw--cost { background: var(--ptroi-cost); }
.ptroi__sw--benefit { background: var(--ptroi-benefit); }
.ptroi__indicative { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ptroi-accent); border: 1px solid var(--ptroi-accent); padding: .1rem .4rem; margin-left: .5rem; vertical-align: middle; }

.ptroi__breakdown { margin-bottom: 2rem; border-top: 1px solid rgba(255,255,255,.12); }
.ptroi__breakdown > summary { cursor: pointer; font-weight: 600; color: var(--ptroi-accent); padding: 1rem 0; }
.ptroi__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ptroi__table th, .ptroi__table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.ptroi__table th { font-weight: 400; color: var(--ptroi-body); }
.ptroi__table td { text-align: right; color: var(--ptroi-ink); font-variant-numeric: tabular-nums; }
.ptroi__table-sub th, .ptroi__table-sub td { font-weight: 700; color: var(--ptroi-ink); }

.ptroi__meetings { margin-bottom: 1.25rem; }
.ptroi__meetings-text { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 600; color: var(--ptroi-ink); text-align: center; }
/* HubSpot's iframe has a white background; give it a white, rounded frame and room before it sizes itself. */
.ptroi .meetings-iframe-container { background: #fff; border-radius: 12px; overflow: hidden; min-height: 640px; }
.ptroi .meetings-iframe-container iframe { display: block; width: 100%; border: 0; }

.ptroi__footnote { font-size: .8rem; color: var(--ptroi-body); margin: 0; }

/* Tablet: give the service-line label room before the two fixed number columns squeeze it. */
@media (max-width: 860px) {
	.ptroi__lines-head, .ptroi__line { grid-template-columns: 1fr 8rem 8rem; }
	.ptroi__input { padding-left: 1rem; padding-right: 1rem; }
	.ptroi__money .ptroi__input { padding-left: 1.9rem; }
	.ptroi__tile { padding: 1.25rem 1.25rem; }
	.ptroi__tile-text { font-size: 1.1rem; }
	.ptroi__tile--headline .ptroi__tile-text { font-size: 1.5rem; }
}

@media (max-width: 640px) {
	.ptroi { --ptroi-radius: 16px; padding: 2rem 1.25rem; }
	.ptroi__legend { font-size: 1.2rem; }

	.ptroi__segment { display: flex; }
	.ptroi__seg { flex: 1 1 0; }
	.ptroi__seg span { padding: .9rem 1rem; text-align: center; }
	.ptroi__input--num { max-width: none; }

	.ptroi__lines-head { display: none; }
	.ptroi__line { grid-template-columns: 1fr 1fr; gap: .5rem .75rem; align-items: end; }
	.ptroi__line-name { grid-column: 1 / -1; }
	.ptroi__line-cap { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ptroi-accent); margin-bottom: .3rem; }
	.ptroi__line-novalue { align-self: center; }

	.ptroi__adv { grid-template-columns: 1fr; gap: .35rem; }
	.ptroi__adv label { display: grid; grid-template-columns: 1fr 4.5rem 1rem; align-items: center; white-space: normal; }
	.ptroi__adv input { margin: 0 .25rem 0 0; }

	.ptroi__tiles { grid-template-columns: 1fr; }
	.ptroi__tile-text strong { white-space: normal; }
	.ptroi__tile--headline .ptroi__tile-text { font-size: 1.3rem; }

	.ptroi__notice { padding: 1rem; font-size: .9rem; }

	.ptroi__gate { padding: 1.25rem; }
	.ptroi__gate-row .ptroi__btn { flex: 1 1 100%; }
	.ptroi__btn { display: block; width: 100%; padding: 1rem; }
	.ptroi .meetings-iframe-container { border-radius: 8px; }

	/* Breakdown: label on its own line, value beneath, so long labels and "from £…" values never collide. */
	.ptroi__table, .ptroi__table tbody, .ptroi__table tr { display: block; }
	.ptroi__table tr { padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
	.ptroi__table tr[hidden] { display: none; }
	.ptroi__table th, .ptroi__table td { display: block; padding: 0; border: 0; text-align: left; }
	.ptroi__table th { font-size: .85rem; }
	.ptroi__table td { font-weight: 600; margin-top: .15rem; }
}