/* Circuit Craftworks — Data Transfer, Backup & Migration funnel
 * Adds new components to the page's existing PCB design system. It defines no
 * colour of its own: every value below resolves through the page's own custom
 * properties, so the funnel follows the page in light or dark without a second
 * palette to keep in sync.
 */

#ccgx-page .ccdm-sec{position:relative}

/* --------------------------------------------------------------------------
 * 1. "What are you trying to do?" selector
 * ----------------------------------------------------------------------- */

#ccgx-page .ccdm-goals{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
	gap:clamp(.9rem,1.4vw,1.15rem);
	margin-top:clamp(1.6rem,3vw,2.4rem);
}

#ccgx-page .ccdm-goal{
	display:flex;
	flex-direction:column;
	gap:.55rem;
	position:relative;
	isolation:isolate;
	width:100%;
	min-height:100%;
	margin:0;
	padding:clamp(1.15rem,2vw,1.5rem) clamp(1.15rem,2vw,1.5rem) clamp(1rem,1.8vw,1.25rem);
	border:1px solid var(--edge-mid,var(--line));
	border-radius:var(--r,16px);
	background:var(--surf-1,var(--panel));
	box-shadow:inset 0 1px 0 var(--inner-hi),var(--lift-0);
	color:var(--text);
	font:inherit;
	text-align:left;
	cursor:pointer;
	transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

#ccgx-page .ccdm-goal::before{
	content:"";
	position:absolute;
	left:0;top:14px;bottom:14px;
	width:3px;
	border-radius:0 3px 3px 0;
	background:var(--accent,var(--blue));
	opacity:.32;
	transition:opacity .18s ease;
}

#ccgx-page .ccdm-goal:hover,
#ccgx-page .ccdm-goal.is-selected{
	border-color:var(--edge-active,var(--line-lit));
	box-shadow:inset 0 1px 0 var(--inner-hi),var(--lift-1);
	transform:translateY(-2px);
}

#ccgx-page .ccdm-goal:hover::before,
#ccgx-page .ccdm-goal.is-selected::before{opacity:1}

#ccgx-page .ccdm-goal:focus-visible{
	outline:3px solid var(--blue);
	outline-offset:3px;
}

#ccgx-page .ccdm-goal__num{color:var(--accent,var(--blue));letter-spacing:.14em}

#ccgx-page .ccdm-goal__title{
	font-size:1.06rem;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-.012em;
}

#ccgx-page .ccdm-goal__body{color:var(--muted);font-size:.925rem;line-height:1.55}

#ccgx-page .ccdm-goal__note{
	color:var(--muted-2);
	font-size:.82rem;
	line-height:1.45;
}

#ccgx-page .ccdm-goal__foot{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:.5rem;
	margin-top:auto;
	padding-top:.9rem;
	border-top:1px solid var(--line-soft,var(--line));
}

#ccgx-page .ccdm-goal__service{
	font-family:var(--font-mono);
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--muted-2);
}

#ccgx-page .ccdm-goal__price{font-weight:700;color:var(--text)}

#ccgx-page .ccdm-goal--branch{background:var(--surf-3,var(--panel-2))}
#ccgx-page .ccdm-goal--branch::before{background:var(--amber);opacity:.7}

/* --------------------------------------------------------------------------
 * 2. Service pricing cards
 * ----------------------------------------------------------------------- */

#ccgx-page .ccdm-plans{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
	gap:clamp(1rem,1.6vw,1.4rem);
	margin-top:clamp(1.6rem,3vw,2.4rem);
	align-items:stretch;
}

#ccgx-page .ccdm-plans--two{
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	margin-top:clamp(1rem,1.6vw,1.4rem);
}

#ccgx-page .ccdm-plan{
	display:flex;
	flex-direction:column;
	background:var(--surf-1,var(--panel));
	border-color:var(--edge-mid,var(--line));
	box-shadow:inset 0 1px 0 var(--inner-hi),var(--lift-1);
}

#ccgx-page .ccdm-plan--featured{
	border-color:var(--edge-active,var(--line-lit));
	box-shadow:inset 0 1px 0 var(--inner-hi),var(--lift-2);
}

