/* Guida al segnale: shared styles. No external fonts or libraries. */
:root{
  --page-width:940px;
  --bg:#f5f5f7; --paper:#ffffff; --ink:#1d1d1f; --muted:#5f5f66; --faint:#6a6a6f;
  --line:#e5e5ea; --line-strong:#d2d2d7; --accent:#0066cc;
  /* Brand: one blue, only for actions and links, on neutral greys; amber only for promotions. */
  --brand:#0066cc; --on-brand:#ffffff; --brand-soft:#e8f0fb; --brand-line:#c6dcf5; --hi:#a8540b; --hi-soft:#fbecd9;
  --ok:#3b754e; --ok2:#2a5a3b; --warn:#866423; --bad:#a94c45; --bad2:#8c3f3a;
  --code:#f0f0f3;
  /* Fields, chips and segmented controls: a fill of their own, so in the dark theme they are not
     black holes inside grey cards. */
  --field:#f5f5f7; --field-line:#d2d2d7; --seg-on:#ffffff;
  /* Headings and big numbers: the system sans with tight tracking, as on the home page. */
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Surfaces: white sheets lifted by a soft shadow instead of a border; in the dark theme
     shadows do not read on black, so surfaces separate by their own lighter grey. */
  --lift:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.12);
  --lift-hover:0 1px 2px rgba(0,0,0,.05),0 14px 32px -14px rgba(0,0,0,.2);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#000000;--paper:#1c1c1e;--ink:#f5f5f7;--muted:#a1a1a6;--faint:#8e8e93;
    --line:#2c2c2e;--line-strong:#3a3a3c;--accent:#2997ff;--brand:#2997ff;--on-brand:#000000;--brand-soft:#0d2036;--brand-line:#1c3d63;--hi:#f0b45b;--hi-soft:#33270f;
    --ok:#6aa77f;--ok2:#9ccaa9;--warn:#d2a24e;--bad:#cf6f67;--bad2:#c4756f;--code:#242426;--field:#262628;--field-line:#48484a;--seg-on:#3a3a3c;--lift:none;--lift-hover:none;color-scheme:dark;}
}
:root[data-theme="dark"]{--bg:#000000;--paper:#1c1c1e;--ink:#f5f5f7;--muted:#a1a1a6;--faint:#8e8e93;
  --line:#2c2c2e;--line-strong:#3a3a3c;--accent:#2997ff;--brand:#2997ff;--on-brand:#000000;--brand-soft:#0d2036;--brand-line:#1c3d63;--hi:#f0b45b;--hi-soft:#33270f;
  --ok:#6aa77f;--ok2:#9ccaa9;--warn:#d2a24e;--bad:#cf6f67;--bad2:#c4756f;--code:#242426;--field:#262628;--field-line:#48484a;--seg-on:#3a3a3c;--lift:none;--lift-hover:none;color-scheme:dark;}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color .45s ease,color .45s ease;}
a{color:var(--accent);text-underline-offset:2px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* shell */
.skip{position:absolute;left:16px;top:-64px;z-index:10;padding:10px 16px;border-radius:8px;background:var(--brand);color:var(--on-brand);font-weight:600;text-decoration:none;}
.skip:focus{top:12px;outline:2px solid var(--accent);outline-offset:2px;}
/* Frosted glass: what scrolls under the header shows through, blurred (owner's request). */
.site-head{position:sticky;top:0;z-index:15;background:color-mix(in srgb,var(--bg) 60%,transparent);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);transition:border-color .45s ease,background-color .45s ease;}
/* Anchors land below the fixed header. */
html{scroll-padding-top:76px;}
.site-head .in{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px;}
.brand{font-weight:700;letter-spacing:-.2px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px;}
.brand .mark{display:inline-flex;align-items:flex-end;gap:2px;height:16px;}
.brand .mark i{display:block;width:3px;background:currentColor;border-radius:1px;}
.brand .mark i:nth-child(1){height:6px;}.brand .mark i:nth-child(2){height:10px;}.brand .mark i:nth-child(3){height:16px;}
.site-head nav{margin-left:auto;font-size:14px;}
.site-head nav a{color:var(--muted);text-decoration:none;}
/* The text links of the header are as easy to tap as the buttons. */
.site-head nav .nav-guides{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;}
.site-head nav a:hover{color:var(--ink);}
.site-head nav{display:flex;align-items:center;gap:18px;white-space:nowrap;}
.brand{white-space:nowrap;}
/* Phones: «Guide» instead of «Tutte le guide», so the guides stay one tap away. */
.site-head nav .nav-short{display:none;}
@media (max-width:440px){.site-head nav .nav-long{display:none;}.site-head nav .nav-short{display:inline;}.site-head nav{gap:12px;}}
@media (max-width:380px){.site-head nav .nav-guides{display:none;}}
.site-head nav .nav-sim{color:var(--on-brand);background:var(--brand);font-weight:600;padding:7px 13px;border-radius:8px;}
.site-head nav .nav-sim:hover{color:var(--on-brand);background:color-mix(in srgb,var(--brand) 85%,var(--ink));}
.theme-toggle{font:inherit;font-size:18px;line-height:1;color:var(--muted);background:none;border:0;width:44px;height:44px;margin:-5px -10px -5px auto;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .15s;}
.site-head nav + .theme-toggle{margin-left:2px;}
.theme-toggle:hover{color:var(--ink);}
.theme-toggle:active{transform:translateY(1px);}
.theme-toggle .theme-icon{display:inline-flex;width:19px;height:19px;line-height:1;}
.theme-toggle .theme-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.theme-toggle .theme-icon svg circle{fill:currentColor;stroke:none;}
.theme-toggle .theme-icon svg.theme-moon{transform:translate(1.4px,-1.3px);}
.theme-toggle .theme-label{display:none;}
@media (max-width:520px){.site-head .in{gap:10px;}.site-head nav{font-size:13px;}}
main{max-width:var(--page-width);margin:0 auto;padding:28px 20px 64px;}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:18px;}
/* The path bar on the tool pages: the four steps in a row, the current one filled in blue, the
   ones already done with a tick in place of the number. On phones the label goes under it. */
.gs-steps{margin:-4px 0 22px;}
.gs-now{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--muted);}
.gs-steps ol{list-style:none;margin:0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.gs-steps li{margin:0;}
.gs-steps a{display:flex;align-items:center;gap:8px;height:100%;min-height:44px;padding:8px 12px;border-radius:12px;background:var(--paper);box-shadow:var(--lift);color:var(--ink);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;}
.gs-steps a:hover{box-shadow:var(--lift-hover);}
.gs-n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);font-size:13px;font-variant-numeric:tabular-nums;}
.gs-steps li.done .gs-n{border-color:var(--brand);background:var(--brand);color:var(--on-brand);font-size:0;}
.gs-steps li.done .gs-n::after{content:"✓";font-size:13px;}
.gs-steps a[aria-current="step"]{background:var(--brand);color:var(--on-brand);box-shadow:none;}
.gs-steps a[aria-current="step"] .gs-n{border-color:currentColor;}
:root[data-theme="dark"] .gs-steps a:not([aria-current]){box-shadow:inset 0 0 0 1px var(--line-strong);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gs-steps a:not([aria-current]){box-shadow:inset 0 0 0 1px var(--line-strong);}}
@media (max-width:560px){
  .gs-steps ol{gap:6px;}
  .gs-steps a{flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;font-size:13px;text-align:center;}
}
.crumbs a{color:var(--faint);}

