/* seamcal.com shared styles: theme tokens (light = design D, dark = design E), header, footer, buttons, pricing, FAQ, chat widget, and the layouts of the SEO, help, legal and status pages. Theme follows the OS unless the visitor picks one (data-theme on , saved by js/site.js). */ :root { --bg: #FAFAF7; --surface: #FFFFFF; --ink: #15171C; --muted: #5B616E; --line: #E4E4DE; --accent: #1F5FD6; --accent-hover: #1747A6; --btn: #1F5FD6; --btn-ink: #FFFFFF; --btn2-bg: #FFFFFF; --btn2-ink: #15171C; --btn2-line: #C9CDD4; --nav-btn: #15171C; --nav-btn-ink: #FFFFFF; --band: #15171C; --band-line: transparent; --band-ink: #FFFFFF; --band-muted: #B9BCC4; --band-sub: #22252C; --band-warm: #F2B46B; --cta-band: #EEF3FC; --step-dim: #6B717C; --feed-hl: #F2F6FD; --shadow: rgba(21,23,28,0.3); --dot-google: #1A73E8; --dot-apple: #FF3B30; --cable: #E1E4EA; --port: #FFFFFF; --port-line: #C9CDD4; --flow-work: #1A73E8; --flow-private: #AF52DE; --g-bg: #FFFFFF; --g-line: #DADCE0; --g-chrome: #F1F3F4; --g-dot: #DADCE0; --g-text: #3C4043; --g-muted: #70757A; --g-grid: #ECEDEF; --g-create: #FFFFFF; --g-create-shadow: 0 1px 3px rgba(60,64,67,0.3), 0 1px 1px rgba(60,64,67,0.15); --g-plus: #1A73E8; --g-today: #1A73E8; --g-today-ink: #FFFFFF; --g-kick: #1A73E8; --g-kick-ink: #FFFFFF; --g-busy-a: #E8EAED; --g-busy-b: #F1F3F4; --g-busy-line: #BDC1C6; --g-busy-ink: #3C4043; --g-shadow: rgba(60,64,67,0.35); --i-frame: #1C1C1E; --i-frame-line: transparent; --i-screen: #FFFFFF; --i-text: #1C1C1E; --i-muted: #8E8E93; --i-sep: #E5E5EA; --i-red: #FF3B30; --i-blue-bg: #DCEBFE; --i-blue-bar: #007AFF; --i-blue-ink: #0A3D7A; --i-orange-bg: #FFEBD6; --i-orange-bar: #FF9500; --i-orange-ink: #7A4100; --i-purple-bg: #F2E3FA; --i-purple-bar: #AF52DE; --i-purple-ink: #5A1D7A; --tag-bg: #15171C; --tag-ink: #FFFFFF; --n-bg: rgba(255,255,255,0.82); --n-line: rgba(21,23,28,0.06); --n-ink: #15171C; --n-muted: #6B707A; --n-shadow: 0 18px 40px -16px rgba(21,23,28,0.28), 0 2px 6px rgba(21,23,28,0.06); --ok: #34C759; --feed-ic1: #E8F0FE; --feed-ic1-ink: #1A73E8; --feed-ic2: #EEF2F8; --feed-ic2-ink: #2E5C97; --feed-ic3: #F1F2F4; --feed-ic3-ink: #6B707A; --logo-a: #2E5C97; --logo-b: #6F7B84; --logo-gold: #B9832E; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1115; --surface: #171A20; --ink: #ECEEF2; --muted: #A3A9B4; --line: #262A33; --accent: #8CB0FF; --accent-hover: #B5CCFF; --btn: #2F6BEA; --btn-ink: #FFFFFF; --btn2-bg: #171A20; --btn2-ink: #ECEEF2; --btn2-line: #3A3F4A; --nav-btn: #ECEEF2; --nav-btn-ink: #0F1115; --band: #181B22; --band-line: #262A33; --band-sub: #232730; --cta-band: #151E33; --step-dim: #8A909B; --feed-hl: #1B2436; --shadow: rgba(0,0,0,0.7); --dot-google: #8AB4F8; --dot-apple: #FF453A; --cable: #343945; --port: #0F1115; --port-line: #5A606B; --flow-work: #8AB4F8; --flow-private: #BF5AF2; --g-bg: #202124; --g-line: #3C4043; --g-chrome: #2B2C2F; --g-dot: #4A4D52; --g-text: #E8EAED; --g-muted: #9AA0A6; --g-grid: #2F3033; --g-create: #303134; --g-create-shadow: 0 1px 3px rgba(0,0,0,0.5); --g-plus: #8AB4F8; --g-today: #8AB4F8; --g-today-ink: #202124; --g-kick: #8AB4F8; --g-kick-ink: #202124; --g-busy-a: #3C4043; --g-busy-b: #303134; --g-busy-line: #5F6368; --g-busy-ink: #E8EAED; --g-shadow: rgba(0,0,0,0.7); --i-frame-line: #3A3A3C; --i-screen: #000000; --i-text: #FFFFFF; --i-sep: #38383A; --i-red: #FF453A; --i-blue-bg: rgba(10,132,255,0.26); --i-blue-bar: #0A84FF; --i-blue-ink: #A8D1FF; --i-orange-bg: rgba(255,159,10,0.24); --i-orange-bar: #FF9F0A; --i-orange-ink: #FFCF94; --i-purple-bg: rgba(191,90,242,0.28); --i-purple-bar: #BF5AF2; --i-purple-ink: #E6BEFF; --tag-bg: #E8EAED; --tag-ink: #202124; --n-bg: rgba(44,44,46,0.8); --n-line: rgba(255,255,255,0.08); --n-ink: #FFFFFF; --n-muted: #AEB2BA; --n-shadow: 0 22px 48px -16px rgba(0,0,0,0.7); --ok: #30D158; --feed-ic1: #1D2A44; --feed-ic1-ink: #8AB4F8; --feed-ic2: #222834; --feed-ic2-ink: #8CB0FF; --feed-ic3: #262A31; --feed-ic3-ink: #AEB2BA; --logo-a: #7FADE6; --logo-b: #9AA6AC; --logo-gold: #E0AE5C; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0F1115; --surface: #171A20; --ink: #ECEEF2; --muted: #A3A9B4; --line: #262A33; --accent: #8CB0FF; --accent-hover: #B5CCFF; --btn: #2F6BEA; --btn-ink: #FFFFFF; --btn2-bg: #171A20; --btn2-ink: #ECEEF2; --btn2-line: #3A3F4A; --nav-btn: #ECEEF2; --nav-btn-ink: #0F1115; --band: #181B22; --band-line: #262A33; --band-sub: #232730; --cta-band: #151E33; --step-dim: #8A909B; --feed-hl: #1B2436; --shadow: rgba(0,0,0,0.7); --dot-google: #8AB4F8; --dot-apple: #FF453A; --cable: #343945; --port: #0F1115; --port-line: #5A606B; --flow-work: #8AB4F8; --flow-private: #BF5AF2; --g-bg: #202124; --g-line: #3C4043; --g-chrome: #2B2C2F; --g-dot: #4A4D52; --g-text: #E8EAED; --g-muted: #9AA0A6; --g-grid: #2F3033; --g-create: #303134; --g-create-shadow: 0 1px 3px rgba(0,0,0,0.5); --g-plus: #8AB4F8; --g-today: #8AB4F8; --g-today-ink: #202124; --g-kick: #8AB4F8; --g-kick-ink: #202124; --g-busy-a: #3C4043; --g-busy-b: #303134; --g-busy-line: #5F6368; --g-busy-ink: #E8EAED; --g-shadow: rgba(0,0,0,0.7); --i-frame-line: #3A3A3C; --i-screen: #000000; --i-text: #FFFFFF; --i-sep: #38383A; --i-red: #FF453A; --i-blue-bg: rgba(10,132,255,0.26); --i-blue-bar: #0A84FF; --i-blue-ink: #A8D1FF; --i-orange-bg: rgba(255,159,10,0.24); --i-orange-bar: #FF9F0A; --i-orange-ink: #FFCF94; --i-purple-bg: rgba(191,90,242,0.28); --i-purple-bar: #BF5AF2; --i-purple-ink: #E6BEFF; --tag-bg: #E8EAED; --tag-ink: #202124; --n-bg: rgba(44,44,46,0.8); --n-line: rgba(255,255,255,0.08); --n-ink: #FFFFFF; --n-muted: #AEB2BA; --n-shadow: 0 22px 48px -16px rgba(0,0,0,0.7); --ok: #30D158; --feed-ic1: #1D2A44; --feed-ic1-ink: #8AB4F8; --feed-ic2: #222834; --feed-ic2-ink: #8CB0FF; --feed-ic3: #262A31; --feed-ic3-ink: #AEB2BA; --logo-a: #7FADE6; --logo-b: #9AA6AC; --logo-gold: #E0AE5C; color-scheme: dark; } /* consent-banner.js is shared with the SEO pages and reads their token names. */ :root { --canvas-raised: var(--surface); --line-strong: var(--btn2-line); --thread: var(--btn); } /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } h1, h2, h3, p { margin: 0; } .serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; } .em { font-style: italic; color: var(--accent); } .wrap { max-width: 1440px; margin: 0 auto; padding: 0 96px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 17px; text-decoration: none; transition: filter .15s ease; } .btn:hover { color: var(--btn-ink); filter: brightness(1.08); } .btn--lg { min-height: 58px; padding: 0 30px; } .btn--ghost { background: var(--btn2-bg); color: var(--btn2-ink); border: 1px solid var(--btn2-line); } .btn--ghost:hover { color: var(--btn2-ink); } /* ---------- header ---------- */ .topbar { border-bottom: 1px solid var(--line); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; } .logo { display: flex; flex-direction: column; text-decoration: none; } .logo svg.word { width: 150px; height: 61px; display: block; } .logo svg.stitch { width: 134px; height: 10px; margin: -14px 0 0 3px; display: block; } .nav { display: flex; align-items: center; gap: 30px; font-size: 15px; } .nav a { color: var(--muted); text-decoration: none; } .nav a:hover { color: var(--ink); } .nav .nav-signin { color: var(--ink); font-weight: 500; } .nav .nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 8px; background: var(--nav-btn); color: var(--nav-btn-ink); font-weight: 500; } .nav .nav-cta:hover { color: var(--nav-btn-ink); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .moon { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .moon { display: block; } } /* ---------- trust / compare / pricing / faq / cta ---------- */ .trust .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 88px; } .trust.cols-3 .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } .trust-item { display: flex; flex-direction: column; gap: 10px; } .trust-item svg { width: 28px; height: 28px; stroke: var(--accent); } .trust-item h3, .faq h3 { font-size: 18px; font-weight: 600; } .trust-item p, .faq p { font-size: 15px; line-height: 1.55; color: var(--muted); } .split { display: flex; gap: 72px; align-items: flex-start; padding-top: 96px; } .split-head { flex: 0 0 380px; display: flex; flex-direction: column; gap: 14px; } .split-head p { font-size: 16px; line-height: 1.6; color: var(--muted); } .table { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); } .table-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: 15px; } .table-row:last-child { border-bottom: 0; } .table-row.head { padding: 16px 24px; font-size: 13px; font-weight: 600; color: var(--muted); } .table-row.head span:last-child { color: var(--accent); } .table-row span:first-child { font-weight: 500; } .table-row .no { color: var(--muted); } .pricing { padding-top: 96px; display: flex; flex-direction: column; gap: 32px; } .pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; } .pricing-head p { max-width: 380px; font-size: 16px; line-height: 1.6; color: var(--muted); } .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .plan { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); } .plan.pro { border: 2px solid var(--accent); } .plan-name { font-size: 15px; font-weight: 600; } .plan.pro .plan-name { color: var(--accent); } .price { font-family: "Instrument Serif", Georgia, serif; font-size: 48px; line-height: 1; } .price small { font-family: Geist, sans-serif; font-size: 15px; color: var(--muted); } .plan-lead { font-size: 15px; color: var(--muted); } .plan ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .plan li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; } .plan li svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; stroke: var(--accent); } .plan .btn { margin-top: auto; min-height: 48px; font-size: 15px; } .plans-note { font-size: 15px; color: var(--muted); } .faq-grid { flex: 1 1 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; } .faq-item { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); } .final { margin-top: 96px; } .final-band { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 64px; border-radius: 24px; background: var(--cta-band); } .final-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .final-cta small { font-size: 14px; color: var(--muted); } .footer { margin-top: 96px; border-top: 1px solid var(--line); } .footer .wrap { display: flex; justify-content: space-between; gap: 24px; padding-top: 40px; padding-bottom: 40px; font-size: 14px; color: var(--muted); } .footer nav { display: flex; flex-wrap: wrap; gap: 18px; } .footer a { color: var(--muted); } /* ---------- chat widget (unchanged behaviour, restyled) ---------- */ #chat-toggle { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--btn); color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -10px var(--shadow); z-index: 40; } #chat-toggle svg { width: 22px; height: 22px; } .chat-panel { position: fixed; right: 20px; bottom: 88px; width: min(380px, calc(100vw - 40px)); max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -24px var(--shadow); z-index: 40; overflow: hidden; } .chat-panel[hidden] { display: none; } .chat-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; } .chat-close { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; width: 44px; height: 44px; } .chat-messages { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; line-height: 1.45; } .chat-msg--user { align-self: flex-end; background: var(--btn); color: #FFFFFF; } .chat-msg--assistant { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); } .chat-msg--pending { align-self: flex-start; color: var(--muted); font-style: italic; } .chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .chat-input { flex: 1 1 0; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; } .chat-send { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--btn); color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; } .chat-send:disabled { opacity: .6; cursor: default; } /* ---------- shared headings ---------- */ .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .h2 { font-size: 60px; line-height: 1.02; } .h2-sm { font-size: 52px; line-height: 1.02; } /* ---------- inner pages: breadcrumb, sections, cards, steps, related ---------- */ .breadcrumb { padding-top: 24px; font-size: 14px; color: var(--muted); } .breadcrumb a { color: var(--muted); } .section { padding-top: 96px; } .section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 40px; } .section-sub { font-size: 17px; line-height: 1.6; color: var(--muted); } .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); } .card h3 { font-size: 20px; font-weight: 600; } .card p { font-size: 16px; line-height: 1.65; color: var(--muted); } .card em { color: var(--ink); } .num-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; } .num-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--line); } .num-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 600; } .num-steps h3 { font-size: 19px; font-weight: 600; } .num-steps p { font-size: 15px; line-height: 1.55; color: var(--muted); } .aside-note { margin-top: 24px; font-size: 15px; color: var(--muted); } .related { padding-top: 96px; } .related h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .related a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; } .related a:hover { border-color: var(--accent); color: var(--accent); } /* ---------- language versions of the SEO pages ---------- */ .lang-switch { margin-top: 56px; } .lang-switch .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; color: var(--muted); } .lang-switch a { color: var(--muted); } .lang-switch a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; } .hero-cta .app-lang-note { margin-top: -6px; font-size: 13px; color: var(--muted); } /* ---------- documents: help, privacy, terms, refunds ---------- */ .doc { max-width: 760px; margin: 0 auto; padding: 48px 0 0; } .doc h1, .doc .page-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 60px; line-height: 1.02; margin: 12px 0 12px; } .doc .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .doc .lede { font-size: 19px; line-height: 1.6; color: var(--muted); } .doc .updated { font-size: 14px; color: var(--muted); margin-bottom: 28px; } .doc .nav-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; margin-bottom: 28px; } .doc h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.1; margin: 48px 0 14px; } .doc h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; } .doc p, .doc li, .doc dd { font-size: 16px; line-height: 1.7; color: var(--muted); } .doc p + p { margin-top: 12px; } .doc strong, .doc em, .doc dt { color: var(--ink); } .doc ul, .doc ol { padding-left: 22px; margin: 10px 0; } .doc li + li { margin-top: 6px; } .doc code { font-size: 14px; padding: 1px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); } .doc .legal-block, .doc .notice, .doc .contact-band { padding: 20px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 28px; } .doc .legal-block p, .doc .notice p { margin: 2px 0; font-size: 15px; } .doc .contact-band { margin-top: 48px; } .doc .quicklinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; } .doc .quicklinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; } .doc .quicklinks a:hover { border-color: var(--accent); color: var(--accent); } .doc .category { scroll-margin-top: 24px; } .doc .faq-list { margin: 0; display: flex; flex-direction: column; } .doc .faq-item { padding: 18px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .doc .faq-item dt { font-size: 17px; font-weight: 600; } .doc .faq-item dd { margin: 0; } /* ---------- status page ---------- */ .status { max-width: 760px; margin: 0 auto; padding: 48px 0 0; } .status h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 60px; line-height: 1; margin-bottom: 28px; } .status .banner { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 16px; font-size: 17px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); } .status .banner-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ok); } .status .banner-bad .banner-dot { background: #E5484D; } .status .banner-bad { border-color: rgba(229,72,77,0.5); } .status .pulse { animation: led 2.4s ease-in-out infinite; } .status .meta-row { display: flex; justify-content: space-between; margin: 32px 0 12px; font-size: 14px; color: var(--muted); } .status .mono { font-variant-numeric: tabular-nums; } .status .card { padding: 4px 24px; } .status .component { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); } .status .component:first-child { border-top: 0; } .status .component-name { font-weight: 600; } .status .component-desc { font-size: 14px; color: var(--muted); } .status .pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 14px; border: 1px solid var(--line); } .status .pill-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); } .status .pill-good .pill-dot { background: var(--ok); } .status .pill-bad { color: #E5484D; border-color: rgba(229,72,77,0.5); } .status .pill-bad .pill-dot { background: #E5484D; } .status .note { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--muted); } @keyframes led { 0%,100% { opacity: .45; } 50% { opacity: 1; } } /* ---------- responsive (shared parts) ---------- */ @media (max-width: 1260px) { .wrap { padding: 0 48px; } .split { flex-direction: column; gap: 32px; } .split-head { flex: none; } .trust .wrap, .trust.cols-3 .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .nav .nav-link { display: none; } .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .pricing-head { flex-direction: column; align-items: flex-start; gap: 16px; } .faq-grid { grid-template-columns: minmax(0, 1fr); } .final-band { flex-direction: column; align-items: flex-start; } .final-cta { align-items: flex-start; } .cards, .cards.cols-3, .num-steps { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .wrap { padding: 0 16px; } .topbar .wrap { min-height: 72px; gap: 12px; } .logo svg.word { width: 104px; height: 42px; } .logo svg.stitch { width: 93px; height: 7px; margin-top: -10px; } .nav { gap: 10px; } .nav .nav-signin { display: none; } .nav .nav-cta { padding: 0 14px; } .btn--lg { width: 100%; } .h2 { font-size: 42px; } .h2-sm { font-size: 40px; } .final, .footer { margin-top: 64px; } .trust .wrap, .trust.cols-3 .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 64px; } .split, .pricing, .section, .related { padding-top: 64px; } .table-row { padding: 14px 14px; font-size: 14px; } .plan, .card { padding: 24px; } .final-band { padding: 32px 22px; } .footer .wrap { flex-direction: column; } .doc, .status { padding-top: 32px; } .doc h1, .doc .page-title, .status h1 { font-size: 44px; } .doc h2 { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .status .pulse { animation: none; } }