#About {margin: auto; max-width: 800px; padding-top: 250px; text-align: center;}
#About .MainText {padding-left: 40px;}
#AboutStepPoints {padding-top: 100px; padding-right: 15px;}

@media (min-width: 800px) {
	#About .MainText {padding-left: 200px;}
}

@media (min-width: 1024px) {
	#About .MainText {text-align: left;}
}/* AI updated, model - Composer — hero uses GraceProductIntro top padding; body follows */
#ArticleDetail {padding-top: 0;}
#ArticleDetailTraditional {margin-top: 160px;}
#ArticleDetailTraditional .Text > :is(p, ul, h2, h3, h4, .Quote) {max-width: 750px; margin-left: auto; margin-right: auto;}
#ArticleDetail .ArticleDetailHero {margin-bottom: 0;}
#ArticleDetail .ArticleDetailHeroPicture img {display: block;}

#ArticleParts {display: flex; flex-wrap: wrap; gap: 80px; max-width: 1400px; padding: 0 15px; margin: 0 auto 140px auto;}
#ArticleParts > div {max-width: 440px; min-width: 300px; flex: 1;}

#ArticleParts h2 {margin-bottom: 15px;}

#ArticleDetail .TextContent :is(p, ul, ol) {font-size: 18px; line-height: 150%; margin-bottom: 15px;}/* AI updated, model - Composer — id matches ArticlesTpl overview wrapper */
#ArticlesOverview {padding-top: 240px; padding-right: 15px; --out-of-nav-max-width: 1330px; margin-left: auto; margin-right: auto;}:root {
	--screen-height: 100dvh;

	--bg-color: #141414;
	--font-color: white;

	--grace-color: #F2B61F;
	--timeless-color: #27A7D8;
	--custom-color: #B8252F;
	/*--c: #8B1A26;*/

	--big-heading-font-size: 48px;
	--sub-heading-font-size: 24px;
	--heading-font-size: 32px;

	--highlight-color: #41D857;

	--slight-gradient: linear-gradient(to bottom, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 100) 50%, rgba(30, 30, 30, 0) 100%);
}

* {box-sizing: border-box;}

html, body {background-color: var(--bg-color); scroll-behavior: auto; margin: 0; overflow-x: clip; scrollbar-gutter: stable;}
main {position: relative; z-index: 2; /*overflow: scroll; overflow-x: clip;*/ padding-bottom: 160px; overflow: hidden; width: 100%;}
main:empty {min-height: 0; height: 0;}
html, body, a, input, textarea, select, button {color: var(--font-color); font-family: var(--raleway); font-weight: normal; text-decoration: none;}
html, body, input, textarea, select, button {font-size: 18px; line-height: normal;}

.MovingOut {position: absolute; height: var(--screen-height); overflow: hidden;}
.MovingIn {position: absolute; height: var(--screen-height); overflow: hidden;}

