/* ──────────────────────────────────────────────────────────────────────
   The x.ai page shape in kyn.com.sg's own language (11 Oct 2026):
   centred hero, bento previews, the Products panel with a live preview,
   the workflow loop on every product page, three step cards, the About
   facts and timeline, the Process spec table. Prototype of record:
   claude.ai/artifact/4z7f4q3ULgfAGAguwWWvWU. Tokens map to main.css.
   ────────────────────────────────────────────────────────────────────── */
:root {
  --x-tile: #FFF7DE;
  --x-surface: #F5F5F5;
  --x-rule: #E4E4E7;
  --x-fg: #2E2A1F;
  --x-fg-2: #7E6F53;
  --x-fg-3: #83745A;
  --x-gold: #B8902F;
  --x-gold-fill: #C9A84C;
  --x-gold-text: linear-gradient(120deg, #B8902F 0%, #8F6A1E 60%, #B07F12 100%);
  --x-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --x-hand: var(--font-caveat, "Caveat"), cursive;
}
.x-gold { background: var(--x-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.x-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }

/* ── Buttons in the x.ai shape: one gold pill, one quiet pill ── */
.x-primary { display: inline-flex; align-items: center; height: 46px; padding-inline: 22px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #2E2A1F; background: var(--x-gold-fill); box-shadow: 0 6px 18px -8px rgba(160,120,40,.6); text-decoration: none; transition: transform .18s; }
.x-quiet { display: inline-flex; align-items: center; height: 46px; padding-inline: 22px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--x-fg); background: var(--x-surface); text-decoration: none; transition: transform .18s; }
.x-primary:hover, .x-quiet:hover { transform: translateY(-1px); text-decoration: none; }

/* ── Hero ── */
.xh { text-align: center; padding: 136px 0 56px; display: grid; justify-items: center; gap: 22px; }
.xh h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 400; max-width: 18ch; text-wrap: balance; color: var(--x-fg); margin: 0; }
.xh-sub { font-size: 18px; color: var(--x-fg-2); max-width: 56ch; margin: 0; }
.xh-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
@media (max-width: 760px) { .xh { padding-top: 104px; } }

/* ── Bento: three cards, then two wide; each a preview with a quiet label and Explore → ── */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 16px; }
.bento.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bcard { position: relative; display: flex; flex-direction: column; height: 300px; border: 1px solid var(--x-rule); border-radius: 20px; background: var(--x-surface); overflow: hidden; min-width: 0; color: var(--x-fg); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
a.bcard:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(46,42,31,.35); text-decoration: none; }
.bview { flex: 1; min-height: 0; padding: 18px 18px 0; overflow: hidden; }
.bfoot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 16px; font-size: 15px; font-weight: 500; }
.bfoot .go { font-weight: 400; color: var(--x-fg-2); } .bfoot .go::after { content: " →"; }
.xchat { display: grid; gap: 10px; align-content: end; height: 100%; }
.bub { max-width: 84%; padding: 10px 14px; border-radius: 14px; background: #fff; font-size: 13.5px; line-height: 1.45; justify-self: start; }
.bub.me { justify-self: end; background: var(--x-tile); }
.bub.me.ink { background: var(--x-fg); color: #fff; }
.bub.think { background: transparent; color: var(--x-fg-3); padding-left: 2px; }
.xchat.bot { align-content: center; }
.bcard.dark { background: #1b1a18; border-color: #1b1a18; color: #eae6da; }
.bcard.dark .bfoot { color: #fff; } .bcard.dark .bfoot .go { color: #b5b0a3; }
.term2 { font-family: var(--x-mono); font-size: 12.5px; line-height: 1.75; color: #d6d1c4; }
.tbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #8e897c; font-size: 12px; }
.tdots { display: inline-flex; gap: 5px; } .tdots i { width: 9px; height: 9px; border-radius: 50%; background: #c9a84c; opacity: .6; } .tdots i:nth-child(2) { opacity: .4; } .tdots i:nth-child(3) { opacity: .25; }
.tpath { flex: 1; } .tpct { font-variant-numeric: tabular-nums; }
.tl { display: flex; gap: 8px; white-space: nowrap; } .tl .k { color: #8e897c; } .tl .r { margin-left: auto; } .tl .g { color: #9ad48b; } .tl .y { color: #e2c66e; }
.bcard.photo { background: #e9e5dc; }
.pgrid { position: absolute; inset: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 8px; padding: 8px; }
.pgrid div { background-size: cover; background-position: center; border-radius: 12px; }
.pbig { filter: saturate(.85); }
.pcol { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; padding: 0 !important; }
.bfoot.over { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0)); padding-top: 28px; }
.bfoot.over .go { color: rgba(255,255,255,.85); }
.bsketch { display: grid; align-items: end; padding: 14px 14px 0; }
.bsketch svg { width: 100%; height: auto; max-height: 100%; }
@media (max-width: 900px) { .bento, .bento.two { grid-template-columns: 1fr; } .bcard { height: 280px; } }

/* ── Products panel (nav): items left, one live preview right that replays as you move over the items ── */
.nav-links .mega-dd { display: inline-flex; align-items: center; position: relative; }
.nav-links .mega-dd--rich { position: static; }
.mega-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 13.5px; font-weight: 400; color: var(--text-muted); background: none; border: 0; border-radius: 6px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .12s, background .12s; }
.mega-btn svg { width: 13px; height: 13px; transition: transform .2s; }
.mega-btn:hover, .mega-dd.open .mega-btn, .mega-dd--active .mega-btn { color: var(--text); background: var(--bg-card); }
.mega-dd--active .mega-btn { font-weight: 600; }
.mega-dd.open .mega-btn svg { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 110; width: min(640px, calc(100vw - 48px)); padding: 10px; background: var(--bg); border: 1px solid var(--x-rule); border-radius: 20px; box-shadow: 0 24px 60px -18px rgba(20,20,24,.22), 0 2px 6px rgba(20,20,24,.05); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s linear .22s; text-align: left; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.mega-dd.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1); }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mega ul a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 14px; font-weight: 400; text-decoration: none; color: var(--x-fg); }
.mega ul a:hover { background: var(--x-surface); text-decoration: none; }
.mega .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--x-surface); display: grid; place-items: center; color: var(--x-fg); }
.mega .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mega ul b { display: block; font-size: 14.5px; font-weight: 600; color: var(--x-fg); line-height: 1.3; }
.mega ul small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--x-fg-2); }
.mega.rich { width: min(860px, calc(100vw - 48px)); display: flex; gap: 12px; padding: 12px; top: calc(100% + 10px); }
.mega ul.plist { display: grid; grid-template-columns: 1fr; gap: 2px; width: 236px; flex-shrink: 0; align-content: start; padding: 4px 0; }
.mega ul.plist a { display: block; grid-template-columns: none; padding: 11px 14px; border-radius: 14px; }
.plist a.hot, .plist a:hover { background: var(--x-surface); }
.plist b { display: block; font-size: 15px; font-weight: 600; color: var(--x-fg); }
.plist small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--x-fg-2); }
.pv { position: relative; flex: 1; min-width: 0; height: 400px; border-radius: 16px; background: var(--x-surface); overflow: hidden; }
.pane { position: absolute; inset: 0; padding: 18px; display: none; }
.pane.on { display: block; }
.pane.xchat { display: none; grid-auto-rows: max-content; align-content: end; gap: 10px; } .pane.xchat.on { display: grid; }
.pane.bot.on { align-content: center; }
.pane.dark { background: #1b1a18; color: #d6d1c4; font-family: var(--x-mono); font-size: 12.5px; line-height: 1.75; }
.pane.photo { padding: 0; } .pane.photo .pgrid { position: absolute; inset: 0; bottom: 42px; }
.pane .cap { position: absolute; left: 18px; right: 18px; bottom: 12px; font-size: 13px; color: var(--x-fg-2); margin: 0; }
.pane.sketchp { display: none; align-items: center; } .pane.sketchp.on { display: grid; } .pane.sketchp svg { width: 100%; height: auto; }
.pane.on .a { animation: pane-in .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 160ms); }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } }
.pane.on .draw { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw-line 1.4s ease-out .5s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@media (max-width: 1240px) { .mega.rich .pv { display: none; } .mega.rich { width: 280px; } }
@media (prefers-reduced-motion: reduce) { .pane.on .a { animation: none; } .pane.on .draw { animation: none; stroke-dashoffset: 0; } }

/* ── The workflow loop at the top of every product page ── */
.loopsec { padding: 8px 0 0; }
.loop { width: 100%; height: auto; display: block; }
.loopsec .a { animation: pane-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 220ms); }
@media (max-width: 760px) { .loop { min-width: 720px; } .loopsec { overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .loopsec .a { animation: none; } }

/* ── Three step cards: the bento look, with a What-it-means panel that opens below ── */
.bento.steps { padding: 40px 0 0; align-items: start; }
.bcard.step { height: auto; min-height: 300px; }
.bcard.step .bview { height: 232px; flex: none; }
.bcard.step .bview.xchat { align-content: center; }
.bcard.step .bfoot button.go { background: none; border: 0; padding: 0; font: inherit; color: var(--x-fg-2); cursor: pointer; }
.bcard.step .bfoot button.go::after { content: " +"; } .bcard.step.open .bfoot button.go::after { content: " –"; }
.bcard.step .what { display: none; padding: 14px 18px 18px; border-top: 1px solid var(--x-rule); font-size: 14px; color: var(--x-fg-2); }
.bcard.step.open .what { display: block; }
.bcard.step .what ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.bcard.step .what li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; } .bcard.step .what li b { color: var(--x-fg); font-weight: 600; }
.bcard.dark.step .what { border-top-color: rgba(255,255,255,.12); color: #c9c4b7; } .bcard.dark.step .what li b { color: #fff; }
.bcard.dark.step .tl { white-space: normal; display: block; margin-bottom: 6px; line-height: 1.5; } .bcard.dark.step .tl b { color: #fff; font-weight: 600; }
.bcard.dark.step .tl:first-of-type { color: #fff; margin-bottom: 10px; }
@media (max-width: 900px) { .bcard.step .what li { grid-template-columns: 1fr; } }

/* ── Product page client story: the site's own story block, a chat figure on the right ── */
.xprod .story { margin: 96px auto 0; }
.client-fig { display: grid; gap: 10px; align-content: center; padding: 24px; border-radius: 24px; background: var(--x-surface); }
.client-fig .bub { font-size: 14px; }
.illus { margin: 18px 0 0; font-size: 12.5px; color: var(--x-fg-3); }

/* ── Sections on About and Our process ── */
.xsec { padding: 80px 0 24px; display: grid; gap: 10px; max-width: 60ch; }
.xsec h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0; color: var(--x-fg); }
.xsec p { font-size: 18px; color: var(--x-fg-2); line-height: 1.6; margin: 0; }
.xfacts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.xfacts li { border-radius: 24px; background: var(--x-tile); padding: 28px 26px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.xfacts .k { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--x-gold); }
.xfacts b { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--x-fg); }
.xfacts b.big { font-size: 32px; letter-spacing: -0.03em; line-height: 1.05; }
.xfacts p { font-size: 14.5px; color: var(--x-fg-2); line-height: 1.6; margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--x-rule); }
.timeline .num { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: #A07828; padding-top: 3px; font-variant-numeric: tabular-nums; }
.timeline b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; color: var(--x-fg); }
.timeline p { font-size: 14.5px; color: var(--x-fg-2); line-height: 1.6; margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--x-rule); border-radius: 20px; margin-bottom: 96px; }
.spec { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.spec th { text-align: left; font-weight: 500; color: var(--x-fg-3); font-size: 12.5px; padding: 14px 18px; border-bottom: 1px solid var(--x-rule); }
.spec td { padding: 14px 18px; border-bottom: 1px solid var(--x-rule); vertical-align: top; color: var(--x-fg); }
.spec td:first-child { font-weight: 600; white-space: nowrap; } .spec td:nth-child(2) { color: var(--x-fg-2); } .spec td:last-child { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.spec tr:last-child td { border-bottom: 0; }
/* Comparison table (Website migrate page): wrapping cells, the KYN column tinted. */
.spec.cmp { min-width: 760px; }
.spec.cmp td, .spec.cmp td:first-child, .spec.cmp td:last-child { white-space: normal; text-align: left; font-variant-numeric: normal; color: var(--x-fg); }
.spec.cmp td:first-child { font-weight: 600; width: 18%; } .spec.cmp td:nth-child(2), .spec.cmp td:nth-child(3), .spec.cmp td:nth-child(4) { color: var(--x-fg-2); }
.spec.cmp th:last-child, .spec.cmp td:last-child { background: rgba(176, 134, 50, 0.07); font-weight: 600; }
.spec.cmp th:last-child { color: var(--x-fg); }
/* Numbered guide rows (Website AI-era page). */
.spec.guide { min-width: 640px; }
.spec.guide td:first-child { font-variant-numeric: tabular-nums; color: #A07828; } .spec.guide td:last-child { white-space: normal; text-align: left; color: var(--x-fg-2); }
.xlinks { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 96px; }
.xlinks a { border: 1px solid var(--x-rule); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--x-fg); text-decoration: none; }
.xlinks a:hover { background: var(--x-surface); }
.xend { padding-bottom: 96px; }
.xfacts.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xfacts.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .xfacts, .xfacts.c3, .xfacts.c2 { grid-template-columns: 1fr; } }

/* ── Page frame for the new pages: nav is fixed, so the first block clears it ── */
.xpage { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.xpage .story { margin-left: auto; margin-right: auto; }
.xpage .why { margin-left: auto; margin-right: auto; }

/* The landing type scale, so the story block reads the same size off the home page */
.xpage { --t-h2: clamp(30px, 3.4vw, 44px); --t-h3: 20px; --t-body: 16px; }

/* /services: the link from each department group to its product page */
.cat-product { margin: -10px 0 18px; font-size: 14.5px; } .cat-product a { color: #8A6420; font-weight: 600; }

/* Long-form pages (services, guides, case-study detail, legal): same title voice as the hero */
.content-h1, .legal-h1, .cat-h1 { font-weight: 400; letter-spacing: -0.035em; }
.content-h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
/* Pages that open with XHero: the old hero rules that still apply to their wrappers */
.pricing-page .xh, .cse-page .xh, .catalogue .xh, .blog-page .xh { padding-top: 120px; }
.blog-page .xh { margin-bottom: 8px; }
.catalogue .crumbs { margin-bottom: 24px; }

/* ── Menus at every width (12 Oct 2026). main.css gives every .nav-links a
   white-space: nowrap, which clipped the panel lines; the panel resets it.
   Above 1240px the Products panel carries its preview; between the drawer
   breakpoint and 1240px it is a plain list under its button. ── */
.mega a, .mega a b, .mega a small, .plist a, .plist b, .plist small { white-space: normal; }
.mega ul a, .mega ul.plist a { line-height: 1.35; }
@media (max-width: 1240px) {
  .nav-links .mega-dd--rich { position: relative; }
  .mega.rich { width: 320px; left: 0; transform: translate(0, -6px); display: block; padding: 8px; }
  .mega-dd.open .mega.rich { transform: translate(0, 0); }
  .mega ul.plist { width: auto; }
  .mega.rich .pv { display: none; }
  .mega:not(.rich) { left: 0; transform: translate(0, -6px); width: min(560px, calc(100vw - 32px)); }
  .mega-dd.open .mega:not(.rich) { transform: translate(0, 0); }
}
@media (max-width: 1240px) and (min-width: 901px) {
  .mega:not(.rich) ul { grid-template-columns: 1fr; }
  .mega:not(.rich) { width: 340px; }
}

/* ── /check: the AI search check (12 Oct 2026) ── */
.ck { max-width: 760px; margin: 0 auto; padding-bottom: 96px; }
.ck-form { display: flex; gap: 10px; }
.ck-in { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid #DAD4C6; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--x-fg); outline: none; }
.ck-in:focus { border-color: #A07828; box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18); }
.ck-btn { height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--x-gold-fill); color: #2E2A1F; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ck-btn[disabled] { background: #ECEBE6; color: #A1A1AA; cursor: not-allowed; }
.ck-note { margin: 10px 2px 0; font-size: 13px; color: var(--x-fg-3); }
.ck-err { margin: 12px 2px 0; font-size: 14px; color: #9A4A3E; }
.ck-busy { margin: 40px 0; display: grid; gap: 10px; }
.ck-busy p { margin: 0; font-size: 14.5px; color: var(--x-fg-2); }
.ck-busy i { display: block; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #C9A84C, #F3E3B0, #C9A84C); background-size: 200% 100%; animation: ck-sweep 1.4s linear infinite; }
@keyframes ck-sweep { to { background-position: -200% 0; } }
.ck-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin: 40px 0 24px; padding: 26px 28px; border-radius: 24px; background: var(--x-tile); }
.ck-score { font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--x-fg); font-variant-numeric: tabular-nums; }
.ck-score small { font-size: 18px; font-weight: 500; color: var(--x-fg-2); letter-spacing: 0; }
.ck-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--x-fg); }
.ck-head p { margin: 0; font-size: 14.5px; color: var(--x-fg-2); line-height: 1.55; }
.ck-first { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 8px; }
.ck-first li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--x-rule); font-size: 14.5px; }
.ck-first .n { font-weight: 600; color: var(--x-gold); font-variant-numeric: tabular-nums; }
.ck-first b { display: block; font-weight: 600; color: var(--x-fg); }
.ck-first span { color: var(--x-fg-2); }
.ck-group { border: 1px solid var(--x-rule); border-radius: 20px; margin-bottom: 14px; overflow: hidden; }
.ck-group header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px; background: var(--x-surface); }
.ck-group h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--x-fg); }
.ck-group header span { font-size: 13.5px; color: var(--x-fg-2); font-variant-numeric: tabular-nums; }
.ck-group ul { list-style: none; margin: 0; padding: 0; }
.ck-group li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-top: 1px solid var(--x-rule); font-size: 14px; line-height: 1.5; }
.ck-group li b { display: block; font-weight: 600; color: var(--x-fg); }
.ck-group li span { color: var(--x-fg-2); }
.ck-dot { width: 18px; height: 18px; border-radius: 50%; margin-top: 2px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.ck-dot.pass { background: #DDF2E3; color: #1E7F4F; } .ck-dot.warn { background: #FFF1C2; color: #8A6420; } .ck-dot.fail { background: #F9E0DC; color: #9A4A3E; }
.ck-ai { margin: 0 0 14px; padding: 18px; border-radius: 20px; background: #1b1a18; color: #eae6da; font-size: 14px; line-height: 1.6; }
.ck-ai b { color: #fff; } .ck-ai p { margin: 0 0 8px; } .ck-ai p:last-child { margin: 0; } .ck-ai .k { color: #b5b0a3; }
.ck-next { margin-top: 28px; padding: 26px 28px; border-radius: 24px; border: 1px solid var(--x-rule); background: #fff; }
.ck-next h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--x-fg); }
.ck-next p { margin: 0 0 16px; font-size: 14.5px; color: var(--x-fg-2); }
.ck-lead { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.ck-lead .ck-in { height: 48px; font-size: 15px; } .ck-lead .ck-btn { height: 48px; }
.ck-done { font-size: 14.5px; color: #1E7F4F; font-weight: 600; }
.ck-sources { font-size: 14px; color: var(--x-fg-2); line-height: 1.6; margin: 12px 0 10px; } .ck-sources b { color: var(--x-fg); }
.ck-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 640px) { .ck-form { flex-direction: column; } .ck-lead { grid-template-columns: 1fr; } .ck-head { grid-template-columns: 1fr; gap: 10px; } }

/* ── Motion vocabulary (12 Oct 2026): announcement bar, hero words, rail, marquee, print ── */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; background: #EFEDE7; color: #2A2719; font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; border-bottom: 1px solid #E2DFD7; transition: background .15s ease; }
.bar b { color: #2A2719; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; padding: 2px 7px; border: 1px solid #CFCBC0; border-radius: 999px; }
.bar span { overflow: hidden; text-overflow: ellipsis; color: #2A2719; }
.bar em { font-style: normal; color: #2A2719; font-weight: 500; }
.bar:hover { background: #E6E3DB; } .bar:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bar:hover, .bar:hover b, .bar:hover span, .bar:hover em, .bar:focus-visible, .bar:visited { color: #2A2719; }
body { --bar-h: 36px; }
.nav { top: var(--bar-h); }
.nav--scrolled { top: calc(12px + var(--bar-h)) !important; }
.xh { padding-top: 160px; }
.xh h1 .w { display: inline-block; will-change: transform; }
.xh h1 { overflow: visible; }
.xh-links { gap: 22px; }
.xh-links a { font-size: 14.5px; font-weight: 500; color: var(--x-fg-2); text-decoration: none; }
.xh-links a:hover { color: var(--x-fg); }
/* Hero field (13 Oct 2026): one tall pill with the button inside it, like the x.ai prompt box. */
.ck-hero { position: relative; width: min(640px, 100%); margin-top: 6px; display: block; }
.ck-hero .ck-in { display: block; width: 100%; height: 64px; padding: 0 160px 0 22px; border: 1px solid #D9D2C2; border-radius: 999px; background: #fff; font-size: 16px; color: var(--x-fg); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 36px -22px rgba(46,42,31,.45); }
.ck-hero .ck-in::placeholder { color: #8E846F; }
.ck-hero .ck-in:focus { border-color: #C9A84C; box-shadow: 0 0 0 4px rgba(201,168,76,.16), 0 12px 36px -22px rgba(46,42,31,.45); }
.ck-hero .ck-go { position: absolute; top: 7px; right: 7px; bottom: 7px; height: auto; padding: 0 18px 0 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.ck-hero .ck-go .a { font-size: 17px; line-height: 1; }
.ck-hero .ck-go[disabled] { background: #EFEDE7; color: #9A927F; }
@media (max-width: 640px) {
  .ck-form .ck-in, .ck-form .ck-btn { flex: none; }
  .ck-hero .ck-in { height: 60px; padding-right: 72px; font-size: 16px; }
  .ck-hero .ck-go { width: 46px; padding: 0; justify-content: center; }
  .ck-hero .ck-go .t { display: none; }
}
.rail { list-style: none; margin: 0; padding: 0 0 0 36px; position: relative; display: grid; gap: 40px; max-width: 640px; }
.rail-line { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--x-rule); border-radius: 2px; overflow: hidden; }
.rail-line i { display: block; width: 100%; height: 100%; background: var(--x-gold); transform-origin: top; transform: scaleY(0); }
.rail li { position: relative; padding-left: 4px; transition: opacity .4s ease; opacity: .35; }
.rail li.on { opacity: 1; }
.rail li::before { content: ""; position: absolute; left: -33px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--x-rule); transition: border-color .3s, background .3s; }
.rail li.on::before { border-color: var(--x-gold); background: var(--x-gold); }
.rail .k { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--x-gold); }
.rail b { display: block; margin-top: 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--x-fg); }
.rail p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--x-fg-2); max-width: 52ch; }
.m-ready { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .m-ready { opacity: 1; } .rail li { opacity: 1; } .rail-line i { transform: none; } }
@media (max-width: 760px) { .bar span { display: none; } .xh { padding-top: 128px; } }

/* ── /check report: findings, sentiment, print ── */
.ck-report { padding-top: 8px; }
.ck-print-head, .ck-print-foot { display: none; }
.ck-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.ck-actions .x-quiet { height: 42px; padding-inline: 18px; font-size: 14px; background: #fff; border: 1px solid var(--x-rule); cursor: pointer; }
.ck-line { margin: 0 0 28px; padding: 22px 26px; border-left: 3px solid var(--x-gold); background: #fff; border-radius: 0 20px 20px 0; }
.ck-line p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--x-fg); }
.ck-line .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--x-gold); margin-bottom: 8px; }
.ck-find { list-style: none; margin: 0 0 28px; padding: 0; }
.ck-find li { border-top: 1px solid var(--x-rule); padding: 28px 0; }
.ck-find .num { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--x-fg-3); font-variant-numeric: tabular-nums; }
.ck-find h3 { margin: 4px 0 16px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--x-fg); }
.ck-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ck-cols p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--x-fg); }
.ck-cols .k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--x-fg-2); margin-bottom: 6px; }
.ck-cols .k.ok { color: #1E7F4F; }
.ck-next .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--x-gold); margin: 0 0 6px; }
.ck-lead--3 { grid-template-columns: 1fr 1fr 1fr auto; }
.ck-sent-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.ck-sent-head b { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; color: var(--x-fg); font-variant-numeric: tabular-nums; }
.ck-sent-head span { font-size: 13.5px; color: var(--x-fg-2); }
.ck-table td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-table td.ok { color: #1E7F4F; } .ck-table td.warn { color: #8A6420; } .ck-table td.bad { color: #9A4A3E; }
.ck-table td:first-child { white-space: normal; }
.ck-sub { display: block; font-weight: 400; color: var(--x-fg-3); font-size: 12.5px; margin-top: 3px; }
@media (max-width: 760px) { .ck-cols { grid-template-columns: 1fr; gap: 14px; } .ck-lead--3 { grid-template-columns: 1fr; } .ck-head { grid-template-columns: 1fr; } }
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  .bar, .nav, .nav-drawer, .nav-drawer-overlay, .wa-fab, .site-footer, .ck-form, .ck-note, .ck-busy, .ck-actions, .ck-noprint, .xh, .gold-cta { display: none !important; }
  .xpage { padding: 0; max-width: none; }
  .ck { max-width: none; padding: 0; }
  .ck-print-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #ddd; font-size: 12px; color: #555; }
  .ck-print-foot { display: block; margin-top: 18px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 11px; color: #555; }
  .ck-head { background: #FFF7DE !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .ck-ai { background: #1b1a18 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .ck-group, .ck-find li, .ck-next, .ck-line { break-inside: avoid; }
  .ck-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ck-lead { display: none; }
  .m-ready, .reveal { opacity: 1 !important; transform: none !important; }
}
/* Split words inside the gold phrase keep the gradient (background-clip does not inherit). */
.xh h1 .x-gold .w { background: var(--x-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-ready { transition: none !important; }

/* ── One gap before the gold band on every new page (13 Oct 2026) ── */
.xpage { padding-bottom: clamp(72px, 9vw, 128px); }
.xpage > :last-child, .xpage .table-wrap { margin-bottom: 0; }
.xend { padding-bottom: 24px; }
.xprod .story { margin-bottom: 0; }
.ck { padding-bottom: 0; }

/* ── 13 Oct 2026: assessment line in product heroes, FAQ block, panel labels, footer NAP ── */
.xh-assess { margin: 10px 0 -6px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--x-gold); }
.xfaq { max-width: 760px; margin: 0 auto; padding-top: 72px; }
.xfaq h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 18px; color: var(--x-fg); }
.xfaq dl { margin: 0; }
.xfaq dl > div { border-top: 1px solid var(--x-rule); padding: 18px 0; }
.xfaq dt h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--x-fg); letter-spacing: -0.01em; }
.xfaq dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--x-fg-2); }
.pane-h { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--x-fg-3); }
.pane.dark .pane-h { color: #8e897c; }
.pane.xchat { align-content: center; grid-auto-rows: max-content; }
.pane.xchat .pane-h { align-self: start; justify-self: stretch; }
.pane.photo .pane-h { position: absolute; left: 18px; top: 14px; z-index: 1; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.footer-nap { margin: 12px 0 0; font-size: 12.5px; color: #7E6F53; }
.footer-nap a { color: inherit; }

.landing .xfaq { width: 100%; max-width: 1056px; margin-top: var(--flow, 96px); }
.landing .xfaq h2 { font-size: var(--t-h2, 36px); }
.ck-lead--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-lead--5 .ck-btn { grid-column: 1 / -1; }
@media (max-width: 760px) { .ck-lead--5 { grid-template-columns: 1fr; } }

/* ── Build library on Our work (13 Oct 2026): bento-style cards with the stack and the unit cost ── */
.lib { max-width: 1200px; margin: 0 auto; padding: 0 24px 24px; }
.lib-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.lib-chip { font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--x-rule); background: #fff; color: var(--x-fg-2); cursor: pointer; }
.lib-chip.on { background: var(--x-fg); border-color: var(--x-fg); color: #fff; }
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 22px 20px; border: 1px solid var(--x-rule); border-radius: 20px; background: var(--x-surface); color: var(--x-fg); }
.lcat { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--x-gold); display: flex; gap: 8px; align-items: center; }
.ldemo { font-size: 10.5px; letter-spacing: .08em; padding: 1px 7px; border: 1px solid var(--x-rule); border-radius: 999px; color: var(--x-fg-3); background: #fff; }
.lcard h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.lpipe { margin: 0; font-size: 14px; line-height: 1.55; color: var(--x-fg-2); } .lpipe em { font-style: normal; color: var(--x-fg-3); }
.lind { margin: 0; font-size: 12.5px; color: var(--x-fg-3); }
.lstack { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lstack li { font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--x-rule); color: var(--x-fg); }
.lfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 0; }
.lfacts dt { font-size: 12px; color: var(--x-fg-3); margin-bottom: 2px; } .lfacts dd { margin: 0; font-size: 14px; color: var(--x-fg-2); }
.lfacts b { font-size: 16px; color: var(--x-fg); font-variant-numeric: tabular-nums; } .lfacts i { font-style: normal; font-size: 12px; color: var(--x-fg-3); }
.lsteps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lsteps li { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--x-tile); color: var(--x-fg); }
.lopen { margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--x-fg); text-decoration: none; }
.lopen:hover { text-decoration: underline; text-underline-offset: 3px; }
.lfoot { margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--x-fg-3); max-width: 90ch; }
@media (max-width: 1100px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .lib-grid { grid-template-columns: 1fr; } .lib { padding: 0 16px 16px; } }

