/**
 * 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; }
}