/* ============================================================================= ultra-blog.css — design system for /blog and /blog/
Written to the same rules as 6options/ultra.css: light everywhere, one violet accent per screen, nothing shouts except a single element. A blog earns trust by looking like it was edited, not like it was themed — so the reading column gets the attention and the furniture around it stays quiet. Loaded absolutely (/blog/ultra-blog.css) from both /blog and /blog/, because /blog is a rewrite and relative paths resolve against the wrong base. ============================================================================= */ :root { --ink: #0f172a; --muted: #55617a; --soft: #8b90a3; --line: #ece7fa; --hair: #eef0f6; --violet: #7c3aed; --violet-d: #5b21b6; --band: #fbfaff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Heebo", "Assistant", system-ui, sans-serif; } /* The accessibility widget parks its launcher off-canvas; in RTL that alone creates a horizontal scrollbar unless the clip sits on too. It must be `clip` and not `hidden`. `overflow: hidden` turns the element into a scroll container, and that silently disables `position: sticky` for every descendant — which is what the table of contents rail depends on. `clip` crops identically without creating a scrollport. The `hidden` line stays as the fallback for browsers without `clip`; they lose the sticky rail and keep a working page. */ html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; } body { background: #fff; color: var(--ink); overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; } img { max-width: 100%; display: block; } a { color: var(--violet); } .b-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* Skip link — the header is injected by JS, so keyboard users otherwise tab through the whole nav on every article. */ .b-skip { position: absolute; right: -9999px; top: 0; z-index: 999; background: #fff; color: var(--violet-d); font-weight: 800; padding: 12px 20px; border-radius: 0 0 12px 0; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12); } .b-skip:focus { right: 0; } /* Available to screen readers, never painted. */ .b-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* =========================================================================== Masthead — shared by the index and the article =========================================================================== */ /* Measured on top of the 72px spacer #headerContainer leaves in the flow — see the note on .b-article. A hero earns more air than an article, not four times as much. */ .b-masthead { position: relative; padding: 48px 24px 0; max-width: 1180px; margin: 0 auto; } .b-masthead-panel { position: relative; overflow: hidden; border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(80% 60% at 85% -10%, rgba(139, 92, 246, 0.15), transparent 60%), radial-gradient(70% 60% at 10% 0%, rgba(236, 72, 153, 0.08), transparent 60%), linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%); padding: 56px 48px 50px; text-align: center; box-shadow: 0 30px 70px rgba(76, 29, 149, 0.07); } .b-masthead-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(124, 58, 237, 0.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); pointer-events: none; } .b-masthead-inner { position: relative; z-index: 1; } .b-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 800; color: var(--violet-d); background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.22); padding: 7px 16px; border-radius: 100px; margin-bottom: 20px; } .b-h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 16px; } .b-grad { background: linear-gradient(90deg, #7c3aed, #c026d3); -webkit-background-clip: text; background-clip: text; color: transparent; } .b-lead { font-size: clamp(1rem, 2.1vw, 1.14rem); line-height: 1.8; color: var(--muted); max-width: 44rem; margin: 0 auto; } /* =========================================================================== Index — featured article =========================================================================== */ .b-section { padding: 64px 0 0; } .b-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .b-h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; } .b-section-note { font-size: 0.9rem; color: var(--soft); } .b-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .b-feature:hover { transform: translateY(-4px); border-color: #d6c9fb; box-shadow: 0 24px 56px rgba(76, 29, 149, 0.12); } .b-feature-art { position: relative; min-height: 340px; background: linear-gradient(135deg, #f5f3ff, #ede9fe); } .b-feature-art img { width: 100%; height: 100%; object-fit: cover; } .b-feature-body { padding: 42px 40px; display: flex; flex-direction: column; justify-content: center; } .b-tag { display: inline-flex; align-items: center; width: -moz-fit-content; width: fit-content; font-size: 0.78rem; font-weight: 800; color: var(--violet-d); background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); padding: 5px 13px; border-radius: 100px; margin-bottom: 15px; } .b-feature-body h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 800; line-height: 1.28; letter-spacing: -0.015em; margin-bottom: 13px; } .b-feature-body p { color: var(--muted); line-height: 1.8; font-size: 1rem; margin-bottom: 20px; } .b-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.85rem; color: var(--soft); font-weight: 500; } .b-meta span { display: inline-flex; align-items: center; gap: 6px; } .b-more { margin-top: 20px; font-weight: 800; color: var(--violet); font-size: 0.93rem; display: inline-flex; align-items: center; gap: 7px; } .b-more i { transition: transform 0.3s ease; font-style: normal; } .b-feature:hover .b-more i, .b-card:hover .b-more i { transform: translateX(-4px); } /* =========================================================================== Index — article grid =========================================================================== */ .b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .b-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .b-card:hover { transform: translateY(-4px); border-color: #d6c9fb; box-shadow: 0 18px 44px rgba(76, 29, 149, 0.1); } .b-card-art { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #f5f3ff, #ede9fe); } .b-card-art img { width: 100%; height: 100%; object-fit: cover; } .b-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .b-card-body h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.4; margin-bottom: 9px; } .b-card-body p { color: var(--muted); font-size: 0.92rem; line-height: 1.7; margin-bottom: 16px; flex: 1; } /* =========================================================================== Index — "what Ultrads does" internal-link band =========================================================================== */ .b-links { margin: 72px 0 0; padding: 40px; border: 1px solid var(--line); border-radius: 26px; background: var(--band); } .b-links h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; } .b-links > p { color: var(--muted); font-size: 0.95rem; line-height: 1.75; margin-bottom: 24px; max-width: 46rem; } .b-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .b-links-grid a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .b-links-grid a:hover { border-color: #d6c9fb; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(76, 29, 149, 0.08); } .b-links-grid strong { display: block; font-size: 0.98rem; font-weight: 800; color: var(--violet-d); margin-bottom: 5px; } .b-links-grid span { font-size: 0.88rem; color: var(--muted); line-height: 1.6; } /* =========================================================================== Newsletter =========================================================================== */ .b-news { margin: 24px 0 90px; padding: 38px 40px; border: 1px solid var(--line); border-radius: 26px; background: #fff; display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; } .b-news h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 7px; } .b-news p { color: var(--muted); font-size: 0.94rem; line-height: 1.7; } .b-news-form { display: flex; gap: 10px; } .b-news-form input { flex: 1; min-width: 0; border: 1.5px solid #dfe2ee; border-radius: 13px; padding: 12px 15px; font-size: 0.96rem; color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .b-news-form input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.13); } .b-news-form button { border: none; cursor: pointer; font-size: 0.96rem; font-weight: 800; padding: 12px 22px; border-radius: 13px; color: #fff; white-space: nowrap; background: linear-gradient(180deg, #8b5cf6, #6d28d9); box-shadow: 0 10px 22px -8px rgba(109, 40, 217, 0.55); transition: transform 0.18s ease; } .b-news-form button:hover:not(:disabled) { transform: translateY(-2px); } .b-news-form button:disabled { opacity: 0.6; cursor: wait; } .b-news-status { grid-column: 1 / -1; min-height: 1.1em; font-size: 0.9rem; font-weight: 600; } /* =========================================================================== Article page =========================================================================== */ .b-progress { position: fixed; top: 0; right: 0; height: 3px; width: 0; z-index: 60; background: linear-gradient(90deg, #c026d3, #7c3aed); transition: width 0.1s linear; } /* #headerContainer keeps a 72px spacer in the flow even though the
inside it is fixed, so this padding is measured on top of that, not from the viewport. 32 here puts ~30px of air under the header — enough to separate them, little enough that the article still starts on the first screen. */ .b-article { max-width: 1180px; margin: 0 auto; padding: 32px 24px 0; } /* Everything above the body — breadcrumb, title, byline, lead image — sits in one tinted panel. Left as bare text on white it read as page furniture that happened to be stranded above the article rather than as the article's own opening, and the gap under the fixed header looked like a loading error. */ .b-article-head { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: radial-gradient(70% 70% at 88% -8%, rgba(139, 92, 246, 0.14), transparent 62%), radial-gradient(60% 60% at 6% 0%, rgba(236, 72, 153, 0.07), transparent 62%), linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%); padding: 36px 40px 40px; margin-bottom: 46px; box-shadow: 0 24px 60px rgba(76, 29, 149, 0.06); } .b-article-head::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(124, 58, 237, 0.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(75% 55% at 70% 0%, #000, transparent 78%); mask-image: radial-gradient(75% 55% at 70% 0%, #000, transparent 78%); pointer-events: none; } .b-article-head > * { position: relative; z-index: 1; } .b-crumb { font-size: 0.88rem; color: var(--soft); margin-bottom: 16px; } .b-crumb a { color: var(--violet); text-decoration: none; font-weight: 600; } .b-crumb a:hover { text-decoration: underline; } .b-title { font-size: clamp(1.75rem, 4.4vw, 2.7rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.022em; margin-bottom: 18px; /* Wide enough that a headline fills the panel instead of stacking into a narrow tower against the right edge, tight enough to stay a headline. */ max-width: 32ch; } .b-byline { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.88rem; color: var(--soft); padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 26px; } .b-byline span { display: inline-flex; align-items: center; gap: 6px; } .b-byline .b-updated { color: var(--violet-d); font-weight: 700; } .b-hero-img { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 2 / 1; background: linear-gradient(135deg, #f5f3ff, #ede9fe); } .b-hero-img img { width: 100%; height: 100%; object-fit: cover; } /* Two columns: reading measure + sticky table of contents */ .b-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 56px; align-items: start; } /* A grid track sized `1fr` still refuses to shrink below its content's min-content width. The pricing tables carry `min-width: 520px`, so without this the column inflates to 520px inside a 400px phone and the table gets clipped by the overflow rule instead of scrolling inside its own box. */ .b-layout > * { min-width: 0; } /* --- the answer box: this is what Google lifts for a featured snippet, so it sits above everything and states the answer in its first sentence ------ */ .b-answer { border: 1px solid rgba(139, 92, 246, 0.28); border-radius: 20px; background: linear-gradient(180deg, #fdfcff, #f8f5ff); padding: 26px 28px; margin-bottom: 40px; } .b-answer h2 { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; color: var(--violet-d); margin-bottom: 10px; border: 0; padding: 0; } .b-answer p { font-size: 1.06rem; line-height: 1.85; color: #1e293b; margin: 0; } /* --- key takeaways ------------------------------------------------------- Sits between the answer box and the body. Readers who bounce after 15 seconds still leave with the article's substance, and it gives the page a compact list of self-contained claims — the shape AI answer engines quote. */ .b-takeaways { border: 1px solid var(--line); border-radius: 20px; background: var(--band); padding: 24px 28px 26px; margin-bottom: 40px; } .b-takeaways h2 { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; color: var(--soft); margin-bottom: 14px; } .b-takeaways ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .b-takeaways li { position: relative; padding-right: 28px; font-size: 1rem; line-height: 1.75; color: #22304a; } .b-takeaways li::before { content: ""; position: absolute; right: 6px; top: 0.6em; width: 8px; height: 8px; border-radius: 3px; background: #a78bfa; } .b-takeaways strong { font-weight: 800; color: var(--ink); } /* --- body copy ----------------------------------------------------------- */ .b-body { font-size: 1.08rem; line-height: 1.9; color: #22304a; } .b-body h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 800; color: var(--ink); line-height: 1.32; letter-spacing: -0.015em; margin: 52px 0 18px; padding-right: 15px; border-right: 4px solid var(--violet); scroll-margin-top: 96px; } .b-body h3 { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin: 34px 0 12px; scroll-margin-top: 96px; } .b-body p { margin-bottom: 22px; } .b-body a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(124, 58, 237, 0.35); } .b-body a:hover { text-decoration-color: var(--violet); } .b-body strong { font-weight: 800; color: var(--ink); } .b-body ul, .b-body ol { margin: 0 0 24px; padding-right: 4px; list-style: none; counter-reset: b-ol; } .b-body li { position: relative; padding-right: 30px; margin-bottom: 13px; line-height: 1.85; } .b-body ul > li::before { content: ""; position: absolute; right: 8px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: #c4b5fd; } .b-body ol > li { counter-increment: b-ol; padding-right: 38px; } .b-body ol > li::before { content: counter(b-ol); position: absolute; right: 0; top: 0.28em; width: 25px; height: 25px; border-radius: 9px; background: rgba(139, 92, 246, 0.11); color: var(--violet-d); font-size: 0.82rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .b-body blockquote { margin: 32px 0; padding: 24px 28px; border: 1px solid var(--line); border-right: 4px solid var(--violet); border-radius: 16px; background: var(--band); } .b-body blockquote p { margin-bottom: 12px; font-size: 1.02rem; } .b-body blockquote p:last-child { margin-bottom: 0; } /* Tables carry the pricing data, which is the reason people land here. They must survive a phone: the wrapper scrolls, never the page. */ .b-table-scroll { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; -webkit-overflow-scrolling: touch; } .b-body table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95rem; } .b-body caption { caption-side: top; text-align: right; padding: 16px 20px 12px; font-size: 0.86rem; font-weight: 700; color: var(--soft); } .b-body th, .b-body td { padding: 13px 18px; text-align: right; border-bottom: 1px solid var(--hair); } .b-body thead th { background: var(--band); font-weight: 800; color: var(--ink); font-size: 0.88rem; white-space: nowrap; } .b-body tbody tr:last-child td { border-bottom: none; } .b-body tbody tr:hover td { background: #fcfbff; } .b-body td:first-child { font-weight: 700; color: var(--ink); } /* --- table of contents --------------------------------------------------- */ .b-toc { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 20px; background: var(--band); } .b-toc h2 { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; color: var(--soft); margin-bottom: 13px; } .b-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; } .b-toc a { display: block; padding: 7px 11px; border-radius: 10px; font-size: 0.89rem; line-height: 1.5; font-weight: 600; color: var(--muted); text-decoration: none; border-right: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } .b-toc a:hover { background: #fff; color: var(--violet-d); } .b-toc a.is-active { background: #fff; color: var(--violet-d); border-right-color: var(--violet); } /* --- FAQ ----------------------------------------------------------------- */ .b-faq { margin-top: 56px; } .b-faq > h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 800; line-height: 1.32; margin-bottom: 20px; padding-right: 15px; border-right: 4px solid var(--violet); scroll-margin-top: 96px; } .b-faq details { border: 1px solid var(--line); border-radius: 16px; background: #fff; margin-bottom: 11px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .b-faq details[open] { border-color: #d6c9fb; box-shadow: 0 10px 26px rgba(76, 29, 149, 0.07); } .b-faq summary { cursor: pointer; list-style: none; padding: 17px 22px; font-size: 1rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .b-faq summary::-webkit-details-marker { display: none; } .b-faq summary::after { content: "+"; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; background: rgba(139, 92, 246, 0.1); color: var(--violet-d); font-size: 1.05rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .b-faq details[open] summary::after { content: "−"; } .b-faq .b-faq-a { padding: 0 22px 19px; color: var(--muted); line-height: 1.85; font-size: 0.98rem; } /* --- author / CTA / related ---------------------------------------------- */ .b-author { margin-top: 48px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--band); display: flex; gap: 16px; align-items: center; } .b-author img { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 6px; } .b-author b { display: block; font-size: 0.98rem; font-weight: 800; margin-bottom: 3px; } .b-author p { font-size: 0.89rem; color: var(--muted); line-height: 1.65; } .b-cta { margin-top: 44px; padding: 36px 38px; border-radius: 24px; border: 1px solid rgba(139, 92, 246, 0.26); background: radial-gradient(70% 100% at 88% 0%, rgba(139, 92, 246, 0.13), transparent 62%), linear-gradient(180deg, #ffffff, #fbf9ff); text-align: center; } .b-cta h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 11px; border: 0; padding: 0; } .b-cta p { color: var(--muted); line-height: 1.8; font-size: 0.99rem; max-width: 40rem; margin: 0 auto 22px; } .b-cta a { display: inline-block; background: linear-gradient(180deg, #8b5cf6, #6d28d9); color: #fff; font-weight: 800; font-size: 1rem; padding: 14px 32px; border-radius: 15px; text-decoration: none; box-shadow: 0 12px 26px -8px rgba(109, 40, 217, 0.55); transition: transform 0.18s ease; } .b-cta a:hover { transform: translateY(-2px); } .b-related { margin: 56px 0 90px; } .b-related h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 16px; } .b-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .b-related-grid a { display: block; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; text-decoration: none; color: inherit; background: #fff; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .b-related-grid a:hover { border-color: #d6c9fb; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(76, 29, 149, 0.08); } .b-related-grid strong { display: block; font-size: 0.97rem; font-weight: 800; color: var(--violet-d); margin-bottom: 5px; } .b-related-grid span { font-size: 0.87rem; color: var(--muted); line-height: 1.6; } /* --- share --------------------------------------------------------------- */ .b-share { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .b-share b { font-size: 0.92rem; font-weight: 800; margin-left: 4px; } .b-share button { background: #fff; border: 1px solid #e4e7f0; color: var(--muted); font-size: 0.89rem; font-weight: 700; padding: 9px 17px; border-radius: 12px; cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.2s; } .b-share button:hover { border-color: #c4b5fd; color: var(--violet-d); transform: translateY(-1px); } /* =========================================================================== Responsive =========================================================================== */ @media (max-width: 1000px) { .b-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } /* The TOC stops being a rail and becomes a collapsed block above the text. */ .b-toc { position: static; margin-bottom: 34px; order: -1; } .b-grid, .b-links-grid, .b-related-grid { grid-template-columns: repeat(2, 1fr); } .b-feature { grid-template-columns: 1fr; } .b-feature-art { min-height: 0; aspect-ratio: 16 / 9; } .b-news { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 720px) { .b-masthead { padding: 30px 16px 0; } .b-masthead-panel { padding: 38px 22px 34px; border-radius: 24px; } .b-wrap { padding: 0 16px; } .b-article { padding: 22px 16px 0; } .b-grid, .b-links-grid, .b-related-grid { grid-template-columns: 1fr; } .b-feature-body { padding: 26px 22px 28px; } .b-links, .b-news, .b-cta { padding: 26px 22px; } .b-body { font-size: 1.02rem; } .b-answer { padding: 20px 20px; } .b-answer p { font-size: 1rem; } .b-article-head { padding: 24px 20px 26px; border-radius: 22px; margin-bottom: 32px; } .b-hero-img { border-radius: 14px; } /* Tighter cells so the pricing tables need as little sideways scrolling as possible — they are the reason most readers open this page. */ .b-body table { min-width: 460px; font-size: 0.87rem; } .b-body th, .b-body td { padding: 11px 12px; } .b-body caption { padding: 13px 14px 10px; font-size: 0.8rem; } .b-news-form { flex-direction: column; } .b-share button { flex: 1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }