@view-transition{
    navigation:auto;
}
::view-transition-old(main) {
    animation: move-out .4s ease-in .2s;
}

::view-transition-new(main){
    animation: move-in .4s ease-in .2s;
}
@keyframes move-out {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100vw);
    }
}

@keyframes move-in {
    from {
        transform: translateX(100vw)
    }

    to {
        transform: translateX(0)
    }
}
:root{
  /* Primary */
  --green-050: #E3F9E5;
  --green-100: #C1EAC5;
  --green-200: #A3D9A5;
  --green-300: #7BC47F;
  --green-400: #57AE5B;
  --green-500: #3F9142;
  --green-600: #2F8132;
  --green-700: #207227;
  --green-800: #0E5814;
  --green-900: #05400A;
  --green-950: #092E0C;   

  /* Neutrals */
  --grey-010: #fdfeff;
  --grey-020: #fcfdfe;
  --grey-050: #F7F7F7;
  --grey-100: #E1E1E1;
  --grey-200: #CFCFCF;
  --grey-300: #B1B1B1;
  --grey-400: #9E9E9E;
  --grey-500: #7E7E7E;
  --grey-600: #626262;
  --grey-700: #515151;
  --grey-800: #3B3B3B;
  --grey-850: #2A2A2A;
  --grey-900: #222222;  

  /* Supporting */
  --purple-050: #EAE2F8;
  --purple-100: #CFBCF2;
  --purple-200: #A081D9;
  --purple-300: #8662C7;
  --purple-400: #724BB7;
  --purple-500: #653CAD;
  --purple-600: #51279B;
  --purple-700: #421987;
  --purple-800: #34126F;
  --purple-900: #240754;   

  --red-050: #FFEEEE;
  --red-100: #FACDCD;
  --red-200: #F29B9B;
  --red-300: #E66A6A;
  --red-400: #D64545;
  --red-500: #BA2525;
  --red-600: #A61B1B;
  --red-700: #911111;
  --red-800: #780A0A;
  --red-900: #610404;  

  --yellow-050: #FFFAEB;
  --yellow-100: #FCEFC7;
  --yellow-200: #F8E3A3;
  --yellow-300: #F9DA8B;
  --yellow-400: #F7D070;
  --yellow-500: #E9B949;
  --yellow-600: #C99A2E;
  --yellow-700: #A27C1A;
  --yellow-800: #7C5E10;
  --yellow-900: #513C06;

  --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
}
:root{
    color-scheme: light dark;
    --color1: light-dark(var(--grey-900), var(--grey-020));
    --color2: light-dark(var(--grey-800), var(--grey-050));
    --color3: light-dark(var(--grey-700), var(--grey-100));
    --color4: light-dark(var(--grey-600), var(--grey-200));
    --color5: light-dark(var(--grey-500), var(--grey-300));
    --color6: light-dark(var(--grey-400), var(--grey-400));
    --color7: light-dark(var(--grey-300), var(--grey-500));
    --color8: light-dark(var(--grey-200), var(--grey-600));
    --color9: light-dark(var(--grey-100), var(--grey-700));
    --color10: light-dark(var(--grey-050), var(--grey-800));
    --bg-color0: light-dark(var(--grey-010), var(--grey-900));
    --bg-color1: light-dark(var(--grey-020), var(--grey-850));
    --bg-color2: light-dark(var(--grey-050), var(--grey-800));
    --bg-color3: light-dark(var(--grey-100), var(--grey-700));
    --bg-color4: light-dark(var(--grey-200), var(--grey-600));
    --accent1: light-dark(var(--green-900), var(--green-050));
    --accent2: light-dark(var(--green-800), var(--green-100));
    --accent3: light-dark(var(--green-700), var(--green-200));
    --accent4: light-dark(var(--green-600), var(--green-300));
    --accent5: light-dark(var(--green-500), var(--green-400));
    --accent6: light-dark(var(--green-400), var(--green-500));
    --accent7: light-dark(var(--green-300), var(--green-600));
    --accent8: light-dark(var(--green-200), var(--green-700));
    --accent9: light-dark(var(--green-100), var(--green-800));
    --accent10: light-dark(var(--green-050), var(--green-900));
    --accent11: light-dark(var(--green-050), var(--green-950));
    --link-color1: light-dark(var(--purple-200), var(--purple-100));
    --link-color2: light-dark(var(--purple-300), var(--purple-050));
    /* fonts */
    --font-system: system-ui, sans-serif;
    --font-text: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', 'Adjusted Arial Fallback', sans-serif;
    --font-headline: 'Bookman Old Style', 'Bookman Old Style Backup', Superclarendon, 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
    /* shadows */
    --shadow-normal: 0 1px 3px rgba(0,0,0,.12), 
                     0 1px 2px rgba(0,0,0,.24);
    --shadow-thin: 0 0 2px rgba(0,0,0,.12),
                   0 0 1px rgba(0,0,0,.24);
    --shadow-button: 0 3px 6px rgba(0,0,0,.15), 
                     0 2px 4px rgba(0,0,0,.12);
    --shadow-focus: 0 10px 20px rgba(0,0,0,.15), 
                    0 3px 6px rgba(0,0,0,.10);
    --shadow-popup: 0 15px 25px rgba(0,0,0,.15), 
                    0 5px 10px rgba(0,0,0,.05);
    --shadow-dialog: 0 20px 40px rgba(0,0,0,.2);
    --shadow-inset: inset 0px 1px 2px rgba(0, 0, 0, .24), 
                    inset 0px 1px 3px rgba(0, 0, 0, .12);
    --header-height: 110px;
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,.logo{
    font-family: var(--font-headline);
    text-wrap: balance;
    line-height: 1.1em;
    font-weight: 500;
}
@font-face {
    font-family: "Bookman Old Style Backup";
    font-weigth: normal;
    src: url('/font/BOOKOS.woff2')format("woff2");
}
@font-face {
    font-family: "Bookman Old Style Backup";
    font-weigth: bold;
    src: url('/font/BOOKOSB.woff2')format("woff2");
}
@font-face {
    font-family: 'Adjusted Arial Fallback';
    src: local(Arial);
    size-adjust: 103%;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: 7%;
}
h1{
    font-size: var(--size-step-4);
}
h2{
    font-size: var(--size-step-3);
}
h3{
    font-size: var(--size-step-2);
}
h4{
    font-size: var(--size-step-1);
}
ul,
ol {
  padding-inline-start: 1em;
}
body {
    position: relative;
    font-family: var(--font-text);
    font-weight: normal;
    text-rendering: optimizeSpeed;
    margin: 0;
    padding: 0;
    color: var(--color1);
    background-color: var(--bg-color1);
    line-height: 1.7;
    min-height: 100vh;
    font-size: var(--size-step-0);
}
p{
    color: var(--color4);
}
[id]{
    scroll-margin-block-start: 3em;
}
[id]:target{
    animation: blinks 2s;
}
@keyframes blinks{
    50%{
        background-color: var(--local-accent,--accent7);
    }
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
a {
  color: currentColor;
  text-decoration-color: var(--link-color1);
  text-decoration-thickness: 0.3ex;
  text-underline-offset: 0.3ex;
}
a:hover{
    text-decoration-color: var(--link-color2);
}
.lede {
  font-family: Georgia;
  font-size: var(--size-step-1);
  font-style: italic;
  max-width: 50ch;
}

.lede + * {
  --flow-space: 2em;
}
/* Inherit fonts for inputs and buttons */
.input,
input,
button,
textarea,
select {
  font-family: var(--font-system)
}
select, ::picker(select){
    appearance: base-select;
    background: var(--bg-color0);
    border-radius: 4px;
    border: none;
    box-shadow: var(--shadow-normal);
}
::picker(select){
    background: var(--bg-color1);
    border: ;
}
button.tag{
    border: none;
    line-height: 1.1em;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
blockquote {
  padding-inline-start: 1em;
  border-inline-start: 0.3em solid;
  font-style: italic;
  font-size: var(--size-step-1);
}
.container.flow{
    color: var(--color4);
}
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
.flow .negative li{
    list-style: emoji-x;
    list-style-position: outside;
    max-width: 50ch;
    margin-left: 2em;
    line-height: 1.5em;
    margin-bottom: 1em;
}
@counter-style emoji-x {
    system: cyclic;
    symbols: "❎";
    suffix: " "
}
:is(h1, h2, h3, blockquote) {
  --flow-space: 1.5em;
}

:is(h1, h2, h3) + * {
  --flow-space: 0.5em;
}

article > * {
  max-width: 65ch;
}
.article .container{
    max-width: 65ch;
    margin: 3em auto;
}
blockquote {
  max-width: 50ch;
}

h1 {
  max-width: 20ch;
}

h2,
h3 {
  max-width: 28ch;
  color: var(--color2);
}
article {
  max-width: 65ch;
  margin-inline: auto;
  padding-top: 3em;
  margin-bottom: 4em;
}
@media(max-width: 720px){
    article{margin-inline: 2vw;}
}

main{
    padding-bottom: 10em;
    padding-top: var(--header-height);
    view-transition-name: main;
}
@media(max-width: 720px){
    main{
        padding-bottom: 15em;
    }
}
main:has(:last-child:is(.services:not(.criteria))) {
    background-color: var(--bg-color2);
}
@supports( NOT (animation-timeline: scroll())){
    :root{
        --header-height: 60px;
    }
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header {
    background-color: var(--bg-color1);
    box-shadow: var(--shadow-normal);
    font-size: 1.2em;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;    
    animation: shrink-header;
    anchor-name: --header;
    view-transition-name: header;
    max-height: var(--header-height);
}
@supports(NOT (animation-timeline: scroll() ) ){
        header{
            height: var(--header-height);
        }
        header nav{
            margin-top: .15em;
        }
}
header .container{
    max-width: 1620px;
    animation: shrink-header-container;

}
header ul{
    margin: .5em;
    animation: shrink-header-ul;
}
header, header .container, header ul{
    animation-duration: auto;
    animation-timeline: scroll();
    animation-range: 0 600px;
}
header a:hover, a:active, header a.active{
    text-decoration: underline;
    text-decoration-color: var(--accent4);
}
@keyframes shrink-header{
    from { padding: 20px 0;}
    to { padding: 0 0; }
}
@keyframes shrink-header-container{
    from { max-width: 1200px }
    to{ max-width: 1620px;}
}
@keyframes shrink-header-ul{
    from {margin: 1em;}
    to { margin: .5em; }
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 24px;
    font-weight: 500;
    color: var(--accent2);
    display: flex;
    align-items: center;
    gap: .4em;
}
.logo svg{
    width: 36px;
    height: 36px;
}
.logo .primary{
    fill: var(--accent4);
}
.logo .secondary{
    fill: var(--color1);
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}
.nav-links a {
    text-decoration: none;
    color: var(--color2);
}
.icon-list li,
summary.icon-list{
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5em;
}
details:has(.icon-list){
    width: 100%;
}
summary.icon-list{
    flex-direction: row-reverse;
    justify-content: space-between;
    font-family: var(--font-headline);
}
/* TODO: fix margin, padding on sections */
section{
    padding-block: 1em;
}
section:nth-child(2n+1):not(.hero){
    background-color: var(--bg-color2);
}
section.article {
    background-color: var(--bg-color1);
}
section.article h2{
    text-align: center;
}
.hero, footer {
  --s: 50px; /* control the size*/
  --c1: light-dark(var(--accent2),var(--accent10));
  --c2: light-dark(var(--accent1),var(--accent11));
  
  --c:#0000 79%,var(--c1) 81% 99%,var(--c2) 101% 150%,#0000 0;
  background:
    radial-gradient(var(--s) at 100% 100%,var(--c)),
    radial-gradient(var(--s) at 100% 0   ,var(--c)) calc(3*var(--s)/2) 0,
    radial-gradient(var(--s) at 0    100%,var(--c)) calc(  var(--s)/2) 0,
    radial-gradient(var(--s) at 0    0   ,var(--c)) calc(2*var(--s)) 0,
    repeating-linear-gradient(90deg,
      var(--c1) 0 calc(20%/3),#0000 0 calc(70%/3),
      var(--c1) 0 30%,#0000 0 50%) calc(var(--s)/-5) 0 var(--c2);
  background-size: calc(3*var(--s)) calc(5*var(--s)/2);
  color: light-dark(var(--color10),var(--color1));
  text-align: center;
  padding: 0;
  background-attachment: fixed;
  box-shadow: var(--shadow-inset);
}
.hero *, footer *{
    color-scheme: light;
}
.hero.replace, body:has(.hero.replace) footer{
  --s: 85px; /* control the size*/
  
  --g1:conic-gradient(from  45deg at 62.5% 12.5%,#0000 75%,var(--c1) 0);
  --g2:conic-gradient(from -45deg at 12.5% 12.5%,#0000 75%,var(--c1) 0);
  --g3:conic-gradient(from 225deg at 87.5% 87.5%,#0000 75%,var(--c2) 0);
  --g4:conic-gradient(from 135deg at 87.5% 37.5%,#0000 75%,var(--c2) 0);
  background:
    var(--g4),var(--g4) var(--s) var(--s),
    var(--g3),var(--g3) var(--s) var(--s),
    var(--g2),var(--g2) var(--s) var(--s),
    var(--g1),var(--g1) var(--s) var(--s),
    repeating-linear-gradient(135deg,var(--c2) 0 12.5%,var(--c1) 0 25%);
  background-size: calc(2*var(--s)) calc(2*var(--s));
    background-attachment: fixed;
}
.backdrop-holder{
    padding: 75px 0;
    backdrop-filter: brightness(.9) blur(3px);
}
@media(prefers-color-scheme: dark){
    .backdrop-holder{
        backdrop-filter: brightness(.8) blur(3px);
    }    
}
footer .backdrop-holder{
    padding: 40px 0;
}
footer .container{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
@media(max-width: 720px){
    footer .container{
        flex-direction: column;
        align-items: center;
    }
}
footer .btn{
    padding: 10px;
}
#wero-link{
    color-scheme: dark;
    max-width: 512px;
    box-shadow: var(--shadow-dialog);
    padding: 1%;
}
#wero-link *{
    color-scheme: dark;
}
#wero-link:not(:popover-open){
    display: none;
}
#wero-link h3{
    margin-block: .4em;
}
#wero-link p{
    margin-block: .4em;
}
#wero-link a{
    margin:auto;
    display: block;
    width: 200px;
}
#wero-link img{
    border-radius: 4px;
}
#wero-link:popover-open::backdrop{
    backdrop-filter: brightness(.8) blur(2px);
}
.hero .container {
    h1, h1 + p{
        text-shadow: 1px 1px black;
    }
}
@media(max-width: 720px){
    .hero .backdrop-holder{
        padding: 50px 0;
    }
}
.hero h1 {
    font-size: 48px;
    margin: auto;
    margin-bottom: 20px;
}
.hero p {
    text-wrap: balance;
    font-size: 20px;
    color: var(--color9);
    margin: auto;
    margin-bottom: 30px;
    max-width: 65ch;
}
.input-wrap, .hero form {
    position: relative;
    --form-font-size: 1.5em;
    --form-padding: .3em;
    --form-icon-size: 1.4em;
    width: fit-content;
    max-width: 100%;
    margin: auto;
}
.services .input-wrap{
    color: var(--color3);
}
.search-icon {
    margin-left: .3em;
    color: var(--purple-300);
    transform: rotate(85deg);
    cursor: pointer;
}
input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-calendar-picker-indicator{
    display: none !important;
}
.input{
    font-size: var(--form-font-size);
    border-radius: 12px; 
    box-shadow: var(--shadow-inset);
    padding: var(--form-padding);
    border: none;
    max-width: 100%;
    color: var(--color3);
    anchor-name: --search-input;
    cursor: text;
}
#search-results p{
    color: var(--color5);
    margin: 1em;
    max-width: 20em;
}
@supports(top: anchor(top)){
    #search-results{
        position-anchor: --search-input;
        top: anchor(top);
        margin-top: 0;
    }

}
#search-results{
    position: absolute;
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-dialog);
    padding: 0;
    width: 400px;
    max-width: 99%;
    max-height: 85vh;
}
#search-results .hidden,
.services .hidden{
    display: none;
}
#search-results .icon{
    color: var(--yellow-500);
}
#search-results:popover-open .input{
    animation: widen .25s;
}
@keyframes widen{
    from {
        max-width: 70%;
    }
    to{
        max-width: 100%;
    }
}
#search-results .input-wrap{
    width: 100%;
    padding:0;
    border-bottom: thin solid var(--color9);
}
#search-results .input-wrap:focus-within{
    background-color: var(--bg-color1);
}
.popover-input{
    box-shadow: var(--shadow-inset);
    width: 100%;
    border-radius: 12px 12px 0 0;
}
.popover-input:active,.popover-input:focus{
    background-color: transparent;
    outline: none;
}
#search-results:popover-open::backdrop{
    backdrop-filter: brightness(.7);
}
.result-element{
    border-bottom: thin solid var(--color9);
    padding: 1%;
}
.result-element:not(:has(~.result-element:not(.hidden))) {
    border-bottom: none;
}
.show-all-input{
    display: none;
}
.show-all-label{
    color: var(--color4);
    text-decoration: underline;
    cursor: pointer;
}
.show-all-input:not(:checked) ~ .result-element:nth-child( n+4 of .result-element:not(.hidden)){
    display:none;
}
.show-all-label{
    display: none;
}
.search-has-results div:has(>div) .show-all-input:checked ~ label.show-all-label:not(.show)[for^="show-all-"]{
    display: none;
}
.search-has-results div:has(>.result-element:nth-child(4 of .result-element:not(.hidden))) .show-all-label{
    display: block
}
.result-element svg.icon {
    --size: 48px;
    padding: 1%;
    min-width: 48px;
}
.result-element a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-decoration: none;
    gap: .5em;
}
.search-has-results {
    text-align: left;
    padding: 2% 1%;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}
