[data-land] body { visibility: hidden; }
main > section[id]:not(.hero) { scroll-margin-top: -36px; }
@media (min-width: 1100px) {
main > section[id]:not(.hero) { scroll-margin-top: -80px; }
}
.hero { padding: 30px 0 34px; }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.bridge {
--wh: clamp(112px, 38vw, 300px);
--srv: calc(var(--wh) * 0.34);
position: relative;
height: calc(var(--wh) * 1.66);
margin-bottom: 10px;
}
.bridge-word {
position: absolute;
left: 0;
top: 0;
width: calc(var(--wh) * 1.18162);
height: var(--wh);
fill: var(--ink);
}
.deck {
position: absolute;
left: calc(var(--wh) * 1.0934);
right: calc(var(--srv) * 0.5);
top: calc(var(--wh) * 0.24833);
height: calc(var(--wh) * 0.09785);
background: var(--ink);
transform-origin: 0 50%;
}
.srv {
position: absolute;
right: 0;
top: calc(var(--wh) * 0.29726 - var(--srv) * 0.62);
width: var(--srv);
}
.srv-box {
display: grid;
align-content: center;
gap: 12%;
height: calc(var(--srv) * 1.24);
padding: 0 13%;
background: var(--navy);
border: var(--line);
border-radius: 8px;
box-shadow: 4px 4px 0 var(--ink);
}
.srv-box i {
position: relative;
height: calc(var(--srv) * 0.12);
border-radius: 3px;
background: #24384e;
}
.srv-box i::after {
content: "";
position: absolute;
right: 8%;
top: 50%;
width: calc(var(--srv) * 0.07);
height: calc(var(--srv) * 0.07);
translate: 0 -50%;
border-radius: 50%;
background: #5c7088;
}
.srv-box i:first-child::after { background: var(--lime); }
.srv-name {
display: none;
height: 1.4em;
margin-top: 8px;
overflow: hidden;
font: 500 11px/1.4 var(--f-mono);
text-align: center;
white-space: nowrap;
}
.srv-names b {
display: block;
font-weight: 500;
}
.tag {
--drop: 12px;
position: absolute;
top: calc(var(--wh) * 0.3462);
left: var(--x);
translate: -50% 0;
transform-origin: 50% 0;
rotate: var(--r);
}
.tag::before {
content: "";
position: absolute;
left: calc(50% - 1px);
top: 0;
width: 2px;
height: calc(var(--drop) + 4px);
background: var(--ink);
}
.tag-in {
position: relative;
display: block;
margin-top: var(--drop);
padding: 6px 10px;
border: var(--line);
border-radius: 6px;
background: var(--card);
box-shadow: 3px 3px 0 var(--ink);
font: 500 12px/1.2 var(--f-mono);
white-space: nowrap;
}
.tag-in::before {
content: "";
position: absolute;
left: 50%;
top: -6px;
width: 9px;
height: 9px;
translate: -50% 0;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--card);
}
.tag-1 { --x: 52%; --r: -4deg; --drop: calc(var(--wh) * 0.74); }
.tag-2 { --x: 68%; --r: 3deg; --drop: var(--wh); }
.tag-2 .tag-in { background: var(--lime); }
.tag-3 { --x: 84%; --r: -2deg; --drop: calc(var(--wh) * 0.74); }
.tag-3 .tag-in { background: var(--blue); }
.h1 {
margin-bottom: 22px;
font: 800 13vw/0.93 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.035em;
white-space: nowrap;
}
.br-d { display: none; }
.hero-copy {
display: grid;
gap: 20px;
align-content: start;
}
.lede {
display: grid;
gap: 4px;
max-width: 34em;
font-size: 19px;
line-height: 1.45;
}
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
}
.dl { display: none; }
.dl-any,
[data-os="linux"] .dl-linux,
[data-os="mac"] .dl-mac,
[data-os="windows"] .dl-windows { display: inline; }
[data-os] .dl-any { display: none; }
.warn {
max-width: 30em;
font-size: 15px;
line-height: 1.45;
}
.warn .pill { margin-right: 2px; font-size: 15px; padding: 1px 8px 2px; }
.stickers {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 16px;
margin-top: 30px;
list-style: none;
}
.stickers .st:nth-child(1) { rotate: -10deg; }
.stickers .st:nth-child(2) { rotate: 3deg; }
.stickers .st:nth-child(3) { rotate: -2deg; }
@media (min-width: 700px) {
.bridge { --wh: clamp(160px, 24vw, 340px); --srv: calc(var(--wh) * 0.46); height: calc(var(--wh) + 8px); margin-bottom: 26px; }
.tag-in { font-size: 14px; padding: 7px 13px; }
.tag-1 { --x: 40%; --drop: 24px; }
.tag-2 { --x: 56%; --drop: 56px; }
.tag-3 { --x: 72%; --drop: 28px; }
.srv-name { display: block; font-size: 13px; }
.h1 { font-size: clamp(60px, 8.6vw, 112px); }
.br-m { display: none; }
.br-d { display: inline; }
}
@media (min-width: 1100px) {
.hero { padding: 36px 0 34px; }
.hero-grid {
position: relative;
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
grid-template-areas: "bridge bridge" "h1 copy" "st copy";
column-gap: 48px;
}
.bridge { grid-area: bridge; }
.h1 { grid-area: h1; font-size: clamp(80px, 6.8vw, 106px); margin-bottom: 0; }
.hero-copy { grid-area: copy; padding-top: 10px; }
.stickers { grid-area: st; margin-top: 26px; align-self: start; }
.stickers .st-round { position: absolute; left: 47%; top: -12px; }
.lede { font-size: 20px; }
}
.ribbon-zone {
position: relative;
padding: 26px 0 40px;
}
.ribbon {
margin-inline: -60px;
rotate: -2deg;
overflow: hidden;
background: var(--lime);
border-block: var(--line);
}
.ribbon-track {
display: flex;
width: max-content;
}
.ribbon-list {
display: flex;
flex-shrink: 0;
padding: 13px 0 14px;
list-style: none;
}
.ribbon-list li {
display: flex;
align-items: center;
font: 700 17px/1 var(--f-mono);
white-space: nowrap;
}
.ribbon-list li::after {
content: "";
width: 11px;
height: 11px;
margin: 0 24px;
background: var(--ink);
rotate: 45deg;
}
.ribbon-btn {
display: none;
position: absolute;
right: var(--gut);
bottom: 0;
min-height: 32px;
padding: 7px 12px 8px;
border: var(--line);
border-radius: 999px;
background: var(--card);
color: var(--ink);
font: 600 13px/1 var(--f-text);
font-variation-settings: var(--v-text);
cursor: pointer;
}
.ribbon-btn:hover { background: var(--lime); }
.rb-play,
.is-paused .rb-pause { display: none; }
.is-paused .rb-play { display: inline; }
.product { padding: 48px 0 64px; }
.shot {
position: relative;
margin: 0;
}
.shot-frame {
position: relative;
overflow: hidden;
border: var(--line);
border-radius: 14px;
background: var(--card);
box-shadow: 8px 8px 0 var(--ink);
}
.shot-img { width: 100%; }
.marks {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: none;
}
.mk path {
stroke: var(--blue);
stroke-width: 4px;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.pin {
position: absolute;
left: var(--px);
top: var(--py);
display: grid;
place-items: center;
width: 24px;
height: 24px;
translate: -50% -50%;
border: var(--line);
border-radius: 50%;
background: var(--lime);
box-shadow: 2px 2px 0 var(--ink);
font: 800 13px/1 var(--f-head);
font-variation-settings: var(--v-head);
}
.pin-1 { --px: 20%; --py: 6.4%; }
.pin-2 { --px: 13.33%; --py: 49.34%; }
.pin-3 { --px: 61.5%; --py: 5.4%; }
.pin-4 { --px: 79.75%; --py: 81.24%; }
@media (min-width: 700px) {
.pin { width: 30px; height: 30px; font-size: 15px; box-shadow: 3px 3px 0 var(--ink); }
.pin-1 { --px: 15%; }
.pin-2 { --px: 10%; }
.pin-3 { --px: 46.13%; }
.pin-4 { --px: 59.81%; }
}
.notes {
display: grid;
gap: 12px;
margin-top: 30px;
list-style: none;
}
.note {
display: flex;
align-items: baseline;
gap: 12px;
font-size: 16px;
line-height: 1.4;
}
.note-n {
flex: none;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
translate: 0 -2px;
border: var(--line);
border-radius: 50%;
background: var(--lime);
font: 800 15px/1 var(--f-head);
font-variation-settings: var(--v-head);
}
.shot-cap {
margin-top: 18px;
color: var(--ink-soft);
font-size: 14px;
}
@media (min-width: 1100px) {
.shot {
display: grid;
grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
column-gap: 48px;
align-items: start;
}
.notes { margin-top: 6px; gap: 26px; }
.note { flex-direction: column; gap: 10px; font-size: 17px; }
.shot-cap { grid-column: 1 / -1; }
}
.name {
padding: 60px 0 64px;
background: var(--blue);
border-block: var(--line);
}
.name-grid {
display: grid;
gap: 52px;
}
.spec-art {
position: relative;
padding: 64px 0 40px;
}
.spec-word {
width: 100%;
height: auto;
fill: var(--ink);
}
.spec-lines {
position: absolute;
left: 0;
top: 64px;
width: 100%;
height: auto;
overflow: visible;
fill: none;
stroke: var(--ink);
stroke-width: 9;
}
.spec-lines circle {
fill: var(--lime);
stroke-width: 8;
}
.spec-l {
position: absolute;
font: 600 14px/1.25 var(--f-text);
font-variation-settings: var(--v-text);
}
.spec-l b {
display: block;
font: 800 17px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
}
.spec-bar { left: calc(74.97% - 10px); top: 0; width: 15em; max-width: 60%; translate: -100% 0; text-align: right; }
.spec-se,
.spec-tu {
bottom: 0;
font: 800 22px/1 var(--f-head);
font-variation-settings: var(--v-head);
}
.spec-se { left: 20.4%; translate: -50% 0; }
.spec-tu { left: 69.3%; translate: -50% 0; }
.spec-cap {
margin-top: 26px;
padding-top: 14px;
border-top: var(--line);
font-size: 16px;
}
.name-copy {
display: grid;
gap: 18px;
align-content: start;
}
.name-copy .hang {
margin-bottom: 8px;
border-top: calc(var(--h2) * 0.1) solid var(--ink);
}
.name-copy p { max-width: 32em; font-size: 18px; }
.name-copy .name-kicker {
margin-top: 10px;
font: 800 26px/1.1 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.02em;
}
@media (min-width: 1100px) {
.name { padding: 110px 0; }
.name-grid {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: 72px;
align-items: center;
}
.name-copy p { font-size: 19px; }
.name-copy .name-kicker { font-size: 32px; }
}
.features { padding: 64px 0 76px; }
.cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
list-style: none;
}
.card p { max-width: 38em; }
.c-files .card-face { background: var(--navy); color: #eef2f7; }
.c-files .num,
.c-mcp .num { background: var(--lime); color: var(--ink); }
.c-mcp .card-face { background: var(--navy); color: #eef2f7; }
.c-ai .card-face { background: var(--blue); }
.c-multi .card-face { background: var(--lime); }
.crop {
display: block;
max-width: 100%;
height: auto;
margin-top: 6px;
border: var(--line);
border-radius: 8px;
background: #0a0c11;
}
.c-files .crop { border-color: #3a4d63; }
.panes {
display: grid;
grid-template-columns: 1.5fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2px;
height: 104px;
margin-top: 8px;
overflow: hidden;
border: var(--line);
border-radius: 8px;
background: var(--ink);
}
.panes i { position: relative; background: #10151d; }
.panes i:first-child { grid-row: span 2; }
.panes i::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 46%;
height: 4px;
border-radius: 2px;
background: #3b4b60;
box-shadow: 0 9px 0 #3b4b60, 0 18px 0 #2b394a;
}
.panes i:first-child::after {
content: "";
position: absolute;
left: 10px;
top: 37px;
width: 8px;
height: 12px;
background: var(--lime);
}
.rules {
display: grid;
margin-top: 6px;
overflow: hidden;
border: var(--line);
border-radius: 10px;
background: var(--card);
}
.rules div {
display: grid;
gap: 2px;
padding: 11px 14px 12px;
}
.rules div + div { border-top: var(--line); }
.rules dt { font-weight: 700; }
@media (min-width: 700px) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-tabs,
.c-files,
.c-tunnels,
.c-keys,
.c-ai,
.c-multi { grid-column: span 2; }
.c-tabs .card-face,
.c-files .card-face {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 28px;
}
.c-tabs .card-face { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.c-tabs h3,
.c-tabs p,
.c-files h3,
.c-files p { grid-column: 1; }
.c-files .card-face { grid-template-rows: auto 1fr; }
.c-files p { align-self: start; }
.c-tabs .panes { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.c-files .crop { grid-column: 2; grid-row: 1 / span 2; margin-top: 22px; }
.c-tabs .panes { height: 100%; min-height: 150px; }
.rules { grid-template-columns: 1fr 1fr; }
.rules div + div { border-top: 0; border-left: var(--line); }
}
@media (min-width: 1000px) {
.c-ai .card-face {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto 1fr;
column-gap: 40px;
}
.c-ai h3,
.c-ai p,
.c-ai .rules { grid-column: 1; }
.c-ai .crop { grid-column: 2; grid-row: 1 / span 3; margin-top: 22px; }
.c-ai .rules { grid-template-columns: 1fr; align-self: start; }
.c-ai .rules div + div { border-left: 0; border-top: var(--line); }
}
@media (min-width: 1100px) {
.features { padding: 120px 0 130px; }
.cards {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 28px;
}
.c-tabs { grid-column: span 5; }
.c-files { grid-column: span 7; }
.c-tunnels { grid-column: span 7; }
.c-keys { grid-column: span 5; }
.c-ai,
.c-multi { grid-column: span 12; }
.c-same,
.c-mcp { grid-column: span 6; }
.c-tabs .card-face { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
.c-tabs .panes { grid-column: 1; grid-row: auto; min-height: 120px; margin-top: 8px; }
}
.pricing {
padding: 64px 0 76px;
background: var(--paper-2);
border-block: var(--line);
}
.tickets {
display: grid;
gap: 28px;
}
.ticket { border-radius: 16px; }
.ticket-face {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: var(--line);
border-radius: inherit;
background: var(--card);
transition: translate 0.14s ease-out;
}
.t-top {
position: relative;
padding: 24px 24px 22px;
border-bottom: 2px dashed var(--ink);
}
.t-top::before,
.t-top::after {
content: "";
position: absolute;
bottom: -12px;
width: 22px;
height: 22px;
border: var(--line);
border-radius: 50%;
background: var(--paper-2);
}
.t-top::before { left: -13px; }
.t-top::after { right: -13px; }
.t-top h3 {
font: 700 18px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
}
.t-price {
margin-top: 8px;
font: 800 46px/1 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.03em;
}
.t-list {
display: grid;
gap: 7px;
padding: 20px 24px 0;
list-style: none;
}
.t-list li {
position: relative;
padding-left: 22px;
}
.t-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 9px;
height: 9px;
background: var(--ink);
}
.t-list .t-off::before {
top: 0.5em;
width: 10px;
height: 11px;
background: linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 7px, var(--ink) 7px);
}
.t-note {
margin-top: auto;
padding: 18px 24px 22px;
color: var(--ink-soft);
font-size: 15px;
}
.t-full .ticket-face { background: var(--lime); }
.t-full .t-note { color: var(--ink); padding-bottom: 16px; }
.t-full .key { margin: 0 24px 26px; align-self: flex-start; }
.t-full .key-face { background: var(--card); }
.t-sticker {
position: absolute;
right: 18px;
top: 18px;
rotate: 6deg;
}
@media (min-width: 900px) {
.tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}
@media (min-width: 1100px) {
.pricing { padding: 120px 0 130px; }
.t-price { font-size: 54px; }
}
.download { padding: 64px 0 80px; }
.sec-sub {
display: grid;
gap: 8px;
}
.dl-status {
min-height: 3em;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.5;
}
.dl-status a { color: var(--ink); }
.dl-status [data-version] { font: 500 14px/1.5 var(--f-mono); }
.nojs-note {
max-width: 40em;
margin-bottom: 30px;
padding: 16px 18px;
border: var(--line);
border-radius: 10px;
background: var(--card);
box-shadow: 5px 5px 0 var(--ink);
}
.dl-zone {
display: grid;
gap: 34px;
}
.oses {
display: grid;
gap: 22px;
}
.no-js .oses { display: none; }
.os {
position: relative;
display: grid;
align-content: start;
gap: 12px;
padding: 22px 16px 24px;
border: var(--line);
border-radius: 14px;
background: var(--card);
}
.os h3 {
font: 800 34px/1 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.03em;
}
.os-meta { font-size: 15px; }
.os-meta .pill { margin-left: 6px; }
.os-hint {
color: var(--ink-soft);
font-size: 14px;
line-height: 1.45;
}
.os-keys {
display: grid;
gap: 16px;
margin-top: 4px;
}
.key-os { display: block; }
.key-os .key-face {
display: grid;
justify-content: stretch;
gap: 6px;
padding: 11px 14px 12px;
text-align: left;
}
.k-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.k-size {
min-width: 6ch;
font: 500 13px/1 var(--f-mono);
text-align: right;
white-space: nowrap;
}
.k-file {
display: block;
overflow: hidden;
color: var(--ink-soft);
font: 500 12px/1.3 var(--f-mono);
white-space: nowrap;
}
.k-unknown .k-size { visibility: hidden; }
.os-you {
display: none;
position: absolute;
right: 16px;
top: -16px;
rotate: 4deg;
}
[data-os="windows"] .os-windows .os-you,
[data-os="mac"] .os-mac .os-you,
[data-os="linux"] .os-linux .os-you { display: inline-block; }
[data-os="windows"] .os-windows .key-face,
[data-os="mac"] .os-mac .key-face,
[data-os="linux"] .os-linux .key-face { background: var(--lime); }
[data-os="windows"] .os-windows .k-file,
[data-os="mac"] .os-mac .k-file,
[data-os="linux"] .os-linux .k-file { color: var(--ink); }
[data-os="windows"] .os-windows,
[data-os="mac"] .os-mac,
[data-os="linux"] .os-linux { order: -1; box-shadow: 6px 6px 0 var(--ink); }
.sticky {
position: relative;
display: grid;
gap: 10px;
align-content: start;
max-width: 440px;
padding: 26px 22px 24px;
border: var(--line);
background: var(--marigold);
box-shadow: 6px 6px 0 var(--ink);
rotate: 1.5deg;
font-size: 16px;
line-height: 1.45;
}
.sticky::before {
content: "";
position: absolute;
left: 50%;
top: -13px;
width: 92px;
height: 24px;
translate: -50% 0;
rotate: -3deg;
background: rgb(255 252 245 / 0.72);
border: 1px solid rgb(17 17 17 / 0.25);
}
.sticky-h {
font: 800 22px/1.1 var(--f-disp);
font-variation-settings: var(--v-disp);
}
.sticky a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.dl-more {
display: grid;
gap: 18px;
margin-top: 56px;
padding-top: 40px;
border-top: var(--line);
}
.dl-more > div {
display: grid;
gap: 14px;
align-content: start;
}
.dl-h3 {
font: 700 28px/1.15 var(--f-head);
font-variation-settings: var(--v-head);
}
.inst-grid {
display: grid;
gap: 34px;
}
.inst {
display: grid;
gap: 14px;
align-content: start;
}
.inst h4 {
font: 700 22px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
}
.inst h4 .pill { margin-left: 6px; vertical-align: 3px; }
@media (min-width: 700px) and (max-width: 1099px) {
.os { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; }
.os > :not(.os-keys):not(.os-you) { grid-column: 1 / -1; }
.os-keys { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) {
.inst-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
.inst-linux { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
.download { padding: 120px 0 130px; }
.dl-zone {
grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
gap: 40px;
align-items: start;
}
.oses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sticky { margin-top: 12px; }
.dl-more { margin-top: 72px; }
.verify {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: 48px;
align-items: start;
}
.inst-linux {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: 48px;
}
.inst-linux > * { grid-column: 1; }
.inst-linux .code-apt { grid-column: 2; grid-row: 1 / span 6; align-self: start; }
}
.request {
padding: 64px 0 80px;
background: var(--paper-2);
border-block: var(--line);
}
.req-grid {
display: grid;
gap: 34px;
}
.req-copy {
display: grid;
gap: 18px;
align-content: start;
}
.req-copy .hang {
margin-bottom: 8px;
border-top: calc(var(--h2) * 0.1) solid var(--ink);
}
.req-copy p { max-width: 32em; font-size: 18px; }
.req-box {
display: grid;
padding: 22px 18px 24px;
border: var(--line);
border-radius: 16px;
background: var(--card);
box-shadow: 8px 8px 0 var(--ink);
}
.req-box > * { grid-area: 1 / 1; }
.no-js .reqform { display: none; }
.reqform {
display: grid;
gap: 20px;
}
.reqform.is-gone { visibility: hidden; }
.f-row {
display: grid;
gap: 20px;
}
.field-note {
color: var(--ink-soft);
font-size: 15px;
}
.field-note a { color: var(--ink); }
.reqform.is-sent .err-slot { min-height: 118px; }
@media (min-width: 700px) {
.reqform.is-sent .err-slot { min-height: 96px; }
}
.req-send { justify-self: start; }
.req-send .key-face { min-width: 190px; }
.reqdone {
display: grid;
gap: 14px;
align-content: start;
}
.reqdone h3 {
font: 800 34px/1.05 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.02em;
}
.reqdone .st { justify-self: start; rotate: -3deg; margin-bottom: 8px; }
@media (min-width: 700px) {
.req-box { padding: 30px 30px 32px; }
.f-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
.request { padding: 120px 0 130px; }
.req-grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 72px;
align-items: start;
}
.req-copy p { font-size: 19px; }
}
.faq { padding: 64px 0 76px; }
.qa-list {
display: grid;
gap: 16px;
}
.qa {
border: var(--line);
border-radius: 12px;
background: var(--card);
}
.qa[open] { box-shadow: 6px 6px 0 var(--ink); }
.qa summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 18px 18px 20px;
border-radius: 10px;
font: 700 20px/1.25 var(--f-head);
font-variation-settings: var(--v-head);
list-style: none;
cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
content: "";
flex: none;
width: 30px;
height: 30px;
border: var(--line);
border-radius: 50%;
background:
linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat,
var(--paper);
}
.qa[open] summary::after {
background:
linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
var(--lime);
}
.qa summary:hover::after { background-color: var(--lime); }
.qa-a {
max-width: 46em;
padding: 0 20px 22px;
}
@media (min-width: 1100px) {
.faq { padding: 120px 0 130px; }
.faq-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: 72px;
align-items: start;
}
.faq-grid .sec-head { grid-template-columns: minmax(0, 1fr); }
.qa summary { font-size: 22px; padding: 22px 22px 22px 24px; }
.qa-a { padding: 0 24px 24px; font-size: 18px; }
}
.contact {
padding: 64px 0 84px;
background: var(--paper-2);
border-top: var(--line);
}
.mails {
display: grid;
gap: 28px;
}
.mail { border-radius: 14px; }
.mail .card-face { gap: 14px; }
.mail-addr {
justify-self: start;
max-width: 100%;
overflow-wrap: anywhere;
font: 800 clamp(21px, 6.2vw, 36px)/1.1 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.02em;
text-decoration: underline;
text-decoration-color: var(--blue);
text-decoration-thickness: 4px;
text-underline-offset: 6px;
}
.mail-addr:hover { background: var(--lime); }
.mail-support .card-face { background: var(--lime); }
.mail-support .mail-addr { text-decoration-color: var(--ink); }
.security {
max-width: 44em;
margin-top: 36px;
font-size: 16px;
}
.security .pill { margin-right: 4px; }
@media (min-width: 760px) {
.mails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mail-addr { font-size: clamp(20px, 3.1vw, 32px); }
}
@media (min-width: 1100px) {
.contact { padding: 120px 0 130px; }
.mails { gap: 30px; }
.mail-addr { font-size: clamp(28px, 2.6vw, 38px); }
}
@media (prefers-reduced-motion: no-preference) {
.js .deck { animation: deck 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
.js .srv-box i:first-child::after { animation: led 0.3s ease-out 1s both; }
.js .tag { animation: swing 1.2s cubic-bezier(0.3, 1.5, 0.45, 1) both; }
.js .tag-1 { animation-delay: 0.95s; }
.js .tag-2 { animation-delay: 1.1s; }
.js .tag-3 { animation-delay: 1.25s; }
.js .srv-names { animation: names 2.5s ease-in-out 1.7s both; }
.js .ribbon-track { animation: slide 46s linear infinite; }
.js .ribbon-btn { display: inline-flex; align-items: center; }
.reveal-on .note {
opacity: 0;
translate: 0 8px;
transition: opacity 0.35s ease-out, translate 0.35s ease-out;
}
.reveal-on .notes.in .note {
opacity: 1;
translate: 0 0;
}
.reveal-on .notes.in .note-2 { transition-delay: 0.08s; }
.reveal-on .notes.in .note-3 { transition-delay: 0.16s; }
.reveal-on .notes.in .note-4 { transition-delay: 0.24s; }
}
@keyframes deck {
from { transform: scaleX(0); }
}
@keyframes led {
from { opacity: 0; }
}
@keyframes swing {
from { opacity: 0; rotate: -30deg; }
25% { opacity: 1; }
to { rotate: var(--r); }
}
@keyframes names {
0%, 22% { transform: translateY(0); }
30%, 52% { transform: translateY(-25%); }
60%, 82% { transform: translateY(-50%); }
90%, 100% { transform: translateY(-75%); }
}
@keyframes slide {
to { transform: translateX(-50%); }
}