/* Isolated component contract. Page CSS may set margin, not internal geometry.

   One tile: label, dotted rule, pixel arrow. On hover buttons.js fills the tile
   with a field of 6px pixels that switch on at random over ~240ms, then the tile
   settles to a solid hover colour. Without script the hover is a plain colour
   change. --action-mark is the arrow colour on the tile. */
html body .lp-action[data-lp-variant]{--action-fill:var(--color-ink);--action-text:var(--color-white);--action-mark:var(--color-orchid);--action-hover:var(--color-orchid);--action-hover-text:var(--color-ink);--action-hover-mark:var(--color-ink);--action-icon:var(--color-ink);--action-arrow:var(--color-orchid);--action-hover-icon:var(--color-orchid);--action-hover-arrow:var(--color-ink);
  display:inline-flex;align-items:center;justify-content:flex-start;gap:14px;position:relative;isolation:isolate;overflow:hidden;width:fit-content;max-width:100%;height:var(--size-action);min-height:var(--size-action);flex-shrink:0;padding:0 16px 0 20px;border:0;border-radius:6px;background:var(--action-fill);color:var(--action-text);box-shadow:none;text-decoration:none;text-transform:uppercase;font:400 13px/1.25 var(--mono,monospace);letter-spacing:.02em;cursor:pointer;vertical-align:middle;transition:background-color 0s,color var(--motion-feedback,.18s) var(--ease)}
