/* base: what every component needs (tokens, font, reset, the bar, the buttons, section heads, the reveal, the footer).
   The site's shared style, taken from the Star landing (monaco repo, software/surfaces/star-landing/public/casa/base.css)
   on Tommi's word (2026-09-29): its fonts, title sizes, colours, buttons and bar. One reference only, so the pages
   do not become a mix. Tokens, the bar, the buttons, the section heads, the reveal and the footer; each page keeps
   its own layout inline. Mona Sans: SIL Open Font License 1.1, self-hosted in /fonts. */
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(/fonts/mona-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(/fonts/mona-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Instrument Sans and Instrument Serif, ADR Center's (adrcenter.com, Mediation First): SIL Open Font License 1.1 */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

:root,.notte{
  color-scheme:dark;
  /* ADR Center's night (adrcenter.com): navy, not grey */
  --fondo:oklch(14.2% .045 262);--fondo-2:oklch(17.6% .05 262);--piano:oklch(20.5% .05 262);--piano-2:oklch(23.5% .05 262);--piano-3:oklch(27% .05 262);
  --riga:oklch(96% .004 85/.1);--riga-2:oklch(96% .004 85/.18);
  --ink:oklch(98% .004 255);--ink-2:oklch(98% .004 255/.78);--ink-3:oklch(98% .004 255/.6);--spento:oklch(98% .004 255/.38);
  --blu:oklch(55% .2 262);--blu-su:oklch(60% .2 262);--blu-t:oklch(76% .12 256);--blu-velo:oklch(55% .2 262/.16);--su-blu:oklch(99% .003 262);
  --ok:oklch(76% .15 155);--att:oklch(80% .13 78);
  --ombra-forte:oklch(5% .05 262/.8);
  /* the names the demo form still uses */
  --dim:var(--ink-2);--mute:var(--ink-3);--line:var(--riga);--line-2:var(--riga-2);
}
/* ADR Center's day (Mediation First): cool white, near-black ink, the same blue a step darker. A section with .giorno
   cuts from night to day; .notte inside it is an island of night again (a product window, the labels on the map).
   .sul-giorno is what the floating pieces (the bar, the ask box) wear while a day section is under them. */
.giorno,.sul-giorno{
  color-scheme:light;
  --fondo:oklch(98.3% .005 255);--fondo-2:oklch(100% 0 0);--piano:oklch(96.6% .009 255);--piano-2:oklch(95.2% .012 255);--piano-3:oklch(92.5% .015 255);
  --riga:oklch(28% .04 262/.1);--riga-2:oklch(28% .04 262/.17);
  --ink:oklch(20% .03 264);--ink-2:oklch(36% .025 264);--ink-3:oklch(50% .02 264);--spento:oklch(20% .03 264/.26);
  --blu:oklch(52% .2 262);--blu-su:oklch(46% .2 263);--blu-t:oklch(50% .2 262);--blu-velo:oklch(52% .2 262/.1);--su-blu:oklch(99% .003 262);
  --ok:oklch(58% .15 155);--att:oklch(64% .15 65);
  --ombra-forte:oklch(30% .08 262/.22);
  --dim:var(--ink-2);--mute:var(--ink-3);--line:var(--riga);--line-2:var(--riga-2);
}
.giorno{background:var(--fondo);color:var(--ink)}
.notte,.sul-giorno{color:var(--ink)}
:root{
  --font:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --barra-h:60px;--largo:1200px;--gutter:clamp(16px,4vw,40px);
  /* the play of every call button (.play): corners rounded, its centroid at the middle of the box, so in a circle it
     sits where the eye expects it (Tommi, 2026-10-03: "il triangolo dentro il play è disallineato") */
  --play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.99 4.58L19.01 10.26Q22.07 12 19.01 13.74L8.99 19.42Q7.07 20.5 7.07 18.3L7.07 5.7Q7.07 3.5 8.99 4.58Z'/%3E%3C/svg%3E");
  --sez:clamp(120px,11vw,184px);   /* the room between sections (Tommi, 2026-10-01: "more white space") */
  /* one design pixel (Tommi, 2026-10-01: "se metti Command+ o Command-... voglio che controlli tu gli spazi"): a pixel
     on a phone, 1/1440 of the window from 900px up, so a browser zoom leaves the text as it is (monaco.com's way:
     sizes that follow the window). Every text size is a number of these. */
  --px:1px;
  /* the type scale, smaller than before and close to monaco.com's: on a phone here, from 900px up below */
  --t-h2:32px;--t-h3:26px;--t-lead:20px;--t-corpo:16px;--t-lista:17px;--t-nota:14.5px;
  --e-esce:cubic-bezier(.16,1,.3,1);--e-molla:cubic-bezier(.34,1.56,.64,1);--e-ui:cubic-bezier(.4,0,.6,1);
  --e-out:var(--e-esce);--e:var(--e-esce);
  /* glass: smoke at night, milk by day. It was very blurred (Tommi, 2026-09-30: "i bottoni estremamente blurred"),
     blur(40px) saturate(180%) of what lies behind: redrawn on every frame of the scroll under the bar, the questions box
     and the cards, it alone made the page stutter at 120 Hz on a Retina screen (measured in a real window, 2026-10-02:
     69 late frames on the home, 18 without it, as many as a plain page; Tommi: "its still soooo luggy and slow"). Now
     the panels are tinted deeper and nothing is blurred; one place to bring it back */
  --vetro-sfoca:none;
}
@media (min-width:900px){:root{--px:clamp(.8px,100vw / 1440,1.3px);--t-h2:calc(50 * var(--px));--t-h3:calc(36 * var(--px));--t-lead:calc(22 * var(--px));--t-corpo:calc(16.5 * var(--px));--t-lista:calc(18 * var(--px));--t-nota:calc(14.5 * var(--px))}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--fondo);overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barra-h) + 8px)}
body{margin:0;background:var(--fondo);color:var(--ink);font-family:var(--font);font-size:calc(17 * var(--px));line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ol,ul{margin:0}
::selection{background:oklch(55% .2 262/.5);color:var(--ink)}
.salta{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--fondo);font-weight:600;transition:top .2s}
.salta:focus{top:10px}
:focus-visible{outline:2px solid var(--blu-t);outline-offset:3px;border-radius:6px}

