/* MOJIN product pages: the apps' India paper, ink, red seal and Spectral type.
   Kept separate from Ludofax's corporate design system. No external requests. */
@font-face {
  font-family:Spectral;
  src:url('/assets/mojin/sumi-v1/spectral-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
.mojin {
  --paper:#FAF9F5;
  --ink:#17161A;
  --secondary:#4C4A50;
  --muted:#6E6C74;
  --rule:#E2E0D9;
  --red:#A81F2D;
  --serif:Spectral,Georgia,'Hiragino Mincho ProN',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans',sans-serif;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased
}
.mojin * {
  box-sizing:border-box
}
.mojin a {
  color:inherit;
  text-underline-offset:5px;
  text-decoration-thickness:1px
}
.mojin a:hover {
  text-decoration-color:var(--red)
}
.mojin a:focus-visible,.mojin summary:focus-visible {
  outline:2px solid var(--red);
  outline-offset:5px
}
.mojin img {
  display:block;
  max-width:100%;
  height:auto
}
.mojin p {
  margin:0 0 1em;
  text-wrap:pretty
}
.mojin h1,.mojin h2,.mojin h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.2;
  text-wrap:balance
}
.mojin h2 {
  font-size:38px;
  margin:0 0 22px
}
.mojin h3 {
  font-size:25px;
  margin:0 0 12px
}
.mj-wrap {
  width:calc(100% - 96px);
  max-width:1160px;
  margin-inline:auto
}
.mj-label {
  font:11px/1.5 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted)
}
.skip-link {
  position:absolute;
  top:8px;
  left:8px;
  padding:12px;
  background:var(--paper);
  transform:translateY(-150%);
  z-index:10
}
.skip-link:focus {
  transform:none
}
.mj-header {
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--rule)
}
.mj-brand {
  font:600 21px/1.3 var(--sans);
  letter-spacing:.19em;
  text-decoration:none
}
.mj-brand__by {
  display:block;
  font:10px/1.5 var(--sans);
  letter-spacing:.04em;
  color:var(--muted);
  margin-top:3px
}
.mj-header nav {
  display:flex;
  gap:30px;
  flex-wrap:wrap
}
.mj-header nav a {
  font-size:13px;
  padding:12px 0;
  text-decoration:none;
  color:var(--secondary)
}
.mj-header nav a[aria-current] {
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:9px
}
.mj-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:64px;
  align-items:center;
  padding-block:64px
}
.mj-hero-copy>.mj-label {
  margin-bottom:30px
}
.mj-lockup {
  display:flex;
  gap:24px;
  align-items:center;
  margin-bottom:36px
}
.mj-lockup img {
  width:100px;
  flex:none;
  border-radius:22px
}
.mj-lockup h1 {
  font-size:72px;
  margin:0;
  line-height:1
}
.mj-lockup h1 span {
  display:block;
  font:11px/1.5 var(--sans);
  letter-spacing:.22em;
  margin-bottom:8px;
  color:var(--muted)
}
.mj-hero h2 {
  font-size:35px;
  max-width:14em
}
.mj-lede {
  font-family:var(--serif);
  font-size:22px;
  line-height:1.65;
  color:var(--secondary);
  max-width:32em
}
.mj-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:30px;
  flex-wrap:wrap
}
.mj-actions>a:not(.mj-button) {
  font-size:13px
}
.mj-button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:48px;
  padding:12px 22px;
  background:var(--ink);
  color:var(--paper)!important;
  text-decoration:none;
  font-size:13px;
  border:1px solid var(--ink)
}
.mj-button:hover {
  background:var(--red);
  border-color:var(--red)
}
.mj-availability {
  font:12px/1.7 var(--sans);
  color:var(--muted);
  margin:22px 0 0!important;
  max-width:32em
}
.mj-preview {
  position:relative;
  margin:0;
  min-width:0;
  background:#17161A;
  padding:34px 40px 24px;
  color:#FAF9F5;
  display:flex;
  align-items:center;
  flex-direction:column
}
.mj-preview-jp {
  position:absolute;
  right:20px;
  top:34px;
  writing-mode:vertical-rl;
  font:22px/1.5 'Hiragino Mincho ProN','Yu Mincho',serif;
  letter-spacing:.26em;
  color:#C1BFC6
}
.mj-screen {
  width:248px;
  border:1px solid #4C4A50;
  border-radius:28px
}
.mj-preview figcaption {
  font-size:11px;
  line-height:1.7;
  text-align:center;
  color:#C1BFC6;
  margin-top:18px;
  max-width:32em
}
.mj-principles {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--rule);
  padding-block:23px;
  gap:16px;
  font-size:12px;
  color:var(--secondary)
}
.mj-principles span+span {
  border-left:1px solid var(--rule);
  padding-left:24px
}
.mj-features {
  padding-block:84px
}
.mj-section-head {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:42px
}
.mj-section-head h2 {
  margin:0
}
.mj-section-head>p {
  font-size:14px;
  color:var(--muted);
  max-width:23em;
  margin:0
}
.mj-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px 44px
}
.mj-feature-grid article {
  border-top:1px solid var(--rule);
  padding-top:18px
}
.mj-feature-num {
  display:block;
  font:11px/1.4 ui-monospace,monospace;
  color:var(--red);
  margin-bottom:22px
}
.mj-feature-grid p,.mj-information p,.mj-help p {
  font-size:15px;
  line-height:1.85;
  color:var(--secondary)
}
.mj-information {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:76px;
  border-top:1px solid var(--rule);
  padding-block:64px
}
.mj-information .mj-label,.mj-help .mj-label {
  font-size:11px;
  color:var(--muted)
}
.mj-information h2 {
  font-size:32px
}
.mj-information a {
  font-size:14px
}
.mj-help {
  border-block:1px solid var(--rule);
  padding-block:48px;
  display:flex;
  gap:48px;
  align-items:center;
  justify-content:space-between
}
.mj-help>div {
  max-width:640px
}
.mj-help h2 {
  font-size:32px;
  margin-bottom:12px
}
.mj-help p:last-child {
  margin-bottom:0
}
.mj-help .mj-button {
  flex:none
}
.mj-family {
  padding-block:72px
}
.mj-family-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px
}
.mj-family-app {
  text-decoration:none;
  padding-top:20px;
  border-top:1px solid var(--rule)
}
.mj-family-app img {
  width:74px;
  border-radius:16px;
  margin-bottom:20px
}
.mj-family-app h3 {
  font-size:25px;
  margin-bottom:8px
}
.mj-family-app p {
  font-size:13px;
  line-height:1.65;
  color:var(--secondary);
  min-height:3.4em
}
.mj-family-app>span {
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:5px
}
.mj-family-app[aria-current]>span {
  color:var(--muted);
  text-decoration:none
}
.mj-footer {
  border-top:1px solid var(--rule);
  padding-block:32px;
  display:flex;
  gap:32px;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--secondary)
}
.mj-footer p {
  margin:0
}
.mj-footer .mj-brand {
  font-size:15px;
  color:var(--ink)
}
.mj-doc-header {
  display:flex;
  gap:24px;
  align-items:center;
  padding-block:60px 46px;
  border-bottom:1px solid var(--rule)
}
.mj-doc-header img {
  width:76px;
  border-radius:17px
}
.mj-doc-header h1 {
  font-size:52px;
  margin:0
}
.mj-doc-header .mj-label {
  margin-bottom:8px
}
.mj-doc-layout {
  display:grid;
  grid-template-columns:240px minmax(0,680px);
  justify-content:space-between;
  gap:64px;
  padding-block:44px 80px
}
.mj-doc-layout aside {
  font-size:13px;
  align-self:start;
  position:sticky;
  top:28px
}
.mj-doc-layout aside nav {
  display:grid;
  gap:12px
}
.mj-doc-layout aside nav a {
  color:var(--secondary);
  text-decoration:none;
  line-height:1.5;
  padding-block:3px
}
.mj-doc-layout aside nav a:hover {
  text-decoration:underline
}
.mj-back {
  display:block;
  margin-top:32px;
  font-size:12px
}
.mj-doc {
  min-width:0;
  font-family:var(--serif);
  font-size:19px;
  line-height:1.85;
  color:var(--secondary);
  overflow-wrap:break-word
}
.mj-doc h2 {
  font-size:30px;
  margin:42px 0 18px;
  color:var(--ink);
  scroll-margin-top:28px
}
.mj-doc h3 {
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  margin:28px 0 12px;
  line-height:1.5;
  color:var(--ink)
}
.mj-doc .doc__updated {
  font:12px/1.7 var(--sans);
  margin-top:48px;
  border-top:1px solid var(--rule);
  padding-top:24px;
  color:var(--muted)
}
.mj-collection-hero {
  padding-block:76px 60px
}
.mj-collection-hero h1 {
  font-size:clamp(56px,6.5vw,88px);
  letter-spacing:-.035em;
  margin:20px 0 24px;
  line-height:1.08
}
.mj-collection-hero .mj-lede {
  max-width:32em
}
.mj-collection {
  padding-block:20px 60px
}
.mj-collection-row {
  display:grid;
  grid-template-columns:136px minmax(0,1fr) 115px;
  align-items:center;
  gap:48px;
  padding-block:42px;
  border-bottom:1px solid var(--rule)
}
.mj-collection-row:last-child {
  border:0
}
.mj-collection-row img {
  width:136px;
  border-radius:30px
}
.mj-collection-row h2 {
  font-size:36px;
  margin:8px 0 12px
}
.mj-collection-row h2 a {
  text-decoration:none
}
.mj-collection-row p:not(.mj-label) {
  font-size:16px;
  color:var(--secondary);
  max-width:42em;
  margin-bottom:0
}
.mj-collection-row nav {
  display:grid;
  gap:14px;
  font-size:13px
}
.mj-collection-row nav a:first-child {
  font-weight:500
}
.mj-collection-row .mj-label {
  margin:0
}
@media(prefers-color-scheme:dark) {
  .mojin {
    --paper:#17161A;
    --ink:#FAF9F5;
    --secondary:#CBC8D0;
    --muted:#A9A6AE;
    --rule:#39373E;
    --red:#F28B94
  }
  .mj-preview {
    border:1px solid var(--rule)
  }
}
@media(max-width:1000px) {
  .mj-wrap {
    width:calc(100% - 64px)
  }
  .mj-hero {
    gap:36px
  }
  .mj-lockup {
    gap:18px
  }
  .mj-lockup h1 {
    font-size:60px
  }
  .mj-lockup img {
    width:84px;
    border-radius:19px
  }
  .mj-preview {
    padding-inline:30px
  }
  .mj-screen {
    width:220px
  }
  .mj-preview-jp {
    right:8px;
    font-size:18px
  }
  .mj-feature-grid {
    gap:30px
  }
  .mj-doc-layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:40px
  }
  .mj-principles span+span {
    padding-left:16px
  }
  .mj-collection-row {
    gap:32px
  }
}
@media(max-width:760px) {
  .mj-wrap {
    width:calc(100% - 40px)
  }
  .mj-header {
    min-height:86px;
    gap:16px
  }
  .mj-header nav {
    gap:18px
  }
  .mj-header nav a {
    font-size:12px
  }
  .mj-brand {
    font-size:18px
  }
  .mj-hero {
    grid-template-columns:1fr;
    padding-block:40px;
    gap:36px
  }
  .mj-lockup {
    margin-bottom:26px
  }
  .mj-lockup h1 {
    font-size:64px
  }
  .mj-hero h2 {
    font-size:32px
  }
  .mj-lede {
    font-size:21px
  }
  .mj-preview {
    padding-block:28px 20px
  }
  .mj-screen {
    width:244px
  }
  .mj-preview-jp {
    right:10px;
    top:28px;
    font-size:18px
  }
  .mj-principles {
    grid-template-columns:1fr 1fr;
    gap:16px 12px;
    font-size:11px
  }
  .mj-principles span+span {
    padding-left:0;
    border:0
  }
  .mj-features {
    padding-block:52px
  }
  .mj-section-head {
    display:block;
    margin-bottom:30px
  }
  .mj-section-head h2 {
    font-size:32px
  }
  .mj-section-head>p {
    margin-top:16px
  }
  .mj-feature-grid {
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .mj-feature-grid h3 {
    font-size:22px
  }
  .mj-feature-grid p {
    font-size:14px
  }
  .mj-information {
    grid-template-columns:1fr;
    gap:36px;
    padding-block:44px
  }
  .mj-help {
    display:block;
    padding-block:36px
  }
  .mj-help .mj-button {
    margin-top:24px
  }
  .mj-family {
    padding-block:44px
  }
  .mj-family-grid {
    grid-template-columns:repeat(2,1fr);
    gap:28px 20px
  }
  .mj-family-app p {
    min-height:0
  }
  .mj-footer {
    flex-wrap:wrap;
    gap:18px
  }
  .mj-footer p {
    flex-basis:calc(100% - 110px)
  }
  .mj-doc-header {
    padding-block:40px 30px;
    gap:18px
  }
  .mj-doc-header h1 {
    font-size:40px
  }
  .mj-doc-header img {
    width:64px;
    border-radius:14px
  }
  .mj-doc-layout {
    grid-template-columns:1fr;
    gap:30px;
    padding-block:28px 52px
  }
  .mj-doc-layout aside {
    position:static;
    padding-bottom:24px;
    border-bottom:1px solid var(--rule)
  }
  .mj-doc-layout aside nav {
    grid-template-columns:1fr 1fr;
    gap:8px 18px
  }
  .mj-doc-layout aside nav .mj-label {
    grid-column:1/-1
  }
  .mj-back {
    margin-top:20px
  }
  .mj-doc {
    font-size:18px
  }
  .mj-doc h2 {
    font-size:28px
  }
  .mj-collection-hero {
    padding-block:48px 40px
  }
  .mj-collection-row {
    grid-template-columns:80px minmax(0,1fr);
    gap:20px;
    padding-block:30px;
    align-items:start
  }
  .mj-collection-row img {
    width:80px;
    border-radius:18px
  }
  .mj-collection-row h2 {
    font-size:28px
  }
  .mj-collection-row p:not(.mj-label) {
    font-size:14px
  }
  .mj-collection-row nav {
    grid-column:2;
    display:flex;
    gap:20px;
    flex-wrap:wrap
  }
}
@media(max-width:370px) {
  .mj-header nav {
    gap:12px
  }
  .mj-header nav a {
    font-size:11px
  }
  .mj-screen {
    width:220px
  }
  .mj-preview-jp {
    right:12px;
    font-size:18px
  }
  .mj-feature-grid {
    grid-template-columns:1fr
  }
  .mj-doc-header h1 {
    font-size:34px
  }
  .mj-doc-header img {
    width:54px
  }
  .mj-lockup h1 {
    font-size:56px
  }
}
@media print {
  .mojin {
    --paper:white;
    --ink:black;
    --secondary:#333;
    --muted:#444;
    --rule:#ccc
  }
  .mj-header nav,.mj-doc-layout aside,.mj-family,.skip-link {
    display:none
  }
  .mj-wrap {
    width:100%
  }
  .mj-doc-layout {
    display:block
  }
  .mj-doc h2 {
    break-after:avoid
  }
  .mj-doc p {
    orphans:3;
    widows:3
  }
}
/* Branded collection within the existing Ludofax app catalogue. */
.mj-catalogue {
  padding-block:52px 48px
}
.mj-catalogue .mj-section-head {
  margin-bottom:20px
}
.mj-catalogue .mj-section-head>a {
  font-size:13px;
  flex:none
}
.mj-catalogue-lede {
  font-family:var(--serif);
  font-size:21px;
  max-width:40em;
  color:var(--secondary)
}
.mj-catalogue .mj-family-grid {
  margin-top:32px
}
.mj-catalogue .mj-availability {
  max-width:none
}
.mj-collection-icons {
  display:flex;
  gap:18px;
  margin-top:28px
}
.mj-collection-icons img {
  width:64px;
  border-radius:14px
}
.mj-collection-row {
  scroll-margin-top:24px
}
@media(max-width:400px) {
  .mj-collection-icons {
    gap:14px
  }
  .mj-collection-icons img {
    width:48px;
    border-radius:11px
  }
}

@media (max-width: 520px) {
  .apps-catalogue > .masthead .wrap {
    flex-wrap: wrap;
    padding-block: 12px;
    row-gap: 10px;
  }
  .apps-catalogue .masthead__spacer { display: none; }
  .apps-catalogue .masthead__nav { margin-left: auto; }
  .apps-catalogue .toggle { margin-left: auto; }
  .apps-catalogue .toggle button { min-height: 36px; }
}

@media (max-width: 520px) {
  .apps-catalogue .prod__name { font-size: clamp(28px, 8vw, 42px); }
}