@layer base, lang, components;

@layer base {
h1{hyphens:manual}
a{color:var(--red)}
a:hover{color:var(--red-dark)}
.dd{position:relative;display:flex;align-items:center}
.dd-menu{display:none;position:absolute;top:100%;left:-16px;padding-top:14px;z-index:10}
.dd-menu a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:8px;font-weight:400;white-space:nowrap}
.dd-menu a:hover{background:var(--rose);color:var(--red)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.flip{perspective:1000px;outline:none;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip:hover .flip-in,.flip:focus .flip-in,.flip:focus-within .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{position:absolute;inset:0;border-radius:16px;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-b{transform:rotateY(180deg)}
summary::marker{color:var(--red)}
.proc-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0 0 12px}
.proc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 0;border-top:1px solid #E3E3E3;align-items:start}
.proc-c1{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:4px}
.proc-c23{grid-column:2 / 4;min-width:0;display:flex;flex-direction:column;gap:12px}
.proc-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.proc-c2,.proc-c3{min-width:0;display:flex;flex-direction:column;gap:10px;border-radius:16px;padding:20px 22px;box-sizing:border-box}
.proc-row .proc-c2{background:var(--paper)}
.proc-row .proc-c3{background:var(--rose)}
.proc-head .proc-c2,.proc-head .proc-c3{display:block;padding:0 22px;background:none}
.proc-res{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;border:1.5px solid #EDB9BB;border-radius:12px;padding:12px 18px}
.proc-title{white-space:nowrap}
.proc-lbl{display:none}
.step-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;row-gap:0}
.step-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;margin-bottom:20px;background:var(--white);border:1px solid #E6E6E6;border-radius:20px;padding:14px 14px 18px;box-shadow:0 6px 20px rgba(51,51,51,0.05)}
.step-card>*+*{margin-top:16px}
.ov{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.ov-row{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ov-line{position:absolute;left:8.33%;right:8.33%;top:19px;height:2px;background:#EDB9BB}
.ov-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.ov-dot{width:40px;height:40px;border-radius:50%;background:var(--red);color:var(--white);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #FAFAFA}
.ov-durs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ov-dur{justify-self:center;font-size:12.5px;font-weight:600;color:var(--red);background:#FBEDED;border-radius:999px;padding:4px 10px;white-space:nowrap}
.tl{display:flex;align-items:flex-start}
.tl-node{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:44px}
.tl-dot{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 7px #FBEDED}
.tl-seg{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;margin:0 -55px}
.tl-seg>span:first-child{height:34px;line-height:34px}
.tl-line{display:block;width:100%;margin-top:20px}
@media (max-width: 960px){.step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.proc-head{display:none}.proc-row{grid-template-columns:minmax(0,1fr)}.proc-row .proc-c23{grid-column:auto;margin-top:0}.proc-pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}.proc-lbl{display:block}.proc-title{white-space:normal}}
@media (max-width: 640px){.step-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width: 860px){.ov{display:none}}
@media (max-width: 760px){.fee-arrow{display:none}.tl{flex-direction:column;align-items:stretch}.tl-node{flex:none;flex-direction:row;text-align:left;padding-top:0}.tl-seg{flex:none;flex-direction:row;margin:0 0 0 10px;padding:14px 0 14px 24px;border-left:4px solid var(--red)}.tl-seg>span:first-child{height:auto;line-height:1.3}.tl-line{display:none}}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.ov-durs .ov-dur{grid-column:5 / 6}
@media (max-width: 960px){.paths{grid-template-columns:minmax(0,1fr)}.rights{grid-template-columns:repeat(2,minmax(0,1fr))}.mods{grid-template-columns:minmax(0,1fr)}}
@media (max-width: 560px){.rights{grid-template-columns:minmax(0,1fr)}}
.anch a:hover{background:var(--rose)}
.htl{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.htl::before{content:"";position:absolute;left:0;right:0;top:41px;height:2px;background:#EDB9BB}
.htl li{position:relative;display:flex;flex-direction:column;gap:10px}
.htl .dot{width:18px;height:18px;border-radius:50%;background:var(--white);border:3px solid var(--red);box-sizing:border-box;position:relative;z-index:1}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width: 900px){.htl{grid-template-columns:minmax(0,1fr);gap:0;padding-left:24px}.htl::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}.htl li{padding:0 0 22px}.htl .dot{position:absolute;left:-24px;top:30px}.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 520px){.pillars{grid-template-columns:minmax(0,1fr)}}
.pm{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.45);align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.pm:target{display:flex}
.pm-go{pointer-events:none;opacity:0.4}
#pm-ok:checked ~ .pm-act .pm-go{pointer-events:auto;opacity:1}
#pm-ok:checked + label .pm-box{background:var(--red);box-shadow:inset 0 0 0 3px var(--white)}
#pm-ok:focus-visible + label .pm-box{outline:2px solid var(--red);outline-offset:2px}
@media (max-width: 760px){.pr-row{grid-template-columns:1fr !important}}
}

:root {
  --red: #C2191F;
  --red-dark: #8E1217;
  --ink: #333333;
  --muted: #5F5F5F;
  --grey: #B5B5B6;
  --line: #EDEDED;
  --white: #FFFFFF;
  --blush: #FBF6F6;
  --rose: #FBF1F1;
  --paper: #F7F7F7;
}