html body .lp-action[data-lp-variant="secondary"]{--action-fill:var(--color-action-secondary);--action-text:var(--color-ink);--action-mark:var(--color-ink);--action-hover:var(--color-ink);--action-hover-text:var(--color-white);--action-hover-mark:var(--color-orchid)}
html body .lp-action .lp-action__px{position:absolute;inset:0;z-index:0;display:grid;pointer-events:none}
html body .lp-action .lp-action__px i{background:var(--action-hover);box-shadow:0 0 0 1px var(--action-hover);opacity:0;transition:opacity 0s}
html body .lp-action .lp-action__label{position:relative;z-index:1;display:flex;align-items:center;min-width:0;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-transform:inherit}
html body .lp-action .lp-action__text{display:block;margin:0;padding:0;font:inherit;line-height:1.25;white-space:normal;color:inherit;text-decoration:none}
html body .lp-action .lp-action__rule{position:relative;z-index:1;align-self:stretch;flex:0 0 0;width:0;margin:12px 0;border-left:2px dotted color-mix(in srgb,currentColor 35%,transparent)}
html body .lp-action .lp-action__icon{position:relative;z-index:1;display:block;flex:0 0 16px;width:16px;height:16px;margin:0;padding:0;overflow:hidden;color:var(--action-mark);transition:color var(--motion-feedback,.18s) var(--ease)}
html body .lp-action .lp-action__arrows{position:absolute;inset:0;display:block;margin:0;padding:0;color:inherit}
html body .lp-action .lp-action__arrows svg{position:absolute;left:0;top:0;width:16px;height:16px;fill:currentColor;stroke:none;transition:transform .3s steps(4,end)}
html body .lp-action .lp-action__arrows svg:first-child{transform:translateX(-20px)}
html body .lp-action .lp-action__arrows svg:last-child{transform:translateX(0)}
html body .lp-action:is(:hover,:focus-visible,.is-engaged):not(:disabled):not([aria-disabled="true"]){color:var(--action-hover-text);background-color:var(--action-hover);transition:background-color 0s linear .26s,color var(--motion-feedback,.18s) var(--ease)}
html body .lp-action:is(:hover,:focus-visible,.is-engaged):not(:disabled):not([aria-disabled="true"]) .lp-action__px i{opacity:1;transition:opacity .01s linear var(--d,0ms)}
html body .lp-action:is(:hover,:focus-visible,.is-engaged):not(:disabled):not([aria-disabled="true"]) .lp-action__icon{color:var(--action-hover-mark)}
html body .lp-action:is(:hover,:focus-visible,.is-engaged):not(:disabled):not([aria-disabled="true"]) .lp-action__arrows svg:first-child{transform:translateX(0)}
html body .lp-action:is(:hover,:focus-visible,.is-engaged):not(:disabled):not([aria-disabled="true"]) .lp-action__arrows svg:last-child{transform:translateX(20px)}
html body .lp-action:focus-visible{outline:2px solid var(--color-focus-action);outline-offset:4px;border-radius:6px}
html body .lp-action:active:not(:disabled){filter:brightness(.92)}
html body .lp-action:is(:disabled,[aria-disabled="true"]){opacity:.4;cursor:not-allowed;filter:none}
/* Compact card action: text, then a small square arrow tile. No dissolve. */
html body .lp-action[data-lp-variant="tertiary"]{--action-fill:transparent;--action-hover:transparent;--action-text:currentColor;--action-hover-text:currentColor;color:inherit;gap:12px;padding:0;border-radius:0;overflow:visible}
html body .lp-action[data-lp-variant="tertiary"] .lp-action__px,html body .lp-action[data-lp-variant="tertiary"] .lp-action__rule{display:none}
html body .lp-action[data-lp-variant="tertiary"] .lp-action__label::before,html body .lp-action[data-lp-variant="tertiary"] .lp-action__label::after{content:none}
html body .lp-action[data-lp-variant="tertiary"] .lp-action__icon{flex-basis:var(--size-action-tertiary-icon);width:var(--size-action-tertiary-icon);height:var(--size-action-tertiary-icon);border-radius:6px;background:var(--action-icon);color:var(--action-arrow);transition:background-color var(--motion-action,.24s) steps(3,end),color var(--motion-action,.24s) var(--ease)}
html body .lp-action[data-lp-variant="tertiary"] .lp-action__arrows svg{left:calc(50% - 8px);top:calc(50% - 8px)}
html body .lp-action[data-lp-variant="tertiary"] .lp-action__arrows svg:first-child{transform:translateX(-40px)}
html body .lp-action[data-lp-variant="tertiary"]:is(:hover,:focus-visible,.is-engaged) .lp-action__icon{background:var(--action-hover-icon);color:var(--action-hover-arrow)}
html body .lp-action[data-lp-variant="tertiary"]:is(:hover,:focus-visible,.is-engaged) .lp-action__arrows svg:last-child{transform:translateX(40px)}
html body .lp-action:is(:hover,:focus-visible,.is-engaged) .lp-action__text,html body button:is(:hover,:focus-visible) .lp-action__text{text-decoration:none}
html body :is(.final-cta,.about-cta,[data-surface="dark"]) .lp-action:not([data-lp-variant="tertiary"]){--action-fill:var(--color-orchid);--action-text:var(--color-ink);--action-mark:var(--color-ink);--action-hover:var(--color-white);--action-hover-text:var(--color-ink);--action-hover-mark:var(--color-ink)}
html body .cf-explore.lp-action{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;visibility:hidden;pointer-events:none;--action-fill:var(--color-bone);--action-text:var(--color-ink);--action-mark:var(--color-ink);filter:drop-shadow(0 3px 9px #0003)}
html body .cf-slide.is-active .cf-explore.lp-action{visibility:visible;pointer-events:auto}
html body .post-thumb .lp-action{align-self:flex-start;margin-top:auto}
html body .work-card>div>.lp-action{margin-top:28px}
html body .app-section-cta.lp-action{margin-top:24px}
html body .tool-catalog .lp-action{margin-top:24px}
@media(max-width:640px){html body .lp-action[data-lp-variant]{font-size:12px;padding-left:14px;padding-right:12px;gap:12px}html body .cf-explore.lp-action{bottom:16px;font-size:11px}html body .lp-action[data-lp-variant="tertiary"]{padding:0}}
@media(prefers-reduced-motion:reduce){html body .lp-action,html body .lp-action *,html body .lp-action *::before,html body .lp-action *::after{transition:none!important}}
/* Surface themes change contrast, never template geometry or behaviour. */
html body .tool-catalog>a:nth-child(2) .lp-action[data-lp-variant="tertiary"]{--action-icon:var(--color-orchid);--action-arrow:var(--color-ink);--action-hover-icon:var(--color-white);--action-hover-arrow:var(--color-ink)}
html body .tool-catalog>a:nth-child(3) .lp-action[data-lp-variant="tertiary"]{--action-hover-icon:var(--color-ink);--action-hover-arrow:var(--color-white)}
html body .insight-action.lp-action{margin-top:28px;align-self:flex-start}
.insights__feature::before,.insight-card::before{clip-path:none}
html body :is(.insight-card--teal,.insight-card--ink) .lp-action[data-lp-variant="tertiary"]{--action-icon:var(--color-orchid);--action-arrow:var(--color-ink);--action-hover-icon:var(--color-white);--action-hover-arrow:var(--color-ink)}

html body .tool-gate-form .lp-action[data-lp-variant]{justify-self:start;--action-fill:var(--color-orchid);--action-text:var(--color-ink);--action-mark:var(--color-ink);--action-hover:var(--color-white);--action-hover-text:var(--color-ink);--action-hover-mark:var(--color-ink)}
@media(max-width:520px){html body .tool-gate-form .lp-action[data-lp-variant]{width:100%}}

/* High-contrast hero theme. Keep the shared geometry and hover behaviour. */
html body :where(.hero-main,.lp-photo-header,.web-hero,.about-hero,.services-hero,.lp-editorial-header,.lp-tools-header,.studio-page .intro) .lp-action[data-lp-variant]:not([data-lp-variant="tertiary"]){--action-fill:var(--color-orchid);--action-text:var(--color-ink);--action-mark:var(--color-ink);--action-hover:var(--color-white);--action-hover-text:var(--color-ink);--action-hover-mark:var(--color-ink)}

/* Explicit inverse-surface theme; same geometry and interaction. */
html body .lp-action[data-lp-variant="tertiary"][data-lp-surface="inverse"]{--action-icon:var(--color-orchid);--action-arrow:var(--color-ink);--action-hover-icon:var(--color-white);--action-hover-arrow:var(--color-ink);color:var(--color-white)}