/* article typography */
h1{font-family:var(--display);font-size:clamp(30px,5vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance;}
h2{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:52px 0 12px;text-wrap:balance;}
h3{font-family:var(--display);font-size:19px;letter-spacing:-.01em;line-height:1.3;margin:30px 0 6px;}
p{margin:0 0 16px;max-width:68ch;}
/* A closing line that reads better whole: no measure limit, so it stays on one line where the page is wide enough. */
.one-line{max-width:none;}
ul,ol{max-width:66ch;padding-left:22px;margin:0 0 16px;}
li{margin:4px 0;}
.meta{font-size:13.5px;color:var(--faint);margin-bottom:26px;}
/* The opening answer reads like the home's lede: larger grey text, no quote bar. */
.answer{font-size:20px;line-height:1.5;color:var(--muted);margin:0 0 28px;max-width:40em;text-wrap:pretty;}
code,.mono{font-family:var(--mono);font-size:.9em;}
code{background:var(--code);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere;transition:background-color .45s ease;}
.num{font-variant-numeric:tabular-nums;}
abbr{text-decoration:underline dotted;text-underline-offset:3px;cursor:help;}

/* tables */
.tbl{overflow-x:auto;margin:6px 0 20px;}
.tbl td code{white-space:nowrap;}
table{border-collapse:collapse;width:100%;font-size:15px;}
th{text-align:left;font-size:12px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;padding:0 12px 8px 0;border-bottom:1px solid var(--line-strong);}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;}
td.num{font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap;}
/* Tables marked tbl-stack: on a phone one card per row, each value under its column heading
   (data-k, written by the build), so the last column is never cut off. */
@media (max-width:560px){
  .tbl-stack{overflow:visible;}
  .tbl-stack table,.tbl-stack tbody,.tbl-stack td{display:block;}
  .tbl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .tbl-stack tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line);}
  .tbl-stack td{padding:0;border:0;}
  .tbl-stack td:first-child,.tbl-stack td:last-child{grid-column:1/-1;}
  .tbl-stack td:first-child{font-weight:600;}
  .tbl-stack td:not(:first-child)::before{content:attr(data-k);display:block;margin-bottom:2px;font-family:var(--sans);font-size:12.5px;color:var(--muted);}
}
@media (max-width:520px){table{font-size:14px;}th,td{padding-right:8px;}td.num{font-size:13px;}}

/* quality words */
.q-excellent{color:var(--ok2);} .q-good{color:var(--ok);} .q-fair{color:var(--warn);}
.q-poor{color:var(--bad);} .q-very_poor{color:var(--bad2);}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:0;}

/* boxes */
.box{background:var(--paper);border:0;border-radius:16px;box-shadow:var(--lift);padding:18px 20px;margin:20px 0 26px;transition:background-color .45s ease;}
.start-box ul{margin:4px 0 12px;padding-left:20px;}
.start-box li{margin:6px 0;}
.box h3{margin-top:0;}
.flush{margin:0;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:12px 0;}
.stat-grid .stat{margin:0;padding:10px 12px;border-radius:12px;background:var(--field);box-shadow:none;}
.stat-grid .stat .meta{margin:0 0 2px;}
.stat-grid .stat strong{display:block;font:700 22px/1.15 var(--display);font-variant-numeric:tabular-nums;}
/* Speed test result: three headline numbers, then two wide cards, then one line of details. */
.ms-res .ms-main{grid-template-columns:repeat(3,minmax(0,1fr));}
.ms-res .ms-main .stat strong{font-size:26px;}
.ms-res .ms-pair{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;}
.ms-res .ms-pair .stat .meta:last-child{margin-top:4px;line-height:1.45;}
.stat-unit{font-size:14px;font-weight:600;color:var(--muted);}
.grade-chip{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;margin-left:8px;padding:0 6px;border-radius:7px;border:1.5px solid currentColor;font:700 15px/1 var(--sans);vertical-align:4px;}
.ms-meta{margin:4px 0 0;max-width:none;font-size:14px;color:var(--muted);}
.ms-res .stat strong{white-space:nowrap;}
@media (max-width:560px){.ms-res .ms-main{grid-template-columns:1fr 1fr;}.ms-res .ms-main .stat:nth-child(3){grid-column:1 / -1;}.ms-res .ms-main .stat strong{font-size:23px;}.ms-res .ms-pair{grid-template-columns:1fr;}}
#msForm fieldset label{display:block;}
#msForm legend{font-size:15px;}
.ms-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
#msForm select,#msForm input[type=text],.ms-fields .mw-label > select{display:block;width:100%;font-weight:400;}
/* Speedometer of the speed test. */
.ms-gauge{position:relative;max-width:420px;margin:6px auto 0;text-align:center;}
/* The speed test's hint as a small tip at the top left of the panel; a warning keeps its colour. */
.ms-hint{max-width:none;margin:0 0 16px;font-size:14.5px;line-height:1.45;color:var(--muted);}
.ms-hint::before{content:"Suggerimento";display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);}
.ms-hint.ms-warn{max-width:none;padding:10px 12px;border-radius:8px;background:var(--hi-soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--hi);}
.ms-hint.ms-warn::before{content:"Attenzione";color:inherit;}
.ms-confirm{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;font-size:15px;line-height:1.45;cursor:pointer;}
.ms-confirm input{flex:none;width:20px;height:20px;margin:1px 0 0;}
.ms-confirm.ms-need{display:grid;grid-template-columns:20px 1fr;gap:6px 10px;padding:10px 12px;border:2px solid var(--warn);border-radius:10px;}
.ms-confirm.ms-need::after{content:"Spunta questa casella per avviare la misura.";grid-column:1/-1;color:var(--warn);font-weight:600;}
.ms-gauge svg{display:block;width:100%;height:auto;overflow:visible;}
.g-track,.g-fill{fill:none;stroke-width:16;stroke-linecap:round;}
.g-track{stroke:var(--line);}
.g-fill{stroke:var(--accent);}
.g-ticks line{stroke:var(--faint);stroke-width:2;stroke-linecap:round;}
.g-ticks text{fill:var(--muted);font-family:var(--sans);font-size:12px;text-anchor:middle;}
.g-needle path{fill:var(--ink);}
.g-needle circle{fill:var(--ink);stroke:var(--paper);stroke-width:4;}
.g-read{position:relative;margin-top:-13%;display:flex;flex-direction:column;align-items:center;line-height:1.1;pointer-events:none;}
.g-read b{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(34px,8vw,46px);font-variant-numeric:tabular-nums;}
.g-read span{font-size:14px;color:var(--muted);}
.g-read em{margin-top:4px;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.g-sum{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0;border-top:1px solid var(--line);}
.g-sum div{padding:10px 6px 0;}
.g-sum div + div{border-left:1px solid var(--line);}
.g-sum dt{font-size:13px;color:var(--muted);}
.g-sum dd{margin:2px 0 0;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;}
.ms-actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}
.mw-label{display:block;font-weight:600;}
input + .mw-label{margin-top:6px;}
input[type=range] + .mw-top{margin-top:12px;}
.method-box{border:0;border-radius:16px;box-shadow:var(--lift);padding:18px 20px;background:var(--paper);}
.method-box > .label{display:inline-block;margin-bottom:10px;padding:2px 10px;border:1px solid var(--line-strong);border-radius:99px;color:var(--muted);letter-spacing:.4px;}
.method-box p:last-child{margin-bottom:0;}
.box .label{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
details.deep{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0;padding:4px 0;}
details.deep > summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;padding:12px 0;list-style:none;}
details.deep > summary::-webkit-details-marker{display:none;}
details.deep > summary::before{content:"+";flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:19px;font-weight:500;line-height:1;color:var(--faint);}
details.deep[open] > summary::before{content:"\2212";}
.formula{font-family:var(--mono);background:var(--code);border-radius:8px;padding:10px 14px;margin:8px 0 16px;overflow-x:auto;white-space:nowrap;transition:background-color .45s ease;}
.guide-figure{margin:28px 0 30px;padding:16px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.guide-figure svg{display:block;width:100%;height:auto;color:var(--ink);}
/* Wide diagrams get a stacked twin for phones, so labels keep a readable size. */
figure svg.fig-narrow{display:none;max-width:420px;margin:0 auto;}
@media (max-width:560px){figure svg.fig-wide{display:none;}figure svg.fig-narrow{display:block;}}
/* Packets travelling in the HTTP 204 figure; --d is half the path, signed. */
.pkt-go{animation:pkt-go 5s ease-in-out infinite;}
.pkt-back{animation:pkt-back 5s ease-in-out infinite;}
.pkt-go-v{animation:pkt-go-v 5s ease-in-out infinite;}
.pkt-back-v{animation:pkt-back-v 5s ease-in-out infinite;}
@keyframes pkt-go{0%{transform:translateX(calc(var(--d) * -1));opacity:0}6%,38%{opacity:1}44%,100%{transform:translateX(var(--d));opacity:0}}
@keyframes pkt-back{0%,50%{transform:translateX(calc(var(--d) * -1));opacity:0}56%,88%{opacity:1}94%,100%{transform:translateX(var(--d));opacity:0}}
@keyframes pkt-go-v{0%{transform:translateY(calc(var(--d) * -1));opacity:0}6%,38%{opacity:1}44%,100%{transform:translateY(var(--d));opacity:0}}
@keyframes pkt-back-v{0%,50%{transform:translateY(calc(var(--d) * -1));opacity:0}56%,88%{opacity:1}94%,100%{transform:translateY(var(--d));opacity:0}}
@media (prefers-reduced-motion:reduce){.pkt{animation:none !important;}}
.guide-figure figcaption{font-size:14px;color:var(--muted);padding:10px 0 14px;max-width:66ch;}
.next{display:block;border:0;box-shadow:var(--lift);border-radius:16px;padding:16px 20px;margin:40px 0 0;text-decoration:none;color:var(--ink);background:var(--paper);transition:background-color .45s ease,border-color .45s ease,color .45s ease;}
.next:hover{box-shadow:var(--lift-hover);}
.next:hover b{color:var(--accent);}
.next small{display:block;color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
.next b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.015em;}
.next span{display:block;color:var(--muted);font-size:15px;margin-top:4px;}
.sources{font-size:14px;color:var(--muted);}
.sources li{margin:3px 0;}

/* dBm slider widget */
.meter-widget{user-select:none;}
.wide{max-width:none;}
/* The advisor's head: what the tool is called, the question, and a way down to the guide. */
.sim-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;margin-bottom:14px;}
.sim-tag{flex-basis:100%;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);}
.sim-title{margin:0;max-width:none;font:700 clamp(24px,5vw,30px)/1.2 var(--display);letter-spacing:-.02em;}
.sim-help{margin-left:auto;font-size:15px;font-weight:600;user-select:text;}
#simAdvisor p{max-width:none;}
/* SIM advisor: one field per cell, label above the menu, as in the speed test. */
/* The advisor's questions as a list: title and hint on the left, the menu on the right, one row
   each; on a phone the menu goes under its question. A three-column grid pushed the menus far
   below the shorter questions. */