/* ── Blog index: dated-changes strip, topic chips, search (13 Oct 2026) ── */
.news { max-width: 1200px; margin: 0 auto 8px; padding: 0 24px; }
.news-h { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--x-gold); }
.news-list { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.news-list a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--x-rule); border-radius: 16px; background: #fff; color: var(--x-fg); text-decoration: none; height: 100%; }
.news-list a:hover { background: var(--x-surface); }
.news-list time { font-size: 12px; font-weight: 600; color: var(--x-fg-3); font-variant-numeric: tabular-nums; }
.news-list b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.news-list p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--x-fg-2); }
.news-list small { font-size: 11.5px; color: var(--x-fg-3); }
.bidx { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.bidx-bar { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.bidx-bar .lib-filters { margin: 0; flex: 1; }
.lib-chip .n { font-weight: 400; opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; }
.bidx-search { display: flex; align-items: center; gap: 8px; min-width: 240px; height: 38px; padding: 0 12px; border: 1px solid var(--x-rule); border-radius: 999px; background: #fff; }
.bidx-search svg { width: 16px; height: 16px; fill: none; stroke: var(--x-fg-3); stroke-width: 2; stroke-linecap: round; }
.bidx-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--x-fg); width: 100%; }
.bidx-count { margin: 6px 0 18px; font-size: 12.5px; color: var(--x-fg-3); }
.bidx-none { padding: 40px 0; text-align: center; color: var(--x-fg-3); }
.blog-card-topic { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--x-gold); }
.hub-head { max-width: 1200px; margin: 0 auto; padding: 0 24px 8px; }
.hub-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; }
@media (max-width: 900px) { .news-list { grid-template-columns: 1fr; } .bidx-search { width: 100%; } }
.ck-ta { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; grid-column: 1 / -1; }
.ck-lead--3 .ck-btn { grid-column: 1 / -1; }
/* Long tokens (error strings, scope names) must wrap on phones. */
@media (max-width: 760px) { .xh h1, .xh-sub, .xsec p, .spec td { overflow-wrap: anywhere; } }
.ck-count { margin: -6px 0 0; font-size: 13px; color: var(--x-fg-3); font-variant-numeric: tabular-nums; }
/* Google preferred-source button, in the author row, right-aligned. Ink stays white on hover. */
.blog-author-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.blog-author-row > * { margin: 0 !important; }
.blog-author-row .gpref { margin: 1px 0 0 !important; align-self: flex-start; }
.gpref, .gpref:hover, .gpref:visited, .gpref:focus, .gpref span { color: #fff !important; text-decoration: none !important; }
.gpref { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: #111; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.gpref svg { width: 18px; height: 18px; flex: none; }
.gpref:hover { background: #2a2a2a; }
@media (max-width: 640px) { .gpref { height: 34px; font-size: 12.5px; } }
.blog-post-gap { height: 28px; }
.blog-author-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 1px 0 0 !important; }
.blog-author-buttons .gpref { margin: 0 !important; }