/**
 * inner.css: the inner pages (/docs, /contact and the 404), ported from the design system's
 * `ui_kits/website/Actorly Docs.dc.html`, `Actorly Contact.dc.html` and `Actorly 404.dc.html` (ACT-247).
 *
 * Every colour, size and easing is a token from design-tokens.css; sizes the tokens do not name are rem (1rem = 16px).
 * The nav and the footer are the shared chrome (design-chrome.css). Motion is public/js/motion-kit.js (the design system's own)
 * plus public/js/inner-motion.js. Inner pages have no pinned scenes (guidelines/motion.md).
 *
 * TWO WORLDS, as on Home: html.mk = animated (hidden starting states), html:not(.mk) = the finished page (no JavaScript,
 * reduced motion). All copy is real HTML in both.
 */
body.inner { margin: 0; background: var(--act-paper); color: var(--act-ink); font-family: var(--act-font-display); -webkit-font-smoothing: antialiased; }
.inner *, .inner *::before, .inner *::after { box-sizing: border-box; }
.inner a { color: inherit; text-decoration: none; }
.inner a:hover { color: var(--act-ember-text); }
.inner ::selection { background: var(--act-ember); color: var(--act-ink); }
.inner :focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }
.inner .in-ink :focus-visible { outline-color: var(--act-ember); }
.inner details summary { list-style: none; }
.inner details summary::-webkit-details-marker { display: none; }
.inner details[open] [data-plus] { transform: rotate(45deg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.in-root { overflow-x: clip; }

/* line-reveal mask: the descender padding the design system asks for; hidden starting states only in the animated world */
.inner [data-mk-mask] { padding-bottom: var(--act-mask-pad) !important; margin-bottom: calc(-1 * var(--act-mask-pad)) !important; }
html.mk .inner [data-mk-fade] { opacity: 0; }
html.mk .inner [data-mk-line] { transform: translateY(110%); }

/* ---------------------------------------------------------------- shared type */
.in-h1 { margin: 0; font-variation-settings: var(--act-display-wdth); font-weight: var(--act-weight-display); font-size: var(--act-h1); line-height: var(--act-lh-display); letter-spacing: var(--act-track-h1); }
.in-h2 { margin: 0; font-variation-settings: var(--act-display-wdth); font-weight: var(--act-weight-display); font-size: var(--act-h2-docs); line-height: var(--act-lh-h2); letter-spacing: -0.05em; }
.in-lede { margin: 0; font-size: var(--act-lede); line-height: var(--act-lh-lede); color: var(--act-body); max-width: 38.75rem; }
.in-p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--act-body); }
.inner .in-p a { color: var(--act-ember-text); text-decoration: underline; text-underline-offset: var(--act-space-1); }
.in-head { padding: var(--act-head-pad-top) var(--act-gutter) 4.5rem; }
.in-head-in { max-width: var(--act-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 1.375rem; }
.in-head-c { padding-bottom: 5.625rem; }
.in-head-c .in-head-in { align-items: center; text-align: center; gap: var(--act-gap-headline-lede); }

/* ---------------------------------------------------------------- buttons */
.in-btn { height: 3.375rem; padding: 0 1.75rem; border-radius: var(--act-radius-pill); background: var(--act-button-inverse-bg); color: var(--act-button-inverse-fg); font-size: var(--act-body-size); font-weight: var(--act-weight-display); display: inline-flex; align-items: center; transition: background .25s ease, color .25s ease; }
.inner .in-btn:hover { background: var(--act-paper); color: var(--act-ink); }
.inner .in-pill:hover { color: inherit; }
.in-pill { height: 3.125rem; padding: 0 1.25rem; border-radius: var(--act-radius-pill); box-shadow: inset 0 0 0 .0625rem var(--act-outline); font-size: var(--act-body-size); font-weight: var(--act-weight-strong); display: inline-flex; align-items: center; transition: background .25s ease, color .25s ease; }
.in-pill.is-primary { padding: 0 1.375rem; background: var(--act-button-primary-bg); color: var(--act-button-primary-fg); box-shadow: none; }
.inner .in-pill.is-primary:hover { background: var(--act-button-primary-hover-bg); color: var(--act-button-primary-hover-fg); }

/* ---------------------------------------------------------------- the white section and the ink call-out */
.in-white { background: var(--act-white); }
.in-band { padding: 7.5rem var(--act-gutter); }
.in-ink { max-width: var(--act-content-max); margin: 0 auto; background: var(--act-ink); color: var(--act-paper); border-radius: var(--act-radius-stage); padding: clamp(2rem, 5vw, 4rem); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.in-ink b { display: block; font-variation-settings: var(--act-display-wdth); font-weight: var(--act-weight-display); font-size: clamp(1.875rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -0.05em; margin-bottom: .625rem; }
.in-ink span { font-size: 1.0625rem; color: var(--act-body-on-ink); }

/* ---------------------------------------------------------------- docs */
.dx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); gap: .875rem; margin-top: 1.25rem; }
.dx-card { background: var(--act-white); border-radius: 1.375rem; padding: 1.375rem; box-shadow: var(--act-ring); display: flex; flex-direction: column; gap: .5rem; color: var(--act-ink); transition: box-shadow .25s ease; }
.inner .dx-card:hover { box-shadow: var(--act-ring-hover); color: var(--act-ink); }
.dx-card .n { font-size: var(--act-small); font-weight: var(--act-weight-display); color: var(--act-ember-text); }
.dx-card .t { font-size: 1.1875rem; font-weight: var(--act-weight-display); }
.dx-card .d { font-size: .9375rem; color: var(--act-body); line-height: 1.5; }
.dx-sec { background: var(--act-white); padding: 6.875rem var(--act-gutter) 8.75rem; }
.dx-grid { max-width: var(--act-content-max); margin: 0 auto; display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; }
.dx-side { position: sticky; top: 6.875rem; align-self: start; display: flex; flex-direction: column; gap: .25rem; font-size: .9375rem; }
.dx-side span { font-size: var(--act-micro); font-weight: var(--act-weight-display); color: var(--act-faint); padding: 0 .75rem .5rem; }
.dx-side a { padding: .5rem .75rem; border-radius: .75rem; transition: background .2s ease; }
.inner .dx-side a:hover { background: var(--act-paper); color: var(--act-ink); }
.dx-art { display: flex; flex-direction: column; gap: 6rem; max-width: 47.5rem; min-width: 0; }
.dx-blk { scroll-margin-top: 6.875rem; display: flex; flex-direction: column; gap: 1.25rem; }
.dx-steps { display: flex; flex-direction: column; gap: .625rem; }
.dx-step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .875rem; padding: 1.125rem; border-radius: 1.125rem; background: var(--act-paper); font-size: var(--act-body-size); line-height: 1.55; }
.dx-step .dot { width: 2rem; height: 2rem; border-radius: 50%; background: var(--act-ink); color: var(--act-paper); font-weight: var(--act-weight-display); display: flex; align-items: center; justify-content: center; }
.dx-step b { font-weight: 650; }
.dx-note { margin: 0; font-size: var(--act-body-size); line-height: var(--act-lh-body); color: var(--act-body); padding: 1rem 1.125rem; border-radius: 1rem; box-shadow: inset 0 0 0 .09375rem var(--act-ember); }
.dx-run { display: flex; flex-direction: column; gap: .5rem; }
.dx-run > div { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .875rem 1rem; border-radius: 1rem; background: var(--act-paper); }
.dx-run i { font-style: normal; font-weight: var(--act-weight-display); color: var(--act-ember-text); }
.dx-run span { font-size: var(--act-body-size); }
.dx-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.625rem), 1fr)); gap: .625rem; }
.dx-filters > div { padding: 1rem; border-radius: 1rem; background: var(--act-paper); }
.dx-filters b { font-weight: 650; display: block; margin-bottom: .25rem; }
.dx-filters span { font-size: .9375rem; color: var(--act-body); }

