.test-page { overflow: hidden; }
.test-page .test-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr); gap: clamp(32px, 7vw, 104px); padding-top: clamp(34px, 6vw, 82px); padding-bottom: clamp(60px, 8vw, 112px); }
.test-page .test-copy { position: relative; z-index: 1; }
.test-page .test-copy h1 { max-width: 11ch; }
.test-page .test-copy .intro { max-width: 31ch; }
.test-page .test-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 31px; }
.test-page .test-actions .button { text-align: center; }
.test-page .test-actions .text-link { display: inline-flex; align-items: center; min-height: 52px; }
.test-page .test-hero-art { align-self: end; position: relative; display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--sky); }
.test-page .test-hero-art::before { content: ''; position: absolute; inset: 11px -11px -11px 11px; z-index: -1; border: 1px solid var(--ink); }
.test-page .test-hero-art p { max-width: 17ch; margin: 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 720; line-height: 1.18; }
.test-page .test-character { display: flex; justify-content: flex-end; width: 100%; }
.test-page .test-character img { display: block; width: min(100%, 320px); height: auto; object-fit: contain; }
.test-page .test-section { padding-top: clamp(54px, 7vw, 94px); padding-bottom: clamp(54px, 7vw, 94px); border-top: 1px solid #151d3b26; }
.test-page .test-section-head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .7fr); gap: 32px; align-items: end; margin-bottom: 36px; }
.test-page .test-section-head p { font-size: 18px; }
.test-page .test-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; }
.test-page .test-facts li { min-height: 198px; padding: 26px; background: var(--pink); border-top: 3px solid var(--ink); }
.test-page .test-facts li:nth-child(2) { background: var(--lime); }
.test-page .test-facts li:nth-child(3) { background: var(--sky); }
.test-page .test-facts strong { display: block; margin-bottom: 18px; font-size: clamp(28px, 3vw, 41px); letter-spacing: -.05em; line-height: 1; }
.test-page .test-facts span { display: block; font-size: 16px; }
.test-page .test-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(28px, 6vw, 76px); }
.test-page .test-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #151d3b44; }
.test-page .test-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 19px 0; border-bottom: 1px solid #151d3b44; }
.test-page .test-list b { font-size: 13px; }
.test-page .test-list p { max-width: 48ch; }
.test-page .test-note { padding: clamp(25px, 3.5vw, 40px); background: var(--lime); }
.test-page .test-note h3 { margin-bottom: 17px; font-size: 25px; }
.test-page .test-note p + p { margin-top: 15px; }
.test-page .test-note .text-link { display: inline-block; margin-top: 24px; }
.test-page .test-payment { padding: clamp(30px, 5vw, 58px); background: var(--ink); color: var(--paper); }
.test-page .test-payment-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, 1fr); gap: clamp(28px, 7vw, 96px); align-items: start; }
.test-page .test-payment h2 { max-width: 12ch; }
.test-page .test-payment ul { margin: 0; padding: 0; list-style: none; }
.test-page .test-payment li { padding: 16px 0; border-bottom: 1px solid #fffaf34d; }
.test-page .test-payment li:first-child { border-top: 1px solid #fffaf34d; }
.test-page .test-start { padding-top: clamp(54px, 8vw, 100px); padding-bottom: clamp(54px, 8vw, 100px); text-align: center; }
.test-page .test-start h2 { max-width: 13ch; margin: 0 auto; }
.test-page .test-start > p { margin: 22px auto 0; }
.test-page .test-share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 31px; }
.test-page .test-copy-button { background: transparent; border: 1px solid var(--ink); box-shadow: none; }
.test-page .test-copy-button:hover { background: var(--lime); }
.test-page .test-start .test-copy-status { min-height: 1.55em; margin-top: 14px; font-size: 15px; }
.test-page .test-copy-fallback { max-width: 640px; margin: 14px auto 0; text-align: left; }
.test-page .test-copy-fallback label { display: block; margin-bottom: 8px; font-size: 14px; }
.test-page .test-copy-fallback input { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--ink); background: var(--paper); font-size: 14px; }
.test-page .test-start .test-share-note { max-width: 50ch; margin-top: 12px; }
.test-page .test-start .subtle { margin-top: 18px; }
@media (max-width: 850px) { .test-page .test-hero, .test-page .test-section-head, .test-page .test-grid, .test-page .test-payment-grid { grid-template-columns: 1fr; } .test-page .test-hero { gap: 46px; } .test-page .test-hero-art { max-width: 520px; } .test-page .test-section-head { gap: 18px; } .test-page .test-facts { grid-template-columns: 1fr; } .test-page .test-facts li { min-height: auto; } }
@media (max-width: 540px) { .test-page .test-hero-art { margin-right: 7px; padding: 24px; gap: 20px; } .test-page .test-character img { width: min(100%, 285px); } .test-page .test-actions { display: grid; } .test-page .test-actions .text-link { justify-content: center; } .test-page .test-list li { grid-template-columns: 32px 1fr; } }