/* ==========================================================================
   MODERN SAAS — Build with it board. Loaded on a/modern-saas.html only.
   The room's page, continued: white ground, Geist ("GeistX", declared by the
   room's sheet), white cards on one 10px radius under one elevation step,
   an 8px rhythm, amber once, on the specimen's primary button.
   Contrast: ink #0F1115 on white 18.9; muted #5B6270 on white 6.1, on
   #F7F7F8 5.7; #1A1204 on amber 9.1.
   ========================================================================== */
.gm--modern-saas { max-width: 1140px; margin: 0 auto; padding: 88px 24px; background: #FFFFFF; color: #0F1115; font: 400 17px/1.6 "GeistX", system-ui, -apple-system, "Segoe UI", sans-serif; --gm-tag-inverse: #FFFFFF; }
.gm--modern-saas .gm__head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; margin-bottom: 48px; }
.gm--modern-saas .gm__title { grid-row: auto; font-size: clamp(32px, 4.4vw, 48px); font-weight: 600; letter-spacing: -0.03em; }
.gm--modern-saas .gm__lede { max-width: 620px; font-size: 19px; color: #5B6270; }
.gm--modern-saas .gm__key, .gm--modern-saas .gm__get { font-size: 14px; color: #5B6270; opacity: 1; }
.gm--modern-saas a { color: #0F1115; text-underline-offset: 3px; }
.gm--modern-saas :focus-visible { outline: 2px solid #0F1115; outline-offset: 3px; border-radius: 4px; }
.gm--modern-saas .gm-t { border-radius: 6px; border-color: #C9CCD3; color: #0F1115; font-weight: 500; white-space: normal; }
.gm--modern-saas .gm-t[data-g="translation"] { background: #0F1115; border-color: #0F1115; }

.gsa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gsa-c { padding: 24px; background: #FFFFFF; border: 1px solid #E6E7EB; border-radius: 10px; box-shadow: 0 8px 24px -6px rgba(15, 17, 21, 0.10), 0 2px 4px rgba(15, 17, 21, 0.04); min-width: 0; }
.gsa-w2 { grid-column: span 2; }
.gsa-w3 { grid-column: 1 / -1; }
.gsa-c .gm-f__n { font: 500 13px/1 "GeistMonoX", ui-monospace, Menlo, monospace; color: #5B6270; }
.gsa-c .gm-f__name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.gsa-c .gm-f__note { font-size: 14px; color: #5B6270; opacity: 1; }
.gsa-c .gm-more summary { font-weight: 500; font-size: 14px; }
.gsa-c .gm-ls li { border-top-color: #E6E7EB; font-size: 14px; }
.gsa-c .gm-ls__why, .gsa-c .gm-ls__from { color: #5B6270; opacity: 1; }
.gsa-cap { margin: 12px 0 0; font-size: 15px; color: #5B6270; }

/* colour */
.gsa-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gsa-sw li { display: grid; gap: 2px; font-size: 13px; }
.gsa-sw i { display: block; height: 48px; border-radius: 10px; border: 1px solid #E6E7EB; margin-bottom: 6px; }
.gsa-sw span { color: #5B6270; font-family: "GeistMonoX", ui-monospace, Menlo, monospace; font-size: 12px; }

/* type */
.gsa-disp { margin: 0; font-size: clamp(36px, 4vw, 48px); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }

/* layout */
.gsa-rhythm { display: flex; align-items: flex-end; gap: 8px; }
.gsa-rhythm i { height: 24px; background: #F7F7F8; border: 1px solid #E6E7EB; border-radius: 4px; }

/* shape */
.gsa-shape { display: flex; gap: 16px; }
.gsa-shape span { flex: 1; height: 72px; display: flex; align-items: flex-end; padding: 8px 12px; background: #FFFFFF; border: 1px solid #E6E7EB; border-radius: 10px; box-shadow: 0 8px 24px -6px rgba(15, 17, 21, 0.10), 0 2px 4px rgba(15, 17, 21, 0.04); font: 500 12px/1 "GeistMonoX", ui-monospace, monospace; color: #5B6270; }

/* imagery: the room's placeholder convention, a browser frame with nothing staged in it */
.gsa-shot { border: 1px solid #E6E7EB; border-radius: 10px; overflow: hidden; background: #F7F7F8; }
.gsa-shot__bar { display: flex; gap: 6px; padding: 8px 12px; background: #FFFFFF; border-bottom: 1px solid #E6E7EB; }
.gsa-shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: #E6E7EB; }
.gsa-shot p { margin: 0; padding: 32px 16px; text-align: center; font: 500 12px/1.5 "GeistMonoX", ui-monospace, monospace; color: #5B6270; }

/* components */
.gsa-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 16px; border: 1px solid #E6E7EB; border-radius: 10px; margin-bottom: 24px; }
.gsa-nav b { font-weight: 600; margin-right: auto; }
.gm--modern-saas .gsa-nav a:not(.gsa-btn) { color: #5B6270; text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.gm--modern-saas .gsa-nav a:not(.gsa-btn):hover { color: #0F1115; }
.gm--modern-saas .gsa-nav a[aria-current="page"] { color: #0F1115; font-weight: 500; }
.gm--modern-saas .gsa-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; font: 500 15px/1.2 "GeistX", system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color 150ms ease; }
.gm--modern-saas .gsa-btn--p { background: #F5A524; color: #1A1204; border: 0; }
.gm--modern-saas .gsa-btn--p:hover { background: #E8981A; }
.gm--modern-saas .gsa-btn--s { background: #FFFFFF; color: #0F1115; border: 1px solid #C9CCD3; }
.gm--modern-saas .gsa-btn--s:hover { background: #F7F7F8; }
.gsa-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.gsa-card { padding: 24px; border: 1px solid #E6E7EB; border-radius: 10px; box-shadow: 0 8px 24px -6px rgba(15, 17, 21, 0.10), 0 2px 4px rgba(15, 17, 21, 0.04); }
.gsa-card h5 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.gsa-card p { margin: 0 0 8px; color: #5B6270; }
.gsa-form { display: grid; gap: 8px; }
.gsa-form label { font-weight: 500; font-size: 15px; }
.gsa-form input { height: 44px; padding: 0 12px; border: 1px solid #5B6270; border-radius: 10px; background: #FFFFFF; color: #0F1115; }
.gsa-form .gsa-btn { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .gm--modern-saas .gsa-btn { transition: none; } }

@media (max-width: 900px) {
  .gm--modern-saas { padding: 48px 24px; }
  .gsa-grid, .gsa-ui { grid-template-columns: minmax(0, 1fr); }
  .gsa-w2, .gsa-w3 { grid-column: auto; }
}