input, textarea {background: #404040; border: none; padding: 0 15px;}

h2 {font-size: 36px; letter-spacing: 0.5px;}
.BlockHeading {margin-bottom: 30px; text-transform: uppercase;}

.TextContainer {max-width: 800px; margin: auto;}

h1, h2, h3, h4, h5, h6, p, ol, ul {margin-top: 0;}

.TextContent, .Text {
	--font-size: 20px;
}
:is(.Text, .TextContent) :is(p, ul, ol, li, td), .Text, .Text a {font-size: var(--font-size); line-height: 150%; margin-top: 0;}
:is(.Text, .TextContent).MainText * {font-size: var(--font-size); line-height: 120%;}
/* AI updated, model - Composer — legal pages: restore heading hierarchy and list rhythm inside flattened MainText */
.Text.MainText.LegalDoc h2 {font-size: 32px; font-weight: 600; line-height: 125%; margin: 1.45em 0 0.55em;}
.Text.MainText.LegalDoc h3 {font-size: 22px; font-weight: 600; line-height: 125%; margin: 1.1em 0 0.45em;}
.Text.MainText.LegalDoc ul, .Text.MainText.LegalDoc ol {margin: 0 0 1em; padding-left: 1.45em;}
.Text.MainText.LegalDoc li {margin-bottom: 0.45em;}
.Text.MainText.LegalDoc li:last-child {margin-bottom: 0;}
.Text.MainText.LegalDoc p + ul, .Text.MainText.LegalDoc p + ol {margin-top: 0.35em;}
.Text a:not(.Button) {position: relative; display: inline-block; opacity: 0.85;}
.Text a:not(.Button)::after {display: block; content: ''; width: 0; height: 1px; background: var(--font-color); transition: width 0.1s; position: absolute; bottom: 0;}
.Text a:not(.Button):hover::after {width: 100%;}

h2 {letter-spacing: normal; font-size: 42px; line-height: 125%;}

.TextCenter {text-align: center;}

.Button {border-radius: 5px; border: 1px solid var(--highlight-color); display: inline-flex; padding: 11px 41px; min-width: 212px; text-align: center; justify-content: center; background: transparent; font-size: 20px; font-weight: bold; color: rgba(255,255,255,1); cursor: pointer; transition-property: background-color, color, box-shadow; transition-duration: 125ms;}
.BoldButton {background-color: var(--highlight-color); border-color: var(--highlight-color); color: #111111;}
.ColoredTextBtn {color: var(--highlight-color);}

.Button:not(.BoldButton):hover {background-color: rgba(255,255,255,0.25);}
.BoldButton:hover {box-shadow: 0 0 10px var(--highlight-color);}

:root {
	--out-of-nav-max-width: calc(100% - (var(--nav-width) + var(--nav-left) + 10px) * 2);
}
.OutOfNavSpace {max-width: min(var(--out-of-nav-max-width), calc(100% - 410px));}
.OutOfNavSpaceFromLeft {max-width: var(--out-of-nav-max-width); padding-left: 0;}

@media (max-width: 1300px) {
	.OutOfNavSpace {max-width: min(var(--out-of-nav-max-width), calc(100% - 205px)); padding-left: 205px;}
}

@media (min-width: 1024px) {
	.OutOfNavSpaceFromLeft {padding-left: calc((var(--nav-width) + var(--nav-left) + 10px)); width: calc(100% - 15px); max-width: none; margin-left: 0;}
}
@media (min-width: 1400px) {
	.OutOfNavSpaceFromLeft {max-width: var(--out-of-nav-max-width); padding-left: 0; margin-left: auto; margin-right: auto;}
}

@media (max-width: 1024px) {
	:root {
		--big-heading-font-size: 34px;
	}

	h2 {font-size: 30px;}

	.OutOfNavSpaceFromLeft {max-width: 100%; padding-left: 10px; padding-right: 10px;}
}

@media (max-width: 770px) {
	.OutOfNavSpaceFromLeft {padding-left: 17px; padding-right: 17px;}
}

.HighlightColor {color: var(--highlight-color);}
.H strong {color: var(--highlight-color);}

.TypeGrace {--highlight-color: var(--grace-color);}
.TypeTimeless {--highlight-color: var(--timeless-color);}
.TypeCustom {--highlight-color: var(--custom-color);}.ItemWithPointer {display: grid; grid-template-columns: 53px 1fr; gap: 15px;}

.ItemWithPointer > div:first-child {position: relative;}

.ItemWithPointer svg {position: absolute; left: -20px; top: -18px;}
.ItemWithPointer svg:first-child path {fill: rgba(255,255,255,0.5);}
.ItemWithPointer svg + svg {opacity: 0;}
.ItemWithPointer:hover svg + svg {opacity: 1;}

.TimelessTrustedBy {margin-bottom: 160px;}
.TimelessTrustedBy .Text {max-width: 800px; margin-left: auto; margin-right: auto;}

.TimelessTrustedByLogos {display: flex; gap: 50px; justify-content: center; align-items: center; margin-bottom: 160px;}
.TimelessTrustedByLogos a {display: block;}
.TimelessTrustedByLogos a img {max-width: 120px; width: 100%; height: auto; max-height: 70px; filter: grayscale(100%); opacity: 0.55; transition: opacity 0.2s ease, filter 0.2s ease;}
.TimelessTrustedByLogos a:hover img {filter: grayscale(0%); opacity: 1;}.Dialog {position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 2; background: rgba(20,20,20,0.2); backdrop-filter: blur(1px);}
.DialogContent {max-width: min(90%, 720px); padding: 54px 131px; background: rgba(20,20,20,0.9); text-align: center;}
.DialogContent .HeadingMessage {font-size: 24px; font-family: var(--michroma); margin-bottom: 49px;}

@media (max-width: 800px) {
	.DialogContent {padding: 54px;}
}.FAQ {max-width: 900px; margin: auto;}
.FAQItem + .FAQItem {margin-top: 22px;}
.FAQItem h3 {font-size: 20px; font-weight: 500; margin-bottom: 5px;}
.FAQItem .TextContent p {font-weight: 200; line-height: 150%;}.PhoneFrame {--width: 200px;}
.PhoneFrame {width: var(--width); flex: 0 0 var(--width); aspect-ratio: 1/2.1; border-radius: calc(var(--width) / 10); overflow: hidden; position: relative;}
.PhoneFrame > * {object-fit: cover; object-position: center top; width: 100%; height: 100%;}

.PhoneFrame::after {content: ''; position: absolute; top: 2%; left: 30%; right: 30%; height: 4%; border-radius: 999999px; background: var(--bg-color);}.QuickContact {max-width: 1220px; margin-left: auto; margin-right: auto;}
.QuickContact > * {}

.QuickContactBoxes {display: flex; justify-content: center; align-items: flex-start; gap: 0 40px; flex-wrap: wrap;}

.QuickContact h2 {margin-bottom: 4px;}
.QuickContact .FormBox p {margin-bottom: 24px;}

.QuickContact label {display: flex; gap: 15px; width: 520px; height: 50px; background-color: #1D1D1D; border-radius: 5px; border: 1px solid rgba(255,255,255,10%);}
.QuickContact label + label {margin-top: 18px;}
.QuickContact label div {padding: 10px 0 0 38px; font-weight: bold; font-size: 20px; color: rgba(255,255,255,50%);}
.QuickContact label:has(textarea) {height: 142px;}
.QuickContact input, .QuickContact textarea {background-color: transparent; width: 100%;}
.QuickContact textarea {padding-top: 14px;}

.QuickContact .InfoBox {position: relative; border-radius: 10px; border: 1px solid rgba(255,255,255,10%); padding: 41px 44px 50px 44px; min-width: 297px; font-size: 18px;}
.QuickContact .InfoBox a {display: block; line-height: 140%;}
.QuickContact .InfoBox a:hover {text-decoration: underline;}
.QuickContact .InfoBox svg {position: absolute; right: 0; bottom: 0; pointer-events: none;}
.QuickContact .InfoBoxes {display: flex; gap: 38px; padding-top: 40px; flex-wrap: wrap; justify-content: center;}
.QuickContact .InfoBox .Heading {font-size: 32px; font-weight: 600; margin-bottom: 11px;}

.QuickContact .ButtonBox {text-align: right; padding-top: 30px;}
.QuickContact .ButtonBox button {text-transform: uppercase; box-shadow: 2px 2px 0px #27A7D8, -2px -2px 0px #F1B61F;}
.QuickContact .ButtonBox button:hover {box-shadow: 2px 2px 5px #27A7D8, -2px -2px 5px #F1B61F;}
.QuickContact .ButtonBox button:active {box-shadow: 2px 2px 0px #F1B61F, -2px -2px 0px #27A7D8;}

@media (prefers-color-scheme: dark) {
	.QuickContact .ButtonBox button {text-transform: uppercase; box-shadow: 1px 1px 0px #27A7D8, -1px -1px 0px #F1B61F;}
	.QuickContact .ButtonBox button:hover {box-shadow: 2px 2px 0px #27A7D8, -2px -2px 0px #F1B61F; background-color: transparent;}
	.QuickContact .ButtonBox button:active {box-shadow: 1px 1px 0px #F1B61F, -1px -1px 0px #27A7D8;}
}

@media (prefers-color-scheme: light) {
	.QuickContact label, .QuickContact .InfoBox {background: linear-gradient(225deg, #E3EDF8 0%, #C5D7EB 100%); border: 1px solid rgba(0, 0, 0, 0.1);}
	.QuickContact label div {color: rgba(20,20,20,50%);}

	.QuickContact .ButtonBox button {background: linear-gradient(87.41deg, #C5D7EB 0.06%, #E3EDF8 99.94%);}
}

@media (max-width: 1300px) {
	.QuickContactForm label {width: 469px;}
}

@media (max-width: 1100px) {
	.QuickContact {margin-left: 10%;}

	.QuickContactForm div {font-size: 20px; width: 119px;}

	.FootContact svg {width: auto; height: 320px;}
}

@media (max-width: 900px) {
	.QuickContact {gap: 30px;}
	.QuickContact .Heading {font-size: 30px;}
}

@media (max-width: 780px) {
	.QuickContact {display: block;}

	.QuickContactInfo {display: flex; justify-content: space-evenly; flex-wrap: wrap;}
	.QuickContactInfo .Heading {flex: 0 0 100%;}
	.QuickContactPart {margin: 0 auto;}

	.QuickContactForm label {width: 100%;}
}

@media (max-width: 550px) {
	.QuickContactForm label {display: block;}
	.QuickContactForm label > * {width: 100%;}
}

.InquiryForm {padding-top: 60px; padding-bottom: 60px;}
.InquiryForm .Heading {font-size: 32px; font-weight: 500; margin-bottom: 21px;}

.InquiryForm .QuickContactPart {padding-left: 0; margin-left: 0;}
.InquiryForm .Description + .QuickContactPart {margin-top: 30px;}
.InquiryForm .PartialHeading {font-size: 25px;}
.InquiryForm strong {font-weight: bold;}
.InquiryForm .Description a {text-decoration: underline;}

@media (min-width: 1024px) {
	.InquiryForm {display: flex; gap: 10%; padding-left: 10%;}
}.StepPoints {--columns: 3; --max-width: 1330px; display: grid; grid-template-columns: repeat(var(--columns), 1fr); gap: 72px 100px; max-width: var(--max-width); margin-left: auto; margin-right: auto;}
.StepPoints .No {font-size: 32px; font-family: var(--michroma); opacity: 0.3; margin-bottom: 16px;}
.StepPoints h3 {font-weight: 500; font-size: 24px; margin-bottom: 8px;}
.StepPoints .TextContent * {font-size: 20px;}

.StepPoints .ReadMoreBtn {font-weight: bold; margin-top: 15px; text-align: right;}

.StepPoints .PointWithIcon .PointParts {display: flex; gap: 20px;}

@media (min-width: 1024px) {
}

@media (max-width: 1100px) {
	.StepPoints {column-gap: 50px; --max-width: 800px;}
}

@media (max-width: 1024px) and (min-width: 550px) {
}

@media (max-width: 1024px) {
	.StepPoints {column-gap: 20px; --columns: 2;}
}

@media (max-width: 550px) {
	.StepPoints {--columns: 1;}
}.GracePage h3 {margin-bottom: 5px;}
.GracePage h3 + p {margin-bottom: 35px;}

.GraceProductIntro h1 {font-size: var(--big-heading-font-size); margin-bottom: 15px; margin-top: 0;}
.GraceProductIntro {padding-top: 265px;}
.GraceProductIntro.GraceProductSideBySide img {max-width: min(900px, 40vw);}

.GraceProductSideBySide {display: flex; position: relative; gap: 50px; align-items: center; margin-bottom: 100px; justify-content: center;}
.GraceProductSideBySide .Text {max-width: 600px;}
/*#GraceIntro svg {position: absolute; left: -150px; top: 215px;}*/
.GraceProductSideBySide .TextContent {position: relative; z-index: 2;}
.GraceProductSideBySide .TextContent * {font-size: 20px; line-height: 150%;}
.GraceProductSideBySide img {max-width: min(600px, 40vw);}

.GraceProductTrioPoints {max-width: min(900px, 100%); margin-left: auto; margin-right: auto; margin-bottom: 100px;}
.GraceProductQuadroPoints {margin-bottom: 100px;}

:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) {display: flex; justify-content: center; gap: 40px; margin-left: auto; margin-right: auto;}
:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) .Text {min-width: 250px; max-width: 300px;}
:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) .Text p {max-width: min(300px, 100%);}
:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) img {max-width: min(250px, 100%); height: auto; margin-bottom: 25px;}
:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) h3 {font-size: var(--sub-heading-font-size); margin-bottom: 15px;}

.GraceProductQuadroPoints {display: grid; grid-template-columns: repeat(4, 1fr);}
.GraceProductQuadroPoints .Text {min-width: 0; max-width: none;}

.Text:has(h2):has(+.GraceProductTrioPoints) h2 {margin-bottom: 60px;}

.GraceProductFoundersQuote {text-align: center; background-image: var(--slight-gradient); padding: 60px 0; margin-bottom: 100px;}
.GraceProductFoundersQuote p {max-width: 900px; margin-left: auto; margin-right: auto;}
.GraceProductFoundersQuote p:last-child {text-align: right;}

.GraceProductFAQ {margin-bottom: 122px;}
.GraceProductFAQ .FAQQ {margin-bottom: 15px;}
.GraceProductFAQ .FAQQA {border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; padding: 25px 33px; max-width: 800px; margin-left: auto; margin-right: auto;}
.GraceProductFAQ .FAQQA + .FAQQA {margin-top: 14px;}
.GraceProductFAQ .FAQA {line-height: 125%;}

@media (max-width: 1500px) {
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) {gap: 20px;}
	/*:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) .Text {max-width: 200px; min-width: 200px;}*/
}

@media (max-width: 1350px) {
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) h3 {font-size: 22px;}
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) .Text p {font-size: 16px;}
}

@media (max-width: 1200px) {
	.GraceProductQuadroPoints {display: grid; grid-template-columns: repeat(2, 1fr);}
	.GraceProductQuadroPoints img {width: 100%; max-width: 100%;}
	.GraceProductQuadroPoints .Text {max-width: 300px; margin-left: auto; margin-right: auto;}
}

@media (max-width: 1024px) {
	.GraceProductIntro {padding-top: 120px;}

	.GraceProductSideBySide {flex-direction: column; margin-bottom: 160px;}
	.GraceProductSideBySide img {max-width: 100%; order: 2;}
	.GraceProductIntro.GraceProductSideBySide img {max-width: 100%;}

	.Text:has(+ :is(.GraceProductTrioPoints, .GraceProductQuadroPoints)), :is(.GraceProductTrioPoints, .GraceProductQuadroPoints) {max-width: 600px; margin-left: auto; margin-right: auto;}
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) {flex-wrap: wrap; margin-bottom: 160px;}
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) h3 {margin-bottom: 10px; font-weight: 600;}
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) img {order: 3;}
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) .Text {min-width: 300px; display: flex; flex-direction: column; align-items: stretch;}

	.GracePage .TextCenter.Text {text-align: left;}
}

@media (max-width: 640px) {
	.Text:has(+ :is(.GraceProductTrioPoints, .GraceProductQuadroPoints)), :is(.GraceProductTrioPoints, .GraceProductQuadroPoints), :is(.GraceProductTrioPoints, .GraceProductQuadroPoints) :is(.Text, img) {max-width: 350px;}
	.GraceProductQuadroPoints {display: flex;}
}

@media (max-width: 600px) {
	:is(.GraceProductTrioPoints, .GraceProductQuadroPoints) .Text {max-width: none;}
}/* =============================================
   NEW DROP-IN STYLES — grace-mail-pricing.css
   ============================================= */

/* --- Toggle --- */
#GraceMailBillingToggle { display: none; }

.GraceMailBillingSwitch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 28px auto 0;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    color: rgba(255,255,255,0.5);
}

.GraceMailBillingSwitch .SwitchTrack {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    position: relative;
    transition: background 150ms, border-color 150ms;
    flex-shrink: 0;
}

.GraceMailBillingSwitch .SwitchTrack::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: transform 150ms, background 150ms;
}

.GraceMailBillingSave {
    font-size: 11px;
    font-family: var(--michroma);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grace-color);
    opacity: 0;
    transition: opacity 150ms;
    white-space: nowrap;
}

/* Toggle checked = annual */
#GraceMailBillingToggle:checked ~ .GraceMailTiersWrap .GraceMailBillingSwitch .SwitchTrack {
    background: rgba(242,182,31,0.2);
    border-color: rgba(242,182,31,0.5);
}
#GraceMailBillingToggle:checked ~ .GraceMailTiersWrap .GraceMailBillingSwitch .SwitchTrack::after {
    transform: translateX(20px);
    background: var(--grace-color);
}
#GraceMailBillingToggle:checked ~ .GraceMailTiersWrap .GraceMailBillingSave {
    opacity: 1;
}
#GraceMailBillingToggle:checked ~ .GraceMailTiersWrap .GraceMailBillingSwitch .LabelMonthly {
    color: rgba(255,255,255,0.35);
}
#GraceMailBillingToggle:checked ~ .GraceMailTiersWrap .GraceMailBillingSwitch .LabelAnnual {
    color: rgba(255,255,255,0.9);
}

