/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--spacing: 0.25rem;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-ink: #17111e;
--font-body: Arial, Helvetica, sans-serif;
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.sticky {
position: sticky;
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.z-50 {
z-index: 50;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.font-body {
font-family: var(--font-body);
}
.text-ink {
color: var(--color-ink);
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sm\:grid-cols-2 {
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.md\:grid-cols-2 {
@media (width >= 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}
:root {
--orange: #ff5a00;
--pink: #ff1493;
--ink: #17111e;
--paper: #fff9f4;
--line: rgba(23,17,30,.19);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 0;
}
body {
margin: 0;
background: var(--orange);
color: var(--ink);
font-family: Arial,Helvetica,sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
h1,h2,h3,h4,p {
margin-top: 0;
}
h1,h2,h3,h4 {
font-weight: 800;
line-height: 1.08;
letter-spacing: -.045em;
}
a {
color: inherit;
text-decoration: none;
}
button,summary {
font: inherit;
}
button,a,summary {
-webkit-tap-highlight-color: transparent;
}
img {
display: block;
max-width: 100%;
height: auto;
}
svg {
display: block;
}
a,button,summary {
touch-action: manipulation;
}
a:focus-visible,button:focus-visible,summary:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 5px;
box-shadow: 0 0 0 8px #fff;
}
::selection {
background: var(--ink);
color: #fff;
}
main:focus {
outline: none;
}
main {
scroll-margin-top: 82px;
}
section[id],h2[id],h3[id] {
scroll-margin-top: 110px;
}
.wrap {
width: min(1240px,calc(100% - 64px));
margin-inline: auto;
}
.skip-link {
position: fixed;
top: -90px;
left: 16px;
padding: 12px 20px;
background: var(--ink);
color: white;
z-index: 100;
}
.skip-link:focus {
top: 12px;
}
.eyebrow {
font-size: 11px;
letter-spacing: .15em;
font-weight: 800;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
line-height: 1.6;
}
.eyebrow:before {
content: "";
width: 8px;
height: 8px;
background: currentColor;
border-radius: 50%;
flex-shrink: 0;
}
.site-header {
position: sticky;
top: 0;
z-index: 60;
border-bottom: 1px solid var(--ink);
background: linear-gradient(108deg,#ff782b 0%,#ff5a00 49%,#ff2694 100%);
}
.header-row {
display: flex;
align-items: center;
justify-content: space-between;
height: 82px;
gap: 25px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 23px;
font-weight: 900;
letter-spacing: -.055em;
line-height: 1;
white-space: nowrap;
}
.brand-icon {
width: 27px;
height: 32px;
flex-shrink: 0;
fill: currentColor;
}
.desktop-nav {
display: flex;
align-items: center;
gap: 25px;
}
.desktop-nav a {
font-size: 13px;
font-weight: 700;
min-height: 44px;
display: flex;
align-items: center;
position: relative;
}
.desktop-nav a:after {
content: "";
height: 2px;
position: absolute;
bottom: 6px;
left: 0;
right: 100%;
background: var(--ink);
transition: right .2s;
}
.desktop-nav a:hover:after,.desktop-nav a[aria-current=page]:after {
right: 0;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 16px 24px;
border: 1.5px solid var(--ink);
border-radius: 12px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
min-height: 52px;
transition: transform .18s,box-shadow .18s;
background: var(--ink);
color: var(--paper);
}
.btn:hover {
transform: translate(-2px,-2px);
box-shadow: 4px 4px 0 rgba(23,17,30,.3);
}
.btn .arrow {
font-size: 20px;
line-height: 1;
}
.btn-secondary {
background: var(--paper);
color: var(--ink);
}
.btn-small {
padding: 11px 16px;
min-height: 44px;
font-size: 12px;
border-radius: 9px;
}
.mobile-nav {
display: none;
}
.hero {
position: relative;
overflow: hidden;
background: linear-gradient(120deg,#ff7422 0%,#ff5a00 41%,#ff3973 72%,#ff1493 100%);
padding: 68px 0 52px;
}
.hero:before,.page-hero:before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(23,17,30,.09) .6px,transparent .6px);
background-size: 9px 9px;
opacity: .25;
}
.hero-grid {
display: grid;
grid-template-columns: 1.07fr 1fr;
gap: 44px;
align-items: center;
position: relative;
}
.hero h1 {
font-size: clamp(55px,6.65vw,96px);
line-height: .98;
letter-spacing: -.065em;
margin-bottom: 28px;
}
.hero h1 span {
display: block;
}
.hero h1 .outline-word {
color: var(--paper);
-webkit-text-stroke: 1.5px var(--ink);
text-shadow: 4px 4px 0 var(--ink);
}
.hero-description {
font-size: 18px;
line-height: 1.75;
max-width: 480px;
margin: 0 0 27px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero-footnote {
font-size: 11px;
font-weight: 700;
margin-top: 22px;
display: flex;
align-items: center;
gap: 9px;
}
.hero-footnote svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.hero-visual {
position: relative;
margin: 10px 0 16px;
}
.hero-visual .hero-image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 1.5px solid var(--ink);
border-radius: 32px;
box-shadow: 10px 12px 0 rgba(23,17,30,.9);
}
.visual-tag {
position: absolute;
border: 1px solid var(--ink);
border-radius: 12px;
padding: 13px 17px;
font-size: 11px;
font-weight: 700;
background: var(--paper);
box-shadow: 4px 4px 0 var(--ink);
line-height: 1.6;
display: flex;
align-items: center;
gap: 11px;
}
.visual-tag svg {
width: 26px;
height: 26px;
}
.visual-tag.top {
right: -12px;
top: 29px;
transform: rotate(5deg);
}
.visual-tag.bottom {
bottom: 30px;
left: -20px;
transform: rotate(-4deg);
background: #ffb57c;
}
.visual-tag small {
display: block;
font-size: 9px;
font-weight: 500;
letter-spacing: .11em;
}
.hero-index {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 42px;
padding-top: 19px;
border-top: 1px solid var(--line);
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
position: relative;
}
.feature-strip {
border-block: 1px solid var(--ink);
background: var(--ink);
color: var(--paper);
padding: 18px 0;
}
.strip-row {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
}
.strip-row span {
display: inline-flex;
align-items: center;
gap: 12px;
}
.strip-row span:before {
content: "✦";
color: #ff69b4;
font-size: 16px;
}
.section {
padding: 90px 0;
}
.section-orange {
background: #ff701e;
}
.section-pink {
background: linear-gradient(110deg,#ff299d,#ff1493 65%,#ff5069);
}
.section-paper {
background: #fff1e4;
}
.section-gradient {
background: linear-gradient(115deg,#ff7525,#ff4580 65%,#ff1493);
}
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 40px;
}
.section-head h2 {
font-size: clamp(34px,4vw,55px);
max-width: 720px;
margin-bottom: 0;
}
.section-head p {
max-width: 410px;
margin: 15px 0 0;
font-size: 16px;
line-height: 1.75;
}
.section-head .eyebrow {
margin-bottom: 17px;
}
.text-link {
font-size: 13px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 13px;
padding: 10px 0;
border-bottom: 1px solid var(--ink);
white-space: nowrap;
min-height: 44px;
}
.text-link:hover {
gap: 20px;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 20px;
}
.benefit-card {
border: 1.5px solid var(--ink);
border-radius: 21px;
padding: 29px;
background: var(--paper);
box-shadow: 4px 4px 0 var(--ink);
display: flex;
flex-direction: column;
transition: transform .2s;
}
.benefit-card:hover {
transform: translateY(-4px);
}
.benefit-card:nth-child(2n) {
background: #ffe4ef;
}
.card-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: #ff9258;
border: 1px solid var(--ink);
border-radius: 12px;
margin-bottom: 28px;
}
.card-icon svg {
width: 23px;
height: 23px;
}
.card-icon svg[fill="none"] {
fill: none;
}
.benefit-card:nth-child(2n) .card-icon {
background: #ff78b7;
}
.benefit-card h3 {
font-size: 23px;
line-height: 1.2;
margin: 0 0 12px;
}
.benefit-card p {
font-size: 14px;
line-height: 1.75;
margin: 0 0 20px;
}
.benefit-card .card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
padding-top: 18px;
border-top: 1px solid var(--line);
margin-top: auto;
}
.round-arrow {
border: 1px solid var(--ink);
border-radius: 50%;
display: grid;
place-items: center;
width: 29px;
height: 29px;
font-size: 17px;
}
.section-note {
font-size: 13px;
max-width: 840px;
margin: 27px 0 0;
line-height: 1.8;
}
.section-note a {
text-decoration: underline;
text-underline-offset: 4px;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 25px;
}
.step {
padding: 30px 0 0;
border-top: 2px solid var(--ink);
}
.step-number {
font-size: 63px;
font-weight: 800;
line-height: 1;
letter-spacing: -.065em;
margin-bottom: 22px;
display: block;
}
.step h3 {
font-size: 24px;
margin-bottom: 15px;
}
.step p {
font-size: 15px;
line-height: 1.8;
margin-bottom: 0;
}
.boundary-note {
display: flex;
align-items: center;
gap: 20px;
padding: 22px 27px;
margin-top: 36px;
border: 1px solid var(--ink);
border-radius: 16px;
background: #fff6eb;
font-size: 14px;
}
.boundary-note svg {
width: 29px;
height: 34px;
flex-shrink: 0;
}
.boundary-note p {
margin: 0;
}
.device-layout {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 80px;
align-items: center;
}
.device-layout h2 {
font-size: clamp(34px,4vw,55px);
}
.device-layout p {
font-size: 16px;
line-height: 1.8;
}
.device-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 18px;
}
.device-card {
background: #fff5f9;
border: 1.5px solid var(--ink);
border-radius: 20px;
padding: 26px;
box-shadow: 4px 4px 0 var(--ink);
}
.device-card svg {
width: 62px;
height: 62px;
margin: 4px 0 23px;
fill: none;
}
.device-card h3 {
font-size: 23px;
margin-bottom: 8px;
}
.device-card p {
font-size: 12px;
margin: 0;
}
.guide-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 23px;
}
.guide-card {
border: 1.5px solid var(--ink);
border-radius: 21px;
background: var(--paper);
overflow: hidden;
box-shadow: 4px 4px 0 var(--ink);
display: flex;
flex-direction: column;
transition: transform .2s;
}
.guide-card:hover {
transform: translateY(-4px);
}
.guide-card .card-image {
position: relative;
display: block;
border-bottom: 1px solid var(--ink);
overflow: hidden;
}
.guide-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
transition: transform .35s;
}
.guide-card:hover img {
transform: scale(1.025);
}
.guide-card-content {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.category-label {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 13px;
}
.category-label:hover {
text-decoration: underline;
}
.guide-card h3 {
font-size: 24px;
line-height: 1.18;
margin: 0 0 13px;
}
.guide-card h3 a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.guide-card p {
font-size: 13px;
line-height: 1.75;
margin: 0 0 24px;
}
.card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 15px;
font-size: 10px;
margin-top: auto;
color: #554551;
}
.faq-layout {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 70px;
}
.faq-layout h2 {
font-size: clamp(35px,4vw,53px);
max-width: 390px;
}
.faq-layout p {
font-size: 16px;
line-height: 1.8;
}
.faq-list details {
border: 1px solid var(--ink);
border-radius: 14px;
background: var(--paper);
margin-bottom: 12px;
}
.faq-list summary {
cursor: pointer;
list-style: none;
padding: 20px 23px;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
line-height: 1.4;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary:after {
content: "+";
font-size: 24px;
font-weight: 400;
}
.faq-list details[open] summary:after {
content: "−";
}
.faq-list details p {
padding: 0 23px 23px;
margin: 0;
font-size: 14px;
line-height: 1.8;
}
.faq-list details a {
text-decoration: underline;
text-underline-offset: 4px;
}
.cta-panel {
border: 1.5px solid var(--ink);
border-radius: 28px;
padding: 50px 52px;
background: linear-gradient(110deg,#ff913a,#ff37a2);
box-shadow: 7px 7px 0 var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.cta-panel h2 {
font-size: clamp(33px,3.5vw,50px);
max-width: 760px;
margin: 0 0 16px;
}
.cta-panel p {
font-size: 15px;
max-width: 640px;
margin: 0;
line-height: 1.8;
}
.cta-panel .btn {
flex-shrink: 0;
}
.site-footer {
background: linear-gradient(120deg,#ff7932 0%,#ff3680 40%,#ff1493 100%);
border-top: 1px solid var(--ink);
padding: 60px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 45px;
padding-bottom: 42px;
}
.footer-brand p {
font-size: 13px;
max-width: 295px;
line-height: 1.8;
margin: 20px 0;
}
.footer-mail {
font-weight: 700;
font-size: 14px;
text-decoration: underline;
text-underline-offset: 4px;
display: inline-block;
padding: 10px 0;
}
.footer-group h2 {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
margin: 4px 0 15px;
}
.footer-group a {
display: block;
font-size: 12px;
padding: 8px 0;
line-height: 1.5;
min-height: 34px;
}
.footer-group a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.footer-word {
border-top: 1px solid var(--ink);
padding: 30px 0;
font-size: clamp(48px,9.7vw,138px);
letter-spacing: -.07em;
font-weight: 900;
line-height: 1;
text-align: center;
}
.footer-bottom {
padding: 21px 0 25px;
border-top: 1px solid var(--ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 10px;
font-weight: 700;
}
.footer-bottom-links {
display: flex;
gap: 22px;
}
.footer-bottom a {
text-decoration: underline;
text-underline-offset: 3px;
}
.page-hero {
position: relative;
background: linear-gradient(115deg,#ff7627,#ff5173 58%,#ff1493);
padding: 35px 0 55px;
border-bottom: 1px solid var(--ink);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
margin: 0 0 35px;
list-style: none;
padding: 0;
font-size: 11px;
position: relative;
}
.breadcrumb a {
text-decoration: underline;
text-underline-offset: 3px;
padding: 6px 0;
display: inline-block;
}
.breadcrumb li+li:before {
content: "/";
margin-right: 9px;
opacity: .55;
}
.breadcrumb li:last-child {
max-width: 700px;
}
.page-hero-grid {
display: grid;
grid-template-columns: minmax(0,1fr) 320px;
gap: 70px;
align-items: center;
position: relative;
}
.page-hero h1 {
font-size: clamp(36px,4.45vw,66px);
margin: 0 0 22px;
line-height: 1.03;
max-width: 950px;
}
.page-hero .lead {
font-size: 18px;
line-height: 1.8;
max-width: 740px;
margin: 0;
}
.page-hero-image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 1.5px solid var(--ink);
border-radius: 23px;
box-shadow: 6px 6px 0 var(--ink);
}
.hero-single {
max-width: 1030px;
position: relative;
}
.hero-single .lead {
max-width: 780px;
}
.hero-stats {
display: flex;
gap: 27px;
flex-wrap: wrap;
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
margin-top: 26px;
}
.article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 17px;
font-size: 11px;
line-height: 1.8;
margin-top: 26px;
}
.article-meta a {
text-decoration: underline;
text-underline-offset: 3px;
}
.article-meta .dot {
width: 3px;
height: 3px;
background: var(--ink);
border-radius: 50%;
display: inline-block;
}
.article-main {
padding: 55px 0 70px;
background: linear-gradient(125deg,#ff9257 0%,#ff62a9 100%);
}
.reading-layout {
display: grid;
grid-template-columns: 235px minmax(0,1fr);
gap: 28px;
align-items: start;
}
.reading-sidebar {
position: sticky;
top: 108px;
border: 1px solid var(--ink);
border-radius: 19px;
background: #fff1e4;
padding: 22px;
max-height: calc(100vh - 130px);
overflow: auto;
}
.reading-sidebar h2 {
font-size: 10px;
letter-spacing: .13em;
margin: 0 0 16px;
text-transform: uppercase;
line-height: 1.5;
}
.toc {
list-style: none;
padding: 0;
margin: 0;
}
.toc a {
display: block;
font-size: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
line-height: 1.5;
}
.toc a:hover {
text-decoration: underline;
}
.sidebar-footer {
font-size: 11px;
line-height: 1.7;
margin-top: 22px;
}
.sidebar-footer a {
text-decoration: underline;
}
.paper {
background: var(--paper);
border: 1.5px solid var(--ink);
border-radius: 25px;
box-shadow: 5px 5px 0 var(--ink);
padding: 47px 53px;
min-width: 0;
}
.prose {
font-size: 17px;
line-height: 1.86;
overflow-wrap: break-word;
}
.prose p {
margin: 0 0 22px;
}
.prose>p:first-child {
font-size: 19px;
line-height: 1.8;
}
.prose h2 {
font-size: 29px;
line-height: 1.22;
margin: 44px 0 18px;
letter-spacing: -.035em;
}
.prose h2:first-child {
margin-top: 0;
}
.prose h3 {
font-size: 21px;
line-height: 1.3;
margin: 27px 0 15px;
}
.prose a {
color: #782145;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
font-weight: 600;
}
.prose a:hover {
color: #17111e;
}
.prose strong {
font-weight: 700;
}
.prose ul,.prose ol {
padding-left: 23px;
list-style: revert;
margin: 0 0 22px;
}
.prose li {
margin-bottom: 10px;
}
.prose blockquote {
margin: 27px 0;
padding: 20px 24px;
border-left: 4px solid var(--pink);
background: #ffe4ef;
}
.prose blockquote p:last-child {
margin: 0;
}
.table-wrap {
overflow-x: auto;
margin: 25px 0;
max-width: 100%;
border: 1px solid var(--line);
border-radius: 12px;
}
.prose table {
border-collapse: collapse;
min-width: 580px;
width: 100%;
font-size: 13px;
line-height: 1.7;
margin: 0;
}
.prose th {
background: #ffd7e9;
font-weight: 700;
text-align: left;
}
.prose th,.prose td {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.prose th:nth-child(1) {
width: 22%;
}
.prose tr:last-child td {
border-bottom: none;
}
.article-tail {
border-top: 1px solid var(--line);
padding-top: 25px;
margin-top: 34px;
}
.article-tail p {
font-size: 11px;
line-height: 1.8;
margin: 0 0 18px;
color: #554551;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
display: inline-flex;
align-items: center;
min-height: 35px;
font-size: 11px;
font-weight: 700;
padding: 7px 12px;
border: 1px solid var(--ink);
border-radius: 99px;
background: #ffe0ee;
transition: background .2s;
}
.tag:hover,.tag[aria-current=page] {
background: var(--ink);
color: white;
}
.filter-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.filter-bar .tag {
min-height: 44px;
padding: 10px 15px;
background: var(--paper);
}
.filter-bar .tag[aria-current=page] {
background: var(--ink);
color: var(--paper);
}
.filter-bar .tag:hover {
background: var(--ink);
color: white;
}
.archive-intro {
font-size: 16px;
line-height: 1.8;
max-width: 900px;
padding-bottom: 33px;
}
.archive-intro p {
margin-bottom: 18px;
}
.archive-intro a {
text-decoration: underline;
text-underline-offset: 4px;
font-weight: 700;
}
.catalogue-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 22px;
}
.catalogue-card {
padding: 30px;
border: 1px solid var(--ink);
border-radius: 20px;
background: var(--paper);
box-shadow: 4px 4px 0 var(--ink);
}
.catalogue-card h2 {
font-size: 25px;
margin: 0 0 13px;
}
.catalogue-card p {
font-size: 14px;
line-height: 1.8;
margin-bottom: 17px;
}
.reference-library {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.reference-card {
border-top: 1px solid var(--line);
padding: 20px 0 0;
}
.reference-card h3 {
font-size: 18px;
margin: 0 0 10px;
}
.reference-card p {
font-size: 13px;
line-height: 1.8;
}
.reference-card a {
font-size: 12px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
}
.page-main {
background: linear-gradient(120deg,#ff9760,#ff74b5);
padding: 55px 0 70px;
}
.page-main .paper {
max-width: 980px;
margin: auto;
}
.page-main .paper.has-sidebar {
max-width: 100%;
}
.contact-highlight {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 25px 30px;
background: #ffe2ed;
border: 1px solid var(--ink);
border-radius: 17px;
margin-bottom: 35px;
}
.contact-highlight a {
font-size: clamp(23px,3vw,36px);
letter-spacing: -.035em;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 7px;
}
.contact-highlight .round-arrow {
width: 48px;
height: 48px;
font-size: 27px;
flex-shrink: 0;
}
.reading-progress {
position: fixed;
top: 82px;
left: 0;
height: 3px;
z-index: 70;
background: var(--ink);
width: 0;
pointer-events: none;
transition: width .08s linear;
}
.collection-note {
border-top: 1px solid var(--ink);
margin-top: 35px;
padding-top: 23px;
font-size: 13px;
line-height: 1.8;
}
.collection-note a {
text-decoration: underline;
text-underline-offset: 3px;
}
.no-js-note {
display: none;
}
@media (min-width:1600px) {
.hero {
padding: 78px 0 60px;
}
.hero h1 {
font-size: 100px;
}
}
@media (max-width:1100px) {
.desktop-nav {
gap: 17px;
}
.desktop-nav a {
font-size: 12px;
}
.header-row {
gap: 17px;
}
.header-cta {
display: none;
}
.hero-grid {
gap: 30px;
}
.hero h1 {
font-size: 72px;
}
.hero-description {
font-size: 17px;
}
.visual-tag.top {
right: 0;
}
.visual-tag.bottom {
left: -8px;
}
.guide-card h3 {
font-size: 21px;
}
.device-layout {
gap: 40px;
}
.faq-layout {
gap: 35px;
}
.page-hero-grid {
gap: 40px;
grid-template-columns: minmax(0,1fr) 275px;
}
.reading-layout {
grid-template-columns: 205px minmax(0,1fr);
gap: 22px;
}
.paper {
padding: 36px;
}
.footer-grid {
gap: 25px;
}
.benefit-card {
padding: 24px;
}
}
@media (max-width:800px) {
.wrap {
width: calc(100% - 40px);
}
.header-row {
height: 72px;
}
.brand {
font-size: 23px;
}
.desktop-nav {
display: none;
}
.mobile-nav {
display: block;
}
.mobile-nav summary {
display: flex;
align-items: center;
gap: 13px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
list-style: none;
min-height: 44px;
padding: 8px 14px;
border: 1px solid var(--ink);
border-radius: 9px;
background: rgba(255,255,255,.18);
}
.mobile-nav summary::-webkit-details-marker {
display: none;
}
.menu-bars {
width: 17px;
height: 11px;
border-block: 1.5px solid var(--ink);
display: block;
}
.mobile-nav[open] .menu-bars {
transform: rotate(-45deg);
height: 0;
border-top: 0;
}
.mobile-panel {
position: absolute;
left: 0;
right: 0;
top: 100%;
padding: 18px 22px 23px;
background: #ff91bd;
border-bottom: 1.5px solid var(--ink);
box-shadow: 0 12px 22px rgba(0,0,0,.15);
max-height: calc(100dvh - 72px);
overflow-y: auto;
}
.mobile-panel a {
display: block;
padding: 13px 4px;
border-bottom: 1px solid var(--line);
font-size: 15px;
font-weight: 700;
}
.mobile-panel .btn {
margin-top: 15px;
text-align: center;
display: flex;
padding: 14px;
}
.hero {
padding: 43px 0 32px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 37px;
}
.hero h1 {
font-size: clamp(56px,10vw,84px);
max-width: 690px;
}
.hero-description {
max-width: 590px;
}
.hero-visual {
max-width: 570px;
width: calc(100% - 12px);
margin: 0 auto;
}
.hero-visual .hero-image {
border-radius: 25px;
box-shadow: 7px 8px 0 var(--ink);
}
.hero-index {
font-size: 9px;
margin-top: 32px;
}
.hero-footnote {
margin-top: 19px;
}
.feature-strip {
padding: 16px 0;
}
.strip-row {
justify-content: flex-start;
column-gap: 28px;
row-gap: 7px;
font-size: 10px;
}
.strip-row span:before {
font-size: 13px;
}
.section {
padding: 62px 0;
}
.section-head {
gap: 20px;
align-items: flex-start;
flex-direction: column;
margin-bottom: 30px;
}
.section-head h2 {
font-size: 43px;
}
.section-head p {
max-width: 620px;
}
.benefit-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 17px;
}
.steps-grid {
gap: 23px;
}
.step-number {
font-size: 52px;
}
.step h3 {
font-size: 21px;
}
.step p {
font-size: 14px;
}
.device-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.device-layout h2 {
max-width: 630px;
}
.guide-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 20px;
}
.home-guides .guide-card:last-child {
grid-column: 1/-1;
display: grid;
grid-template-columns: 1fr 1fr;
}
.home-guides .guide-card:last-child .card-image {
border-bottom: 0;
border-right: 1px solid var(--ink);
}
.guide-card h3 {
font-size: 23px;
}
.faq-layout {
grid-template-columns: 1fr;
gap: 26px;
}
.faq-layout h2 {
max-width: 550px;
}
.cta-panel {
padding: 35px;
flex-direction: column;
align-items: flex-start;
gap: 25px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 33px;
}
.footer-brand {
grid-column: 1/-1;
}
.footer-brand p {
max-width: 500px;
}
.footer-group a {
min-height: 40px;
padding: 10px 0;
}
.footer-word {
font-size: 10vw;
}
.page-hero {
padding: 27px 0 38px;
}
.breadcrumb {
margin-bottom: 27px;
}
.page-hero-grid {
grid-template-columns: minmax(0,1fr) 225px;
gap: 25px;
}
.page-hero h1 {
font-size: 43px;
}
.page-hero .lead {
font-size: 16px;
}
.page-hero .eyebrow {
font-size: 10px;
margin-bottom: 18px;
}
.reading-layout {
grid-template-columns: 1fr;
gap: 23px;
}
.reading-sidebar {
position: static;
max-height: none;
padding: 21px;
}
.reading-sidebar .toc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 25px;
}
.reading-sidebar .toc a {
padding: 9px 0;
font-size: 12px;
}
.sidebar-footer {
display: none;
}
.article-main,.page-main {
padding: 32px 0 50px;
}
.paper {
padding: 34px;
}
.reading-progress {
top: 72px;
}
.prose h2 {
font-size: 28px;
}
.page-main .paper {
max-width: 100%;
}
.catalogue-grid {
grid-template-columns: 1fr 1fr;
}
.reference-library {
grid-template-columns: 1fr;
}
.article-meta {
font-size: 10px;
gap: 6px 12px;
}
}
@media (max-width:540px) {
.wrap {
width: calc(100% - 36px);
}
.hero h1 {
font-size: clamp(48px,12.4vw,66px);
line-height: 1.02;
}
.hero .eyebrow {
font-size: 9px;
letter-spacing: .1em;
}
.hero-description {
font-size: 16px;
line-height: 1.75;
max-width: 380px;
}
.hero-actions {
gap: 10px;
}
.hero-actions .btn {
padding: 14px 17px;
font-size: 12px;
min-height: 49px;
}
.hero-actions .btn .arrow {
font-size: 17px;
}
.hero-footnote {
font-size: 10px;
line-height: 1.6;
}
.visual-tag {
font-size: 10px;
padding: 10px 12px;
}
.visual-tag.top {
right: -2px;
top: 18px;
}
.visual-tag.bottom {
bottom: 20px;
left: -3px;
}
.visual-tag svg {
width: 22px;
height: 22px;
}
.hero-index {
gap: 18px;
font-size: 8px;
}
.hero-index span:last-child {
text-align: right;
}
.strip-row {
column-gap: 21px;
row-gap: 8px;
font-size: 8.5px;
}
.section {
padding: 48px 0;
}
.section-head h2 {
font-size: 36px;
}
.section-head p {
font-size: 15px;
}
.eyebrow {
font-size: 10px;
margin-bottom: 17px;
}
.benefit-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.benefit-card {
padding: 25px;
}
.benefit-card h3 {
font-size: 25px;
}
.card-icon {
margin-bottom: 22px;
}
.steps-grid {
grid-template-columns: 1fr;
gap: 26px;
}
.step {
padding-top: 22px;
display: grid;
grid-template-columns: 63px 1fr;
column-gap: 19px;
}
.step-number {
grid-row: 1/3;
font-size: 51px;
margin: 0;
}
.step h3 {
font-size: 22px;
margin: 0 0 10px;
}
.step p {
font-size: 14px;
}
.boundary-note {
padding: 20px;
gap: 15px;
font-size: 13px;
align-items: flex-start;
}
.device-grid {
gap: 13px;
}
.device-card {
padding: 21px 17px;
}
.device-card svg {
width: 47px;
height: 47px;
margin-bottom: 20px;
}
.device-card h3 {
font-size: 21px;
}
.device-card p {
font-size: 11px;
}
.device-layout h2 {
font-size: 36px;
}
.device-layout p {
font-size: 15px;
}
.guide-grid {
grid-template-columns: 1fr;
gap: 23px;
}
.home-guides .guide-card:last-child {
display: flex;
grid-column: auto;
}
.home-guides .guide-card:last-child .card-image {
border-right: 0;
border-bottom: 1px solid var(--ink);
}
.guide-card-content {
padding: 23px;
}
.guide-card h3 {
font-size: 26px;
}
.guide-card p {
font-size: 14px;
}
.card-meta {
font-size: 11px;
}
.category-label {
font-size: 11px;
}
.faq-layout h2 {
font-size: 36px;
}
.faq-list summary {
font-size: 14px;
padding: 19px;
}
.faq-list details p {
padding: 0 19px 20px;
font-size: 13px;
}
.cta-panel {
padding: 29px 24px;
border-radius: 22px;
box-shadow: 5px 5px 0 var(--ink);
}
.cta-panel h2 {
font-size: 34px;
}
.cta-panel p {
font-size: 14px;
}
.site-footer {
padding-top: 43px;
}
.footer-grid {
column-gap: 23px;
row-gap: 29px;
}
.footer-group a {
font-size: 12px;
min-height: 42px;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: 13px;
font-size: 10px;
}
.footer-word {
font-size: 11vw;
white-space: nowrap;
padding: 23px 0;
}
.footer-brand p {
margin: 18px 0 8px;
}
.page-hero-grid {
grid-template-columns: 1fr;
gap: 29px;
}
.page-hero-image {
max-width: 335px;
width: 100%;
margin: auto;
box-shadow: 5px 5px 0 var(--ink);
}
.page-hero h1 {
font-size: 38px;
line-height: 1.06;
}
.page-hero .lead {
font-size: 16px;
}
.breadcrumb {
font-size: 10px;
gap: 5px;
}
.breadcrumb li:last-child {
max-width: 100%;
}
.breadcrumb li+li:before {
margin-right: 5px;
}
.article-meta {
font-size: 10px;
line-height: 1.9;
}
.reading-sidebar .toc {
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.reading-sidebar .toc a {
font-size: 11px;
line-height: 1.55;
padding: 10px 0;
}
.paper {
padding: 27px 22px;
border-radius: 20px;
box-shadow: 3px 4px 0 var(--ink);
}
.prose {
font-size: 16px;
line-height: 1.83;
}
.prose>p:first-child {
font-size: 17px;
line-height: 1.85;
}
.prose h2 {
font-size: 25px;
line-height: 1.23;
margin-top: 35px;
}
.prose h3 {
font-size: 20px;
}
.prose p {
margin-bottom: 20px;
}
.page-main .wrap,.article-main .wrap {
width: calc(100% - 30px);
}
.article-tail .tag {
font-size: 10px;
min-height: 40px;
}
.contact-highlight {
padding: 19px;
margin-bottom: 25px;
}
.contact-highlight .round-arrow {
display: none;
}
.contact-highlight a {
font-size: clamp(21px,5.8vw,31px);
}
.catalogue-grid {
grid-template-columns: 1fr;
}
.catalogue-card {
padding: 25px;
}
.filter-bar {
gap: 8px;
}
.filter-bar .tag {
font-size: 10px;
padding: 8px 13px;
}
.archive-intro {
font-size: 15px;
}
.page-hero .hero-stats {
gap: 15px;
font-size: 10px;
}
.table-wrap {
border-radius: 9px;
}
.prose table {
min-width: 540px;
}
.brand {
font-size: 22px;
}
.header-row {
gap: 12px;
}
.brand-icon {
width: 24px;
height: 28px;
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
*,*:before,*:after {
animation: none !important;
transition: none !important;
}
.btn:hover,.guide-card:hover,.benefit-card:hover {
transform: none;
}
.guide-card:hover img {
transform: none;
}
}
@media print {
.site-header,.site-footer,.reading-sidebar,.related-section,.skip-link,.reading-progress,.article-tail {
display: none !important;
}
body,main,.page-hero,.article-main,.page-main {
background: white !important;
}
.wrap {
width: 100%;
}
.page-hero-grid {
display: block;
}
.page-hero-image {
display: none;
}
.page-hero {
padding: 10px 0;
}
.page-hero h1 {
font-size: 30px;
}
.reading-layout {
display: block;
}
.paper {
box-shadow: none;
border: 0;
padding: 0;
}
.prose {
font-size: 11pt;
}
.prose a {
color: inherit;
}
.section {
padding: 20px 0;
}
}