/* ---------- section heads ---------- */
.giro,.wrap{width:min(var(--largo),100% - 2 * var(--gutter));margin-inline:auto}
.sez{padding-block:var(--sez);position:relative}
/* the line over a title, as adrcenter.com writes it: small, spaced capitals, in the blue */
.occhio{display:block;font-size:calc(13 * var(--px));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blu-t);margin-bottom:6px}
.titolo{font-family:var(--serif);font-size:var(--t-h2);font-weight:400;line-height:.96;letter-spacing:-.025em;text-wrap:balance}
.titolo em{font-style:italic}
.sotto{font-size:var(--t-corpo);line-height:1.38;letter-spacing:-.012em;color:var(--ink-2);max-width:32ch;text-wrap:pretty}
.sotto b{color:var(--ink);font-weight:600}
.capo{text-align:center;display:grid;justify-items:center;gap:22px}
.capo .sotto{margin-inline:auto}
.serif{font-weight:650;letter-spacing:-.035em;font-stretch:104%}

/* ---------- buttons: white is the action (ADR's), glass is the second one, the link with the chevron goes further ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:14px;background:oklch(99% 0 0);color:oklch(18% .06 262);font-size:calc(17 * var(--px));font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s var(--e-ui),transform .45s var(--e-molla),box-shadow .2s var(--e-ui)}
.giorno .btn,.sul-giorno .btn{background:var(--blu);color:var(--su-blu)}
.btn-vetro{background:linear-gradient(180deg,oklch(100% 0 0/.16),oklch(100% 0 0/.05));color:var(--ink);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.34),inset 0 0 0 1px oklch(100% 0 0/.14),0 16px 40px -18px oklch(5% .05 262/.6)}
/* the glass button stays the second one on a day section too: dark words on white, beside the blue one (the bar's «Accedi») */
.giorno .btn-vetro,.sul-giorno .btn-vetro{color:var(--ink);background:linear-gradient(180deg,oklch(100% 0 0/.82),oklch(100% 0 0/.56));box-shadow:inset 0 1px 0 oklch(100% 0 0),0 0 0 1px oklch(28% .04 262/.09),0 16px 40px -20px oklch(30% .08 262/.35)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--blu-t);font-size:calc(17 * var(--px));font-weight:500;letter-spacing:-.01em}
.btn-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-esce)}
@media (hover:hover){
  .btn:hover{background:oklch(94% .02 255);box-shadow:0 10px 40px -10px oklch(70% .15 258/.7)}
  .giorno .btn:hover,.sul-giorno .btn:hover{background:var(--blu-su);box-shadow:0 10px 30px -10px oklch(52% .2 262/.6)}
  .btn-vetro:hover{background:oklch(100% 0 0/.2);box-shadow:inset 0 1px 0 oklch(100% 0 0/.42),inset 0 0 0 1px oklch(100% 0 0/.26),0 16px 40px -18px oklch(5% .05 262/.6)}
  .giorno .btn-vetro:hover,.sul-giorno .btn-vetro:hover{box-shadow:inset 0 1px 0 oklch(100% 0 0),0 0 0 1px oklch(28% .04 262/.16);background:oklch(100% 0 0/.95)}
  .btn-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .btn-link:hover svg{transform:translateX(3px)}
}

