:root{--glass-a:0.32;--glass-edge-a:0.04;--glass-blur:4px}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-cyrillic-500-italic.woff2") format("woff2");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-latin-500-italic.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: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-cyrillic-500-normal.woff2") format("woff2");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-latin-500-normal.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: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-cyrillic-600-normal.woff2") format("woff2");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-latin-600-normal.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: "Cormorant Garamond";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-cyrillic-700-normal.woff2") format("woff2");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/cormorant-garamond-latin-700-normal.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: "Golos Text";
font-style: normal;
font-weight: 400;
font-display: optional;
src: url("/assets/fonts/golos-text-cyrillic-400-normal.woff2") format("woff2");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400;
font-display: optional;
src: url("/assets/fonts/golos-text-latin-400-normal.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: "Golos Text";
font-style: normal;
font-weight: 500;
font-display: optional;
src: url("/assets/fonts/golos-text-cyrillic-500-normal.woff2") format("woff2");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 500;
font-display: optional;
src: url("/assets/fonts/golos-text-latin-500-normal.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: "Golos Text";
font-style: normal;
font-weight: 600;
font-display: optional;
src: url("/assets/fonts/golos-text-cyrillic-600-normal.woff2") format("woff2");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 600;
font-display: optional;
src: url("/assets/fonts/golos-text-latin-600-normal.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: "Golos Fallback";
font-style: normal;
font-weight: 400;
src: local("Arial");
size-adjust: 106.27%;
ascent-override: 92.0%;
descent-override: 21.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Golos Fallback";
font-style: normal;
font-weight: 500;
src: local("Arial");
size-adjust: 106.98%;
ascent-override: 92.0%;
descent-override: 21.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Golos Fallback";
font-style: normal;
font-weight: 600;
src: local("Arial");
size-adjust: 100.06%;
ascent-override: 98.0%;
descent-override: 22.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Fallback";
font-style: normal;
font-weight: 500;
src: local("Georgia");
size-adjust: 86.88%;
ascent-override: 106.0%;
descent-override: 33.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Fallback";
font-style: normal;
font-weight: 600;
src: local("Georgia");
size-adjust: 75.47%;
ascent-override: 122.0%;
descent-override: 38.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Fallback";
font-style: normal;
font-weight: 700;
src: local("Georgia");
size-adjust: 75.88%;
ascent-override: 121.0%;
descent-override: 38.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Fallback";
font-style: italic;
font-weight: 500;
src: local("Georgia Italic"), local("Georgia");
size-adjust: 78.47%;
ascent-override: 117.0%;
descent-override: 37.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Fallback Android";
font-style: normal;
font-weight: 500;
src: local("Noto Serif"), local("NotoSerif-Regular");
size-adjust: 79.9%;
ascent-override: 115.0%;
descent-override: 36.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Fallback Android";
font-style: normal;
font-weight: 700;
src: local("Noto Serif Bold"), local("NotoSerif-Bold");
size-adjust: 77.8%;
ascent-override: 118.0%;
descent-override: 37.0%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Fallback Android";
font-style: italic;
font-weight: 500;
src: local("Noto Serif Italic"), local("NotoSerif-Italic");
size-adjust: 75.7%;
ascent-override: 122.0%;
descent-override: 38.0%;
line-gap-override: 0%;
}
:root {
--bg: #F8F8F6;
--card: #FFFFFF;
--sage-pale: #DFE7DF;
--cream-2: #EFEFF6;
--terra-pale: #E7E5F3;
--silver: #E7EBEF;
--glass: rgba(255, 255, 255, var(--glass-a));
--glass-edge: rgba(255, 255, 255, var(--glass-edge-a));
--glass-core: 18%;
--glass-profile: radial-gradient(125% 125% at 50% 50%,
var(--glass) 0%, var(--glass) var(--glass-core), var(--glass-edge) 100%);
--card-glass: var(--glass-profile);
--card-glass-2: var(--glass-profile);
--plate-feather: 14px;
--plate-edge: linear-gradient(90deg, transparent 0, #000 var(--plate-feather),
#000 calc(100% - var(--plate-feather)), transparent 100%),
linear-gradient(180deg, transparent 0, #000 var(--plate-feather),
#000 calc(100% - var(--plate-feather)), transparent 100%);
--glass-lav: rgba(231, 229, 243, var(--glass-a));
--glass-lav-edge: rgba(231, 229, 243, var(--glass-edge-a));
--card-glass-lav: radial-gradient(125% 125% at 50% 50%,
var(--glass-lav) 0%, var(--glass-lav) var(--glass-core), var(--glass-lav-edge) 100%);
--card-blur: blur(var(--glass-blur));
--card-ink-2: #484D55;
--ink: #22252B;
--muted: #45494F;
--sage-deep: #3E5044;
--white: #FFFFFF;
--sage: #4D6051;
--sage-light: #7A9278;
--terra: #7B75B7;
--terra-ink: #554F92;
--terra-deep: #443E7A;
--terra-light: #B9B5DC;
--footer-bg: #1F2421;
--footer-ink: #F8F8F6;
--footer-muted: #C6CFC5;
--line: #E4DCCD;
--line-strong: #CFC6B4;
--focus: #5D57A0;
--font-head: 'Cormorant Garamond', 'Cormorant Fallback', 'Cormorant Fallback Android', 'Golos Text', Georgia, 'Times New Roman', serif;
--font-body: 'Golos Text', 'Golos Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--h1: clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
--h2: clamp(1.8rem, 1.25rem + 1.7vw, 2.7rem);
--h3: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
--body: clamp(1.0625rem, 1rem + 0.22vw, 1.125rem);
--small: 0.9375rem;
--read: 781px;
--wrap: 1160px;
--gutter: 20px;
--plate-pad: 18px;
--sec-y: 44px;
--gap: 20px;
--r-card: 24px;
--r-btn: 999px;
--shadow: 0 16px 44px rgba(60, 64, 90, .09);
--shadow-lift: 0 20px 52px rgba(60, 64, 90, .14);
--wall-veil: 0.07;
--touch: 44px;
--head-h: 107px;
}
@media (min-width: 390px) { :root { --head-h: 55px; } }
@media (min-width: 761px) { :root { --head-h: 73px; } }
@media (min-width: 820px) {
:root {
--gutter: 32px;
--plate-pad: 24px;
--sec-y: 40px;
--gap: 28px;
}
}
:root {
--lotos: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23000'%3E%3Cpath%20d='M12%2017.6Q5.38%2019.81%201.13%2014.74Q7.32%2012.42%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q4.73%2016.68%202.07%2010.32Q8.94%2010.95%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q5.5%2013.47%204.86%206.28Q11.07%209.95%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q7.62%2010.78%209.3%203.39Q13.58%209.65%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q10.42%209.65%2014.7%203.39Q16.38%2010.78%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q12.93%209.95%2019.14%206.28Q18.5%2013.47%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q15.06%2010.95%2021.93%2010.32Q19.27%2016.68%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q16.68%2012.42%2022.87%2014.74Q18.62%2019.81%2012%2017.6Z'/%3E%3C/svg%3E");
--lotos-line: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2017.6Q5.38%2019.81%201.13%2014.74Q7.32%2012.42%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q4.73%2016.68%202.07%2010.32Q8.94%2010.95%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q5.5%2013.47%204.86%206.28Q11.07%209.95%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q7.62%2010.78%209.3%203.39Q13.58%209.65%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q10.42%209.65%2014.7%203.39Q16.38%2010.78%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q12.93%209.95%2019.14%206.28Q18.5%2013.47%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q15.06%2010.95%2021.93%2010.32Q19.27%2016.68%2012%2017.6Z'/%3E%3Cpath%20d='M12%2017.6Q16.68%2012.42%2022.87%2014.74Q18.62%2019.81%2012%2017.6Z'/%3E%3Cpath%20d='M5.6%2019.5q6.4%202.2%2012.8%200'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(248, 248, 246, var(--wall-veil)), rgba(248, 248, 246, var(--wall-veil))),
url("/assets/photos/oboi-gory.webp");
background-size: cover;
background-position: center bottom;
}
@media (max-width: 760px) {
body::before {
background-image:
linear-gradient(rgba(248, 248, 246, var(--wall-veil)), rgba(248, 248, 246, var(--wall-veil))),
url("/assets/photos/oboi-gory-mobile.webp");
background-position: center top;
}
}
.top, .main, .foot, .crumbs, .fab, .skip, .beta { position: relative; z-index: 1; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--body);
line-height: 1.6;
overflow-wrap: anywhere;
}
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 600;
margin: 0;
overflow-wrap: anywhere;
}
h1 { font-size: var(--h1); line-height: 1.06; letter-spacing: 0; font-style: italic; font-weight: 500; }
h2 { font-size: var(--h2); line-height: 1.12; font-style: italic; font-weight: 500; }
h1, h2, .h1-name { font-synthesis: none; }
h3 { font-size: var(--h3); line-height: 1.25; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0 0 0 1.2em; }
a { color: var(--sage-deep); }
a:hover { color: var(--ink); }
.ac { color: var(--muted); }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 4px;
}
.wrap {
width: 100%;
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--gutter);
}
.sec { padding: var(--sec-y) 0; }
.sec--tight { padding: calc(var(--sec-y) * 0.8) 0; }
.sec--pale,
.sec--cream { background: transparent; }
.sec--white { background: transparent; }
.sec--terra { background: transparent; }
.wave {
display: block;
width: 100%;
height: 38px;
color: var(--sage-light);
}
.wave--inner { margin-top: 24px; height: 30px; }
.wave--foot { color: var(--sage-light); opacity: .45; height: 32px; }
.sec-head { max-width: 44ch; margin: 0 0 32px; }
.sec-head p { color: var(--muted); margin: 12px 0 0; }
.subhead { max-width: 52ch; margin: 40px 0 20px; }
.subhead p { color: var(--muted); margin: 10px 0 0; }
.textblock { max-width: var(--read); }
.textblock h2 { margin-bottom: 24px; }
.prose p { color: var(--ink); margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.lead { font-size: 1.08em; color: var(--ink); }
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--sage);
color: var(--white);
padding: 12px 20px;
border-radius: 0 0 var(--r-btn) 0;
text-decoration: none;
}
.skip:focus { left: 0; }
.top {
position: sticky;
top: 0;
z-index: 50;
}
.top-in {
min-height: 72px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.brand {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
text-decoration: none;
color: var(--sage-deep);
min-height: var(--touch);
white-space: nowrap;
}
.logo-l { width: 30px; height: 30px; flex: none; color: var(--terra); }
.brand b {
font-family: var(--font-head);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: .01em;
}
.brand em { font-style: normal; color: var(--terra); }
.top-r { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) {
.top-in { min-height: 54px; padding-top: 4px; padding-bottom: 4px; gap: 8px 10px; }
.top-r > .btn { display: none; }
.brand b { font-size: 1.1875rem; }
.logo-l { width: 24px; height: 24px; }
}
.mnav-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.dnav { display: none; }
.lang {
display: flex;
flex: none;
align-items: center;
border: 1px solid var(--line-strong);
border-radius: var(--r-btn);
overflow: hidden;
}
.lang a, .lang span {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--touch);
min-height: var(--touch);
padding: 0 10px;
font-size: 0.875rem;
text-decoration: none;
color: var(--muted);
}
.lang a:hover { background: var(--sage-pale); color: var(--sage-deep); }
.lang [aria-current="true"] { background: var(--sage); color: var(--white); }
.mnav > summary {
display: flex;
align-items: center;
gap: 8px;
min-width: var(--touch);
min-height: var(--touch);
padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-btn);
background: var(--card);
font-size: 0.9375rem;
cursor: pointer;
list-style: none;
user-select: none;
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary::after {
content: "";
flex: none;
width: 16px; height: 2px;
background: currentColor;
box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.mnav[open] > summary { background: var(--sage-pale); border-color: var(--sage-light); }
.mnav-panel {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 30;
background: var(--bg);
border-bottom: 1px solid var(--line-strong);
box-shadow: var(--shadow-lift);
padding: 20px 0 24px;
max-height: calc(100vh - 120px);
max-height: calc(100dvh - 120px);
overflow-y: auto;
}
.mnav-list, .mnav-list ul { list-style: none; padding: 0; margin: 0; }
.mnav-h {
margin: 16px 0 4px;
font-size: 0.875rem;
letter-spacing: .08em;
text-transform: uppercase;
font-family: var(--font-body);
color: var(--muted);
}
.mnav-list > li:first-child .mnav-h { margin-top: 0; }
.mnav-g > ul { padding-left: 14px; border-left: 2px solid var(--sage-pale); }
.mnav-list a {
display: flex;
align-items: center;
min-height: var(--touch);
text-decoration: none;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.mnav-list a:hover { color: var(--sage-deep); }
.mnav-list [aria-current="page"] { color: var(--sage-deep); font-weight: 600; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--touch);
min-width: var(--touch);
padding: 15px 26px;
max-width: 100%;
border-radius: var(--r-btn);
font-family: var(--font-body);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.25;
text-align: center;
text-decoration: none;
border: 1.5px solid transparent;
cursor: pointer;
}
.btn--primary {
background: var(--sage);
color: var(--white);
border-color: var(--sage);
box-shadow: 0 1px 2px rgba(31, 36, 33, .10), 0 6px 16px rgba(92, 115, 96, .24);
}
.btn--primary:hover {
background: var(--sage-deep);
border-color: var(--sage-deep);
color: var(--white);
box-shadow: 0 2px 4px rgba(31, 36, 33, .12), 0 10px 24px rgba(62, 80, 68, .28);
}
.btn--outline { background: transparent; color: var(--terra-ink); border-color: var(--terra); }
.btn--outline:hover { background: var(--terra-pale); color: var(--terra-ink); }
.btn--sm { padding: 9px 16px; font-size: 0.9375rem; box-shadow: none; }
.btn--sm.btn--primary { box-shadow: 0 1px 2px rgba(31, 36, 33, .10); }
.btn[aria-disabled="true"] {
background: var(--line);
border-color: var(--line-strong);
color: var(--muted);
cursor: not-allowed;
}
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
main section > .wrap > .btns,
main section > .wrap > .textblock > .btns,
main section > .wrap > .notice > .btns,
main section > .wrap > .faq + .btns {
margin-top: max(24px, calc(var(--sec-y) * 0.5));
justify-content: center;
}
.crumbs { padding: 14px 0 0; font-size: var(--small); }
.crumbs ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
color: var(--muted);
}
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--sage-deep); }
.crumbs [aria-current="page"] { color: var(--ink); }
.hero { padding: 40px 0 var(--sec-y); }
.hero-grid {
display: grid;
gap: 32px;
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
.hero--inner { padding-bottom: 24px; }
.hero-solo { max-width: 780px; }
.hero-solo .lead { max-width: 46ch; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
@media (max-width: 560px) {
.badges { gap: 6px; margin-bottom: 18px; }
.badges li { padding: 6px 10px; font-size: 0.875rem; gap: 0; }
.badges .ico { display: none; }
}
.badges li {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 15px;
border-radius: 999px;
background: var(--sage-pale);
color: var(--sage-deep);
font-size: 0.875rem;
line-height: 1.3;
}
.badges .ico { width: 14px; height: 14px; flex: 0 0 auto; }
.hero h1 { margin: 0 0 20px; }
.hero .lead { max-width: 46ch; margin: 0 0 28px; }
.lead--pending { color: var(--card-ink-2); font-size: var(--small); margin-top: -18px; }
.priceline {
display: inline-block;
margin: 22px 0 0;
padding: 12px 18px;
border-radius: var(--r-btn);
background: var(--cream-2);
color: var(--ink);
font-size: 1rem;
line-height: 1.4;
}
.notes { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.notes li {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
align-items: start;
font-size: var(--small);
color: var(--muted);
}
.notes li::before {
content: "";
width: 14px; height: 14px;
margin-top: 5px;
background: var(--sage-light);
}
.blobw {
position: relative;
width: 100%;
max-width: 444px;
margin: 0 auto;
padding: 0;
}
.blob {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
background: var(--sage-pale);
border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
text-align: center;
}
.blob span { color: var(--sage-deep); font-size: var(--small); line-height: 1.4; }
.blob--photo {
padding: 0;
background: none;
border-radius: 0;
aspect-ratio: auto;
display: block;
}
.blob-img { width: 100%; height: auto; display: block; }
.blobw--side .blob--photo {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r-card);
}
.blobw--side .blob-img {
width: 100%;
height: auto;
object-fit: cover;
}
.blobw--side .blob--photo { aspect-ratio: var(--ph-ar, 2 / 3); height: auto; }
@media (max-width: 760px) {
.blobw--side { max-width: 320px; }
}
@media (min-width: 761px) {
.blobw--side .blob--photo { aspect-ratio: 3 / 2; }
}
:root {
--ph-edge:
linear-gradient(to bottom, transparent 0%, #000 9%, #000 89%, transparent 100%),
linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
--ph-edge-wide:
linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%),
linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
--ph-vignette: radial-gradient(74% 64% at 50% 45%,
#000 52%, rgba(0, 0, 0, 0.72) 76%, transparent 100%);
--ph-card-edge:
linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%),
linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.ph-soft {
-webkit-mask-image: var(--ph-edge);
mask-image: var(--ph-edge);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.plate-img.ph-soft,
.seg-img.ph-soft,
.t-img.ph-soft {
-webkit-mask-image: var(--ph-card-edge);
mask-image: var(--ph-card-edge);
}
.pcard-img.ph-soft {
-webkit-mask-image: var(--ph-card-edge);
mask-image: var(--ph-card-edge);
}
.blobw--hero .blob-img {
-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.vid-img.ph-soft {
-webkit-mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, .35) 100%);
mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, .35) 100%);
}
.blob-img.ph-soft {
-webkit-mask-image: var(--ph-vignette);
mask-image: var(--ph-vignette);
}
.ph-cut { object-fit: contain; }
.hero-ph { position: relative; display: flex; justify-content: center; }
.hero-img {
position: relative;
max-height: 560px;
width: auto;
max-width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 20px 30px rgba(31, 36, 33, .13));
-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.h1-name {
font-family: var(--font-head);
font-weight: 500;
font-style: italic;
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
line-height: 1.3;
color: var(--sage-deep);
margin: 10px 0 0;
letter-spacing: 0;
}
.hero .badges { margin: 22px 0 0; }
@media (max-width: 760px) {
.hero:not(.hero--inner) { padding: 26px 0 34px; }
.hero--inner .hero-grid--inner {
display: flex;
flex-direction: column;
gap: 0;
}
.hero--inner .hero-grid--inner > div:last-child { order: -1; }
.hero--inner .hero-txt {
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
margin-top: -40px;
}
.hero--inner .hero-txt h1 { order: 1; }
.hero--inner .hero-txt .lead { order: 2; }
.hero--inner .hero-txt .notes { order: 3; }
.hero--inner .hero-txt .priceline { order: 4; }
.hero--inner .hero-txt .btns { order: 5; }
.hero--inner .blobw--side { max-width: 320px; margin: 0 auto; }
.hero-grid:not(.hero-grid--inner) { grid-template-columns: 1fr auto; gap: 0; align-items: start; }
.hero:not(.hero--inner) .hero-txt { display: contents; }
.hero:not(.hero--inner) h1,
.hero:not(.hero--inner) .h1-name,
.hero:not(.hero--inner) .lead,
.hero:not(.hero--inner) .notes {
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: var(--r-card);
padding: 12px var(--plate-pad);
--plate-feather: 7px;
--plate-edge: linear-gradient(90deg, transparent 0, #000 var(--plate-feather),
#000 calc(100% - var(--plate-feather)), transparent 100%),
linear-gradient(180deg, transparent 0, #000 var(--plate-feather),
#000 calc(100% - var(--plate-feather)), transparent 100%);
-webkit-mask-image: var(--plate-edge);
mask-image: var(--plate-edge);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hero h1 { grid-column: 1 / -1; grid-row: 1; z-index: 2; padding-top: 10px; margin-bottom: 0; }
.hero .h1-name { grid-column: 1; grid-row: 2; z-index: 2; align-self: start; margin-top: 4px; }
.hero:not(.hero--inner) > .wrap { padding-right: 0; }
.hero:not(.hero--inner) h1, .hero .h1-name, .hero:not(.hero--inner) .lead,
.hero:not(.hero--inner) .btns, .hero:not(.hero--inner) .notes,
.hero:not(.hero--inner) .badges { padding-right: var(--gutter); }
.hero-ph {
grid-column: 2;
grid-row: 2 / span 2;
z-index: 1;
align-self: start;
}
.hero-img { height: 280px; width: auto; max-width: none; max-height: none; }
.hero .lead { grid-column: 1 / -1; grid-row: 4; margin: 14px 0 0; }
.hero .btns { grid-column: 1 / -1; margin-top: 22px; }
.hero .notes { grid-column: 1 / -1; }
.hero .badges { grid-column: 1 / -1; }
}
.blobw--hero { max-width: 460px; }
.blobw--hero .blob { z-index: 1; }
.blobw--hero .blob-img { filter: drop-shadow(0 20px 30px rgba(31, 36, 33, .13)); }
.blobw--hero .blob:not(.blob--photo) { aspect-ratio: 3 / 4.4; }
.trust { background: var(--sage-pale); }
.trust ul {
list-style: none;
padding: 18px 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
.trust li {
display: flex;
align-items: center;
gap: 10px;
color: var(--sage-deep);
font-size: var(--small);
}
.trust li::before {
content: "";
width: 7px; height: 7px;
background: var(--terra);
flex: none;
}
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.card {
background: var(--card);
border: 0;
border-radius: var(--r-card);
box-shadow: var(--shadow);
padding: 24px;
}
.seg { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.seg-plate {
aspect-ratio: 16 / 9;
display: flex;
align-items: flex-end;
padding: 18px;
font-size: var(--small);
}
.seg-plate--photo { padding: 0; background: none; }
.plate-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seg-plate--sage { background: var(--sage-pale); color: var(--sage-deep); }
.seg-plate--cream { background: var(--cream-2); color: var(--muted); }
.seg-plate--terra { background: var(--terra-pale); color: var(--terra-ink); }
.seg-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.seg-body h3 { font-size: var(--h3); }
.seg-body p { color: var(--muted); margin: 0; }
.arrow {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--touch);
text-decoration: none;
font-weight: 500;
}
.arrow::after { content: "\00A0→"; }
.arrow { gap: 0; }
.tlink {
display: inline-flex;
align-items: center;
min-height: var(--touch);
font-size: var(--small);
color: var(--muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.tlink:hover { color: var(--sage-deep); }
.pain { display: flex; flex-direction: column; gap: 14px; }
.pain blockquote {
margin: 0;
font-family: var(--font-head);
font-size: 1.125rem;
line-height: 1.35;
color: var(--ink);
}
.pain blockquote::before { content: "«"; color: var(--terra); }
.pain blockquote::after { content: "»"; color: var(--terra); }
.pain p { color: var(--muted); margin: 0; }
.step { position: relative; padding-top: 8px; }
.step-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--sage);
color: var(--white);
font-family: var(--font-head);
font-weight: 600;
font-size: 1.0625rem;
margin-bottom: 14px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); margin: 0; }
.feature { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.feature-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow); }
.feature-side ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.feature-side li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: var(--small); color: var(--muted); }
.feature-side li::before { content: ""; width: 7px; height: 7px; margin-top: 7px; background: var(--terra); }
.cols { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.cols li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.cols li::before {
content: "";
width: 8px; height: 8px;
margin-top: 11px;
background: var(--sage-light);
}
ol.cols { counter-reset: c; }
ol.cols li::before {
content: counter(c);
counter-increment: c;
width: auto; height: auto;
margin: 0;
border-radius: 0;
background: none;
color: var(--terra-ink);
font-weight: 600;
-webkit-mask-image: none;
mask-image: none;
}
.pcard { display: flex; flex-direction: column; gap: 12px; }
.pcard--photo { padding-top: 0; }
.pcard-media {
margin: -8px -24px 4px;
aspect-ratio: var(--fig-ar, 4 / 3);
background: none;
overflow: hidden;
}
.pcard-img { width: 100%; height: auto; object-fit: cover; display: block; }
.pcard .kind {
align-self: flex-start;
padding: 4px 12px;
border-radius: 999px;
background: var(--terra-pale);
color: var(--terra-ink);
font-size: 0.875rem;
}
.pcard p { color: var(--muted); margin: 0; }
.pcard .meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--small); color: var(--muted); }
.pcard .price { font-family: var(--font-head); font-size: 1.25rem; color: var(--ink); }
.cfacts { margin: 0; display: grid; gap: 10px; container-type: inline-size; }
.cfacts > div { display: grid; gap: 2px; }
.cfacts dt { margin: 0; font-size: var(--small); font-weight: 500; color: var(--sage-deep); }
.cfacts dd { margin: 0; font-size: var(--small); color: var(--card-ink-2); }
.pcard[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
.pcard:target {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.pcard--free { margin-bottom: var(--gap); }
.pcard--free .kind { background: var(--sage-pale); color: var(--sage-deep); }
.vfilm { max-width: 420px; }
.vfilm-el {
width: 100%;
height: auto;
display: block;
border-radius: var(--r-card);
background: var(--ink);
}
.vfilm-fallback { margin: 0; padding: 16px; }
.vfilm-note { margin: 14px 0 0; max-width: 60ch; color: var(--muted); font-size: var(--small); }
.vrev-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 28px 24px;
margin-top: 8px;
}
.vrev { margin: 0; }
.vrev-el {
width: 100%;
height: auto;
display: block;
border-radius: var(--r-card);
background: var(--ink);
-webkit-mask-image: none;
mask-image: none;
}
.vrev-cap { margin-top: 14px; }
.vrev-quote { margin: 0; }
.vrev-quote p { margin: 0; color: var(--card-ink-2); }
.vrev-who { margin: 8px 0 0; color: var(--muted); font-size: var(--small); }
.sec-outro { max-width: var(--read); margin-top: 28px; }
.sec-safety {
margin: 24px 0 0;
padding: 12px 16px;
border-radius: var(--r-card);
border: 1px solid var(--sage-light);
color: var(--card-ink-2);
font-size: var(--small);
}
.fact-src {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--sage-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
.fact-src:hover { color: var(--ink); }
.src-note {
margin: 20px 0 0;
font-size: var(--small);
color: var(--card-ink-2);
}
.card-more {
margin: 10px 0 0;
font-size: var(--small);
line-height: 1.5;
color: var(--card-ink-2);
}
.card-more a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
padding: 0 6px;
color: var(--sage-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
.card-more a:hover { color: var(--ink); }
.rev { display: flex; flex-direction: column; gap: 12px; }
.rev .req {
align-self: flex-start;
padding: 4px 12px;
border-radius: 999px;
background: var(--sage-pale);
color: var(--sage-deep);
font-size: 0.875rem;
}
.rev p { margin: 0; }
.rev .who { color: var(--muted); font-size: var(--small); }
.vid--photo { padding: 0; border: none; background: none; }
.vid-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid {
aspect-ratio: 16 / 9;
border: 1.5px dashed var(--line-strong);
border-radius: var(--r-card);
background: var(--card);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
color: var(--muted);
font-size: var(--small);
}
.faq { display: grid; gap: 12px; }
.faq details {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: var(--touch);
padding: 18px 22px;
cursor: pointer;
font-size: 1.3rem;
font-weight: 600;
font-family: var(--font-head);
line-height: 1.35;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
flex: none;
width: 28px;
text-align: center;
color: var(--terra-ink);
font-size: 1.375rem;
line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 22px 20px; color: var(--muted); }
.faq-go {
display: inline-flex;
align-items: center;
min-height: var(--touch);
margin-top: 4px;
font-size: var(--small);
font-weight: 500;
}
.faq-go--link {
color: var(--sage-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
.faq-go--link::after { content: " →"; white-space: pre; }
.faq-go--link:hover { color: var(--terra-ink); }
.gal { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal-cell { margin: 0; }
.gal-img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.gal-full {
display: block;
border: 1px solid var(--line);
border-radius: var(--r-btn);
background: var(--card);
overflow: hidden;
}
.gal-full:hover { border-color: var(--sage-light); box-shadow: var(--shadow); }
.gal-full:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.gal-full .gal-img { aspect-ratio: 3 / 4; object-fit: contain; padding: 8px; }
.m-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.m-cta .arrow { margin-top: 0; }
.pcard .m-cta .arrow, .pcard-body .arrow { color: var(--sage-deep); }
.btn-mini {
display: inline-flex;
align-items: center;
min-height: var(--touch);
padding: 9px 16px;
border-radius: 999px;
background: var(--sage-deep);
color: var(--white);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.btn-mini:hover { background: var(--sage); color: var(--white); }
.btn-mini:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg .arrow {
align-self: flex-start;
padding: 10px 16px;
border: 1.5px solid var(--terra-light);
border-radius: 999px;
color: var(--terra-ink);
}
.seg .arrow:hover { background: var(--terra-pale); }
.seg-ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.seg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip {
position: absolute;
left: 14px;
top: 14px;
z-index: 1;
background: rgba(250, 247, 241, .94);
color: var(--sage-deep);
font-weight: 600;
font-size: 0.875rem;
line-height: 1;
padding: 8px 14px;
border-radius: 999px;
}
.pcard-media--num::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 110px;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom,
rgba(34, 37, 43, .58) 0,
rgba(34, 37, 43, .52) 56px,
rgba(34, 37, 43, 0) 110px);
}
.t-num {
position: absolute;
left: 16px;
top: 10px;
z-index: 2;
font-family: var(--font-head);
font-weight: 700;
font-size: 2.125rem;
line-height: 1;
color: #FFFFFF;
text-shadow: 0 2px 12px rgba(34, 37, 43, .45);
}
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
@media (max-width: 760px) {
.slider-head { flex-wrap: wrap; }
.slider-head > div:first-child { flex: 1 1 100%; }
.sl-arrows { margin-left: auto; }
}
.slider-head .sec-head { margin-bottom: 0; }
.sl-arrows { display: none; }
.sl-arrow {
width: var(--touch);
height: var(--touch);
border-radius: 50%;
border: 1.5px solid var(--sage-light);
background: var(--card);
color: var(--sage-deep);
font-size: 1.375rem;
line-height: 1;
cursor: pointer;
}
.sl-arrow:hover { background: var(--sage-pale); }
.sl-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sl-arrow[disabled] { opacity: .45; cursor: default; }
.sl-status {
margin: 0;
align-self: center;
color: var(--muted);
font-size: var(--small);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.slider-wrap {
margin-top: 26px;
background: none;
border: 0;
border-radius: 0;
padding: 4px 0 6px;
}
.slider {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 140px));
justify-content: start;
gap: 12px;
overflow: visible;
padding: 4px 0 8px;
}
.slide {
margin: 0;
text-align: center;
}
.slide .gal-full { border: 0; border-radius: 10px; background: rgba(244, 244, 249, .6); }
.slide .gal-img {
height: 260px;
width: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: top center;
padding: 0;
}
.gal-cell figcaption {
margin-top: 10px;
font-size: var(--small);
line-height: 1.45;
color: var(--muted);
}
.cta-photo {
max-width: min(240px, calc(240px * var(--fig-ar, 2 / 3)));
margin: 0 0 16px;
aspect-ratio: var(--fig-ar, auto);
}
.cta-img { width: 100%; height: auto; display: block; aspect-ratio: var(--fig-ar, auto); object-fit: cover; }
.cta { background: transparent; }
.cta-in {
display: grid;
gap: 22px;
padding: 44px 40px;
border-radius: var(--r-card);
box-shadow: var(--shadow);
color: var(--ink);
}
.cta h2 { color: var(--ink); }
.cta p { max-width: 56ch; margin: 0; }
.cta .notes li { color: var(--card-ink-2); }
.cta .notes li::before { background: var(--sage-light); }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: var(--small); }
caption {
caption-side: top;
text-align: left;
padding: 16px 20px 0;
color: var(--card-ink-2);
font-size: var(--small);
}
th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--cream-2); color: var(--ink); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.tnote { margin: 12px 0 0; color: var(--muted); font-size: var(--small); }
.pairs { display: grid; gap: 14px; }
.pair {
display: grid;
gap: 0;
grid-template-columns: minmax(0, 1fr);
border: 1px solid var(--line);
border-radius: var(--r-card);
overflow: hidden;
box-shadow: var(--shadow);
}
.pair > div { padding: 20px 22px; }
.pair .l { background: rgba(231, 229, 243, .5); }
.pair .lbl {
display: block;
font-size: 0.875rem;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.pair .l .lbl { color: var(--terra-ink); }
.pair .r .lbl { color: var(--sage-deep); }
.notice {
border-radius: var(--r-card);
padding: 24px;
border: 1px solid var(--line-strong);
}
.notice--warn { background: var(--terra-pale); border-color: var(--terra); }
.notice--info { background: var(--cream-2); border-color: var(--line-strong); }
.notice h2, .notice h3 { margin-bottom: 12px; }
.notice--warn h2, .notice--warn h3 { color: var(--terra-ink); }
.notice--info h2, .notice--info h3 { color: var(--ink); }
.notice p { color: var(--ink); }
.notice ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 12px; }
.notice li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.notice--warn li::before { content: "!"; color: var(--terra-ink); font-weight: 700; }
.notice--info li::before { content: ""; width: 7px; height: 7px; margin-top: 7px; background: var(--muted); }
.tl { list-style: none; padding: 0; display: grid; gap: 0; }
.tl li {
display: grid;
gap: 4px 24px;
grid-template-columns: minmax(0, 1fr);
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.tl li:last-child { border-bottom: 0; }
.tl .y { font-family: var(--font-head); color: var(--terra-ink); }
.tl .t { color: var(--muted); }
.pay { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.pay ul { list-style: none; padding: 0; display: grid; gap: 10px; margin: 14px 0 0; }
.pay li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--muted); }
.pay li::before { content: ""; width: 7px; height: 7px; margin-top: 7px; background: var(--sage-light); }
.pay .note { margin: 14px 0 0; font-size: var(--small); color: var(--muted); }
.cl { list-style: none; padding: 0; display: grid; gap: 0; }
.cl li {
display: grid;
gap: 2px 20px;
grid-template-columns: minmax(0, 1fr);
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.cl li:last-child { border-bottom: 0; }
.cl .k { color: var(--muted); font-size: var(--small); }
.cl .v { color: var(--ink); }
.cl .v a {
display: inline-block;
padding: 12px 0;
margin: -12px 0;
}
.form { display: grid; gap: 16px; max-width: 460px; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--small); color: var(--muted); }
.field input {
min-height: var(--touch);
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-btn);
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
width: 100%;
}
.form .warn { color: var(--terra-ink); font-size: var(--small); margin: 0; }
.links { list-style: none; padding: 0; display: grid; gap: 12px; }
.links a {
display: grid;
gap: 2px;
min-height: var(--touch);
padding: 12px 0;
text-decoration: none;
align-content: center;
}
.links b { font-weight: 500; }
.links span { color: var(--muted); font-size: var(--small); }
.reclist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.pcard--compact {
display: grid;
gap: 10px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
padding: 12px 16px;
}
.pcard--compact > .pcard-fold { grid-column: 1; min-width: 0; }
.pcard--compact > .m-cta { grid-column: 2; margin: 0; }
.pcard-fold > summary {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
min-height: var(--touch);
padding: 4px 0;
cursor: pointer;
list-style: none;
}
.pcard-fold > summary::-webkit-details-marker { display: none; }
.pcard-fold > summary::after {
content: "";
flex: none;
width: 0;
height: 0;
margin-left: auto;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: .55;
}
.pcard-fold[open] > summary::after { transform: rotate(180deg); }
.pcard--compact h3 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.rec-dur { color: var(--muted); font-size: var(--small); white-space: nowrap; }
.pcard-more { padding-top: 8px; }
.tlink--group {
display: inline-flex;
align-items: center;
min-height: var(--touch);
margin-top: 18px;
padding: 0 16px;
border-radius: var(--r-btn);
color: var(--sage-deep);
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
}
.tlink--group:hover { color: var(--ink); }
.src-link {
color: var(--sage-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
.src-link:hover { color: var(--ink); }
.fact-link {
display: inline-block;
min-height: 44px;
padding: 10px 0;
line-height: 1.5;
color: var(--sage-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
.fact-link:hover { color: var(--ink); }
.rub + .rub { margin-top: 34px; }
.rub h3 {
display: inline-block;
font-family: var(--font-body);
font-size: 0.875rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--card-ink-2);
margin: 0 0 12px;
padding: 8px 16px;
border-radius: var(--r-btn);
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
}
.rub-nav {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rub-nav a {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: var(--touch);
padding: 0 14px;
border: 0;
border-radius: var(--r-btn);
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
text-decoration: none;
color: var(--ink);
font-size: var(--small);
}
.rub-nav a:hover { color: var(--sage-deep); box-shadow: var(--shadow); }
.rub-nav i { font-style: normal; color: var(--card-ink-2); font-size: 0.875rem; }
.acards {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
}
.acard {
display: grid;
align-content: start;
gap: 6px;
height: 100%;
min-height: var(--touch);
padding: 16px 18px;
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border: 0;
border-radius: 18px;
box-shadow: var(--shadow);
text-decoration: none;
color: var(--ink);
}
.acard--ph { padding-top: 0; gap: 10px; }
.acard-media {
display: block;
margin: 0 -18px 4px;
overflow: hidden;
border-radius: 18px 18px 0 0;
}
.acard-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.acard:hover { box-shadow: var(--shadow-lift); }
.acard:hover b { color: var(--sage-deep); }
.acard b { font-weight: 500; line-height: 1.3; }
.acard span { color: var(--muted); font-size: var(--small); }
.about { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.beta {
background: var(--cream-2);
border-bottom: 1px solid var(--line-strong);
font-size: var(--small);
color: var(--muted);
}
.beta p { padding: 10px 0; margin: 0; }
.foot { background: var(--footer-bg); color: var(--footer-ink); margin-top: 0; }
.foot-in { padding: 40px 0 24px; display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.foot h2, .foot h3 {
font-family: var(--font-body);
font-size: 0.875rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--footer-muted);
margin: 0 0 14px;
font-weight: 500;
}
.foot p { color: var(--footer-muted); font-size: var(--small); }
.foot ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.foot a { color: var(--footer-ink); text-decoration: none; display: flex; align-items: center; min-height: var(--touch); }
.foot a:hover { color: var(--terra-light); }
.foot .brand-f { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: var(--footer-ink); margin-bottom: 10px; }
.foot .cval { color: var(--footer-ink); }
.foot .ck { color: var(--footer-muted); font-size: var(--small); }
.fsoc { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 10px 0 0; }
.fsoc a { font-size: var(--small); }
.fsoc a:not(:last-child)::after {
content: "·";
color: var(--footer-muted);
margin-left: 14px;
}
.fh-legal { margin-top: 22px; }
.foot-bottom {
border-top: 1px solid #38403A;
padding: 18px 68px 24px 0;
display: grid;
gap: 10px;
color: var(--footer-muted);
font-size: var(--small);
}
@media (min-width: 640px) {
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl li { grid-template-columns: 140px minmax(0, 1fr); }
.cl li { grid-template-columns: 200px minmax(0, 1fr); }
.pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
.feature { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.about { grid-template-columns: minmax(0, 340px) minmax(0, var(--read)); gap: 48px; justify-content: start; }
.cta-in--two { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
.foot-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.foot a { min-height: 0; padding: 5px 0; }
.foot-bottom { padding-right: 0; }
.fgroup > summary { pointer-events: none; }
.fgroup > summary::after { content: none; }
.foot ul { gap: 0; }
.foot-in { padding-top: 44px; }
.links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.gal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-grid--inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 40px; }
.blobw--side { max-width: 320px; }
}
@media (min-width: 1160px) {
.top-in { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; flex-wrap: nowrap; }
.dnav { justify-self: center; }
.mnav-foot { display: none; }
.mnav { display: none; }
.dnav { display: flex; align-items: center; gap: 4px; }
.dnav ul { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; }
.dnav a {
display: flex;
align-items: center;
min-height: var(--touch);
padding: 0 4px;
border-radius: var(--r-btn);
text-decoration: none;
color: var(--ink);
font-size: 0.875rem;
white-space: nowrap;
}
.dnav a:hover { background: var(--sage-pale); color: var(--sage-deep); }
.dnav [aria-current="page"] { color: var(--sage-deep); background: var(--sage-pale); }
.dnav-g { position: relative; }
.dnav .dd > summary {
display: flex;
align-items: center;
gap: 4px;
min-height: var(--touch);
padding: 0 4px;
border-radius: var(--r-btn);
color: var(--ink);
font-size: 0.875rem;
white-space: nowrap;
cursor: pointer;
list-style: none;
user-select: none;
}
.dnav .dd > summary::-webkit-details-marker { display: none; }
.dnav .dd > summary::after {
content: "";
flex: none;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: .7;
}
.dnav .dd > summary:hover,
.dnav .dd[open] > summary { background: var(--sage-pale); color: var(--sage-deep); }
.dnav .dd-list {
position: absolute;
top: 100%;
left: 0;
z-index: 40;
display: block;
min-width: 236px;
margin-top: 6px;
padding: 6px;
background: var(--bg);
border: 1px solid var(--line-strong);
border-radius: 18px;
box-shadow: var(--shadow-lift);
}
.dnav .dd-list li { display: block; }
.dnav .dd-list a { padding: 0 10px; font-size: 0.875rem; }
}
@media (min-width: 1100px) {
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
.btn, .arrow, .lang a, .dnav a, .dnav .dd > summary, .mnav > summary, .mnav-list a,
.faq summary, .links a, .foot a, .crumbs a, .field input, .src-link {
min-height: var(--touch);
min-width: var(--touch);
}
.src-link {
display: inline-block;
padding-block: 11px;
line-height: 1.35;
vertical-align: middle;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0s !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
html, body { scroll-behavior: auto !important; }
}
@media print {
.skip, .top, .beta, .fab, .crumbs, .btns, .lang,
.fsoc, .fgroup, .mnav-foot, .sec-links,
.sl-status, .arrow, video, .vid { display: none !important; }
body::before { display: none !important; }
*, *::before, *::after {
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
color: #000 !important;
}
html, body { background: #fff !important; }
a, a:visited { text-decoration: none !important; }
a[href]::after { content: none !important; }
details:not([open])::details-content {
display: block !important;
content-visibility: visible !important;
}
.tw { overflow: visible !important; border: 0 !important; }
table, tr, td, th, li, .card, .cardx, .faq > * { break-inside: avoid; page-break-inside: avoid; }
thead { display: table-header-group; }
table, td, th { border-color: #999 !important; }
h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
.sec { padding: 12pt 0 !important; }
.wrap { max-width: none !important; padding: 0 !important; }
body { font-size: 11pt; line-height: 1.45; }
.foot { border-top: 1px solid #999 !important; padding-top: 10pt !important; }
}
@page { margin: 18mm 16mm; }
.t-priv {
margin: 0 0 16px;
padding: 12px 18px;
border-radius: var(--r-card);
background: var(--sage-pale);
color: var(--sage-deep);
font-size: var(--small);
}
.t-prog {
position: sticky;
top: calc(var(--head-h) + 4px);
z-index: 4;
margin: 0 0 16px;
padding: 10px 16px;
border-radius: var(--r-btn);
background: var(--card-glass-2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--line);
}
.t-prog-t {
margin: 0 0 8px;
font-size: var(--small);
font-weight: 600;
color: var(--ink);
}
.t-bar {
height: 6px;
border-radius: 999px;
background: var(--silver);
overflow: hidden;
}
.t-bar i {
display: block;
width: 0;
height: 100%;
border-radius: 999px;
background: var(--terra);
transition: width .2s ease;
}
.t-qs { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.t-q fieldset {
margin: 0;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--card);
min-width: 0;
}
.t-q legend {
float: left;
padding: 0;
margin: 0 0 14px;
font-family: var(--font-head);
font-size: 1.0625rem;
line-height: 1.4;
color: var(--ink);
display: block;
width: 100%;
}
.t-qnum {
display: inline-block;
min-width: 1.6em;
color: var(--sage-deep);
font-weight: 700;
}
.t-q--mark { margin: 16px 0 0; }
.t-form .t-q--mark fieldset {
background: var(--card-glass-lav);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-color: var(--terra-light);
}
.t-mark-note {
margin: -6px 0 12px;
color: var(--card-ink-2);
font-size: var(--small);
}
.t-opts { display: grid; gap: 8px; clear: both; }
.t-opt {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 10px 18px;
border: 1px solid var(--line);
border-radius: var(--r-btn);
background: var(--bg);
cursor: pointer;
}
.t-opt:hover { border-color: var(--terra-light); }
.t-opt input {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%);
overflow: hidden;
}
.t-opt-t {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--small);
color: var(--ink);
line-height: 1.35;
}
.t-opt-t::before {
content: "";
flex: none;
width: 18px; height: 18px;
border: 2px solid var(--line-strong);
border-radius: 50%;
background: var(--white);
}
.t-opt:has(input:checked) {
background: linear-gradient(180deg, rgba(231, 229, 243, .82), rgba(231, 229, 243, .96));
border-color: var(--terra);
box-shadow: inset 0 0 0 1px var(--terra);
}
.t-opt:has(input:checked) .t-opt-t { font-weight: 600; }
.t-opt:has(input:checked) .t-opt-t::before {
border-color: var(--terra-ink);
background: radial-gradient(circle, var(--terra-ink) 0 5px, var(--white) 5px);
}
.t-opt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-hint { margin: 20px 0 12px; color: var(--muted); font-size: var(--small); }
.t-go { width: 100%; }
.t-go[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.t-note {
margin: 16px 0 0;
padding: 12px 16px;
border-radius: var(--r-btn);
background: var(--cream-2);
color: var(--ink);
font-size: var(--small);
}
.t-res { margin: 24px 0 0; }
.t-res:focus { outline: 2px solid var(--focus); outline-offset: 4px; }
.t-crisis {
margin: 0 0 16px;
padding: 20px;
border-radius: var(--r-card);
background: var(--terra-pale);
border: 1px solid var(--terra);
}
.t-crisis p { margin: 0; color: var(--ink); font-weight: 600; }
.t-card {
padding: 24px;
border-radius: var(--r-card);
background: var(--card);
border: 1px solid var(--line-strong);
box-shadow: var(--shadow);
}
.t-card h2 { margin: 0 0 12px; }
.t-card p { margin: 0 0 12px; }
.t-card p:last-child { margin-bottom: 0; }
.t-score { color: var(--muted); font-size: var(--small); }
.t-lede { color: var(--card-ink-2); }
.t-note-line, .t-step {
padding: 12px 16px;
border-radius: var(--r-card);
background: var(--sage-pale);
color: var(--sage-deep);
font-size: var(--small);
}
.t-card .t-next { margin: 20px 0 12px; }
.t-again { width: 100%; }
.t-fold { margin: 0 0 16px; }
.t-fold > .t-card { margin: 0; }
.t-disc { margin: 24px 0 0; color: var(--muted); font-size: var(--small); }
@media (max-width: 389px) {
.t-prog { position: static; }
}
@media (min-width: 560px) {
.t-go, .t-again { width: auto; }
}
@media (min-width: 900px) {
.t-q fieldset { padding: 24px 28px; }
}
.t-card .t-free { margin: 12px 0 0; }
.t-free {
margin: 12px 0 0;
font-size: var(--small);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.t-free-b {
background: var(--sage-pale);
color: var(--sage-deep);
border-radius: 999px;
padding: 3px 10px;
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
.t-free a { color: var(--sage-deep); }
.figw { margin: 0 auto; max-width: 640px; }
.figw--tall { max-width: 420px; }
.figw--in {
margin-top: 28px;
padding: 12px 12px 4px;
background: var(--card-glass);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: var(--r-card);
box-shadow: var(--shadow);
}
.figw--in .fig-img { border-radius: calc(var(--r-card) - 8px); }
.figw--in figcaption {
padding: 10px 6px 8px;
font-size: var(--small);
line-height: 1.45;
color: var(--muted);
}
.slide {
position: relative;
padding: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: var(--r-card);
overflow: hidden;
box-shadow: var(--shadow);
}
.slide .gal-img {
-webkit-mask-image: none;
mask-image: none;
display: block;
border-radius: 0;
}
.slide figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 28px 14px 10px;
color: var(--white);
font-size: var(--small);
line-height: 1.35;
background: linear-gradient(180deg, rgba(20, 22, 26, 0) 0, rgba(20, 22, 26, .9) 24px, rgba(20, 22, 26, .96) 100%);
}
.gal-cell {
padding: 10px;
background: var(--card-glass);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: var(--r-card);
box-shadow: var(--shadow);
}
.gal-cell .gal-img { border-radius: calc(var(--r-card) - 6px); }
.fig-img { width: 100%; height: auto; display: block; }
.t-safety {
margin: 0 0 24px;
padding: 12px 18px;
border-radius: var(--r-card);
background: var(--terra-pale);
border: 1px solid var(--terra);
color: var(--terra-ink);
font-size: var(--small);
}
.t-safety--res { margin: 0 0 16px; }
.t-safelink { margin: 16px 0 0; }
.crisis-mode [data-crisis-off] { display: none !important; }
.crisis-mode .fab,
.crisis-mode .sec-links,
.crisis-mode a[href^="/infoprodukty/"] { display: none !important; }
.t-crisis-calls {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.t-crisis-call { flex: 0 0 auto; }
.t-crisis-call + .t-crisis-call { min-width: 88px; justify-content: center; }
.t-crisis-go { margin-top: 10px; }
@media (max-width: 760px) {
.t-res { padding-bottom: 86px; }
.foot-in { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
.vh {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.fab {
position: fixed;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: grid;
gap: 10px;
justify-items: center;
}
.fab-btn {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--card);
border: 1px solid var(--line-strong);
box-shadow: var(--shadow);
color: var(--ink);
text-decoration: none;
}
.fab-i { width: 24px; height: 24px; display: block; }
.fab-btn:hover { box-shadow: var(--shadow-lift); background: var(--bg); }
.fab-btn--wa { background: var(--sage); border-color: var(--sage); color: var(--white); }
.fab-btn--wa:hover { background: var(--sage-deep); border-color: var(--sage-deep); }
.fab-btn--tel { background: var(--card); border-color: var(--cream-2); color: var(--terra-ink); }
.fab-btn--lead { background: var(--terra-ink); border-color: var(--terra-ink); color: var(--white); }
.fab-btn--lead:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
.fab-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fab-d { position: relative; }
.fab-d[open]::before {
content: "";
position: fixed;
inset: 0;
background: rgba(60, 64, 90, .28);
}
@media (prefers-reduced-transparency: reduce) {
.fab-d[open]::before { background: rgba(60, 64, 90, .42); }
}
.fab-d > summary { list-style: none; }
.fab-d > summary::-webkit-details-marker { display: none; }
.fab-toggle {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
cursor: pointer;
background: var(--terra-ink);
color: var(--white);
box-shadow: var(--shadow-lift);
}
.fab-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fab-list {
position: absolute;
right: 0;
bottom: calc(100% + 12px);
display: grid;
gap: 10px;
justify-items: end;
padding: 12px;
border-radius: var(--r-card);
background: var(--white);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
box-shadow: var(--shadow-lift);
}
.fab-btn { display: inline-flex; align-items: center; gap: 8px; }
.fab-list .fab-btn {
width: auto;
min-height: var(--touch);
padding: 0 14px 0 10px;
border-radius: 999px;
}
.fab-label { font-size: var(--small); font-weight: 500; white-space: nowrap; }
.fab-d:not([open]) .fab-list { display: none; }
html:has(details.mnav[open]) .fab,
html.mnav-open .fab { display: none; }
@media (min-width: 900px) {
.fab { right: 24px; bottom: 24px; }
}
.more { margin-top: 12px; }
.more > summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--touch);
color: var(--sage-deep);
font-weight: 600;
font-size: var(--small);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-weight: 700; }
.more[open] > summary::after { content: "–"; }
.more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.fgroup > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--touch);
font-family: var(--font-head);
font-size: 1rem;
color: var(--footer-ink);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after { content: "+"; font-weight: 700; }
.fgroup[open] > summary::after { content: "–"; }
.fgroup > summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.sec-head,
.hero-txt,
.hero-solo,
.textblock,
.prose,
.cols,
.cl,
.notes,
.crumbs ol,
.links a,
.more,
.tnote,
.vfilm-note,
.t-disc,
.t-hint,
.t-note,
.sl-status,
.src-note,
.vrev-cap,
.vrev-note,
.t-priv {
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: var(--r-card);
padding: var(--plate-pad);
-webkit-mask-image: var(--plate-edge);
mask-image: var(--plate-edge);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.tnote,
.vfilm-note,
.t-hint,
.t-disc,
.src-note,
.sl-status,
.crumbs ol,
.links a,
.vrev-cap,
.vrev-note {
--plate-feather: 7px;
}
.textblock .prose,
.hero-txt .notes,
.hero-solo .notes,
.hero-txt .btns,
.hero-solo .btns {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
-webkit-mask-image: none;
mask-image: none;
padding: 0;
border-radius: 0;
}
.hero-txt .priceline,
.hero-solo .priceline,
.cta-in .notes,
.more .cols,
.textblock .figw--in,
.notice .tnote {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
border-radius: 0;
-webkit-mask-image: none;
mask-image: none;
}
.hero-txt .priceline::before,
.hero-solo .priceline::before,
.cta-in .notes::before,
.more .cols::before,
.textblock .figw--in::before,
.notice .tnote::before {
display: none;
}
.hero-txt .priceline,
.hero-solo .priceline {
padding: 12px 0 0;
margin-top: 4px;
border-top: 1px solid var(--line);
}
.cta-in .notes,
.more .cols { padding-left: 0; padding-right: 0; }
.notice .tnote {
padding: 10px 0 0;
margin-top: 10px;
border-top: 1px solid var(--line);
}
.textblock .figw--in { padding: 0; }
.sl-status,
.vfilm-note,
.tnote,
.t-hint,
.t-disc,
.src-note,
.crumbs ol {
padding: 8px 14px;
border-radius: 14px;
}
.links a { display: block; }
.links b { display: block; }
.btn--outline,
.btn--ghost {
background: var(--glass);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
}
.card,
.pcard,
.rev-card,
.figw--in,
.gal-cell,
.vid {
background: var(--card-glass);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
}
.faq details,
.step,
.tw,
.priceline,
.pair,
.sec-safety,
.t-priv,
.t-safety,
.t-form fieldset,
.t-opt,
.t-card,
.cta-in {
background: var(--card-glass-2);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
}
.notice,
.notice--info,
.notice--warn,
.t-crisis {
background: var(--card-glass-lav);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
}
thead th { background: rgba(231, 229, 243, .5); }
.gal-full { background: transparent; }
.card p, .pcard p, .rev-card p, .step p, .faq .answer,
.figw--in figcaption, .cta-in p {
color: var(--card-ink-2);
}
.card.pcard--free {
box-shadow: var(--shadow-lift);
}
@media (min-width: 760px) {
.pcard--free .cfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@container (min-width: 356px) {
.cfacts > div { grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
}
.grid--43 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
.grid--43 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid--43 > * { grid-column: span 3; }
.grid--43 > *:nth-child(n+5) { grid-column: span 4; }
}
@media (min-width: 700px) and (max-width: 1023px) {
.grid--43 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.lbx-on { overflow: hidden; }
.lbx {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: 16px;
}
.lbx-back { position: absolute; inset: 0; background: rgba(31, 36, 33, .78); }
.lbx-box {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
width: min(100%, 1000px);
max-height: 100%;
}
.lbx-img {
grid-column: 2;
display: block;
max-width: 100%;
max-height: calc(100vh - 120px);
max-height: calc(100dvh - 120px);
margin: 0 auto;
border-radius: var(--r-card);
background: var(--white);
box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.lbx-cap {
grid-column: 1 / -1;
margin: 10px 0 0;
text-align: center;
color: var(--white);
font-size: var(--small);
}
.lbx-count { opacity: .72; }
.lbx-x,
.lbx-nav {
display: grid;
place-items: center;
min-width: var(--touch);
min-height: var(--touch);
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
color: var(--white);
cursor: pointer;
}
.lbx-x:hover,
.lbx-nav:hover { background: rgba(255, 255, 255, .28); }
.lbx-x:focus-visible,
.lbx-nav:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lbx-x { position: absolute; top: -8px; right: -4px; z-index: 1; }
.lbx-prev { grid-column: 1; }
.lbx-next { grid-column: 3; }
@media (max-width: 560px) {
.lbx-box { grid-template-columns: 1fr; }
.lbx-img {
grid-column: 1;
max-height: calc(100vh - 170px);
max-height: calc(100dvh - 170px);
}
.lbx-prev,
.lbx-next { grid-column: 1; grid-row: 3; justify-self: center; }
.lbx-prev { justify-self: start; }
.lbx-next { justify-self: end; }
}
.btn-mini--quiet {
background: transparent;
color: var(--sage-deep);
box-shadow: inset 0 0 0 1px var(--sage-light);
}
.btn-mini--quiet:hover { background: var(--glass); }
.fsoc { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.fsoc .soc {
display: grid;
place-items: center;
min-width: var(--touch);
min-height: var(--touch);
border-radius: 999px;
color: inherit;
}
.fsoc .soc:hover { background: rgba(255, 255, 255, .12); }
.soc-i { display: block; }
.cl-soc .k { display: inline-flex; align-items: center; gap: 8px; }
.cl-soc .soc-i { flex: none; color: var(--sage-deep); }
.m-cta .btn-mini { min-width: 0; max-width: 100%; }
.pcard-fold .m-cta { width: 100%; }
@media (max-width: 560px) {
.pcard--compact { grid-template-columns: minmax(0, 1fr); }
.pcard--compact > .pcard-fold,
.pcard--compact > .m-cta { grid-column: 1; }
}
.vrev-cap { padding: 10px 14px; border-radius: 14px; }
.vrev-note { margin: 18px 0 0; padding: 10px 14px; border-radius: 14px; max-width: 60ch;
color: var(--card-ink-2); font-size: var(--small); }
@media (min-width: 900px) {
.textblock { margin-inline: auto; }
.about {
grid-template-columns: minmax(0, 420px) minmax(0, var(--read));
justify-content: start;
gap: 40px;
}
.about .blobw { max-width: 420px; }
.about .blob--photo {
aspect-ratio: var(--ph-ar, 2 / 3);
height: auto;
overflow: hidden;
border-radius: var(--r-card);
}
.about .blob-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
}
.sec--breath { padding-top: calc(var(--sec-y) * 1.1); }
@media (min-width: 900px) {
.sec--narrow > .wrap > .sec-head,
.sec--narrow > .wrap > .faq,
.sec--narrow > .wrap > .faq-cta,
.sec--narrow > .wrap > .notice,
.sec--narrow > .wrap > .vfilm,
.sec--narrow > .wrap > .links,
.sec--narrow > .wrap > .btns,
.sec--narrow > .wrap > .textblock,
.sec--narrow > .wrap > .figw:not(.figw--tall) {
max-width: var(--read);
margin-inline: auto;
}
.sec--narrow > .wrap > .figw--tall { margin-inline: auto; }
}
@media (min-width: 900px) {
.main--article .sec--narrow > .wrap > .notice,
.main--article .sec--narrow > .wrap > .textblock,
.main--article .sec--narrow > .wrap > .links {
margin-inline: 0;
}
.main--article:not(.main--prose) .sec--narrow > .wrap > .links {
max-width: none;
}
}
@media (min-width: 900px) {
.main--prose .hero-solo { margin-inline: auto; }
.main:not(.main--prose) .hero-solo { max-width: none; }
.main:not(.main--prose) .hero-solo > * { max-width: var(--read); }
.main--prose-photo .textblock { margin-inline: 0; }
}
@media (min-width: 1100px) {
.hero-grid--inner {
grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 380px);
align-items: stretch;
}
.hero--inner .hero-grid--inner > div:last-child { display: flex; }
.hero--inner .blobw--side {
max-width: none;
width: 100%;
align-self: stretch;
}
.hero--inner .blobw--side .blob--photo {
aspect-ratio: 2 / 3;
height: 100%;
overflow: hidden;
}
.hero--inner .blobw--side .blob-img {
height: auto;
object-fit: cover;
}
.hero--inner .blobw--side .blob--photo {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
}
}
.vrev-el {
aspect-ratio: 9 / 16;
height: auto;
object-fit: cover;
background: var(--ink);
}
.vrev { position: relative; }
.vrev-cap {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.vrev-cap > * { overflow: hidden; white-space: nowrap; }
@media (min-width: 900px) {
.fgroup > summary::after,
.fgroup[open] > summary::after { content: none; }
}
.fsoc a:not(:last-child)::after { content: none; margin-left: 0; }
@media (min-width: 360px) {
.fsoc { flex-wrap: nowrap; }
}
.pcard:not(.pcard--compact) { display: flex; flex-direction: column; }
.pcard:not(.pcard--compact) > .m-cta { margin-top: auto; }
.links { align-items: stretch; }
.links li { display: flex; }
.links li > a { flex: 1; }
@media (min-width: 1100px) and (max-width: 1439px) {
.hero--inner h1 { font-size: clamp(2.25rem, 1.4rem + 1.9vw, 2.75rem); }
}
.sec--cont { padding-top: calc(var(--sec-y) * 0.7); }
.notice--calm {
background: var(--glass-profile);
border-color: var(--line);
}
@media (max-width: 760px) {
.vrev-grid {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.vrev-grid > .vrev {
flex: 0 0 78%;
scroll-snap-align: start;
}
.fab-menu a, .fab-menu button { width: 100%; justify-content: flex-start; }
}
@media (min-width: 900px) {
.pcard.pcard--free {
display: grid;
grid-template-columns: 5fr 7fr;
column-gap: 40px;
align-items: start;
}
.pcard.pcard--free > .kind,
.pcard.pcard--free > h3,
.pcard.pcard--free > p,
.pcard.pcard--free > .m-cta { grid-column: 1; }
.pcard.pcard--free > .cfacts {
grid-column: 2;
grid-row: 1 / span 20;
margin: 0;
align-self: stretch;
}
}
.pcard--compact > .pcard-fold > summary {
position: relative;
padding-right: 26px;
}
.pcard--compact > .pcard-fold > summary::-webkit-details-marker { display: none; }
.pcard--compact > .pcard-fold > summary::after {
content: "";
position: absolute;
right: 6px;
top: calc(50% - 7px);
width: 10px;
height: 10px;
border-right: 2px solid var(--sage-deep);
border-bottom: 2px solid var(--sage-deep);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .18s ease;
}
.pcard--compact > .pcard-fold[open] > summary::after {
transform: rotate(225deg) translate(-2px, -2px);
}
.pcard--compact:not(:has(> .pcard-fold[open])) > .m-cta { display: none; }
@media (min-width: 900px) {
.cta-in--two { grid-template-columns: minmax(0, 1fr) min(26vw, 380px); align-items: center; }
.cta-in--two > div:last-child { display: flex; align-items: center; }
.cta-photo {
max-width: min(100%, calc(285px * var(--fig-ar, 2 / 3)));
width: min(100%, calc(285px * var(--fig-ar, 2 / 3)));
margin: 0;
aspect-ratio: var(--fig-ar, auto);
}
.cta-img { height: auto; aspect-ratio: var(--fig-ar, auto); object-fit: cover; }
.cta-in--two > div:first-child { align-self: center; }
}
@media (min-width: 1024px) {
.acards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.acards > li { grid-column: span 2; }
.acards > li:first-child:nth-last-child(5) ~ li:nth-child(n+4),
.acards > li:first-child:nth-last-child(5):nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 900px) {
.rub-nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
}
.rub-nav a[href="#trevoga"],   #trevoga .acard { --rub-tint: rgba(160, 168, 200, .14); }
.rub-nav a[href="#semya"],     #semya .acard { --rub-tint: rgba(140, 168, 148, .14); }
.rub-nav a[href="#deti"],      #deti .acard { --rub-tint: rgba(198, 168, 140, .14); }
.rub-nav a[href="#samorazvitie"], #samorazvitie .acard { --rub-tint: rgba(176, 156, 188, .14); }
.rub-nav a[href="#sovremennost"], #sovremennost .acard { --rub-tint: rgba(150, 178, 186, .14); }
.rub-nav a[href="#metody"],    #metody .acard { --rub-tint: rgba(186, 176, 148, .14); }
.rub-nav a { box-shadow: inset 0 0 0 999px var(--rub-tint, transparent); }
.acard { box-shadow: inset 0 0 0 999px var(--rub-tint, transparent); }
.acard:hover { box-shadow: inset 0 0 0 999px var(--rub-tint, transparent), var(--shadow-lift); }
@media (max-width: 760px) {
.rub-nav { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
.rub-nav li { flex: none; scroll-snap-align: start; }
.rub-hide { display: none; }
.rub-nav a[aria-current="true"] { box-shadow: inset 0 0 0 999px var(--rub-tint, transparent), 0 0 0 2px var(--sage-deep); }
}
@media (max-width: 560px) {
.hero--composed .hero-col {
grid-row: 2;
grid-column: 1;
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: 0 0 var(--r-card) var(--r-card);
padding: var(--plate-pad);
}
.hero--composed .hero-col > .hero-txt {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
padding: 0;
-webkit-mask-image: none;
mask-image: none;
}
.hero--composed .hero-col > h1 { margin: 0 0 14px; }
.hero--composed .hero-grid--composed {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.hero--composed .hero-grid--composed > div:last-child { grid-row: 1; grid-column: 1; order: 0; }
.hero--composed .hero-txt { grid-row: 2; grid-column: 1; margin-top: 0; }
.hero--composed .blobw--side { max-width: none; width: 100%; margin: 0; }
.hero--composed .blobw--side .blob--photo {
position: relative;
aspect-ratio: auto;
height: 400px;
overflow: hidden;
border-radius: var(--r-card) var(--r-card) 0 0;
}
.hero--composed .blobw--side .blob-img {
width: 100%;
height: auto;
object-fit: cover;
-webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .35) 72%, transparent 96%);
mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .35) 72%, transparent 96%);
}
.hero--composed .blobw--side .blob--photo::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 62%, rgba(255, 255, 255, .95));
pointer-events: none;
}
}
@media (min-width: 561px) {
.hero--composed .hero-col {
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: var(--r-card);
padding: var(--plate-pad);
align-self: center;
}
.hero--composed .hero-col > .hero-txt {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
padding: 0;
-webkit-mask-image: none;
mask-image: none;
}
.hero--composed .hero-col > h1 { margin: 0 0 14px; }
}
@media (min-width: 1100px) {
.hero-grid--composed {
grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 380px);
}
}
@media (max-width: 760px) {
.home--soft .grid { gap: 14px; }
.home--soft .pcard { padding: 16px 24px; }
.home--hard .grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home--hard .grid--row { grid-template-columns: minmax(0, 1fr); }
.home--hard .grid .card h3 { font-size: 1.2rem; }
.home--hard .pcard { padding: 14px 24px; }
.home--hard .pcard .cfacts { display: none; }
.home--hard .pcard > p,
.home--hard .pcard-body > p,
.home--hard .card.seg p,
.home--hard .steps li p,
.home--hard .acard span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.home--hard .pcard .meta,
.home--hard .card.seg ul { display: none; }
.home--hard .gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; }
.home--hard .gal > * { flex: 0 0 62%; scroll-snap-align: start; }
}
td, th, caption, .priceline, .price, .cfacts dd, .meta { overflow-wrap: normal; }
.notice,
.notice--info {
background: var(--card-glass);
}
.notice--limits {
background: var(--card-glass-lav);
}
.notice--quiet {
border: 0;
padding-top: 14px;
padding-bottom: 14px;
}
.notice--quiet h2,
.notice--quiet h3 { font-size: var(--h3); }
.faq-in--photo { display: flex; flex-direction: column; }
.faq-in--photo > .figw { order: 2; }
@media (min-width: 900px) {
.faq-in--photo {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
.faq-in--photo > .figw { order: 0; margin: 0; position: sticky; top: 96px; }
}
@media (min-width: 900px) {
.links > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.fnav { display: grid; gap: 22px; }
@media (min-width: 900px) {
.fnav {
grid-column: span 2;
grid-template-columns: 1fr 1fr;
column-gap: var(--gap, 24px);
row-gap: 22px;
align-content: start;
}
.fnav > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.fnav > :nth-child(2) { grid-column: 2; grid-row: 1; }
.fnav > :nth-child(3) { grid-column: 2; grid-row: 2; }
}
.foot .fh-legal { margin-top: 26px; }
.grid--lead { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
.pcard.pcard--free,
.pcard.pcard--lead {
display: flex;
flex-direction: column;
}
}
@media (min-width: 900px) {
.cta-in:not(.cta-in--two) {
max-width: var(--read);
margin-inline: auto;
}
}
.nowrap { white-space: nowrap; overflow-wrap: normal; }
.textblock--photo > .figw { margin: 0 0 18px; }
@media (min-width: 900px) {
.main:not(.main--prose) .textblock--photo {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: 40px;
align-items: start;
max-width: none;
}
.main--prose .textblock--photo {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.textblock--photo > .figw { margin: 0; }
.textblock--photo > .tb-body { max-width: var(--read); }
}
.card,
.cta-in,
.notice,
.tw,
.t-form fieldset,
.t-opt,
.t-card,
.acard,
.gal-cell,
.faq details,
.pair,
.t-prog,
.figw--in,
.sec-safety,
.t-safety {
-webkit-mask-image: var(--plate-edge);
mask-image: var(--plate-edge);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@media (max-width: 899px) {
.hero--inner .blobw--side,
.hero--composed .blobw--side {
max-width: none;
width: 100%;
margin: 0;
}
.hero--inner .blobw--side .blob--photo,
.hero--composed .blobw--side .blob--photo {
aspect-ratio: var(--ph-ar, 2 / 3);
height: auto;
width: min(100%, calc(66vh * (var(--ph-ar, 2 / 3))));
margin-inline: auto;
overflow: hidden;
border-radius: var(--r-card) var(--r-card) 0 0;
}
.hero--inner .blobw--side .blob-img,
.hero--composed .blobw--side .blob-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 60%, rgba(0, 0, 0, .45) 82%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0, #000 60%, rgba(0, 0, 0, .45) 82%, transparent 100%);
}
.hero--inner .blobw--side .blob--photo::after,
.hero--composed .blobw--side .blob--photo::after { content: none; }
}
.vrev-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 200px));
justify-content: space-between;
gap: 12px;
overflow: visible;
scroll-snap-type: none;
padding-bottom: 0;
}
.vrev-grid > .vrev { flex: none; width: auto; }
@media (max-width: 560px) {
.vrev-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.slider {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
}
@media (max-width: 560px) {
.tw { overflow: visible; border: 0; background: none; }
.tw table, .tw thead, .tw tbody, .tw tr, .tw th, .tw td { display: block; }
.tw thead { display: none; }
.tw tr {
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: var(--r-card);
padding: 14px 16px;
margin: 0 0 10px;
-webkit-mask-image: var(--plate-edge);
mask-image: var(--plate-edge);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.tw tr > th[scope="row"] { font-size: 1.0625rem; font-weight: 600; padding: 0 0 6px; border: 0; }
.tw tr > td { padding: 2px 0; border: 0; display: flex; gap: 8px; justify-content: space-between; }
.tw tr > td::before {
content: attr(data-col);
color: var(--card-ink-2);
font-size: var(--small);
}
.tw caption {
padding: 12px 16px;
margin: 0 0 10px;
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
border-radius: var(--r-card);
-webkit-mask-image: var(--plate-edge);
mask-image: var(--plate-edge);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
}
html.vov-on { overflow: hidden; }
.vov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.vov-back { position: absolute; inset: 0; background: rgba(20, 22, 26, .92); }
.vov-box {
position: relative;
width: min(96vw, 520px);
max-height: 92vh;
max-height: 92dvh;
}
.vov-el {
width: 100%;
height: auto;
max-height: 88vh;
max-height: 88dvh;
border-radius: 14px;
pointer-events: auto;
}
.vov-x {
position: absolute;
top: -44px;
right: 0;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
color: #fff;
cursor: pointer;
}
.rub-dd { display: none; }
@media (max-width: 560px) {
.rub-dd { display: block; margin: 0 0 18px; }
.rub-dd > summary {
display: flex;
justify-content: space-between;
align-items: center;
min-height: var(--touch);
padding: 10px 16px;
border-radius: var(--r-card);
background: var(--glass-profile);
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
cursor: pointer;
list-style: none;
}
.rub-dd > summary::-webkit-details-marker { display: none; }
.rub-dd > summary::after {
content: "";
width: 9px;
height: 9px;
border-right: 2px solid var(--sage-deep);
border-bottom: 2px solid var(--sage-deep);
transform: rotate(45deg) translate(-2px, -2px);
}
.rub-dd[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.rub-dd > ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.rub-dd > ul a,
.rub-dd > ul .rub-all { display: flex; justify-content: space-between; min-height: var(--touch); align-items: center; padding: 6px 16px; }
.rub-dd > ul .rub-all {
width: 100%;
border: 0;
background: none;
appearance: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.rub-nav { display: none; }
}
.top::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(250, 250, 248, .90);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 10px), transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 10px), transparent 100%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hero-col {
-webkit-mask-image: var(--plate-edge);
mask-image: var(--plate-edge);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.slide figcaption { display: none; }
.vrev-grid--3 { grid-template-columns: repeat(3, minmax(0, 240px)); }
.vrev-grid--4 { grid-template-columns: repeat(4, minmax(0, 220px)); }
.vrev-grid--5 { grid-template-columns: repeat(5, minmax(0, 200px)); }
.vrev-grid--3, .vrev-grid--4, .vrev-grid--5 { justify-content: space-between; }
@media (max-width: 560px) {
.vrev-grid--3, .vrev-grid--4, .vrev-grid--5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-content: start;
}
}
.vrev { position: relative; }
.vrev-el {
width: 100%;
height: auto;
aspect-ratio: 9 / 16;
border-radius: 12px;
}
.vrev-open {
position: absolute;
inset: 0;
padding: 0;
border: 0;
background: none;
appearance: none;
cursor: zoom-in;
}
.vrev-open::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border-radius: 50%;
background: rgba(20, 22, 26, .55) no-repeat center /
12px 14px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1 1l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E");
}
.grid--row .pcard--photo {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding-top: 0;
}
.grid--row .pcard--photo > .pcard-media {
flex: none;
width: auto;
margin: 0 -24px;
height: auto;
aspect-ratio: 5 / 3;
border-radius: var(--r-card) var(--r-card) 0 0;
}
.grid--row .pcard-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
@media (min-width: 900px) {
.grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--row .pcard--photo { gap: 16px; }
.grid--row .pcard--photo > .pcard-media { height: auto; aspect-ratio: 5 / 3; }
}
@media (min-width: 900px) {
.listw--photo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
gap: 32px;
align-items: start;
}
.listw--photo > .figw { margin-top: 0; }
.listw--photo > .lw-body { min-width: 0; }
}
@media (max-width: 899px) {
.about .blob-img {
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%),
linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
mask-image:
linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%),
linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
}
.nowrap-wide { white-space: normal; }
@media (min-width: 561px) {
.nowrap-wide { white-space: nowrap; overflow-wrap: normal; }
}
.pcard .cline {
margin: 0;
max-width: none;
}
.pcard .cline b { font-weight: 600; }
.pcard .cline--warn { color: var(--card-ink-2); }
.pcard .cfactline {
margin: 0;
font-size: var(--small);
color: var(--card-ink-2);
}
.grid--1 { grid-template-columns: minmax(0, 780px); justify-content: center; }
@media (max-width: 560px) {
.figw--in {
width: fit-content;
max-width: 100%;
margin-right: auto;
}
.figw--in .fig-img {
width: min(100%, calc(280px * var(--fig-ar, 2 / 3)));
height: auto;
}
}
@media (max-width: 760px) {
.mnav-panel {
top: 100%;
height: calc(100vh - 100%);
height: calc(100dvh - 100%);
max-height: none;
padding: 18px 0 24px;
border-bottom: 0;
background:
linear-gradient(rgba(255, 255, 255, var(--glass-a)), rgba(255, 255, 255, var(--glass-a))),
url("/assets/photos/oboi-gory-mobile.webp") center top / cover no-repeat;
-webkit-backdrop-filter: var(--card-blur);
backdrop-filter: var(--card-blur);
overflow-y: auto;
overscroll-behavior: contain;
}
.mnav-h {
margin: 4px 0 6px;
color: var(--terra-ink);
font-size: 0.875rem;
letter-spacing: .1em;
}
.mnav-g > ul { padding-left: 16px; border-left: 2px solid var(--terra-pale); }
.mnav-list > li { margin-bottom: 8px; }
.mnav-list a {
position: relative;
min-height: 52px;
padding-left: 18px;
border-bottom: 0;
font-family: var(--font-head);
font-size: 1.375rem;
line-height: 1.2;
}
.mnav-g > ul a { font-size: 1.125rem; min-height: 46px; }
.mnav-list [aria-current="page"]::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: var(--terra-ink);
}
.mnav-list [aria-current="page"] { color: var(--terra-ink); }
.mnav-foot {
display: grid;
gap: 14px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.mnav-soc { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.mnav-soc a {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--card);
border: 1px solid var(--line-strong);
color: var(--ink);
}
.mnav-soc svg { width: 22px; height: 22px; }
}
@media (max-width: 760px) {
.top-r { gap: 6px; margin-left: auto; }
.lang a, .lang span { min-width: 44px; min-height: 44px; padding: 0 2px; font-size: 0.875rem; }
.lang { gap: 0; }
.brand { gap: 6px; }
.mnav > summary {
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
justify-content: center;
gap: 0;
}
.mnav > summary > span.mnav-word,
.mnav > summary { font-size: 0.9375rem; }
.mnav > summary > span.mnav-word {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.mnav > summary::after { width: 18px; }
}
.orn-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin: 14px 0 0;
color: var(--sage);
}
.orn-row::before,
.orn-row::after {
content: "";
width: 48px;
height: 1px;
background: currentColor;
opacity: .55;
}
.orn-row .orn {
flex: none;
display: inline-block;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask-image: var(--lotos-line);
mask-image: var(--lotos-line);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
@media (min-width: 900px) {
.sec-head,
.sec--narrow > .wrap > .sec-head {
max-width: 778px;
margin-inline: auto;
text-align: center;
}
.orn-row { justify-content: center; margin-inline: auto; }
.slider-head { display: block; }
.slider-head .sec-head { margin-inline: auto; }
.hero-grid:not(.hero-grid--inner) { align-items: center; }
.cta-in { position: relative; }
.cta-in::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 230px;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 200' fill='none' stroke='%234D6051' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M10 190 C 60 150, 90 120, 150 90 S 230 40, 255 12'/%3E%3Cpath d='M120 108 C 130 90, 150 80, 170 78'/%3E%3Cpath d='M180 66 C 176 50, 184 36, 200 30'/%3E%3Cpath d='M70 150 C 80 132, 98 124, 118 126'/%3E%3Cg stroke-width='1.2'%3E%3Ccircle cx='128' cy='102' r='3'/%3E%3Cpath d='M128 93 c-4 -4 -4 -10 0 -12 c4 2 4 8 0 12z M137 99 c5 -2 10 0 11 4 c-3 4 -8 4 -11 0z M120 99 c-5 -2 -10 0 -11 4 c3 4 8 4 11 0z M133 110 c3 4 2 10 -2 12 c-4 -3 -4 -8 2 -12z M123 110 c-3 4 -2 10 2 12 c4 -3 4 -8 -2 -12z'/%3E%3Ccircle cx='196' cy='34' r='2.6'/%3E%3Cpath d='M196 26 c-3.5 -3.5 -3.5 -8.5 0 -10 c3.5 1.5 3.5 6.5 0 10z M204 31 c4.5 -1.5 8.5 0 9.5 3.5 c-2.5 3.5 -7 3.5 -9.5 0z M188 31 c-4.5 -1.5 -8.5 0 -9.5 3.5 c2.5 3.5 7 3.5 9.5 0z M200 41 c2.5 3.5 1.5 8.5 -2 10 c-3.5 -2.5 -3.5 -7 2 -10z M192 41 c-2.5 3.5 -1.5 8.5 2 10 c3.5 -2.5 3.5 -7 -2 -10z'/%3E%3Ccircle cx='74' cy='152' r='2.6'/%3E%3Cpath d='M74 144 c-3.5 -3.5 -3.5 -8.5 0 -10 c3.5 1.5 3.5 6.5 0 10z M82 149 c4.5 -1.5 8.5 0 9.5 3.5 c-2.5 3.5 -7 3.5 -9.5 0z M66 149 c-4.5 -1.5 -8.5 0 -9.5 3.5 c2.5 3.5 7 3.5 9.5 0z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top / contain;
opacity: .3;
pointer-events: none;
z-index: 0;
}
.cta-in > * { position: relative; z-index: 1; }
.cta-in--two { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: stretch; }
.cta-in--two > div:last-child { display: flex; }
.cta-in--two > div:first-child { align-self: center; }
.cta-photo {
position: relative;
width: 300px;
max-width: 300px;
margin: 0;
align-self: stretch;
min-height: 240px;
overflow: hidden;
border-radius: var(--r-card);
}
.cta-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
.hero--inner .hero-grid--inner {
grid-template-columns: minmax(0, 1fr) 340px;
gap: 48px;
align-items: stretch;
}
.hero--inner .hero-grid--inner > div:last-child { display: flex; align-items: stretch; }
.hero--inner .hero-grid--inner .blobw--side {
display: flex;
align-self: start;
max-width: 340px;
}
.hero--inner .hero-grid--inner:has(.blobw--wide) .blobw--side { max-width: 440px; }
.hero--inner .hero-grid--inner .blobw--side .blob--photo {
position: relative;
width: 100%;
align-self: start;
height: auto;
aspect-ratio: var(--ph-ar, 2 / 3);
overflow: hidden;
border-radius: var(--r-card);
}
.hero--inner .hero-grid--inner .blobw--side .blob-img {
position: static;
inset: auto;
width: 100%;
height: auto;
object-fit: cover;
-webkit-mask-image: none;
mask-image: none;
}
.main:not(.main--prose) .textblock--photo,
.main--prose .textblock--photo {
grid-template-columns: 280px minmax(0, var(--read));
gap: 40px;
align-items: center;
}
.textblock--photo > .figw {
position: relative;
max-width: 280px;
align-self: center;
min-height: 0;
height: auto;
aspect-ratio: auto;
margin: 0;
overflow: hidden;
border-radius: var(--r-card);
}
.textblock--photo .fig-img {
position: static;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: var(--fig-ar, auto);
object-fit: cover;
aspect-ratio: auto;
}
.textblock--photo > .figw--tall { border-radius: var(--r-card); }
.about {
grid-template-columns: 180px minmax(0, 40ch);
gap: 44px;
align-items: center;
justify-content: center;
}
.about .blobw { max-width: 180px; }
.about .blob--photo {
aspect-ratio: var(--ph-ar);
border-radius: var(--r-card);
overflow: hidden;
}
.about .prose p {
font-family: var(--font-head);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.55;
color: var(--ink);
}
.vrev-grid--3 { grid-template-columns: repeat(3, minmax(0, 240px)); }
.vrev-grid--4 { grid-template-columns: repeat(4, minmax(0, 220px)); }
.vrev-grid--5 { grid-template-columns: repeat(5, minmax(0, 200px)); }
.vrev-grid--3, .vrev-grid--4 { justify-content: center; gap: 40px; }
.vrev-grid--5 { justify-content: center; gap: clamp(12px, 2.2vw, 24px); }
.vrev-el { border-radius: 22px; }
.vrev-cap { text-align: center; }
.slider {
grid-template-columns: repeat(auto-fit, minmax(0, 140px));
justify-content: center;
gap: 16px;
}
}
.step-n {
display: block;
width: auto;
height: auto;
border-radius: 0;
background: none;
color: var(--sage);
font: 600 48px/0.9 var(--font-head);
margin: 0 0 6px;
}
.card.step {
border-top: 1px solid rgba(77, 96, 81, .28);
padding-top: 22px;
}
@media (min-width: 900px) {
.step-n { font-size: 64px; }
}
.pcard:not(.pcard--compact) { display: flex; flex-direction: column; }
.pricebig {
display: flex;
align-items: baseline;
flex-wrap: wrap;
row-gap: 8px;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(77, 96, 81, .22);
}
.pricebig b {
white-space: nowrap;
font-family: var(--font-head);
font-weight: 600;
font-size: 2rem;
line-height: 1;
color: var(--ink);
}
.pricebig .cur {
font-family: var(--font-body);
font-weight: 500;
font-size: .72em;
}
.pricebig .eur { color: var(--muted); }
.pricebig .dur {
margin-left: auto;
font-size: .875rem;
color: var(--sage-deep);
background: var(--sage-pale);
border-radius: 999px;
padding: 4px 12px;
white-space: nowrap;
}
.pcard:not(.pcard--compact) > .pricebig ~ .m-cta { margin-top: 14px; }
.pcard .m-cta { justify-content: space-between; }
.t-safety, .t-mark-note { color: var(--ink); }
.figw, .figw--in, .textblock--photo > .figw, .faq-in--photo .figw, .listw--photo .figw {
width: min(100%, 640px);
}
.figw--tall { width: min(100%, 420px); }
.figw--in, .textblock--photo > .figw { aspect-ratio: auto; }
.textblock--photo > .figw > .fig-img { aspect-ratio: var(--fig-ar, auto); }
.t-q legend {
font-family: var(--font-body);
font-weight: 500;
font-size: 1.0625rem;
color: var(--ink);
}
details.more:not([open]) {
padding: 0;
margin-bottom: 0;
-webkit-mask-image: none;
mask-image: none;
}
details:not([open]) > :not(summary) {
display: none;
}
h1 { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }
.crumbs a, .crumbs span {
display: inline-flex;
align-items: center;
min-height: var(--touch);
}
.src-link {
display: inline-flex;
align-items: center;
min-height: 32px;
}
@media (max-width: 899px) {
.hero--inner .hero-grid--inner {
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.hero--inner .hero-grid--inner > div:last-child { order: 3; }
.hero--inner .hero-txt { order: 1; margin-top: 0; }
.hero--inner .hero-txt .btns { order: 3; }
.hero--inner .hero-txt .notes { order: 4; }
.hero--inner .hero-txt .priceline { order: 5; }
.hero--inner .blobw--side {
max-width: 450px;
margin: 18px 0 0;
}
.hero--inner .blobw--side .blob--photo {
aspect-ratio: 5 / 3;
max-height: 300px;
border-radius: var(--r-card);
overflow: hidden;
}
.hero--inner .blobw--side .blob-img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (min-width: 900px) {
.faq-in--photo { align-items: stretch; }
.faq-in--photo > .figw {
position: relative;
align-self: stretch;
max-width: 280px;
min-height: 200px;
margin: 0;
overflow: hidden;
border-radius: var(--r-card);
}
.faq-in--photo > .figw .fig-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: auto;
}
.main--prose .notice { max-width: var(--read); margin-inline: auto; }
}
@media (min-width: 900px) {
.cta-img,
.hero--inner .hero-grid--inner .blobw--side .blob-img,
.textblock--photo .fig-img,
.about .blob-img,
.listw--photo .fig-img,
.faq-in--photo .fig-img {
-webkit-mask-image: var(--ph-edge-wide);
mask-image: var(--ph-edge-wide);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
}
.fgroup > summary {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cream-2);
}
.foot h2, .foot h3 {
font-weight: 600;
color: var(--cream-2);
}
.main--booking .pcard .btn-mini,
.main--booking .pcard .btn--sm {
min-height: 48px;
padding: 12px 22px;
font-size: 1rem;
background: var(--sage-deep);
color: var(--white);
border-radius: 999px;
}
@media (max-width: 639px) {
.main--booking .pcard .btn-mini,
.main--booking .pcard .btn--sm {
width: 100%;
justify-content: center;
}
.main--booking .pcard .m-cta { flex-direction: column; align-items: stretch; }
}
@media (min-width: 900px) {
.hero--inner .hero-grid--inner:not(:has(.blobw--side)),
.main:not(.main--prose) .hero--inner .hero-solo,
.main--prose .hero--inner .hero-solo {
grid-template-columns: minmax(0, 1fr);
max-width: var(--read);
margin-inline: auto;
}
.main:not(.main--prose) .hero--inner .hero-solo > * { max-width: 100%; }
.hero .badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero .badges li { flex: 0 0 auto; }
}
.grid--row .pcard--photo > .pcard-media {
aspect-ratio: var(--fig-ar, 2 / 3);
height: auto;
width: min(100%, calc(240px * var(--fig-ar, 2 / 3)));
margin: 0 auto 4px;
border-radius: 16px;
overflow: hidden;
}
.grid--row .pcard--photo > .pcard-media .pcard-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
@media (min-width: 900px) {
.grid--row .pcard--photo {
flex-direction: row;
align-items: flex-start;
gap: 20px;
padding-top: 16px;
}
.grid--row .pcard--photo > .pcard-media {
flex: 0 0 auto;
width: min(38%, calc(279px * var(--fig-ar, 2 / 3)));
margin: 0;
}
.grid--row .pcard--photo:has(.pcard-media--wide) { flex-direction: column; }
.grid--row .pcard--photo:has(.pcard-media--wide) > .pcard-media {
width: 100%;
margin: 0 0 4px;
}
}
@media (max-width: 899px) {
.hero--inner .blobw--side .blob--photo,
.hero--composed .blobw--side .blob--photo {
aspect-ratio: var(--ph-ar, 2 / 3);
width: min(100%, calc(315px * var(--ph-ar, 2 / 3)));
max-width: none;
max-height: none;
height: auto;
margin-inline: auto;
border-radius: var(--r-card);
}
.hero--inner .blobw--side .blob-img,
.hero--composed .blobw--side .blob-img {
width: 100%;
height: auto;
object-fit: cover;
object-position: 50% 50%;
}
}
@media (min-width: 900px) {
.hero--inner .blobw--side { align-self: start; }
.hero--inner .blobw--side .blob--photo {
aspect-ratio: var(--ph-ar, 2 / 3);
height: auto;
width: 100%;
overflow: hidden;
}
.hero--inner .blobw--side .blob-img {
width: 100%;
height: auto;
object-fit: cover;
object-position: 50% 50%;
}
}
@media (min-width: 1100px) {
.hero--inner .hero-grid--inner { grid-template-columns: minmax(0, 1fr) 340px; }
.hero--inner .hero-grid--inner:has(.blobw--wide) {
grid-template-columns: minmax(0, 1fr) 440px;
}
}
@media (min-width: 900px) {
.faq-in--photo > .figw {
position: sticky;
top: calc(var(--head-h) + 16px);
align-self: start;
width: 300px;
max-width: 300px;
min-height: 0;
aspect-ratio: auto;
margin: 0;
overflow: visible;
}
.faq-in--photo > .figw .fig-img {
position: static;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: var(--fig-ar, auto);
object-fit: cover;
border-radius: var(--r-card);
}
.listw--photo > .figw {
align-self: start;
aspect-ratio: auto;
}
.listw--photo > .figw .fig-img {
width: 100%;
height: auto;
aspect-ratio: var(--fig-ar, auto);
}
}
@media (min-width: 900px) {
.cta-in--two > div:last-child { align-items: center; }
.cta-photo {
width: min(300px, calc(285px * var(--fig-ar, 2 / 3)));
max-width: 300px;
min-height: 0;
height: auto;
align-self: center;
aspect-ratio: var(--fig-ar, auto);
}
.cta-img {
position: static;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: var(--fig-ar, auto);
object-fit: cover;
}
}
@media (min-width: 900px) {
.about .blobw { max-width: 200px; }
.about .blob--photo {
aspect-ratio: var(--ph-ar, 2 / 3);
height: auto;
}
.about .blob-img {
width: 100%;
height: auto;
object-fit: cover;
object-position: 50% 50%;
}
}
.seg-ph { aspect-ratio: var(--fig-ar, 16 / 10); }
.seg-img { width: 100%; height: auto; object-fit: cover; }
@media (min-width: 900px) {
.cta-in--two::after {
top: auto;
right: auto;
left: 0;
bottom: 0;
background-position: left bottom;
transform: scaleX(-1);
transform-origin: left bottom;
opacity: .4;
}
}
:root {
--ph-edge-dark:
linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%),
linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.ph-soft--dark {
-webkit-mask-image: var(--ph-edge-dark);
mask-image: var(--ph-edge-dark);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@media (min-width: 900px) {
.cta-img.ph-soft--dark,
.textblock--photo .fig-img.ph-soft--dark,
.listw--photo .fig-img.ph-soft--dark,
.faq-in--photo .fig-img.ph-soft--dark,
.about .blob-img.ph-soft--dark,
.hero--inner .blobw--side .blob-img.ph-soft--dark {
-webkit-mask-image: var(--ph-edge-dark);
mask-image: var(--ph-edge-dark);
}
}
.foot h2,
.foot h3 {
display: flex;
align-items: center;
min-height: var(--touch);
margin: 0;
}
@media (max-width: 899px) {
.pcard-media:not(.pcard-media--wide) {
width: min(100%, calc(240px * var(--fig-ar, 4 / 3)));
margin-inline: auto;
}
}
@media (min-width: 900px) {
.textblock--photo > .figw {
max-width: min(280px, calc(240px * var(--fig-ar, 2 / 3)));
}
}
.notes li::before,
.trust li::before,
.cols li::before,
.feature-side li::before,
.notice--info li::before,
.pay li::before,
.badges .ico {
-webkit-mask-image: var(--lotos);
mask-image: var(--lotos);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
border-radius: 0;
border: 0;
}
.badges .ico {
display: inline-block;
width: 14px;
height: 14px;
flex: 0 0 auto;
background: currentColor;
}
.ar-1536x1024{--fig-ar:1536/1024}
.phar-1536x1024{--ph-ar:1536/1024}
.ar-373x560{--fig-ar:373/560}
.phar-373x560{--ph-ar:373/560}
.ar-380x560{--fig-ar:380/560}
.phar-380x560{--ph-ar:380/560}
.ar-396x560{--fig-ar:396/560}
.phar-396x560{--ph-ar:396/560}
.ar-545x800{--fig-ar:545/800}
.phar-545x800{--ph-ar:545/800}
.ar-560x397{--fig-ar:560/397}
.phar-560x397{--ph-ar:560/397}
.ar-560x700{--fig-ar:560/700}
.phar-560x700{--ph-ar:560/700}
.ar-560x747{--fig-ar:560/747}
.phar-560x747{--ph-ar:560/747}
.ar-560x792{--fig-ar:560/792}
.phar-560x792{--ph-ar:560/792}
.ar-672x1008{--fig-ar:672/1008}
.phar-672x1008{--ph-ar:672/1008}
.ar-700x1050{--fig-ar:700/1050}
.phar-700x1050{--ph-ar:700/1050}
.ar-700x467{--fig-ar:700/467}
.phar-700x467{--ph-ar:700/467}
.ar-900x600{--fig-ar:900/600}
.phar-900x600{--ph-ar:900/600}