/*   Y O U R   C S S   S T Y L E S
**
** Style all markdown content elements properly
** Use the markdown test file to check it: https://github.com/typemill/typemill/blob/master/content/00-Welcome/03-Markdown-Test.md
** You can activate and use the Tachyons CSS library: https://typemill.net/theme-developers/helper-functions#activate-tachyons
**
*/

/* ============================================
   DM Sans — Self-hosted (CSP blocks Google Fonts)
   ============================================ */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-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;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-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;
}

/* DM Mono — Code font (companion to DM Sans) */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-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;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-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;
}

/* ============================================
   Clarive Design Tokens — Light Mode
   ============================================ */
:root {
  /* Background Layers */
  --background: 45 24% 96%;           /* #F7F6F2 */
  --background-surface: 0 0% 100%;    /* #FFFFFF */
  --background-elevated: 43 20% 92%;  /* #EFEDE8 */
  --background-overlay: 40 12% 84%;

  /* Foreground / Text */
  --foreground: 240 28% 14%;          /* #1A1A2E */
  --foreground-secondary: 240 8% 46%; /* #6B6B80 */
  --foreground-muted: 240 8% 46%;
  --foreground-disabled: 240 8% 53%;

  /* Brand Accent (Indigo) */
  --primary: 231 44% 56%;             /* #5C6AC4 */
  --primary-hover: 231 44% 48%;
  --primary-foreground: 0 0% 100%;    /* white on indigo */
  --primary-glow: 231 44% 56%;

  /* Card */
  --card: 0 0% 100%;
  --card-foreground: 240 28% 14%;

  /* Secondary */
  --secondary: 43 20% 92%;
  --secondary-foreground: 240 28% 14%;

  /* Muted */
  --muted: 43 20% 92%;
  --muted-foreground: 240 8% 46%;

  /* Accent (hover backgrounds) */
  --accent: 233 72% 95%;              /* #E8EAFB */
  --accent-foreground: 240 28% 14%;

  /* Destructive */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;

  /* Borders & Rings */
  --border: 45 10% 85%;               /* #DDDBD5 */
  --border-subtle: 45 10% 85%;
  --input: 45 10% 85%;
  --ring: 234 70% 87%;                /* #C7CCF5 */

  /* Sidebar */
  --sidebar-background: 43 20% 92%;
  --sidebar-foreground: 240 8% 36%;
  --sidebar-primary: 231 44% 56%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 233 72% 95%;
  --sidebar-accent-foreground: 240 28% 14%;
  --sidebar-border: 45 10% 85%;
  --sidebar-ring: 231 44% 56%;

  /* Semantic Feedback */
  --success-text: 142 71% 30%;
  --success-bg: 142 71% 45% / 0.1;
  --success-border: 142 71% 45% / 0.25;

  --warning-text: 38 92% 36%;
  --warning-bg: 38 92% 50% / 0.1;
  --warning-border: 38 92% 50% / 0.25;

  --error-text: 0 72% 45%;
  --error-bg: 0 72% 51% / 0.1;
  --error-border: 0 72% 51% / 0.25;

  --info-text: 217 91% 45%;
  --info-bg: 217 91% 60% / 0.1;
  --info-border: 217 91% 60% / 0.25;

  /* Radius */
  --radius: 0.625rem;
}

/* ============================================
   Clarive Design Tokens — Dark Mode
   ============================================ */
.dark {
  --background: 240 30% 8%;           /* #0E0E1A */
  --background-surface: 240 30% 13%;  /* #16162A */
  --background-elevated: 240 29% 16%; /* #1E1E35 */
  --background-overlay: 240 26% 22%;

  --foreground: 240 45% 93%;          /* #E8E8F5 */
  --foreground-secondary: 240 14% 60%;/* #8888A8 */
  --foreground-muted: 240 14% 60%;
  --foreground-disabled: 240 14% 50%;

  --primary: 228 66% 70%;             /* #7B8FE8 */
  --primary-hover: 228 66% 76%;
  --primary-foreground: 240 30% 8%;
  --primary-glow: 228 66% 70%;

  --card: 240 30% 13%;
  --card-foreground: 240 45% 93%;

  --secondary: 240 29% 16%;
  --secondary-foreground: 240 45% 93%;

  --muted: 240 29% 16%;
  --muted-foreground: 240 14% 60%;

  --accent: 235 39% 19%;              /* #1E2145 */
  --accent-foreground: 240 45% 93%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;

  --border: 240 25% 22%;              /* #2A2A45 */
  --border-subtle: 240 25% 19%;
  --input: 240 25% 22%;
  --ring: 234 35% 35%;                /* #3A3F7A */

  --sidebar-background: 240 30% 10%;
  --sidebar-foreground: 240 20% 72%;
  --sidebar-primary: 228 66% 70%;
  --sidebar-primary-foreground: 240 30% 8%;
  --sidebar-accent: 235 39% 19%;
  --sidebar-accent-foreground: 240 45% 90%;
  --sidebar-border: 240 25% 18%;
  --sidebar-ring: 228 66% 70%;

  --success-text: 142 71% 55%;
  --success-bg: 142 71% 45% / 0.12;
  --success-border: 142 71% 45% / 0.3;

  --warning-text: 38 92% 64%;
  --warning-bg: 38 92% 50% / 0.12;
  --warning-border: 38 92% 50% / 0.3;

  --error-text: 0 72% 63%;
  --error-bg: 0 72% 51% / 0.12;
  --error-border: 0 72% 51% / 0.3;

  --info-text: 217 91% 70%;
  --info-bg: 217 91% 60% / 0.12;
  --info-border: 217 91% 60% / 0.3;
}