/* glass panels: smoke over the night, milk over the day (adrcenter.com's .vetro and .vetro-chiaro) */
.vetro{position:relative;isolation:isolate;background:linear-gradient(180deg,oklch(100% 0 0/.13),oklch(100% 0 0/.045));-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.32),inset 0 -1px 0 oklch(100% 0 0/.05),0 24px 60px -24px oklch(5% .05 262/.7)}
.vetro::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,oklch(100% 0 0/.55),oklch(100% 0 0/.08) 38%,oklch(100% 0 0/.04) 62%,oklch(100% 0 0/.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.giorno .vetro{background:linear-gradient(180deg,oklch(100% 0 0/.86),oklch(100% 0 0/.62));box-shadow:inset 0 1px 0 oklch(100% 0 0),0 0 0 1px oklch(28% .04 262/.08),0 18px 50px -20px oklch(30% .08 262/.25)}
.giorno .vetro::before{display:none}

/* ---------- the bar: clear and wide over the first screen; once the page moves, a pill floating under the top edge,
   very blurred, smoke over the night and milk over the day (Tommi, 2026-09-30: "a pillola e non fissa sopra") ---------- */
.barra{position:fixed;inset:0 0 auto;z-index:100;display:flex;flex-direction:column;align-items:center;padding-top:0;pointer-events:none;transition:padding .5s var(--e-esce),transform .5s var(--e-esce)}
.barra.nascosta:not(:focus-within),.immersivo .barra:not(:focus-within){transform:translateY(calc(-100% - 24px))}   /* scrolling down, or over a sentence as big as the screen (base.js); never while a key is in it */
.barra .giro{pointer-events:auto;height:var(--barra-h);display:flex;align-items:center;gap:24px;padding:0;border-radius:999px;background:oklch(100% 0 0/0);transition:width .7s var(--e-molla),height .5s var(--e-esce),padding .5s var(--e-esce),background-color .35s var(--e-ui),box-shadow .35s var(--e-ui),-webkit-backdrop-filter .35s var(--e-ui),backdrop-filter .35s var(--e-ui)}
.barra.piena{padding-top:12px}
.barra.piena .giro{width:min(860px,100% - 24px);height:54px;padding:0 7px 0 22px;border-radius:27px;background:oklch(18% .05 262/.96);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.2),inset 0 0 0 1px oklch(100% 0 0/.1),0 20px 50px -20px oklch(5% .05 262/.8)}
.barra.piena.sul-giorno .giro{background:oklch(100% 0 0/.97);box-shadow:inset 0 1px 0 oklch(100% 0 0/.9),0 0 0 1px oklch(28% .04 262/.08),0 18px 50px -20px oklch(30% .08 262/.3)}
/* a strip of tabs marked data-dock (the six steps' on /come-funziona) docks into the bar once it reaches it (Tommi,
   2026-10-01: "the progress bar has to integrate seamlessly with the nav bar"): base.js lays a copy of it under the pill (and marks the strip .dockable; a page without base.js keeps it sticky),
   the pill widens and opens downward to hold it, the original hides until the page comes back up to it */