.link-description {
    font-size: .8em;
    line-height: 1.25em;
    color: var(--color4);
}
span.option-icon {
    color: var(--color2);
    line-height: 0;
}
.input-wrap select .icon {
    --size: 24px;
    color: var(--color1);
    background: transparent;
}
.input-wrap select option {
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-block: .3em;
    background: transparent;
}
.filter-block{
    background: light-dark(var(--accent9),var(--accent11));
    max-width: max-content;
    min-width: 60%;
    margin-inline: auto;
    padding-block: 1em;
    margin-bottom: 2em;
    border-left: 3px solid var(--accent1);
    border-radius: 0 4px 4px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-inline: 2em;
    gap: .5em;
}
.services .filter-block p{
    margin-block: 0;
    text-align: left;
    color: var(--color4);
}
.filter-block .icon{
    color: var(--accent1);
}
.link-wrap{
    display: flex;
    justify-content: center;
}
.btn {
    display: inline-block;
    background-color: var(--accent7);
    color: var(--accent1);
    padding: 6px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    margin-top: 20px;
    box-shadow: var(--shadow-button);
    font-family: var(--font-system);
    background: linear-gradient(var(--bg-color3),var(--bg-color4));
    box-shadow: none;
    border: thin solid var(--color8);
    color: var(--color2);
}
.btn:hover, .btn-active{
    color: var(--color1);
    background: var(--bg-color3);
}
.services {
    padding: 30px 0;
    background-color: var(--bg-color2);
    font-size: 1.2rem;
}
.services p {
    max-width: 65ch;
    margin: 2em auto 3em;
    text-align: center;
    color: var(--color4);
}
.services .section-end {
    margin-bottom: 0;
}
.services .input-wrap{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 1em;
    column-gap: .5em;
    flex-wrap: wrap;
}
.services .input-wrap .input,
.services .input-wrap select{
    --form-padding: .2em;
    box-shadow: var(--shadow-inset);
    border-radius: 4px;
    --form-font-size: 1em;
}
.services .input-wrap select{
    --form-padding: 0;
    box-shadow: var(--shadow-thin);
    border: thin solid var(--color9);
    padding-block: 0;
}
.services input{
    background-color: var(--bg-color1);
}
.services h2,
.issues h2 {
    text-align: center;
    margin-inline: auto;
    margin-block: 40px;
    color: var(--accent0);
}
.services-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
}
.service-card-link a{
    text-decoration: none;
}
.services-flex.products a:after,
.services-flex.categories a:after{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.services-flex a:hover ~ .alternatives{
    text-decoration: underline;
}
.alternatives {
    font-weight: bold;
    color: var(--color3);
    text-underline-offset: .2ex;
    transition: transform .3s;
    height: 30px;
}
@supports(text-decoration-inset: 6ch){
    .services-flex a:hover ~ .alternatives{
        text-decoration-inset: 0;
    }
    .alternatives{
        transition: text-decoration-inset .3s;
        text-decoration: underline;
        text-decoration-inset: 6ch;
    }
}
.substitutes .service-card-link a:hover{
    text-decoration: underline;
}
.service-card-link svg,
.service-card-link img{
    transition: filter .3s, transform .3s;
    -webkit-transition: -webkit-transform .3s;
}
.service-card-link:hover svg,
.service-card-link:hover img{
    transform: scale(1.2);
}
.products .service-card-link svg,
.products .service-card-link img{
    -webkit-transition: -webkit-filter .3s, -webkit-transform .3s;
    transition: filter .3s, transform .3s;
}
.service-card-link:hover{
    box-shadow: var(--shadow-focus);
}
.products .service-card-link a:hover svg,
.products .service-card-link a:hover img{
    filter: blur(3px);
    -webkit-filter: blur(3px);
    transform: scale(.9);
}
.service-card,
.issue-card,
.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-color0);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow-normal);
    text-align: center;
    color: var(--color1);
    max-width: calc(33% - 1em);
    min-width: min(100%, 360px);
}
.service-card.service-card-link[data-categories]:not(.show) {
    display: none;
}
.service-card svg {   
    color: var(--accent4);
}
.services-flex:not(.products) .service-card svg,
.services-flex:not(.products) .service-card img{
    animation: scale-up linear;
    animation-timeline: view();
    animation-range-start: -50px;
    --color-start: var(--accent8);
    --color-end: var(--accent4);
}
.services-flex:not(.products) .service-card .has-bg{
    --bg-color-local: light-dark(var(--bg-color0),var(--color1));
    --bg-color-start: var(--bg-color-local);
    --bg-color-end: var(--bg-color-local);
    background: var(--bg-color-local);
    border-radius: 3px;
    --size: 72px;
}
img.has-bg{
    padding: 12px;
}
section.services.criteria {
    background-color: var(--bg-color1);
}