#ccgx-page .ccdm-plan__badge{
	position:absolute;
	top:-.7rem;left:clamp(1.25rem,2.4vw,1.75rem);
	padding:.3rem .7rem;
	border-radius:999px;
	background:linear-gradient(135deg,var(--blue),var(--purple));
	color:#fff;
	font-family:var(--font-mono);
	font-size:.63rem;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	box-shadow:0 6px 16px rgba(8,105,165,.28);
}

#ccgx-page .ccdm-plan__name{
	margin:0 0 .35rem;
	font-size:1.12rem;
	letter-spacing:-.01em;
}

#ccgx-page .ccdm-plan__price{
	display:flex;
	align-items:baseline;
	gap:.45rem;
	margin:0 0 .9rem;
}

#ccgx-page .ccdm-plan__amount{
	font-size:clamp(2.1rem,3.2vw,2.5rem);
	font-weight:800;
	letter-spacing:-.03em;
	line-height:1;
}

#ccgx-page .ccdm-plan__unit{
	font-family:var(--font-mono);
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--muted-2);
}

#ccgx-page .ccdm-plan__best{
	margin:0 0 .9rem;
	padding-bottom:.9rem;
	border-bottom:1px solid var(--line-soft,var(--line));
	color:var(--muted);
	font-size:.93rem;
	line-height:1.55;
}

#ccgx-page .ccdm-plan__list{
	list-style:none;
	margin:0 0 1.25rem;
	padding:0;
	display:grid;
	gap:.5rem;
}

#ccgx-page .ccdm-plan__list li{
	position:relative;
	padding-left:1.4rem;
	color:var(--muted);
	font-size:.9rem;
	line-height:1.5;
}

#ccgx-page .ccdm-plan__list li::before{
	content:"";
	position:absolute;
	left:.15rem;top:.5rem;
	width:8px;height:8px;
	border-radius:2px;
	border:1px solid var(--accent,var(--blue));
	background:color-mix(in srgb,var(--accent,var(--blue)) 26%,transparent);
}

#ccgx-page .ccdm-plan__cta{margin-top:auto;width:100%;justify-content:center}

#ccgx-page .ccdm-addons{margin-top:clamp(1.4rem,2.4vw,2rem)}

#ccgx-page .ccdm-addon-list{
	list-style:none;
	margin:0;padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:.7rem 1.6rem;
}

#ccgx-page .ccdm-addon-list li{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:.4rem;
	padding:.6rem 0;
	border-bottom:1px solid var(--line-soft,var(--line));
	font-size:.92rem;
}

#ccgx-page .ccdm-addon-list b{font-weight:600}
#ccgx-page .ccdm-addon-list span{color:var(--accent,var(--blue));font-weight:700;white-space:nowrap}
#ccgx-page .ccdm-addons__note{margin:1rem 0 0;color:var(--muted-2);font-size:.88rem}

/* --------------------------------------------------------------------------
 * 3. Comparison table
 * ----------------------------------------------------------------------- */

#ccgx-page .ccdm-table-scroll{
	margin-top:clamp(1.6rem,3vw,2.4rem);
	border:1px solid var(--edge-mid,var(--line));
	border-radius:var(--r,16px);
	background:var(--surf-1,var(--panel));
	box-shadow:inset 0 1px 0 var(--inner-hi),var(--lift-1);
	overflow:hidden;
}

#ccgx-page .ccdm-table{
	width:100%;
	border-collapse:collapse;
	font-size:.92rem;
}

#ccgx-page .ccdm-table__caption{
	position:absolute;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
}

#ccgx-page .ccdm-table thead th{
	padding:1rem .9rem;
	border-bottom:1px solid var(--edge-mid,var(--line));
	text-align:center;
	vertical-align:bottom;
	background:var(--surf-2,var(--panel-2));
}

#ccgx-page .ccdm-table thead th:first-child{text-align:left;width:40%}

#ccgx-page .ccdm-table__svc{
	display:block;
	font-size:.9rem;
	font-weight:700;
	letter-spacing:-.008em;
}

#ccgx-page .ccdm-table__price{
	display:block;
	margin-top:.2rem;
	color:var(--accent,var(--blue));
	font-family:var(--font-mono);
	font-size:.78rem;
	font-weight:700;
}

#ccgx-page .ccdm-table tbody th{
	padding:.85rem .9rem;
	text-align:left;
	font-weight:500;
	color:var(--text);
}

