.hero-phone { display: grid; justify-items: center; padding-top: .5rem; } .hero-phone .phone { box-shadow: 0 40px 70px -30px rgba(10, 8, 24, .7), 0 0 0 1px rgba(255, 255, 255, .12); } @media (min-width: 900px) { .hero-phone { grid-area: 1 / 2; align-self: center; padding-top: calc(var(--arch-r) * .25); } } .qask { display: grid; gap: .65rem; } .qask-label { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .qchips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } .qchip { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; font-size: .9375rem; font-weight: 500; line-height: 1.25; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: background-color .2s ease; } a.qchip:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; } @media (hover: hover) { a.qchip:hover { background: rgba(255, 255, 255, .24); } } .qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; } .qtile { position: relative; display: grid; gap: .5rem; align-content: start; height: 100%; padding: 1rem .95rem 2.6rem; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; } .qtile-q { font: 500 1.1rem/1.25 var(--serif); } .qtile-a { color: var(--muted); font-size: .875rem; line-height: 1.5; } .qtile-go { position: absolute; right: 1rem; bottom: .8rem; font-weight: 600; color: var(--accent); } a.qtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (hover: hover) { a.qtile { transition: box-shadow .25s ease; } a.qtile:hover { box-shadow: inset 0 0 0 1px var(--accent); } } @media (min-width: 760px) { .qgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .qtile { padding: 1.4rem 1.3rem 3rem; } .qtile-q { font-size: 1.35rem; } .qtile-a { font-size: .9375rem; } } @media (min-width: 1000px) { .qgrid:has(> li:nth-child(5n):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .qgrid:has(> li:nth-child(5n):last-child) .qtile { padding: 1.3rem 1.15rem 3rem; } .qgrid:has(> li:nth-child(5n):last-child) .qtile-q { font-size: 1.25rem; } } .guide-grid { display: grid; gap: 2rem; align-items: center; justify-items: center; } .guide-copy { width: 100%; } .guide-phone { display: grid; justify-items: center; } @media (min-width: 900px) { .guide-grid { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(3rem, 7vw, 6rem); justify-items: stretch; } } @media (min-width: 1000px) { #made .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .arch h1 { font-size: clamp(3rem, 4.3vw, 4.1rem); } } @media (max-width: 599px) { .arch h1 { font-size: 2.4rem; } .arch-content { gap: 1.1rem; padding-top: 2.25rem; } .arch-content .eyebrow, .qask-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .qchip { min-height: 40px; padding: .4rem .85rem; font-size: .875rem; } .qchips { gap: .4rem; } } .vs { width: 100%; max-width: 48rem; margin-top: 1.75rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .vs th, .vs td { padding: .8rem .65rem; text-align: left; vertical-align: top; font-size: .9375rem; line-height: 1.45; } .vs th { padding-block: 1rem .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .vs .them { color: var(--muted); } .vs td.them { box-shadow: inset 0 1px 0 var(--line); } .vs .us { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent); } .vs th.us { color: var(--accent); border-radius: 20px 20px 0 0; box-shadow: inset 1px 1px 0 var(--accent), inset -1px 0 0 var(--accent); } .vs tr:last-child td.us { border-radius: 0 0 20px 20px; padding-bottom: 1.1rem; box-shadow: inset 1px -1px 0 var(--accent), inset -1px 0 0 var(--accent); } .vs-row { display: flex; gap: .5rem; align-items: flex-start; } .vs-ic { flex: none; width: 1rem; height: 1rem; margin-top: .2em; } .vs .us .vs-ic { color: var(--accent); } .vs-cta { margin-top: 1.75rem; } @media (min-width: 760px) { .vs th, .vs td { padding-inline: 1.25rem; font-size: 1.0625rem; } .vs-ic { width: 1.1rem; height: 1.1rem; } }