/* the Shopify-admin mock-up (Inter, which the design system allows only inside admin mock-ups) */
.adm { border-radius: var(--act-radius-tile); box-shadow: 0 0 0 .0625rem var(--act-admin-line); overflow: hidden; font-family: var(--act-font-admin); color: var(--act-admin-ink); background: var(--act-white); }
.adm-bar { padding: .875rem 1.125rem; background: var(--act-admin-head); font-size: var(--act-small); font-weight: 650; }
.adm-row { display: grid; grid-template-columns: 7.5rem 1fr 1fr; padding: .8125rem 1.125rem; font-size: .9375rem; border-top: .0625rem solid var(--act-admin-line); }
.adm-row.is-head { padding: .625rem 1.125rem; font-size: .75rem; font-weight: var(--act-weight-strong); color: var(--act-admin-muted); }
.adm-row .k { font-weight: var(--act-weight-strong); }
.adm .was { background: var(--act-was-bg); color: var(--act-was-fg); padding: .125rem .5rem; border-radius: .375rem; text-decoration: line-through; }
.adm .now { background: var(--act-now-bg); color: var(--act-now-fg); padding: .125rem .5rem; border-radius: .375rem; font-weight: 650; }
.chips { display: flex; flex-wrap: wrap; gap: .625rem; font-family: var(--act-font-admin); }
.chip { background: var(--act-likely-bg); color: var(--act-likely-fg); padding: .3125rem .75rem; border-radius: var(--act-radius-pill); font-size: var(--act-small); font-weight: var(--act-weight-strong); }
.chip.is-unknown { background: var(--act-unknown-bg); color: var(--act-unknown-fg); }
.chip.is-wait { background: var(--act-notyet-bg); color: var(--act-notyet-fg); }