/* Auto dark mode via OS preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: 240 30% 8%;
    --background-surface: 240 30% 13%;
    --background-elevated: 240 29% 16%;
    --background-overlay: 240 26% 22%;

    --foreground: 240 45% 93%;
    --foreground-secondary: 240 14% 60%;
    --foreground-muted: 240 14% 60%;
    --foreground-disabled: 240 14% 50%;

    --primary: 228 66% 70%;
    --primary-hover: 228 66% 76%;
    --primary-foreground: 240 30% 8%;
    --primary-glow: 228 66% 70%;

    --card: 240 30% 13%;
    --card-foreground: 240 45% 93%;

    --secondary: 240 29% 16%;
    --secondary-foreground: 240 45% 93%;

    --muted: 240 29% 16%;
    --muted-foreground: 240 14% 60%;

    --accent: 235 39% 19%;
    --accent-foreground: 240 45% 93%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 25% 22%;
    --border-subtle: 240 25% 19%;
    --input: 240 25% 22%;
    --ring: 234 35% 35%;

    --sidebar-background: 240 30% 10%;
    --sidebar-foreground: 240 20% 72%;
    --sidebar-primary: 228 66% 70%;
    --sidebar-primary-foreground: 240 30% 8%;
    --sidebar-accent: 235 39% 19%;
    --sidebar-accent-foreground: 240 45% 90%;
    --sidebar-border: 240 25% 18%;
    --sidebar-ring: 228 66% 70%;

    --success-text: 142 71% 55%;
    --success-bg: 142 71% 45% / 0.12;
    --success-border: 142 71% 45% / 0.3;

    --warning-text: 38 92% 64%;
    --warning-bg: 38 92% 50% / 0.12;
    --warning-border: 38 92% 50% / 0.3;

    --error-text: 0 72% 63%;
    --error-bg: 0 72% 51% / 0.12;
    --error-border: 0 72% 51% / 0.3;

    --info-text: 217 91% 70%;
    --info-bg: 217 91% 60% / 0.12;
    --info-border: 217 91% 60% / 0.3;
  }
}

/************************************
*  		STANDARD-ELEMENTS  			*
************************************/
html{}
body{}
header{}
footer, main + .w-100.f6{
	background: hsl(var(--background-elevated));
	border-top: 1px solid hsl(var(--border));
}
footer a, main + .w-100.f6 a{
	color: hsl(var(--foreground-secondary));
}
footer a:hover, footer a:focus,
main + .w-100.f6 a:hover, main + .w-100.f6 a:focus{
	color: hsl(var(--primary));
}
nav{}
main{}
aside{}
article{}
article a, article a:link, article a:visited{ text-decoration: underline; }
/* article a:before{ content: '\203A'; margin-right: 5px; } */
abbr{}
blockquote{
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: 4px solid hsl(var(--primary));
  background: hsl(var(--accent));
  border-radius: var(--radius);
  font-style: italic;
}
blockquote:before{
  display: none;
}
blockquote p {
  display: block;
  margin: 0;
}
article pre, article code{
	font-family: 'DM Mono', 'Fira Code', monospace;
}
article pre{
	white-space: pre;
	padding: 0;
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-radius: var(--radius);
	border: 1px solid hsl(var(--border));
}
article code{
	font-size: 0.8em;
	line-height: 1.4em;
	padding: 0.15em 0.4em;
	word-break: break-word;
	color: hsl(var(--primary));
	border-radius: calc(var(--radius) - 4px);
}
pre > code{
	font-size: 0.8em;
	padding: 1.2em;
	display: block;
	color: inherit;
	border-radius: var(--radius);
}
pre > code.language-pagebreak{
	display: none;
}
dl{}
dt{}
dd{}
img{}
article h1, article h2, article h3, article h4, article h5, article h6{
	line-height: 1.15em;
	font-weight: 700; 
	line-height: 1em; 
}
h1,h2,h3,h4,h5,h6{ word-wrap: break-word; hyphens: auto; }
article h1{ font-size: 2.2em; margin: 1.4em 0 0.6em; z-index:1; }
article h2{ font-size: 1.6em; margin: 1.8em 0 0.6em; }
article h3{	font-size: 1.3em; margin: 1.6em 0 0.6em; }
article h4{	font-size: 1.1em; margin: 1.4em 0 0.6em; }
article h5{	font-size: 1em; margin: 1.2em 0 0.6em; }
article h6{	font-size: 1em; font-style: italic; font-weight:300; margin: 1em 0 0.6em; }
article .h1, article .h2, article .h3, article .h4, article .h5, article .h6{
	height: auto; /* fix for tachyons */
}
hr{
	border: none;
	border-top: 1px solid;
}
ol{}
footer ul{ padding-left:1em; }
li{}
sup{}
/* Make table look good */
.tm-table{
	overflow-x: auto;
}
table{
	width: 100%;
	border-collapse: collapse;
	font-size: .8em;
}
thead{
	text-align: left;
	background: hsl(var(--background-elevated));
	color: hsl(var(--foreground));
}
tr{
	border-top: 1px solid hsl(var(--border));
	border-bottom: 1px solid hsl(var(--border));
	margin-bottom: -1px;
}
th,td{
	padding: .6em 1em;
}
main b, main strong{
	font-weight: 600;
}

/************************************
*  		STANDARD SUGGESTIONS 		*
************************************/

/* Make links and buttons smooth */
.link, .link:active, .link:focus, .link:hover, .link:link, .link:visited{
	transition: none;
}
a, a:link, a:visited, a:focus, a:hover, a:active, button{
	transition: all .15s ease!important;
	transition-property: color, background-color, text-shadow, border;
}
article a:hover, article a:focus, article a:active,
footer a:hover, footer a:focus, footer a:active{ 
	text-decoration: none;
}

/* For definition list */
dt::after{
	content: ":";
}

/* Make images and image captions look good */
img, figure,figure img{
	max-width: 100%;
	height: auto;
	aspect-ratio: attr(width) / attr(height);
}
figure, video, audio{
	display: table;
	margin: 2em auto;
	padding: 0;
}
figure.right, figure.left {
    width: auto;
    float: none;
    margin: auto auto;
}
figure img{
	display: block;
	margin: auto;
}
figcaption{
	display: table-caption;
	caption-side: bottom;
	font-size: 0.8em;
	margin-top: .5em;
	line-height: 1.2em;
}
.footnotes ol{
	font-size: .8em;
	line-height: 1em;
	margin: 0 0 0 0;
}

/************************************
* 			TYPEMILL-ELEMENTS 		*
************************************/

ul.TOC,.TOC ul{
	list-style: none;
}
.TOC{
	padding: 1em;
	border: 1px solid;
}
.TOC{
	border-color: hsl(var(--border));
}
.TOC li{
	position: relative;
}
.TOC li a{
	text-decoration: none;
	display: inline-block;
	width: 100%;
	border-bottom: 1px dashed;
	line-height: 1em;
	margin: .3em 0;
}
.TOC li a:hover,.TOC li a:focus,.TOC li a:active{
	border-bottom: 1px solid;
}
.TOC li a:after{
	content: '\203A'; 
	position: absolute;
	right: 5px;
	transition: all .2s;
}
.TOC li a:hover:after{
	right: 0px;	
}
.notice1 {
    margin: 1em 0;
    padding: 1em 1.5em;
    border-radius: var(--radius);
}
.notice2 {
    margin: 1em 0;
    padding: 1em 1.5em;
    border-radius: var(--radius);
}
.notice3{
    margin: 1em 0;
    padding: 1em 1.5em;
    border-radius: var(--radius);
    background-color: hsl(var(--info-bg));
    border-left: 4px solid hsl(var(--info-border));
}

/* used for pro content box */
.notice4{
  position: relative;
  text-align: center;
  padding: 1em;
  border: 1px solid;
}

/* Style the optional anchor-links for headlines */
a.tm-heading-anchor {
	display:  inline-block;
	margin-left:  -0.8em;
	width: 0.8em;
	font-weight: 300;
    opacity: 0;
    text-decoration: none;
    float: right;
}
a.tm-heading-anchor:hover,a.tm-heading-anchor:focus {
    opacity: 1;
    text-decoration: none;
}
h2:focus > .tm-heading-anchor, 
h2:hover > .tm-heading-anchor, 
h3:focus > .tm-heading-anchor, 
h3:hover > .tm-heading-anchor, 
h4:focus > .tm-heading-anchor, 
h4:hover > .tm-heading-anchor,
h5:focus > .tm-heading-anchor, 
h5:hover > .tm-heading-anchor,
h6:focus > .tm-heading-anchor, 
h6:hover > .tm-heading-anchor{
	opacity: .5;
	text-decoration: none;
}

/* style the typemill download-button for files */
a.tm-download{}
a.tm-download::before{
	content: "\2193";
  	-webkit-mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
  	mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
  	-webkit-mask-size: cover;
  	mask-size: cover;
	background-color: currentColor;	
	display: inline-block;
	margin-right: 5px;
	width:  24px;
	height: 24px;
	text-decoration: none;
	vertical-align: middle;
}
a.tm-download:hover::before{
	text-decoration: none;
}

/* Fake youtube button. Works with typemillutilities.js */
.video-container{
	position: relative;
	text-align: center;
}
img.youtube{
	position: relative;
	max-width: 560px;
}
button.play-video { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	height: 100px;
	width: 100px;
	background: hsl(var(--destructive));
	color: hsl(var(--primary-foreground));
	border-radius: 50%;
	border: 0px;
	padding: 0;
	text-align: center;
}
button.play-video:hover {
	background: hsl(var(--destructive) / 0.85);
	cursor: pointer;
}
button.play-video::after {
	position: absolute;
	top: 50%;
	margin: -20px 0 0 -15px;
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 20px 0 20px 40px;
	border-color: transparent transparent transparent hsl(var(--primary-foreground) / 0.75);
	content: ' ';
}

.landingpageinfo h2{
	font-size: 2.25rem;
}
.landingpageinfo h3{
	font-size: 1.5rem;
}
.landingpageinfo h4{
	font-size: 1.25rem;
}
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}
/************************************
* 		TACHYONS ADDITIONS 			*
************************************/

