/* Shared by the Lamp-lit inner pages (calculator, FAQ, integrations, legal, 404), loaded after each page's own styles:
   the header that collapses step by step (with /nav.js), the phone menu, the language picker and comfortable touch targets. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* In-page links (#how, #faq…) land below the 80px sticky header */
:where([id]) { scroll-margin-top: 96px; }
/* Brand fonts with metric-matched stand-ins (fonts.css) while they load; translated pages keep their own stacks */
:root { --serif: "Instrument Serif", "Instrument Serif Fallback", "Instrument Serif Fallback 2", "Iowan Old Style", Georgia, serif; --sans: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }

/* Header */
.top { gap: 12px; }
.top > a { flex: none; display: flex; align-items: center; min-height: 44px; }
.top > a img { display: block; }
.top nav { flex: none; white-space: nowrap; }
.top nav > a, .top .btn { white-space: nowrap; }
.top .logo-mark { display: none; }
.top.c1 nav a.hide-sm { display: none; } .top.c1 .menu-btn { display: grid; }
.top.c2 nav { gap: 10px; }
.top.c2 .lang-switch summary { width: 42px; padding: 0; justify-content: center; } .top.c2 .lang-switch summary :is(.code, .c) { display: none; }
.top.c3 .btn-sm { padding: 0 14px; }
.top.c4 .btn-sm { padding: 0 13px; font-size: 13px; } .top.c4 .btn-sm span { display: none; } .top.c4 nav { gap: 8px; }
.top.c5 > a img { width: 128px; height: auto; }
.top.c6 > a img:not(.logo-mark) { display: none !important; } .top.c6 > a .logo-mark { display: block; width: 32px; height: 32px; }
.top.c7 nav { gap: 6px; } .top.c7 .btn-sm { padding: 0 12px; }
@media (pointer: coarse) { .lang-switch summary { height: 44px; } .top.c2 .lang-switch summary { width: 44px; } }

/* Phone menu (the same menu as the home page) */
.menu-btn { display: none; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; place-items: center; }
.menu-btn i, .menu-btn i::before, .menu-btn i::after { display: block; width: 16px; height: 1.6px; background: var(--midnight); position: relative; transition: transform .25s var(--ease), background .2s; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; } .menu-btn i::before { top: -5px; } .menu-btn i::after { top: 5px; }
.top.open .menu-btn i { background: transparent; } .top.open .menu-btn i::before { transform: translateY(5px) rotate(45deg); } .top.open .menu-btn i::after { transform: translateY(-5px) rotate(-45deg); }
.menu { position: absolute; z-index: 20; inset-inline-end: clamp(12px, 4vw, 56px); top: calc(100% - 4px); display: none; flex-direction: column; width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - var(--hdr, 80px) - 12px); max-height: calc(100svh - var(--hdr, 80px) - 12px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; background: #fff; border: 1px solid rgba(20,31,70,.08); border-radius: 20px; box-shadow: 0 2px 4px rgba(14,22,64,.06), 0 28px 60px -24px rgba(14,22,64,.45); }
.top.open .menu { display: flex; animation: nav-rise .25s var(--ease) both; }
@keyframes nav-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.menu a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 12px 14px; border-radius: 12px; font: 500 16px/1.2 var(--sans); color: var(--midnight); text-decoration: none; transition: background .15s, color .15s; }
.menu a::after { margin-inline-start: auto; content: "→"; font: 400 15px/1 var(--sans); color: var(--ink-muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .2s var(--ease); }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current] { background: var(--paper); color: var(--reply); }
.menu a:hover::after, .menu a:focus-visible::after { opacity: 1; transform: none; color: var(--reply); }
html[dir="rtl"] .menu a::after { content: "←"; }
.menu a::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; color: var(--ink-muted); opacity: .75; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; transition: color .15s, opacity .15s; }
.menu a:hover::before, .menu a:focus-visible::before, .menu a[aria-current]::before { color: var(--reply); opacity: 1; }
.menu a[href$="#outcomes"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 16v4M17 18h4'/%3E%3C/svg%3E"); }
.menu a[href$="#pricing"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); }
.menu a[href$="#customers"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.5 3.3-5.5 6.5-5.5s5.9 2 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2 .6 3.3 2.4 3.6 5.2'/%3E%3C/svg%3E"); }
.menu a[href*="integration"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5'/%3E%3C/svg%3E"); }
.menu a[href*="calculator"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2.5'/%3E%3Cpath d='M8.5 6.5h7v3h-7zM9 13.5h.01M12 13.5h.01M15 13.5h.01M9 17.5h.01M12 17.5h.01M15 17.5h.01'/%3E%3C/svg%3E"); }
.menu a[href*="faq"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.3a2.5 2.5 0 0 1 4.9.8c0 1.7-2.5 2.3-2.5 3.9M12 17.2h.01'/%3E%3C/svg%3E"); }
.menu a.menu-login { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); }
html[dir="rtl"] .menu a.menu-login::before { transform: scaleX(-1); }
.menu .sep { flex: none; height: 1px; margin: 6px 14px; background: var(--line); }
.menu a.menu-login { justify-content: center; margin-top: 6px; border: 1px solid var(--line); font-weight: 600; }
.menu a.menu-login::after { display: none; }
.menu a.menu-login:hover { border-color: var(--reply); background: rgba(1,85,239,.05); }

/* Language picker: always fully on screen, scrolls when the screen is short */
.lang-menu { max-height: calc(100vh - var(--hdr, 80px) - 16px); max-height: calc(100svh - var(--hdr, 80px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.top nav .lang-menu a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 0 14px; line-height: 1.2; }
@media (max-width: 600px) {
  .top .lang-switch { position: static; }
  .top .lang-menu { inset-inline: auto clamp(12px, 4vw, 56px); top: calc(100% - 4px); min-width: 180px; max-width: calc(100vw - 24px); }
}

/* Touch targets and small labels */
footer nav { column-gap: 18px; row-gap: 0; }
footer nav a, .foot-langs a { display: inline-block; padding-block: 8px; }
.crumbs a { display: inline-block; padding-block: 10px; }
.ext, .alt, .other a { display: inline-block; padding-block: 12px; }
html[lang="ja"] :is(h1, h2, h3, summary) { word-break: auto-phrase; }
@media (prefers-reduced-motion: reduce) { .top.open .menu { animation: none; } .menu-btn i, .menu-btn i::before, .menu-btn i::after { transition: none; } }
html:is([lang="ja"], [lang="zh-CN"], [lang="ar"]) .brand { font-family: "Instrument Serif", var(--serif); }
.card-label, .setup .lbl, .offer .txt small, .msg.ai .who i { font-size: 12px; }
.ask a { white-space: normal; display: inline-block; padding-block: 12px; }
footer nav a { min-width: 24px; text-align: center; }