#ccgx-page .ccdm-table tbody td{
	padding:.85rem .9rem;
	text-align:center;
	color:var(--muted);
}

#ccgx-page .ccdm-table tbody tr+tr th,
#ccgx-page .ccdm-table tbody tr+tr td{border-top:1px solid var(--line-soft,var(--line))}

#ccgx-page .ccdm-table tbody tr:hover th,
#ccgx-page .ccdm-table tbody tr:hover td{background:color-mix(in srgb,var(--accent,var(--blue)) 5%,transparent)}

#ccgx-page .ccdm-yes{color:var(--green);font-weight:700;font-size:1.05rem}
#ccgx-page .ccdm-no{color:var(--muted-2);opacity:.6}

#ccgx-page .ccdm-partial{
	display:inline-block;
	padding:.2rem .5rem;
	border-radius:999px;
	border:1px solid var(--line);
	color:var(--muted-2);
	font-family:var(--font-mono);
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
}

#ccgx-page .ccdm-table__note{margin-top:1.1rem;color:var(--muted)}

/* --------------------------------------------------------------------------
 * 4. Intake wizard
 * ----------------------------------------------------------------------- */

#ccgx-page .ccdm-wizard{
	margin-top:clamp(1.6rem,3vw,2.4rem);
	border:1px solid var(--edge-mid,var(--line));
	border-radius:var(--r-lg,22px);
	background:var(--surf-1,var(--panel));
	box-shadow:inset 0 1px 0 var(--inner-hi),var(--lift-2);
	overflow:hidden;
}

#ccgx-page .ccdm-progress{
	padding:clamp(1rem,2vw,1.35rem) clamp(1.25rem,2.6vw,2rem) 0;
}

#ccgx-page .ccdm-progress__track{
	height:6px;
	border-radius:999px;
	background:color-mix(in srgb,var(--muted-2) 22%,transparent);
	overflow:hidden;
}

#ccgx-page .ccdm-progress__fill{
	display:block;
	height:100%;
	border-radius:999px;
	background:linear-gradient(90deg,var(--blue),var(--purple));
	transition:width .28s cubic-bezier(.22,1,.36,1);
}

#ccgx-page .ccdm-progress__label{margin:.65rem 0 0;color:var(--muted-2)}

#ccgx-page .ccdm-form{
	padding:clamp(1.25rem,2.6vw,2rem);
	margin:0;
}

#ccgx-page .ccdm-step{border:0;margin:0;padding:0}
#ccgx-page .ccdm-step[hidden]{display:none}

#ccgx-page .ccdm-step__eyebrow{margin:0 0 .4rem;color:var(--accent,var(--blue))}

#ccgx-page .ccdm-step__title{
	margin:0 0 .5rem;
	font-size:clamp(1.25rem,2.4vw,1.6rem);
	line-height:1.2;
	letter-spacing:-.02em;
}

#ccgx-page .ccdm-step__intro{margin:0 0 1.3rem;color:var(--muted);max-width:62ch}
#ccgx-page .ccdm-step__body{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem)}

#ccgx-page .ccdm-fieldset{border:0;margin:0;padding:0;min-width:0}

#ccgx-page .ccdm-legend{
	padding:0;
	margin-bottom:.7rem;
	font-size:1rem;
	font-weight:650;
	line-height:1.4;
	color:var(--text);
}

#ccgx-page .ccdm-help{margin:-.35rem 0 .7rem;color:var(--muted-2);font-size:.86rem;line-height:1.5}

#ccgx-page .ccdm-choices{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:.55rem;
}

#ccgx-page .ccdm-field--compact .ccdm-choices{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

#ccgx-page .ccdm-choice{
	display:flex;
	align-items:center;
	gap:.7rem;
	min-height:52px;
	padding:.7rem .9rem;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--surf-2,var(--panel-2));
	color:var(--text);
	font-size:.93rem;
	line-height:1.4;
	cursor:pointer;
	transition:border-color .16s ease,background .16s ease;
}

#ccgx-page .ccdm-choice:hover{border-color:var(--edge-active,var(--line-lit))}

#ccgx-page .ccdm-choice__input{
	position:absolute;
	width:1px;height:1px;
	opacity:0;
	margin:0;
	pointer-events:none;
}

#ccgx-page .ccdm-choice__mark{
	flex:none;
	width:20px;height:20px;
	border-radius:50%;
	border:2px solid var(--muted-2);
	background:var(--panel);
	position:relative;
	transition:border-color .16s ease;
}

#ccgx-page .ccdm-choice__mark::after{
	content:"";
	position:absolute;
	inset:3px;
	border-radius:50%;
	background:var(--blue);
	transform:scale(0);
	transition:transform .16s cubic-bezier(.22,1,.36,1);
}

#ccgx-page .ccdm-choice__input:checked+.ccdm-choice__mark{border-color:var(--blue)}
#ccgx-page .ccdm-choice__input:checked+.ccdm-choice__mark::after{transform:scale(1)}

#ccgx-page .ccdm-choice:has(.ccdm-choice__input:checked){
	border-color:var(--blue);
	background:color-mix(in srgb,var(--blue) 9%,var(--panel));
}

#ccgx-page .ccdm-choice.is-checked{
	border-color:var(--blue);
	background:color-mix(in srgb,var(--blue) 9%,var(--panel));
}

#ccgx-page .ccdm-choice__input:focus-visible+.ccdm-choice__mark{
	outline:3px solid var(--blue);
	outline-offset:2px;
}

#ccgx-page .ccdm-choice__label{font-weight:500}

#ccgx-page .ccdm-check{
	display:flex;
	align-items:flex-start;
	gap:.7rem;
	min-height:52px;
	padding:.8rem .9rem;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--surf-2,var(--panel-2));
	cursor:pointer;
	font-size:.93rem;
	line-height:1.45;
}

#ccgx-page .ccdm-check__input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

#ccgx-page .ccdm-check__mark{
	flex:none;
	width:20px;height:20px;
	margin-top:.1rem;
	border-radius:5px;
	border:2px solid var(--muted-2);
	background:var(--panel);
	position:relative;
}

#ccgx-page .ccdm-check__mark::after{
	content:"";
	position:absolute;
	left:5px;top:1px;
	width:5px;height:10px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	transform:rotate(45deg) scale(0);
	transition:transform .16s ease;
}

#ccgx-page .ccdm-check__input:checked+.ccdm-check__mark{background:var(--blue);border-color:var(--blue)}
#ccgx-page .ccdm-check__input:checked+.ccdm-check__mark::after{transform:rotate(45deg) scale(1)}
#ccgx-page .ccdm-check__input:focus-visible+.ccdm-check__mark{outline:3px solid var(--blue);outline-offset:2px}

#ccgx-page .ccdm-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}

#ccgx-page .ccdm-label{display:block;margin-bottom:.4rem;font-weight:600;font-size:.95rem}
#ccgx-page .ccdm-req{color:var(--amber)}

#ccgx-page .ccdm-optional{
	font-family:var(--font-mono);
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted-2);
}

#ccgx-page .ccdm-input{
	width:100%;
	min-height:52px;
	padding:.75rem .9rem;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--panel);
	color:var(--text);
	font:inherit;
	font-size:.95rem;
}

#ccgx-page .ccdm-input:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
#ccgx-page .ccdm-textarea{min-height:110px;resize:vertical;line-height:1.55}
#ccgx-page .ccdm-input[aria-invalid="true"]{border-color:var(--amber)}
#ccgx-page .ccdm-error{margin:.4rem 0 0;color:var(--amber);font-size:.85rem;font-weight:600}

#ccgx-page .ccdm-inline-note{
	margin:0;
	padding:.85rem 1rem;
	border-left:3px solid var(--accent,var(--blue));
	border-radius:0 10px 10px 0;
	background:color-mix(in srgb,var(--accent,var(--blue)) 7%,transparent);
	color:var(--muted);
	font-size:.9rem;
	line-height:1.55;
}

#ccgx-page .ccdm-inline-note[hidden]{display:none}
#ccgx-page .ccdm-inline-note a{color:var(--blue-2,var(--blue))}

#ccgx-page .ccdm-privacy-inline .ccgx-panel__body{padding:1rem 1.15rem}
#ccgx-page .ccdm-privacy-inline .ccgx-p{margin:0;font-size:.9rem}

#ccgx-page .ccdm-nav{
	display:flex;
	flex-wrap:wrap;
	gap:.75rem;
	padding:0 clamp(1.25rem,2.6vw,2rem) clamp(1.25rem,2.6vw,2rem);
}

