/* D100: the guided selector ("Costruisci il tuo servizio"), on its own page only. The form of the accepted
   rendering (version 10): six sections, each opened by a 2px vermilion rule, a large vermilion number and a
   short label; the questions as a matrix of tiles (the six services in columns, the five of the chain in their
   order, then Energy Analytics apart); the answer as a stack of the site's cubes and the list of services; the
   request on the red ground the site closes its chapters with. Without script the chosen sector's rows still
   show (CSS only) and the request button opens the check-up form. */
.gs{--plane:#28282b;--plane-on:#313135;--muted:#a9a9ad;--faint:#8a8a8f;--cell:#262629;--cell-on:#2d2d31;--yes:#38383d;--yes-on:#444449}
.gs-chapter{padding-top:clamp(8px,2vw,24px)}
.gs-sec{margin-top:clamp(60px,8vw,104px);padding-top:26px;border-top:2px solid var(--accent)}
.gs-sec:first-child{margin-top:0}
.gs-step{display:flex;align-items:baseline;gap:16px;margin:0 0 16px}
.gs-step b{font-weight:300;font-size:clamp(3rem,5.2vw,4.5rem);line-height:.9;letter-spacing:-.03em;color:var(--accent)}
.gs-step span{font-size:.8125rem;font-weight:500;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
.gs h2{margin:0;max-width:30ch;font-weight:400;font-size:clamp(1.55rem,2.5vw,2.05rem);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.gs-hint,.gs-first{margin:8px 0 0;font-size:.875rem;color:var(--muted)}
.gs-first{margin-top:22px;font-size:1rem}

/* 01: the sectors, four cards with their figure, one chosen. */
.gs-sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.gs-sector{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 18px 16px;border-radius:10px;background:var(--plane);cursor:pointer;transition:background .2s}
.gs-fig{display:block;width:100%;height:84px}
.gs-fig polygon,.gs-stack-svg polygon{vector-effect:non-scaling-stroke;stroke-width:.8px}
.gs-sname{font-size:1.125rem;line-height:1.25;color:var(--muted);transition:color .2s}
.gs-sector small{font-size:.75rem;line-height:1.4;color:var(--faint);letter-spacing:.02em}
@media(hover:hover){.gs-sector:hover{background:var(--plane-on)}}
.gs-sector:has(input:checked){background:var(--plane-on);box-shadow:inset 2px 0 0 var(--accent)}
.gs-sector:has(input:checked) .gs-sname{color:var(--text)}
.gs-sector:has(input:focus-visible),.gs-row:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}

/* 02 and 03: one matrix per sector, shown when its sector is chosen (no script needed). Every cell is a tile;
   a service that answers a row carries its icon; a chosen row turns its tiles vermilion. */
.gs-matrix{display:none;--col:clamp(72px,6.2vw,88px);--gap:8px;margin-top:26px}
.gs:has(input[value=retail]:checked) .gs-matrix[data-sector=retail],.gs:has(input[value=distribuzione]:checked) .gs-matrix[data-sector=distribuzione],
.gs:has(input[value=energia]:checked) .gs-matrix[data-sector=energia],.gs:has(input[value=altro]:checked) .gs-matrix[data-sector=altro]{display:block}
.gs:has(input[name=gs-sector]:checked) .gs-first{display:none}
.gs-mhead,.gs-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,var(--col)) 16px var(--col);align-items:stretch}
.gs-mhead{align-items:end;padding-bottom:12px}
.gs-cap{font-size:.75rem;line-height:1.4;color:var(--faint);letter-spacing:.03em;align-self:end}
.gs-col{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.6875rem;line-height:1.25;color:var(--faint);letter-spacing:.01em;transition:color .2s}
.gs-col .menu-icon{width:22px;height:22px;transition:color .2s}
.gs[data-on~=control] .gs-col[data-col=control],.gs[data-on~=data-engineering] .gs-col[data-col=data-engineering],.gs[data-on~=data-warehouse] .gs-col[data-col=data-warehouse],
.gs[data-on~=business-intelligence] .gs-col[data-col=business-intelligence],.gs[data-on~=operations-research] .gs-col[data-col=operations-research],
.gs[data-on~=energy-management] .gs-col[data-col=energy-management]{color:var(--text)}
.gs[data-on~=control] .gs-col[data-col=control] .menu-icon,.gs[data-on~=data-engineering] .gs-col[data-col=data-engineering] .menu-icon,.gs[data-on~=data-warehouse] .gs-col[data-col=data-warehouse] .menu-icon,
.gs[data-on~=business-intelligence] .gs-col[data-col=business-intelligence] .menu-icon,.gs[data-on~=operations-research] .gs-col[data-col=operations-research] .menu-icon,
.gs[data-on~=energy-management] .gs-col[data-col=energy-management] .menu-icon{color:var(--accent)}
.gs-legend{display:none}
.gs-row{position:relative;margin-top:var(--gap);border-radius:8px;cursor:pointer}
.gs-say{display:flex;gap:18px;align-items:center;min-width:0;padding:0 28px 0 0}
.gs-say>span:last-child{padding-block:10px}
.gs-n{flex:none;align-self:stretch;display:flex;align-items:center;justify-content:center;width:52px;border-radius:6px;background:var(--cell);font-size:.9375rem;font-weight:500;line-height:1;color:var(--muted);transition:background .2s,color .2s}
.gs-row:has(input:checked) .gs-n{background:var(--accent);color:var(--surface)}
.gs-txt{display:block;min-width:0;font-size:1.125rem;line-height:1.4;color:var(--muted);transition:color .2s;text-wrap:pretty}
.gs-row:has(input:checked) .gs-txt{color:var(--text)}
.gs-area{display:block;margin-bottom:3px;font-size:.6875rem;line-height:1.4;letter-spacing:.03em;color:var(--faint);transition:color .2s}
.gs-row:has(input:checked) .gs-area{color:var(--accent)}
.gs-cell{display:flex;padding-inline:calc(var(--gap) / 2)}
.gs-tile{flex:1;min-height:68px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--cell);color:#8c8c91;font-style:normal;transition:background .2s,color .2s}
.gs-tile .menu-icon{width:20px;height:20px}
.gs-tile.yes{background:var(--yes)}
.gs-row:has(input:checked) .gs-tile{background:var(--cell-on)}
.gs-row:has(input:checked) .gs-tile.yes{background:var(--accent);color:var(--surface)}
@media(hover:hover){.gs-row:hover .gs-txt{color:var(--text)}.gs-row:hover .gs-n{background:var(--cell-on)}.gs-row:has(input:checked):hover .gs-n{background:var(--accent)}
  .gs-row:hover .gs-tile{background:var(--cell-on)}.gs-row:hover .gs-tile.yes{background:var(--yes-on)}.gs-row:has(input:checked):hover .gs-tile.yes{background:var(--accent)}}
