@font-face {
font-family: "Archivo Display";
src: url("/assets/archivo-display.9e9a926d1f.woff2") format("woff2");
font-weight: 850;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Archivo Title";
src: url("/assets/archivo-title.72bd582319.woff2") format("woff2");
font-weight: 760;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Atkinson Hyperlegible";
src: url("/assets/atkinson-400.6fb470572b.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Atkinson Hyperlegible";
src: url("/assets/atkinson-700.e42608ef47.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/redhat-mono-500.a9c341f45b.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("/assets/plex-sans-400.a7bbe08e8c.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("/assets/plex-sans-600.35c8d874cf.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
:root {
--desk: #e9eaec;
--paper: #ffffff;
--stone: #f4f4f2;
--char: #1f2328;
--char-2: #4a5059;
--muted: #6b717b;
--line: #d9dbdf;
--dash: #c3c6cc;
--marker: #ffe07a;
--marker-soft: #fff3c4;
--wa-wall: #efeae2;
--wa-out: #d9fdd3;
--wa-ink: #111b21;
--wa-meta: #667781;
--wa-icon: #54656f;
--display: "Archivo Display", "Arial Narrow", system-ui, sans-serif;
--title: "Archivo Title", "Arial Narrow", system-ui, sans-serif;
--body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
--pdf: "IBM Plex Sans", system-ui, sans-serif;
--wa-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--lift: 0 1px 0 rgba(31, 35, 40, 0.06), 0 18px 40px -22px rgba(31, 35, 40, 0.35);
color-scheme: light;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--paper);
color: var(--char);
font: 400 17px/1.6 var(--body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img,
svg {
max-width: 100%;
}
a {
color: var(--char);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:hover {
color: #000;
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 3px solid var(--char);
outline-offset: 3px;
}
h1,
h2,
h3 {
margin: 0;
font-weight: 400;
}
p {
margin: 0 0 1rem;
}
mark {
background: linear-gradient(transparent 12%, var(--marker) 12%, var(--marker) 88%, transparent 88%);
color: inherit;
padding: 0 0.12em;
}
code {
font-family: var(--mono);
font-size: 0.86em;
}
.wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
.skip-link {
position: absolute;
left: 8px;
top: -48px;
background: var(--char);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
z-index: 20;
}
.skip-link:focus {
top: 8px;
color: #fff;
}
.site-header {
background: var(--desk);
}
.site-header .wrap {
min-height: 70px;
display: flex;
align-items: center;
gap: 12px 28px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
margin-right: auto;
color: var(--char);
text-decoration: none;
font: 760 21px/1 var(--title);
letter-spacing: -0.01em;
}
.brand:hover {
color: var(--char);
}
.glyph {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--char);
color: #fff;
display: grid;
place-items: center;
flex: none;
}
.nav {
display: flex;
gap: 28px;
font-size: 15.5px;
}
.nav a {
color: var(--char-2);
text-decoration: none;
}
.nav a:hover,
.nav a[aria-current="page"] {
color: var(--char);
}
.nav a[aria-current="page"] {
text-decoration: underline;
text-decoration-color: var(--marker);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
.lang-switch {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
}
.lang-switch > * + *::before {
content: "·";
color: var(--muted);
margin: 0 7px;
font-weight: 400;
}
.lang-switch a {
color: var(--muted);
text-decoration: none;
}
.lang-switch a:hover {
color: var(--char);
}
.lang-switch span[aria-current] {
color: var(--char);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 15px 28px;
border-radius: 12px;
border: 2px solid var(--char);
background: var(--char);
color: #fff;
font: 700 18px/1.15 var(--body);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.button:hover {
background: #000;
border-color: #000;
color: #fff;
}
.button.quiet {
background: transparent;
color: var(--char);
border-color: var(--line);
}
.button.quiet:hover {
background: var(--stone);
color: var(--char);
border-color: var(--dash);
}
.button[disabled] {
opacity: 0.6;
cursor: progress;
}
.link-mark,
.drop-sample {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--char);
font-weight: 700;
text-decoration: none;
border-bottom: 3px solid var(--marker);
padding-bottom: 1px;
}
.link-mark svg,
.drop-sample svg {
width: 18px;
height: 18px;
flex: none;
}
.link-mark:hover,
.drop-sample:hover {
border-bottom-color: var(--char);
}
.band {
padding: 104px 0;
}
.band.stone {
background: var(--stone);
}
.band.desk {
background: var(--desk);
}
.band-head {
max-width: 52em;
}
.band-head h2,
.doc-row h2 {
scroll-margin-top: 24px;
}
.band-head h2 {
font: 850 56px/0.98 var(--display);
letter-spacing: -0.01em;
text-wrap: balance;
}
.lede {
font-size: 19px;
color: var(--char-2);
margin: 16px 0 0;
max-width: 54ch;
}
.hero {
background: var(--desk);
padding: 34px 0 60px;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
grid-template-rows: 1fr 1fr auto;
grid-template-areas: "title stage" "proofs stage" "tool tool";
column-gap: 64px;
}
.hero-title {
grid-area: title;
align-self: end;
}
.hero h1 {
font: 850 84px/0.93 var(--display);
letter-spacing: -0.015em;
text-wrap: balance;
}
.hero h1.long {
font-size: 70px;
}
.hero .subtitle {
font-size: 21px;
line-height: 1.45;
color: var(--char-2);
margin: 22px 0 0;
max-width: 30ch;
}
.proofs {
grid-area: proofs;
align-self: start;
list-style: none;
margin: 34px 0 0;
padding: 0;
display: grid;
gap: 14px;
}
.proofs li {
display: grid;
grid-template-columns: 40px 1fr;
align-items: center;
font-size: 16px;
line-height: 1.4;
color: var(--char-2);
}
.proofs b {
color: var(--char);
}
.proofs svg {
width: 30px;
height: 30px;
padding: 6px;
border-radius: 8px;
background: var(--paper);
color: var(--char);
}
.hero-stage {
grid-area: stage;
align-self: center;
width: 100%;
}
.hero .tool {
grid-area: tool;
margin-top: 28px;
}
.hero:has(.tool[data-state="reading"], .tool[data-state="read"], .tool[data-state="done"]) .hero-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-areas: "title" "tool";
}
.hero:has(.tool[data-state="reading"], .tool[data-state="read"], .tool[data-state="done"]) :is(.hero-stage, .proofs) {
display: none;
}
.drop {
background: var(--paper);
border-radius: 18px;
padding: 12px;
box-shadow: var(--lift);
}
.drop-in {
position: relative;
border: 2px dashed var(--dash);
border-radius: 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
padding: 20px 22px 20px 26px;
}
.drop-in::after {
content: "";
position: absolute;
inset: -2px;
border: 2px dashed var(--char);
border-radius: 12px;
background: var(--marker-soft);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.drop-in.over::after {
opacity: 1;
}
.drop-in > * {
position: relative;
z-index: 1;
}
.tray {
width: 58px;
height: 58px;
border-radius: 14px;
background: var(--stone);
color: var(--char);
display: grid;
place-items: center;
flex: none;
}
.drop-title {
font: 760 22px/1.25 var(--title);
margin: 0;
}
.drop-sub {
color: var(--muted);
font-size: 15.5px;
margin: 3px 0 0;
}
.pick {
position: relative;
}
.pick input {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
cursor: pointer;
}
.pick:focus-within {
outline: 3px solid var(--char);
outline-offset: 3px;
}
.drop-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px 24px;
flex-wrap: wrap;
margin-top: 14px;
}
.drop-note {
display: flex;
gap: 9px;
align-items: center;
margin: 0;
font-size: 15px;
color: var(--char-2);
}
.drop-note svg {
flex: none;
}
.drop-sample {
font-size: 15.5px;
}
.drop-error,
.work-error {
margin: 12px 0 0;
padding: 14px 16px;
border-radius: 12px;
background: var(--marker-soft);
border-left: 4px solid var(--char);
color: var(--char);
font-size: 16px;
}
.tool[data-state="read"] :is(.drop, .drop-foot),
.tool[data-state="done"] :is(.drop, .drop-foot),
.tool[data-state="reading"] :is(.drop, .drop-foot) {
display: none;
}
.work {
background: var(--paper);
border-radius: 18px;
padding: 30px 32px 32px;
box-shadow: var(--lift);
}
.tool[data-state="error"] .work {
margin-top: 14px;
padding: 18px 20px;
}
.tool[data-state="error"] .work-error {
margin: 0;
}
.progress {
display: grid;
gap: 10px;
padding: 4px 0;
}
.progress-bar {
display: block;
height: 8px;
background: var(--stone);
border-radius: 4px;
overflow: hidden;
}
.progress-bar span {
display: block;
height: 100%;
width: 0;
background: var(--char);
border-radius: 4px;
transition: width 0.2s;
}
.progress.busy .progress-bar span {
width: 35%;
animation: busy 1.4s ease-in-out infinite;
}
@keyframes busy {
from {
transform: translateX(-100%);
}
to {
transform: translateX(300%);
}
}
.progress-text {
color: var(--char-2);
font-size: 16px;
}
.read {
display: grid;
gap: 24px;
}
.summary {
display: grid;
grid-template-columns: minmax(120px, max-content) 1fr;
gap: 0;
margin: 0;
border-top: 2px solid var(--char);
font-size: 16px;
}
.summary dt,
.summary dd {
padding: 11px 0;
border-bottom: 1px solid var(--line);
}
.summary dt {
color: var(--muted);
font: 500 13px/1.9 var(--mono);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-right: 24px;
}
.summary dd {
margin: 0;
overflow-wrap: anywhere;
}
.order-note {
display: grid;
gap: 10px;
justify-items: start;
background: var(--marker-soft);
border-left: 4px solid var(--marker);
border-radius: 12px;
padding: 16px 18px;
font-size: 16px;
}
.order-note p {
margin: 0;
}
.order-note .button {
min-height: 42px;
padding: 8px 16px;
font-size: 16px;
background: var(--paper);
}
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 40px;
padding-top: 4px;
}
.options-title {
grid-column: 1 / -1;
font: 850 34px/1 var(--display);
}
.option {
border: 0;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
min-width: 0;
align-content: start;
}
.option legend,
.option > label:not(.check) {
font: 760 18px/1.3 var(--title);
padding: 0;
margin-bottom: 2px;
}
.option .sub {
font: 400 15px/1.4 var(--body);
color: var(--char-2);
margin-top: 6px;
}
.hint {
margin: 0;
color: var(--muted);
font-size: 15px;
}
.pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.pair label {
display: grid;
gap: 4px;
font-size: 14.5px;
color: var(--char-2);
}
input[type="text"],
input[type="search"],
input[type="date"],
select {
width: 100%;
min-height: 48px;
padding: 10px 12px;
border: 1.5px solid var(--dash);
border-radius: 10px;
background: var(--paper);
color: var(--char);
font: 400 17px var(--body);
}
input:focus-visible,
select:focus-visible {
outline: 3px solid var(--marker);
outline-offset: 0;
border-color: var(--char);
}
input[aria-invalid="true"] {
border-color: var(--char);
background: var(--marker-soft);
}
input:disabled {
background: var(--stone);
}
.check {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 16px;
cursor: pointer;
}
.check input {
width: 22px;
height: 22px;
margin: 1px 0 0;
accent-color: var(--char);
flex: none;
}
.seg {
display: inline-flex;
border: 1.5px solid var(--dash);
border-radius: 10px;
overflow: hidden;
width: max-content;
background: var(--paper);
}
.seg label {
position: relative;
}
.seg input {
position: absolute;
opacity: 0;
}
.seg span {
display: block;
padding: 10px 22px;
cursor: pointer;
font-weight: 700;
}
.seg input:checked + span {
background: var(--char);
color: #fff;
}
.seg input:focus-visible + span {
outline: 3px solid var(--marker);
outline-offset: -3px;
}
.found {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
}
.found-item {
width: 100%;
display: flex;
gap: 12px;
text-align: left;
border: 1px solid var(--line);
background: var(--paper);
border-radius: 10px;
padding: 10px 12px;
font: 400 15px/1.4 var(--body);
color: var(--char);
cursor: pointer;
}
.found-item:hover {
border-color: var(--char);
background: var(--marker-soft);
}
.found-n {
font: 500 14px/1.5 var(--mono);
flex: none;
min-width: 2.6em;
}
.found-none {
color: var(--muted);
font-size: 15px;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.result {
padding: 22px 24px;
border-radius: 14px;
background: var(--marker-soft);
}
.result .button {
min-height: 58px;
font-size: 19px;
}
.result-text {
margin: 12px 0 0;
font-size: 16px;
}
.feedback {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(31, 35, 40, 0.14);
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: center;
}
.feedback-question {
margin: 0;
font-weight: 700;
}
.feedback-choices {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
border: 1.5px solid var(--char);
background: var(--paper);
color: var(--char);
border-radius: 10px;
padding: 6px 14px;
font: 700 15px var(--body);
cursor: pointer;
min-height: 40px;
}
.chip:hover {
background: var(--char);
color: #fff;
}
.feedback-close {
margin-left: auto;
border: 0;
background: transparent;
font-size: 1.5rem;
line-height: 1;
color: var(--char-2);
cursor: pointer;
width: 40px;
height: 40px;
}
.hx {
container-type: inline-size;
width: 100%;
}
.hx p {
margin: 0;
}
.hx-stage {
position: relative;
height: 93cqw;
}
.hx-phone {
position: absolute;
left: 0;
top: 0;
width: 41cqw;
height: 84cqw;
background: var(--char);
border-radius: 6.4cqw;
padding: 1.3cqw;
box-shadow: 0 3cqw 6cqw -3cqw rgba(31, 35, 40, 0.55);
}
.hx-scr {
position: relative;
width: 100%;
height: 100%;
border-radius: 5.2cqw;
overflow: hidden;
background: var(--wa-wall) url("/chat-wall.svg");
background-size: 11cqw;
display: flex;
flex-direction: column;
font-family: var(--wa-font);
color: var(--wa-ink);
}
.hx-i {
width: 2.5cqw;
height: 2.5cqw;
flex: none;
}
.hx-sbar {
height: 4.6cqw;
background: #fff;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 4.2cqw 0.4cqw;
font: 600 1.6cqw/1 var(--wa-font);
}
.hx-sbar i {
display: flex;
gap: 0.5cqw;
align-items: flex-end;
}
.hx-sbar b {
display: block;
width: 0.55cqw;
background: var(--wa-ink);
border-radius: 0.2cqw;
}
.hx-sbar .s1 {
height: 0.8cqw;
}
.hx-sbar .s2 {
height: 1.1cqw;
}
.hx-sbar .s3 {
height: 1.4cqw;
}
.hx-sbar .bat {
width: 2.6cqw;
height: 1.3cqw;
border-radius: 0.35cqw;
}
.hx-head {
height: 8.4cqw;
background: #fff;
display: flex;
align-items: center;
gap: 1.4cqw;
padding: 0 2cqw 0 1.4cqw;
border-bottom: 1px solid #e9edef;
color: var(--wa-icon);
}
.hx-av {
width: 5cqw;
height: 5cqw;
border-radius: 50%;
background: #c7cdd4;
display: grid;
place-items: center;
color: #fff;
font: 600 1.8cqw/1 var(--wa-font);
flex: none;
}
.hx-who {
flex: 1;
min-width: 0;
}
.hx-who b {
display: block;
font: 600 2.15cqw/1.15 var(--wa-font);
color: var(--wa-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hx-who span {
display: block;
font: 400 1.55cqw/1.3 var(--wa-font);
color: var(--wa-meta);
}
.hx-tools {
display: flex;
gap: 1.9cqw;
align-items: center;
flex: none;
}
.hx-chat {
flex: 1;
padding: 2cqw 2.4cqw 1cqw;
display: flex;
flex-direction: column;
gap: 1.1cqw;
}
.hx-day {
align-self: center;
background: #fff;
color: var(--wa-icon);
font: 500 1.5cqw/1 var(--wa-font);
padding: 0.9cqw 1.8cqw;
border-radius: 1.3cqw;
box-shadow: 0 0.15cqw 0.2cqw rgba(11, 20, 26, 0.1);
margin-bottom: 0.6cqw;
}
.hx-bub {
position: relative;
max-width: 82%;
padding: 0.95cqw 1.6cqw 0.8cqw;
border-radius: 1.5cqw;
font: 400 2.1cqw/1.33 var(--wa-font);
box-shadow: 0 0.15cqw 0.15cqw rgba(11, 20, 26, 0.12);
overflow-wrap: anywhere;
}
.hx-bub.out {
align-self: flex-end;
background: var(--wa-out);
border-top-right-radius: 0;
}
.hx-bub.in {
align-self: flex-start;
background: #fff;
border-top-left-radius: 0;
}
.hx-bub::after {
content: "";
position: absolute;
top: 0;
width: 1.2cqw;
height: 1.4cqw;
}
.hx-bub.out::after {
right: -1.1cqw;
background: var(--wa-out);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.hx-bub.in::after {
left: -1.1cqw;
background: #fff;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.hx-meta {
float: right;
display: inline-flex;
align-items: center;
gap: 0.4cqw;
margin: 1cqw 0 -0.4cqw 1.6cqw;
font-size: 1.4cqw;
line-height: 1;
color: var(--wa-meta);
white-space: nowrap;
}
.hx-ticks {
width: 2cqw;
height: 1.4cqw;
}
.hx-ibar {
height: 8.6cqw;
display: flex;
align-items: center;
gap: 1cqw;
padding: 0 1.4cqw 1.2cqw;
}
.hx-pill {
flex: 1;
height: 5.6cqw;
background: #fff;
border-radius: 3cqw;
display: flex;
align-items: center;
gap: 1.2cqw;
padding: 0 1.8cqw;
color: #8696a0;
font: 400 2cqw/1 var(--wa-font);
}
.hx-pill span {
flex: 1;
}
.hx-mic {
width: 5.6cqw;
height: 5.6cqw;
border-radius: 50%;
background: var(--wa-icon);
display: grid;
place-items: center;
color: #fff;
flex: none;
}
.hx-menu {
position: absolute;
right: 1.6cqw;
top: 12.4cqw;
min-width: 25cqw;
background: #fff;
border-radius: 1.2cqw;
box-shadow: 0 0.6cqw 2.4cqw rgba(11, 20, 26, 0.24);
display: grid;
font: 400 1.9cqw/1 var(--wa-font);
opacity: 0;
z-index: 6;
transform-origin: top right;
}
.hx-menu > div {
grid-area: 1 / 1;
padding: 0.8cqw 0;
}
.hx-menu p {
padding: 1.25cqw 2.2cqw;
white-space: nowrap;
}
.hx-menu .hi {
background: var(--marker-soft);
font-weight: 600;
}
.hx-menu .p2 {
opacity: 0;
}
.hx.ios .hx-sbar {
background: #f6f6f6;
justify-content: flex-start;
padding-left: 5.6cqw;
font-weight: 700;
}
.hx.ios .hx-head {
background: #f6f6f6;
border-bottom-color: #d8d8d8;
color: #007aff;
gap: 1cqw;
padding: 0 2cqw 0 1cqw;
}
.hx.ios .hx-head > .hx-i {
width: 3.2cqw;
height: 3.2cqw;
}
.hx.ios .hx-who {
text-align: center;
}
.hx.ios .hx-av {
width: 4.6cqw;
height: 4.6cqw;
}
.hx.ios .hx-bub {
border-radius: 2cqw;
}
.hx.ios .hx-bub.out {
border-top-right-radius: 2cqw;
border-bottom-right-radius: 0.5cqw;
}
.hx.ios .hx-bub.in {
border-top-left-radius: 2cqw;
border-bottom-left-radius: 0.5cqw;
}
.hx.ios .hx-bub::after {
top: auto;
bottom: 0;
}
.hx.ios .hx-bub.out::after {
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.hx.ios .hx-bub.in::after {
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.hx.ios .hx-ibar {
height: 7.6cqw;
gap: 1.6cqw;
padding: 0 2cqw 1.4cqw;
background: #f6f6f6;
border-top: 1px solid #d8d8d8;
color: #007aff;
}
.hx.ios .hx-ibar .hx-i {
width: 2.8cqw;
height: 2.8cqw;
}
.hx.ios .hx-pill {
height: 4.4cqw;
padding: 0;
border: 1px solid #d6d6d6;
border-radius: 2.2cqw;
}
.hx.ios .hx-menu {
top: auto;
left: 1.8cqw;
right: 1.8cqw;
bottom: 2cqw;
min-width: 0;
border-radius: 2.4cqw;
box-shadow: 0 0 0 60cqw rgba(11, 20, 26, 0.22);
transform-origin: bottom center;
font-size: 2cqw;
}
.hx.ios .hx-menu > div {
padding: 0;
}
.hx.ios .hx-menu p {
padding: 1.6cqw 2cqw;
text-align: center;
color: #007aff;
border-bottom: 1px solid #e5e5ea;
white-space: normal;
}
.hx.ios .hx-menu p:last-child {
border-bottom: 0;
}
.hx.ios .hx-menu .warn {
color: #ff3b30;
}
.hx.ios .hx-menu .cancel {
border-top: 1cqw solid #efeff4;
font-weight: 600;
}
.hx-chiphome {
position: absolute;
left: 3cqw;
top: 63cqw;
width: 35cqw;
z-index: 8;
}
.hx-chip {
--fx: 0px;
--fy: 30cqw;
background: #fff;
border-radius: 1.4cqw;
box-shadow: 0 0.8cqw 2.6cqw rgba(11, 20, 26, 0.28);
display: flex;
align-items: center;
gap: 1.4cqw;
padding: 1.4cqw 1.6cqw;
opacity: 0;
font-family: var(--wa-font);
}
.zf {
width: 4.2cqw;
height: 5cqw;
border-radius: 0.7cqw;
background: var(--char);
color: #fff;
display: grid;
place-items: end center;
padding-bottom: 0.7cqw;
font: 500 1.15cqw/1 var(--mono);
flex: none;
}
.hx-chip b {
display: block;
font: 600 1.6cqw/1.25 var(--wa-font);
color: var(--wa-ink);
}
.hx-chip span span {
display: block;
font: 400 1.4cqw/1.3 var(--wa-font);
color: var(--wa-meta);
}
.hx-page {
position: absolute;
left: 45cqw;
top: 3cqw;
width: 55cqw;
height: 77.8cqw;
background: #fff;
border-radius: 0.4cqw;
box-shadow: 0 0.2cqw 0 rgba(0, 0, 0, 0.04), 0 3.6cqw 7cqw -4cqw rgba(31, 35, 40, 0.45), 0 0 0 1px rgba(31, 35, 40, 0.06);
padding: 4.6cqw 4.4cqw 0;
font-family: var(--pdf);
color: #1d1f24;
display: flex;
flex-direction: column;
overflow: hidden;
}
.hx-dsep {
display: flex;
align-items: center;
gap: 1.4cqw;
margin: 0 0 1.9cqw 5cqw !important;
font-size: 1.5cqw;
font-weight: 600;
color: #5d636e;
white-space: nowrap;
}
.hx-dsep::after {
content: "";
flex: 1;
height: 1px;
background: #e2e4e8;
}
.hx-row {
position: relative;
display: grid;
grid-template-columns: 5cqw minmax(0, 1fr);
margin-bottom: 1.75cqw;
}
.hx-row::before {
content: "";
position: absolute;
left: -1.6cqw;
right: -1.4cqw;
top: -0.8cqw;
bottom: -0.8cqw;
background: var(--marker-soft);
border-left: 0.7cqw solid var(--marker);
opacity: 0;
}
.hx-row.hit::before {
opacity: 1;
}
.hx-row > * {
position: relative;
}
.hx-row .n {
font: 400 1.45cqw/1.3 var(--mono);
color: #8b9099;
padding-top: 0.15cqw;
}
.hx-row.hit .n {
color: #1d1f24;
font-weight: 500;
}
.hx-row .w {
font-size: 1.45cqw;
line-height: 1.3;
color: #7a808a;
}
.hx-row .w b {
color: #1d1f24;
font-weight: 600;
margin-right: 1cqw;
font-size: 1.52cqw;
}
.hx-row .t {
font-size: 1.82cqw;
line-height: 1.34;
margin-top: 0.3cqw;
}
.mk {
color: #9aa0a8;
}
.hx-photo {
display: block;
width: 9cqw;
height: 12cqw;
margin-top: 0.9cqw;
border-radius: 0.3cqw;
}
.hx-cap {
font-size: 1.25cqw;
color: #6a707a;
margin-top: 0.6cqw !important;
line-height: 1.4;
}
.hx-cap code {
display: block;
font: 400 0.98cqw/1.4 var(--mono);
color: #8b9099;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hx-foot {
margin-top: auto;
border-top: 1px solid #e2e4e8;
padding: 1.1cqw 0 3cqw;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.4cqw;
font-size: 1.35cqw;
color: #5d636e;
}
.hx-foot b {
font-weight: 600;
color: #1d1f24;
}
.hx-foot code {
flex-basis: 100%;
font: 400 0.98cqw/1.3 var(--mono);
color: #9aa0a8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hx-cite {
position: absolute;
left: 45cqw;
top: 82.6cqw;
width: 55cqw;
background: var(--char);
color: #fff;
border-radius: 1.8cqw;
padding: 2.1cqw 2.6cqw 2.2cqw;
box-shadow: 0 2.4cqw 4.6cqw -2.4cqw rgba(31, 35, 40, 0.6);
z-index: 5;
}
.hx-cite::before {
content: "";
position: absolute;
left: 5cqw;
top: -0.9cqw;
width: 1.8cqw;
height: 1.8cqw;
background: var(--char);
transform: rotate(45deg);
border-radius: 0.25cqw;
}
.hx-cite .k {
font: 500 1.45cqw/1 var(--mono);
color: var(--marker);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hx-cite .v {
font: 760 2.75cqw/1.2 var(--title);
margin-top: 0.9cqw;
}
@media (prefers-reduced-motion: no-preference) {
.hero.playing .hx-bub {
animation: 7.75s infinite both;
}
.hero.playing .hx-bub.b1 {
animation-name: hx-b1;
}
.hero.playing .hx-bub.b2 {
animation-name: hx-b2;
}
.hero.playing .hx-bub.b3 {
animation-name: hx-b3;
}
.hero.playing .hx-bub.b4 {
animation-name: hx-b4;
}
.hero.playing .hx-menu {
animation: hx-menu 7.75s infinite both;
}
.hero.playing .hx-menu .p1 {
animation: hx-p1 7.75s infinite both;
}
.hero.playing .hx-menu .p2 {
animation: hx-p2 7.75s infinite both;
}
.hero.playing .hx-chip {
animation: hx-chip 7.75s infinite both;
}
.hero.playing .drop-in::after {
animation: hx-got 7.75s infinite both;
}
.hero.playing .hx-row {
animation: hx-row 7.75s infinite both;
}
.hero.playing .hx-row.r2 {
animation-delay: 0.14s;
}
.hero.playing .hx-row.r3 {
animation-delay: 0.28s;
}
.hero.playing .hx-row.r4 {
animation-delay: 0.42s;
}
.hero.playing .hx-row.r5 {
animation-delay: 0.56s;
}
.hero.playing .hx-row.hit::before {
animation: hx-hit 7.75s infinite both;
}
.hero.playing .hx-cite {
animation: hx-cite 7.75s infinite both;
}
}
@keyframes hx-b1 {
0%, 3.2% { opacity: 0; transform: translateY(1cqw) scale(0.96); }
9%, 94.2% { opacity: 1; transform: none; }
98.7%, 100% { opacity: 0; transform: none; }
}
@keyframes hx-b2 {
0%, 7.7% { opacity: 0; transform: translateY(1cqw) scale(0.96); }
13.5%, 94.2% { opacity: 1; transform: none; }
98.7%, 100% { opacity: 0; transform: none; }
}
@keyframes hx-b3 {
0%, 12.3% { opacity: 0; transform: translateY(1cqw) scale(0.96); }
18.1%, 94.2% { opacity: 1; transform: none; }
98.7%, 100% { opacity: 0; transform: none; }
}
@keyframes hx-b4 {
0%, 16.8% { opacity: 0; transform: translateY(1cqw) scale(0.96); }
22.6%, 94.2% { opacity: 1; transform: none; }
98.7%, 100% { opacity: 0; transform: none; }
}
@keyframes hx-menu {
0%, 23.9% { opacity: 0; transform: translateY(-1cqw) scale(0.97); }
28.4%, 38.1% { opacity: 1; transform: none; }
42%, 100% { opacity: 0; transform: none; }
}
@keyframes hx-p1 {
0%, 31% { opacity: 1; }
34.2%, 50% { opacity: 0; }
51%, 100% { opacity: 1; }
}
@keyframes hx-p2 {
0%, 31% { opacity: 0; }
34.2%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@keyframes hx-chip {
0%, 38.1% { opacity: 0; transform: translateY(1.5cqw); }
41.9% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
50.9% { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(0.55); }
52.9%, 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.4); }
}
@keyframes hx-got {
0%, 50.2% { opacity: 0; }
54.7%, 61.3% { opacity: 1; }
65.8%, 100% { opacity: 0; }
}
@keyframes hx-row {
0%, 52.3% { opacity: 0; transform: translateY(0.9cqw); }
58.1%, 94.2% { opacity: 1; transform: none; }
98.7%, 100% { opacity: 0; transform: none; }
}
@keyframes hx-hit {
0%, 60.6% { opacity: 0; }
66.5%, 94.2% { opacity: 1; }
98.7%, 100% { opacity: 0; }
}
@keyframes hx-cite {
0%, 64.5% { opacity: 0; transform: translateY(1.2cqw); }
70.3%, 94.2% { opacity: 1; transform: none; }
98.7%, 100% { opacity: 0; transform: none; }
}
.how-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px 40px;
flex-wrap: wrap;
}
.how-tabs {
display: flex;
gap: 24px;
font: 760 19px/1 var(--title);
}
.how-tabs label {
position: relative;
}
.how-tabs input {
position: absolute;
opacity: 0;
}
.how-tabs span {
display: block;
padding: 6px 0 9px;
color: var(--muted);
border-bottom: 3px solid transparent;
cursor: pointer;
}
.how-tabs span:hover {
color: var(--char);
}
.how-tabs input:checked + span {
color: var(--char);
border-bottom-color: var(--char);
}
.how-tabs input:focus-visible + span {
outline: 3px solid var(--marker);
outline-offset: 4px;
}
.how:has(#how-ios:checked) .panel-android,
.how:has(#how-android:checked) .panel-ios {
display: none;
}
.steps {
list-style: none;
margin: 48px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.mini {
height: 300px;
border-radius: 22px;
background: var(--desk);
display: flex;
justify-content: center;
align-items: flex-end;
padding-top: 28px;
overflow: hidden;
}
.st-phone {
width: 256px;
height: 100%;
background: var(--char);
border-radius: 30px 30px 0 0;
padding: 9px 9px 0;
}
.st-scr {
position: relative;
height: 100%;
border-radius: 22px 22px 0 0;
background: var(--wa-wall) url("/chat-wall.svg");
background-size: 64px;
overflow: hidden;
font: 400 13px/1.25 var(--wa-font);
color: var(--wa-ink);
}
.st-phone.ios .st-scr {
background: #f2f2f7;
}
.st-scr p {
margin: 0;
}
.st-head {
height: 46px;
background: #fff;
display: flex;
align-items: center;
gap: 9px;
padding: 0 12px;
border-bottom: 1px solid #e9edef;
font-weight: 600;
}
.st-head b {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.st-av {
width: 26px;
height: 26px;
border-radius: 50%;
background: #c7cdd4;
flex: none;
}
.st-dots {
margin-left: auto;
color: var(--wa-icon);
font-size: 18px;
}
.st-b {
position: absolute;
height: 24px;
border-radius: 8px;
box-shadow: 0 1px 1px rgba(11, 20, 26, 0.1);
}
.st-b.in {
left: 12px;
background: #fff;
}
.st-b.out {
right: 12px;
background: var(--wa-out);
}
.st-b.w1 {
top: 64px;
width: 120px;
}
.st-b.w2 {
top: 96px;
width: 96px;
}
.st-b.w3 {
top: 128px;
width: 140px;
height: 36px;
}
.st-b.w4 {
top: 174px;
width: 110px;
}
.st-shade {
position: absolute;
inset: 0;
background: rgba(11, 20, 26, 0.28);
}
.hi {
position: relative;
background: var(--marker-soft);
font-weight: 600;
}
.tap {
position: absolute;
right: 14px;
top: 50%;
width: 26px;
height: 26px;
margin-top: -13px;
border-radius: 50%;
background: rgba(31, 35, 40, 0.22);
opacity: 0;
pointer-events: none;
}
.st-menu {
position: absolute;
right: 8px;
top: 40px;
min-width: 170px;
background: #fff;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(11, 20, 26, 0.22);
padding: 5px 0;
}
.st-menu p {
padding: 9px 14px;
white-space: nowrap;
}
.st-line {
display: block;
height: 7px;
border-radius: 4px;
background: #d4d8dc;
}
.st-line.w1 {
width: 82%;
}
.st-line.w2 {
width: 64%;
}
.st-line.w3 {
width: 48%;
}
.st-dialog {
position: absolute;
left: 12px;
right: 12px;
top: 74px;
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(11, 20, 26, 0.25);
padding: 18px 16px 12px;
display: grid;
gap: 8px;
}
.st-dialog b {
font-size: 15px;
margin-bottom: 2px;
}
.st-dialog .acts {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
font-weight: 600;
font-size: 12px;
}
.st-dialog .acts p {
padding: 8px;
border-radius: 6px;
color: var(--wa-icon);
}
.st-dialog .acts .hi {
color: var(--wa-ink);
padding-right: 34px;
}
.st-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 16px 16px 0 0;
box-shadow: 0 -6px 20px rgba(11, 20, 26, 0.14);
padding: 14px 14px 18px;
font-size: 12px;
}
.st-phone.ios .st-sheet {
background: #f2f2f7;
}
.st-file {
display: flex;
gap: 10px;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid #e3e6e9;
font-weight: 600;
font-size: 12.5px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.st-file small {
display: block;
font-weight: 400;
color: var(--wa-meta);
}
.st-file .zf {
width: 28px;
height: 34px;
border-radius: 5px;
padding-bottom: 5px;
font-size: 8px;
}
.st-targets {
display: flex;
justify-content: space-around;
margin-top: 12px;
text-align: center;
color: var(--char-2);
}
.st-targets div {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 64px;
line-height: 1.2;
border-radius: 10px;
padding: 4px 0;
}
.st-targets .ic {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--stone);
display: grid;
place-items: center;
color: var(--char);
}
.st-targets .hi {
background: transparent;
color: var(--char);
font-weight: 700;
}
.st-targets .hi .ic {
background: var(--char);
color: #fff;
}
.st-targets .tap {
right: 50%;
top: 24px;
margin-right: -13px;
}
.st-i {
width: 19px;
height: 19px;
}
.st-top {
height: 40px;
display: flex;
align-items: center;
padding: 0 14px;
font-size: 26px;
color: #3478f6;
}
.st-card {
display: grid;
justify-items: center;
gap: 8px;
padding: 4px 0 14px;
font-size: 14px;
}
.st-av.big {
width: 56px;
height: 56px;
}
.st-list {
margin: 0 12px;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.st-sheet .st-list {
margin: 12px 0 0;
}
.st-list p {
display: flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border-bottom: 1px solid #e5e5ea;
}
.st-list p:last-child {
border-bottom: 0;
}
.st-list .warn .st-line {
background: #f1c4c0;
}
.st-action {
position: absolute;
left: 10px;
right: 10px;
bottom: 12px;
display: grid;
gap: 8px;
text-align: center;
}
.st-action .opts {
background: #fff;
border-radius: 12px;
overflow: hidden;
}
.st-action .opts p {
padding: 12px 10px;
border-bottom: 1px solid #e5e5ea;
color: #3478f6;
}
.st-action .opts p:last-child {
border-bottom: 0;
}
.st-action .opts .hi {
color: var(--wa-ink);
padding-right: 34px;
padding-left: 34px;
}
.st-action .cancel {
background: #fff;
border-radius: 12px;
padding: 11px;
font-weight: 600;
color: #3478f6;
}
.step-text {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
margin: 24px 0 0;
color: var(--char-2);
font-size: 16.5px;
line-height: 1.5;
}
.step-text strong {
color: var(--char);
}
.step-n {
font: 850 42px/0.9 var(--display);
color: var(--char);
}
.how-after {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 48px 0 0;
padding-top: 24px;
border-top: 1px solid var(--line);
color: var(--char-2);
max-width: 72ch;
}
.how-after svg {
flex: none;
margin-top: 3px;
color: var(--char);
}
@media (prefers-reduced-motion: no-preference) {
.steps.playing .tap {
animation: st-tap 9s infinite both;
}
.steps.playing .step:nth-child(1) .tap {
animation-delay: 0.6s;
}
.steps.playing .step:nth-child(2) .tap {
animation-delay: 3.6s;
}
.steps.playing .step:nth-child(3) .tap {
animation-delay: 6.6s;
}
}
@keyframes st-tap {
0% { opacity: 0; transform: scale(0.4); }
4% { opacity: 0.9; transform: scale(0.8); }
13% { opacity: 0; transform: scale(1.6); }
100% { opacity: 0; transform: scale(1.6); }
}
.sample {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 48px;
}
.sample figure {
margin: 0;
}
.sheet-frame {
background: var(--desk);
border-radius: 22px;
padding: 40px 36px;
display: flex;
justify-content: center;
}
.pdf-page {
display: block;
width: 100%;
max-width: 430px;
height: auto;
background: #fff;
border-radius: 3px;
box-shadow: 0 0.2em 0 rgba(0, 0, 0, 0.03), 0 22px 44px -24px rgba(31, 35, 40, 0.5), 0 0 0 1px rgba(31, 35, 40, 0.06);
}
.pdf-paper {
fill: #ffffff;
}
.pdf-regular,
.pdf-bold {
font-family: var(--pdf);
}
.pdf-bold {
font-weight: 600;
}
.pdf-mono {
font-family: var(--mono);
}
.sample figcaption {
color: var(--char-2);
font-size: 16px;
margin-top: 16px;
}
.sample-links {
display: flex;
flex-wrap: wrap;
gap: 14px 32px;
margin: 36px 0 0;
}
.guide-links {
display: flex;
flex-wrap: wrap;
gap: 14px 32px;
margin: 36px 0 0;
padding: 0;
list-style: none;
}
.guide-links li {
display: flex;
gap: 10px;
align-items: center;
font-weight: 700;
}
.guide-links svg {
flex: none;
width: 20px;
height: 20px;
}
.spec {
margin-top: 52px;
border-top: 2px solid var(--char);
}
.spec-row {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 40px;
padding: 34px 0;
border-bottom: 1px solid var(--line);
}
.spec-row h3 {
font: 850 30px/1 var(--display);
}
.spec-row h3 small {
display: block;
font: 400 15px/1.4 var(--body);
color: var(--muted);
margin-top: 8px;
}
.facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 40px;
}
.facts li {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
font-size: 16.5px;
line-height: 1.5;
color: var(--char-2);
}
.facts li > svg {
margin-top: 2px;
color: var(--char);
}
.facts strong {
display: block;
color: var(--char);
}
.two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 48px;
}
.panel,
.facts.panels li {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 22px;
padding: 40px;
color: var(--char-2);
}
.panel > svg,
.facts.panels li > svg {
width: 52px;
height: 52px;
padding: 13px;
border-radius: 14px;
background: var(--stone);
color: var(--char);
margin: 0 0 22px;
}
.panel p:last-child {
margin-bottom: 0;
}
.panel ul {
list-style: none;
margin: 18px 0;
padding: 0;
}
.panel ul li {
padding: 11px 0;
border-top: 1px solid var(--line);
}
.panel ul li:last-child {
border-bottom: 1px solid var(--line);
}
.panel strong,
.panel b {
color: var(--char);
}
.facts.panels {
margin-top: 48px;
gap: 28px;
}
.facts.panels li {
display: block;
font-size: 17px;
line-height: 1.6;
}
.facts.panels li > svg {
display: block;
}
.facts.panels strong {
font: 850 34px/1 var(--display);
margin-bottom: 14px;
}
.faq {
margin-top: 40px;
border-top: 2px solid var(--char);
}
.faq details {
border-bottom: 1px solid var(--line);
}
.faq summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 24px 0;
font: 760 22px/1.3 var(--title);
cursor: pointer;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "+";
font: 400 30px/1 var(--body);
color: var(--char-2);
flex: none;
}
.faq details[open] summary::after {
content: "–";
}
.faq details p {
padding: 0 0 26px;
margin: 0;
color: var(--char-2);
max-width: 68ch;
}
.sources {
border-top: 1px solid var(--line);
padding: 56px 0 72px;
font-size: 15px;
color: var(--char-2);
}
.sources h2 {
font: 760 22px/1.2 var(--title);
color: var(--char);
margin-bottom: 16px;
}
.sources ol {
padding-left: 1.4em;
margin: 0;
max-width: 100ch;
}
.sources li {
margin-bottom: 0.55rem;
overflow-wrap: anywhere;
}
.sources li::marker {
font: 500 13px var(--mono);
}
.sources-note {
color: var(--muted);
margin: 14px 0 0;
}
.source-publisher {
font-weight: 700;
color: var(--char);
}
sup.cite {
font-size: 0.72em;
line-height: 0;
margin-left: 1px;
}
sup.cite a {
font-family: var(--mono);
text-decoration: none;
padding: 0 2px;
border-bottom: 2px solid var(--marker);
}
.doc-head {
background: var(--desk);
padding: 48px 0 60px;
}
.doc-head .with-toc {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 40px 64px;
align-items: end;
}
.doc-title {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
align-items: start;
}
.doc-title > :not(.title-icon) {
grid-column: 2;
}
.title-icon {
grid-row: 1;
width: 56px;
height: 56px;
margin-top: 4px;
border-radius: 14px;
background: var(--paper);
color: var(--char);
display: grid;
place-items: center;
}
.title-icon svg {
width: 28px;
height: 28px;
}
.doc-title h1 {
font: 850 66px/0.95 var(--display);
letter-spacing: -0.012em;
text-wrap: balance;
}
.doc-title .subtitle {
font-size: 20px;
line-height: 1.45;
color: var(--char-2);
margin: 18px 0 0;
max-width: 44ch;
}
.trail {
margin-top: 26px;
font-size: 14.5px;
}
.trail ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
color: var(--muted);
}
.trail li + li::before {
content: "›";
margin-right: 6px;
}
.trail a {
color: var(--char-2);
}
.toc {
background: var(--paper);
border-radius: 18px;
padding: 24px 26px 18px;
box-shadow: var(--lift);
}
.toc-title {
font: 500 13px/1 var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 10px;
}
.toc ol {
list-style: none;
counter-reset: toc;
margin: 0;
padding: 0;
}
.toc li {
counter-increment: toc;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
padding: 9px 0;
border-top: 1px solid var(--line);
font-size: 16px;
line-height: 1.35;
}
.toc li::before {
content: counter(toc);
font: 500 14px/1.5 var(--mono);
color: var(--muted);
}
.toc a {
text-decoration: none;
font-weight: 700;
}
.toc a:hover {
text-decoration: underline;
text-decoration-color: var(--marker);
text-decoration-thickness: 3px;
}
.doc {
padding: 64px 0 96px;
}
.doc-intro,
.doc-text {
max-width: 68ch;
color: var(--char-2);
}
.doc-intro {
margin-left: 308px;
font-size: 19px;
}
.doc-intro > p:last-child,
.doc-text > :last-child {
margin-bottom: 0;
}
.doc-rows {
margin-top: 48px;
border-top: 2px solid var(--char);
}
.doc-intro + .doc-rows {
margin-top: 56px;
}
.doc-rows:first-child {
margin-top: 0;
}
.doc-row {
display: grid;
grid-template-columns: 260px minmax(0, 68ch);
gap: 48px;
padding: 40px 0;
border-bottom: 1px solid var(--line);
}
.doc-row h2 {
font: 850 32px/1.02 var(--display);
color: var(--char);
}
.doc strong,
.doc b {
color: var(--char);
}
.updated {
display: inline-block;
font-size: 15px;
color: var(--muted);
border-left: 3px solid var(--marker);
padding-left: 12px;
}
.doc ul,
.doc ol {
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.doc ul li {
position: relative;
padding: 0 0 0 22px;
margin-bottom: 12px;
}
.doc ul li::before {
content: "";
position: absolute;
left: 2px;
top: 0.62em;
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--char);
}
.doc ol {
counter-reset: item;
border-top: 1px solid var(--line);
}
.doc ol li {
counter-increment: item;
position: relative;
padding: 12px 0 12px 36px;
border-bottom: 1px solid var(--line);
}
.doc ol li::before {
content: counter(item);
position: absolute;
left: 0;
top: 12px;
font: 500 15px/1.6 var(--mono);
color: var(--char);
}
.doc-text > ol:last-child li:last-child {
border-bottom: 0;
}
.doc blockquote {
margin: 1.2rem 0;
padding: 22px 26px;
border-radius: 16px;
background: var(--stone);
border-left: 5px solid var(--marker);
color: var(--char);
font-size: 18px;
line-height: 1.55;
}
.doc blockquote p {
margin: 0;
}
.note {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 4px;
margin: 1.6rem 0;
padding: 24px 26px;
border-radius: 18px;
background: var(--marker-soft);
color: var(--char);
}
.note > svg {
width: 36px;
height: 36px;
padding: 8px;
border-radius: 10px;
background: var(--paper);
}
.note p:last-child {
margin-bottom: 0;
}
.langs {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
}
.band.to-tool {
padding: 56px 0;
}
.strip {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
padding: 32px 34px 32px 38px;
border-radius: 18px;
background: var(--paper);
box-shadow: var(--lift);
outline: 2px dashed var(--dash);
outline-offset: -12px;
text-decoration: none;
color: var(--char);
}
.strip:hover {
color: var(--char);
outline-color: var(--char);
}
.strip:focus-visible {
outline: 3px solid var(--char);
outline-offset: 3px;
}
.strip-text strong {
display: block;
font: 760 24px/1.2 var(--title);
}
.strip-text small {
display: block;
color: var(--muted);
font-size: 15.5px;
margin-top: 4px;
}
.strip .tray svg {
width: 28px;
height: 28px;
}
.site-footer {
background: var(--char);
color: #b9bec6;
padding: 64px 0 44px;
font-size: 15px;
}
.site-footer .wrap {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 28px;
}
.site-footer .brand {
color: #fff;
}
.site-footer .glyph {
background: #fff;
color: var(--char);
}
.footer-links {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px 26px;
}
.footer-links a {
color: #fff;
text-decoration: none;
}
.footer-links a:hover,
.footer-links a[aria-current="page"] {
color: #fff;
text-decoration: underline;
text-decoration-color: var(--marker);
text-decoration-thickness: 2px;
}
.footer-note {
grid-column: 1 / -1;
margin: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding-top: 22px;
}
@media (max-width: 1100px) {
.hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
column-gap: 40px;
}
.hero h1 {
font-size: 72px;
}
.hero h1.long {
font-size: 62px;
}
.doc-head .with-toc {
grid-template-columns: minmax(0, 1fr) 300px;
gap: 32px 40px;
}
.doc-intro {
margin-left: 0;
}
.doc-row {
grid-template-columns: 220px minmax(0, 1fr);
gap: 36px;
}
}
@media (max-width: 860px) {
.hero-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-template-areas: "title" "tool" "stage" "proofs";
}
.hero .tool {
margin-top: 22px;
}
.hero-stage {
max-width: 560px;
margin: 36px auto 0;
}
.proofs {
margin-top: 28px;
}
.steps {
grid-template-columns: minmax(0, 1fr);
gap: 44px;
}
.mini {
max-width: 440px;
}
.sample {
grid-template-columns: minmax(0, 1fr);
}
.options {
grid-template-columns: minmax(0, 1fr);
}
.doc-head .with-toc {
grid-template-columns: minmax(0, 1fr);
}
.toc {
max-width: 560px;
}
}
@media (max-width: 760px) {
body {
font-size: 16px;
}
.wrap {
padding: 0 16px;
}
.site-header .wrap {
min-height: 58px;
}
.nav {
display: none;
}
.brand {
font-size: 19px;
}
.glyph {
width: 27px;
height: 27px;
}
.band {
padding: 64px 0;
}
.band-head h2 {
font-size: 42px;
}
.lede {
font-size: 17px;
}
.hero {
padding: 18px 0 44px;
}
.hero h1 {
font-size: 52px;
line-height: 0.95;
}
.hero h1.long {
font-size: 46px;
}
.hero .subtitle {
font-size: 17px;
margin-top: 12px;
max-width: none;
}
.drop {
padding: 8px;
border-radius: 16px;
}
.drop-in {
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
padding: 16px;
}
.tray {
width: 46px;
height: 46px;
border-radius: 12px;
}
.drop-title {
font-size: 18.5px;
}
.drop-sub {
font-size: 14.5px;
}
.drop-in .button {
grid-column: 1 / -1;
width: 100%;
}
.drop-foot {
margin-top: 12px;
}
.drop-note {
font-size: 14px;
align-items: flex-start;
}
.drop-note svg {
margin-top: 2px;
}
.drop-sample {
font-size: 15px;
}
.work {
padding: 22px 18px 24px;
border-radius: 16px;
}
.summary {
grid-template-columns: max-content minmax(0, 1fr);
font-size: 15px;
}
.summary dt {
font-size: 12px;
padding-right: 14px;
}
.options-title {
font-size: 30px;
}
.actions {
position: sticky;
bottom: 0;
z-index: 2;
flex-wrap: nowrap;
gap: 10px;
margin: 0 -18px;
padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
background: var(--paper);
box-shadow: 0 -10px 18px -14px rgba(31, 35, 40, 0.35);
}
.actions .button {
flex: 1 1 58%;
min-height: 50px;
padding: 10px 14px;
}
.actions .button.quiet {
flex: 1 1 42%;
white-space: normal;
text-align: center;
font-size: 15px;
}
.pair {
grid-template-columns: minmax(0, 1fr);
}
.mini {
height: 280px;
}
.step-text {
font-size: 16px;
}
.sheet-frame {
padding: 24px 18px;
}
.spec-row {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
padding: 28px 0;
}
.facts {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.two,
.facts.panels {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin-top: 32px;
}
.panel,
.facts.panels li {
padding: 26px 22px;
}
.facts.panels strong {
font-size: 30px;
}
.faq summary {
font-size: 19px;
padding: 20px 0;
}
.doc-head {
padding: 28px 0 40px;
}
.doc-title {
grid-template-columns: 56px minmax(0, 1fr);
}
.title-icon {
width: 44px;
height: 44px;
border-radius: 12px;
margin-top: 0;
}
.title-icon svg {
width: 23px;
height: 23px;
}
.doc-title h1 {
font-size: 44px;
}
.doc-title .subtitle {
font-size: 17px;
margin-top: 12px;
}
.doc-title .subtitle,
.doc-title .trail {
grid-column: 1 / -1;
}
.doc-title .trail {
margin-top: 18px;
}
.toc {
padding: 20px 20px 14px;
}
.doc {
padding: 40px 0 64px;
}
.doc-intro {
font-size: 17px;
}
.doc-row {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
padding: 30px 0;
}
.doc-row h2 {
font-size: 30px;
}
.doc blockquote {
padding: 18px 18px;
font-size: 17px;
}
.note {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding: 20px;
}
.band.to-tool {
padding: 40px 0;
}
.strip {
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
padding: 24px 22px;
outline-offset: -9px;
}
.strip .tray {
width: 46px;
height: 46px;
}
.strip-text strong {
font-size: 19px;
}
.strip .button {
grid-column: 1 / -1;
width: 100%;
}
.site-footer .wrap {
grid-template-columns: minmax(0, 1fr);
}
.footer-links {
justify-content: flex-start;
}
}
.chats {
display: grid;
gap: 0;
}
.chats-title {
margin: 0;
padding: 10px 0 8px;
border-top: 2px solid var(--char);
border-bottom: 1px solid var(--line);
color: var(--muted);
font: 500 13px/1.6 var(--mono);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.chat-list {
list-style: none;
margin: 0;
padding: 0;
}
.chat-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
padding: 13px 0;
border-bottom: 1px solid var(--line);
}
.chat-n {
font: 500 14px/1.6 var(--mono);
color: var(--muted);
min-width: 1.6em;
padding-top: 1px;
}
.chat-name {
margin: 0;
font: 760 18px/1.3 var(--title);
overflow-wrap: anywhere;
}
.chat-meta,
.chat-file {
margin: 3px 0 0;
font-size: 15px;
color: var(--char-2);
overflow-wrap: anywhere;
}
.chat-meta span {
white-space: nowrap;
}
.chat-file {
font-size: 14px;
color: var(--muted);
}
.chat-remove {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--paper);
color: var(--char-2);
display: grid;
place-items: center;
cursor: pointer;
}
.chat-remove:hover {
border-color: var(--char);
background: var(--stone);
color: var(--char);
}
.order-notes {
display: grid;
gap: 10px;
}
.add-chat {
position: relative;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 10px 18px;
border: 2px dashed var(--dash);
border-radius: 12px;
color: var(--char);
font: 700 16px/1.2 var(--body);
cursor: pointer;
}
.add-chat input {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
cursor: pointer;
}
.add-chat:hover {
border-color: var(--char);
background: var(--stone);
}
.add-chat:focus-within {
outline: 3px solid var(--char);
outline-offset: 3px;
}
.output {
border: 0;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
min-width: 0;
}
.output legend {
font: 760 18px/1.3 var(--title);
padding: 0;
margin-bottom: 10px;
}
.output-choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.output-choices label {
position: relative;
}
.output-choices input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
}
.output-choices span {
display: flex;
align-items: center;
gap: 12px;
height: 100%;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 12px;
font: 700 16px/1.3 var(--body);
cursor: pointer;
}
.output-choices svg {
flex: none;
}
.output-choices input:checked + span {
border: 2px solid var(--char);
padding: 13px 15px;
background: var(--marker-soft);
}
.output-choices input:focus-visible + span {
outline: 3px solid var(--char);
outline-offset: 2px;
}
.result-list {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: grid;
gap: 10px;
}
.result-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
}
.result-list .link-mark {
overflow-wrap: anywhere;
}
.result-list small {
color: var(--muted);
font-size: 14px;
}
.lang-menu {
display: none;
position: relative;
}
.lang-menu summary {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 40px;
padding: 7px 12px;
border: 1px solid var(--line);
border-radius: 10px;
font: 700 15px/1 var(--body);
letter-spacing: 0.02em;
color: var(--char);
cursor: pointer;
list-style: none;
}
.lang-menu summary::-webkit-details-marker {
display: none;
}
.lang-menu[open] summary,
.lang-menu summary:hover {
border-color: var(--char);
}
.lang-menu ul {
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 30;
min-width: 210px;
margin: 0;
padding: 6px;
list-style: none;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--lift);
}
.lang-menu li a,
.lang-menu li span {
display: block;
padding: 9px 12px;
border-radius: 8px;
color: var(--char-2);
text-decoration: none;
font-size: 16px;
}
.lang-menu li a:hover {
background: var(--stone);
color: var(--char);
}
.lang-menu li span[aria-current] {
background: var(--marker-soft);
color: var(--char);
font-weight: 700;
}
@media (max-width: 1100px) {
.lang-switch {
display: none;
}
.lang-menu {
display: block;
}
}
@media (max-width: 760px) {
h1,
h2,
.drop-title {
hyphens: auto;
overflow-wrap: break-word;
}
.output-choices {
grid-template-columns: minmax(0, 1fr);
}
.chat-name {
font-size: 17px;
}
}
.result-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.preview {
margin-top: 18px;
display: grid;
gap: 10px;
}
.preview-count {
margin: 0;
color: var(--char-2);
font: 500 13px/1.6 var(--mono);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.preview-pages {
max-height: min(78vh, 900px);
overflow-y: auto;
overscroll-behavior: contain;
display: grid;
justify-items: center;
gap: 16px;
padding: 16px;
background: var(--desk);
border-radius: 12px;
}
.preview-page {
display: block;
width: 100%;
max-width: 620px;
padding: 0;
border: 0;
border-radius: 2px;
background: #fff;
box-shadow: var(--lift);
cursor: zoom-in;
}
.preview-page canvas {
display: block;
width: 100%;
height: 100%;
}
.preview-page:focus-visible {
outline: 3px solid var(--char);
outline-offset: 3px;
}
.result-list .chip[aria-pressed="true"] {
background: var(--char);
color: #fff;
}
.preview-dialog {
width: min(96vw, 980px);
max-height: 94vh;
padding: 56px 12px 12px;
border: 0;
border-radius: 14px;
background: var(--desk);
}
.preview-dialog::backdrop {
background: rgba(31, 35, 40, 0.55);
}
.preview-dialog-label {
position: absolute;
top: 18px;
left: 18px;
margin: 0;
color: var(--char-2);
font: 500 13px/1.6 var(--mono);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.preview-close {
position: absolute;
top: 10px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--paper);
color: var(--char);
font: 400 24px/1 var(--body);
cursor: pointer;
}
.preview-dialog-page {
overflow: auto;
max-height: calc(94vh - 72px);
}
.preview-dialog-page canvas {
display: block;
max-width: none;
height: auto;
background: #fff;
box-shadow: var(--lift);
}
@media (max-width: 760px) {
.preview-pages {
max-height: 72vh;
padding: 6px;
gap: 8px;
margin: 0 -8px;
}
.result {
padding: 18px 16px;
}
.result-actions .button {
flex: 1 1 100%;
}
}
.how-more {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
margin-top: 56px;
}
.how-more .panel h3 {
font: 850 30px/1 var(--display);
margin: 0 0 14px;
}
.how-more ol {
margin: 14px 0 0;
padding: 0;
list-style: none;
counter-reset: more;
}
.how-more ol li {
counter-increment: more;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
padding: 10px 0;
border-top: 1px solid var(--line);
}
.how-more ol li::before {
content: counter(more);
font: 500 15px/1.6 var(--mono);
color: var(--muted);
}
.how-more ol li:last-child {
border-bottom: 1px solid var(--line);
}
.holds {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 56px;
margin-top: 48px;
}
.holds h3 {
font: 850 30px/1 var(--display);
margin: 0 0 22px;
padding-bottom: 14px;
border-bottom: 2px solid var(--char);
}
.holds .facts {
grid-template-columns: minmax(0, 1fr);
}
.file-name {
font: 500 0.9em/1.4 var(--mono);
background: var(--stone);
border: 1px solid var(--line);
border-radius: 6px;
padding: 1px 6px;
overflow-wrap: anywhere;
}
.compare-wrap {
margin-top: 48px;
}
.compare {
width: 100%;
border-collapse: collapse;
font-size: 16px;
line-height: 1.45;
background: var(--paper);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--line);
}
.compare-note {
font-size: 14.5px;
color: var(--muted);
margin: 14px 0 0;
max-width: 72ch;
}
.compare th,
.compare td {
text-align: left;
vertical-align: top;
padding: 18px 22px;
border-top: 1px solid var(--line);
}
.compare thead th {
border-top: 0;
font: 500 13px/1.3 var(--mono);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
background: var(--stone);
}
.compare thead th.ours {
color: var(--char);
background: var(--marker-soft);
}
.compare tbody th {
font: 760 18px/1.25 var(--title);
color: var(--char);
width: 22%;
}
.compare td {
color: var(--char-2);
}
.compare td.ours {
color: var(--char);
background: #fffbea;
}
.causes {
list-style: none;
margin: 48px 0 0;
padding: 0;
border-top: 2px solid var(--char);
}
.causes > li {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
gap: 12px 40px;
padding: 32px 0;
border-bottom: 1px solid var(--line);
}
.causes > li > svg {
width: 48px;
height: 48px;
padding: 12px;
border-radius: 14px;
background: var(--stone);
color: var(--char);
}
.causes h3 {
font: 850 28px/1.05 var(--display);
margin: 0 0 10px;
}
.causes p {
margin: 0 0 10px;
color: var(--char-2);
}
.causes .fix {
background: var(--stone);
border-radius: 16px;
padding: 20px 22px;
color: var(--char);
}
.band.stone .causes > li > svg {
background: var(--paper);
}
.band.stone .causes .fix {
background: var(--paper);
}
.causes .fix p {
color: var(--char);
}
.causes .fix > :last-child,
.causes > li > div > :last-child {
margin-bottom: 0;
}
.fix-label {
display: block;
font: 500 12.5px/1.2 var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.statute {
margin: 18px 0;
padding: 16px 20px;
border-left: 4px solid var(--marker);
background: var(--stone);
border-radius: 0 14px 14px 0;
color: var(--char);
}
.statute p {
margin: 0 0 8px;
}
.statute p:last-child {
margin-bottom: 0;
}
.band.guide-top {
padding: 56px 0 64px;
}
.guide-how {
margin-top: 36px;
}
.guide-how + .facts {
margin-top: 56px;
}
.guide-intro {
max-width: 68ch;
font-size: 19px;
color: var(--char-2);
}
.guide-intro p:last-child {
margin-bottom: 0;
}
.prose {
max-width: 68ch;
margin-top: 32px;
color: var(--char-2);
}
.prose > :last-child {
margin-bottom: 0;
}
.prose strong {
color: var(--char);
}
.prose ul,
.prose ol {
padding-left: 1.2em;
}
.prose li {
margin-bottom: 8px;
}
.related {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 40px;
}
.related a {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 4px 14px;
padding: 22px 24px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--paper);
text-decoration: none;
color: var(--char);
}
.related a:hover {
border-color: var(--char);
}
.related a > svg {
grid-row: span 2;
width: 44px;
height: 44px;
padding: 11px;
border-radius: 12px;
background: var(--stone);
}
.related strong {
font: 760 19px/1.25 var(--title);
}
.related span {
color: var(--char-2);
font-size: 15.5px;
line-height: 1.45;
}
@media (max-width: 1100px) {
.causes > li {
grid-template-columns: 64px minmax(0, 1fr);
}
.causes .fix {
grid-column: 2;
}
}
@media (max-width: 860px) {
.how-more,
.holds {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.how-more .panel h3,
.holds h3 {
font-size: 26px;
}
.compare,
.compare tbody,
.compare tr,
.compare th,
.compare td {
display: block;
width: auto;
}
.compare {
background: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.compare thead {
display: none;
}
.compare tbody tr {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 18px;
margin-bottom: 16px;
overflow: hidden;
}
.compare tbody th {
width: auto;
border-top: 0;
padding: 16px 18px 6px;
}
.compare td {
border-top: 0;
padding: 8px 18px;
}
.compare td:last-child {
padding-bottom: 16px;
}
.compare td::before {
content: attr(data-col);
display: block;
font: 500 12px/1.3 var(--mono);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 2px;
}
.compare td.ours {
border-radius: 12px;
margin: 4px 8px 12px;
padding: 10px 12px;
}
.causes > li {
grid-template-columns: minmax(0, 1fr);
padding: 26px 0;
}
.causes .fix {
grid-column: auto;
}
.causes h3 {
font-size: 25px;
}
.guide-intro {
font-size: 17px;
}
.band.guide-top {
padding: 36px 0 44px;
}
}
@media print {
.site-header,
.site-footer,
.tool,
.hero-stage,
.to-tool {
display: none;
}
}