.barra .bar-tabs{position:relative;top:auto;z-index:auto;pointer-events:none;display:grid;grid-template-rows:0fr;width:min(860px,100% - 24px);margin:0;opacity:0;border-radius:0 0 24px 24px;background:oklch(18% .05 262/.96);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 -1px 0 oklch(100% 0 0/.08),0 24px 50px -24px oklch(5% .05 262/.8);transition:grid-template-rows .55s var(--e-esce),opacity .3s var(--e-ui),width .7s var(--e-molla)}
.barra .bar-tabs>ol{min-height:0;overflow:hidden;width:auto;margin:0;padding:0 22px}
.barra.with-tabs .giro,.barra.with-tabs .bar-tabs{width:min(1240px,100% - 24px)}
.barra.with-tabs .giro{border-radius:27px 27px 0 0}
/* the copy takes clicks only while it shows: hidden, it lay over the bar's links and «Casi d'uso» opened step 1 (Ale,
   2026-10-07: "se nella tab bar clicco «Casi d'uso»? Non funziona") */
.barra.with-tabs .bar-tabs{grid-template-rows:1fr;opacity:1;pointer-events:auto}
.barra.sul-giorno .bar-tabs{background:oklch(100% 0 0/.97);box-shadow:0 18px 50px -20px oklch(30% .08 262/.3)}
[data-dock].dockable{position:relative!important;top:auto!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[data-dock].docked{visibility:hidden}
@media (max-width:899px){.barra .bar-tabs>ol{overflow-x:auto;padding:0 14px}}
/* scrolling down, the bar leaves with its tabs and they stay behind as a thin line at the top edge, a segment each,
   filled as far as the page has gone through its part (base.js, .bar-mini; Tommi, 2026-10-05: "la progress bar
   lasciala sopra in una maniera super, super minimizzata"); scrolling up the bar comes back with the tabs */
.bar-mini{position:fixed;top:8px;left:50%;z-index:100;width:min(1240px,100% - 24px);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .3s var(--e-ui),transform .45s var(--e-esce)}
.bar-mini i{height:3px;border-radius:2px;overflow:hidden;background:oklch(100% 0 0/.18);box-shadow:0 1px 6px oklch(5% .05 262/.35)}
.bar-mini u{display:block;height:100%;border-radius:inherit;background:oklch(100% 0 0/.92);transform:scaleX(0);transform-origin:left}
.barra.nascosta.with-tabs:not(:focus-within)+.bar-mini{opacity:1;transform:translate(-50%,0)}
.barra.sul-giorno+.bar-mini i{background:oklch(28% .04 262/.14);box-shadow:none}
.barra.sul-giorno+.bar-mini u{background:var(--ink)}

/* the name: «Simulator» alone, in the serif (Tommi, 2026-10-01: "just call it Simulator"); a page still written as
   «ADR Center <em>Simulator</em>» keeps the house in the sans */
.marchio{display:inline-flex;align-items:center;gap:10px;padding-block:10px;white-space:nowrap;font-family:var(--serif);font-size:calc(26 * var(--px));line-height:1;letter-spacing:-.01em}
/* the mark is the app's own icon, the white S on the blue square (no logo file exists yet; Ale, 2026-10-06: "metti il logo
   del simulator dovunque è necessario") */
.marchio-segno{width:calc(28 * var(--px));height:calc(28 * var(--px));flex:none;border-radius:calc(7 * var(--px));box-shadow:0 4px 14px -6px oklch(5% .05 262/.7)}
.marchio b{font-family:var(--font);font-size:calc(15.5 * var(--px));font-weight:600;letter-spacing:-.01em}
.marchio em{font-family:var(--serif);font-size:calc(21 * var(--px));font-style:italic;color:var(--ink-2)}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.barra nav a[data-voce]{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:calc(14 * var(--px));color:var(--ink-2);border-radius:999px;transition:color .2s}
.play{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--play) center/contain no-repeat;mask:var(--play) center/contain no-repeat}
.barra .btn{min-height:38px;padding:0 17px;border-radius:999px;font-size:calc(14 * var(--px));margin-left:8px}
@media (hover:hover){.barra nav a[data-voce]:hover{color:var(--ink)}}
@media (max-width:640px){.barra nav a[data-voce]{display:none}.barra.piena .giro{padding-left:18px}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0}
.rv.vis{opacity:1;animation:sale .7s var(--e-esce) backwards}   /* backwards: once in, no filter or transform stays on it */
.rv.vis.su{animation-name:scende}
.rv.via{animation:via .3s var(--e-ui) forwards}
/* what comes in rises, as monaco.com's pieces do (Tommi, 2026-10-01: "better animation of new stuff coming in"); /clip's
   blocks (.cl-rv) do the same from components/clips/clips.css. No blur: a blur that changes is redrawn by the graphics card on every frame, and measured in a real window at 120 Hz
   on a Retina screen the entrances made a third of the frames late (Tommi, 2026-10-02: "its still soooo luggy and
   slow"); fading and rising cost nothing */