#simForm{display:block;}
#simForm label{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);align-items:center;column-gap:28px;padding:14px 0;border-top:1px solid var(--line);}
#simForm label:first-of-type{border-top:0;padding-top:4px;}
#simForm select{display:block;width:100%;font-weight:400;}
.q-text{display:block;}
.q{display:block;font-weight:600;font-size:16px;}
.q-hint{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--muted);line-height:1.4;}
@media (max-width:560px){#simForm label{grid-template-columns:1fr;row-gap:8px;}}
#simNote p{margin:0 0 6px;max-width:none;}
#simNote p:last-child{margin-bottom:0;}
.mw-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.mw-val{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.mw-val small{font-size:15px;color:var(--faint);font-weight:400;}
.mw-word{font-size:20px;font-weight:700;}
.mw-scale{position:relative;height:10px;border-radius:5px;overflow:hidden;display:flex;margin:6px 0 4px;}
.mw-scale span{height:100%;}
.mw-ticks{position:relative;height:16px;font-family:var(--mono);font-size:11px;color:var(--faint);}
.mw-ticks span{position:absolute;transform:translateX(-50%);}
.mw-ticks span:first-child{transform:none;} .mw-ticks span:last-child{transform:translateX(-100%);}
input[type=range]{width:100%;margin:14px 0 6px;accent-color:var(--brand);height:26px;}
.mw-power{font-size:15px;color:var(--muted);margin:8px 0 0;}
#simNote{margin-top:12px;line-height:1.5;}
.mw-sources{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;}
.mw-lin{height:18px;border-radius:5px;background:var(--code);border:1px solid var(--line);overflow:hidden;margin:6px 0 4px;}
.mw-lin-fill{height:100%;min-width:2px;opacity:.75;transition:width .12s ease-out;}
.mw-lin-ticks span:first-child{transform:translateX(-50%);}
.mw-sources .meta{margin-top:8px;}
@media (prefers-reduced-motion:reduce){.mw-lin-fill{transition:none;}}

/* text toggles and form controls */
/* Tabs as a segmented control, the same as the home showcase: one look for «chosen». */
.toggle{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:14px;background:var(--code);}
.toggle button{font:inherit;font-size:15px;font-weight:600;color:var(--muted);background:none;border:0;border-radius:11px;padding:8px 14px;min-height:40px;cursor:pointer;transition:color .15s,background-color .15s;}
.toggle button:hover{color:var(--ink);}
.toggle button.on{color:var(--ink);background:var(--seg-on);box-shadow:0 1px 3px rgba(0,0,0,.12);}
@media (max-width:560px){.toggle{display:grid;grid-template-columns:1fr 1fr;width:100%;}.toggle button{padding:8px 6px;font-size:14.5px;}}
.tbtn{font:inherit;font-weight:600;background:none;cursor:pointer;}
form fieldset{border:0;padding:0;margin:0;}
form legend{font-size:15px;font-weight:600;margin-bottom:6px;}
fieldset.inline label{display:inline-block;white-space:nowrap;}
fieldset.inline label + label{margin-left:14px;}
.form-grid{display:grid;gap:14px;}
.az-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 16px;margin-bottom:16px;}
.az-grid label{display:block;font-weight:600;}
.az-grid .meta{font-weight:400;}
.az-grid label > select,.az-grid label > input{display:block;width:100%;font-weight:400;}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;}
.choice label{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 14px;border:1px solid var(--field-line);border-radius:10px;background:var(--field);font-weight:500;line-height:1.3;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s;}
.choice label:hover{border-color:var(--accent);}
.choice label:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--paper);}
.choice input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent);}
.choice svg{flex:none;width:30px;height:30px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.choice label:has(input:checked) svg{stroke:var(--accent);}
.tool-out{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
details.reveal > summary{cursor:pointer;color:var(--accent);}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:8px;padding:8px 14px;min-height:44px;cursor:pointer;transition:background-color .15s,border-color .15s,transform .1s;}
.btn:hover{background:var(--code);border-color:var(--accent);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.rf-card:focus{outline:none;}
.rf-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
input[type=number],input[type=text],select{font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:8px;padding:8px 10px;min-height:44px;margin-top:4px;transition:background-color .45s ease,border-color .45s ease,color .45s ease;}
input[type=number]:focus,input[type=text]:focus,select:focus{border-color:var(--accent);}
input[type=number]:focus-visible,input[type=text]:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
input[type=radio],input[type=checkbox]{accent-color:var(--brand);}
input[type=file]{font:inherit;font-size:14px;color:var(--muted);}
#azInput::file-selector-button{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:8px;padding:5px 9px;margin-right:10px;cursor:pointer;transition:background-color .15s,border-color .15s,transform .1s;}
#azInput::file-selector-button:hover{background:var(--code);border-color:var(--accent);}
#azInput::file-selector-button:active{transform:translateY(1px);}
label{font-size:15px;}

/* chart */
.chart svg{display:block;width:100%;height:auto;}
.chart figcaption{font-size:13.5px;color:var(--faint);margin-top:6px;}

.site-foot{border-top:1px solid var(--line);font-size:13px;color:var(--faint);transition:border-color .45s ease,color .45s ease;}
.site-foot .in{max-width:var(--page-width);margin:0 auto;padding:18px 20px 30px;}
@media (max-width:640px){.foot-sep{display:none;}.foot-site,.foot-links,.foot-note,.foot-trial{display:block;}.foot-links{margin:4px 0;white-space:nowrap;font-size:min(13px,3.25vw);}}

@media (prefers-reduced-motion:reduce){
  body,.site-head,.box,.formula,.next,code,input[type=number],select,.site-foot{transition:none;}
}

/* index list */

/* Home */
.home{padding-top:0;}
/* The hero fills the first screen: what the site does, the two SIM buttons, the four tools.
   The home page is wider than the guides, header included, so the hero has room. */
:root:has(main.home){--page-width:1120px;}
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy demo" "more more";gap:0 56px;align-items:center;align-content:center;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);padding:16px 0 20px;}
.hero-copy{grid-area:copy;}
/* A flat brand band behind the hero, edge to edge: the shadow paints it without widening the page. */
.hero{background:var(--brand-soft);box-shadow:0 0 0 100vmax var(--brand-soft);clip-path:inset(0 -100vmax);}
.hero .eyebrow{font-size:17px;font-weight:600;color:var(--accent);margin:0 0 14px;}
.hero h1{font-size:clamp(36px,4.6vw,54px);line-height:1.03;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance;}
.eyebrow{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--muted);margin:0 0 10px;}
.lede{font-size:20px;line-height:1.5;color:var(--muted);max-width:44ch;margin:0 0 24px;text-wrap:pretty;}

/* Showcase: the cheapest router offers from the catalog, rebuilt with the site. */
.hero-show{grid-area:demo;background:var(--paper);border:1px solid var(--line-strong);border-radius:18px;padding:22px 24px 18px;box-shadow:0 1px 0 var(--line),0 24px 48px -32px rgba(27,26,23,.35);}
.show-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:8px;}
.show-head h2{margin:0;font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:0;line-height:1.3;}
/* Router or phone: two radio buttons switch the list, no script needed. */
.show-tabs{display:inline-flex;padding:3px;border-radius:999px;background:var(--code);}
.show-tabs input{position:absolute;width:1px;height:1px;opacity:0;}
.show-tabs label{padding:5px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;}
.show-tabs input:checked + label{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12);}
.show-tabs input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;}
.show-note{margin:0 0 4px;font-size:14px;color:var(--muted);}
.show-phone{display:none;}
.hero-show:has(#showPhone:checked) .show-phone{display:block;}
.hero-show:has(#showPhone:checked) .show-router{display:none;}
/* Browsers without :has cannot switch: they show both lists, without the switch. */
@supports not selector(:has(a)){.show-phone{display:block;margin-top:18px;}.show-tabs{display:none;}}
.show-list{list-style:none;counter-reset:show;margin:0;padding:0;max-width:none;}
.show-list li{counter-increment:show;display:grid;grid-template-columns:20px 78px minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;padding:13px 0;border-top:1px solid var(--line);}
.show-list li::before{content:counter(show);font-size:14px;font-weight:700;color:var(--faint);}
.show-list li:first-child{border-top:0;}
.show-logo{display:flex;align-items:center;justify-content:center;height:32px;padding:0 6px;border-radius:8px;}
.show-logo img{display:block;max-width:60px;max-height:22px;}
.show-badge{font-size:12px;font-weight:700;color:var(--ink);text-align:center;line-height:1.1;}
.show-name b{display:block;font-size:15.5px;line-height:1.3;}
.show-name small,.show-price small{display:block;font-size:13.5px;color:var(--muted);}
.show-price{text-align:right;white-space:nowrap;}
.show-price b{display:block;font-variant-numeric:tabular-nums;font-family:var(--display);font-size:21px;line-height:1.15;}
.show-list li:first-child .show-price b{color:var(--brand);}
.show-all{display:flex;justify-content:center;margin-top:10px;padding:12px;border-radius:10px;background:var(--code);font-weight:600;text-decoration:none;}
.show-all:hover{background:var(--line);}
.show-all span{margin-left:6px;}
@media (max-width:560px){
  .hero-show{padding:18px 16px 14px;}
  .show-list li{grid-template-columns:68px minmax(0,1fr);gap:4px 12px;}
  .show-list li::before{display:none;}
  .show-logo{grid-row:span 2;}
  .show-price{display:flex;align-items:baseline;gap:8px;text-align:left;}
  .show-price b{font-size:19px;}
}

.hero-more{grid-area:more;justify-self:center;display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 14px;border-radius:999px;color:var(--accent);font-size:17px;font-weight:600;text-decoration:none;transition:background-color .15s;}
.hero-more:hover{background:var(--code);}
.hero-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* Understanding the signal: the second screen of the home page. */
.signal{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px 64px;align-items:start;margin:24px 0 8px;padding:56px 0;border-top:1px solid var(--line-strong);}
.signal h2{margin:0 0 16px;font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;}
.signal-lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:52ch;margin:0 0 26px;}
.signal-points{list-style:none;counter-reset:pt;margin:0 0 30px;padding:0;max-width:56ch;}
.signal-points li{counter-increment:pt;position:relative;margin:0;padding:14px 0 14px 48px;border-top:1px solid var(--line);font-size:17px;line-height:1.55;}
.signal-points li::before{content:counter(pt);position:absolute;left:0;top:14px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--brand);color:var(--brand);border-radius:50%;font-size:14px;font-weight:700;}
.signal-points b{display:block;font-size:18px;}
.signal-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;}
.signal-cta .btn-primary{font-size:17px;padding:13px 22px;border-radius:10px;}
.signal-guides{list-style:none;display:grid;gap:12px;align-self:end;margin:0;padding:0;max-width:none;}
.signal-guides li{margin:0;}
.signal-guides a{display:block;padding:18px 20px;border:1px solid var(--line-strong);border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s;}
.signal-guides a:hover{border-color:var(--accent);transform:translateY(-1px);}
.signal-guides a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.signal-guides span{display:block;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:4px;}
.signal-guides b{display:block;font-family:var(--display);font-size:20px;line-height:1.25;}
.signal-guides small{display:block;margin-top:4px;font-size:15px;color:var(--muted);}
@media (max-width:820px){.signal{grid-template-columns:1fr;padding:40px 0;}}
.hero-trust{list-style:none;display:grid;gap:6px;margin:20px 0 0;padding:0;max-width:520px;}
/* Under the two SIM choices: what the path is, and a way straight to the offers. */
/* A sentence that must start on its own line, whatever the width (asked by the owner). */
.new-line{display:block;}
.wide{max-width:none;}
.hero-trust li{position:relative;margin:0;padding-left:28px;font-size:15.5px;line-height:1.45;color:var(--muted);}
.hero-trust li::before{content:"";position:absolute;left:2px;top:4px;width:14px;height:8px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);}
.hero-trust b{color:var(--ink);font-weight:600;}
.btn-primary{display:inline-flex;align-items:center;background:var(--brand);border-color:var(--brand);color:var(--on-brand);text-decoration:none;padding:10px 18px;}
.btn-primary:hover{background:color-mix(in srgb,var(--brand) 85%,var(--ink));border-color:color-mix(in srgb,var(--brand) 85%,var(--ink));color:var(--on-brand);}
.link-arrow{font-weight:600;text-decoration:none;}
.link-arrow:hover{text-decoration:underline;text-underline-offset:3px;}
.section-intro{color:var(--muted);font-size:16px;line-height:1.55;margin:0;}
.index{margin-top:56px;}
.index section{display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px 40px;padding:30px 0;border-top:1px solid var(--line);}
.index h2{margin:0 0 10px;font-size:clamp(28px,3.4vw,34px);}
.index-head{align-self:center;text-align:center;}
.index-head .section-intro{font-size:17px;line-height:1.5;color:var(--ink);}
.ic{display:block;width:30px;height:30px;margin:0 auto 12px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.guides{list-style:none;padding:0;margin:-8px 0 0;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px;}
.guides li{margin:0;}
.guides a{display:block;height:100%;margin:0 -12px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;transition:background-color .15s;}
.guides a:hover{background:var(--paper);}
.guides a:hover b{color:var(--accent);}
.guides a:focus-visible{outline:2px solid var(--accent);outline-offset:0;}
.guides b{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.3;}
.guides small{display:block;margin-top:5px;color:var(--muted);font-size:15.5px;line-height:1.45;}
.home-method{margin:52px 0 20px;padding:28px 0;border-top:1px solid var(--line-strong);}
.home-method h2{margin:0 0 8px;}
.home-method .home-method-intro{max-width:62ch;margin:0;color:var(--muted);}
.home-method .trust{margin-top:22px;}
.home-method .trust li{padding-top:12px;border-top:1px solid var(--line);}
.home-method .trust b{font-family:var(--sans);font-size:16px;}
.home-method-link{margin:20px 0 0;font-weight:600;}
@media (max-width:820px){
  .index section{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .hero .hero-choice{padding:18px 52px 18px 20px;}
  .hero .hero-choice b{font-size:20px;}
  .hero .hero-choice span{font-size:15px;}
  .guides{grid-template-columns:1fr;}
  .guides{margin-top:4px;}
}
@media (prefers-reduced-motion:reduce){.steps a,.guides a{transition:none;}.steps a:hover{transform:none;}}

/* SIM offer comparison */
.of-count{color:var(--muted);font-size:15px;margin:22px 0 10px;max-width:none;}
.of-choose{margin:22px 0;padding:18px 20px;border-radius:12px;background:var(--paper);box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.08));font-size:17px;max-width:none;}
.of-widen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:none;margin:0 0 16px;}
.of-help{margin:-6px 0 18px;font-size:15.5px;}
.of-disclaimer{margin:16px 0 4px;padding:12px 14px;border-radius:12px;background:var(--code);font-size:14.5px;color:var(--muted);}
.of-disclaimer p{max-width:none;margin-top:8px !important;}
.of-disclaimer summary{cursor:pointer;}
.of-disclaimer strong{color:var(--ink);}
.of-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"rank head cost" "rank details cost";grid-template-rows:auto 1fr;gap:4px 16px;align-items:start;padding:16px 0;border-top:1px solid var(--line);}
.of-rank{grid-area:rank;font-family:var(--display);font-size:22px;color:var(--faint);line-height:1.2;}
.of-head{grid-area:head;min-width:0;}
.of-head h3{margin:0;font-size:18px;line-height:1.3;}
.of-data{margin:3px 0 0;font-size:15px;font-weight:600;}
.of-flags{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px;}
.of-cost{grid-area:cost;display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;}
.of-cost strong{font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.of-cost > span{color:var(--muted);font-size:13.5px;line-height:1.3;}
.of-cost .of-year{margin-top:2px;color:var(--ink);font-weight:600;}
/* «Confronta» on each card, the bar that collects the choices and the side-by-side table. */
/* «Confronta» is a quiet toggle, not a second button: plus to add, tick when added. */
.of-pick{margin-top:4px;min-height:36px;padding:4px 2px;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.of-pick::before{content:"＋ ";}
.of-pick:hover{color:var(--accent);}
.of-pick[aria-pressed="true"]{color:var(--accent);}
.of-pick[aria-pressed="true"]::before{content:"✓ ";}
.of-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.of-pickbar{position:sticky;bottom:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 -20px;padding:12px 20px;background:var(--paper);border-top:1px solid var(--line-strong);box-shadow:0 -6px 18px rgba(0,0,0,.08);}
.of-pickbar span{flex:1 1 auto;font-weight:600;font-size:15px;}
.of-pickbar .btn{min-height:40px;padding:8px 14px;}
.of-pickbar .btn:disabled{opacity:.5;cursor:default;}
.of-compare{margin:18px 0 8px;padding:16px 0;border-top:2px solid var(--brand);scroll-margin-top:80px;}
.of-compare-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.of-compare-head h2{margin:0;}
/* Side by side: equal columns that always fit the screen, so every picked offer is in view. */
.of-compare table{table-layout:fixed;width:100%;}
.of-compare th{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);}
.of-compare th[scope="row"]{width:28%;padding:9px 12px 9px 0;vertical-align:top;text-align:left;font-weight:600;}
.of-compare td{overflow-wrap:break-word;}
.of-compare td .btn{width:100%;padding:9px 6px;white-space:normal;justify-content:center;text-align:center;}
@media (max-width:520px){.of-compare th[scope="row"]{width:27%;font-size:13px;}.of-compare td,.of-compare thead th{font-size:13px;}}
.of-compare thead th{vertical-align:bottom;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.of-go{margin-top:8px;padding:8px 14px;min-height:44px;font-size:14.5px;}
/* «Dettagli» sits at the bottom of the card's left column, level with «Vedi l'offerta», as plain
   text with an arrow; opened, its content grows under the offer while the price column stays put. */
.of-details{grid-area:details;align-self:end;}
.of-details[open]{align-self:start;}
.of-details summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 0;border:0;border-radius:8px;cursor:pointer;color:var(--ink);font-size:14.5px;font-weight:600;list-style:none;transition:background-color .15s,border-color .15s;}
.of-details summary:hover{color:var(--accent);}
.of-details[open] summary{margin-bottom:6px;}
.of-details summary::-webkit-details-marker{display:none;}
.of-details summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s;}
.of-details[open] summary::after{transform:rotate(-135deg) translateY(-1px);}
.of-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.of-facts{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5;}
.of-facts .on{color:var(--ink);font-weight:600;}
.of-note{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.45;}
.of-source{margin:6px 0 0;font-size:14px;}
.tag{display:inline-block;padding:0 6px;border:1px solid var(--line-strong);border-radius:4px;font-size:12.5px;font-weight:600;color:var(--muted);vertical-align:1px;}
.tag-warn{border-color:var(--warn);color:var(--warn);}
.tag-hi{border-color:transparent;background:var(--hi-soft);color:var(--hi);}
.tag-ok{border-color:transparent;background:var(--brand-soft);color:var(--brand);}
.of-need{margin:-4px 0 6px;font-size:14.5px;color:var(--muted);max-width:none;}
.of-reason{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted);}
.of-short{color:var(--ink);padding:10px 12px;border-radius:8px;background:var(--code);margin:6px 0 12px;}
@media (max-width:560px){
  .of-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head cost" "details cost";grid-template-rows:auto 1fr;gap:4px 12px;padding:14px 0;}
  /* On a phone the open details need the whole width: they move under the price column. */
  .of-card:has(.of-details[open]){grid-template-areas:"head cost" "details details";}
  .of-rank{display:none;}
  .of-head h3{font-size:16.5px;}
  .of-data{font-size:14px;}
  .of-head .of-logo{height:28px;margin-bottom:4px;}
  .of-head .of-logo img{height:20px;}
  .of-cost strong{font-size:21px;}
  .of-go{padding:6px 12px;min-height:40px;font-size:14px;}
}