#ccgx-page .ccdm-nav .ccgx-btn{flex:1 1 160px;justify-content:center}
#ccgx-page .ccdm-nav__back[hidden]{display:none}

#ccgx-page .ccdm-nav__error{
	margin:0;
	padding:0 clamp(1.25rem,2.6vw,2rem) clamp(1.25rem,2.6vw,2rem);
	color:var(--amber);
	font-weight:600;
}

#ccgx-page .ccdm-nav__error[hidden]{display:none}
#ccgx-page .ccdm-noscript{margin-top:1.5rem}

/* ---- summary ---- */

#ccgx-page .ccdm-summary__block+.ccdm-summary__block{margin-top:1.5rem}

#ccgx-page .ccdm-lines{list-style:none;margin:0;padding:0}

#ccgx-page .ccdm-lines li{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:1rem;
	padding:.7rem 0;
	border-bottom:1px solid var(--line-soft,var(--line));
}

#ccgx-page .ccdm-lines .ccdm-line__label{color:var(--text);font-weight:600}
#ccgx-page .ccdm-lines .ccdm-line__detail{display:block;color:var(--muted-2);font-size:.84rem;font-weight:400;margin-top:.15rem}
#ccgx-page .ccdm-lines .ccdm-line__amount{font-weight:700;white-space:nowrap}

#ccgx-page .ccdm-total{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:1rem;
	margin-top:1rem;
	padding:1.1rem 1.25rem;
	border:1px solid var(--edge-active,var(--line-lit));
	border-radius:14px;
	background:color-mix(in srgb,var(--blue) 7%,transparent);
}

#ccgx-page .ccdm-total__label{font-weight:700}
#ccgx-page .ccdm-total__note{display:block;color:var(--muted-2);font-size:.83rem;font-weight:400;margin-top:.2rem}

#ccgx-page .ccdm-total__amount{
	font-size:clamp(1.7rem,3vw,2.1rem);
	font-weight:800;
	letter-spacing:-.03em;
	white-space:nowrap;
}

#ccgx-page .ccdm-answers{
	list-style:none;
	margin:.8rem 0 0;padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:.55rem 1.4rem;
}

#ccgx-page .ccdm-answers li{
	display:flex;
	justify-content:space-between;
	gap:.8rem;
	padding:.45rem 0;
	border-bottom:1px solid var(--line-soft,var(--line));
	font-size:.88rem;
}

#ccgx-page .ccdm-answers dt,#ccgx-page .ccdm-answers .k{color:var(--muted-2)}
#ccgx-page .ccdm-answers .v{font-weight:600;text-align:right}

#ccgx-page .ccdm-summary h4{
	margin:0 0 .6rem;
	font-size:1.02rem;
	letter-spacing:-.01em;
}

#ccgx-page .ccdm-flag{
	padding:1.1rem 1.25rem;
	border-radius:14px;
	border:1px solid var(--line);
	background:var(--surf-2,var(--panel-2));
}

#ccgx-page .ccdm-flag--stop{
	border-color:rgba(167,107,16,.42);
	background:color-mix(in srgb,var(--amber) 12%,transparent);
}

#ccgx-page .ccdm-flag--review{
	border-color:rgba(5,167,216,.42);
	background:color-mix(in srgb,var(--cyan) 10%,transparent);
}

#ccgx-page .ccdm-flag--ok{
	border-color:rgba(19,139,116,.42);
	background:color-mix(in srgb,var(--green) 10%,transparent);
}

#ccgx-page .ccdm-flag ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted)}
#ccgx-page .ccdm-flag li{margin:.3rem 0}
#ccgx-page .ccdm-flag p{margin:0 0 .3rem}

#ccgx-page .ccdm-submit{width:100%;justify-content:center;margin-top:1.2rem}

#ccgx-page .ccdm-micro{margin:.8rem 0 0;color:var(--muted-2);font-size:.83rem;text-align:center}
#ccgx-page .ccdm-micro a{color:var(--blue)}

/* ---- confirmation ---- */

#ccgx-page .ccdm-jobid{
	display:inline-block;
	margin:.4rem 0 1rem;
	padding:.5rem .9rem;
	border-radius:10px;
	border:1px dashed var(--edge-active,var(--line-lit));
	font-family:var(--font-mono);
	font-size:1.05rem;
	font-weight:700;
	letter-spacing:.06em;
}

