/* Global Nettech AI & ML configuration recommender.
   Scoped under .gntc so it can sit inside the site's own pages. Colour and type follow the
   site (navy, one blue accent, Poppins headings, Open Sans body). White text only ever sits
   on --gntc-blue-600 or navy: the lighter brand blue fails contrast.
   Every colour, type size and radius on the page is a token in the block below (research/06 s4:
   radii 8 / 10 / 14 / 20, seven type steps), so the site team can retune it in one place.
   Knob for the host page: set --gntc-sticky-top on .gntc to clear a sticky site header. */
.gntc {
  --gntc-blue-50: #f2f8fe; --gntc-blue-100: #e3f0fc; --gntc-blue-300: #9bd3fb; --gntc-blue-400: #5fb6f5;
  --gntc-blue-500: #2ea3f2; --gntc-blue-600: #0c71c3; --gntc-blue-700: #095a9c;
  --gntc-navy-950: #071f3d; --gntc-navy-900: #0a2e54; --gntc-navy-850: #0e3a67;
  --gntc-text: #04162e; --gntc-soft: #41526a; --gntc-mut: #5b6a80; --gntc-faint: #94a3b8;
  --gntc-line: #dfe6f0; --gntc-line-soft: #edf1f7; --gntc-surface: #fff;
  --gntc-control: #8191a8;        /* radio ring and switch track: 3.2:1 on white (WCAG 1.4.11) */
  --gntc-track: #b7cce4;          /* the meter's unfilled track; the blue fill reads 3.1:1 against it */
  --gntc-dash: #c9d9ea; --gntc-on-navy-soft: #cbd8e8; --gntc-ok: #16a34a;
  --gntc-warn-bg: #fffdf6; --gntc-warn-line: #f3e3b5; --gntc-warn-ink: #b45309;
  --gntc-amber: #92400e; --gntc-amber-bg: #fef3c7;
  --gntc-ring: rgba(12, 113, 195, .12);   /* the glow on a focused text input; keyboard focus uses a solid outline */
  --gntc-shadow-sm: 0 1px 2px rgba(10, 46, 84, .06);
  --gntc-shadow-md: 0 10px 24px -12px rgba(10, 46, 84, .22), 0 2px 6px rgba(10, 46, 84, .05);
  --gntc-shadow-lg: 0 32px 60px -30px rgba(10, 46, 84, .4), 0 4px 12px rgba(10, 46, 84, .06);
  --gntc-head: 'Poppins', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --gntc-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gntc-fs-xs: .75rem; --gntc-fs-sm: .8125rem; --gntc-fs-md: .875rem; --gntc-fs-base: 1rem;
  --gntc-fs-lg: 1.125rem; --gntc-fs-xl: 1.25rem; --gntc-fs-2xl: 1.5rem;
  --gntc-r-xs: 8px; --gntc-r-sm: 10px; --gntc-r: 14px; --gntc-r-lg: 20px;
  --gntc-ease: cubic-bezier(.16, 1, .3, 1);
  --gntc-sticky-top: 24px;
  font-family: var(--gntc-body); font-size: 16px; line-height: 1.6; color: var(--gntc-text); text-align: left;
  -webkit-font-smoothing: antialiased;
}
.gntc *, .gntc *::before, .gntc *::after { box-sizing: border-box; }
.gntc [hidden] { display: none !important; }
/* :where keeps the reset at one-class specificity so the component rules below win */
.gntc :where(p, ul, ol, dl, dd, h2, h3, fieldset, table, caption) { margin: 0; padding: 0; }
.gntc :where(ul, ol) { list-style: none; }
.gntc :where(button, input) { font: inherit; color: inherit; }
.gntc :where(a) { color: var(--gntc-blue-600); }
/* a solid ring (blue-600 is 5:1 on white); outlines follow each control's own corners */
.gntc :focus-visible { outline: 3px solid var(--gntc-blue-600); outline-offset: 2px; }
.gntc-sum__head :focus-visible, .gntc-dock :focus-visible { outline-color: #fff; }
.gntc-i { width: 20px; height: 20px; flex: none; }
.gntc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* section headings */
.gntc-head { margin-bottom: 28px; }
.gntc-head h2 { font-family: var(--gntc-head); font-weight: 700; font-size: clamp(var(--gntc-fs-2xl), 2.4vw, 1.95rem); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.gntc-head p { margin-top: 8px; max-width: 62ch; color: var(--gntc-soft); text-wrap: pretty; }
.gntc-head--sm { margin-bottom: 24px; }
.gntc-head--sm h2 { font-size: var(--gntc-fs-xl); }
.gntc-head--sm p { font-size: var(--gntc-fs-base); margin-top: 4px; }

/* ---------- step tracker ---------- */
.gntc-steps { display: inline-flex; align-items: center; max-width: 100%; margin-bottom: 36px; padding: 5px; background: var(--gntc-surface); border: 1px solid var(--gntc-line); border-radius: var(--gntc-r); box-shadow: var(--gntc-shadow-sm); }
.gntc-steps li { display: flex; align-items: center; }
.gntc-steps li + li::before { content: ''; width: 22px; height: 1.5px; margin: 0 2px; background: var(--gntc-line); }
.gntc-steps li.is-done + li::before { background: var(--gntc-blue-500); }
.gntc-steps button { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border: 0; border-radius: var(--gntc-r-sm); background: none; color: var(--gntc-mut); font-family: var(--gntc-head); font-size: var(--gntc-fs-md); font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.gntc-steps button:disabled { cursor: default; color: var(--gntc-faint); }
.gntc-steps button:not(:disabled):hover { color: var(--gntc-blue-600); }
.gntc-steps i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--gntc-r-xs); background: var(--gntc-line-soft); font-style: normal; font-size: var(--gntc-fs-sm); font-variant-numeric: tabular-nums; }
.gntc-steps i .gntc-i { width: 15px; height: 15px; stroke-width: 2.2; }
.gntc-steps .is-on button, .gntc-steps .is-on button:hover { background: var(--gntc-navy-900); color: #fff; }
.gntc-steps .is-on i { background: rgba(255, 255, 255, .16); }
.gntc-steps .is-done button { color: var(--gntc-text); }
.gntc-steps .is-done i { background: var(--gntc-blue-600); color: #fff; }

/* ---------- step 1: workloads ---------- */
.gntc-groups { counter-reset: gntc-g; }
.gntc-group { counter-increment: gntc-g; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; padding: 26px 0; border-top: 1px solid var(--gntc-line); align-items: start; }
.gntc-group h3 { font-family: var(--gntc-head); font-size: var(--gntc-fs-base); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.gntc-group h3::before { content: counter(gntc-g, decimal-leading-zero); display: block; margin-bottom: 4px; font-size: var(--gntc-fs-xs); font-weight: 600; color: var(--gntc-blue-600); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.gntc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gntc-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px 14px; align-content: start; align-items: center; justify-items: end; padding: 20px; text-align: left; background: var(--gntc-surface); border: 1px solid var(--gntc-line); border-radius: var(--gntc-r); box-shadow: var(--gntc-shadow-sm); cursor: pointer; transition: transform .25s var(--gntc-ease), box-shadow .25s var(--gntc-ease), border-color .2s; }
.gntc-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--gntc-r-sm); background: var(--gntc-blue-100); color: var(--gntc-blue-600); transition: background .2s, color .2s; }
.gntc-tile__icon .gntc-i { width: 22px; height: 22px; }
.gntc-tile__text { display: grid; gap: 5px; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
.gntc-tile strong { font-family: var(--gntc-head); font-size: var(--gntc-fs-base); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.gntc-tile__text > span { font-size: var(--gntc-fs-md); line-height: 1.5; color: var(--gntc-soft); }
.gntc-tile__go { width: 18px; height: 18px; color: var(--gntc-faint); transition: transform .25s var(--gntc-ease), color .2s; }
.gntc-tile:hover, .gntc-tile.is-on { border-color: var(--gntc-blue-500); box-shadow: var(--gntc-shadow-md); }
.gntc-tile:hover { transform: translateY(-2px); }
.gntc-tile:hover .gntc-tile__icon, .gntc-tile.is-on .gntc-tile__icon { background: var(--gntc-blue-600); color: #fff; }
.gntc-tile:hover .gntc-tile__go { transform: translateX(3px); color: var(--gntc-blue-600); }
.gntc-tile:active { transform: translateY(0) scale(.99); }

/* at-a-glance table (model-based configurations) and comparison table share a frame */
.gntc-glance { margin-top: 56px; }
.gntc-tablewrap { background: var(--gntc-surface); border: 1px solid var(--gntc-line); border-radius: var(--gntc-r-lg); box-shadow: var(--gntc-shadow-sm); overflow-x: auto; }
.gntc-tablewrap table { width: 100%; border-collapse: collapse; font-size: var(--gntc-fs-md); }
.gntc-tablewrap th, .gntc-tablewrap td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gntc-line-soft); }
.gntc-tablewrap tbody tr:last-child > * { border-bottom: 0; }
.gntc-tablewrap small { display: block; font-family: var(--gntc-body); font-size: var(--gntc-fs-sm); font-weight: 400; line-height: 1.4; color: var(--gntc-soft); }
.gntc-glance thead th { font-size: var(--gntc-fs-xs); font-weight: 600; color: var(--gntc-mut); background: var(--gntc-blue-50); white-space: nowrap; }
.gntc-glance th:first-child { width: 34%; } /* the model name and hint read in two or three lines */
.gntc-glance tbody th { font-family: var(--gntc-head); font-weight: 600; }
.gntc-glance td { font-variant-numeric: tabular-nums; }
.gntc-glance td b { font-weight: 600; }
.gntc-glance tr.gntc-glance__group th { padding: 9px 18px; font-size: var(--gntc-fs-sm); font-weight: 600; color: var(--gntc-blue-700); background: var(--gntc-blue-50); }
.gntc-glance td:last-child { text-align: right; }

/* ---------- step 2: breadcrumb, requirements, live configuration ---------- */
.gntc-trail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--gntc-line); font-size: var(--gntc-fs-md); }
.gntc-trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--gntc-mut); }
.gntc-trail li + li::before { content: '/'; margin-right: 10px; color: var(--gntc-faint); }
.gntc-trail [aria-current] { font-weight: 600; color: var(--gntc-text); }
.gntc-trail ol button, .gntc-link { padding: 0; border: 0; background: none; color: var(--gntc-blue-600); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.gntc-trail ol button:hover, .gntc-link:hover { text-decoration-color: currentColor; }

.gntc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: 56px; align-items: start; }
.gntc-form { counter-reset: gntc-q; min-width: 0; }
.gntc-q { counter-increment: gntc-q; min-width: 0; padding: 0 0 30px; margin-bottom: 30px; border: 0; border-bottom: 1px solid var(--gntc-line-soft); }
.gntc-q legend { display: flex; align-items: baseline; gap: 12px; padding: 0; font-family: var(--gntc-head); font-size: var(--gntc-fs-lg); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.gntc-q legend::before { content: counter(gntc-q, decimal-leading-zero); flex: none; font-size: var(--gntc-fs-xs); color: var(--gntc-blue-600); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.gntc-help { margin: 4px 0 0 31px; font-size: var(--gntc-fs-md); color: var(--gntc-soft); max-width: 60ch; }
.gntc-optgroup { margin: 18px 0 0 31px; font-size: var(--gntc-fs-sm); font-weight: 600; color: var(--gntc-mut); }
.gntc-unfold { margin: 12px 0 0 31px; font-size: var(--gntc-fs-md); }
.gntc-filter { display: block; max-width: 420px; margin: 14px 0 0 31px; }
.gntc-glance .gntc-filter { margin: 0 0 14px; }
.gntc-filter input { width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--gntc-line); border-radius: var(--gntc-r-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6a80' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") 12px center / 18px no-repeat; font: inherit; font-size: var(--gntc-fs-md); transition: border-color .2s, box-shadow .2s; }
.gntc-filter input:focus { outline: 0; border-color: var(--gntc-blue-600); box-shadow: 0 0 0 3px var(--gntc-ring); }
.gntc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; margin: 14px 0 0 31px; }
.gntc-opts--plain { display: flex; flex-wrap: wrap; }
.gntc-opts--many { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
.gntc-opts--many .gntc-opt__box { padding: 12px 14px 12px 12px; }
.gntc-opts--many small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gntc-opt { position: relative; display: block; cursor: pointer; }
.gntc-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.gntc-opt__box { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 12px; align-content: start; height: 100%; padding: 13px 16px 14px 14px; background: var(--gntc-surface); border: 1.5px solid var(--gntc-line); border-radius: var(--gntc-r); transition: border-color .2s, background .2s, box-shadow .2s, transform .15s; }
.gntc-opt__box::before { content: ''; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--gntc-control); border-radius: 50%; background: #fff; transition: border-color .2s, box-shadow .2s; }
.gntc-opt b { font-size: var(--gntc-fs-base); font-weight: 600; line-height: 1.4; }
.gntc-opt small { grid-column: 2; font-size: var(--gntc-fs-sm); line-height: 1.45; color: var(--gntc-soft); }
.gntc-opts--plain .gntc-opt__box { padding: 10px 16px 10px 12px; }
.gntc-opt:hover .gntc-opt__box { border-color: var(--gntc-blue-400); }
.gntc-opt input:checked + .gntc-opt__box { border-color: var(--gntc-blue-600); background: var(--gntc-blue-50); box-shadow: 0 0 0 3px rgba(12, 113, 195, .1); }
.gntc-opt input:checked + .gntc-opt__box::before { border-color: var(--gntc-blue-600); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px var(--gntc-blue-600); }
.gntc-opt input:active + .gntc-opt__box { transform: scale(.985); }
.gntc-opt input:focus-visible + .gntc-opt__box { outline: 3px solid var(--gntc-blue-600); outline-offset: 2px; }
.gntc-num { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0 31px; }
.gntc-num input { width: 9.5em; padding: 11px 14px; border: 1.5px solid var(--gntc-line); border-radius: var(--gntc-r-sm); background: #fff; font-variant-numeric: tabular-nums; transition: border-color .2s, box-shadow .2s; }
.gntc-num input:focus { outline: 0; border-color: var(--gntc-blue-600); box-shadow: 0 0 0 3px var(--gntc-ring); }
.gntc-num span { font-size: var(--gntc-fs-md); color: var(--gntc-soft); }

.gntc-expert { padding: 22px 24px 0; background: var(--gntc-surface); border: 1px solid var(--gntc-line); border-radius: var(--gntc-r); }
.gntc-expert .gntc-q:last-child { border-bottom: 0; margin-bottom: 0; }
.gntc-switch { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; cursor: pointer; }
.gntc-switch input { position: absolute; opacity: 0; }
.gntc-switch__track { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--gntc-control); transition: background .2s; }
.gntc-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 46, 84, .3); transition: transform .25s var(--gntc-ease); }
.gntc-switch input:checked + .gntc-switch__track { background: var(--gntc-blue-600); }
.gntc-switch input:checked + .gntc-switch__track::after { transform: translateX(18px); }
.gntc-switch input:focus-visible + .gntc-switch__track { outline: 3px solid var(--gntc-blue-600); outline-offset: 2px; }
.gntc-switch b { display: block; font-family: var(--gntc-head); font-weight: 600; }
.gntc-switch small { display: block; font-size: var(--gntc-fs-md); color: var(--gntc-soft); }

/* the live configuration: sticky, and never taller than the viewport. On a short laptop screen the head and the
   foot (quote button, links) stay put and the body between them scrolls, so the fit meter and the CTA are on screen. */
.gntc-summary { position: sticky; top: var(--gntc-sticky-top); min-width: 0; }
.gntc-sum { display: flex; flex-direction: column; max-height: calc(100vh - var(--gntc-sticky-top) - 16px); background: var(--gntc-surface); border: 1px solid var(--gntc-line); border-radius: var(--gntc-r-lg); box-shadow: var(--gntc-shadow-lg); overflow: hidden; }
.gntc-sum__head { position: relative; padding: 18px 20px 20px; color: #fff; background: linear-gradient(150deg, var(--gntc-navy-850), var(--gntc-navy-900) 55%, var(--gntc-navy-950)); isolation: isolate; }
.gntc-sum__head::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000); mask-image: linear-gradient(115deg, transparent 35%, #000); }
.gntc-kicker { display: block; font-family: var(--gntc-head); font-size: var(--gntc-fs-xs); font-weight: 600; color: var(--gntc-blue-300); letter-spacing: .02em; }
.gntc-sum__headline { margin-top: 6px; font-family: var(--gntc-head); font-size: var(--gntc-fs-xl); font-weight: 700; letter-spacing: -.02em; }
.gntc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 12px; padding: 4px; border-radius: var(--gntc-r-sm); background: rgba(255, 255, 255, .1); }
.gntc-seg button { padding: 8px 6px; border: 0; border-radius: var(--gntc-r-xs); background: transparent; color: var(--gntc-on-navy-soft); font-family: var(--gntc-head); font-size: var(--gntc-fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.gntc-seg button:hover { color: #fff; }
.gntc-seg button[aria-pressed="true"] { background: #fff; color: var(--gntc-navy-900); box-shadow: 0 2px 6px rgba(7, 31, 61, .35); }
.gntc-sum__head { flex: none; }
.gntc-sum__body { flex: 1 1 auto; min-height: 0; padding: 22px 22px 2px; overflow-y: auto; scrollbar-width: thin; }
.gntc-sum__foot { flex: none; padding: 0 22px 20px; }
.gntc-summary.is-fresh .gntc-sum__body { animation: gntc-fresh .35s var(--gntc-ease); }
@keyframes gntc-fresh { from { opacity: .35; transform: translateY(4px); } }
.gntc-sum__level { font-size: var(--gntc-fs-md); line-height: 1.45; color: var(--gntc-soft); text-wrap: pretty; }
.gntc-sum__for { margin-top: 4px; font-size: var(--gntc-fs-sm); line-height: 1.45; color: var(--gntc-mut); text-wrap: pretty; }
.gntc-sum__only { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--gntc-warn-line); border-radius: var(--gntc-r-sm); background: var(--gntc-warn-bg); font-size: var(--gntc-fs-sm); line-height: 1.45; color: var(--gntc-soft); }
.gntc-sum__only .gntc-i { width: 18px; height: 18px; margin-top: 1px; color: var(--gntc-warn-ink); }
.gntc-sum__name { margin-top: 6px; font-family: var(--gntc-head); font-size: var(--gntc-fs-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.gntc-sum__gpu { margin-top: 4px; font-size: var(--gntc-fs-md); font-weight: 600; color: var(--gntc-blue-700); }
.gntc-sum__quote { margin-bottom: 18px; color: var(--gntc-soft); }

.gntc-meter { margin: 18px 0 16px; padding: 14px 16px; border-radius: var(--gntc-r); background: var(--gntc-blue-50); }
.gntc-meter__top, .gntc-meter__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--gntc-fs-sm); color: var(--gntc-soft); font-variant-numeric: tabular-nums; }
.gntc-meter__top b { font-family: var(--gntc-head); font-size: var(--gntc-fs-lg); font-weight: 700; color: var(--gntc-text); letter-spacing: -.01em; }
.gntc-meter__bar { display: flex; height: 10px; margin: 10px 0 9px; border-radius: 999px; background: var(--gntc-track); box-shadow: inset 0 0 0 1px rgba(10, 46, 84, .18); overflow: hidden; }
.gntc-meter__bar i { height: 100%; background: var(--gntc-blue-600); transition: width .5s var(--gntc-ease); }
.gntc-meter__plain { font-size: var(--gntc-fs-md); color: var(--gntc-soft); }
.gntc-meter__also { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--gntc-dash); font-size: var(--gntc-fs-sm); color: var(--gntc-soft); font-variant-numeric: tabular-nums; }
.gntc-fit { font-weight: 700; color: var(--gntc-blue-700); }
.gntc-fit--tight { color: var(--gntc-amber); }
.gntc-fit--starter { color: var(--gntc-soft); }

.gntc-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--gntc-line-soft); border-radius: var(--gntc-r); background: var(--gntc-line-soft); overflow: hidden; }
.gntc-specs div { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-content: start; padding: 10px 12px 11px; background: var(--gntc-surface); }
.gntc-specs .gntc-i { grid-row: 1 / span 3; width: 18px; height: 18px; margin-top: 1px; color: var(--gntc-blue-600); }
.gntc-specs dt { font-size: var(--gntc-fs-xs); font-weight: 600; color: var(--gntc-mut); }
.gntc-specs .v { font-family: var(--gntc-head); font-size: var(--gntc-fs-base); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gntc-specs .s { font-size: var(--gntc-fs-xs); line-height: 1.35; color: var(--gntc-soft); overflow-wrap: anywhere; }
.gntc-perf { display: flex; gap: 10px; margin-top: 14px; font-size: var(--gntc-fs-md); line-height: 1.45; color: var(--gntc-soft); }
.gntc-perf .gntc-i { width: 18px; height: 18px; margin-top: 1px; color: var(--gntc-blue-600); }
.gntc-sum .gntc-btn--block { margin-top: 18px; }
.gntc-sum__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 14px; font-size: var(--gntc-fs-md); }
.gntc-sum__links a, .gntc-sum__links button { padding: 0; border: 0; background: none; color: var(--gntc-soft); font-weight: 600; text-decoration: none; cursor: pointer; transition: color .2s; }
.gntc-sum__links a:hover, .gntc-sum__links button:hover { color: var(--gntc-blue-600); }
.gntc-flash { min-height: 1.3em; margin-top: 4px; text-align: center; font-size: var(--gntc-fs-sm); font-weight: 600; color: var(--gntc-blue-700); }
.gntc-sum__note { padding-top: 14px; border-top: 1px solid var(--gntc-line-soft); font-size: var(--gntc-fs-sm); line-height: 1.5; color: var(--gntc-mut); }
.gntc-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--gntc-faint); }
.gntc-dot.is-stock { background: var(--gntc-ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }

/* buttons */
.gntc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 18px; border: 1.5px solid var(--gntc-line); border-radius: var(--gntc-r-sm); background: var(--gntc-surface); color: var(--gntc-text); font-family: var(--gntc-head); font-size: var(--gntc-fs-md); font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s; }
.gntc-btn:hover { border-color: var(--gntc-blue-600); color: var(--gntc-blue-600); }
.gntc-btn:active { transform: translateY(1px); }
.gntc-btn .gntc-i { width: 18px; height: 18px; transition: transform .25s var(--gntc-ease); }
.gntc-btn:hover .gntc-i { transform: translateX(3px); }
.gntc .gntc-btn--primary { padding: 14px 20px; border-color: var(--gntc-blue-600); background: var(--gntc-blue-600); color: #fff; box-shadow: 0 10px 22px -10px rgba(12, 113, 195, .7); }
.gntc .gntc-btn--primary:hover { border-color: var(--gntc-blue-700); background: var(--gntc-blue-700); color: #fff; }
.gntc-btn--block { display: flex; width: 100%; }
.gntc-btn--sm { padding: 7px 14px; font-size: var(--gntc-fs-sm); border-radius: var(--gntc-r-sm); }
.gntc .gntc-btn--light { border-color: #fff; background: #fff; color: var(--gntc-navy-900); }

/* ---------- step 3: comparison, reasons, method ---------- */
.gntc-review { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--gntc-line); scroll-margin-top: 24px; }
.gntc-cmp table { min-width: 640px; table-layout: fixed; }
.gntc-cmp th:first-child { width: 150px; }
/* the flag's slot is reserved on every tier column, so the three titles share one baseline */
.gntc-cmp thead th { padding: 20px 18px 16px; vertical-align: top; }
.gntc-cmp thead th:not(:first-child) { position: relative; padding-top: 54px; }
.gntc-cmp thead b { display: block; font-family: var(--gntc-head); font-size: var(--gntc-fs-lg); font-weight: 700; letter-spacing: -.02em; }
.gntc-cmp thead small { margin-top: 2px; text-wrap: pretty; }
.gntc-cmp tbody th { font-size: var(--gntc-fs-sm); font-weight: 600; color: var(--gntc-mut); }
.gntc-cmp td { font-variant-numeric: tabular-nums; }
.gntc-cmp td b { font-weight: 700; }
.gntc-cmp .is-sel { background: var(--gntc-blue-50); box-shadow: inset 1.5px 0 0 var(--gntc-blue-500), inset -1.5px 0 0 var(--gntc-blue-500); }
.gntc-cmp thead .is-sel { box-shadow: inset 1.5px 0 0 var(--gntc-blue-500), inset -1.5px 0 0 var(--gntc-blue-500), inset 0 1.5px 0 var(--gntc-blue-500); }
.gntc-cmp tbody tr:last-child .is-sel { box-shadow: inset 1.5px 0 0 var(--gntc-blue-500), inset -1.5px 0 0 var(--gntc-blue-500), inset 0 -1.5px 0 var(--gntc-blue-500); }
/* a selected last column follows the frame's rounded corner instead of ending in a notch */
.gntc-cmp thead .is-sel:last-child { border-top-right-radius: 19px; }
.gntc-cmp tbody tr:last-child .is-sel:last-child { border-bottom-right-radius: 19px; }
.gntc-flag { position: absolute; top: 20px; left: 18px; padding: 3px 9px; border-radius: var(--gntc-r-xs); background: var(--gntc-navy-900); color: #fff; font-family: var(--gntc-head); font-size: var(--gntc-fs-xs); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.gntc-chosen { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gntc-fs-sm); font-weight: 600; color: var(--gntc-blue-700); }
.gntc-chosen .gntc-i { width: 16px; height: 16px; stroke-width: 2.2; }

.gntc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; }
.gntc-two section { padding: 24px 26px; background: var(--gntc-surface); border: 1px solid var(--gntc-line); border-radius: var(--gntc-r-lg); }
.gntc-two h3 { margin-bottom: 14px; font-family: var(--gntc-head); font-size: var(--gntc-fs-base); font-weight: 600; letter-spacing: -.01em; }
.gntc-ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: var(--gntc-fs-md); line-height: 1.55; color: var(--gntc-soft); }
.gntc-ticks .gntc-i { width: 18px; height: 18px; margin-top: 3px; color: var(--gntc-blue-600); stroke-width: 2; }
.gntc-two section.gntc-caveats { background: var(--gntc-warn-bg); border-color: var(--gntc-warn-line); }
.gntc-caveats .gntc-i { color: var(--gntc-warn-ink); stroke-width: 1.6; }

.gntc-how { margin-top: 24px; background: var(--gntc-surface); border: 1px solid var(--gntc-line); border-radius: var(--gntc-r-lg); }
.gntc-how summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; font-family: var(--gntc-head); font-weight: 600; cursor: pointer; list-style: none; }
.gntc-how summary::-webkit-details-marker { display: none; }
.gntc-how summary::after { content: ''; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--gntc-mut); border-bottom: 2px solid var(--gntc-mut); transform: rotate(45deg); transition: transform .25s var(--gntc-ease); }
.gntc-how[open] summary::after { transform: rotate(-135deg); }
.gntc-how__body { padding: 4px 26px 24px; font-size: var(--gntc-fs-md); color: var(--gntc-soft); }
.gntc-how__body > * + * { margin-top: 16px; }
.gntc-break { width: 100%; max-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gntc-break caption { padding-bottom: 8px; text-align: left; font-weight: 600; color: var(--gntc-text); }
.gntc-break th, .gntc-break td { padding: 7px 0; border-bottom: 1px solid var(--gntc-line-soft); font-weight: 400; text-align: left; }
.gntc-break td { text-align: right; white-space: nowrap; padding-left: 16px; color: var(--gntc-text); }
.gntc-break .is-total > * { border-bottom: 0; font-weight: 700; color: var(--gntc-text); }
.gntc-break .is-spare > * { border-top: 1px solid var(--gntc-line-soft); border-bottom: 0; color: var(--gntc-soft); font-style: italic; }
.gntc-break .is-spare small { font-style: normal; }
.gntc-list { padding-left: 18px; list-style: disc; }
.gntc-list li { padding: 3px 0; }
.gntc-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gntc-stack b { flex-basis: 100%; color: var(--gntc-text); }
.gntc-stack span { padding: 4px 10px; border-radius: var(--gntc-r-xs); background: var(--gntc-blue-50); color: var(--gntc-blue-700); font-size: var(--gntc-fs-sm); font-weight: 600; }
.gntc-fine { font-size: var(--gntc-fs-sm); color: var(--gntc-mut); }

/* phone: the configuration stays reachable while answering */
.gntc-dock { display: none; }

@media (max-width: 1020px) {
  .gntc-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .gntc-summary { position: static; }
  .gntc-sum { max-height: none; }
  .gntc-sum__body { overflow: visible; }
  .gntc.has-config .gntc-dock.is-on { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 10px 12px 10px 18px; border-radius: var(--gntc-r); background: var(--gntc-navy-900); color: #fff; box-shadow: 0 18px 36px -12px rgba(7, 31, 61, .6); animation: gntc-fresh .3s var(--gntc-ease); }
  .gntc-dock small { display: block; font-size: var(--gntc-fs-xs); font-weight: 600; color: var(--gntc-blue-300); }
  .gntc-dock strong { display: block; font-family: var(--gntc-head); font-size: var(--gntc-fs-md); font-weight: 600; line-height: 1.3; }
  .gntc-review { margin-top: 48px; padding-top: 40px; }
}
@media (max-width: 900px) {
  /* the models table stacks each row: with four columns the model column starves below this width */
  .gntc-glance thead { display: none; }
  .gntc-glance th:first-child { width: auto; }
  .gntc-glance tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--gntc-line-soft); }
  .gntc-glance tr.gntc-glance__group { padding: 0; }
  .gntc-glance th, .gntc-glance td { display: block; padding: 3px 16px; border: 0; white-space: normal; }
  .gntc-glance td:last-child { text-align: left; padding-top: 8px; }
  .gntc-glance td[data-label]::before { content: attr(data-label); display: block; font-size: var(--gntc-fs-xs); font-weight: 600; color: var(--gntc-mut); }
}
@media (max-width: 860px) {
  .gntc-group { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .gntc-group h3::before { display: inline; margin-right: 10px; }
}
@media (max-width: 700px) {
  .gntc-steps { display: flex; margin-bottom: 26px; }
  .gntc-steps li { flex: 1 1 auto; }
  .gntc-steps li + li::before { flex: 1; min-width: 8px; }
  .gntc-steps li:not(.is-on) span { display: none; }
  .gntc-steps button { padding-right: 7px; }
  .gntc-steps .is-on button { padding-right: 14px; }
  .gntc-help, .gntc-optgroup, .gntc-opts, .gntc-num, .gntc-filter, .gntc-unfold { margin-left: 0; }
  .gntc-opts { grid-template-columns: minmax(0, 1fr); }
  .gntc-trail > .gntc-link, .gntc-trail li:not(:first-child):not([aria-current]) { display: none; }
  .gntc-tile { grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding: 16px; }
  .gntc-tile__text { grid-column: 2; grid-row: 1; }
  .gntc-tile__go { display: none; }
  .gntc-expert { padding: 18px 16px 0; }
  /* touch targets: secondary buttons and the share links reach 40 px; the four links sit two by two, no orphan */
  .gntc-btn--sm { padding: 11px 16px; }
  .gntc-sum__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
  .gntc-sum__links a, .gntc-sum__links button { padding: 9px 4px; text-align: center; }
  /* the comparison scrolls sideways: the label column stays put and the shown option comes first (app.js sets scrollLeft) */
  .gntc-cmp th:first-child { width: 104px; position: sticky; left: 0; z-index: 1; background: var(--gntc-surface); }
  .gntc-two section, .gntc-how summary { padding-left: 18px; padding-right: 18px; }
  .gntc-how__body { padding: 4px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .gntc *, .gntc *::before, .gntc *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}