/* Consent banner (assets/js/consent.js, off until site.json turns it on) */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:20;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 52px 16px 18px;background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 14px 34px -18px rgba(0,0,0,.45);}
.consent p{flex:1 1 320px;margin:0;font-size:15px;line-height:1.5;}
.consent-actions{display:flex;gap:8px;}
.consent-close{position:absolute;top:6px;right:6px;width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;}
.consent-close:hover{background:var(--code);color:var(--ink);}
.consent-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.next-step{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;}
.next-step p{flex:1 1 260px;}
.of-profile{margin:0;max-width:none;padding:10px 12px;border-radius:8px;background:var(--code);font-size:15px;}
.of-badge{display:inline-block;margin-bottom:6px;padding:3px 9px;border-radius:6px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.2px;}
.trust{list-style:none;padding:0;margin:4px 0 0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;}
.trust li{margin:0;font-size:15.5px;line-height:1.5;}
.trust b{display:block;font-family:var(--display);font-size:18px;margin-bottom:2px;}
@media (max-width:760px){.trust{grid-template-columns:1fr;}}

/* Glossary page and term bubbles */
.glossary{margin:24px 0 0;}
/* A–Z index of the glossary: one tap target per initial, wrapping on phones. */
.az-index{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0;}
.az-index a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:12px;background:var(--paper);box-shadow:var(--lift);color:var(--ink);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;}
.az-index a:hover{color:var(--accent);}
.glossary div{padding:18px 0;border-top:1px solid var(--line);scroll-margin-top:16px;}
.glossary div:target{background:var(--code);margin:0 -12px;padding:18px 12px;border-radius:8px;}
.glossary dt{font-family:var(--display);font-size:22px;font-weight:600;}
.glossary dd{margin:6px 0 0;}
.glossary dd p{margin:0 0 6px;max-width:66ch;}
.glossary-short{font-weight:600;}
/* A term must look like something to tap: dotted line plus a small circled question mark,
   the sign people already know for "explain this" (simulated users never noticed the line alone). */