@keyframes sale{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes scende{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes via{from{opacity:1}to{opacity:0}}
.pagina-in{animation:sale .7s var(--e-esce) backwards}

/* ---------- footer, as america.gov closes, over adrcenter.com's glass: the pages in the serif, big, then the name as wide
   as the screen ---------- */
/* the footer wears the colour of the section above it, so the page does not break: the night by default, the day when
   the last section is a day one (base.js gives it .giorno then) */
.piede{padding:clamp(64px,7vw,104px) 0 clamp(40px,5vw,72px);background:transparent;color:var(--ink)}
/* where the ask box floats at the bottom, room for it under the last line, so it never covers the small print */
body:has(.ask-fisso) .piede{padding-bottom:clamp(120px,11vw,150px)}
.piede.giorno{background:var(--fondo)}
.piede-riga{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:40px 64px}
.piede-logo{display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-size:clamp(34px,3.2vw,46px);line-height:1;letter-spacing:-.02em}
.piede-logo img{width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px);border-radius:24%}
.piede-voci{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:22px clamp(32px,5vw,72px);font-size:calc(15.5 * var(--px));color:var(--ink-2)}
.piede-voci a{transition:color .2s var(--e-ui)}
.piede-fondo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--riga)}
.piede-nota{font-size:calc(13 * var(--px));color:var(--spento)}
.piede-lingue{display:flex;align-items:center;gap:4px;font-size:calc(13.5 * var(--px))}
.piede-lingue svg{width:16px;height:16px;margin-right:6px;fill:none;stroke:var(--ink-3);stroke-width:1.6}
.piede-lingue a{padding:6px 10px;border-radius:999px;color:var(--ink-3);transition:color .2s var(--e-ui),background-color .2s var(--e-ui)}
.piede-lingue a[aria-current]{color:var(--ink);background:var(--riga)}
@media (hover:hover){.piede-lingue a:hover{color:var(--ink)}}
@media (hover:hover){.piede-voci a:hover{color:var(--ink)}}
@media (max-width:720px){.piede-voci{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1}
}

/* read by screen readers only */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}