/* --------------------------------------------------------------------------
 * 5. Process, checklist, hardware policy, safety, recovery
 * ----------------------------------------------------------------------- */

#ccgx-page .ccdm-process{
	list-style:none;
	margin:clamp(1.6rem,3vw,2.4rem) 0 0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
	gap:clamp(.9rem,1.6vw,1.25rem);
	counter-reset:ccdm;
}

#ccgx-page .ccdm-process__step{
	position:relative;
	padding:1.2rem 1.25rem;
	border:1px solid var(--line);
	border-radius:var(--r,16px);
	background:var(--surf-2,var(--panel-2));
}

#ccgx-page .ccdm-process__num{
	display:block;
	margin-bottom:.5rem;
	color:var(--accent,var(--blue));
	font-size:.78rem;
	letter-spacing:.16em;
}

#ccgx-page .ccdm-process__step h3{margin:0 0 .4rem;font-size:1rem;letter-spacing:-.01em}
#ccgx-page .ccdm-process__step p{margin:0;font-size:.9rem;color:var(--muted)}

#ccgx-page .ccdm-two-col{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	gap:clamp(1.8rem,3.4vw,3.2rem);
	align-items:start;
}

#ccgx-page .ccdm-two-col .ccgx-sec__head{display:block;margin-bottom:1.2rem}
#ccgx-page .ccdm-two-col .ccgx-sec__head h2{font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.18}

#ccgx-page .ccdm-checklist{
	list-style:none;
	margin:0;padding:0;
	display:grid;
	gap:.5rem;
}

#ccgx-page .ccdm-checklist li{
	position:relative;
	padding:.6rem .8rem .6rem 2.3rem;
	border:1px solid var(--line-soft,var(--line));
	border-radius:10px;
	background:var(--surf-2,var(--panel-2));
	color:var(--muted);
	font-size:.92rem;
	line-height:1.5;
}

#ccgx-page .ccdm-checklist li::before{
	content:"";
	position:absolute;
	left:.85rem;top:.95rem;
	width:14px;height:14px;
	border:1px solid var(--accent,var(--blue));
	border-radius:4px;
	background:color-mix(in srgb,var(--accent,var(--blue)) 18%,transparent);
}

#ccgx-page .ccdm-strong-note{
	margin-top:1rem;
	padding:.9rem 1.1rem;
	border-left:3px solid var(--amber);
	border-radius:0 10px 10px 0;
	background:color-mix(in srgb,var(--amber) 12%,var(--panel));
}

#ccgx-page .ccdm-flow{
	list-style:none;
	margin:1.2rem 0 0;padding:0;
	counter-reset:ccdmflow;
	display:grid;
	gap:.75rem;
}

#ccgx-page .ccdm-flow li{
	counter-increment:ccdmflow;
	position:relative;
	padding:.85rem 1rem .85rem 3rem;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--surf-2,var(--panel-2));
}

#ccgx-page .ccdm-flow li::before{
	content:counter(ccdmflow);
	position:absolute;
	left:.9rem;top:.9rem;
	width:24px;height:24px;
	display:grid;place-items:center;
	border-radius:7px;
	background:linear-gradient(135deg,var(--blue),var(--purple));
	color:#fff;
	font-family:var(--font-mono);
	font-size:.72rem;
	font-weight:700;
}

#ccgx-page .ccdm-flow b{display:block;font-size:.95rem;margin-bottom:.15rem}
#ccgx-page .ccdm-flow span{color:var(--muted);font-size:.88rem;line-height:1.5}

#ccgx-page .ccdm-safety{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:clamp(.9rem,1.6vw,1.2rem);
	margin-top:clamp(1.6rem,3vw,2.4rem);
}

#ccgx-page .ccdm-safety__item{background:var(--surf-1,var(--panel));border-color:var(--edge-soft,var(--line))}
#ccgx-page .ccdm-safety__item h3{margin:0 0 .45rem;font-size:1rem;letter-spacing:-.01em}
#ccgx-page .ccdm-safety__item p{margin:0;font-size:.9rem}