.term{font:inherit;color:inherit;background:none;border:0;padding:0;border-bottom:1.5px dotted var(--accent);cursor:pointer;}
.term::after{content:"?";display:inline-block;width:1.25em;height:1.25em;margin-left:.2em;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:.75em;font-weight:700;line-height:1.25em;text-align:center;vertical-align:.3em;font-family:var(--sans,inherit);}
.term-keep{white-space:nowrap;}
/* Under every guide: the way to the advisor and the comparison. */
.guide-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:32px 0 24px;}
.guide-cta p{flex:1 1 320px;margin:0;}
.guide-cta .guide-cta-btns{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:10px;}
/* The analysis' privacy line: an «!» like the glossary's «?», under the tabs. */
.az-privacy{display:flex;align-items:center;gap:8px;margin:-6px 0 16px;font-size:14px;color:var(--muted);}
.az-excl{flex:none;display:inline-block;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:13px;font-weight:700;line-height:20px;text-align:center;font-family:var(--sans,inherit);}
.term:hover,.term[aria-expanded="true"]{color:var(--accent);}
.term:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
.term-pop{position:absolute;z-index:15;padding:14px 16px;background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 30px -16px rgba(0,0,0,.45);font-size:15px;line-height:1.5;}
.term-pop strong{display:block;font-family:var(--display);font-size:18px;margin-bottom:4px;}
.term-pop p{margin:0 0 8px;}
.term-pop a{font-weight:600;}


