/* 색은 모두 여기서만 정의한다. 인라인 SVG 로고와 캔버스(script.js)도 이 변수를 읽어 쓰므로, 값을 바꾸면 세 곳이 함께 따라간다. */ :root { color-scheme: light dark; --bg: #E4E9ED; --panel: #F5F7F9; /* 카드 바탕. --bg 위에서도 --panel(.alt) 위에서도 한 단 떠 보이는 값이어야 한다. */ --card: #FFFFFF; --ink: #16212D; --steel: #546270; --line: #CBD3DA; --safety: #F2B400; /* 강조색을 옅게 깐 바탕. 호버와 뱃지에 쓴다. */ --safety-soft: #FFEFC0; --highlight: #FFF6D6; --rig-steel: #8A96A1; --rig-box: #B9C4CD; /* 모서리와 그림자는 토큰 하나로 묶어 둔다. 각진 느낌으로 되돌리려면 --radius를 0으로. */ --radius: 4px; --shadow: 0 1px 2px rgba(22,33,45,.05), 0 6px 18px rgba(22,33,45,.06); --shadow-lift: 0 2px 5px rgba(22,33,45,.07), 0 16px 36px rgba(22,33,45,.11); --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } /* 다크 값은 아래 두 블록에 같은 내용이 들어간다. 한쪽만 고치지 말 것. 1) OS가 어두울 때 — 단, 사용자가 '밝게'를 직접 고른 경우는 제외 2) 사용자가 '어둡게'를 직접 고른 경우 (OS 설정과 무관) 테마 선택은 로 표시되고, 속성이 없으면 시스템 설정을 따른다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0F151B; --panel: #18222C; --card: #1E2A36; --ink: #EDF1F4; --steel: #97A5B2; --line: #2E3A47; --safety: #F2B400; --safety-soft: #3D3213; --highlight: #2E2716; --rig-steel: #6E7C89; --rig-box: #46545F; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.34); --shadow-lift: 0 2px 5px rgba(0,0,0,.45), 0 16px 36px rgba(0,0,0,.45); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0F151B; --panel: #18222C; --card: #1E2A36; --ink: #EDF1F4; --steel: #97A5B2; --line: #2E3A47; --safety: #F2B400; --safety-soft: #3D3213; --highlight: #2E2716; --rig-steel: #6E7C89; --rig-box: #46545F; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.34); --shadow-lift: 0 2px 5px rgba(0,0,0,.45), 0 16px 36px rgba(0,0,0,.45); } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.7; word-break: keep-all; -webkit-font-smoothing: antialiased; } a { color: inherit; } a:focus-visible, canvas:focus-visible, button:focus-visible, .table-wrap:focus-visible { outline: 3px solid var(--safety); outline-offset: 3px; } /* 키보드로 들어온 사람이 헤더 메뉴를 매번 지나지 않도록. 평소에는 화면 밖에 있다가 포커스될 때만 나온다. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 20; } .skip:focus { left: 10px; top: 10px; padding: 10px 16px; font-weight: 700; text-decoration: none; background: var(--safety); color: #1B2733; border: 2px solid var(--ink); } main:focus { outline: none; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* 한 장짜리 긴 페이지라 지금 어디쯤인지 알려 주는 장치가 필요하다 */ .progress { position: fixed; top: 0; left: 0; z-index: 24; width: 100%; height: 3px; background: var(--safety); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } /* 헤더 */ header .wrap { display: flex; align-items: center; padding-top: 22px; padding-bottom: 10px; gap: 16px; flex-wrap: wrap; } .wordmark { display: block; line-height: 0; margin-right: auto; } .wordmark .logo { height: 36px; width: auto; display: block; } header nav { display: flex; gap: 18px; font-size: 15px; } header nav a { text-decoration: none; color: var(--steel); transition: color .16s ease; } header nav a:hover { color: var(--ink); } header nav a[aria-current] { color: var(--ink); font-weight: 700; } @media (min-width: 881px) { header nav a { position: relative; } header nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--safety); } } .header-actions { display: flex; align-items: center; gap: 10px; } /* 언어 전환: 바꿔서 갈 언어를 그 언어의 글자로 보여준다 */ .lang { font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; color: var(--ink); padding: 6px 11px; border: 2px solid var(--ink); border-radius: var(--radius); transition: background .16s ease, color .16s ease; } .lang:hover { background: var(--safety); color: #1B2733; } /* 다크모드 스위치: 손잡이가 좌우로 움직이고, 그 안의 아이콘이 지금 상태를 보여준다 (밝으면 해가 왼쪽에, 어두우면 달이 오른쪽에) */ .theme-switch { display: inline-flex; align-items: center; padding: 4px 2px; cursor: pointer; color: var(--ink); background: none; border: 0; -webkit-tap-highlight-color: transparent; } .theme-switch .sw { position: relative; flex: none; width: 46px; height: 26px; background: var(--bg); border: 2px solid var(--ink); border-radius: 999px; transition: background .18s ease; } .theme-switch .knob { position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); transition: left .18s ease; } /* 켜짐: 손잡이가 오른쪽으로 가고 트랙이 안전색으로 찬다 */ .theme-switch[aria-checked="true"] .sw { background: var(--safety); } .theme-switch[aria-checked="true"] .knob { left: 21px; } .theme-switch:hover .sw { border-color: var(--safety); } .theme-switch:hover[aria-checked="true"] .sw { border-color: var(--ink); } /* JS가 막혀 data-theme이 없을 때를 위한 기본값은 해 */ .theme-switch .i-sun { display: block; } .theme-switch .i-moon { display: none; } :root[data-theme="dark"] .theme-switch .i-sun { display: none; } :root[data-theme="dark"] .theme-switch .i-moon { display: block; } @media (prefers-reduced-motion: reduce) { .theme-switch .sw, .theme-switch .knob { transition: none; } header nav, .nav-scrim { transition: none; } } /* 메뉴 버튼: 좁은 화면에서만 나타난다 */ .nav-toggle { display: none; align-items: center; gap: 9px; font: inherit; font-size: 15px; color: var(--ink); background: none; border: 2px solid var(--ink); border-radius: var(--radius); padding: 7px 13px; cursor: pointer; } .nav-toggle .bars { position: relative; width: 18px; height: 2px; background: currentColor; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; } .nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] { background: var(--safety); color: #1B2733; } /* 서랍 뒤에 깔리는 딤 배경과 서랍 안의 닫기 버튼. 좁은 화면에서만 쓰인다. */ .nav-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(11, 16, 22, .5); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility 0s linear .26s; } .nav-scrim[data-open] { opacity: 1; visibility: visible; transition: opacity .26s ease, visibility 0s; } .nav-close { display: none; position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; color: var(--ink); background: none; border: 2px solid var(--ink); border-radius: var(--radius); cursor: pointer; } .nav-close:hover { background: var(--safety); color: #1B2733; } /* 서랍이 열린 동안 뒤 본문까지 같이 스크롤되면 보던 자리를 잃는다 */ html.nav-open, html.nav-open body { overflow: hidden; } /* 히어로 */ #rig { display: block; width: 100%; height: 328px; margin-top: 8px; cursor: crosshair; touch-action: pan-y; } /* 캔버스를 조작할 수 있다는 걸 알리는 줄. 도킹포트와 같은 노란 점을 앞에 두어 눈에 걸리게 한다. */ .hint { font-size: 14px; color: var(--steel); padding-top: 12px; display: flex; gap: 9px; align-items: baseline; } .hint::before { content: ""; flex: none; width: 10px; height: 10px; align-self: center; background: var(--safety); border: 2px solid var(--ink); border-radius: 50%; } .hero-text { padding-top: 28px; padding-bottom: 96px; } .hero-text h1 { font-size: clamp(36px, 6.2vw, 76px); line-height: 1.14; letter-spacing: -0.04em; font-weight: 700; max-width: 13em; } .hero-text p { margin-top: 26px; font-size: 19px; color: var(--steel); max-width: 36em; } /* 버튼 */ .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .btn { display: inline-block; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none; padding: 13px 24px; border-radius: var(--radius); border: 2px solid var(--ink); background: var(--safety); color: #1B2733; box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease; } .btn.ghost { background: none; color: var(--ink); box-shadow: none; } .btn:hover, .btn.ghost:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); box-shadow: var(--shadow-lift); } /* 누르는 순간 제자리로 내려앉아야 클릭이 손에 잡힌다 */ .btn:active, .btn.ghost:active { transform: translateY(0); box-shadow: var(--shadow); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn.ghost:hover { transform: none; } } /* 공통 섹션 */ /* 경계는 배경 교대만으로도 읽힌다. 2px 먹선을 얇게 내려 페이지 전체의 소음을 줄인다. */ section { border-top: 1px solid var(--line); } section.alt { background: var(--panel); } .split { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; padding-top: 72px; padding-bottom: 88px; } /* 그리드 항목의 기본 min-width:auto를 풀어야 안쪽 표가 트랙을 밀어내지 않고 스스로 스크롤된다 */ .split > * { min-width: 0; } /* 본문이 긴 섹션에서 왼쪽 제목이 같이 스크롤돼 사라지지 않게 붙여 둔다. 1단 배치에서는 의미가 없으므로 넓은 화면에서만. */ @media (min-width: 881px) { .split > h2 { position: sticky; top: 24px; align-self: start; } } h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.22; letter-spacing: -0.035em; font-weight: 700; } main { counter-reset: sec; } main section[id] { counter-increment: sec; } .split > h2::before { content: counter(sec, decimal-leading-zero); display: inline-block; margin-bottom: 18px; padding-bottom: 6px; border-bottom: 3px solid var(--safety); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--steel); } h1 > span, h2 > span, h3.lead > span { display: block; } h3, h4 { font-size: 17px; font-weight: 700; line-height: 1.5; } .body > * + * { margin-top: 1.1em; } .body p { max-width: 38em; } .muted { color: var(--steel); } main section > .wrap { transition: opacity .5s ease, transform .5s ease; } main section > .wrap.pre { opacity: 0; transform: translateY(16px); } @media (prefers-reduced-motion: reduce) { main section > .wrap { transition: none; } main section > .wrap.pre { opacity: 1; transform: none; } } .body .block { margin-top: 40px; } /* 제약 목록: 가리키는 줄에 안전색 표시가 붙는다 */ .constraints { list-style: none; border-top: 1px solid var(--line); } .constraints li { border-bottom: 1px solid var(--line); padding: 18px 0 18px 18px; border-left: 3px solid transparent; transition: border-left-color .18s ease; } .constraints li:hover { border-left-color: var(--safety); } .constraints p { color: var(--steel); font-size: 16px; margin-top: 4px; } /* 이동 순서 */ .steps { list-style: none; counter-reset: s; border-left: 2px solid var(--line); margin-left: 13px; } .steps li { counter-increment: s; position: relative; padding: 0 0 24px 32px; } .steps li:last-child { padding-bottom: 0; } .steps li::before { content: counter(s); position: absolute; left: -15px; top: 0; width: 28px; height: 28px; line-height: 24px; text-align: center; font-size: 14px; font-weight: 700; color: #1B2733; background: var(--safety); border: 2px solid var(--ink); border-radius: 50%; } .steps p { color: var(--steel); font-size: 15px; margin-top: 4px; } /* 장점: 카드로 세운다. 위쪽 안전색 띠가 제목 줄을 잡아 준다. */ .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; list-style: none; } .benefits li { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 26px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .benefits li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--safety); } .benefits li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--steel); } .benefits p { color: var(--steel); font-size: 15px; margin-top: 6px; } @media (prefers-reduced-motion: reduce) { .benefits li { transition: none; } .benefits li:hover { transform: none; } } /* 핵심 기술 */ .tech { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; list-style: none; } .tech li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .tech p { color: var(--steel); font-size: 15px; margin-top: 6px; } .port-types { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } /* 꽉 찬 노란 덩어리 다섯 개는 시끄럽다. 옅게 깔고 테두리로 형태를 잡는다. */ .port-types li { font-size: 15px; font-weight: 500; padding: 5px 14px; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; background: var(--safety-soft); } /* 비교표: 통째로 카드 안에 넣는다 */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; vertical-align: top; padding: 15px 18px; border-bottom: 1px solid var(--line); } thead th { font-weight: 500; color: var(--steel); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--ink); } tbody th { font-weight: 700; white-space: nowrap; } /* 카드 안이라 마지막 줄의 밑선은 카드 테두리와 겹쳐 두 줄로 보인다 */ tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tr.ours th, tr.ours td { background: var(--highlight); border-top: 2px solid var(--ink); } tr.ours td { font-weight: 500; } /* 표가 화면보다 넓어져 가로로 밀리는 폭에서만 안내를 띄운다 */ .scroll-hint { display: none; font-size: 13px; color: var(--steel); margin-top: 10px; } @media (max-width: 400px) { .scroll-hint { display: block; } } /* 레일에 매달린 행 (로드맵, 팀원) */ .rail-row { position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; } .rail-row::before { content: ""; position: absolute; left: -28px; right: -28px; top: 0; height: 8px; background: var(--ink); } .rail-item { position: relative; padding-top: 66px; } .rail-item::before { content: ""; position: absolute; left: 22px; top: 8px; width: 2px; height: 36px; background: var(--ink); } .rail-item::after { content: ""; position: absolute; left: 15px; top: 42px; width: 16px; height: 16px; background: var(--safety); border: 2px solid var(--ink); border-radius: 50%; } .road { counter-reset: r; } .road .rail-item { counter-increment: r; padding-top: 80px; } .road .rail-item::after { content: counter(r); left: 8px; top: 40px; width: 30px; height: 30px; line-height: 26px; text-align: center; font-size: 14px; font-weight: 700; color: #1B2733; } .road p { color: var(--steel); font-size: 15px; margin-top: 4px; line-height: 1.6; } .roadmap-wrap { padding-bottom: 96px; } .roadmap-wrap h3.lead { font-size: 22px; letter-spacing: -0.02em; } .team .wrap.inner { padding-top: 72px; padding-bottom: 96px; } .team .lede { margin-top: 14px; } .member h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.3; } .member .role { font-weight: 500; margin-top: 2px; color: var(--steel); } /* 연락 */ .contact .wrap { padding-top: 64px; padding-bottom: 64px; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; } .contact a.mail { display: inline-block; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; border-bottom: 4px solid var(--safety); line-height: 1.3; } /* 연락 섹션: 메일 주소 아래에 인스타그램을 붙인다. .contact .wrap이 space-between이라 이 묶음이 통째로 오른쪽 끝에 선다. */ .contact-links { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .contact .social { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; text-decoration: none; color: var(--steel); transition: color .16s ease; } .contact .social:hover { color: var(--ink); } .contact .social svg { flex: none; } /* 제목과 한 줄에 못 서고 접히는 폭부터는 왼쪽 정렬이 자연스럽다 */ @media (max-width: 700px) { .contact-links { align-items: flex-start; } } .contact a.mail { transition: border-color .18s ease; } .contact a.mail:hover { border-bottom-color: var(--ink); } footer { font-size: 13px; color: var(--steel); background: var(--panel); border-top: 2px solid var(--ink); } footer .wrap { padding-top: 28px; padding-bottom: 32px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; } footer a { text-decoration: none; border-bottom: 1px solid var(--line); transition: color .16s ease, border-color .16s ease; } footer a:hover { color: var(--ink); border-bottom-color: var(--safety); } footer .links { display: flex; gap: 18px; } /* 본문 드래그 선택 차단. 클래스는 script.js가 붙인다. 스크립트가 막힌 환경에서는 클래스가 안 붙어 평소대로 선택되므로, 내용을 읽지 못하는 상태로 갇히는 사람이 생기지 않는다. data-selectable이 붙은 곳과 입력 요소는 예외다. */ .no-select body { -webkit-user-select: none; -ms-user-select: none; user-select: none; /* iOS에서 길게 눌렀을 때 뜨는 복사 말풍선까지 같이 막는다 */ -webkit-touch-callout: none; } .no-select [data-selectable], .no-select input, .no-select textarea, .no-select [contenteditable] { -webkit-user-select: text; -ms-user-select: text; user-select: text; -webkit-touch-callout: default; } /* 인쇄물은 종이라 선택과 무관하다. 차단 때문에 텍스트가 빠지는 일은 없지만 PDF로 뽑았을 때 선택이 되도록 되돌려 둔다. */ @media print { .no-select body { -webkit-user-select: text; user-select: text; } } /* 404 */ .notfound .wrap { padding-top: 96px; padding-bottom: 120px; } .notfound .code { font-size: 15px; font-weight: 700; color: var(--steel); letter-spacing: 0.08em; } .notfound h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.18; letter-spacing: -0.035em; margin-top: 10px; } .notfound p { margin-top: 18px; color: var(--steel); max-width: 34em; } @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .nav-close { display: inline-flex; } /* 오른쪽에서 밀려 들어오는 서랍. 닫혀 있을 때 visibility까지 감춰야 탭 순서와 스크린리더에서 빠진다. */ header nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(78vw, 320px); display: flex; flex-direction: column; gap: 0; margin: 0; padding: 72px 0 24px; background: var(--panel); border-left: 2px solid var(--ink); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .26s ease, visibility 0s linear .26s; } header nav[data-open] { transform: none; visibility: visible; transition: transform .26s ease, visibility 0s; } header nav a { padding: 14px 24px; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--line); } header nav a:first-of-type { border-top: 1px solid var(--line); } .split { grid-template-columns: 1fr; gap: 28px; padding-top: 56px; padding-bottom: 64px; } .rail-row { grid-template-columns: repeat(2, 1fr); row-gap: 8px; margin-top: 32px; } .rail-row::before { display: none; } .rail-item { border-top: 8px solid var(--ink); margin-top: 16px; padding-top: 58px; } .rail-item::before { top: 0; } .rail-item::after { top: 34px; } .road .rail-item { padding-top: 72px; } .road .rail-item::after { top: 32px; } } /* 아주 좁은 폰에서는 헤더가 두 줄로 접힌다. 메뉴 버튼의 글자를 빼고 아이콘만 남겨 한 줄을 지킨다. (글자를 숨겨도 버튼 이름은 HTML의 aria-label이 대신한다) */ @media (max-width: 440px) { .header-actions { gap: 8px; } .nav-toggle { padding: 8px 10px; } .nav-toggle span:not(.bars) { display: none; } } @media (max-width: 380px) { .wordmark .logo { height: 30px; } .lang { padding: 6px 9px; } } /* #rig의 높이는 JS가 폭에 맞춰 다시 잡는다. 아래 값은 첫 페인트의 자리맡음용이라 실제 계산값에 가깝게 맞춰 레이아웃 흔들림을 줄인다. */ @media (max-width: 657px) { #rig { height: 300px; } } @media (max-width: 560px) { body { font-size: 16px; } .wrap { padding-left: 20px; padding-right: 20px; } #rig { height: 285px; } .benefits, .tech { grid-template-columns: 1fr; } .rail-row { grid-template-columns: 1fr; } th, td { padding-right: 10px; } .hero-text { padding-bottom: 72px; } } /* 인쇄: 캔버스와 조작 UI를 빼고 본문만 남긴다. 심사 자료로 출력할 때를 위한 것이다. */ @media print { :root { --bg: #fff; --panel: #fff; --card: #fff; --ink: #000; --steel: #444; --line: #bbb; --highlight: #fff; --safety-soft: #fff; --radius: 0; --shadow: none; --shadow-lift: none; } .benefits li, .tech li, .table-wrap { box-shadow: none; border: 1pt solid #999; } .benefits li::before { display: none; } .constraints li { padding-left: 0; border-left: 0; } header, footer, #rig, .hint, .cta, .skip, .theme-switch, .nav-toggle, .nav-scrim, .progress, .scroll-hint { display: none !important; } main section > .wrap.pre { opacity: 1 !important; transform: none !important; } body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.55; } .wrap { max-width: none; padding: 0; } .hero-text { padding-top: 0; padding-bottom: 24pt; } .hero-text h1 { font-size: 26pt; } .hero-text p { font-size: 11pt; } section { border-top: 1pt solid #000; break-inside: avoid; page-break-inside: avoid; } section.alt { background: none; } .split { grid-template-columns: 1fr; gap: 10pt; padding-top: 18pt; padding-bottom: 18pt; } .split > h2 { position: static; font-size: 17pt; } .body p, .body .block { max-width: none; } .benefits, .tech { grid-template-columns: 1fr 1fr; gap: 10pt; } .benefits li, .tech li { padding: 8pt 10pt; } .table-wrap { overflow: visible; border: 0; } table { min-width: 0; } .rail-row { grid-template-columns: repeat(2, 1fr); margin-top: 18pt; row-gap: 12pt; } .rail-row::before { display: none; } .rail-item { padding-top: 0; border-top: 2pt solid #000; padding-left: 0; } .rail-item::before, .rail-item::after { display: none; } .road .rail-item { padding-top: 0; } .team .wrap.inner, .roadmap-wrap { padding-top: 18pt; padding-bottom: 18pt; } .contact .wrap { padding: 18pt 0; } a { color: #000; text-decoration: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; } }