/* --- Tiers wrapper --- */
.GraceMailTiersWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.GraceMailTiers {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    max-width: 1060px;
    margin: 36px auto 0;
}

/* --- Individual tier card --- */
.GraceMailTier {
    flex: 1;
    min-width: min(100%, 300px);
    max-width: 330px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 32px 28px 28px;
    background: #1d1d1d;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 150ms;
}

.GraceMailTier:hover { border-color: rgba(242,182,31,0.35); }

.GraceMailTier.TierFeatured {
    border-color: rgba(242,182,31,0.45);
    background: #211f18;
}

.GraceMailTierBadge {
    position: absolute;
    top: -1px;
    right: 24px;
    background: var(--grace-color);
    color: #111;
    font-family: var(--michroma);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 0 0 6px 6px;
}

.GraceMailTierName {
    font-family: var(--michroma);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grace-color);
    margin-bottom: 4px;
}

.GraceMailTierStorage {
    font-size: 14px;
    opacity: 0.4;
    margin-bottom: 28px;
    font-weight: 500;
}

/* Price display — monthly default, annual hidden */
.GraceMailTierPriceMonthly,
.GraceMailTierPriceAnnual { display: flex; flex-direction: column; }

.GraceMailTierPriceAnnual { display: none; }

.GraceMailTierAmount {
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
    color: white;
}

.GraceMailTierAmount sup {
    font-size: 20px;
    font-weight: normal;
    vertical-align: super;
    opacity: 0.6;
}

.GraceMailTierAmount sub {
    font-size: 14px;
    font-weight: normal;
    opacity: 0.45;
    vertical-align: baseline;
}

.GraceMailTierTotal {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    margin-top: 12px;
    margin-bottom: 28px;
}

.GraceMailTierTotal em {
    font-style: normal;
    color: var(--grace-color);
}

.GraceMailTierDivider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin-bottom: 20px;
}

.GraceMailTierDesc {
    font-size: 15px;
    line-height: 155%;
    color: rgba(255,255,255,1);
    flex: 1;
    margin-bottom: 24px;
}

.GraceMailTierCta {
    display: block;
    text-align: center;
    border-radius: 5px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 125ms, box-shadow 125ms;
    border: 1px solid var(--grace-color);
    color: #111;
    background: var(--grace-color);
}

.GraceMailTierCta:hover { box-shadow: 0 0 12px var(--grace-color); }

.GraceMailTierCta.TierCtaOutline {
    background: transparent;
    color: white;
}

.GraceMailTierCta.TierCtaOutline:hover { background: rgba(242,182,31,0.07); }

/* Annual toggle — swap price blocks */
#GraceMailBillingToggle:checked ~ .GraceMailTiersWrap .GraceMailTierPriceMonthly { display: none; }
#GraceMailBillingToggle:checked ~ .GraceMailTiersWrap .GraceMailTierPriceAnnual  { display: flex; }

/* Note below tiers */
.GraceMailPricingNote {
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.3);
    max-width: 560px;
    margin: 24px auto 0;
    line-height: 160%;
}

.GraceMailPricingNote a {
    color: var(--grace-color);
    opacity: 0.7;
    text-decoration: underline;
}

@media (max-width: 500px) {
    .GraceMailTierAmount { font-size: 38px; }
}


/* --- Self-hosted Purchase Block --- */
.GraceMailBuyBlock {
    max-width: 780px;
    margin: 48px auto 0;
    border: 1px solid rgba(242,182,31,0.3);
    border-radius: 10px;
    background: #1d1d1d;
    padding: 48px 52px;
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.GraceMailBuyLeft {
    flex: 1;
}

.GraceMailBuyLabel {
    font-family: var(--michroma);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grace-color);
    margin-bottom: 10px;
}

.GraceMailBuyPrice {
    font-size: 56px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 12px;
}

.GraceMailBuyPrice sup {
    font-size: 24px;
    font-weight: normal;
    vertical-align: super;
    opacity: 0.6;
}

.GraceMailBuyPriceSub {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 28px;
}

.GraceMailBuyIncludes {
    list-style: none;
    padding: 0;
    margin: 0 0 0;
}