/* Keeps Footer at the bottom */
.body-footer-bottom { /* add this class to the body-tag */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.footer-bottom { /* add this class to the footer-tag */
  margin-top: auto;
}
/* Nice set of system fonts, add this to the body-tag */
.sans-serif-tm { 
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 
}
.sans-serif-title{
	font-family: arial,"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 	
}
/* optimize text, add this to the body-tag */
.optimize-text{
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
	text-shadow: hsl(var(--foreground) / 0.01) 0 0 1px;
}
.grid-container{
	display: block;
}
.grid-header, .grid-main, .grid-sidebar{
	display: block;
	width: 100%;
}
.grid-footer{
  grid-column: 1 / -1;
}

.f-large{
	font-size: 4rem;
}
.h4-5{
	height: 12rem;	
}
.shadow-2-hover{
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);	
}
.shadow-2-hover:hover, .shadow-2-hover:focus{
	box-shadow:0px 0px 8px 2px hsl(var(--foreground) / 0.2);
}
.glow-brand{
	box-shadow: 0 0 20px hsl(var(--primary) / 0.15);
}
.glow-brand-sm{
	box-shadow: 0 0 10px hsl(var(--primary) / 0.1);
}
.glow-brand-sm-hover:hover,
.glow-brand-sm-hover:focus{
	box-shadow: 0 0 10px hsl(var(--primary) / 0.1);
}
/************************************
*    STICKY TOPBAR                  *
************************************/
.topbar{
	position: sticky;
	top: 0;
	z-index: 10;
	background: hsl(var(--background) / 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid hsl(var(--border));
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.topbar-logo{
	display: flex;
	align-items: center;
	text-decoration: none;
}
.topbar-logo img{
	height: 28px;
	width: auto;
}
.topbar-title{
	font-family: 'DM Sans', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	letter-spacing: -0.02em;
}
.topbar-account{
	margin-left: auto;
	color: hsl(var(--foreground-secondary));
	text-decoration: none;
}
.topbar-account:hover{
	color: hsl(var(--primary));
}

/* Clarive Elevation System */
.elevation-1{
	box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.elevation-2{
	box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}
.transition-lift{
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.transition-lift:hover{
	transform: translateY(-2px);
}
@keyframes gradient-shift{
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}

/************************************
*    LANDING PAGE SECTIONS          *
************************************/

/* Hero Intro — gradient background + animated CTA */
.landingpageintro{
	background:
		linear-gradient(135deg, hsl(var(--primary) / 0.1) 0%, hsl(var(--accent) / 0.08) 100%),
		radial-gradient(ellipse at 20% 50%, hsl(var(--primary) / 0.06) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, hsl(var(--accent) / 0.04) 0%, transparent 50%),
		hsl(var(--background-surface));
	background-size: 200% 200%;
	animation: gradient-shift 15s ease infinite;
}
.landingpageintro .button{
	border-radius: var(--radius);
	border-color: hsl(var(--primary-foreground));
	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.landingpageintro .button:hover{
	box-shadow: 0 0 10px hsl(var(--primary) / 0.1);
}

/* Info Cards — elevation + hover lift */
.landingpageinfo li{
	background: hsl(var(--background-surface));
	border-radius: var(--radius);
	border: 1px solid hsl(var(--border));
	box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}
.landingpageinfo li:hover{
	box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	transform: translateY(-2px);
}
.landingpageinfo li .button{
	border-radius: var(--radius);
}

/* Teaser Boxes — card style with elevation */
.landingpageteaser > div > div{
	background: hsl(var(--background-surface));
	border-radius: var(--radius);
	border: 1px solid hsl(var(--border));
	box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
	padding: 2rem;
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.landingpageteaser > div > div:hover{
	box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	transform: translateY(-2px);
}
.landingpageteaser .button{
	border-radius: var(--radius);
}

/* Contrast CTA — button glow */
.landingpagecontrast .button{
	border-radius: var(--radius);
	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.landingpagecontrast .button:hover{
	box-shadow: 0 0 20px hsl(var(--primary-foreground) / 0.2);
}

/* Navigation Showcase — muted text */
.landingpagenavi{
	color: hsl(var(--foreground-secondary));
}
.landingpagenavi h2{
	color: hsl(var(--foreground));
}

/* News Cards — elevation + hover lift */
.landingpagenews li{
	background: hsl(var(--background-surface));
	border-radius: var(--radius);
	border: 1px solid hsl(var(--border));
	box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}
.landingpagenews li:hover{
	box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	transform: translateY(-2px);
}
.landingpagenews li h3{
	font-weight: 600;
}
.landingpagenews li small{
	color: hsl(var(--foreground-secondary));
}
.landingpagenews .button{
	border-radius: var(--radius);
}

.margin-bottom-1{
	margin-bottom: -1px;
}
.arrow-after:after{
	content: '\203A'; position: absolute; right:5px;
}
.arrow-after-transition:after{
	content: '\203A'; position: absolute; right:5px;
	transition: all .2s;
}
.arrow-after-transition:hover:after{
	right:0px;
}
.indent-l-1{ padding-left:1rem; }
.indent-l-2{ padding-left:2rem; }
.indent-l-3{ padding-left:3rem; }
.indent-l-4{ padding-left:4rem; }
.indent-l-5{ padding-left:4.5rem; }
.indent-l-6{ padding-left:5rem; }
.b--solid-hover:hover,.b--solid-hover:focus,.b--solid-hover:active{
	border-style: solid;
}
.flex-grow{
	flex-grow: 1;
}

/************************************
*    NAVIGATION STATES              *
************************************/

/* Default nav text */
.mainnavigation a{
	color: hsl(var(--foreground-secondary));
	transition: all 150ms ease;
	border-left: 2px solid transparent;
	display: block;
}
/* Hover */
.mainnavigation a:hover,
.mainnavigation a:focus,
.mainnavigation a:active{
	background: hsl(var(--sidebar-accent));
	color: hsl(var(--sidebar-accent-foreground));
}
/* Active page — indigo border-left + accent bg */
.mainnavigation .active > a:first-child{
	border-left: 2px solid hsl(var(--sidebar-primary));
	background: hsl(var(--sidebar-accent));
	color: hsl(var(--sidebar-accent-foreground));
	font-weight: 500;
}
/* Active parent — subtle tint only */
.mainnavigation .activeParent > a:first-child{
	background: hsl(var(--sidebar-accent) / 0.5);
	color: hsl(var(--foreground));
}

/************************************
*    BREADCRUMB                     *
************************************/

#breadcrumb{
	color: hsl(var(--foreground-secondary));
}
#breadcrumb a{
	color: hsl(var(--foreground-secondary));
}
#breadcrumb a:hover,
#breadcrumb a:focus{
	color: hsl(var(--primary));
	text-decoration-color: hsl(var(--primary));
}

/*************************
*  RESPONSIVE NAVIGATION *
*************************/

.contentnav{
	width: 70%;
	position: absolute;
	right: 0;
	top: 0;
}
.contentnav.collapse .folder > ul{
	display: none;
}
.contentnav .folder.active > ul,.contentnav .folder.activeParent > ul{
	display: block;
}
.burgerbutton{
	display: inline-block;
	font-size: 2em;
	width: 100%;
	text-align: right;
	padding: 2rem;
	box-sizing: border-box;
}
.burgerbutton, .menu{
    transition:all .2s ease;
}
.menu {
   	max-height: 0; /* hide menu completely when burger unchecked */
	margin: 0px;
	overflow:hidden;
	position: relative;
	z-index: 1;
	font-size: 1.3rem;
}
#burger:checked ~ .menu {
	max-height: 200%;
}

#burger:checked ~ .menu {
	background: hsl(var(--background-surface));
	box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	border-radius: var(--radius);
}
.menu a{
	color: hsl(var(--foreground));
}
#burger:checked ~ .burgerbutton {
	color: hsl(var(--foreground));
	background: hsl(var(--background-surface));
}

.logo-image{
	max-width: 200px;
}

@media screen and (min-width:30em){
	h1,h2,h3,h4,h5,h6{ hyphens: manual; }
}

@media (min-width: 40em) {
	figure.right {
	    width: auto;
	    float: right;
	    margin: 0 0 2em 2em;
	}
	figure.left {
	    width: auto;
	    float: left;
	    margin: 0 2em 2em 0;
	}
}

/**************
* 	Forms 	  *
**************/

form{
	width: 100%;
	max-width:  800px;
	border: none;
	margin: 20px 0 20px 0;
	padding: 0 0 0 0;
}
form fieldset{
	width: 100%;
	border: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
form label{
	width: 100%;
	display: block;
	color: hsl(var(--foreground));
	margin-top: 1.5em;
}
form input, form textarea{
	width: 100%;
	display: block;
	border: 1px solid hsl(var(--border));
	padding: 15px;
	margin: 0 0 20px 0;
	background: hsl(var(--background-elevated));
}
form input:focus,form select:focus,form textarea:focus{
	outline: none;
	border: 1px solid hsl(var(--border));
	box-shadow: 0 0 2px hsl(var(--ring));
}
form input[type="submit"],form button,form .button{
	cursor: pointer;
	font-size: 1em;
	border: 0;
	margin-top: 1.5em;
	width: 100%;
	padding: 15px;
}
form input[type="submit"]:hover,form button:hover,.button:hover{
	opacity: 1;
}

/* Clarive gradient button style (matches clarive.app cta-button) */
a.navigation, a.button, .button, button,
form input[type="submit"], form button, form .button{
	color: hsl(var(--primary-foreground)) !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 14px 32px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.938rem !important;
	text-decoration: none !important;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a.navigation:hover, a.button:hover, .button:hover, button:hover,
form input[type="submit"]:hover, form button:hover, form .button:hover{
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px hsl(var(--primary) / 0.25) !important;
	opacity: 1 !important;
}
a.navigation:active, a.button:active, .button:active, button:active{
	transform: scale(0.97) !important;
}


@media screen and (min-width:50em) {
	.grid-container{
		display: grid;
		grid-template-columns: 30% 70%;
		grid-column-gap: 1em;
		grid-template-rows: auto auto;
		grid-template-areas: 
		"gridHeader gridMain"
		"gridSidebar gridMain"
		". gridMain"
	}
	.grid-header{
		grid-area: gridHeader;
	}
	.grid-main{
		grid-area: gridMain;
	}
	.grid-sidebar{
		grid-area: gridSidebar;
	}

	.logo-image{
		max-width: 100%;
	}

	#burger:checked ~ .burgerbutton {
		color: inherit;
		background: inherit;
	}
	#burger:checked ~ .menu {
		background: inherit;
	}
	.menu a{
		color: inherit;
	}
	.contentnav{
		position: relative;
		width: auto;
	}
	.burgerbutton{
		display: none;
	}
	.menu{
		font-size: inherit;
		max-height: inherit;
	}
	a.tm-heading-anchor {
		float: left;
	}
}

@media print {
	#contentnav, nav, #bottompager,.widgetcontainer,.funcicons,.account,footer{
		display:  none;
	}
	.grid-main{
	    margin-top: -10px!important;
	    padding-top: 0px!important;
	}
	.logo-image{
		max-width: 150px;
	}	
	main{
		padding-bottom: 0!important;
	}
	aside{
		padding-top: 0!important;
		padding-bottom: 0!important;
	}
	main,footer{
		border:  0px!important;
	}
	footer .ph3
	{
		padding-top: 0;
		padding-bottom: 0;
	}
	body, .landingpagecontrast, .account, main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews, button.expander, .notice4{
		background: #fff!important;
		color:  black!important;
	}
	article{
		font-size: .8em;
	}
	article a[href]{
		color: black;
		text-decoration: underline;
	}
	article a[href]:after {
		content: " (" attr(href) ")";
	}
	nav .mw6{
		width:  100%;
	}
	a.tm-heading-anchor {
		display: none;
	}
}