.gs-names{display:none}

/* 04: the free note. */
.gs-free{margin-top:22px;max-width:760px}
.gs-free textarea{display:block;width:100%;min-height:112px;padding:14px 16px;border:0;border-radius:8px;background:var(--plane);color:var(--text);font:inherit;font-size:1.0625rem;line-height:1.5;resize:vertical}
.gs-free textarea::placeholder{color:var(--faint)}
.gs-free textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 05: the answer, the stack beside the list of services. */
.gs-count{margin:10px 0 0;font-size:1.0625rem;color:var(--muted);max-width:60ch}
.gs-count b{font-weight:500;color:var(--text)}
.gs-agrid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(20px,4vw,56px);margin-top:28px;align-items:start}
.gs-stack{position:sticky;top:20px;padding:6px 0 0}
.gs-stack-svg{display:block;width:100%;height:auto;max-height:460px}
.gs-stack p{margin:14px 0 0;font-size:.875rem;line-height:1.5;color:var(--muted)}
.gs-demo{display:inline-block;justify-self:start;margin-top:14px;font-size:.9375rem}
.gs-services{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gs-svc{display:grid;grid-template-columns:34px 26px minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px 18px;border-radius:10px;background:var(--plane);transition:background .25s,opacity .25s}
.gs-svc>.menu-icon{width:24px;height:24px;margin-top:2px;color:var(--accent)}
.gs-i{font-size:.75rem;font-weight:500;line-height:1.9;color:var(--accent);letter-spacing:.03em}
.gs-svc h3{margin:0;font-weight:400;font-size:1.375rem;line-height:1.25;letter-spacing:-.005em}
.gs-note{margin:2px 0 0;font-size:.875rem;color:var(--muted)}
.gs-out{grid-column:3;margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px}
.gs-out li{display:inline-flex;padding:5px 10px;border-radius:4px;background:rgba(255,255,255,.055);font-size:.875rem;line-height:1.4}
.gs-scope{grid-column:3;margin:10px 0 0;font-size:.875rem;line-height:1.5;color:var(--muted);max-width:62ch}
.gs-go{grid-column:3;justify-self:start;margin-top:10px;display:inline-flex;align-items:center;gap:10px;min-height:32px;color:var(--text);font-size:.875rem;border-bottom:1px solid currentColor;text-decoration:none}
.gs-go .pt-go{width:20px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2}
@media(hover:hover){.gs-go:hover{color:var(--accent);text-decoration:none}}
/* With the script a service the choices do not call for steps back to one line; without it all six stay open. */
.gs.is-live .gs-svc.is-off{background:transparent;opacity:.5;padding-block:9px}
.gs.is-live .gs-svc.is-off>.menu-icon,.gs.is-live .gs-svc.is-off .gs-i{color:var(--faint)}
.gs.is-live .gs-svc.is-off h3{font-size:1.0625rem;color:var(--muted)}
.gs.is-live .gs-svc.is-off :is(.gs-note,.gs-out,.gs-scope,.gs-go){display:none}
.gs:not(.is-live) :is(.gs-count,.gs-stack-art,.gs-recap){display:none}

/* 06: the request, on the red ground; what to do on the left, what the enquiry carries on the right. */
.gs-send{border-top:0;padding-top:0}
.gs-send-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:start;padding:clamp(24px,4.4vw,56px);border-radius:14px;background:var(--accent);color:var(--surface)}
.gs-send .gs-step b{color:var(--surface)}
.gs-send h2{max-width:16ch}
.gs-facts{margin:16px 0 0;font-size:.8125rem;line-height:1.6;letter-spacing:.02em;max-width:40ch}
.gs-cta{margin-top:26px}
/* The dark pill of the site's red closings (.closing-section .button-inverse). */
.gs-send .button-inverse{background:var(--surface);color:var(--text)}
.gs-send .button-inverse:before{background:var(--accent)}
.gs-send .button-inverse:focus-visible{background:var(--surface-alt);color:var(--text);outline-color:var(--surface)}
@media(hover:hover){.gs-send .button-inverse:hover{background:var(--surface-alt);color:var(--text)}}
.gs-recap h3{margin:0 0 14px;font-size:.8125rem;font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
.gs-recap-body p{margin:0;font-size:1rem}
.gs-recap dl{margin:0}
.gs-recap dl>div{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:4px 20px;padding-block:13px;border-top:1px solid #b53a28}
.gs-recap dl>div:last-child{border-bottom:1px solid #b53a28}
.gs-recap dt{font-size:.75rem;line-height:1.5;letter-spacing:.02em}
.gs-recap dd{margin:0;font-size:1rem;line-height:1.45;overflow-wrap:anywhere}
.gs-recap ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:r}
.gs-recap li{counter-increment:r;display:grid;grid-template-columns:1.6em minmax(0,1fr)}
.gs-recap li:before{content:counter(r);grid-row:1 / span 2;font-family:'IBM Plex Mono','IBM Plex Mono Fallback',monospace;font-size:.75rem;line-height:1.9}
.gs-recap li b{font-size:.75rem;font-weight:500;line-height:1.6;letter-spacing:.02em}
.gs-recap li>*{grid-column:2}
.gs-bound{margin:22px 0 0;font-size:.875rem;color:var(--muted);max-width:70ch}

/* Below 1120px a row's sentence takes the full width and its six tiles stand under it, at the same places on
   every row, so the columns still read down the page; a legend names the six icons once. */
@media(max-width:1119px){
  .gs-mhead{display:none}
  .gs-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;max-width:560px;margin:0 0 4px;padding:0;list-style:none}
  .gs-legend li{display:flex;align-items:center;gap:9px;min-width:0;font-size:.6875rem;line-height:1.3;color:var(--muted);letter-spacing:.01em}
  .gs-legend .menu-icon{width:18px;height:18px}
  .gs-row{grid-template-columns:repeat(5,minmax(0,1fr)) 4px minmax(0,1fr);column-gap:6px;row-gap:10px;max-width:560px;margin-top:22px}
  .gs-say{grid-column:1 / -1;align-items:flex-start;gap:12px;padding:0}
  .gs-n{align-self:flex-start;width:42px;min-height:42px}
  .gs-say>span:last-child{padding-block:0}
  .gs-cell{padding:0}
  .gs-tile{min-height:40px}
  .gs-names{grid-column:1 / -1;font-size:.6875rem;line-height:1.4;letter-spacing:.01em}
  .gs-row:has(input:checked) .gs-names{display:block}
}
@media(max-width:860px){
  .gs-sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-fig{height:64px}
  .gs-txt{font-size:1.0625rem}
  .gs-agrid{grid-template-columns:minmax(0,1fr)}
  .gs-stack{position:static;display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 16px;align-items:center;padding:0}
  .gs-stack-svg{max-height:200px}
  .gs-stack-art{grid-row:1 / span 2}
  .gs-stack p,.gs-demo{margin:0}
  .gs-send-in{grid-template-columns:minmax(0,1fr)}
  .gs-recap dl>div{grid-template-columns:minmax(0,1fr)}
  .gs-svc{grid-template-columns:30px 24px minmax(0,1fr);gap:4px 10px;padding:14px}
  .gs-svc h3{font-size:1.1875rem}
}
@media(prefers-reduced-motion:reduce){.gs *{transition:none!important}}