.xonik-s26 .hcols { grid-column: 1/13; display: grid; margin-top: 48px; } .xonik-s26 .hcols > * { padding: 0 32px; border-left: 1px solid var(--line); } .xonik-s26 .hcols > *:first-child { padding-left: 0; border-left: 0; } .xonik-s26 .hcols > *:last-child { padding-right: 0; } .xonik-s26 .hcols--2 { grid-template-columns: repeat(2, 1fr); } .xonik-s26 .hcols--3 { grid-template-columns: repeat(3, 1fr); } .xonik-s26 .hcols--4 { grid-template-columns: repeat(4, 1fr); } .xonik-s26 .hcols h4 { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; } .xonik-s26 .hcols p { font-size: 14.5px; margin: 0 0 12px; max-width: none; } .xonik-s26 .gridcards { grid-column: 1/13; display: grid; margin-top: 48px; border-top: 1px solid var(--line); } .xonik-s26 .gridcards > * { display: block; padding: 32px; border-bottom: 1px solid var(--line); } .xonik-s26 .gridcards--2 { grid-template-columns: repeat(2, 1fr); } .xonik-s26 .gridcards--2 > * { border-right: 1px solid var(--line); } .xonik-s26 .gridcards--2 > *:nth-child(2n+1) { padding-left: 0; } .xonik-s26 .gridcards--2 > *:nth-child(2n) { padding-right: 0; border-right: 0; } .xonik-s26 .gridcards--3 { grid-template-columns: repeat(3, 1fr); } .xonik-s26 .gridcards--3 > * { border-right: 1px solid var(--line); } .xonik-s26 .gridcards--3 > *:nth-child(3n+1) { padding-left: 0; } .xonik-s26 .gridcards--3 > *:nth-child(3n) { padding-right: 0; border-right: 0; } .xonik-s26 .gridcards--4 { grid-template-columns: repeat(4, 1fr); } .xonik-s26 .gridcards--4 > * { border-right: 1px solid var(--line); } .xonik-s26 .gridcards--4 > *:nth-child(4n+1) { padding-left: 0; } .xonik-s26 .gridcards--4 > *:nth-child(4n) { padding-right: 0; border-right: 0; } @media (max-width: 1000px) { .xonik-s26 .hcols, .xonik-s26 .gridcards--2, .xonik-s26 .gridcards--3, .xonik-s26 .gridcards--4 { grid-template-columns: 1fr; } .xonik-s26 .hcols > * { padding: 32px 0; border-left: 0; border-top: 1px solid var(--line); } .xonik-s26 .hcols > *:first-child { padding-top: 0; border-top: 0; } .xonik-s26 .hcols > *:last-child { padding-bottom: 0; } .xonik-s26 .gridcards--2 > *, .xonik-s26 .gridcards--3 > *, .xonik-s26 .gridcards--4 > * { padding: 32px 0 !important; border-right: 0 !important; border-left: 0; } .xonik-s26 .gridcards--2 > *:first-child, .xonik-s26 .gridcards--3 > *:first-child, .xonik-s26 .gridcards--4 > *:first-child { padding-top: 0 !important; } } .xonik-s26 .cmp-table-wrap { grid-column: 1/13; margin-top: 30px; overflow-x: auto; } .xonik-s26 .cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; } .xonik-s26 .cmp-table th, .xonik-s26 .cmp-table td { text-align: left; padding: 16px 24px 16px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--fg-2); vertical-align: top; } .xonik-s26 .cmp-table thead th { font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--fg); padding-bottom: 14px; } .xonik-s26 .cmp-table th:first-child, .xonik-s26 .cmp-table td:first-child { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; } .xonik-s26 .cmp-table tbody tr:last-child th, .xonik-s26 .cmp-table tbody tr:last-child td { border-bottom: 0; } .xonik-s26 .cmp-note { grid-column: 1/13; margin-top: 26px; font-size: 14px; color: var(--fg-2); max-width: 76ch; } .xonik-s26 .cmp-note b { color: var(--fg); font-weight: 600; } .xonik-s26 .hero-t .acts + .txtlink { display: inline-block; margin-top: 16px; } .xonik-s26 .mech-cols { grid-column: 1/13; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 48px; } .xonik-s26 .mech-cols p { max-width: none; } .xonik-s26 .cost-line { grid-column: 1/13; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--fg); } .xonik-s26 .cost-line b { font-weight: 600; } @media (max-width: 1000px) { .xonik-s26 .mech-cols { grid-template-columns: 1fr; gap: 0; } } .xonik-s26 .sit-q { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; margin: 18px 0 12px; } .xonik-s26 .sit-q::before { content: '“'; } .xonik-s26 .sit-q::after { content: '”'; } .xonik-s26 .stages { grid-column: 1/13; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px; margin-top: 60px; position: relative; } .xonik-s26 .stages::before { content: ''; position: absolute; left: 0; right: 0; top: 34px; height: 1.6px; background: var(--accent); } .xonik-s26 .stages > div { position: relative; padding-top: 52px; } .xonik-s26 .stages > div::before { content: ''; position: absolute; top: 28px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); } .xonik-s26 .stages .ord { position: absolute; top: 0; left: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .xonik-s26 .stages .fig { margin-bottom: 16px; } .xonik-s26 .stages h3 { margin-bottom: 8px; } .xonik-s26 .stages p { font-size: 14px; margin: 0; max-width: none; } .xonik-s26 .stages-note { grid-column: 1/13; margin-top: 34px; font-size: 14px; color: var(--fg-2); border-top: 1px solid var(--line); padding-top: 26px; } @media (max-width: 1000px) { .xonik-s26 .stages { grid-template-columns: 1fr; gap: 40px; } .xonik-s26 .stages::before { display: none; } } .xonik-s26 .deliv-row { grid-column: 1/13; display: grid; grid-template-columns: minmax(160px, 250px) minmax(0, 1fr); gap: 0 30px; padding: 30px 0; border-top: 1px solid var(--line); align-items: baseline; } .xonik-s26 .deliv-row > * { min-width: 0; } .xonik-s26 .deliv-row h3 { font-size: 17px; margin: 0; } .xonik-s26 .deliv-row p { margin: 0; max-width: 58ch; } @media (max-width: 1000px) { .xonik-s26 .deliv-row { grid-template-columns: 1fr; gap: 8px; } } .xonik-s26 .plainlist { list-style: none; margin-top: 6px; } .xonik-s26 .plainlist li { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); padding: 12px 0; border-top: 1px solid var(--line); } .xonik-s26 .plainlist li:first-child { border-top: 0; } .xonik-s26 .plainlist li.hard { color: var(--terra); } .xonik-s26 .gridcards h3 { margin-bottom: 8px; } .xonik-s26 .gridcards .fig { margin-bottom: 16px; } .xonik-s26 .gridcards p { font-size: 14.5px; margin: 0 0 16px; max-width: 46ch; } .xonik-s26 .gridcards .cta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .xonik-s26 .gridcards a:hover h3 { color: var(--accent); } .xonik-s26 .gridcards .unsure { background: var(--paper); } .xonik-s26 .gridcards .plus { display: block; margin-bottom: 16px; } .xonik-s26 .stmt .link { display: inline-block; margin-top: 18px; color: #8FA9F5; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }