@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,500;1,700&display=swap');
:root {
  --brand-primary: #0432ff;
  --surface-page: #fff;
  --surface-muted: #fafafa;
  --surface-inverse: #000;
  --surface-nav: #fffffff5;
  --surface-selection: #dce4ff;
  --text-primary: #111;
  --text-secondary: #404040;
  --text-link: var(--brand-primary);
  --text-on-brand: #fff;
  --text-on-dark: #fff;
  --text-secondary-inverse: #e4e4e4;
  --text-accent-inverse: #a6b8ff;
  --line-subtle: #dedede;
  --line-strong: #999;
  --line-inverse: #555;
  --font-brand: 'Raleway', Arial, Helvetica, sans-serif;
  --font-reading: Arial, Helvetica, sans-serif;
  --text-eyebrow: .875rem;
  --text-caption: 1rem;
  --text-small: 1rem;
  --text-body: 1.125rem;
  --text-lead: 1.25rem;
  --text-subtitle: 1.375rem;
  --text-title: 1.875rem;
  --heading-page: clamp(3rem,6.5vw,5.75rem);
  --heading-section: clamp(2.5rem,4.4vw,4rem);
  --heading-card: clamp(2rem,3.2vw,2.875rem);
  --heading-document: clamp(2.25rem,4vw,3.625rem);
  --heading-refraction: clamp(3.5rem,5.4vw,5rem);
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-heading: 1.08;
  --leading-body: 1.7;
  --leading-document: 1.8;
  --tracking-body: -.01em;
  --tracking-heading: -.045em;
  --tracking-label: .06em;
  --layout-width: 80rem;
  --measure-copy: 41rem;
  --measure-title: 66rem;
  --measure-hero: 45rem;
  --measure-document: 49.375rem;
  --measure-short: 25rem;
  --measure-statistics: 34rem;
  --sidebar-width: 14rem;
  --gutter: 2rem;
  --section-space: 5rem;
  --hero-top: 10.625rem;
  --hero-height: 47.5rem;
  --nav-height: 6rem;
  --logo-height: 4.25rem;
  --footer-logo-height: 4.75rem;
  --nav-blur: .75rem;
  --anchor-offset: calc(var(--nav-height) + var(--space-6));
  --target-size: 3.25rem;
  --textarea-height: 10rem;
  --ratio-cover: 2/1;
  --rule: 1px;
  --rule-strong: 2px;
  --border-inverse: var(--rule) solid var(--line-inverse);
  --focus-color: var(--brand-primary);
  --focus-width: 3px;
  --focus-offset: 4px;
  --shadow-navigation: 0 12px 24px #00000012;
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --opacity-disabled: .5;
  --z-navigation: 10;
  --z-skip: 20;
  --action-bg: transparent;
  --action-text: var(--text-primary);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-30: 7.5rem;
  --invoice-width: 18rem;
  --text-control: 1.25rem;
  --component-rf-hero-min-height: 43rem;
  --component-rf-hero-bottom-p-max-width: 25.9375rem;
  --component-refraction-editorial-h2-font-size: clamp(2.375rem,4.4vw,4rem);
  --component-example-heading-h2-font-size: clamp(2.375rem,4.5vw,4.125rem);
  --component-example-heading-p-max-width: 26.875rem;
  --component-demo-explanation-min-height: 6.25rem;
  --component-demo-stage-min-height: 29.0625rem;
  --component-invoice-paper-min-height: 18.75rem;
  --component-paper-symbol-width: 0.875rem;
  --component-paper-symbol-height: 0.875rem;
  --component-paper-line-height: 0.25rem;
  --component-stage-progress-height: 0.1875rem;
  --component-rf-hero-min-height-compact: 45.625rem;
  --component-rf-hero-bottom-p-max-width-compact: 20rem;
  --component-demo-stage-min-height-compact: 27.5rem;
  --component-invoice-paper-min-height-compact: 16.875rem;
  --component-paper-symbol-width-compact: 0.625rem;
  --component-paper-symbol-height-compact: 0.625rem;
  --font-display: var(--font-brand);
  --motion-press: 80ms;
  --art-editorial-width: 26rem;
  --art-editorial-mobile-width: 22rem;
  --art-business-height: 22rem;
  --art-cta-width: 27rem;
  --process-number-size: clamp(3rem,5vw,5rem);
  --process-intro-width: 23rem;
  --art-contact-height: 32rem;
  --brand-warm: #ff4b23;
  --heading-closing: clamp(2.75rem,4.5vw,4.25rem);
  --closing-art-height: 28rem;
  --action-shape: polygon(4% 7%,98% 0,100% 92%,0 100%);
  --action-shape-secondary: polygon(0 3%,96% 0,100% 100%,2% 94%);
  --action-edge: var(--text-primary);
  --action-inset: 0px;
  --action-offset-x: 0px;
  --action-offset-y: 0px;
  --action-print-offset: 3px;
  --ratio-game-mobile: 4/3;
  --game-frame-width: 4px;
  --game-frame-shape: polygon(1% 1.5%,99% 0,100% 98.5%,0 100%);
  --game-frame-width-mobile: 3px;
  --rf-hero-art-space: 20rem;
  --weight-regular: 400;
  --leading-control: 1.3;
  --heading-home: clamp(3.5rem,6vw,5.5rem);
  --viewport-height: 100dvh;
  --angle-diagonal: 45deg;
  --tracking-minus-_02: -.02em;
  --leading-1_04: 1.04;
  --leading-1_2: 1.2;
  --tracking-_1: .1em;
  --leading-_99: .99;
  --tracking-minus-_065: -.065em;
  --leading-1_06: 1.06;
  --tracking-minus-_055: -.055em;
  --leading-1_5: 1.5;
  --leading-1_6: 1.6;
  --leading-1_75: 1.75;
  --tracking-_14: .14em;
  --tracking-_04: .04em;
  --tracking-minus-_05: -.05em;
  --tracking-_12: .12em;
  --leading-1_1: 1.1;
  --leading-1_15: 1.15;
  --tracking-minus-_035: -.035em;
  --tracking-_05: .05em;
  --tracking-minus-_025: -.025em;
  --tracking-minus-_07: -.07em;
  --leading-1_02: 1.02;
  --link-underline-offset: .2em;
  --menu-bar-shift: calc(var(--rule-strong) + var(--space-1));
  --menu-bar-shift-negative: calc(-1 * var(--menu-bar-shift));
  --angle-diagonal-negative: calc(-1 * var(--angle-diagonal));
  --workflow-controls-width: 280px;
  --workflow-controls-width-tablet: 210px;
  --capability-label-width: 130px;
  --capability-label-width-mobile: 90px;
  --process-marker-width: 45px;
  --hero-art-space-mobile: 19rem;
  --stat-min-width: 12rem;
  --skip-link-hidden-offset: -200%;
  --hero-art-start: 50%;
  --hero-copy-share: 48%;
  --rf-hero-copy-share: 52%;
  --paper-line-width: 68%;
  --paper-line-wide-width: 85%;
  --paper-line-short-width: 40%;
  --cta-art-share-tablet: 40%;
  --nav-link-gap: 1.5rem;
  --nav-marker-height: 3px;
  --hero-art-inset: max(var(--gutter), calc((100% - var(--layout-width)) / 2));
  --hero-illustration-max-height: 34rem;
}
@media(max-width:767px) {
:root {
  --gutter: 1.375rem;
  --section-space: 4rem;
  --hero-top: 8rem;
  --hero-height: 45rem;
  --nav-height: 5.25rem;
  --logo-height: 3.5rem;
  --heading-page: clamp(2.75rem,11vw,3.5rem);
  --heading-section: 2.5rem;
  --heading-card: 2rem;
  --heading-document: 2.25rem;
  --heading-refraction: 3.375rem;
}
}
/* Base components. Responsive and accessibility conditions are in conditions.css. */
*,:before,:after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-brand);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,p,ul,ol,figure {
  margin: 0;
}

h1,h2,h3,h4 {
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
}

em {
  font-weight: var(--weight-medium);
}

img {
  max-width: 100%;
  display: block;
}

button,input,select,textarea {
  font: inherit;
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--text-link);
  text-underline-offset: var(--link-underline-offset);
}

a,button {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

[hidden] {
  display: none;
}

::selection {
  background: var(--surface-selection);
  color: var(--text-primary);
}

.container {
  width: 100%;
  max-width: var(--layout-width);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.text-center {
  text-align: center;
}

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: var(--space-4);
  left: var(--gutter);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-page);
  transform: translateY(var(--skip-link-hidden-offset));
}

.skip-link:focus {
  transform: none;
}

.page-main:focus {
  outline: none;
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-navigation);
  background: var(--surface-nav);
  border-bottom: 0;
  backdrop-filter: blur(var(--nav-blur));
}

.nav-container {
  max-width: var(--layout-width);
  margin: auto;
  min-height: var(--nav-height);
  padding: var(--space-3) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo img {
  height: var(--logo-height);
  width: auto;
  filter: brightness(0);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-1);
  transition: color var(--motion-fast) var(--ease-standard);
}

.nav-link:not(.nav-contact):is(:hover,[aria-current]) {
  color: var(--text-link);
}

.nav-link:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: var(--space-1);
  right: var(--space-1);
  bottom: var(--space-1);
  height: var(--nav-marker-height);
  background: var(--brand-primary);
  clip-path: var(--action-shape-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.nav-link:not(.nav-contact):is(:hover,[aria-current])::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  border: 0;
  background: none;
  min-width: var(--target-size);
  min-height: var(--target-size);
  padding: var(--space-2);
}

.nav-toggle span {
  display: block;
  width: var(--space-7);
  height: var(--rule-strong);
  background: var(--text-primary);
  margin: var(--space-1) 0;
  transition: transform var(--motion-fast) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard);
}

.nav-toggle[aria-expanded=true] span:first-child {
  transform: translateY(var(--menu-bar-shift)) rotate(var(--angle-diagonal));
}

.nav-toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded=true] span:last-child {
  transform: translateY(var(--menu-bar-shift-negative)) rotate(var(--angle-diagonal-negative));
}

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-size);
  max-width: 100%;
  padding: var(--space-5) var(--space-8);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--action-text);
  font-family: var(--font-display);
  font-size: var(--text-control);
  font-weight: var(--weight-bold);
  line-height: var(--leading-control);
  text-align: center;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}

.btn::before,.btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: var(--action-shape);
}

.btn::before {
  inset: var(--action-inset);
  z-index: -1;
  background: var(--action-bg);
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.btn::after {
  inset: 0;
  z-index: -2;
  background: var(--action-edge);
  transform: translate(var(--action-offset-x),var(--action-offset-y));
  transition: transform var(--motion-press) var(--ease-standard);
}

.btn-primary {
  --action-bg: var(--text-primary);
  --action-text: var(--text-on-dark);
  --action-edge: var(--brand-warm);
  --action-inset: 0;
  --action-offset-x: var(--action-print-offset);
  --action-offset-y: var(--action-print-offset);
}

.nav-contact {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.nav-contact[aria-current] {
  --action-bg: var(--brand-primary);
}

.btn-outline,.btn-secondary {
  --action-bg: var(--surface-page);
  --action-text: var(--text-primary);
  --action-edge: var(--text-primary);
  --action-inset: var(--rule-strong);
  --action-shape: var(--action-shape-secondary);
}

.btn-white {
  --action-bg: var(--surface-page);
  --action-text: var(--text-primary);
  --action-edge: var(--brand-warm);
  --action-inset: 0;
  --action-offset-x: var(--action-print-offset);
  --action-offset-y: var(--action-print-offset);
}

.btn:is(:hover,:focus-visible):not(:disabled) {
  --action-bg: var(--brand-primary);
  color: var(--text-on-brand);
}

.btn:active:not(:disabled)::after {
  transform: none;
}

.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.action-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  padding-block: var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-control);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-strong);
  text-underline-offset: var(--space-2);
  transition: color var(--motion-fast) var(--ease-standard);
}

.action-link:is(:hover,:focus-visible) {
  color: var(--text-link);
}

.action-link.light {
  color: var(--text-on-dark);
}

.action-link.light:is(:hover,:focus-visible) {
  color: var(--text-accent-inverse);
}

.section-tag,.studio-kicker,.privacy-eyebrow,.eyebrow {
  display: block;
  color: var(--text-link);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-6);
}

.eyebrow.light {
  color: var(--text-accent-inverse);
}

.section-title {
  font-size: var(--heading-section);
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
}

.section-title em,.page-hero em {
  color: var(--text-link);
}

.section-header {
  margin-bottom: var(--space-10);
}

.section-description {
  font-size: var(--text-lead);
  color: var(--text-secondary);
  max-width: var(--measure-copy);
  margin-top: var(--space-6);
}

.page-hero {
  padding: var(--hero-top) 0 var(--section-space);
  border-bottom: 0;
}

.page-hero h1 {
  font-size: var(--heading-page);
  font-weight: var(--weight-medium);
  max-width: var(--measure-title);
}

.page-hero p {
  font-size: var(--text-lead);
  color: var(--text-secondary);
  max-width: var(--measure-copy);
  margin-top: var(--space-6);
}

.content-section,.section-space,.games-preview,.featured {
  padding-block: var(--section-space);
}

.section-surface,.games-preview,.our-story-section {
  background: var(--surface-muted);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: var(--hero-height);
  padding: var(--hero-top) 0 var(--section-space);
  background: var(--surface-page);
  color: var(--text-primary);
  overflow: hidden;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  left: var(--hero-art-start);
  top: var(--nav-height);
  right: var(--hero-art-inset);
  background: url('/fls-system/art/home-table.webp') center/contain no-repeat;
}

.hero-content {
  max-width: min(var(--hero-copy-share),var(--measure-hero));
}

.hero-title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-minus-_02);
  font-size: var(--heading-home);
  line-height: var(--leading-1_04);
  font-weight: var(--weight-semibold);
  margin: var(--space-5) 0 var(--space-7);
}

.hero-title em {
  color: var(--text-primary);
}

.hero-description {
  font-size: var(--text-lead);
  color: var(--text-secondary);
  max-width: var(--measure-short);
  margin-bottom: var(--space-8);
}

.hero .studio-kicker {
  color: var(--text-link);
}

.hero-actions,.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero-stats {
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 0;
  max-width: var(--measure-statistics);
}

.stat-value {
  display: block;
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
}

.stat-label {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.focus-band .action-link {
  grid-column: 2;
  justify-self: start;
  align-self: start;
  margin-top: var(--space-6);
}

.focus-band:nth-child(even) :is(h3,p,.action-link) {
  grid-column: 1;
}

.games-grid,.games-full-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-20) var(--space-10);
}

.game-image,.game-detail-image {
  position: relative;
  aspect-ratio: var(--ratio-cover);
  padding: var(--game-frame-width);
  background: var(--text-primary);
  clip-path: var(--game-frame-shape);
  border-radius: 0;
}

.game-image picture,.game-detail-image picture {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: var(--game-frame-shape);
}

.game-image img,.game-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
}

.game-card:hover h3 {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.service-summary {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-10);
  margin-top: var(--space-8);
}

.service-summary h3 {
  font-size: var(--heading-card);
  margin-bottom: var(--space-4);
}

.service-summary p {
  max-width: var(--measure-copy);
  color: var(--text-secondary);
}

.game-info {
  padding-block: var(--space-6);
}

.game-info h3 {
  font-size: var(--text-title);
  margin-bottom: var(--space-3);
}

.game-info p,.game-detail-content p {
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.game-detail-content {
  padding: var(--space-7) 0 var(--space-9);
  border-bottom: 0;
}

.game-detail-content h3 {
  font-size: var(--heading-card);
  margin: var(--space-5) 0 var(--space-4);
}

.game-detail-content p {
  max-width: var(--measure-copy);
  margin-bottom: var(--space-6);
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.game-tags span {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  border-bottom: 0;
  padding-block: var(--space-1);
  color: var(--text-secondary);
}

.game-features {
  border-top: 0;
  padding-top: var(--space-5);
  margin-top: var(--space-6);
}

.game-features h4 {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

.game-features ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-5);
}

.game-features li {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.mojivia-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.mojivia-art strong {
  font-family: var(--font-display);
  font-size: var(--heading-page);
  font-weight: var(--weight-bold);
  font-style: normal;
}

.mojivia-art span {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  margin-top: var(--space-4);
}

.content-grid,.service-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: start;
}

.studio-illustration img {
  width: 100%;
  height: auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.stat-box {
  text-align: center;
  padding: var(--space-8);
}

.stat-box-value {
  display: block;
  color: var(--text-link);
  font-size: var(--heading-section);
  font-weight: var(--weight-medium);
}

.stat-box-label {
  font-size: var(--text-body);
  color: var(--text-secondary);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-10);
}

.value-card {
  padding-top: var(--space-6);
  border-top: 0;
}

.value-card h3 {
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.value-card p {
  color: var(--text-secondary);
}

.illustrated-hero>.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-16);
  align-items: center;
}

.illustrated-hero h1 {
  grid-column: 1;
  align-self: end;
}

.illustrated-hero p {
  grid-column: 1;
  align-self: start;
}

.hero-illustration {
  height: auto;
  grid-column: 2;
  grid-row: 1/3;
  width: 100%;
  max-height: var(--hero-illustration-max-height);
  object-fit: contain;
}

.service-detail {
  padding-block: var(--section-space);
}

.service-detail:nth-of-type(even) {
  background: var(--surface-muted);
}

.service-content h2 {
  font-size: var(--heading-section);
  margin-bottom: var(--space-6);
}

.service-content p {
  font-size: var(--text-lead);
  line-height: var(--leading-document);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.service-features-list,.process-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.service-features-list li {
  border-top: 0;
  padding-top: var(--space-6);
}

.service-features-list h3 {
  font-size: var(--text-subtitle);
  margin-bottom: var(--space-2);
  font-weight: var(--weight-medium);
}

.service-features-list p,.step-content p {
  font-size: var(--text-body);
  color: var(--text-secondary);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.contact-info h2,.contact-form h2 {
  font-size: var(--heading-card);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-8);
}

.contact-methods {
  display: grid;
  gap: var(--space-8);
}

.contact-method {
  padding-bottom: var(--space-6);
  border-bottom: 0;
}

.contact-method h3 {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.contact-method a,.contact-value {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-semibold);
}

.contact-note {
  color: var(--text-secondary);
  font-size: var(--text-body);
  margin-top: var(--space-2);
}

.contact-form {
  border-top: var(--rule-strong) solid var(--text-primary);
  padding-top: var(--space-7);
}

.form-group {
  margin-bottom: var(--space-6);
}

.form-group label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.form-group :is(input,textarea,select) {
  width: 100%;
  min-height: var(--target-size);
  padding: var(--space-4);
  background: var(--surface-muted);
  color: var(--text-primary);
  border: 0;
  border-bottom: var(--rule) solid var(--line-strong);
  border-radius: 0;
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.form-group :is(input,textarea,select):focus {
  border-color: var(--brand-primary);
}

.form-group textarea {
  min-height: var(--textarea-height);
  resize: vertical;
}

.form-submit {
  width: 100%;
}

.cta-section {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  padding-block: var(--section-space);
}

.cta-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5) var(--space-16);
  align-items: center;
}

.cta-content h2 {
  font-size: var(--heading-section);
  font-weight: var(--weight-medium);
  grid-column: 1;
}

.cta-content p {
  grid-column: 1;
  max-width: var(--measure-copy);
}

.cta-content .btn {
  grid-column: 2;
  grid-row: 1/3;
  --action-bg: var(--surface-page);
  --action-text: var(--text-primary);
  --action-edge: var(--brand-warm);
}

.cta-content .btn:is(:hover,:focus-visible),.editorial-cta .btn:is(:hover,:focus-visible) {
  --action-bg: var(--text-primary);
  color: var(--text-on-dark);
}

.cta-section,.editorial-cta {
  --focus-color: var(--surface-page);
}

.footer {
  padding-top: var(--space-16);
  background: var(--surface-inverse);
  color: var(--text-secondary-inverse);
  --focus-color: var(--text-accent-inverse);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-9);
}

.footer-logo {
  max-height: var(--footer-logo-height);
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-6);
}

.footer-col p,.footer-col a,.footer-col li,.footer-bottom {
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

.footer-col h4 {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-on-dark);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  padding: 0;
  list-style: none;
}

.footer-col li {
  margin-bottom: var(--space-3);
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:hover {
  color: var(--text-on-dark);
  text-decoration: underline;
}

.footer-bottom {
  padding-block: var(--space-6);
  border-top: var(--border-inverse);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}

.story-copy-paragraph {
  color: var(--text-secondary);
  line-height: var(--leading-document);
  margin-bottom: var(--space-6);
}

.studio-hero>.container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-10);
  align-items: center;
}

.studio-hero h1 {
  font-size: var(--heading-section);
}

.story-editorial {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-16);
}

.story-editorial-copy p:last-child {
  margin-bottom: 0;
}

.capability-statement {
  font-size: var(--heading-section);
  font-weight: var(--weight-bold);
  line-height: var(--leading-1_2);
  letter-spacing: var(--tracking-heading);
}

.capability-statement span {
  color: var(--brand-primary);
}

.page-hero h1,.game-info h3,.game-detail-content h3,.section-title,.cta-content h2 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-minus-_02);
}

.privacy-hero {
  padding: var(--hero-top) 0 var(--space-12);
}

.privacy-hero h1 {
  font-size: var(--heading-document);
  font-weight: var(--weight-medium);
  max-width: var(--measure-title);
  margin-bottom: var(--space-6);
}

.privacy-hero p {
  font-size: var(--text-body);
  max-width: var(--measure-document);
  color: var(--text-secondary);
}

.privacy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.privacy-meta strong {
  color: var(--text-primary);
}

.privacy-section {
  padding: var(--space-12) 0 var(--section-space);
}

.privacy-layout,.policy-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0,var(--measure-document));
  gap: var(--space-16);
  align-items: start;
}

.policy-shell {
  max-width: var(--layout-width);
  padding: var(--hero-top) var(--gutter) var(--section-space);
  margin: auto;
}

.privacy-nav,.policy-sidebar {
  position: sticky;
  top: var(--anchor-offset);
}

.privacy-nav h2 {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.privacy-nav ul {
  list-style: none;
  padding: 0;
}

.privacy-nav a,.policy-sidebar a {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-small);
  padding-block: var(--space-2);
  text-decoration: none;
}

.privacy-nav a:hover,.policy-sidebar a:hover {
  color: var(--text-link);
  text-decoration: underline;
}

.policy-sidebar h2 {
  font-size: var(--text-title);
  margin-bottom: var(--space-6);
}

.policy-sidebar a[aria-current=page] {
  color: var(--text-link);
  font-weight: var(--weight-semibold);
}

.privacy-content,.policy-document {
  min-width: 0;
  font-family: var(--font-reading);
  font-size: var(--text-body);
  line-height: var(--leading-document);
  color: var(--text-secondary);
}

.privacy-content h2,.policy-document h2 {
  font-family: var(--font-brand);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

.privacy-content h3 {
  font-family: var(--font-brand);
  font-size: var(--text-subtitle);
  color: var(--text-primary);
  margin: var(--space-7) 0 var(--space-3);
}

.privacy-content section+section {
  margin-top: var(--space-12);
}

.privacy-content p+p {
  margin-top: var(--space-4);
}

.privacy-content ul,.policy-document ul {
  padding-left: var(--space-6);
  margin-block: var(--space-4);
}

.privacy-content li+li,.policy-document li+li {
  margin-top: var(--space-3);
}

.privacy-content strong,.policy-document strong {
  color: var(--text-primary);
}

.privacy-content a,.policy-document a {
  overflow-wrap: anywhere;
}

.policy-summary {
  margin-bottom: var(--space-12);
}

.policy-game-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-brand);
  font-size: var(--text-small);
  margin-bottom: var(--space-12);
}

.policy-game-links span {
  flex-basis: 100%;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.policy-game-links a {
  padding-block: var(--space-2);
}

.policy-document h1 {
  font-family: var(--font-brand);
  font-size: var(--heading-document);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

.policy-document h2 {
  margin-top: var(--space-10);
}

.policy-document p {
  margin-bottom: var(--space-5);
}

.policy-document code {
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.policy-document small {
  font-size: var(--text-small);
}

.policy-document .contact {
  margin-top: var(--space-10);
}

.policy-heading {
  margin-bottom: var(--space-12);
}

.policy-heading .action-link {
  font-size: var(--text-caption);
  margin-bottom: var(--space-6);
}

.policy-body section+section {
  margin-top: var(--space-12);
}

.policy-related {
  margin-top: var(--space-3);
  font-size: var(--text-caption);
}

.policy-related summary,.policy-index summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
  padding-block: var(--space-3);
}

.policy-related .section-tag,.policy-related h2 {
  display: none;
}

.policy-action {
  font-size: var(--text-caption);
  padding: var(--space-3) var(--space-5);
}

.refraction-editorial main {
  overflow: hidden;
}

.rf-hero {
  background: var(--surface-page);
  color: var(--text-primary);
  position: relative;
  min-height: var(--component-rf-hero-min-height);
  padding: var(--space-30) 0 var(--space-18);
  isolation: isolate;
}

.rf-hero>.container {
  position: relative;
  z-index: 2;
}

.rf-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.rf-hero h1 {
  font-family: var(--font-brand);
  font-size: var(--heading-refraction);
  line-height: var(--leading-_99);
  letter-spacing: var(--tracking-minus-_065);
  font-weight: var(--weight-medium);
  max-width: var(--rf-hero-copy-share);
  margin: var(--space-16) 0 var(--space-18);
}

.rf-hero h1 em {
  color: var(--text-link);
  font-weight: var(--weight-medium);
}

.rf-hero-art {
  position: absolute;
  inset: var(--nav-height) var(--hero-art-inset) var(--space-8) var(--hero-art-start);
  z-index: 0;
  background: url('/fls-system/art/editorial-workflow.webp') center/contain no-repeat;
  pointer-events: none;
  opacity: 1;
}

.rf-hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-24);
}

.rf-hero-bottom p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: var(--component-rf-hero-bottom-p-max-width);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  align-items: start;
}

.rf-intro {
  padding: var(--section-space) 0;
  background: var(--surface-page);
}

.refraction-editorial h2 {
  font-size: var(--component-refraction-editorial-h2-font-size);
  line-height: var(--leading-1_06);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-minus-_055);
  margin: 0;
}

.refraction-editorial h2 em {
  color: var(--brand-primary);
}

.intro-copy {
  padding-top: var(--space-10);
}

.intro-copy>p {
  margin-bottom: var(--space-6);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  font-size: var(--text-body);
}

.intro-copy>.lead {
  font-size: var(--text-subtitle);
  color: var(--text-primary);
  line-height: var(--leading-1_5);
}

.contrast-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  padding-top: var(--space-6);
  margin-top: var(--space-10);
}

.contrast-pair span {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}

.contrast-pair p {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: var(--leading-1_6);
}

.contrast-pair>div:last-child span {
  color: var(--brand-primary);
}

.rf-example {
  background: var(--surface-muted);
  color: var(--text-primary);
  padding: var(--section-space) 0;
}

.example-heading {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-20);
  align-items: end;
  margin-bottom: var(--space-14);
}

.example-heading h2 {
  font-size: var(--component-example-heading-h2-font-size);
}

.example-heading h2 em {
  color: var(--text-primary);
  font-style: normal;
}

.example-heading>p {
  font-size: var(--text-lead);
  line-height: var(--leading-1_75);
  color: var(--text-secondary);
  max-width: var(--component-example-heading-p-max-width);
  margin-bottom: var(--space-1);
}

.workflow-demo {
  display: grid;
  grid-template-columns: var(--workflow-controls-width) minmax(0,1fr);
  gap: var(--space-10);
  background: transparent;
  padding-top: 0;
}

.demo-label {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-_14);
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--space-5);
}

.demo-controls [role=tablist] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.demo-controls [role=tab] {
  text-align: left;
  border: 0;
  border-left: var(--focus-width) solid transparent;
  min-height: var(--target-size);
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-4) var(--space-4);
  font: var(--weight-medium) var(--text-subtitle) var(--font-brand);
  cursor: pointer;
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.demo-controls [role=tab] span {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-_1);
  color: var(--text-secondary);
}

.demo-controls [role=tab][aria-selected=true] {
  color: var(--text-primary);
  border-left-color: var(--brand-primary);
  background: var(--surface-selection);
  font-weight: var(--weight-bold);
}

.demo-controls [role=tab][aria-selected=true] span {
  color: var(--brand-primary);
}

.demo-controls [role=tab]:hover {
  color: var(--text-primary);
}

.demo-explanation {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  margin: var(--space-7) 0 var(--space-5);
  min-height: var(--component-demo-explanation-min-height);
}

.demo-note {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-1_6);
}

.demo-stage {
  --focus-color: var(--brand-primary);
  background: var(--surface-page);
  color: var(--text-primary);
  min-height: var(--component-demo-stage-min-height);
  position: relative;
  padding: var(--space-7);
  overflow: hidden;
}

.demo-stage-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-_04);
  border-bottom: 0;
  padding-bottom: var(--space-5);
}

.demo-status {
  color: var(--brand-primary);
  background: var(--surface-selection);
  padding: var(--space-1) var(--space-2);
  font-weight: var(--weight-semibold);
}

.document-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7) 0 var(--space-4);
}

.invoice-paper {
  background: var(--surface-muted);
  padding: var(--space-7) var(--space-6);
  transform: none;
  box-shadow: none;
  min-height: var(--component-invoice-paper-min-height);
}

.paper-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--weight-semibold) var(--text-small) var(--font-reading);
  letter-spacing: var(--tracking-_1);
  color: var(--text-secondary);
}

.paper-symbol {
  width: var(--component-paper-symbol-width);
  height: var(--component-paper-symbol-height);
  background: var(--brand-primary);
  transform: rotate(var(--angle-diagonal));
}

.invoice-paper h3 {
  font-size: var(--text-title);
  margin: var(--space-7) 0 var(--space-3);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-minus-_05);
}

.paper-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-bottom: var(--space-7);
}

.paper-line {
  height: var(--component-paper-line-height);
  background: var(--surface-page);
  width: var(--paper-line-width);
  margin: var(--space-2) 0;
}

.paper-line.wide {
  width: var(--paper-line-wide-width);
}

.paper-line.short {
  width: var(--paper-line-short-width);
  margin-top: var(--space-6);
}

.invoice-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-small);
  border-bottom: 0;
  padding: var(--space-4) 0;
}

.paper-foot {
  display: block;
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-top: var(--space-7);
}

.record-label {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-_12);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.record-panel h3 {
  font-size: var(--text-title);
  line-height: var(--leading-1_1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-minus-_05);
  margin: var(--space-4) 0 var(--space-7);
}

.record-fields>div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-bottom: 0;
  padding: var(--space-3) 0;
}

.record-fields span {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.record-fields strong {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.review-message {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-1_6);
  border-left: var(--rule-strong) solid var(--brand-primary);
  padding-left: var(--space-3);
  color: var(--brand-primary);
}

.stage-progress {
  height: var(--component-stage-progress-height);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--line-subtle);
}

.stage-progress span {
  display: block;
  background: var(--brand-primary);
  width: 25%;
  height: 100%;
  transition: width var(--motion-standard) var(--ease-standard);
}

.example-principles {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-small);
}

.rf-value {
  background: var(--surface-page);
  padding: var(--section-space) 0;
}

.section-intro-line {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-14);
  align-items: start;
  margin-bottom: var(--space-16);
}

.section-intro-line>.eyebrow {
  padding-top: var(--space-2);
}

.value-stories {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-12);
}

.value-stories article {
  border: 0;
  background: transparent;
}

.story-number {
  display: block;
  font-size: var(--text-eyebrow);
  color: var(--brand-primary);
  padding-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.value-stories h3 {
  font-size: var(--text-title);
  line-height: var(--leading-1_15);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-minus-_035);
  margin: 0 0 var(--space-4);
}

.value-stories p {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: var(--leading-1_75);
}

.story-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-_05);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.rf-capabilities {
  padding: var(--section-space) 0;
}

.capability-list {
  margin-top: var(--space-9);
}

.capability-list article {
  display: grid;
  grid-template-columns: var(--capability-label-width) 1fr;
  gap: var(--space-6);
  padding: var(--space-5) 0;
}

.capability-list h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-minus-_025);
}

.capability-list p {
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.rf-process {
  padding: var(--section-space) 0;
  background: var(--surface-page);
}

.process-editorial {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-14);
  padding: 0;
}

.process-editorial li {
  padding-top: var(--space-6);
}

.process-editorial li>span {
  font-size: var(--heading-card);
  color: var(--brand-primary);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-minus-_07);
}

.process-editorial h3 {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-medium);
  margin: var(--space-6) 0 var(--space-4);
}

.process-editorial p {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: var(--leading-1_75);
}

.editorial-cta {
  padding: var(--section-space) 0;
  background: var(--brand-primary);
  color: var(--surface-page);
  --focus-color: var(--text-accent-inverse);
}

.editorial-cta h2 {
  font-family: var(--font-display);
  font-size: var(--heading-closing);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.editorial-cta h2 em {
  color: var(--text-accent-inverse);
}

[data-stage="1"] .stage-progress span {
  width: 25%;
}

[data-stage="2"] .stage-progress span {
  width: 50%;
}

[data-stage="3"] .stage-progress span {
  width: 75%;
}

[data-stage="4"] .stage-progress span {
  width: 100%;
}

.rf-example .eyebrow {
  color: var(--brand-primary);
}

.workflow-map {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  gap: var(--space-4);
}

.workflow-map li {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  font-size: var(--text-subtitle);
}

.workflow-map span {
  display: grid;
  place-items: center;
  width: var(--target-size);
  height: var(--target-size);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-size: var(--text-body);
}

.rf-value h2 em,.rf-capabilities h2 em,.rf-process h2 em {
  font-style: normal;
  color: inherit;
}

.refraction-editorial h2,.capability-statement {
  font-family: var(--font-brand);
  letter-spacing: var(--tracking-minus-_02);
}

.closing-layout {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: var(--space-12);
  align-items: center;
}

.closing-copy .eyebrow {
  color: var(--text-on-brand);
}

.closing-copy p {
  font-size: var(--text-lead);
  max-width: var(--measure-short);
  margin: var(--space-7) 0 var(--space-8);
}

.closing-illustration {
  width: 100%;
  height: auto;
  max-height: var(--closing-art-height);
  object-fit: contain;
}

.editorial-section-art {
  display: block;
  width: min(100%,var(--art-editorial-width));
  height: auto;
  object-fit: contain;
}

.editorial-art-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--art-editorial-width);
  gap: var(--space-10);
  align-items: center;
}

.editorial-art-heading .eyebrow {
  display: block;
  margin-bottom: var(--space-5);
}

.editorial-art-heading .editorial-section-art {
  justify-self: end;
}

.service-content .editorial-section-art {
  margin-block: var(--space-7);
}

.business-art {
  width: 100%;
  height: var(--art-business-height);
  object-fit: contain;
  margin-bottom: var(--space-8);
}

.service-summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-summary-item .action-link {
  margin-top: auto;
  padding-top: var(--space-6);
}

.cta-illustrated {
  grid-template-columns: minmax(0,1fr) var(--art-cta-width);
}

.cta-illustrated .btn {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
}

.cta-illustration {
  grid-column: 2;
  grid-row: 1/4;
  width: 100%;
  height: auto;
}

.service-process>.container {
  display: grid;
  grid-template-columns: var(--process-intro-width) minmax(0,1fr);
  gap: var(--space-16);
  align-items: start;
}

.service-process .section-header {
  position: sticky;
  top: var(--anchor-offset);
}

.service-process .process-steps {
  gap: var(--space-10);
  counter-reset: process;
}

.service-process .process-step {
  display: grid;
  grid-template-columns: var(--space-24) minmax(0,1fr);
  padding: 0;
  gap: var(--space-7);
  align-items: start;
}

.service-process .step-number {
  font-family: var(--font-display);
  font-size: var(--process-number-size);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--brand-primary);
}

.service-process .step-content {
  border-top: var(--rule-strong) solid var(--text-primary);
  padding-top: var(--space-5);
}

.service-process .step-content h3 {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.service-process .step-content p {
  font-size: var(--text-body);
  max-width: var(--measure-copy);
}

[data-page="contact"] .hero-illustration {
  max-height: var(--art-contact-height);
  object-fit: contain;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  font-size: var(--text-caption);
}

.product-hero-grid,.product-story-grid,.product-modes {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-12);
  align-items: center;
}

.product-hero {
  text-align: left;
}

.product-hero p {
  margin: var(--space-6) 0;
  max-width: var(--measure-copy);
}

.product-hero-art {
  width: 100%;
  height: auto;
  max-height: var(--hero-illustration-max-height);
  object-fit: contain;
}

.product-modes {
  align-items: start;
}

.product-modes h3,.reading-copy h3,.support-strip h2 {
  font-size: var(--text-title);
  margin-bottom: var(--space-5);
}

.reading-copy h2 {
  font-size: var(--heading-card);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-6);
}

.reading-copy p,.product-modes p,.support-strip p {
  font-size: var(--text-body);
  color: var(--text-secondary);
  max-width: var(--measure-copy);
  margin-bottom: var(--space-6);
}

.reading-copy ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-8);
}

.reading-copy li {
  margin-bottom: var(--space-3);
}

.reading-copy h3 {
  margin-top: var(--space-10);
}

.resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  list-style: none;
}

.support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.form-guidance {
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  margin-block: var(--space-4);
}

.cta-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.cta-resource-links a {
  color: inherit;
  text-underline-offset: var(--space-1);
}

.game-detail-content h2 {
  font-size: var(--heading-card);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}

.game-features h3 {
  font-size: var(--text-subtitle);
  margin-bottom: var(--space-4);
}

.game-detail-content .game-subtitle {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-4);
}
@media(max-width:1023px) {
.nav-container {
  padding-block: var(--space-2);
}

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-page);
  padding: var(--space-6) var(--gutter);
  box-shadow: var(--shadow-navigation);
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  max-height: calc(var(--viewport-height) - var(--nav-height));
  overflow-y: auto;
}

.js .nav-menu {
  display: none;
}

.js .nav-menu[data-open=true] {
  display: flex;
}

.js .nav-toggle {
  display: block;
}

html:not(.js) .nav-menu {
  position: static;
  width: 100%;
  box-shadow: none;
}

html:not(.js) .nav-container {
  flex-wrap: wrap;
}

html:not(.js) .nav {
  position: static;
}

.nav-link {
  display: block;
  min-height: var(--target-size);
  font-size: var(--text-lead);
  width: 100%;
}

}

@media(max-width:1023px) {
.editorial-split {
  gap: var(--space-12);
}

.workflow-demo {
  grid-template-columns: var(--workflow-controls-width-tablet) 1fr;
  gap: var(--space-7);
}

.document-layout {
  gap: var(--space-5);
}

.invoice-paper {
  padding: var(--space-5) var(--space-4);
}

.demo-stage {
  padding: var(--space-5);
}

.record-panel h3 {
  font-size: var(--text-subtitle);
}

.value-stories {
  gap: var(--space-7);
}

.example-heading {
  gap: var(--space-10);
}

.capability-list article {
  display: block;
}

.capability-list h3 {
  margin-bottom: var(--space-3);
}

.content-grid,.service-grid,.contact-grid {
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

.footer-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.privacy-layout,.policy-shell {
  gap: var(--space-8);
}

.stats-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.editorial-art-heading {
  grid-template-columns: minmax(0,1fr) var(--art-editorial-mobile-width);
  gap: var(--space-7);
}

.service-process>.container {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.service-process .section-header {
  position: static;
}

.cta-illustrated {
  grid-template-columns: 1fr var(--cta-art-share-tablet);
}
}

@media(max-width:767px) {
.product-hero-grid,.product-story-grid,.product-modes {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.support-strip {
  flex-direction: column;
  align-items: flex-start;
}
.product-hero-art {
  max-height: var(--art-editorial-mobile-width);
}

.rf-hero {
  padding: var(--space-28) 0 var(--rf-hero-art-space);
  min-height: var(--component-rf-hero-min-height-compact);
}

.rf-hero-top {
  gap: var(--space-5);
}

.rf-hero .eyebrow {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-_1);
}

.rf-hero h1 {
  max-width: 100%;
  margin: var(--space-10) 0 var(--space-9);
  line-height: var(--leading-1_02);
}

.rf-hero-bottom {
  display: block;
}

.rf-hero-bottom p {
  max-width: var(--component-rf-hero-bottom-p-max-width-compact);
}

.rf-hero-art {
  inset: auto 0 0;
  height: var(--rf-hero-art-space);
}

.refraction-editorial h2 {
  font-size: var(--heading-card);
}

.editorial-split,.example-heading,.section-intro-line {
  display: block;
}

.rf-intro {
  padding: var(--space-16) 0;
}

.intro-copy {
  padding-top: var(--space-7);
}

.contrast-pair {
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.rf-example {
  padding: var(--space-16) 0;
}

.example-heading {
  margin-bottom: var(--space-8);
}

.example-heading>p {
  margin-top: var(--space-6);
  font-size: var(--text-body);
}

.workflow-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
}

.demo-controls [role=tablist] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.demo-controls [role=tab] {
  font-size: var(--text-small);
  padding: var(--space-3);
  gap: var(--space-2);
}

.demo-controls [role=tab] span {
  margin: 0;
}

.demo-explanation {
  min-height: 0;
  margin: var(--space-5) 0 var(--space-4);
}

.demo-stage {
  padding: var(--space-4) var(--space-3);
  min-height: var(--component-demo-stage-min-height-compact);
}

.demo-stage-top {
  gap: var(--space-2);
  flex-wrap: wrap;
}

.document-layout {
  gap: var(--space-4);
  padding-top: var(--space-8);
  grid-template-columns: 1fr;
}

.invoice-paper {
  padding: var(--space-4) var(--space-3);
  min-height: var(--component-invoice-paper-min-height-compact);
  max-width: var(--invoice-width);
  width: 100%;
  margin-inline: auto;
}

.paper-brand {
  font-size: var(--text-small);
  gap: var(--space-1);
}

.paper-symbol {
  width: var(--component-paper-symbol-width-compact);
  height: var(--component-paper-symbol-height-compact);
}

.invoice-paper h3 {
  font-size: var(--text-subtitle);
}

.paper-meta {
  flex-wrap: wrap;
  gap: var(--space-3);
  line-height: var(--leading-document);
}

.record-panel h3 {
  font-size: var(--text-subtitle);
  margin: var(--space-3) 0 var(--space-5);
}

.review-message {
  padding-left: var(--space-2);
}

.example-principles {
  display: block;
}

.example-principles span {
  display: block;
  padding: var(--space-2) 0;
  border: 0;
}

.rf-value,.rf-capabilities,.rf-process {
  padding: var(--space-16) 0;
}

.section-intro-line {
  margin-bottom: var(--space-9);
}

.value-stories {
  grid-template-columns: 1fr;
}

.value-stories p {
  font-size: var(--text-body);
}

.story-number {
  padding-top: var(--space-5);
}

.capability-list article {
  grid-template-columns: var(--capability-label-width-mobile) 1fr;
  gap: var(--space-5);
}

.process-editorial {
  display: block;
}

.process-editorial li {
  display: grid;
  grid-template-columns: var(--process-marker-width) 1fr;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-7);
}

.process-editorial li>span {
  font-size: var(--text-title);
  grid-row: 1/3;
}

.process-editorial h3 {
  margin: 0;
}

.process-editorial p {
  grid-column: 2;
}

.editorial-cta {
  padding: var(--space-16) 0;
}

.editorial-cta h2 {
  font-size: var(--heading-card);
}

.editorial-cta .btn {
  font-size: var(--text-small);
}

.record-fields>div {
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-3);
}

.record-fields span,.record-fields strong,.record-label {
  font-size: var(--text-small);
}

.closing-layout {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.closing-copy .btn {
  font-size: var(--text-control);
}

.closing-illustration {
  max-height: var(--art-editorial-mobile-width);
}

.hero-background {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: var(--invoice-width);
}

.hero {
  padding-bottom: var(--hero-art-space-mobile);
}

.hero-content {
  max-width: 100%;
}

.service-summary {
  grid-template-columns: 1fr;
}

.hero-actions {
  flex-direction: column;
  align-items: stretch;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-3);
}

.games-grid,.games-full-grid,.values-grid {
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.game-image,.game-detail-image {
  aspect-ratio: var(--ratio-game-mobile);
  padding: var(--game-frame-width-mobile);
}

.game-actions .btn {
  flex: 1 1 auto;
}

.game-features ul {
  grid-template-columns: 1fr;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--stat-min-width)),1fr));
  gap: var(--space-4);
}

.stat-box {
  padding: var(--space-4);
}

.illustrated-hero>.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero-illustration {
  margin-top: var(--space-8);
}

.cta-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-6);
}

.footer-grid {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.footer-bottom {
  flex-direction: column;
}

.privacy-layout,.policy-shell {
  display: block;
}

.policy-shell {
  padding-top: var(--space-6);
}

.privacy-meta {
  flex-direction: column;
}

.privacy-nav,.policy-sidebar {
  position: static;
  margin-bottom: var(--space-10);
}

.privacy-nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-4);
}

.policy-sidebar h2 {
  display: none;
}

.policy-sidebar a {
  display: inline-block;
  margin-right: var(--space-4);
}

.studio-hero>.container,.story-editorial {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.editorial-art-heading {
  grid-template-columns: 1fr;
}

.editorial-art-heading .editorial-section-art {
  justify-self: start;
  width: var(--art-editorial-mobile-width);
  max-width: 100%;
}

.business-art {
  height: auto;
  max-height: var(--art-business-height);
}

.cta-illustration {
  width: min(100%,var(--art-cta-width));
  order: -1;
}

.service-process .process-step {
  grid-template-columns: var(--space-14) minmax(0,1fr);
  gap: var(--space-5);
}

.service-process .step-content h4 {
  font-size: var(--text-subtitle);
}
}

@media(prefers-reduced-motion:reduce) {
:root {
  --motion-fast: 0s;
  --motion-standard: 0s;
  --motion-press: 0s;
}

html {
  scroll-behavior: auto;
}

.btn::after {
  transform: none;
}

.stage-progress span {
  transition: none;
}
}

@media(forced-colors:active) {
.btn {
  border: var(--rule-strong) solid ButtonText;
  color: ButtonText;
}

.btn::before,.btn::after,.action-link::after {
  display: none;
}

.nav-link[aria-current=page] {
  border-color: LinkText;
}

.demo-controls [role=tab][aria-selected=true] {
  border-color: Highlight;
}

.nav-toggle span {
  background: ButtonText;
}
}