.GraceMailBuyIncludes li {
    font-size: 15px;
    color: rgba(255,255,255, 1);
    line-height: 150%;
    padding: 6px 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.GraceMailBuyIncludes li::before {
    content: '—';
    color: var(--grace-color);
    flex-shrink: 0;
    font-size: 12px;
}

.GraceMailBuyRight {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

.GraceMailBuyRight .BoldButton {
    min-width: 0;
    width: 100%;
    padding: 13px 20px;
    font-size: 16px;
}

.GraceMailBuyRight .Button {
    min-width: 0;
    width: 100%;
    padding: 13px 20px;
    font-size: 15px;
}

.GraceMailBuyNote {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    text-align: center;
    line-height: 140%;
    margin-top: 4px;
}

@media (max-width: 700px) {
    .GraceMailBuyBlock {
        flex-direction: column;
        padding: 32px 24px;
        gap: 28px;
    }
    .GraceMailBuyRight {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .GraceMailTierPriceMonthly { font-size: 34px; }
    .GraceMailBuyPrice { font-size: 44px; }
}.GracePage {
	--highlight-color: var(--grace-color);
}

.GracePage {padding-bottom: 150px;}

.GraceIntro {display: flex; position: relative; padding-top: 265px; margin-bottom: 126px; align-items: flex-start;}
.GraceIntro .Text {padding-right: 10%;}
/*#GraceIntro svg {position: absolute; left: -150px; top: 215px;}*/
.GraceIntro h1 {font-size: var(--big-heading-font-size); margin-bottom: 15px; margin-top: 0;}
.GraceIntro .TextContent {position: relative; z-index: 2; max-width: 80%;}
.GraceIntro .TextContent * {font-size: 20px; line-height: 150%;}
.GraceIntro svg {max-width: min(600px, 40vw); transform: scale(1.6); transform-origin: center center;}

.BrandHeading {margin-bottom: 10px; font-size: calc(var(--big-heading-font-size) * 0.3); color: var(--highlight-color); font-family: var(--michroma); letter-spacing: 2px; display: flex; align-items: flex-end; gap: 25px; text-transform: uppercase;}
.GraceIntro .BrandHeading svg {width: auto; height: 40px; transform: none;}

#GraceStepPoints h2 {font-size: var(--big-heading-font-size); font-family: var(--raleway); margin-bottom: 40px; letter-spacing: 0; text-align: center;}

.TimelessIncludesItems {display: grid; gap: 60px; grid-template-columns: repeat(3, 1fr); margin-bottom: 100px; max-width: 1081px; margin-left: auto; margin-right: auto;}
.TimelessIncludesItem {display: flex; gap: 12px;}
.TimelessIncludesItem svg {width: 57px; height: auto;}
.TimelessIncludesItem p {font-size: 18px; line-height: 130%;}

.PointsOfTimeless {max-width: 1300px; margin-left: auto; margin-right: auto;}

.TimelessInfoBlock > div:first-of-type {margin-bottom: 60px;}
.TimelessInfoBlock > div:nth-of-type(2) {margin-bottom: 60px;}

.TimelessInfoBlock {padding-bottom: 0;}

#GraceProductsList {
	--cols: 1;
}
#GraceProductsList {display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1081px; margin-left: auto; margin-right: auto; margin-bottom: 150px;}
.GraceProduct {
	flex: 1; min-width: min(100%, 340px);
	max-width: 340px;
	--heading-font-size: 32px;
}
.GraceProduct {padding: 30px; background: #222222; position: relative; border-radius: 6px;}
.GraceProduct article > * {position: relative; z-index: 1;}
.GraceProduct .Image {position: absolute; z-index: 0; left: 0; top: 0; right: 0; bottom: 0;}
.GraceProduct .Image img {object-fit: cover; object-position: 30% center; width: 100%; height: 100%; opacity: 0.075; filter: blur(4px);}
.GraceProduct h3 {font-size: var(--heading-font-size); font-weight: 600;}
.GraceProduct .No {opacity: 0.5; font-family: var(--michroma); font-size: 20px; margin-bottom: 20px; float: right;}
.GraceProduct .ReadMoreBtn {margin-right: 0; margin-left: auto; font-weight: bold;}
.GraceProduct .TextContent {flex: 1;}
.GraceProduct .TextContent {
	--font-size: 18px;
}

@media (pointer: fine) {
	.GraceProduct, .GraceProduct h3, .GraceProduct img {transition-duration: 150ms;}
	.GraceProduct {transition-property: background-color;}
	.GraceProduct h3 {transition-property: color;}
	.GraceProduct .Image img {transition-property: opacity;}
	.GraceProduct:hover {background-color: var(--bg-color);}
	.GraceProduct:hover img {opacity: 0.8;}
	.GraceProduct:hover :is(h3, .ReadMoreBtn) {color: var(--highlight-color);}
}

@media (prefers-color-scheme: light) {
	.GraceProduct {background-color: #F3F9FF;}
}

@media (min-width: 700px) {
	.GraceProduct .No {float: none;}
	#GraceProductsList {
		--cols: 2;
	}
}

@media (min-width: 1024px) {
	#GraceProductsList {
		--cols: 3;
	}
	.GraceProduct article {aspect-ratio: 1 / 1.7; display: flex; flex-direction: column;}
}

@media (min-width: 1024px) and (max-width: 1300px) {
	.GraceProduct {padding: 30px 15px;}
}

@media (max-width: 1280px) {
}

@media (max-width: 1024px) {
	.GraceIntro {flex-direction: column; padding-top: 120px;}
	.GraceIntro .GraceIntroImage {transform: scale(1); max-width: none; width: 150%; margin-left: -25%; height: auto;}
	.GraceIntro .TextContent {max-width: 100%;}

	.GraceProduct h3 {
		--heading-font-size: 26px;
	}

	#GraceProductsList {gap: 10px;}
}

@media (max-width: 900px) {
	.TimelessIncludesItems {gap: 20px;}
	.TimelessIncludesItem svg {width: 35px;}
}

@media (max-width: 800px) {
	.TimelessIncludesItems {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
	#GraceStepPoints h2 {font-size: 32px;}
}

@media (max-width: 550px) {
	.TimelessIncludesItems {grid-template-columns: 1fr;}
}

@media (min-width: 1024px) {

}

@media (min-width: 1224px) {
	.TimelessInfoBlock {display: grid; grid-template-rows: auto 1fr; grid-template-columns: 410px 1fr; gap: 30px; align-items: start; max-width: 1400px; margin: auto; padding-right: 15px;}
	.TimelessInfoBlock > div:first-of-type {max-width: 320px;}
	.TimelessInfoBlock > div:first-of-type {grid-row: 1 / span 2; height: 100%;}
}

@media (min-width: 1380px) {
	.TimelessInfoBlock > div {max-width: 868px;}
}@media (prefers-color-scheme: light) {
	.GraceProductFAQ .FAQQA {background-image: var(--cool-gradient); border: 1px solid rgba(0,0,0,0.1);}
}

.HPIntro {--logo-top-padding: calc(var(--screen-height) * 0.2);}
@media (prefers-color-scheme: light) and (min-width: 1024px) {
	.HPIntro {--logo-top-padding: 0px;}
}
@media (prefers-color-scheme: light) and (max-width: 1024px) {
	#HPIntroLogo {transform: scale(125%);}
}

.HPIntro {position: relative; height: var(--screen-height); background: url(/Grace/Projects/LinkV/Design/Images/HP/HPIntroDots.svg);}
#HPIntroLogo, .HPIntroBg {width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center;}
#HPIntroLogo img {margin-top: var(--logo-top-padding); max-width: 100%;}
.HPIntroBg img {height: calc(var(--screen-height) * 0.98 + var(--logo-top-padding)); width: auto; max-width: 95%;}

.HPIntroText {position: absolute; left: 0; right: 0; top: calc(var(--logo-top-padding) + var(--screen-height) * 0.25); text-align: center;}
.HPIntroText h1 {font-size: 96px; line-height: 100px; font-family: Syncopate; letter-spacing: 0.5em; font-weight: bold;}
.HPIntroText div {font-size: 20px; line-height: 23px; font-weight: 200; letter-spacing: 0.2em; margin-bottom: 21px;}
.HPIntroText div span {font-weight: 500;}

.HPIntroRight {position: absolute; left: 0; right: 0; top: calc(var(--screen-height) * 0.8); display: flex; gap: 73px; justify-content: center;}
.HPIntroRight .HPIntroGrace path {fill: var(--grace-color);}
.HPIntroRight .HPIntroTimeless path {fill: var(--timeless-color);}

.HPIntroPageName {position: static; transform: translateY(calc(var(--screen-height) * 0.05)); left: 0; right: 0; text-align: center; z-index: 10; padding: 0 40px; height: 0;}
.HPIntroPageName div {font-family: var(--michroma); font-size: 15px; letter-spacing: 0.2em; display: inline-block; padding: 7px 15px 0 15px;}
.HPIntroPageName svg {display: block; margin-left: auto; margin-right: auto;}

.HPNewsBlock {padding-top: 189px;}
.HPUpdatesBlock {padding-top: 189px;}

#HPGraceTimeless {padding-top: 251px; padding-bottom: 482px; position: relative; --out-of-nav-max-width: 100%; overflow: hidden;}
#HPGraceTimeless h2 {margin-bottom: 117px; max-width: 924px; padding-left: 19%;}
.HPGraceTimelessItems {display: grid; grid-template-columns: 1fr 1fr; gap: 117px 142px; max-width: 924px; margin: 0 0 0 10%;}
#HPGraceTimeless h3 {font-size: 32px; font-weight: 500; margin-bottom: 18px;}
#HPGraceTimeless p {font-size: 20px;}

#HPGraceTimeless > svg {position: absolute; bottom: 0; right: 10%; animation: HPGraceTimelessRotation; animation-timing-function: linear; animation-duration: 100s; animation-iteration-count: infinite;}

#HPGraceTimeless > svg .Rotate {animation: HPGraceTimelessRotation; animation-timing-function: linear; animation-duration: 100s; animation-iteration-count: infinite; transform-origin: center center;}

@keyframes HPGraceTimelessRotation {
	0% {transform: rotate(0);}
	100% {transform: rotate(360deg);}
}

.HPMainClaims {margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 85px; --out-of-nav-max-width: 1345px;}
.HPMainClaim {flex: 1;}
.HPMainClaim h2 {font-size: 32px; font-family: inherit; font-weight: 500; letter-spacing: normal; margin-bottom: 10px;}
.HPMainClaim .Text {font-size: 20px;}

.FootContact {padding-bottom: 194px; position: relative;}
.FootContact svg {position: absolute; bottom: 0; right: 5%;}

.HPTimeless {padding-top: 260px;}
.HPTimeless::after {display: block; max-width: 196px; height: 1px; background: rgba(255,255,255,20%); margin-left: auto; margin-right: auto; content: ''; margin-top: 98px; margin-bottom: 98px;}
.HPTimeless .Boxes {display: flex; flex-wrap: wrap; gap: 25px; max-width: 1170px; margin-left: auto; margin-right: auto;}
.HPTimeless .Boxes a {flex: 1; min-width: min(500px, 100%); border: 1px solid rgba(255,255,255,10%); position: relative; border-radius: 12px; padding: 50px 40px 40px 53px; display: flex; flex-direction: column; overflow: hidden; transition-property: border-color; transition-duration: 300ms;}
.HPTimeless .Boxes a:hover {border-color: rgba(255,255,255,20%);}
.HPTimeless .Boxes a:hover img {transform: scale(105%);}
.HPTimeless .Boxes img {pointer-events: none; position: absolute; right: 0; bottom: 0; transition-duration: 300ms; transition-property: transform;}
.HPTimeless .Boxes .Text {max-width: 65%; flex: 1;}
.HPTimeless .BoxBtn {font-weight: 600; font-size: 18px; color: var(--timeless-color); text-decoration: underline;}
.HPTimeless h3 {margin-bottom: 15px; font-size: 32px; font-weight: 600;}
.HPTimeless p {margin-bottom: 73px; font-size: 18px;}

.HPGrace {max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 60px;}
.HPGrace a {border: 1px solid rgba(255,255,255,10%); position: relative; border-radius: 12px; padding: 50px 40px 40px 53px; display: flex; flex-direction: column; overflow: hidden; transition-property: border-color; transition-duration: 300ms;}
.HPGrace a + a {margin-top: 25px;}
.HPGrace a:hover {border-color: rgba(255,255,255,20%);}
.HPGrace a:hover img {transform: scale(105%);}
.HPGrace img {pointer-events: none; position: absolute; right: 0; bottom: 0; transition-duration: 300ms; transition-property: transform;}
.HPGrace .Text {max-width: 65%; flex: 1;}
.HPGrace .BoxBtn {display: block; font-weight: 600; font-size: 18px; color: var(--grace-color); text-decoration: underline;}
.HPGrace h3 {margin-bottom: 15px; font-size: 32px; font-weight: 600;}
.HPGrace p {margin-bottom: 73px; font-size: 18px;}
.HPGrace img:not(.Interface) {height: 100%;}
.HPGrace .Interface {max-height: 100%; max-width: 30%; margin-right: 0; margin-bottom: -10px; z-index: 2; width: auto; height: auto;}

@media (prefers-color-scheme: light) {
	:is(.HPTimeless, .HPGrace) a {background: linear-gradient(225deg, #E3EDF8 0%, #C5D7EB 100%); border: 1px solid rgba(0, 0, 0, 0.1);}
	.HPGrace img:not(.Interface) {display: none;}
	:is(.HPTimeless, .HPGrace) h3 {text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);}
	:is(.HPTimeless, .HPGrace) .BoxBtn {color: #141414;}
}

.HPCenterLogo {text-align: center;}
.HPAbout {max-width: 600px; padding: 0 15px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 167px;}

@media (max-width: 1400px) {
	.HPMainClaims {gap: 30px; padding-right: 20px; grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 1200px) {
	.QuickContact {margin-left: 0;}

	.HPGrace a {padding-top: 30px;}
	.HPGrace .Text {max-width: 100%;}
	.HPGrace p {margin-bottom: 110px;}
	.HPGrace .Interface {max-width: none; height: 160px;}
}

@media (max-width: 1100px) {
	.HPIntroText h1 {font-size: 80px;}

	.HPMainClaims {gap: 25px;}
	.HPMainClaim h2 {font-size: 29px;}

	.HPGraceManagerGrid {gap: 80px;}

	.QuickContact {gap: 40px;}
}

@media (max-width: 1024px) {

	.HPIntro {height: var(--screen-height);}
	.HPIntroBg img {height: auto; margin-top: -100px;}
	.HPIntroText {top: calc(var(--logo-top-padding) + var(--screen-height) * 0.15);}

	.HPIntroRight {height: var(--screen-height);}
	.HPMainClaims {grid-template-columns: repeat(2, 1fr);}

	.HPIntroPageName {top: calc(var(--screen-height) * 0.02);}

	.HPGraceManagerGrid {gap: 20px; flex-wrap: wrap;}
	.HPGraceManagerGrid > div {flex: 0 0 100%;}
	.HPGraceManagerGrid > div:nth-of-type(1) {margin-left: 60px;}
	.HPGraceManagerGrid > div:nth-of-type(2) {text-align: center;}

	.HPGraceTimelessItems {column-gap: 82px;}

	.HPIntroRight {right: 20px;}

	.HPIntroText div {display: flex; flex-wrap: wrap; gap: 20px 10px; max-width: 80%; margin-left: auto; margin-right: auto; justify-content: center;}
	.HPIntroText div span {display: block; opacity: 0;}
}

@media (max-width: 950px) {
	.HPLogs {padding-left: 0;}
}

@media (max-width: 900px) {
	.HPIntroText h1 {font-size: 50px;}

	.HPNewsLogs h2 {width: 100%; text-align: center; margin-left: 0;}

	.HPGraceTimelessItems {column-gap: 30px;}

	#HPSecurityStatement a {font-size: 30px;}
	
	.HPIntroRight {height: auto; width: 100%; left: 0; right: 0; top: calc(var(--screen-height) * 0.7); flex-direction: row;}
}

@media (max-width: 800px) {
	.HPNews {flex: 0 0 min(100%, 500px);}
	.HPLogs {flex: 0 0 100%;}
	.HPLogsItem, body .HPLogs h3 {max-width: min(100%, 500px); margin-left: auto; margin-right: 0;}
	/*.HPNewsLogs > * {flex: 0 0 100%;}*/

	.QuickContact {flex-direction: column;}
	.QuickContactForm label {max-width: 100%;}
}

@media (max-width: 760px) {
	.HPTimeless {padding-top: 0;}
}

@media (max-width: 700px) {

	.HPMainClaims {grid-template-columns: repeat(1, 1fr);}

	.HPGraceTimelessItems {grid-template-columns: 1fr;}
}

@media (max-width: 650px) {
	.HPTimeless .Boxes a {padding: 25px 15px;}

	.HPGrace a {padding: 15px;}
	.HPGrace p {margin-bottom: 15px;}
	.HPGrace .Interface {position: relative; height: auto; width: 100%; margin-bottom: 20px;}
}

@media (max-width: 600px) {
	.HPIntroText h1 {font-size: 40px;}

	.HPIntroText div {font-size: 18px;}

	.HPTimeless .Boxes .Text {max-width: 100%;}
	.HPTimeless .Boxes p {margin-bottom: 100px;}
}

@media (max-width: 380px) {
	.HPIntroText h1 {font-size: 30px;}
}.HPLogs h3 {font-size: 20px; font-weight: 600;}
.HPLogsItem {display: block; max-width: 881px; padding: 25px 33px; border-radius: 5px; border: 1px solid rgba(255,255,255,10%); margin-left: auto; margin-right: auto; background: linear-gradient(270deg, rgba(20, 20, 20, 0.8) 0%, rgba(30, 30, 30, 0.8) 51.5%, rgba(20, 20, 20, 0.8) 100%);}
.HPLogsItem:hover {border-color: rgba(255,255,255,20%);}
.HPLogsItem .Version {margin-bottom: 10px;}
.HPLogsItem, .HPLogsItem * {font-size: 18px; margin-bottom: 0; margin-top: 0;}
.HPLogsItem + .HPLogsItem {margin-top: 10px;}

@media (prefers-color-scheme: light) {
	.HPLogsItem {background: linear-gradient(225deg, #E3EDF8 0%, #C5D7EB 100%); border: 1px solid rgba(0, 0, 0, 0.1);}
}.HPNews {display: flex; flex-wrap: wrap; gap: 15px 3%;}
.HPNewsItem {flex: 1; background: #1D1D1D; border-radius: 5px; border: 1px solid rgba(255,255,255,10%); transition: border-color 160s; padding: 34px 32px; display: flex; flex-direction: column; min-width: min(340px, 100%);}
.HPNewsItem:hover {border-color: rgba(255,255,255,20%);}
.HPNewsItem h3 {font-size: 26px; font-weight: 600; margin-bottom: 12px; margin-top: 0; letter-spacing: 1px; line-height: 125%;}
.HPNewsItem .Text {flex: 1; margin-bottom: 15px;}
.HPNewsItem .Text * {font-weight: 300; font-size: 20px;}
.HPNewsItem .ArticleBtn {display: block; margin-left: auto; margin-right: 0; font-weight: 600; text-decoration: underline;}

@media (prefers-color-scheme: light) {
	.HPNewsItem {background: linear-gradient(225deg, #E3EDF8 0%, #C5D7EB 100%); border: 1px solid rgba(0, 0, 0, 0.1);}
}#Footer {margin-top: 160px; line-height: 160%; padding-top: 60px; border-top: 1px solid rgba(255,255,255,0.08);}
#Footer > div {display: flex; align-items: start; flex-wrap: wrap;}
#Footer > div > div {flex: 1;}

#Footer .Legal {flex: 0 0 100%; display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 40%; margin-top: 100px;}
#Footer .Legal nav {display: flex; gap: 10px;}

#Footer .Heading {font-weight: 500; margin-bottom: 16px; font-size: 20px; font-family: var(--michroma);}

#Footer .Explore ul {list-style: none; margin: 0; padding: 0;}
#Footer .Explore a {display: inline-block; padding: 5px 0;}

#Footer .LinkV {display: flex; align-items: center; justify-content: left; font-family: Syncopate; gap: 25px; font-size: 26px; letter-spacing: 0.5em; font-weight: bold; text-decoration: none; margin-bottom: 50px;}
#Footer .LinkV img {width: 90px; height: auto;}

#Footer .Langs {display: flex; align-items: center; justify-content: left; flex-wrap: wrap; gap: 5px 10px; text-transform: uppercase; margin-top: 50px;}
#Footer .LangsH {flex: 0 0 100%; text-transform: none; font-weight: 500; opacity: 0.5; font-size: smaller; letter-spacing: 0.5px;}

#Footer a[href*="mailto"], #Footer a[href*="tel"] {display: block; width: max-content; padding: 5px 0;}
#Footer address {display: block; font-style: normal; margin-top: 25px;}

#Footer a {position: relative;}
#Footer a::after {display: block; content: ''; width: 0; height: 1px; background: var(--font-color); transition: width 0.1s; position: absolute; bottom: 0;}
#Footer a:hover::after {width: 100%;}@media (prefers-color-scheme: light) {
	:root {
		--font-color: #2E2E2E;
		--highlight-color: #14141499;

		--slight-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
		--cool-gradient: linear-gradient(225deg, #E3EDF8 0%, #C5D7EB 100%);
	}

	body {--bg-color: #e3edf8;}

	.Button {color: var(--font-color);}
	input, textarea {background-color: rgba(151,151,151,0.3);}

	.HPIntroPageName div {background-color: #e3edf860; box-shadow: 0 0 10px #e3edf860;}
	.QuickContactForm label {border-bottom-color: rgba(20, 20, 20, 0.5);}

	svg [fill="white"] {fill: var(--font-color);}
	svg [stroke="white"] {stroke: var(--font-color);}
}#LogsDetail {padding-top: 250px; padding-bottom: 250px;}

#LogsDetailTop {max-width: 800px; margin: auto auto 150px auto;}
#LogsDetailTop h1 {font-size: 38px; font-family: var(--michroma); margin-bottom: 20px;}
#LogsDetailTop .TextContent * {font-size: 20px;}

#LogsDetailParts {max-width: 1440px; margin: auto; padding: 0 15px; display: flex; gap: 80px 100px; flex-wrap: wrap; justify-content: center;}
#LogsDetailParts h2 {margin-bottom: 20px;}
#LogsDetailParts .TextContent * {font-size: 20px;}

.LogsDetailPart, .LogsDetailPartTexts {min-width: 300px; flex: 1;}
.LogsDetailPart:has(img) {display: flex; gap: 30px; flex: 0 0 70%;}
.LogsDetailPart:not(:has(img)), .LogsDetailPartTexts {max-width: 400px;}
.LogsDetailPartMedia {flex: 1;}
.LogsDetailPart img {width: 100%;}

@media (max-width: 950px) {
	#LogsDetailTop {padding-left: 50px; padding-right: 15px;}
}.SignUp {background: var(--slight-gradient); padding-left: 15px; padding-right: 15px; text-align: center;}
.SignUpIn {max-width: 1000px; margin-left: auto; margin-right: auto; border: 1px solid rgba(255,255,255,0.1); margin-top: 44px; padding: 39px 15px;}

@media (prefers-color-scheme: light) {
	.SignUpIn {border-color: rgba(0,0,0,0.2);}
}

.SignUpHeading {font-size: var(--big-heading-font-size); font-weight: bold; margin-bottom: 12px;}
.SignUpSubheading {font-size: var(--sub-heading-font-size); font-weight: bold; margin-bottom: 24px;}

.SignUp b {color: var(--highlight-color);}

.SignUpFormIn {max-width: 572px; margin-left: auto; margin-right: auto;}

.SignUp :is(input, textarea) {border: none; width: 100%; padding-left: 15px; padding-right: 15px; font-weight: 500;}
.SignUp input {height: 40px;}
.SignUp textarea {height: 127px; padding-top: 10px; padding-bottom: 10px;}
.SignUp label span {display: block; margin-bottom: 4px; font-weight: 500; font-size: 14px;}
.SignUpInputsRow {display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-bottom: 52px;}
.SignUpInputsRow label {text-align: left;}

.SignUp .SignUpText {margin-bottom: 34px;}

.SignUp button {margin-top: 32px; font-size: 16px;}:root {
	--nav-width: 200px;
	--nav-left: 20px;
}

nav[data-g] {
	--point-size: 14px;
	--sub-point-size: 6px;
	/* AI updated, model - Composer — synced from JS for same-level sub-point crossfade */
	--nav-sub-dur: 320ms;/*10s; /*320ms;*/
	--nav-sub-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

nav[data-g] {position: fixed; left: 0; top: 0; bottom: 0; z-index: 2;}
nav[data-g] .BurgerMenu {position: absolute; top: 85px; left: 115px; width: 62px; height: 23px; cursor: pointer;}

nav[data-g] .PageNavLine {position: absolute; top: 0; bottom: 0; left: 20px; width: 1px; background-color: rgba(255,255,255,0.2);}
nav[data-g] .PageNavPages {position: absolute; top: 20px; left: 0; height: calc(100% - 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 0; transition-duration: var(--nav-sub-dur); transition-property: transform, opacity; opacity: 1;}

#WebNavigationPanel {display: none;}
/*#WebNavigationPanel {position: absolute; transform: translate(-100%); width: max(782px, 100%); height: 700px; background-color: #141414; top: 0; display: flex; flex-direction: column; justify-content: space-evenly;}
#WebNavigationPanel.Opened {transform: translate(0);}
#WebNavigationPanel .WebNavLine {position: absolute; left: 96px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.2);}
#WebNavigationPanel .Close {position: absolute; right: 26px; top: 28px;}*/

.WebNavItem {position: relative; margin-left: 98px; padding-left: 27px;}
.WebNavItem::before {position: absolute; left: -12px; top: 5px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,1); background-color: #141414; content: '';}

.WebNavItem a {font-family: var(--michroma); font-size: 20px; text-transform: uppercase; letter-spacing: 0.2em;}
.WebNavItem:hover::before {background-color: white;}

nav[data-g] .PageNavPage {width: 200px; display: flex; flex-direction: column; transition: flex var(--nav-sub-dur);}
.Opened .PageNavPage {width: 200px;}
.PageNavPage .Point {display: flex; gap: 16px; align-items: center; margin-left: calc(var(--point-size) / 2 * -1); font-size: 14px; line-height: 120%; position: relative;}
.PageNavPage .Point::before {content: ''; display: block; flex: 0 0 var(--point-size); width: var(--point-size); height: var(--point-size); border-radius: 9999px; border: 1px solid white;}
.PageNavPage.CurrentPage {flex: 1;}

.PageNavPage .SubPoints {display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; margin-left: calc(var(--sub-point-size) / 2 * -1); position: relative; overflow: hidden;}
/*.PageNavPage .SubPoint {display: flex; align-items: center; flex: 1; width: 100%;}*/
.PageNavPage .SubPoint {position: absolute; left: 0; width: 100%; cursor: pointer; font-size: 13px;}
.PageNavPage .SubPoint {display: flex; gap: 10px; align-items: center; width: 100%;}
.PageNavPage .SubPoint::before {content: ''; display: block; flex: 0 0 var(--sub-point-size); height: var(--sub-point-size); border: 1px solid white; border-radius: 9999px;}

.PageNavPage :is(.Point, .SubPoint) span {position: relative;}
.PageNavPage :is(.Point, .SubPoint) span::after {position: absolute; top: 100%; right: 0; bottom: 0; left: 0; width: 0; height: 1px; background-color: rgba(255,255,255,1); content: ''; transition: width 100ms linear;}
.PageNavPage :is(.Point, .SubPoint):hover span::after {width: 100%;}

.PageNavLine .Pointer {position: absolute; margin-left: calc(var(--point-size) / 2 * -1 + 1px); left: 0; top: 0; width: var(--point-size); height: var(--point-size); background-color: white; border-radius: 99999px; box-shadow: 0 0 10px white; margin-top: 2px; z-index: 2;}

.PageNavPage.PreviousLevel {transform: translateX(-50%); position: absolute;}
.PageNavPages.PreviousLevel {transform: translateX(-30%); opacity: 0;}
.PageNavPages.PreviousLevel.OldPreviousLevel {transform: translateX(30%); opacity: 0;}
.PageNavPages.NewLevelIncoming {opacity: 0; transform: translate(120%);}
.PageNavPages.NewLevelIncoming.OldLevelIncoming {opacity: 0; transform: translate(-120%);}

.BurgerMenu {display: none; position: relative; z-index: 2;}

@media (max-width: 800px) {



}

@media (max-width: 1024px) {

	:root {--nav-width: 300px;}

	nav[data-g] {/*transform: translateX(-100%);*/ width: 100%; transition-property: transform, opacity; transition-duration: var(--nav-sub-dur); transition-timing-function: ease-in; background-image: linear-gradient(to right, #141414ee, #14141499); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none;}
	nav.MenuOpened {transform: translateX(0); opacity: 1; transition-timing-function: ease-out; pointer-events: auto;}

	.BurgerMenu {bottom: 20px; right: 15px; top: auto; left: auto; display: block; position: fixed; z-index: 2; background: none; border: none;}
	nav[data-g] .PageNavPages {top: 0; height: 100%; padding: 25px 0 50px 0;}

	nav[data-g] .PageNavLine {transform: none;}

	nav[data-g] .Point span, nav[data-g] .SubPoint span {width: 100%;}
}

/* AI updated, model - Composer */
nav[data-g] .PageNavPage.PageNavPageSubFade {flex: 0;}
nav[data-g] .PageNavPage .SubPoints {z-index: 0;}
nav[data-g] .PageNavPage.CurrentPage .SubPoints {z-index: 1;}
nav[data-g] .PageNavPage .SubPoint.SubPointLeaving {transition: opacity var(--nav-sub-dur) var(--nav-sub-ease), top var(--nav-sub-dur) var(--nav-sub-ease); opacity: 0; pointer-events: none; top: 0 !important;}
nav[data-g] .PageNavPage .SubPoint.SubPointEnterFrom {opacity: 0;}
nav[data-g] .PageNavPage .SubPoint.SubPointEnterRun {transition: opacity var(--nav-sub-dur) var(--nav-sub-ease), top var(--nav-sub-dur) var(--nav-sub-ease); opacity: 1;}

.NavPageNextBar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px 20px max(18px, env(safe-area-inset-bottom)); text-align: center; transform: translateY(-100%); opacity: 0; transition: transform 240ms ease, opacity 240ms ease; pointer-events: none;}
.NavPageNextBar.NavPageNextBarVisible {transform: translateY(0); opacity: 1;}
.NavPageNextBarLink {width: max-content; font-family: var(--michroma); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; display: inline-block; padding: 12px 25px;}
.NavPageNextBarLink::after {content: '→'; font-size: 27px;}
.NavPageNextBarLink:hover {color: var(--highlight-color);}
.NavPageNextBar.NavPageNextBarVisible .NavPageNextBarLink {pointer-events: auto;}

@media (prefers-color-scheme: light) {
	.NavPageNextBar {background: linear-gradient(to top, rgba(227, 237, 248, 0.96), rgba(227, 237, 248, 0.88)); border-top-color: rgba(46, 46, 46, 0.12);}
	nav[data-g] .PageNavLine {background-color: rgba(46,46,46,0.2);}
	.PageNavPage .Point::before, .PageNavPage .SubPoint::before {border-color: var(--font-color);}
	.PageNavLine .Pointer {border-color: var(--font-color); background-color: var(--font-color);}

	@media (max-width: 1024px) {
		nav[data-g] {background-image: linear-gradient(to right, #e3edf8ee, #e3edf899);}
	}
}
.ServicePage .OutOfNavSpaceFromLeft {margin-bottom: 144px;}

.FineGrid2x2 {display: grid; gap: 40px; max-width: 1270px; margin-left: auto; margin-right: auto;}
.FineGrid2x2.VariableCellsHeights {align-items: start;}
.FineGrid2x2 .TimelessFineGridItem {padding-bottom: 144px;}
.FineGrid2x2 .TimelessFineGridItem img {max-width: 100%; max-height: 100%;}

.LimitSizes {max-width: 1100px; margin-left: auto; margin-right: auto;}

.GraceProductSideBySide.LimitSizes img {max-width: 480px;}

.OurExpertiseBlock {margin-bottom: 144px;}

.ListBoxes {list-style: none; padding: 0;}
.ListBoxes li + li {margin-top: 15px;}

.ServiceThreeCols {margin-bottom: 144px;}
.ServiceThreeCols h3 {font-size: 32px; font-weight: bold; text-align: center;}
.ServiceThreeCols .Categories {margin-top: 65px;}

.BasicBoxWithColor {border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 28px 44px; position: relative; text-align: left;}
.BasicBoxWithColor .BgImg {position: absolute; right: 0; bottom: 0; max-width: 100%; pointer-events: none;}
.BasicBoxWithColor :is(h4, h3) {font-size: 24px; font-weight: 600; margin-bottom: 6px; text-align: left;}
.BasicBoxWithColor p:last-child {margin-bottom: 0;}

.ServicePricingBoxes {margin-bottom: 73px;}
.ServicePricingBoxes > * {max-width: 1100px; margin-left: auto; margin-right: auto;}
.ServicePricingBoxes .TimelessFineGridItem {background-color: #1D1D1D;}
.ServicePricingBoxes .FineGrid2x2 .TimelessFineGridItem {padding: 29px 31px 39px 31px;}
.ServicePricingBoxes .Price {text-align: right; font-weight: bold; margin-top: 40px; font-size: 20px;}
.ServicePricingBoxes h3 {margin-bottom: 17px; font-size: 24px; color: var(--highlight-color); font-weight: bold;}
.ServicePricingBoxes h4 {margin-bottom: 2px; font-size: 20px; font-weight: 600;}
.ServicePricingBoxes p {margin-bottom: 17px;}
.ServicePricingBoxes a {color: var(--highlight-color); text-decoration: underline;}

.ServiceIntroHiddenQuote {height: 0; overflow: hidden;}
.ServiceIntroHiddenQuote.Opened {height: auto;}

@media (min-width: 860px) {
	.FineGrid2x2 {grid-template-columns: 1fr 1fr;}

	.ServiceThreeCols .Categories {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
}

@media (min-width: 1024px) {
	.ServiceThreeCols .Categories {display: grid; grid-template-columns: 1fr 1fr 1fr;}
}.MediaGallery {display: flex; gap: 15px; justify-content: center; margin-bottom: 25px;}
.MediaGallery .MediaItem {max-width: 750px;}
.MediaGallery .MediaItem img {max-width: 100%; height: auto;}.Quote {padding: 25px 50px; border: 1px solid #ffffff20;}

.Quote p::before, .Quote p::after {content: '"'; display: inline; font-size: 30px;}

.QuoteSignature {display: grid; grid-template-columns: 50px 1fr; gap: 25px; align-items: center;}
.QuoteSignature .Image {aspect-ratio: 1 / 1;}
.QuoteSignature img {object-position: center; object-fit: cover; width: 100%; height: 100%; border-radius: 9999px;}.ThemeSwitcher {position: fixed; top: 81px; right: 121px; width: 97px; height: 41px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.5);}
.ThemeSwitcherPoint {position: absolute; left: 48px; top: 3px; width: 45px; height: 35px; border-radius: 10px; background-color: white; display: flex; align-items: center; justify-content: center;}

@media (max-width: 800px) {
	.ThemeSwitcher {top: 20px; right: 25px; width: 50px; height: 25px;}
	.ThemeSwitcherPoint {width: 25px; height: 21px; border-radius: 8px; left: 25px; top: 1px;}
	.ThemeSwitcherPoint svg {height: auto; width: 10px;}
}/** default layout is the same as Grace pages, here are redefined or added only specific options for Timeless */
.TimelessPage {
	--highlight-color: var(--timeless-color);
}

.TimelessFineGrid {display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 18px; max-width: 1184px; margin-left: auto; margin-right: auto; margin-bottom: 142px;}
.TimelessFineSubgridLeft {display: grid; gap: 18px; grid-template-rows: 1fr 1fr;}
.TimelessFineSubgridRight {display: grid; gap: 18px; grid-template-rows: 1fr 1fr 1fr;}
.TimelessFineGridItem {padding: 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden;}

.TimelessFineGridItem img {position: absolute; right: 0; bottom: 0; pointer-events: none; z-index: 0;}
.TimelessFineSubgridLeft .TimelessFineGridItem:nth-of-type(1) img {width: 90%;}
.TimelessFineSubgridLeft .TimelessFineGridItem:nth-of-type(2) img {width: 100%;}
.TimelessFineSubgridRight .TimelessFineGridItem img {height: 100%;}

.TimelessFineGridItem h3 {font-size: 32px; font-weight: 600; margin-bottom: 14px;}
.TimelessFineGridItem p {line-height: 150%;}
.TimelessFineGridItem :is(h3, p) {z-index: 1; position: relative;}
.TimelessFineSubgridRight .TimelessFineGridItem {padding-left: 52px;}
.TimelessFineSubgridRight .TimelessFineGridItem p {max-width: 60%;}

@media (max-width: 770px) {
	.TimelessFineGrid {display: block;}
	.TimelessFineSubgridLeft {margin-bottom: 18px;}
	.TimelessFineSubgridLeft, .TimelessFineSubgridRight {display: flex; flex-direction: column;}
	.TimelessFineSubgridLeft .TimelessFineGridItem img, .TimelessFineSubgridRight .TimelessFineGridItem img {width: auto !important; height: 50%;}
	.TimelessFineSubgridLeft .TimelessFineGridItem p, .TimelessFineSubgridRight .TimelessFineGridItem p {max-width: 100%;}
	.TimelessFineSubgridRight .TimelessFineGridItem {padding-left: 20px;}
	.TimelessFineSubgridLeft .TimelessFineGridItem, .TimelessFineSubgridRight .TimelessFineGridItem {padding-bottom: 60px;}
}

.TimelessVariantSideBySide h3 {margin-bottom: 4px; font-weight: 600; font-size: 28px;}

.TimelessNumbers {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 145px;}
.TimelessNumberBlock {flex: 0 0 255px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(270deg, rgba(20, 20, 20, 0.8) 0%, rgba(30, 30, 30, 0.8) 51.5%, rgba(20, 20, 20, 0.8) 100%); border-radius: 10px; text-align: center; padding: 19px 15px;}
.TimelessNumberBlock .No {color: var(--highlight-color); font-size: 28px; font-weight: bold; margin-bottom: 5px;}
.TimelessNumberBlock .NoLabel {font-size: 20px; font-weight: 500;}

.TimelessThreeTwoLines {flex-wrap: wrap; max-width: 1207px;}
.TimelessThreeTwoLines .Text {min-width: min(350px, 100%); max-width: 350px;}
.TimelessThreeTwoLines h3 {font-weight: 600;}
.TimelessThreeTwoLines img {width: 100%; max-width: none;}

.TimelessServicesCloud {padding-top: 60px; padding-bottom: 60px; background-image: var(--slight-gradient); margin-bottom: 100px;}
.TimelessServicesCloudList {max-width: 755px; text-align: center; font-size: 23px; font-weight: 500; margin-left: auto; margin-right: auto; line-height: 150%;}

.TimelessPricingSamples {margin-bottom: 164px;}
.TimelessPricingSamples :is(.GraceProductQuadroPoints, .GraceProductTrioPoints) {margin-bottom: 47px;}
.TimelessPricingSamplesItem {border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); background-color: #1d1d1b; padding: 29px 0 26px 31px; display: flex; flex-direction: column;}
.TimelessPricingSamplesItem :is(h3, .Price) {padding-right: 26px;}
.TimelessPricingSamplesItem h3 {font-size: 20px; margin-bottom: 5px;}
.TimelessPricingSamplesItem .Price {flex: 1; margin-bottom: 19px; font-size: 18px; font-weight: bold; color: #8E8E8E;}
.TimelessPricingSamplesItem img {margin-bottom: 0; max-width: 100%;}
.TimelessPricingSamplesNote {font-size: 20px; font-weight: 500; color: #898989; text-align: center; margin-bottom: 34px;}

.TimelessAppPricingSamples .TimelessPricingSamplesItem {padding-right: 20px; padding-bottom: 0;}
.TimelessAppPricingSamples .TimelessPricingSamplesItem img {max-width: 70%; display: block; margin-left: auto; margin-right: 0;}

#TimelessTypes {display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; overflow: hidden; max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 100px;}
#TimelessTypes > div {white-space: nowrap; font-weight: 500; font-family: Michroma; letter-spacing: 1px; font-size: 14px;}

#TimelessReferences {max-width: 1400px; margin-left: auto; margin-right: auto; margin-bottom: 40px;}
#TimelessReferences .TimelessRef {flex: 0 0 100%;}
#TimelessReferences .TimelessRef + .TimelessRef {margin-top: 30px;}
.TimelessRefGallery {overflow: auto; scroll-snap-type: x mandatory; display: flex; gap: 5px;}
.TimelessRefGallery .PhoneFrame {--width: 130px; scroll-snap-align: center;}
.TimelessRef {display: flex; gap: 20px;}
.TimelessRef > * {flex: 1;}
.TimelessRef h3 {font-size: 15px; font-weight: 500; margin-bottom: 5px;}
.TimelessRef h4 {font-size: 14px; opacity: 0.8; margin-bottom: 15px;}
.TimelessRef .Link {font-weight: 500; text-decoration: underline; display: inline-block; margin-top: 15px; overflow: hidden; white-space: nowrap;}

@media (min-width: 1000px) {
	.TimelessRefGallery {flex: 0 0 33%;}
	.TimelessRef h3 {font-size: 24px;}
}

#TimelessIntro {margin: auto; max-width: 600px; padding-left: 40px; position: relative; padding-top: 265px; margin-bottom: 126px;}
#TimelessIntro svg {position: absolute; left: -150px; top: 215px;}
#TimelessIntro h1 {font-size: 48px; font-family: var(--michroma); margin-bottom: 15px;}@media (prefers-color-scheme: light) {
	.TimelessFineGridItem, .TimelessNumberBlock, .TimelessPricingSamplesItem {background-image: var(--cool-gradient); border: 1px solid rgba(0,0,0,0.1);}
}/* AI updated, model - Composer — update detail hero version line; shares ArticleDetail shell */
#ArticleDetail .ArticleDetailHero .Version {margin-bottom: 14px; margin-top: 0;}
/* AI updated, model - Composer — id matches UpdatesTpl overview wrapper */
#UpdatesOverview {padding-top: 240px; padding-right: 15px; --out-of-nav-max-width: 1330px; margin-left: auto; margin-right: auto;}
:root {
	--screen-height: 100dvh;

	--bg-color: #141414;
	--font-color: white;

	--grace-color: #F2B61F;
	--timeless-color: #27A7D8;
	--custom-color: #B8252F;
	/*--c: #8B1A26;*/

	--big-heading-font-size: 48px;
	--sub-heading-font-size: 24px;
	--heading-font-size: 32px;

	--highlight-color: #41D857;

	--slight-gradient: linear-gradient(to bottom, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 100) 50%, rgba(30, 30, 30, 0) 100%);
}

* {box-sizing: border-box;}

html, body {background-color: var(--bg-color); scroll-behavior: auto; margin: 0; overflow-x: clip; scrollbar-gutter: stable;}
main {position: relative; z-index: 2; /*overflow: scroll; overflow-x: clip;*/ padding-bottom: 160px; overflow: hidden; width: 100%;}
main:empty {min-height: 0; height: 0;}
html, body, a, input, textarea, select, button {color: var(--font-color); font-family: var(--raleway); font-weight: normal; text-decoration: none;}
html, body, input, textarea, select, button {font-size: 18px; line-height: normal;}

.MovingOut {position: absolute; height: var(--screen-height); overflow: hidden;}
.MovingIn {position: absolute; height: var(--screen-height); overflow: hidden;}

input, textarea {background: #404040; border: none; padding: 0 15px;}

h2 {font-size: 36px; letter-spacing: 0.5px;}
.BlockHeading {margin-bottom: 30px; text-transform: uppercase;}

.TextContainer {max-width: 800px; margin: auto;}

h1, h2, h3, h4, h5, h6, p, ol, ul {margin-top: 0;}

.TextContent, .Text {
	--font-size: 20px;
}
:is(.Text, .TextContent) :is(p, ul, ol, li, td), .Text, .Text a {font-size: var(--font-size); line-height: 150%; margin-top: 0;}
:is(.Text, .TextContent).MainText * {font-size: var(--font-size); line-height: 120%;}
/* AI updated, model - Composer — legal pages: restore heading hierarchy and list rhythm inside flattened MainText */
.Text.MainText.LegalDoc h2 {font-size: 32px; font-weight: 600; line-height: 125%; margin: 1.45em 0 0.55em;}
.Text.MainText.LegalDoc h3 {font-size: 22px; font-weight: 600; line-height: 125%; margin: 1.1em 0 0.45em;}
.Text.MainText.LegalDoc ul, .Text.MainText.LegalDoc ol {margin: 0 0 1em; padding-left: 1.45em;}
.Text.MainText.LegalDoc li {margin-bottom: 0.45em;}
.Text.MainText.LegalDoc li:last-child {margin-bottom: 0;}
.Text.MainText.LegalDoc p + ul, .Text.MainText.LegalDoc p + ol {margin-top: 0.35em;}
.Text a:not(.Button) {position: relative; display: inline-block; opacity: 0.85;}
.Text a:not(.Button)::after {display: block; content: ''; width: 0; height: 1px; background: var(--font-color); transition: width 0.1s; position: absolute; bottom: 0;}
.Text a:not(.Button):hover::after {width: 100%;}

h2 {letter-spacing: normal; font-size: 42px; line-height: 125%;}

.TextCenter {text-align: center;}

.Button {border-radius: 5px; border: 1px solid var(--highlight-color); display: inline-flex; padding: 11px 41px; min-width: 212px; text-align: center; justify-content: center; background: transparent; font-size: 20px; font-weight: bold; color: rgba(255,255,255,1); cursor: pointer; transition-property: background-color, color, box-shadow; transition-duration: 125ms;}
.BoldButton {background-color: var(--highlight-color); border-color: var(--highlight-color); color: #111111;}
.ColoredTextBtn {color: var(--highlight-color);}

.Button:not(.BoldButton):hover {background-color: rgba(255,255,255,0.25);}
.BoldButton:hover {box-shadow: 0 0 10px var(--highlight-color);}

:root {
	--out-of-nav-max-width: calc(100% - (var(--nav-width) + var(--nav-left) + 10px) * 2);
}
.OutOfNavSpace {max-width: min(var(--out-of-nav-max-width), calc(100% - 410px));}
.OutOfNavSpaceFromLeft {max-width: var(--out-of-nav-max-width); padding-left: 0;}

@media (max-width: 1300px) {
	.OutOfNavSpace {max-width: min(var(--out-of-nav-max-width), calc(100% - 205px)); padding-left: 205px;}
}

@media (min-width: 1024px) {
	.OutOfNavSpaceFromLeft {padding-left: calc((var(--nav-width) + var(--nav-left) + 10px)); width: calc(100% - 15px); max-width: none; margin-left: 0;}
}
@media (min-width: 1400px) {
	.OutOfNavSpaceFromLeft {max-width: var(--out-of-nav-max-width); padding-left: 0; margin-left: auto; margin-right: auto;}
}

@media (max-width: 1024px) {
	:root {
		--big-heading-font-size: 34px;
	}

	h2 {font-size: 30px;}

	.OutOfNavSpaceFromLeft {max-width: 100%; padding-left: 10px; padding-right: 10px;}
}

@media (max-width: 770px) {
	.OutOfNavSpaceFromLeft {padding-left: 17px; padding-right: 17px;}
}

.HighlightColor {color: var(--highlight-color);}
.H strong {color: var(--highlight-color);}

.TypeGrace {--highlight-color: var(--grace-color);}
.TypeTimeless {--highlight-color: var(--timeless-color);}
.TypeCustom {--highlight-color: var(--custom-color);}.ItemWithPointer {display: grid; grid-template-columns: 53px 1fr; gap: 15px;}

.ItemWithPointer > div:first-child {position: relative;}

.ItemWithPointer svg {position: absolute; left: -20px; top: -18px;}
.ItemWithPointer svg:first-child path {fill: rgba(255,255,255,0.5);}
.ItemWithPointer svg + svg {opacity: 0;}
.ItemWithPointer:hover svg + svg {opacity: 1;}

.TimelessTrustedBy {margin-bottom: 160px;}
.TimelessTrustedBy .Text {max-width: 800px; margin-left: auto; margin-right: auto;}

.TimelessTrustedByLogos {display: flex; gap: 50px; justify-content: center; align-items: center; margin-bottom: 160px;}
.TimelessTrustedByLogos a {display: block;}
.TimelessTrustedByLogos a img {max-width: 120px; width: 100%; height: auto; max-height: 70px; filter: grayscale(100%); opacity: 0.55; transition: opacity 0.2s ease, filter 0.2s ease;}
.TimelessTrustedByLogos a:hover img {filter: grayscale(0%); opacity: 1;}@media (prefers-color-scheme: light) {
	:root {
		--font-color: #2E2E2E;
		--highlight-color: #14141499;

		--slight-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
		--cool-gradient: linear-gradient(225deg, #E3EDF8 0%, #C5D7EB 100%);
	}

	body {--bg-color: #e3edf8;}

	.Button {color: var(--font-color);}
	input, textarea {background-color: rgba(151,151,151,0.3);}

	.HPIntroPageName div {background-color: #e3edf860; box-shadow: 0 0 10px #e3edf860;}
	.QuickContactForm label {border-bottom-color: rgba(20, 20, 20, 0.5);}

	svg [fill="white"] {fill: var(--font-color);}
	svg [stroke="white"] {stroke: var(--font-color);}
}:root {
	--nav-width: 200px;
	--nav-left: 20px;
}

nav[data-g] {
	--point-size: 14px;
	--sub-point-size: 6px;
	/* AI updated, model - Composer — synced from JS for same-level sub-point crossfade */
	--nav-sub-dur: 320ms;/*10s; /*320ms;*/
	--nav-sub-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

nav[data-g] {position: fixed; left: 0; top: 0; bottom: 0; z-index: 2;}
nav[data-g] .BurgerMenu {position: absolute; top: 85px; left: 115px; width: 62px; height: 23px; cursor: pointer;}

nav[data-g] .PageNavLine {position: absolute; top: 0; bottom: 0; left: 20px; width: 1px; background-color: rgba(255,255,255,0.2);}
nav[data-g] .PageNavPages {position: absolute; top: 20px; left: 0; height: calc(100% - 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 0; transition-duration: var(--nav-sub-dur); transition-property: transform, opacity; opacity: 1;}

#WebNavigationPanel {display: none;}
/*#WebNavigationPanel {position: absolute; transform: translate(-100%); width: max(782px, 100%); height: 700px; background-color: #141414; top: 0; display: flex; flex-direction: column; justify-content: space-evenly;}
#WebNavigationPanel.Opened {transform: translate(0);}
#WebNavigationPanel .WebNavLine {position: absolute; left: 96px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.2);}
#WebNavigationPanel .Close {position: absolute; right: 26px; top: 28px;}*/

.WebNavItem {position: relative; margin-left: 98px; padding-left: 27px;}
.WebNavItem::before {position: absolute; left: -12px; top: 5px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,1); background-color: #141414; content: '';}

.WebNavItem a {font-family: var(--michroma); font-size: 20px; text-transform: uppercase; letter-spacing: 0.2em;}
.WebNavItem:hover::before {background-color: white;}

nav[data-g] .PageNavPage {width: 200px; display: flex; flex-direction: column; transition: flex var(--nav-sub-dur);}
.Opened .PageNavPage {width: 200px;}
.PageNavPage .Point {display: flex; gap: 16px; align-items: center; margin-left: calc(var(--point-size) / 2 * -1); font-size: 14px; line-height: 120%; position: relative;}
.PageNavPage .Point::before {content: ''; display: block; flex: 0 0 var(--point-size); width: var(--point-size); height: var(--point-size); border-radius: 9999px; border: 1px solid white;}
.PageNavPage.CurrentPage {flex: 1;}

.PageNavPage .SubPoints {display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; margin-left: calc(var(--sub-point-size) / 2 * -1); position: relative; overflow: hidden;}
/*.PageNavPage .SubPoint {display: flex; align-items: center; flex: 1; width: 100%;}*/
.PageNavPage .SubPoint {position: absolute; left: 0; width: 100%; cursor: pointer; font-size: 13px;}
.PageNavPage .SubPoint {display: flex; gap: 10px; align-items: center; width: 100%;}
.PageNavPage .SubPoint::before {content: ''; display: block; flex: 0 0 var(--sub-point-size); height: var(--sub-point-size); border: 1px solid white; border-radius: 9999px;}

.PageNavPage :is(.Point, .SubPoint) span {position: relative;}
.PageNavPage :is(.Point, .SubPoint) span::after {position: absolute; top: 100%; right: 0; bottom: 0; left: 0; width: 0; height: 1px; background-color: rgba(255,255,255,1); content: ''; transition: width 100ms linear;}
.PageNavPage :is(.Point, .SubPoint):hover span::after {width: 100%;}

.PageNavLine .Pointer {position: absolute; margin-left: calc(var(--point-size) / 2 * -1 + 1px); left: 0; top: 0; width: var(--point-size); height: var(--point-size); background-color: white; border-radius: 99999px; box-shadow: 0 0 10px white; margin-top: 2px; z-index: 2;}

.PageNavPage.PreviousLevel {transform: translateX(-50%); position: absolute;}
.PageNavPages.PreviousLevel {transform: translateX(-30%); opacity: 0;}
.PageNavPages.PreviousLevel.OldPreviousLevel {transform: translateX(30%); opacity: 0;}
.PageNavPages.NewLevelIncoming {opacity: 0; transform: translate(120%);}
.PageNavPages.NewLevelIncoming.OldLevelIncoming {opacity: 0; transform: translate(-120%);}

.BurgerMenu {display: none; position: relative; z-index: 2;}

@media (max-width: 800px) {



}

@media (max-width: 1024px) {

	:root {--nav-width: 300px;}

	nav[data-g] {/*transform: translateX(-100%);*/ width: 100%; transition-property: transform, opacity; transition-duration: var(--nav-sub-dur); transition-timing-function: ease-in; background-image: linear-gradient(to right, #141414ee, #14141499); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none;}
	nav.MenuOpened {transform: translateX(0); opacity: 1; transition-timing-function: ease-out; pointer-events: auto;}

	.BurgerMenu {bottom: 20px; right: 15px; top: auto; left: auto; display: block; position: fixed; z-index: 2; background: none; border: none;}
	nav[data-g] .PageNavPages {top: 0; height: 100%; padding: 25px 0 50px 0;}

	nav[data-g] .PageNavLine {transform: none;}

	nav[data-g] .Point span, nav[data-g] .SubPoint span {width: 100%;}
}

/* AI updated, model - Composer */
nav[data-g] .PageNavPage.PageNavPageSubFade {flex: 0;}
nav[data-g] .PageNavPage .SubPoints {z-index: 0;}
nav[data-g] .PageNavPage.CurrentPage .SubPoints {z-index: 1;}
nav[data-g] .PageNavPage .SubPoint.SubPointLeaving {transition: opacity var(--nav-sub-dur) var(--nav-sub-ease), top var(--nav-sub-dur) var(--nav-sub-ease); opacity: 0; pointer-events: none; top: 0 !important;}
nav[data-g] .PageNavPage .SubPoint.SubPointEnterFrom {opacity: 0;}
nav[data-g] .PageNavPage .SubPoint.SubPointEnterRun {transition: opacity var(--nav-sub-dur) var(--nav-sub-ease), top var(--nav-sub-dur) var(--nav-sub-ease); opacity: 1;}

.NavPageNextBar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px 20px max(18px, env(safe-area-inset-bottom)); text-align: center; transform: translateY(-100%); opacity: 0; transition: transform 240ms ease, opacity 240ms ease; pointer-events: none;}
.NavPageNextBar.NavPageNextBarVisible {transform: translateY(0); opacity: 1;}
.NavPageNextBarLink {width: max-content; font-family: var(--michroma); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; display: inline-block; padding: 12px 25px;}
.NavPageNextBarLink::after {content: '→'; font-size: 27px;}
.NavPageNextBarLink:hover {color: var(--highlight-color);}
.NavPageNextBar.NavPageNextBarVisible .NavPageNextBarLink {pointer-events: auto;}

@media (prefers-color-scheme: light) {
	.NavPageNextBar {background: linear-gradient(to top, rgba(227, 237, 248, 0.96), rgba(227, 237, 248, 0.88)); border-top-color: rgba(46, 46, 46, 0.12);}
	nav[data-g] .PageNavLine {background-color: rgba(46,46,46,0.2);}
	.PageNavPage .Point::before, .PageNavPage .SubPoint::before {border-color: var(--font-color);}
	.PageNavLine .Pointer {border-color: var(--font-color); background-color: var(--font-color);}

	@media (max-width: 1024px) {
		nav[data-g] {background-image: linear-gradient(to right, #e3edf8ee, #e3edf899);}
	}
}
.ThemeSwitcher {position: fixed; top: 81px; right: 121px; width: 97px; height: 41px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.5);}
.ThemeSwitcherPoint {position: absolute; left: 48px; top: 3px; width: 45px; height: 35px; border-radius: 10px; background-color: white; display: flex; align-items: center; justify-content: center;}

@media (max-width: 800px) {
	.ThemeSwitcher {top: 20px; right: 25px; width: 50px; height: 25px;}
	.ThemeSwitcherPoint {width: 25px; height: 21px; border-radius: 8px; left: 25px; top: 1px;}
	.ThemeSwitcherPoint svg {height: auto; width: 10px;}
}