/* RogsApps brand pages (index, apps). Builds on the tokens in site.css; no other page loads this file. */
.studio-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-block:88px 72px}
.studio-hero h1{font-size:clamp(2.75rem,5vw,4.5rem);letter-spacing:-.03em;line-height:1.02;margin:0 0 24px}
.studio-lead{font-size:1.25rem;line-height:1.55;color:var(--muted);max-width:34em;margin:0 0 32px}
.studio-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.studio-actions .button{margin:0}
.studio-actions .button-quiet{background:transparent;color:var(--ink)}
.studio-actions .button-quiet:hover{background:#15302f0d}
.studio-hero .kicker,.studio-intro .kicker{font-size:0.8125rem;margin-bottom:16px;color:#4f6a5b}
.studio-section-title{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1.08;margin:0 0 32px}

/* Stylised Mac screen: abstract menu bar on top, dock with sample icons at the bottom. */
.studio-screen{margin:0}
.studio-screen img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:22px;box-shadow:0 30px 80px -30px #15302f80,0 0 0 1px #15302f14}
.studio-screen-glass{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;isolation:isolate;
  background:radial-gradient(at 18% 20%,#8b6cff 0,transparent 55%),radial-gradient(at 85% 80%,#ff8fb0 0,transparent 50%),linear-gradient(135deg,#1e2456,#43206a);
  box-shadow:0 1px 0 #ffffff26 inset,0 30px 80px -30px #15302f80,0 0 0 1px #15302f14}
.studio-screen figcaption,.mbu-preview figcaption{font-size:0.75rem;color:var(--muted);margin-top:12px;text-align:center}
.studio-menubar,.mbu-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:0 16px;height:30px;
  background:#ffffff2e;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #ffffff26}
.mbu-apple{width:11px;height:13px;border-radius:5px 5px 6px 6px;background:#ffffffd9;flex:none}
.mbu-menu{width:44px;height:7px;border-radius:4px;background:#ffffffa6;flex:none}
.mbu-menu.mbu-short{width:28px}
.mbu-icons{position:relative;margin-left:auto;width:calc(8 * 20px);height:14px;flex:none}
.mbu-clock{width:54px;height:7px;border-radius:4px;background:#ffffffd9;flex:none}
.mbu-dot{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:5px;background:var(--c);
  transform:translateX(calc(var(--to) * 20px));animation:mbu-sort 9s var(--ease) infinite}
/* Eight placeholder icons: --from is the untidy slot, --to the sorted one (three colour groups). */
.mbu-d1{--c:#ffd36e;--from:5;--to:0}.mbu-d2{--c:#7fe0c4;--from:0;--to:3}.mbu-d3{--c:#ffd36e;--from:3;--to:1}.mbu-d4{--c:#9fb7ff;--from:7;--to:5}
.mbu-d5{--c:#7fe0c4;--from:2;--to:4}.mbu-d6{--c:#9fb7ff;--from:6;--to:6}.mbu-d7{--c:#ffd36e;--from:1;--to:2}.mbu-d8{--c:#9fb7ff;--from:4;--to:7}
@keyframes mbu-sort{0%,22%{transform:translateX(calc(var(--from) * 20px))}48%,92%{transform:translateX(calc(var(--to) * 20px))}100%{transform:translateX(calc(var(--from) * 20px))}}
.studio-tag{position:absolute;font-size:0.75rem;font-weight:600;letter-spacing:.01em;color:#fff;background:#07171c99;border:1px solid #ffffff2e;border-radius:999px;padding:6px 12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.studio-tag-top{top:44px;right:16px}
.studio-tag-bottom{bottom:96px;left:50%;transform:translateX(-50%)}
.studio-dock{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:max-content;display:flex;gap:8px;padding:8px 10px;border-radius:20px;
  background:#ffffff38;border:1px solid #ffffff40;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.studio-dock img{width:44px;height:44px;display:block}

/* App cards on the home page. */
.studio-apps{padding-block:56px 40px}
.studio-app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.studio-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:12px}
.studio-card :is(h2,h3){font-size:1.875rem;letter-spacing:-.03em;line-height:1.1;margin:0}
.studio-card p{margin:0}
.studio-card .studio-actions{margin-top:auto;padding-top:12px}
.du-preview{margin:0 0 8px}
/* One app only: the card becomes a full-width band, picture left, text right. */
.studio-app-grid-single{grid-template-columns:minmax(0,1fr)}
.studio-app-grid-single .studio-card-dock{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:56px;row-gap:12px;align-content:center;padding:44px}
.studio-app-grid-single .studio-card-dock>*{grid-column:2}
.studio-app-grid-single .studio-card-dock>.du-preview{grid-column:1;grid-row:1/span 6;align-self:center;margin:0}
.studio-app-grid-single .studio-card-dock .studio-actions{margin-top:0}
.du-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:radial-gradient(at 20% 15%,#9fe7cf 0,transparent 55%),radial-gradient(at 85% 85%,#b9c8ff 0,transparent 55%),linear-gradient(160deg,#e9f3ee,#dfe7f4);box-shadow:0 0 0 1px #15302f14 inset}
.du-stage-dock{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;display:flex;gap:8px;padding:8px 10px;border-radius:18px;background:#ffffff99;border:1px solid #ffffffcc;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.du-stage-dock img{width:40px;height:40px;display:block}
.du-preview figcaption{font-size:0.75rem;color:var(--muted);margin-top:12px;text-align:center}
.studio-status-icon{display:flex;align-items:center;gap:10px}
.studio-status-icon .studio-card-icon{width:28px;height:28px;margin:0}
.studio-card-soon{background:linear-gradient(160deg,#10262b,#07171c);color:#eef6f1;border-color:#07171c}
.studio-card-soon p{color:#c9d6d0}
.studio-card-soon .text-link{color:#b7f5db;align-self:flex-start;font-size:0.875rem;margin-top:4px}
.studio-card-soon .studio-soon-note{font-size:0.875rem;color:#9fb3ab}
.studio-status{font-size:0.8125rem;font-weight:600;color:#4f6a5b;letter-spacing:.01em}
.studio-price{font-size:0.9375rem;color:#3d4f4b;line-height:1.6}
.studio-soon{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:0.8125rem;font-weight:600;letter-spacing:.02em;
  color:#07171c;background:linear-gradient(90deg,#b7f5db,#d9c8ff);border-radius:999px;padding:5px 12px}
.studio-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:#07171c;opacity:.7}
.studio-card-soon .studio-soon,.studio-peek .studio-soon{color:#07171c;margin:0}

/* Menu Bar Ultimate preview: stylised, clearly not a screenshot. */
.mbu-preview{margin:0}
.mbu-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:radial-gradient(at 80% 10%,#5b7bff66 0,transparent 55%),radial-gradient(at 10% 90%,#2fd3a066 0,transparent 55%),#0d1d22;
  box-shadow:0 0 0 1px #ffffff1a inset}
.mbu-sheet{position:absolute;right:16px;top:44px;width:46%;display:grid;gap:11px;padding:16px;border-radius:14px;background:#ffffff1f;border:1px solid #ffffff26;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mbu-row{display:flex;align-items:center;gap:10px}
.mbu-chip{width:12px;height:12px;border-radius:4px;flex:none}
.mbu-g1{background:#ffd36e}.mbu-g2{background:#7fe0c4}.mbu-g3{background:#9fb7ff}
.mbu-row .mbu-line{flex:1}
.mbu-line-mid{max-width:70%}
.mbu-line{height:7px;border-radius:4px;background:#ffffff59}
.mbu-line-title{width:55%;background:#ffffffa6}
.mbu-line-short{max-width:45%}
.studio-card-soon .mbu-preview{margin-bottom:8px}
.studio-card-soon .mbu-preview figcaption{color:#9fb3ab}

/* Apps page. */
.studio-intro h1{font-size:clamp(2.75rem,5vw,4.5rem);letter-spacing:-.03em}
.studio-catalog{display:grid;gap:32px;padding-bottom:24px}
.studio-app-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center;border-top:1px solid var(--line);padding-top:56px}
.studio-app-art{display:grid;place-items:center;aspect-ratio:1;border-radius:36px;background:radial-gradient(circle at 50% 40%,#ffffff,#e9eee6)}
.studio-app-icon{width:58%;height:auto}
.studio-app-body h2{font-size:clamp(2.25rem,3.6vw,3.25rem);letter-spacing:-.035em;line-height:1.05;margin:6px 0 14px}
.studio-app-lead{font-size:1.1875rem;line-height:1.55;margin:0 0 20px}
.studio-facts{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.studio-facts li{position:relative;padding-left:22px;font-size:0.9375rem;line-height:1.5}
.studio-facts li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--mint);box-shadow:0 0 0 1px #9fc9b2 inset}
.studio-dev-note{font-size:0.875rem;color:var(--muted);margin:0 0 6px}
.studio-app-body .studio-price{margin:0 0 22px}
.studio-app-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:20px 0 0;font-size:0.875rem}
.studio-app-links a{color:var(--ink);text-decoration:underline;text-decoration-color:#15302f40;text-underline-offset:4px}
.studio-peek{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;margin-top:24px;padding:48px;border-radius:32px;
  background:linear-gradient(160deg,#10262b,#07171c);color:#eef6f1}
.studio-peek h2{font-size:clamp(2.25rem,3.6vw,3.25rem);letter-spacing:-.035em;line-height:1.05;margin:14px 0 14px;color:#fff}
.studio-peek p{color:#c9d6d0;margin:0 0 12px}
.studio-peek .studio-app-lead{color:#eef6f1}
.studio-peek figcaption{color:#9fb3ab}

/* Principles and idea prompt. */
.studio-principles{padding-block:56px}
.studio-principles ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.studio-principles li{border-top:1px solid var(--line);padding-top:20px}
.studio-principles h3{font-size:1.3125rem;letter-spacing:-.02em;margin:0 0 8px}
.studio-principles li p{margin:0;color:var(--muted)}
.studio-principle-link{margin-top:12px}
.studio-idea{padding-bottom:88px}

@media(max-width:900px){
  .studio-hero,.studio-app-grid,.studio-app-row,.studio-peek{grid-template-columns:minmax(0,1fr)}
  .studio-hero{gap:40px;padding-block:56px 40px}
  .studio-app-grid-single .studio-card-dock{display:flex}
  .studio-app-row{gap:28px;padding-top:40px}
  .studio-app-art{max-width:260px;width:100%;justify-self:start}
  .studio-principles ul{grid-template-columns:minmax(0,1fr)}
  .studio-peek{padding:28px;gap:28px}
}
@media(max-width:560px){
  .studio-lead{font-size:1.125rem}
  .studio-card{padding:24px;border-radius:24px}
  .studio-facts{grid-template-columns:minmax(0,1fr)}
  .studio-dock{gap:5px;padding:6px 7px;border-radius:14px;bottom:12px}
  .studio-dock img{width:28px;height:28px}
  .du-stage-dock{gap:5px;padding:6px 7px;border-radius:14px}
  .du-stage-dock img{width:30px;height:30px}
  .studio-tag{font-size:0.75rem;padding:4px 9px}
  .studio-tag-bottom{bottom:64px}
  .studio-tag-top{top:40px;right:10px}
  .mbu-menu{width:28px}.mbu-menu.mbu-short{display:none}
  .mbu-icons{width:calc(8 * 16px)}
  .mbu-dot{width:11px;height:11px;border-radius:4px;transform:translateX(calc(var(--to) * 16px))}
  @keyframes mbu-sort{0%,22%{transform:translateX(calc(var(--from) * 16px))}48%,92%{transform:translateX(calc(var(--to) * 16px))}100%{transform:translateX(calc(var(--from) * 16px))}}
}
@media(prefers-reduced-motion:reduce){
  .mbu-dot{animation:none}
}

/* 404 page. */
.studio-404{min-height:70vh}
.studio-404 p{max-width:36em;color:var(--muted)}
.studio-404-links{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:1rem;font-weight:550}
.studio-404-links a{color:var(--ink);text-decoration:underline;text-decoration-color:#15302f40;text-underline-offset:4px}