/* Home: guide sections separated by a line */
.index section{border-top:1px solid var(--line-strong);}
.guides a:hover{box-shadow:0 4px 14px -10px rgba(0,0,0,.35);}

/* SIM comparison filters */
.of-filters{margin:20px 0 8px;padding:20px 22px;border-radius:18px;background:var(--paper);box-shadow:var(--lift);display:grid;gap:16px;}
/* The filters in force in one line of words, with the button that opens the panel of filters. */
.of-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:14px;border-top:1px solid var(--line);}
/* The order stays outside the closed panel: «Più giga per euro» was the order one user wanted and never found. */
.of-sort-inline{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;}
.of-sort-inline select{width:auto;}
.of-summary p{flex:1 1 280px;max-width:none;font-size:15.5px;line-height:1.5;}
.of-summary .btn{min-height:40px;padding:8px 14px;margin-left:auto;}
.of-panel{display:grid;gap:16px;}
/* On a phone the two uses are clear by their names: the descriptions would push the offers down. */
@media (max-width:560px){.of-segment button small{display:none;}}
.of-filters > .of-profile{margin-top:-4px;}
/* After the list: the step that follows the choice of the SIM. */
.of-after{margin-top:28px;}
.of-packs{margin-top:36px;}
.of-packs h2{margin-bottom:6px;}
.of-origin-note{display:block;margin-top:4px;font-size:14px;color:var(--muted);}
.of-pack-intro{color:var(--muted);font-size:15px;margin:0 0 6px;max-width:68ch;}
/* The advice switch: a plain checkbox with its explanation beside it. */
.of-switch{display:flex;align-items:flex-start;gap:10px;font-size:15px;cursor:pointer;}
.of-switch input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--brand);}
.of-switch .meta{display:block;font-size:14px;}
.of-main-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;}
.of-main-filters .mw-label > select{display:block;width:100%;font-weight:400;}
.of-chips-label{display:block;font-weight:600;font-size:15px;margin-bottom:8px;}
.of-chips-label .meta{font-weight:400;}
.of-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:1px solid var(--field-line);border-radius:99px;background:var(--field);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;transition:background-color .15s,border-color .15s;}
.chip:hover{border-color:var(--accent);}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,var(--bg));border-color:var(--accent);font-weight:600;}
.chip[aria-pressed="true"]::before{content:"✓";color:var(--accent);font-weight:700;}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.chip-brand img{height:18px;width:auto;max-width:64px;padding:2px 4px;}
.of-filter-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;}
.of-filter-foot .meta{flex:1 1 300px;margin:0;}
.of-logo{display:inline-flex;align-items:center;height:34px;margin-bottom:8px;padding:5px 10px;border-radius:8px;}
.of-logo img{height:24px;width:auto;max-width:120px;display:block;}
@media (max-width:760px){.of-main-filters{grid-template-columns:1fr 1fr;}}
@media (max-width:420px){.of-main-filters{gap:10px 10px;}.of-filters{padding:16px;}}
/* Services and operators sit in a closed panel, so the first offers show sooner on a phone. */
.of-more > summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--accent);}
.of-more > summary span{color:var(--muted);font-weight:400;}
.of-more-in{display:grid;gap:16px;margin-top:14px;}
.of-notice{margin:14px 0 4px;font-size:14.5px;color:var(--muted);}
.of-notice strong{color:var(--ink);}
.of-segment{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.of-segment button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border:1.5px solid var(--field-line);border-radius:12px;background:var(--field);color:var(--ink);font:inherit;font-family:var(--display);font-size:20px;font-weight:600;text-align:left;cursor:pointer;}
.of-segment button small{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--muted);}
.of-segment button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--paper);}
.of-segment button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* The first card's label is information, not an action: ink, not the blue of buttons and links. */
.of-best{display:block;width:max-content;margin-bottom:8px;padding:2px 8px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:700;}
.of-go{margin-top:10px;}
@media (max-width:560px){.of-segment button{font-size:17px;padding:12px;}.of-go{margin-top:6px;}}
.hero-choices{display:grid;gap:12px;margin:0;max-width:520px;}
.hero-choice{position:relative;display:flex;flex-direction:column;gap:4px;padding:19px 64px 19px 26px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;transition:background-color .15s,border-color .15s,transform .1s;}
.hero-choice::after{content:"→";position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--accent);transition:transform .15s;}
.hero-choice:hover{border-color:var(--accent);}
.hero-choice:hover::after{transform:translate(5px,-50%);}
.hero-choice:active{transform:translateY(1px);}
.hero-choice:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.hero-choice b{font-size:23px;font-weight:700;line-height:1.2;}
.hero-choice span{font-size:16.5px;color:var(--muted);}
.hero-choice-main{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.hero-choice-main span{color:var(--on-brand);opacity:.85;}
.hero-choice-main::after{color:var(--on-brand);}
.hero-choice-main:hover{background:color-mix(in srgb,var(--brand) 85%,var(--ink));border-color:color-mix(in srgb,var(--brand) 85%,var(--ink));}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;grid-template-areas:"copy" "demo" "more";padding-top:12px;}
  .hero-show{margin-top:28px;}
  .hero-choices{max-width:none;}
}
@media (max-width:680px){
  .hero h1{font-size:clamp(36px,10vw,44px);}
  .hero .lede{font-size:17.5px;margin-bottom:22px;}
}
/* On a computer the offer cards have room: name, data line and labels a step larger. */
@media (min-width:900px){
  .of-head h3{font-size:21px;}
  .of-data{font-size:16.5px;}
  .of-flags .tag{font-size:13.5px;padding:1px 8px;}
  .of-logo{height:40px;}
  .of-logo img{height:28px;max-width:140px;}
  .of-cost strong{font-size:28px;}
  .of-cost > span{font-size:14.5px;}
  .of-facts{font-size:15.5px;}
  .of-note,.of-source{font-size:15px;}
  .of-best{font-size:13.5px;}
}

/* Home, quieter pass: neutral surfaces, one blue for actions, hierarchy from size, weight and
   space instead of colour. Headings use the system sans with tight tracking at large sizes. */
.home h1{font-weight:700;letter-spacing:-.035em;line-height:1.04;}
.home h2{font-weight:700;letter-spacing:-.022em;}
.hero{background:none;box-shadow:none;clip-path:none;}
.hero .eyebrow,.home .eyebrow{color:var(--muted);font-size:15px;font-weight:600;letter-spacing:.01em;}
.home .lede{color:var(--muted);}
/* The two SIM choices: one filled, one plain surface; no outlines. */
.hero-choice{border:0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px -8px rgba(0,0,0,.12);}
.hero-choice:hover{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 28px -10px rgba(0,0,0,.18);}
.hero-choice::after{color:var(--faint);}
.hero-choice-main::after{color:inherit;}
.hero-trust li::before{border-color:var(--faint);}
/* Showcase: a white sheet with a soft shadow, prices in ink, the link as plain text. */
.hero-show{border:0;border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 44px -18px rgba(0,0,0,.16);}
.show-list li:first-child .show-price b{color:inherit;}
.show-price b{font-weight:600;letter-spacing:-.01em;}
.show-all{background:none;color:var(--accent);padding:12px 0 2px;}
.show-all:hover{background:none;text-decoration:underline;text-underline-offset:3px;}
.signal{border-top-color:var(--line);}
.signal-points li::before{border-color:var(--line-strong);color:var(--ink);}
.signal-guides span{color:var(--muted);}
/* The guide groups' icons: blue lines on a pale blue disc, the one touch of colour in the index. */
.ic{box-sizing:border-box;width:56px;height:56px;padding:12px;border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,transparent);stroke:var(--accent);stroke-width:2.2;}
.signal-guides a{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.12);}
.signal-guides a:hover{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 32px -14px rgba(0,0,0,.2);}
.signal-guides b,.guides b{font-weight:600;letter-spacing:-.01em;}
/* Dark: shadows do not read on black, so surfaces separate by their own lighter grey. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .home :is(.hero-choice,.hero-show,.signal-guides a,.steps a){box-shadow:none;}}
:root[data-theme="dark"] .home :is(.hero-choice,.hero-show,.signal-guides a,.steps a){box-shadow:none;}
/* Four steps right after the hero: the site's tools in order, each card opens one. */
.path{margin-top:8px;padding:48px 0 8px;border-top:1px solid var(--line);}
.path h2{margin:0 0 8px;font-size:clamp(30px,4.4vw,42px);}
.path-intro{margin:0 0 24px;max-width:62ch;font-size:18px;line-height:1.5;color:var(--muted);}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;max-width:none;counter-reset:step;}
.steps li{margin:0;counter-increment:step;}
.steps a{display:flex;flex-direction:column;gap:10px;height:100%;padding:20px;border-radius:18px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.12);transition:box-shadow .2s,transform .2s;}
.steps a::before{content:counter(step);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-strong);font-family:var(--display);font-weight:600;font-size:16px;}
.steps a:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 32px -14px rgba(0,0,0,.2);}
.steps a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.steps svg{display:block;width:100%;max-width:220px;height:auto;margin:6px 0 4px;color:var(--ink);}
.steps b{font-family:var(--display);font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.015em;}
.steps a > span{font-size:15.5px;line-height:1.5;color:var(--muted);}
.steps a > .go{margin-top:auto;padding-top:2px;color:var(--accent);font-weight:600;font-size:15px;}
.path-after{margin:18px 0 0;font-size:16px;color:var(--muted);}
@media (max-width:980px) and (min-width:681px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:680px){
  .steps{grid-template-columns:1fr;gap:12px;}
  .steps a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 14px;padding:16px;}
  .steps a::before{grid-row:span 3;}
  .steps svg{display:none;}
}
/* The guide cards beside «Capire il segnale» fill the height of the text, top to bottom. */
.signal-guides{align-self:center;gap:10px;}
.signal-guides a{padding:12px 18px;}
.signal-guides span{margin-bottom:2px;font-size:12.5px;}
.signal-guides b{font-size:18px;}
.signal-guides small{margin-top:2px;font-size:14.5px;}
@media (max-width:820px){.signal-guides{grid-auto-rows:auto;}}
/* All the guides, under one heading with their number. */
.index-title{margin-top:24px;padding-top:44px;border-top:1px solid var(--line);}
.index-title h2{margin:0 0 8px;font-size:clamp(30px,4.4vw,42px);}
.index-title + .index{margin-top:24px;}
/* Breathing room under the translucent header on wide screens. */
@media (min-width:900px){.hero{padding-top:48px;}}
/* Dark theme: these logos have dark lettering and no background of their own. A light tile
   keeps them readable until there are cut-out PNGs (da-fare 1.4). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.of-logo,.show-logo):has(img:is([src$="loghi/lyca.svg"],[src$="loghi/kena.svg"],[src$="loghi/tim.svg"],[src$="loghi/postemobile.svg"],[src$="loghi/spusu.svg"],[src$="loghi/very.svg"],[src$="loghi/tiscali.svg"])){background:#f5f5f7;}
  :root:not([data-theme="light"]) .chip-brand img:is([src$="loghi/lyca.svg"],[src$="loghi/kena.svg"],[src$="loghi/tim.svg"],[src$="loghi/postemobile.svg"],[src$="loghi/spusu.svg"],[src$="loghi/very.svg"],[src$="loghi/tiscali.svg"]){background:#f5f5f7;border-radius:4px;}
}
:root[data-theme="dark"] :is(.of-logo,.show-logo):has(img:is([src$="loghi/lyca.svg"],[src$="loghi/kena.svg"],[src$="loghi/tim.svg"],[src$="loghi/postemobile.svg"],[src$="loghi/spusu.svg"],[src$="loghi/very.svg"],[src$="loghi/tiscali.svg"])){background:#f5f5f7;}
:root[data-theme="dark"] .chip-brand img:is([src$="loghi/lyca.svg"],[src$="loghi/kena.svg"],[src$="loghi/tim.svg"],[src$="loghi/postemobile.svg"],[src$="loghi/spusu.svg"],[src$="loghi/very.svg"],[src$="loghi/tiscali.svg"]){background:#f5f5f7;border-radius:4px;}

/* Phones: a step smaller everywhere, so a screen holds more and headings do not shout. */
@media (max-width:560px){
  body{font-size:16px;line-height:1.6;}
  h1{font-size:28px;}
  h2{font-size:23px;margin-top:44px;}
  h3{font-size:16.5px;}
  .answer{font-size:17px;line-height:1.55;}
  .lede,.hero .lede{font-size:16.5px;}
  .hero h1{font-size:clamp(32px,9vw,38px);}
  .signal h2,.path h2,.index-title h2{font-size:26px;}
  .index h2{font-size:24px;}
  .signal-lede,.path-intro{font-size:16.5px;}
  .signal-points li{font-size:16px;}
  .hero .hero-choice b{font-size:18px;}
  .hero .hero-choice span{font-size:14px;}
  .sim-title{font-size:23px;}
  .mw-val{font-size:28px;}
  .mw-word{font-size:18px;}
  .steps b{font-size:19px;}
  .steps a > span{font-size:15px;}
}