/* ---------------------------------------------------------------- questions (details), shared with Contact */
.qa { display: flex; flex-direction: column; gap: .875rem; }
.qa details { border-top: .0625rem solid var(--act-line); }
.qa details:last-child { border-bottom: .0625rem solid var(--act-line); }
.qa summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; font-size: 1.125rem; font-weight: var(--act-weight-strong); }
.qa summary [data-plus] { font-size: 1.5rem; font-weight: 400; transition: transform .3s ease; }
.qa p { margin: 0 0 1.25rem; font-size: var(--act-body-size); line-height: var(--act-lh-body); color: var(--act-body); }
.qa.is-big summary { padding: 1.375rem 0; font-size: 1.1875rem; }
.qa.is-big p { margin-bottom: 1.375rem; font-size: 1.0625rem; }

/* ---------------------------------------------------------------- contact */
.ct-grid { max-width: var(--act-content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.ct-card { background: var(--act-white); border-radius: 1.625rem; box-shadow: var(--act-ring); padding: 1.875rem; display: flex; flex-direction: column; gap: .875rem; }
.ct-card .t { font-size: var(--act-card-title); font-weight: var(--act-weight-display); letter-spacing: var(--act-track-card); }
.ct-card .b { font-size: var(--act-body-size); line-height: var(--act-lh-body); color: var(--act-body); flex: 1; }
.ct-mail { display: flex; align-items: center; gap: .5rem; padding: .375rem .375rem .375rem 1rem; border-radius: var(--act-radius-pill); background: var(--act-paper); }
.inner .ct-mail a:hover { color: var(--act-ink); }
.ct-mail a { flex: 1; font-size: .9375rem; font-weight: 650; color: var(--act-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-copy { height: 2.375rem; padding: 0 1rem; border: 0; border-radius: var(--act-radius-pill); background: var(--act-ink); color: var(--act-paper); font: inherit; font-size: var(--act-small); font-weight: var(--act-weight-strong); cursor: pointer; }
html:not(.js) .ct-copy { display: none; }
.ct-sec { padding: 0 var(--act-gutter) 8.125rem; }
.ct-wrap { max-width: var(--act-content-max); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 3.5rem; }
.ct-wrap .ct-grid { max-width: none; margin: 0; }
.ct-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.ct-box { background: var(--act-white); border-radius: 1.625rem; box-shadow: var(--act-ring); padding: 2.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ct-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.ct-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .75rem; font-size: 1.0625rem; line-height: 1.6; color: var(--act-body); }
.ct-list b { color: var(--act-ink); font-weight: 650; }
.inner .ct-list a { color: var(--act-ember-text); text-decoration: underline; text-underline-offset: var(--act-space-1); }

/* ---------------------------------------------------------------- 404 */
.nf { min-height: 100vh; padding: 10rem var(--act-gutter) 6.25rem; display: flex; align-items: center; }
.nf-in { max-width: var(--act-content-max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 3.5rem; align-items: center; }
.nf-copy { display: flex; flex-direction: column; gap: 1.375rem; }
.nf-copy .in-lede { font-size: 1.1875rem; max-width: 44ch; }
.nf-links { display: flex; flex-wrap: wrap; gap: .625rem; }
.nf-panel { box-shadow: var(--act-shadow-demo); border-radius: 1.625rem; }
.nf-panel .chip { padding: .1875rem .625rem; font-size: var(--act-micro); }
.nf-panel .adm-row { grid-template-columns: 8.75rem 1fr; padding: .9375rem 1.375rem; }
.nf-panel .adm-bar { padding: 1rem 1.375rem; }
.nf-panel .mute { color: var(--act-admin-muted); }

@media (max-width: 56.25em) {
  .dx-grid { grid-template-columns: minmax(0, 1fr); }
  .dx-side { display: none; }
}
@media (max-width: 600px) {
  .adm-row { grid-template-columns: 5.5rem 1fr 1fr; padding-left: .875rem; padding-right: .875rem; }
}

/* ---------------------------------------------------------------- phones (ACT-272)
   /docs, /contact and the 404: the desktop section paddings (7 to 9rem) become 3 to 4rem, targets are 44px, buttons fill the row. */
@media (max-width: 40rem) {
  .in-head { padding: 7rem var(--act-gutter) 2.5rem; }
  .in-head-c { padding-bottom: 2.5rem; }
  .in-head-in { gap: 1rem; }
  .in-h1 { font-size: clamp(2.5rem, 12.5vw, 3.25rem); }
  .in-h2 { font-size: clamp(1.875rem, 8.6vw, 2.25rem); }
  .in-lede { font-size: 1.0625rem; }
  .in-band { padding: 3.5rem var(--act-gutter); }
  .in-ink { padding: 1.75rem 1.5rem; border-radius: 1.75rem; }
  .in-btn { height: 3.25rem; width: 100%; justify-content: center; }
  .in-pill { min-height: 2.75rem; height: auto; padding-top: .5rem; padding-bottom: .5rem; }

  .dx-cards { gap: .625rem; margin-top: 1rem; }
  .dx-card { padding: 1.125rem 1.25rem; border-radius: 1.25rem; }
  .dx-sec { padding: 3rem var(--act-gutter) 4rem; }
  .dx-art { gap: 3rem; }
  .dx-blk { gap: 1rem; scroll-margin-top: 5.5rem; }
  .dx-step { grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding: 1rem; }
  .dx-run > div { padding: .75rem .875rem; }
  .dx-note { padding: .875rem 1rem; }
  .dx-filters { grid-template-columns: minmax(0, 1fr); gap: .5rem; line-height: 1.45; }
  .dx-filters > div { padding: .875rem; }
  .adm-bar { padding: .75rem .875rem; }
  .adm-row { grid-template-columns: 4.5rem 1fr 1fr; padding: .75rem .875rem; gap: .25rem; }

  .qa summary { min-height: 3.5rem; align-items: center; padding: 1rem 0; font-size: 1.0625rem; }
  .qa.is-big summary { padding: 1rem 0; font-size: 1.0625rem; }
  .qa.is-big p, .qa p { font-size: 1rem; }

  .ct-sec { padding-bottom: 4rem; }
  .ct-wrap { gap: 2rem; }
  .ct-card { padding: 1.5rem; border-radius: 1.375rem; }
  .ct-box { padding: 1.5rem; border-radius: 1.375rem; gap: 1rem; }
  .ct-h2 { font-size: 1.625rem; }
  .ct-mail { padding-left: .875rem; }
  .ct-mail a { font-size: .875rem; min-height: 2.75rem; display: flex; align-items: center; }
  .ct-copy { height: 2.75rem; min-width: 4rem; }
  .ct-list { gap: .625rem; font-size: 1rem; padding-left: 1.125rem; }

  .nf { min-height: 0; padding: 7rem var(--act-gutter) 3.5rem; display: block; }
  .nf-in { gap: 2rem; }
  .nf-copy { gap: 1rem; }
  .nf-copy .in-lede { font-size: 1.0625rem; }
  .nf-links { gap: .5rem; }
  .nf-panel .adm-row { grid-template-columns: 6rem 1fr; padding: .75rem 1rem; }
  .nf-panel .adm-bar { padding: .875rem 1rem; }
}

/* ---------------------------------------------------------------- landing pages (ACT-283)
   /shopify-product-change-history and its siblings, /compare/rewind: the docs layout (in-head, dx-sec, dx-art) plus a list, a table and a two-column pick. */
.lp-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
.glyph { display: inline-block; flex: none; width: 1.0625rem; height: 1.0625rem; margin-right: .625rem; background: center / contain no-repeat; }
.glyph-white { width: 1.0625rem; height: 1.0625rem; background-image: url('/assets/third-party/shopify-glyph-white.png'); }
.glyph-black { width: 1.0625rem; height: 1.0625rem; background-image: url('/assets/third-party/shopify-glyph-black.png'); }
.inner .in-pill.is-primary:hover .glyph-white { background-image: url('/assets/third-party/shopify-glyph-black.png'); }
.lp-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .625rem; font-size: var(--act-body-size); line-height: var(--act-lh-body); color: var(--act-body); }
.inner .lp-list a, .inner .lp-table a, .inner .dx-art .qa a { color: var(--act-ember-text); text-decoration: underline; text-underline-offset: var(--act-space-1); }
.lp-tablewrap { border-radius: 1.375rem; box-shadow: var(--act-ring); background: var(--act-white); overflow: hidden; }
.lp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; color: var(--act-body); }
.lp-table th, .lp-table td { text-align: left; vertical-align: top; padding: 1rem 1.125rem; border-top: .0625rem solid var(--act-line); }
.lp-table thead th { border-top: 0; background: var(--act-paper); font-size: var(--act-small); font-weight: var(--act-weight-strong); color: var(--act-ink); }
.lp-table tbody th { width: 22%; font-weight: 650; color: var(--act-ink); }
.lp-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .875rem; }
.lp-pick > div { padding: 1.25rem; border-radius: 1.125rem; background: var(--act-paper); display: flex; flex-direction: column; gap: .75rem; }
.lp-pick b { font-weight: var(--act-weight-display); font-size: 1.1875rem; color: var(--act-ink); }

@media (max-width: 40rem) {
  .lp-table, .lp-table thead, .lp-table tbody, .lp-table tr, .lp-table th, .lp-table td { display: block; width: 100%; }
  .lp-table thead { display: none; }
  .lp-table tr { border-top: .0625rem solid var(--act-line); padding: .5rem 0; }
  .lp-table tr:first-child { border-top: 0; }
  .lp-table th, .lp-table td { border-top: 0; padding: .375rem 1rem; }
  .lp-table tbody th { width: 100%; padding-top: .75rem; }
  .lp-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--act-micro); font-weight: var(--act-weight-strong); color: var(--act-faint); }
  .lp-pick > div { padding: 1rem; }
  .lp-ctas .in-pill { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- docs topic pages (ACT-296) */
.dx-crumb { display: flex; gap: .5rem; align-items: center; font-size: var(--act-micro); font-weight: var(--act-weight-strong); color: var(--act-faint); margin: 0; }
.dx-crumb a { text-decoration: underline; text-underline-offset: .2em; }
.dx-side a[aria-current="page"] { background: var(--act-paper); color: var(--act-ink); font-weight: var(--act-weight-strong); }
/* two buttons in one ink band (docs: Contact support and the install button) */
.in-ink .in-band-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 40rem) { .in-ink .in-band-btns { flex-direction: column; align-self: stretch; } }

/* the help center (ACT-298): search box and results, sidebar groups, last-updated line, Copy for AI and the AI chips */
.dx-sr { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dx-search { position: relative; z-index: 30; display: flex; gap: .5rem; max-width: 40rem; margin-top: 1.5rem; flex-wrap: wrap; }
.dx-search input { flex: 1 1 14rem; min-width: 0; height: 3.25rem; padding: 0 1.25rem; border: 0; border-radius: var(--act-radius-pill); background: var(--act-white); box-shadow: var(--act-ring); font: inherit; font-size: 1rem; color: var(--act-ink); }
.dx-search input:focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 2px; }
.dx-search button { height: 3.25rem; padding: 0 1.5rem; border: 0; border-radius: var(--act-radius-pill); background: var(--act-ink); color: var(--act-white); font: inherit; font-weight: var(--act-weight-strong); cursor: pointer; }
.dx-search button:focus-visible, .dx-copy:focus-visible, .dx-ai-chips a:focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }
.dx-results { position: absolute; z-index: 5; top: 3.75rem; left: 0; right: 0; max-height: 22rem; overflow: auto; display: flex; flex-direction: column; padding: .5rem; border-radius: 1.25rem; background: var(--act-white); box-shadow: var(--act-ring-hover); }
.dx-results[hidden] { display: none; }
.dx-results a { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .875rem; border-radius: .75rem; color: var(--act-ink); }
.dx-results a b { font-weight: var(--act-weight-strong); }
.dx-results a span { font-size: var(--act-small); color: var(--act-muted); }
.inner .dx-results a:hover, .dx-results a[aria-selected="true"] { background: var(--act-paper); color: var(--act-ink); }
.dx-results .none { margin: 0; padding: .75rem .875rem; color: var(--act-body); }
.dx-side .grp { display: block; padding: 1rem 0 .25rem; }
.dx-side .grp a { padding: .375rem .75rem; font-size: var(--act-micro); font-weight: var(--act-weight-display); color: var(--act-faint); }
.dx-side a.sub { padding-left: 1.25rem; }
.dx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; font-size: var(--act-small); color: var(--act-muted); }
.dx-copy { height: 2.375rem; padding: 0 1rem; border: 0; border-radius: var(--act-radius-pill); background: var(--act-white); box-shadow: var(--act-ring); font: inherit; font-size: var(--act-small); font-weight: var(--act-weight-strong); color: var(--act-ink); cursor: pointer; }
.dx-ai { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .625rem; }
.dx-ai-label { font-size: var(--act-small); font-weight: var(--act-weight-strong); color: var(--act-muted); }
.dx-ai-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.dx-ai-chips a { padding: .375rem .75rem; border-radius: var(--act-radius-pill); background: var(--act-white); box-shadow: var(--act-ring); color: var(--act-ink); font-size: var(--act-small); }
.dx-ai-note { flex-basis: 100%; font-size: var(--act-small); color: var(--act-muted); }
.in-head-in > .dx-cards { margin-top: 2.5rem; }
@media (max-width: 600px) {
  .dx-search button { flex: 1 1 100%; }
  .dx-copy, .dx-ai-chips a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------- /about (ACT-299): the founder, the rules, the other apps */
.ab-founder-sec { padding: 6rem var(--act-gutter); }
.ab-founder { max-width: var(--act-content-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4rem; align-items: center; }
.ab-photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--act-radius-stage); background: var(--act-paper); box-shadow: var(--act-ring); display: block; }
.ab-founder-text { display: flex; flex-direction: column; gap: 1.25rem; max-width: 40rem; }
.ab-label { margin: 0; font-size: var(--act-small); font-weight: var(--act-weight-strong); color: var(--act-faint); }
.ab-links { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .25rem; }
.ab-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; }
.ab-two-h { position: sticky; top: 6.875rem; }
.ab-two-b { display: flex; flex-direction: column; gap: 1.25rem; }
.ab-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
.ab-rule { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border-radius: var(--act-radius-card); background: var(--act-paper); }
.ab-rule i { font-style: normal; font-size: var(--act-small); font-weight: var(--act-weight-display); color: var(--act-ember-text); }
.ab-rule b { font-size: 1.1875rem; font-weight: var(--act-weight-display); line-height: 1.25; }
.ab-rule span { font-size: .9375rem; line-height: 1.55; color: var(--act-body); }
.ab-apps-sec { padding-top: 6.5rem; padding-bottom: 6.5rem; }
.ab-apps-in { max-width: var(--act-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.ab-apps-in .in-p { max-width: 40rem; }
.ab-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .875rem; margin-top: .75rem; }
.ab-app { background: var(--act-white); border-radius: var(--act-radius-card); padding: 1.75rem; box-shadow: var(--act-ring); display: flex; flex-direction: column; gap: 1rem; color: var(--act-ink); }
.ab-app-head { display: flex; align-items: center; gap: 1rem; }
.ab-app-icon { width: 3.5rem; height: 3.5rem; border-radius: .875rem; object-fit: cover; flex: none; box-shadow: var(--act-ring); background: var(--act-paper); display: block; }
.ab-app-n { margin: 0; font-size: var(--act-card-title); font-weight: var(--act-weight-display); letter-spacing: var(--act-track-card); }
.ab-app-d { margin: 0; font-size: var(--act-body-size); line-height: var(--act-lh-body); color: var(--act-body); flex: 1; }
.ab-app-btns { display: flex; flex-wrap: wrap; gap: .625rem; }
.ab-company-sec { padding-top: 6rem; padding-bottom: 6rem; }
.ab-facts { margin: 0; display: grid; border-radius: var(--act-radius-card); background: var(--act-paper); padding: .5rem 1.5rem; }
.ab-fact { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; box-shadow: inset 0 -.0625rem 0 var(--act-line); }
.ab-fact:last-child { box-shadow: none; }
.ab-fact dt { font-size: var(--act-small); font-weight: var(--act-weight-strong); color: var(--act-muted); }
.inner .ab-fact a { color: var(--act-ember-text); text-decoration: underline; text-underline-offset: var(--act-space-1); }
.ab-fact dd { margin: 0; font-size: var(--act-body-size); line-height: 1.5; overflow-wrap: anywhere; }
.ab-more { padding-top: 5rem; padding-bottom: 3rem; }
.ab-close { padding-top: 3rem; padding-bottom: 7.5rem; }
@media (max-width: 56.25em) {
  .ab-two { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ab-two-h { position: static; }
}
@media (max-width: 48em) {
  .ab-founder { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ab-photo { max-width: 16rem; }
}
@media (max-width: 40rem) {
  .ab-founder-sec { padding: 3rem var(--act-gutter); }
  .ab-apps-sec { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .ab-more { padding-top: 3rem; padding-bottom: 1rem; }
  .ab-close { padding-top: 1.5rem; padding-bottom: 3.5rem; }
  .ab-rule { padding: 1.25rem; }
  .ab-app { padding: 1.25rem; border-radius: 1.25rem; }
  .ab-app-btns .in-pill { flex: 1 1 100%; justify-content: center; }
  .ab-company-sec { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .ab-fact { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .ab-links .in-pill { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 56.25em) { .ab-rules { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } }
@media (max-width: 40rem) { .ab-founder-text .in-h2 { font-size: clamp(1.75rem, 8vw, 2.125rem); overflow-wrap: anywhere; } }