/* Shared product-page stylesheet for Prime TechApp app sites. ------------------------------------------------------------------ One structure for every app page: dark hero → discover row → bento feature grid → showcase panel → commitments → CTA band → footer. Only the --brand-* tokens change per app; each page overrides them in a small :root block in its own , so a new app site needs one colour block instead of a copied stylesheet. The privacy pages share this file too — they use the .nav--light header, the .legal* blocks near the bottom, and the same footer. Defaults below are the neutral Prime TechApp blue. */ :root { --brand-100: #E4ECFD; --brand-300: #A9C2F7; --brand-500: #3A6FF0; --brand-600: #2B58CC; --brand-700: #1F45A8; --brand-900: #10245C; --grad-start: #5B8DF7; --grad-end: #1F45A8; /* Derived brand surfaces — override alongside the palette above. */ --brand-glow: rgba(58,111,240,0.35); /* primary button shadow */ --brand-border: rgba(58,111,240,0.35); /* ghost button border */ --brand-tint: rgba(58,111,240,0.22); /* hero background wash */ --hero-top: #F5F8FF; /* light section wash */ --cta-hover: #EFF4FE; /* white CTA button hover */ --accent-a: #16A34A; --accent-b: #D97706; --accent-c: #7C3AED; --accent-d: #0891B2; --ink-950: #0D1016; --ink-900: #0F172A; --ink-700: #334155; --ink-500: #64748B; --ink-300: #CBD5E1; --ink-100: #F1F5F9; --ink-50: #F8FAFC; --surface: #FFFFFF; --page-bg: #E8E9EB; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 36px; --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.08); --shadow-md: 0 6px 20px rgba(15,23,42,0.08); --shadow-lg: 0 24px 60px rgba(15,23,42,0.18); --content-max: 1160px; --shell-max: 1320px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: var(--ink-900); background: var(--page-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-600); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.06; letter-spacing: -0.025em; margin: 0; } h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 800; text-transform: uppercase; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 800; text-transform: uppercase; } h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; } p { margin: 0 0 1em; color: var(--ink-700); } /* The whole page sits on a rounded white card floating on a grey ground — the signature of this layout. No overflow:hidden here: that would turn the shell into a scroll container and break the sticky header on legal pages. */ .shell { max-width: var(--shell-max); margin: 0 auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(13,16,22,0.10); } @media (min-width: 1400px) { .shell { margin: 24px auto; } } .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 40px; } @media (max-width: 720px) { .container { padding: 0 22px; } } .eyebrow { display: inline-block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-500); margin-bottom: 14px; } /* -------- Buttons -------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: 999px; font-weight: 650; font-size: 0.95rem; transition: transform .12s ease, box-shadow .2s ease, background .2s; text-decoration: none; border: 1px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn svg { width: 17px; height: 17px; flex: none; } .btn--primary { background: var(--brand-500); color: #fff; box-shadow: 0 8px 20px var(--brand-glow); } .btn--primary:hover { background: var(--brand-600); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--brand-700); border-color: var(--brand-border); } .btn--ghost:hover { background: var(--brand-100); } .btn--dark { background: var(--ink-950); color: #fff; } .btn--dark:hover { background: #000; transform: translateY(-1px); } .btn--light { background: #fff; color: var(--ink-950); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .btn--outline-light:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); } .btn--light:hover { background: var(--cta-hover); transform: translateY(-1px); } .btn--lg { padding: 15px 30px; font-size: 1rem; } /* Not-yet-released state: reads as a button, is not a link, cannot be clicked. */ .btn--soon { background: transparent; color: var(--ink-500); border: 1px dashed var(--ink-300); cursor: default; } .btn--soon:hover { transform: none; } .hero .btn--soon, .band .btn--soon { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.35); } /* -------- Header -------- */ .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px; } .nav__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; } .nav__brand:hover { text-decoration: none; } .nav__brand img { border-radius: 8px; } .nav__links { display: flex; gap: 30px; } .nav__links a { font-weight: 500; font-size: 0.92rem; } .nav__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; width: 42px; height: 42px; } .nav__toggle span { display: block; height: 2px; width: 22px; margin: 4px auto; transition: transform .2s, opacity .2s; } /* Dark variant — sits transparently on top of the hero. */ .nav { position: relative; z-index: 30; } .nav .nav__brand { color: #fff; } .nav .nav__links a { color: rgba(255,255,255,0.72); } .nav .nav__links a:hover { color: #fff; text-decoration: none; } .nav .nav__links a[aria-current="page"] { color: #fff; } .nav .nav__toggle span { background: #fff; } /* Light variant — used on the legal pages, where there is no dark hero. */ .nav--light { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(15,23,42,0.07); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .nav--light .nav__brand { color: var(--ink-900); } .nav--light .nav__links a { color: var(--ink-700); } .nav--light .nav__links a[aria-current="page"] { color: var(--brand-700); } .nav--light .nav__toggle span { background: var(--ink-900); } @media (max-width: 900px) { .nav__links { display: none; } .nav__cta { display: none; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; } .nav[data-open="true"] .nav__links, .nav--light[data-open="true"] .nav__links { display: flex; flex-direction: column; gap: 16px; position: absolute; top: 74px; left: 0; right: 0; padding: 22px 30px; z-index: 40; } .nav[data-open="true"] .nav__links { background: var(--ink-950); border-radius: 0 0 var(--radius-md) var(--radius-md); } .nav--light[data-open="true"] .nav__links { background: #fff; box-shadow: var(--shadow-md); border-bottom: 1px solid rgba(15,23,42,0.06); } } /* -------- Hero -------- */ .hero { position: relative; z-index: 1; /* keeps the bleeding product shot above the next section */ background: radial-gradient(900px 520px at 78% 8%, var(--brand-tint), transparent 62%), linear-gradient(158deg, #23262E 0%, var(--ink-950) 62%); color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: 84px; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: start; padding-top: 34px; } .hero .eyebrow { color: rgba(255,255,255,0.62); margin-bottom: 10px; } .hero h1 { color: #fff; max-width: 12ch; } .hero__note { margin: 0; max-width: 42ch; color: rgba(255,255,255,0.62); font-size: 0.92rem; line-height: 1.6; } .hero__lower { margin-top: 42px; } /* Capability chips under the headline. */ .pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.88); font-size: 0.82rem; font-weight: 550; } .pill svg { width: 14px; height: 14px; flex: none; color: var(--brand-300); } /* The app icon, presented as the product shot. */ .hero__stage { position: relative; display: flex; justify-content: center; padding-top: 6px; } .hero__plate { position: relative; padding: 26px; background: linear-gradient(150deg, var(--grad-start) 0%, var(--grad-end) 100%); border-radius: var(--radius-xl); box-shadow: 0 40px 90px rgba(0,0,0,0.45); } .hero__plate img { border-radius: 30px; width: 300px; height: 300px; } /* Lets the product shot break out of the hero into the section below it. */ .hero__stage--bleed { margin-bottom: -110px; } /* Small supporting card beside the product shot. */ .hero__side { margin-top: 26px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: 18px 20px; max-width: 300px; } .hero__side h3 { color: #fff; margin-bottom: 6px; } .hero__side p { margin: 0; color: rgba(255,255,255,0.6); font-size: 0.85rem; line-height: 1.55; } /* Circular badge that overlaps the product shot. */ .badge-round { position: absolute; right: -32px; bottom: -16px; z-index: 5; width: 108px; height: 108px; border-radius: 999px; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff; color: var(--ink-950); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.25; padding: 10px; box-shadow: 0 18px 40px rgba(0,0,0,0.35); transition: transform .15s ease; } a.badge-round:hover { text-decoration: none; transform: scale(1.04); } .badge-round--soon { background: #fff; color: var(--ink-950); border: 0; } @media (max-width: 980px) { .hero { padding-bottom: 56px; } .hero__grid { grid-template-columns: 1fr; gap: 30px; } .hero h1 { max-width: none; } .hero__lower { margin-top: 28px; } .hero__stage { order: -1; justify-content: flex-start; } .hero__stage--bleed { margin-bottom: 0; } .hero__plate img { width: 190px; height: 190px; } .badge-round { width: 84px; height: 84px; font-size: 0.62rem; right: -18px; bottom: -12px; } .hero__side { max-width: none; } } /* -------- Sections -------- */ .section { padding: 96px 0; } .section--alt { background: var(--ink-50); } .section--tight { padding-top: 40px; } /* First section under the hero: leaves room for the product shot bleeding in. */ .section--after-hero { padding-top: 116px; } @media (max-width: 980px) { .section--after-hero { padding-top: 76px; } } .section__head { max-width: 640px; margin: 0 0 44px; } .section__head--center { margin-left: auto; margin-right: auto; text-align: center; } .section__sub { color: var(--ink-500); margin: 14px 0 0; } /* -------- Discover row: heading | figure | copy -------- */ .discover { display: grid; grid-template-columns: 1.1fr 0.8fr 1.1fr; gap: 40px; align-items: start; } .discover h2 { max-width: 14ch; } .discover__copy { color: var(--ink-700); font-size: 0.98rem; } .stat { text-align: center; } .stat__value { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--brand-600); line-height: 1; } .stat__label { margin: 8px 0 0; color: var(--ink-700); font-size: 0.92rem; font-weight: 550; } .stat__note { margin: 4px 0 0; color: var(--ink-500); font-size: 0.8rem; } @media (max-width: 900px) { .discover { grid-template-columns: 1fr; gap: 26px; } .discover h2 { max-width: none; } .stat { text-align: left; } } /* -------- Bento feature grid -------- */ .bento { display: grid; grid-template-columns: 0.85fr 1.15fr 1.15fr; gap: 20px; align-items: stretch; } .bento__figure { grid-row: span 2; display: flex; align-items: center; justify-content: center; background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: 30px; } .bento__figure img { width: 100%; max-width: 210px; border-radius: 24px; } .card { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .card > h3 { margin-bottom: 8px; } .card > p:last-child { margin-bottom: 0; } .card p { color: var(--ink-700); font-size: 0.92rem; } .feature__icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; } .feature__icon svg { width: 20px; height: 20px; } .feature__icon--a { background: var(--accent-a); } .feature__icon--b { background: var(--accent-b); } .feature__icon--c { background: var(--accent-c); } .feature__icon--d { background: var(--accent-d); } .feature__icon--brand { background: var(--brand-500); } /* Accent tile that stands in for the reference layout's lifestyle photo. */ .tile { border-radius: var(--radius-md); padding: 26px; background: linear-gradient(150deg, var(--grad-start) 0%, var(--grad-end) 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between; } .tile h3 { color: #fff; } .tile p { color: rgba(255,255,255,0.82); font-size: 0.92rem; margin: 8px 0 0; } .tile__big { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; } /* Three equal cards — used where there is no figure cell to anchor the row. */ .trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } @media (max-width: 900px) { .trio { grid-template-columns: 1fr; } } @media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .bento__figure { grid-row: auto; grid-column: 1 / -1; } .bento__figure img { max-width: 170px; } } @media (max-width: 620px) { .bento { grid-template-columns: 1fr; } } /* -------- Showcase panel: gallery | spec sheet -------- */ .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .showcase__media { display: flex; gap: 20px; align-items: center; } .showcase__stage { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--ink-50); border-radius: var(--radius-lg); padding: 34px; min-height: 340px; } .showcase__stage img { max-height: 460px; width: auto; border-radius: 18px; } .showcase__stage--plain { background: none; padding: 0; } /* Thumbnail rail — only rendered when an app actually has screenshots. */ .rail { display: flex; flex-direction: column; gap: 12px; } .rail button { width: 54px; padding: 0; border: 1px solid var(--ink-100); background: var(--surface); border-radius: 12px; overflow: hidden; cursor: pointer; line-height: 0; transition: border-color .15s ease, transform .15s ease; } .rail button:hover { transform: translateY(-1px); } .rail button[aria-current="true"] { border-color: var(--brand-500); border-width: 2px; } .rail img { width: 100%; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: var(--brand-100); color: var(--brand-700); font-size: 0.78rem; font-weight: 650; margin-bottom: 18px; } .chip svg { width: 14px; height: 14px; } .chip--muted { background: var(--ink-100); color: var(--ink-700); } .showcase h2 { margin-bottom: 14px; } .showcase__lede { color: var(--ink-700); } .spec { list-style: none; margin: 26px 0; padding: 0; } .spec li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--ink-100); font-size: 0.92rem; } .spec li:first-child { border-top: 1px solid var(--ink-100); } .spec dt, .spec__key { color: var(--ink-500); } .spec__val { color: var(--ink-900); font-weight: 600; text-align: right; } .price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 22px; } .price__value { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink-950); } .price__note { color: var(--ink-500); font-size: 0.88rem; } @media (max-width: 980px) { .showcase { grid-template-columns: 1fr; gap: 34px; } .showcase__stage { min-height: 0; padding: 24px; } .showcase__stage img { max-height: 340px; } } @media (max-width: 560px) { .showcase__media { flex-direction: column-reverse; align-items: stretch; } .rail { flex-direction: row; overflow-x: auto; padding-bottom: 4px; } .rail button { width: 56px; flex: none; } } /* -------- Commitments / quotes -------- */ .quotes { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; align-items: stretch; } .quote { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: 26px; display: flex; flex-direction: column; } .quote--lead { border-color: var(--brand-300); } .quote__text { font-size: 1rem; color: var(--ink-900); margin: 0 0 auto; } .quote--lead .quote__text { font-size: 1.08rem; } .quote__text em { font-style: normal; color: var(--brand-600); font-weight: 650; } .quote__foot { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ink-100); } .quote__mark { width: 38px; height: 38px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--brand-700); } .quote__mark svg { width: 18px; height: 18px; } .quote__who { margin: 0; font-size: 0.88rem; font-weight: 650; color: var(--ink-900); } .quote__meta { margin: 0; font-size: 0.78rem; color: var(--ink-500); } @media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } } /* -------- Dark CTA band -------- */ .band { position: relative; overflow: hidden; background: radial-gradient(700px 400px at 88% 20%, var(--brand-tint), transparent 62%), linear-gradient(158deg, #23262E 0%, var(--ink-950) 65%); color: #fff; } .band__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; padding: 72px 0; } .band h2 { color: #fff; } .band p { color: rgba(255,255,255,0.68); max-width: 46ch; margin: 16px 0 26px; } .band__actions { display: flex; flex-wrap: wrap; gap: 12px; } .band__art { display: flex; justify-content: flex-end; } .band__art img { width: 190px; border-radius: 28px; opacity: 0.95; } @media (max-width: 900px) { .band__inner { grid-template-columns: 1fr; padding: 56px 0; } .band__art { display: none; } } /* -------- Footer -------- */ .footer { background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 60px 0 32px; border-top: 1px solid var(--ink-100); } .footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 36px; align-items: start; } .footer__col h4 { margin: 0 0 14px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-900); } .footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .footer__col a { color: var(--ink-500); font-size: 0.9rem; } .footer__col a:hover { color: var(--ink-900); text-decoration: none; } .footer__top { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-500); font-size: 0.74rem; } .footer__top a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--ink-300); color: var(--ink-700); } .footer__top a:hover { border-color: var(--ink-900); color: var(--ink-900); text-decoration: none; } .footer__top svg { width: 16px; height: 16px; } .footer__end { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink-100); } .footer__word { text-align: right; } .footer__word strong { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink-950); line-height: 1; } .footer__word span { font-size: 0.86rem; color: var(--ink-500); } .footer__copy { margin: 0; color: var(--ink-500); font-size: 0.82rem; } @media (max-width: 820px) { .footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); } .footer__top { grid-column: 1 / -1; align-items: flex-start; } .footer__end { flex-direction: column; align-items: flex-start; } .footer__word { text-align: left; } } /* -------- FAQ -------- */ .faq { max-width: 780px; } .faq__item { padding: 22px 0; border-bottom: 1px solid var(--ink-100); } .faq__item:last-child { border-bottom: 0; } .faq__item dt { font-weight: 650; color: var(--ink-900); margin-bottom: 6px; } .faq__item dd { margin: 0; color: var(--ink-700); font-size: 0.95rem; } /* -------- Checklists -------- */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .checks li { position: relative; padding-left: 28px; color: var(--ink-700); font-size: 0.93rem; } .checks li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; background: var(--brand-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } /* -------- Before / after demo pair -------- */ .ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; } .ba__box { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); } .ba__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px; } .ba__text { margin: 0; font-size: 0.98rem; color: var(--ink-900); } .ba__box--after { border-color: var(--brand-300); } .ba__box--after .ba__label { color: var(--brand-700); } .ba__arrow { color: var(--brand-500); font-size: 1.6rem; font-weight: 700; } @media (max-width: 720px) { .ba { grid-template-columns: 1fr; } .ba__arrow { transform: rotate(90deg); justify-self: center; } } /* -------- Legal pages -------- */ .legal { padding: 56px 0 96px; } .legal__inner { max-width: 820px; margin: 0 auto; } .legal__head { padding-bottom: 28px; border-bottom: 1px solid var(--ink-100); margin-bottom: 28px; } .legal__meta { color: var(--ink-500); font-size: 0.9rem; } .legal h1 { text-transform: none; letter-spacing: -0.03em; } .legal h2 { margin: 32px 0 10px; text-transform: none; font-size: clamp(1.3rem, 2.2vw, 1.6rem); } .legal h3 { margin: 20px 0 6px; } .legal ul { padding-left: 22px; } .legal ul li { margin: 6px 0; color: var(--ink-700); } .legal ol { padding-left: 22px; } .legal ol li { margin: 8px 0; color: var(--ink-700); } .legal code { background: var(--ink-100); padding: 2px 6px; border-radius: 6px; font-size: 0.85em; } .legal__callout { border-left: 4px solid var(--brand-500); background: var(--brand-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 20px; margin: 16px 0 20px; } .legal__callout p:last-child { margin-bottom: 0; } .legal__table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 0.95rem; } .legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--ink-100); } .legal__table th { background: var(--ink-50); font-weight: 600; } @media (max-width: 640px) { .legal__table, .legal__table thead, .legal__table tbody, .legal__table th, .legal__table td, .legal__table tr { display: block; } .legal__table thead { display: none; } .legal__table tr { border-bottom: 1px solid var(--ink-100); padding: 8px 0; } .legal__table td { border-bottom: 0; padding: 4px 0; } .legal__table td:last-child { color: var(--ink-500); font-size: 0.85rem; } } /* Panels that would otherwise disappear against the tinted section background. */ .section--alt .showcase__stage, .section--alt .bento__figure { background: var(--surface); }