/* Page rules for /fr/ia-pour-roblox-studio only (the shared CSS stays untouched).
   The page is built from the /roblox-ai-game-maker components (seo-landing.css + game-maker.css,
   <body class="sl gm">); this file adds the setup split, the language cards and the paid plan strip. */

/* The French header labels (Connexion, Commencer) are wider than the Spanish ones, so below about
   406px the header bar would scroll sideways. On those phones the Connexion link leaves the bar:
   it is still in the menu drawer, and Commencer opens the same /login page.
   !important because lib/site-chrome.js writes display inline on #nav-login-btn. */
@media (max-width: 440px) {
    #nav-login-btn { display: none !important; }
}

/* ---------- hero: the language line sits under the note, like "Read in" on the benchmark ---------- */
.frl-hero-note { max-width: 52ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.frl-langs { margin-top: 8px; }

/* ---------- setup: five short steps beside the real connection walkthrough ---------- */
.sl-split.frl-setup { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 64px; }
.frl-setup .sl-split-media { position: static; }
.sl .frl-steps { gap: 20px; }
.sl .frl-steps li { gap: 14px; }
.sl .frl-steps h3 { margin: 5px 0 3px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #f6f1ff; }
.sl .frl-steps h3 a { color: inherit; text-decoration: underline; text-decoration-color: rgba(167, 139, 250, .5); text-underline-offset: 3px; }
.sl .frl-steps h3 a:hover { text-decoration-color: #a78bfa; }
.sl .frl-steps p { font-size: 14.5px; line-height: 1.5; }
/* the pairing code, as three small facts */
.frl-mini { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.frl-mini li {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; white-space: nowrap;
  border: 1px solid rgba(167, 139, 250, .22); border-radius: 999px; background: rgba(139, 92, 246, .08);
  font-size: 12.5px; font-weight: 500; line-height: 1; color: #e6def3;
}
.frl-setup + .v3-chips { margin-top: 48px; }
@media (max-width: 900px) {
  .sl-split.frl-setup { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 48px; }
  .frl-setup .sl-split-media, .frl-setup .frl-steps { width: 100%; max-width: 600px; margin: 0 auto; }
  /* the five readable steps lead; the recording supports them (the shared split puts media first) */
  .frl-setup .sl-split-media { order: 2; }
}
@media (max-width: 480px) {
  /* the recording runs to the screen edges, so the recorded UI gets every pixel of width */
  .frl-setup .sl-split-media .sl-frame { margin-inline: -16px; border-inline-width: 0; border-radius: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
  /* both notes as matching full-width rows, like the limits checklist */
  .frl-setup + .v3-chips li { width: 100%; justify-content: flex-start; }
}

/* ---------- language: what is in French and what stays in English ---------- */
.frl-lang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.frl-lang-card {
  display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 30px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; background: #15101f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.frl-lang-card.is-fr {
  border-color: rgba(167, 139, 250, .3);
  background: radial-gradient(120% 80% at 0% 0%, rgba(139, 92, 246, .16), transparent 60%), #15101f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 90px -40px rgba(124, 58, 237, .55);
}
.frl-lang-head { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.frl-lang-code {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  font-size: 19px; font-weight: 700; letter-spacing: .04em; line-height: 1; color: #f6f1ff;
  background: linear-gradient(180deg, rgba(139, 92, 246, .45), rgba(91, 33, 182, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px -12px rgba(124, 58, 237, .8);
}
.frl-lang-card.is-en .frl-lang-code { color: #cfc3e0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.frl-lang-title { display: block; font-size: 20px; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; color: #f6f1ff; }
.frl-lang-sub { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--rc-text-3); }
.frl-lang-card.is-fr .gm-chiplist li { border-color: rgba(167, 139, 250, .18); background: rgba(139, 92, 246, .07); }
/* English items: a neutral dot instead of a tick */
.frl-chiplist-en li::before { content: ""; background: radial-gradient(circle, #a59cb8 0 3px, rgba(255, 255, 255, .07) 3.5px); }
/* an example prompt, in the hero's chat box style */
.frl-lang-ask {
  display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 8px 8px 8px 12px;
  border: 1px solid rgba(167, 139, 250, .42); border-radius: 16px; background: rgba(21, 16, 31, .94);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, .08), 0 0 50px -14px rgba(139, 92, 246, .7);
}
.frl-lang-ask .gm-ask-text { font-size: 14.5px; }
.frl-lang-ask .gm-ask-send { width: 34px; height: 34px; }
/* both example rows sit on the cards' bottom edge, so the pair reads as mirrored */
.frl-lang-card > .gm-chiplist { margin-bottom: 22px; }
.frl-lang .frl-lang-ask { margin-top: auto; }
/* the English example: the chat's real connect-bar buttons, in a neutral row */
.frl-lang-btns {
  min-height: 60px; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.frl-app-btns { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.frl-app-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; white-space: nowrap;
  border: 1px solid rgba(167, 139, 250, .32); border-radius: 10px; background: rgba(139, 92, 246, .08);
  font-size: 13.5px; font-weight: 600; line-height: 1; color: #e6def3;
}
.frl-app-btn svg { flex: none; color: #a78bfa; }
.frl-app-btn.is-primary {
  border-color: transparent; color: #fff; background: var(--rc-accent-fill, #7c3aed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -8px rgba(124, 58, 237, .8);
}
@media (max-width: 860px) {
  .frl-lang { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (max-width: 480px) {
  .frl-lang-card { padding: 22px 18px 22px; border-radius: 20px; }
  .frl-lang-head { gap: 14px; margin-bottom: 18px; }
  .frl-lang-code { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }
  .frl-lang-title { font-size: 18px; }
  .frl-lang-sub { font-size: 13.5px; }
  .frl-lang-ask { flex-wrap: wrap; row-gap: 8px; padding: 10px 8px 8px 12px; }
  .frl-lang-ask .sl-tag { order: -1; }
  .frl-lang-ask .gm-ask-text { flex-basis: calc(100% - 50px); font-size: 14px; }
}

/* ---------- pricing: the Starter strip, then a quieter strip for the paid plans (no numbers on this page) ---------- */
.frl-plans { max-width: 1040px; margin: 0 auto; }
.frl-plans .gm-starter-plan { flex-wrap: wrap; row-gap: 4px; }
.frl-paid {
  margin-bottom: 0; border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.frl-paid .gm-starter-price { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.frl-paid .gm-starter-points li::before { background: #8f84a3; }
/* points stacked, so both strips read as two short lists */
.frl-plans .gm-starter-points { display: grid; gap: 6px; }
@media (min-width: 1101px) {
  /* the three columns line up across both strips */
  .frl-plans .gm-starter { grid-template-columns: 300px minmax(0, 1fr) 240px; }
  .frl-plans .gm-starter-btn { justify-self: stretch; }
}

/* ---------- closing block: landing.css caps the display heading at 11ch, which sets the French line
   as three display lines with a short middle one. Here it sets on two lines, "Commence par / une
   fonctionnalité.", the same break as the benchmark's "Start with / one feature." (balanced, so the
   article stays with its noun) ---------- */
@media (min-width: 1024px) {
  .final-inner #final-title { max-width: none; font-size: clamp(46px, 4.6vw, 60px); text-wrap: balance; }
}

@media (prefers-reduced-motion: reduce) {
  .frl-lang-ask .gm-ask-text::after { animation: none; }
}

/* keeps a hyphenated place name on one line in the Roblox tools cards */
.frl-nw { white-space: nowrap; }

/* the two English buttons stay on one row down to 320px */
@media (max-width: 360px) {
  .frl-app-btn { padding: 0 11px; font-size: 13px; }
}
/* On phones the recording's interface text is too small to read; the five steps carry the setup. */
@media (max-width: 640px) { .frl-setup .sl-split-media { display: none; } }