#ccgx-page .ccdm-recovery{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:clamp(1rem,2.4vw,2rem);
	align-items:start;
	margin-top:clamp(1.8rem,3.2vw,2.6rem);
	padding:clamp(1.3rem,2.6vw,2rem);
	border:1px solid rgba(167,107,16,.45);
	border-left-width:4px;
	border-radius:var(--r-lg,22px);
	background:color-mix(in srgb,var(--amber) 11%,var(--panel));
	box-shadow:var(--lift-1);
}

#ccgx-page .ccdm-recovery__title{
	margin:0 0 .6rem;
	font-size:clamp(1.35rem,2.6vw,1.8rem);
	line-height:1.18;
	letter-spacing:-.02em;
}

#ccgx-page .ccdm-recovery .ccgx-p{max-width:68ch}
#ccgx-page .ccdm-recovery .ccgx-btn{margin-top:.9rem}

/* --------------------------------------------------------------------------
 * 6. Responsive
 * ----------------------------------------------------------------------- */

@media (max-width:760px){
	#ccgx-page .ccdm-goals,
	#ccgx-page .ccdm-plans,
	#ccgx-page .ccdm-plans--two,
	#ccgx-page .ccdm-process,
	#ccgx-page .ccdm-safety{grid-template-columns:1fr}

	#ccgx-page .ccdm-choices,
	#ccgx-page .ccdm-field--compact .ccdm-choices,
	#ccgx-page .ccdm-grid-2,
	#ccgx-page .ccdm-answers,
	#ccgx-page .ccdm-addon-list{grid-template-columns:1fr}

	#ccgx-page .ccdm-recovery{grid-template-columns:1fr;gap:.9rem}

	#ccgx-page .ccdm-nav{flex-direction:column-reverse}
	#ccgx-page .ccdm-nav .ccgx-btn{width:100%;flex:none}

	/* The comparison table becomes one stacked card per row rather than a
	   horizontally scrolling grid. */
	#ccgx-page .ccdm-table-scroll{border:0;background:none;box-shadow:none;overflow:visible}
	#ccgx-page .ccdm-table,
	#ccgx-page .ccdm-table tbody,
	#ccgx-page .ccdm-table tr,
	#ccgx-page .ccdm-table th,
	#ccgx-page .ccdm-table td{display:block;width:auto}
	#ccgx-page .ccdm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

	#ccgx-page .ccdm-table tbody tr{
		margin-bottom:.7rem;
		border:1px solid var(--line);
		border-radius:12px;
		background:var(--surf-1,var(--panel));
		overflow:hidden;
	}

	#ccgx-page .ccdm-table tbody th{
		background:var(--surf-2,var(--panel-2));
		font-weight:650;
		border-bottom:1px solid var(--line-soft,var(--line));
	}

	#ccgx-page .ccdm-table tbody td{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:1rem;
		text-align:right;
		padding:.6rem .9rem;
	}

	#ccgx-page .ccdm-table tbody td::before{
		content:attr(data-label);
		color:var(--muted-2);
		font-size:.82rem;
		text-align:left;
	}

	#ccgx-page .ccdm-table tbody tr+tr th,
	#ccgx-page .ccdm-table tbody tr+tr td{border-top:0}
	#ccgx-page .ccdm-table tbody td+td{border-top:1px solid var(--line-soft,var(--line))}
}

@media (prefers-reduced-motion:reduce){
	#ccgx-page .ccdm-goal,
	#ccgx-page .ccdm-progress__fill,
	#ccgx-page .ccdm-choice__mark::after,
	#ccgx-page .ccdm-check__mark::after{transition:none}
	#ccgx-page .ccdm-goal:hover{transform:none}
}

@media (forced-colors:active){
	#ccgx-page .ccdm-goal,
	#ccgx-page .ccdm-choice,
	#ccgx-page .ccdm-check,
	#ccgx-page .ccdm-input,
	#ccgx-page .ccdm-plan{border:1px solid ButtonText}
	#ccgx-page .ccdm-choice__input:checked+.ccdm-choice__mark{border-color:Highlight}
}

/* Some themes reset [hidden]; the wizard depends on it for conditional
   questions and for showing one step at a time. */
#ccgx-page .ccdm-wizard [hidden]{display:none!important}

/* The page stylesheet sets `white-space:nowrap` on every <button>. The goal
   cards are buttons and carry real sentences, so they opt back out. */