/* Logos in one fixed box: the image fills it and keeps its proportions, so wide wordmarks and
   compact marks look alike, and an SVG without its own size never collapses to zero width. In
   the dark theme every logo sits on the same light tile until there are cut-out versions. */
.of-logo{width:112px;height:36px;padding:5px 10px;box-sizing:border-box;}
.of-logo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:left center;}
@media (min-width:900px){.of-logo{width:128px;height:42px;}.of-logo img{width:100%;height:100%;max-width:none;}}
@media (max-width:560px){.of-head .of-logo{width:100px;height:32px;}.of-head .of-logo img{width:100%;height:100%;}}
.show-logo img{width:60px;height:22px;max-width:none;max-height:none;object-fit:contain;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.of-logo,.show-logo){background:#f5f5f7;}}
:root[data-theme="dark"] :is(.of-logo,.show-logo){background:#f5f5f7;}
/* The speed test's start button: full width and taller on a phone, where it is the page's action. */
/* The start button sits in the middle of the panel, its note below across the whole width. */
.ms-start{max-width:none;text-align:center;}
#msStatus{max-width:none;text-align:center;margin-top:10px;}
@media (max-width:560px){#msStart,#msStop{width:100%;min-height:50px;font-size:16px;}}

/* Router finder: networks, signal and technology as the same pills as the comparison's chips,
   with the native box hidden but still focusable and read by screen readers. */
#rfForm fieldset label,#msForm fieldset label{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0 6px 6px 0;padding:6px 14px;border:1px solid var(--field-line);border-radius:99px;background:var(--field);color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;}
#rfForm fieldset label + label,#msForm fieldset label + label{margin-left:0;}
#rfForm fieldset input,#msForm fieldset input{position:absolute;opacity:0;width:1px;height:1px;}
#rfForm fieldset label:hover,#msForm fieldset label:hover{border-color:var(--accent);}
#rfForm fieldset label:has(input:checked),#msForm fieldset label:has(input:checked){background:color-mix(in srgb,var(--accent) 16%,var(--bg));border-color:var(--accent);font-weight:600;}
#rfForm fieldset label:has(input:checked)::before,#msForm fieldset label:has(input:checked)::before{content:"✓";color:var(--accent);font-weight:700;}
#rfForm fieldset label:has(input:focus-visible),#msForm fieldset label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
#rfNets{gap:0 !important;}
#rfBand{min-width:220px;}
#rfForm > label[for="rfBand"]{font-size:15px !important;}

/* «Vedi l'offerta»: a link with an arrow, still 44 px to tap, so 50 cards are not 50 blue blocks. */
.of-cost .of-go{background:none;border:0;color:var(--accent);padding:6px 0;min-height:44px;font-size:15px;font-weight:600;justify-content:flex-end;}
.of-cost .of-go::after{content:" →";white-space:pre;}
.of-cost .of-go:hover{background:none;text-decoration:underline;text-underline-offset:3px;color:var(--accent);}
.az-start{margin:0 0 20px;}
.gs-steps-intro{margin:-6px 0 18px;font-size:15px;color:var(--muted);max-width:none;}
/* Advisor page, from the owner's notes: a blue button that continues, with an arrow; deep dives
   folded one under the other; the method box labelled like «Consulente» and across the panel;
   a plain «Prossimo passo» without the card. */
.btn-go::after{content:"→";margin-left:8px;font-size:1.15em;line-height:1;}
details.deep + details.deep{margin-top:-31px;}
.deep-tag{display:block;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);}
/* The sign sits in its own column, centred on the label and the title. */
details.deep > summary:has(.deep-tag){display:grid;grid-template-columns:20px 1fr;column-gap:8px;align-items:center;}
details.deep > summary:has(.deep-tag)::before{grid-row:1 / span 2;}
details.deep > summary .deep-tag{grid-column:2;}
.method-plain > .label{display:block;padding:0;border:0;}
.method-plain p{max-width:none;}
.next-plain{box-shadow:none;background:none;padding:0;border-radius:0;border-top:1px solid var(--line);padding-top:18px;}
.next-plain:hover{background:none;box-shadow:none;}
.next-plain b{transition:color .25s ease;}
.next-plain:hover b{color:var(--accent);}
/* Comparison: the order right above the list; the filters button with a chevron that turns. */
.of-sortbar{display:flex;justify-content:flex-end;margin:18px 0 0;}
#ofEdit .chev{width:14px;height:14px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
#ofEdit[aria-expanded="true"] .chev{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){#ofEdit .chev{transition:none;}}