.criteria .service-card.service-card-link {
    box-shadow: none;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0;
    gap: 1ch;
    justify-content: space-between;
    background-color: inherit;
}

.criteria .service-card a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2em;
}

.criteria .service-card p {
    text-align: left;
    margin-top: 0;
    line-height: 1.6em;
}

.criteria .service-card svg {
    --size: 48px;
    min-width: var(--size);
}

.criteria use {
    border-radius: 50%;
}

.services-flex.criteria {
    gap: 1.5em;
}

.criteria .service-card a:hover h3 {
    text-decoration: underline;
}
@keyframes scale-up{
    from{
        scale: .7;
        /*color: var(--color-start);*/
        opacity: .7;
        background-color: var(--bg-color-start,transparent);
    }
    25%, 50%, 90% {
        scale: 1;
        /*color: var(--color-end);*/
        opacity: 1;
        background-color: var(--bg-color-end,transparent);
    }
    to {
        scale: .7;
        opacity: .7;
        /*color: var(--color-start);*/
    }
}
.service-card p {
    margin-block: 1em;
}
.tags-wrap {
    font-size: .7em;
}
.hero .tags-wrap{
    margin: 2em auto 0;
    max-width: 75ch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.hero .tags-wrap .tag{
    background-color: var(--purple-300);
    box-shadow: var(--shadow-normal);
}
.tags-wrap .tag {
    font-family: var(--font-system);
    border-radius: 24px;
    color: var(--color1);
    background: light-dark(var(--purple-100),var(--purple-700));
    padding: 5px 10px;
    text-wrap: nowrap;
    margin: 3px 3px;
    box-shadow: var(--shadow-normal);
    text-decoration: none;
    cursor: pointer;
}
@supports(bottom: anchor(top)){
    .tags-wrap [popover]:popover-open{
        all: unset;
    }   
    .tags-wrap [popover]:popover-open .popover-content{
        position: fixed;        
        position-anchor: var(--position-anchor);
        bottom: anchor(top);
        justify-self: anchor-center;
        margin: 11px 20px;
        animation: drop-in .25s ease;
        background: var(--purple-900);
        border: solid 2px;
        max-width: 250px;
        padding: .4em;
        border-radius: 8px;
        color: light-dark(var(--color9),var(--color2));
    }
    .tags-wrap [popover]:popover-open::after{
        position: fixed;
        position-anchor: var(--position-anchor);
        bottom: anchor(top);
        justify-self: anchor-center;
        margin: 0 26px;
        padding: 0;
        content: '';
        width: 0;
        height: 0;
        border: calc(10px + 1px) solid transparent;
        border-bottom-width: 0;
        border-top-color: light-dark(var(--color9), var(--color1));
        animation: drop-in .25s ease;
    }
}
.tags-wrap [popover]:popover-open::backdrop{
    backdrop-filter: brightness(.7);
    -webkit-backdrop-filter: brightness(.7);
    animation: backdrop-in .25s ease
}
@keyframes backdrop-in {
    from {
        opacity: 0
    }
}

@keyframes drop-in {
    from {
        opacity: 0;
        translate: 0 10px
    }
}
.subtitle {
    text-transform: uppercase;
    line-height: 1.6;
    font-size: .8rem;
    color: var(--color3);
    margin-top: .5em;
}

.issue-card, .feature-card{
    text-align: left;
    max-width: 720px;
    margin: 1em auto;
}
h3 {
    margin-left: 0;
}
.issue-card p, .feature-card p {
    margin-top: 1em;
}
.testimonials {
    padding: 60px 0;
    text-align: center;
    background-color: var(--bg-color2);
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.testimonial-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
footer {
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-inset);
}
footer p{
    color: var(--color8);
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.footer-links a {
    color: white;
    text-decoration: none;
}
.footer-links a.active{
    text-decoration: underline;
}
.menu-toggle{
    display: none;
}
@media (max-width: 768px) {
    @supports(animation-timeline: scroll()){
        :root{
            --header-height: 78px;
        }
    }
    @supports( NOT (animation-timeline: scroll())){
        :root{
            --header-height: 44px;
        }
    }
    .menu-toggle{
        display: block;
        cursor: pointer;
    }
    .menu-toggle .line {
        transition: all 0.4s ease; /* Transition effect */
        fill: var(--color3);
    }
    .menu-toggle.close .line:nth-child(1) {
        transform: translate(6px,2px) rotate(45deg) /* Transform the first line */
    }

    .menu-toggle.close .line:nth-child(2) {
        opacity: 0; /* Hide the second line */
    }

    .menu-toggle.close .line:nth-child(3) {
        transform: translate(-15px, 9px) rotate(-45deg) /* Transform the third line */;
        /* transform: rotate(-45deg); */
    }
    .menu-toggle button{
        background: transparent;
        border: none;
        font-size: 1.5em;
    }
    .nav-links-wrap {
        position: fixed;
    }
    .nav-links-wrap:not(.closing):not(:popover-open) .nav-links {
        display: none;
    }
    .nav-links{
        display: flex;
        top: 0;
        right: 0;
        left: 0;
        height: auto;
        margin: 0 !important;
        justify-content: flex-start;
        gap: 1em;
        flex-direction: column;
        padding-block: .5em;
        list-style: none;
        padding-left: 0;
    }
    .nav-links a{
        width: 100%;
        display: block;
    }
    .nav-links li{
        border-bottom: solid thin var(--color9);
        padding-inline-start: 1em;
    }
    .hero h1 {
        font-size: 36px;
    }
    [popover].nav-links-wrap{
        display: block;
        transform: translateX(100vw);
        top: 45px;
        right: 0;
        left: 0;
        width: 100%;
        height: fit-content;
        padding: 0;
        border: none;
        margin: 0;
        height: 100vh;
        background: var(--bg-color0);
        box-shadow: var(--shadow-dialog);
    }
    @supports(top: anchor(bottom)){
        [popover].nav-links-wrap{
            position-anchor: --header;
            top: anchor(bottom);
        }
    }
    [popover]:popover-open.nav-links-wrap {
        transform: translateX(0);
        animation: slide-in .5s;
    }
    [popover].closing.nav-links-wrap{
        animation: slide-out .5s;
    }
    @keyframes slide-in{
        from{
            transform: translateX(100vw);
        }
    }
    .closing {
        animation: slide-out .5s;
    }
    @keyframes slide-out {
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(100vw);
        }
    }

    .filter-block p{
        margin-block: 0;
    }
}
@media (min-width: 768.1px) {
    .nav-links-wrap{
        all: unset;
    }
    .menu-toggle{
        display: none;
    }
}
p .icon{
    float: left;
    margin: .2em;
}
.icon{
    display: inline-block;
    --size: 48px;
    --width: var(--size);
    --height: var(--size);
    width: var(--width);
    height: var(--height);
    color: var(--accent4);
    scale: min(calc(var(--height)/var(--width)),1);
}
.hero .logo-wrap{
    width: 108px;
    height: 108px;
    margin: 0 auto .2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero .logo-wrap.big-tech{
    background: var(--bg-color0);
    border-radius: 8px;
    box-shadow: var(--shadow-inset);
    &>svg{transition: filter .3s, transform .3s;}
}
.hero .logo-wrap.big-tech:hover{
    &>svg,
    &>img{
        filter: blur(3px);
        transform: scale(.9);
    }
    cursor: not-allowed;
}
.hero .icon{
    --size: 108px;
    /*background-color: var(--bg-color0);*/
    color: var(--yellow-300);
    scale: min(calc(var(--height)/min(108px,var(--width))),1);
}
.hero .icon{
    background: var(--bg-color1);
    border-radius: 6px;
}
.hero .big-tech .icon{
    color: var(--yellow-500);
}
.hero .logo-wrap.big-tech .icon{
    --size: 72px;
}
/*.icon.good{
    --width: calc(var(--size) * 2);
}
.icon.gmail{
    --width: calc(var(--size) * 4 / 3);
}
.icon.google-drive{
    --width: calc(var(--size) * 9 / 8);
}
.icon.zoom{
    --width: calc(var(--size) * 105 / 24);
}
.icon.aws{
    --width: calc(var(--size) * 5 / 3);
}
.icon.google-maps{
    --width: calc(var(--size) * 11 / 16);
}
.icon.youtube{
    --width: calc(var(--size) * 17 / 12);
}
.icon.google-analytics{
    --width: calc(var(--size) * 43 / 48);
}
.icon.open{
    --width: calc(var(--size) * 12 / 14);}
*/
summary {
    color: var(--color4);
    font-size: 1rem;
    cursor: zoom-in;
}
details[open] summary{
    border-bottom: thin dashed;
    cursor: zoom-out;
}

.summary-key {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color1);
    font-size: var(--size-step-0);
}

.details-wrap {
    display: flex;
    flex-wrap: wrap;
    max-width: 720px;
    margin-inline: auto;
    justify-content: center;
}
summary::marker{
    color: var(--color1);
    cursor: pointer;
}
details {
    width: 80%;
    background: var(--bg-color0);
    border: thin dashed;
    margin-block: 1em;
    padding: 1em;
    border-radius: 12px;
}
details.issue-card {
    background: light-dark(var(--red-050), var(--red-900));
    --local-accent: var(--red-500);
}
details.feature-card{
    background: light-dark(var(--accent9), var(--accent10));
    --local-accent: var(--accent5);
}
details p{
    color: var(--color1);
    margin-top: .5em;
}
.ref{
    font-size: .9em;
    color: var(--color3);
    margin-left: 1ch;
}
[popover] .ref{
    color: light-dark(var(--color8),var(--color3));
}
.ref a{
    color: var(--link-color2);
    text-decoration-thickness: auto;
}
.ref a{
    color: var(--link-color1);
}
.susty-score-wrap {
    display: flex;
    gap: 3em;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    border: thin solid var(--color9);
    max-width: 400px;
    background: var(--bg-color3);
    margin-inline: auto;
    box-shadow: var(--shadow-thin);
}

.susty-score {
    width: 50px;
    height: 50px;
    background: var(--purple-600);
    text-align: center;
    color: var(--yellow-100);
    border-radius: 12px;
    line-height: 50px;
    font-weight: bold;
    animation: scale-up linear;
    animation-timeline: view();
    animation-range-start: -50px;
    --color-start: var(--color9);
    --bg-color-start: var(--purple-400);
    --color-end: var(--yellow-100);
    --bg-color-end: var(--purple-600);
}

.susty-score-label {
    margin-left: 1em;
    color: var(--color2);
}

.blog-entry:not(:last-child){
    padding-bottom: 1em;
    border-bottom: thin solid var(--color9);
}
.blog-entry .date{
    font-size: .85em;
    color: var(--color4);
}
.blog-entry a{
    font-family: var(--font-headline);
    font-size: var(--size-step-1);
    text-decoration: none;
    line-height: 1.15;
    color: var(--accent4);
}
.blog-entry a:hover{
    text-decoration: underline;
}
.color-picker-wrap{
    display:flex;
    flex-direction: column;
    justify-content: center;
}

#color-picker:checked + label{
    .moon{
        transform: rotate(180deg) translate(-18px, -18px);
    }
    .rays{
        opacity: 0;
    }
    svg{
        transform: scale(1.2) rotate(90deg);
    }
}
#color-picker + label{
  cursor: pointer;
  display: grid;
  border-radius: 12px;
    .moon, svg{
        transition: transform .4s;
    }
}
#color-picker + label:hover{
    background-color: var(--bg-color3);
}

:root:has(#color-picker:checked){
    color-scheme: dark;
}