#ccgx-page .ccdm-goal,
#ccgx-page .ccdm-goal > *,
#ccgx-page .ccdm-goal__foot > *{white-space:normal}
#ccgx-page .ccdm-goal__price,
#ccgx-page .ccdm-goal__service{white-space:nowrap}

/* --------------------------------------------------------------------------
 * 7. Corrections found in live QA
 * ----------------------------------------------------------------------- */

/* The "most popular" pill was white-on-light-blue and unreadable. It now uses
   the same dark navy the site header uses, which is the strongest contrast the
   palette already contains. */
#ccgx-page .ccdm-plan__badge{
	background:var(--text);
	color:var(--panel);
	padding:.38rem .8rem;
	line-height:1.1;
	box-shadow:var(--lift-0);
}

/* Long service names have to wrap inside the card CTA rather than spill out. */
#ccgx-page .ccdm-plan__cta{
	white-space:normal;
	line-height:1.25;
	padding-block:.85rem;
	height:auto;
	text-align:center;
}

/* The add-on amounts stop being single-line once the list is two columns in a
   narrow container. */
@media (max-width:1024px){
	#ccgx-page .ccdm-addon-list{grid-template-columns:1fr}
	#ccgx-page .ccdm-addon-list span{white-space:normal;text-align:right}
}

/* The recovery panel and the password warning carry body copy, so they sit on
   an opaque surface rather than letting the board show through them. */
#ccgx-page .ccdm-recovery,
#ccgx-page .ccdm-strong-note{backdrop-filter:none}

/* The step number is already stated by the progress indicator above it. */
#ccgx-page .ccdm-step__eyebrow{display:none}

/* A legend that only repeats the step heading stays for assistive technology
   and comes out of the visual layout. */
#ccgx-page .ccdm-field--sr-legend .ccdm-legend{
	position:absolute;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}

/* --------------------------------------------------------------------------
 * 8. Second QA pass
 * ----------------------------------------------------------------------- */

/* Paragraphs inside a callout were running into each other, so a warning read
   as one unbroken sentence. */
#ccgx-page .ccdm-flag p{display:block;margin:0 0 .7rem}
#ccgx-page .ccdm-flag p:last-child{margin-bottom:0}
#ccgx-page .ccdm-flag ul{margin:.5rem 0 0;padding-left:1.1rem}
#ccgx-page .ccdm-flag ul[style]{padding-left:0}
#ccgx-page .ccdm-flag li{margin:.45rem 0;line-height:1.55}

/* The answer key was being squeezed until it broke mid-word ("Servic e"). */
#ccgx-page .ccdm-answers .k{flex:0 1 auto;min-width:8.5ch;overflow-wrap:normal;word-break:keep-all}
#ccgx-page .ccdm-answers .v{flex:1 1 auto}

@media (max-width:760px){
	#ccgx-page .ccdm-answers li{
		display:block;
	}
	#ccgx-page .ccdm-answers .k{display:block;font-size:.8rem}
	#ccgx-page .ccdm-answers .v{display:block;text-align:left;margin-top:.1rem}
}

/* The page stylesheet sets `p:not([class]){display:contents}`, which erases a
   paragraph's box entirely and runs consecutive paragraphs together as one
   line. Every paragraph the wizard emits carries this class instead. */
#ccgx-page .ccdm-p{display:block;margin:0 0 .7rem;color:inherit}
#ccgx-page .ccdm-p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
 * 9. Option descriptions
 * ----------------------------------------------------------------------- */

/* Choices carry a plain-English description, so a customer does not need to
   already know what an SSD or a network drive is in order to answer. */
#ccgx-page .ccdm-choice{align-items:flex-start}
#ccgx-page .ccdm-choice__text{display:block}
#ccgx-page .ccdm-choice__mark{margin-top:.15rem}

#ccgx-page .ccdm-choice__desc{
	display:block;
	margin-top:.2rem;
	color:var(--muted-2);
	font-size:.83rem;
	line-height:1.45;
	font-weight:400;
}

#ccgx-page .ccdm-choices:has(.ccdm-choice__desc){grid-template-columns:1fr}

@media (min-width:900px){
	#ccgx-page .ccdm-choices:has(.ccdm-choice__desc){grid-template-columns:repeat(2,1fr)}
}