/* App-native surfaces, reconstructed in static HTML rather than library components. */
body.final-app {
  --ink: #242831;
  --muted: #58616f;
  --line: #dfe1e5;
  --coral: #ff654f;
  --berry: #752342;
  --dot-step: 12px;
  --dot-size: 1.05px;
  --dot-ink: #24283133;
  margin: 0;
  isolation: isolate;
  background: #fffefa;
  color: var(--ink);
  font: 400 16px/1.65 "Plus Jakarta Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.final-app *, .final-app *::before, .final-app *::after { box-sizing: border-box; }
.final-app [hidden] { display: none !important; }
.final-app :is(h1, h2, h3, h4, p, figure, dl, dd) { margin: 0; }
.final-app :is(h1, h2, h3, h4) { line-height: 1.12; }
.final-app h1 { font-size: clamp(44px, 5.1vw, 74px); font-weight: 700; letter-spacing: -.065em; }
.final-app h2 { font-size: clamp(34px, 3.65vw, 52px); font-weight: 700; letter-spacing: -.055em; }
.final-app h3 { font-size: 21px; font-weight: 700; letter-spacing: -.035em; }
.final-app h4 { font-size: 18px; font-weight: 700; letter-spacing: -.025em; line-height: 1.4; }
.final-app p + p { margin-top: 16px; }
.final-app a { color: inherit; text-decoration: none; }
.final-app button { font: inherit; color: inherit; cursor: pointer; }
.final-app img { display: block; max-width: 100%; height: auto; }
.final-app :focus-visible { outline: 3px solid #732ea8; outline-offset: 5px; }
.final-app section[id] { scroll-margin-top: 28px; }
.final-app .wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.final-app .section { padding-block: 100px; }
.final-app .eyebrow { display: block; margin-bottom: 22px; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .025em; }
.final-app .note, .final-app figcaption { font-size: 13px; line-height: 1.7; color: var(--muted); }
.final-app figcaption { margin-top: 16px; }
.final-app .btn {display: inline-flex;align-items: center;justify-content: center;gap: 20px;min-height: 50px;padding: 13px 22px;border: 1px solid transparent;border-radius: 100px;background: #242831;color: white;font-size: 14px;font-weight: 700;line-height: 1.5;text-align: center;}
.final-app .btn:hover { background: #ff806a; }
.final-app .btn > span { font-size: 21px; line-height: 1; }
.final-app .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.final-app .text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 0; border: 0; background: none; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.final-app .text-link:hover { text-decoration-thickness: 2px; }
.final-app .skip { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 20px; border-radius: 12px; background: var(--ink); color: white; transform: translateY(-180%); }
.final-app .skip:focus { transform: none; }

.final-app .dot-grid {
  --dot-x: -400px;
  --dot-y: -400px;
  --dot-reveal: 0%;
  --logo-w: clamp(220px, 30vw, 320px);
  --logo-h: calc(var(--logo-w) * 274 / 321);
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.3;
}
.final-app .dot-grid-base {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--dot-ink) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-step) var(--dot-step);
  background-position: calc(var(--dot-step) / 2) calc(var(--dot-step) / 2);
}
.final-app .dot-grid-lit {
  position: absolute;
  left: calc(var(--dot-x) - var(--logo-w) / 2);
  top: calc(var(--dot-y) - var(--logo-h) / 2);
  width: var(--logo-w);
  height: var(--logo-h);
  overflow: hidden;
  opacity: 0;
  -webkit-mask-image: url("../branding/logos/meldit-icon.svg");
  mask-image: url("../branding/logos/meldit-icon.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}
.final-app .dot-grid-lit[data-dot-lit] {
  z-index: 1;
}
.final-app .dot-grid-lit-reveal {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    #000 0,
    #000 var(--dot-reveal),
    transparent calc(var(--dot-reveal) + 40px)
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    #000 0,
    #000 var(--dot-reveal),
    transparent calc(var(--dot-reveal) + 40px)
  );
}
.final-app .dot-grid-lit-dots {
  position: absolute;
  left: calc(var(--logo-w) / 2 - var(--dot-x));
  top: calc(var(--logo-h) / 2 - var(--dot-y));
  width: 100vw;
  height: 100vh;
  background: linear-gradient(165deg, #fdb522 16%, #fc297d 50%, #1e50f6 88%);
  -webkit-mask-image: radial-gradient(circle, #000 var(--dot-size), transparent var(--dot-size));
  mask-image: radial-gradient(circle, #000 var(--dot-size), transparent var(--dot-size));
  -webkit-mask-size: var(--dot-step) var(--dot-step);
  mask-size: var(--dot-step) var(--dot-step);
  -webkit-mask-position: calc(var(--dot-step) / 2) calc(var(--dot-step) / 2);
  mask-position: calc(var(--dot-step) / 2) calc(var(--dot-step) / 2);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.final-app :is(.workspace-section, .jobs-section, .coding-section, .managed-section, .pricing-section, .closing) {
  position: relative;
  background: none;
}
.final-app :is(.workspace-section, .jobs-section, .coding-section, .managed-section, .pricing-section, .closing)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.final-app .workspace-section::before { background: #f9cc70; }
.final-app .jobs-section::before { background: #fff0e9; }
.final-app .coding-section::before { background: #f4f5f6; }
.final-app .managed-section::before { background: var(--berry); }
.final-app .pricing-section::before { background: #fdb522; }
.final-app .closing::before { background: #242831; }

/* Existing disclosure and dialog hooks are supplied by site.js. */
.final-app .site-header { position: relative; z-index: 20; }
.final-app .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 100px; border-bottom: 1px solid #e9e7e2; }
.final-app .brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 9px; }
.final-app .brand-icon { width: 31px; }
.final-app .wordmark { width: 117px; }
.final-app .desktop-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; }
.final-app .desktop-nav a:hover, .final-app .footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.final-app .dropdown { position: relative; }
.final-app .dropdown-toggle { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; }
.final-app .product-menu { position: absolute; top: calc(100% + 10px); left: -18px; width: 250px; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 40px #24283112; }
.final-app .product-menu a { display: block; padding: 10px 12px; border-radius: 10px; }
.final-app .product-menu a:hover { background: #f4f4f6; }
.final-app .menu-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: white; }
.final-app .mobile-menu { padding-block: 12px 20px; }
.final-app .mobile-menu a { display: block; padding: 10px 8px; font-size: 15px; }

.final-app .hero { padding-block: 76px 48px; }
.final-app .hero-intro { text-align: center; margin-bottom: 68px; }
.final-app .hero-intro h1 { max-width: 1050px; margin-inline: auto; font-weight: 600; line-height: 1.08; }
.final-app .hero-intro h1 span { color: #686273; }
.final-app .hero-intro .eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; }
.final-app .hero-brand-mark { width: 31px; height: 26px; background: url("../branding/logos/meldit-icon.svg") center / contain no-repeat; animation: brand-spin 8s linear infinite; transform-origin: 50% 50%;}

@keyframes brand-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.final-app .hero-description { max-width: 580px; margin: 25px auto 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.final-app .hero-intro .actions { justify-content: center; gap: 12px; }
.final-app .hero-intro .note { margin-top: 18px; }
.final-app .hero-secondary {background: #ffffffbd;border-color: #dedde6;color: #242831;}
.final-app .hero-secondary:hover { background: #fff; }
.final-app .app-hero-stage { position: relative; isolation: isolate; padding-top: 70px; }
.final-app .hero-glass-mark { position: absolute; z-index: 1; top: -55px; right: -10px; width: 300px; aspect-ratio: 321 / 274; background: url("../branding/logos/meldit-icon.svg") center / contain no-repeat; transform: rotate(-8deg); pointer-events: none; }
.final-app .app-hero-stage .app-preview { margin-right: 100px; box-shadow: 0 22px 65px #423b6110; }
.final-app .coral-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #d24535; }
.final-app h1 span { color: #b93d31; }
.final-app .app-preview { padding: 24px; border: 1px solid #e9e1e0; border-radius: 32px; background: radial-gradient(ellipse at 70% 0%, #d9d5ef 0, transparent 53%), radial-gradient(ellipse at 20% 70%, #f6dbdf 0, transparent 55%), radial-gradient(ellipse at 100% 100%, #fae4b8 0, transparent 50%), #eeedf1; }
.final-app .preview-label { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; font-size: 13px; color: #535667; }
.final-app .preview-pill { display: inline-flex; padding: 6px 14px; border-radius: 100px; background: #ffffffbf; font-weight: 600; }
.final-app .app-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); overflow: hidden; border: 1px solid #ffffff; border-radius: 24px; background: #ffffff45; box-shadow: 0 20px 48px -25px #46395440; }
.final-app .app-sidebar { display: flex; flex-direction: column; gap: 5px; padding: 26px 14px 20px; background: #ffffff8a; border-right: 1px solid #ffffffa6; font-size: 13px; color: #545c68; }
.final-app .studio-brand { display: flex; gap: 9px; align-items: center; margin-bottom: 26px; color: var(--ink); font-size: 14px; line-height: 1.5; }
.final-app .studio-avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e5dbd6; border-radius: 13px; background: #fff8ef; color: #7b4c3f; font-size: 20px; font-weight: 700; }
.final-app .studio-avatar.small { width: 36px; height: 36px; font-size: 13px; background: #fff; }
.final-app .sidebar-label { padding: 0 8px 6px; font-size: 13px; }
.final-app .sidebar-current, .final-app .sidebar-item { display: flex; align-items: center; gap: 7px; padding: 10px 8px; border-radius: 10px; line-height: 1.4; }
.final-app .sidebar-current { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 2px 4px #29233205; }
.final-app .sidebar-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 48px 4px 0; font-size: 13px; line-height: 1.5; }
.final-app .app-main { min-width: 0; padding: 0 24px 24px; }
.final-app .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding-block: 12px; border-bottom: 1px solid #ffffffa6; font-size: 13px; color: #555d6b; }
.final-app .app-topbar > span > span { margin-inline: 7px; }
.final-app .app-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 20px; }
.final-app .app-heading h2 { margin-top: 5px; font-size: 25px; letter-spacing: -.04em; line-height: 1.3; }
.final-app .ui-kicker { display: block; color: #58616f; font-size: 13px; font-weight: 500; line-height: 1.6; }
.final-app .app-tabs { display: flex; width: fit-content; max-width: 100%; gap: 3px; padding: 4px; border-radius: 100px; background: #e7e6eacc; }
.final-app .app-tabs button { min-height: 39px; padding: 8px 22px; border: 0; border-radius: 100px; background: none; color: #515761; font-size: 14px; font-weight: 600; line-height: 1.5; }
.final-app .app-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 7px #2428310b; }
.final-app .app-tabs button:hover { color: #a83429; }
.final-app .panel-caption { margin: 16px 0 14px; font-size: 13px; color: #555c69; }
.final-app .dashboard-grid { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 1.65fr); gap: 16px; }
.final-app .ui-card { min-width: 0; padding: 23px; border-radius: 24px; background: #fff; box-shadow: 0 2px 3px #4f425905; }
.final-app .ui-card h3 { font-size: 16px; letter-spacing: -.025em; line-height: 1.5; }
.final-app .ui-muted { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.final-app .support-widget { text-align: center; }
.final-app .usage-ring { display: grid; place-items: center; width: 142px; height: 142px; margin: 20px auto; border-radius: 50%; background: conic-gradient(var(--coral) 0 59%, #fff 59% 60%, #ffded7 60% 100%); }
.final-app .usage-ring > span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 111px; height: 111px; border-radius: 50%; background: #fff; }
.final-app .usage-ring strong { font-size: 30px; font-weight: 800; letter-spacing: -.06em; line-height: 1.2; }
.final-app .usage-ring small { font-size: 14px; color: var(--muted); }
.final-app .usage-totals { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.final-app .usage-totals strong { display: block; color: #3f4855; font-size: 15px; }
.final-app .card-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.final-app .chip { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; padding: 4px 10px; border-radius: 100px; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: center; }
.final-app .teal { background: #d7f0ea; color: #166358; }
.final-app .violet { background: #ece1fa; color: #62328b; }
.final-app .coral { background: #ffded7; color: #973f32; }
.final-app .neutral { background: #f0f0f3; color: #575c67; }
.final-app .amber { background: #f9dda0; color: #77501b; }
.final-app .current-work h4 { margin-block: 8px 10px; }
.final-app .current-work > p:not(.ui-kicker) { font-size: 14px; color: var(--muted); }
.final-app .linked-task { display: flex; align-items: flex-start; gap: 10px; padding: 15px; margin-top: 20px; border-radius: 15px; background: #f5f4f7; font-size: 13px; }
.final-app .linked-task strong, .final-app .linked-task span:not(.link-glyph) { display: block; }
.final-app .linked-task strong { margin-bottom: 3px; font-weight: 600; }
.final-app .linked-task span:not(.link-glyph) { color: var(--muted); }
.final-app .link-glyph { color: #6e438d; font-size: 22px; line-height: 1.2; }
.final-app .report-widget { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding-block: 18px; }
.final-app .report-widget > div { flex: 1; }
.final-app .report-widget p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.final-app .file-tile { display: grid; flex-shrink: 0; place-items: center; width: 43px; height: 47px; border-radius: 13px; background: #f1eaf9; color: #704692; font-size: 24px; }
.final-app .kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 381px; }
.final-app .kanban-column { padding: 12px; border-radius: 20px; background: #ffffff5c; }
.final-app .column-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 0 2px 12px; }
.final-app .column-top h3 { font-size: 14px; line-height: 1.4; letter-spacing: -.02em; }
.final-app .column-top .chip { padding-inline: 8px; }
.final-app .task-card { padding: 18px 15px; border-radius: 22px; background: #fff; }
.final-app .task-card h4 { margin-top: 10px; font-size: 16px; }
.final-app .task-card p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.final-app .task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.final-app .empty-column { padding: 22px 8px; text-align: center; color: #535b69; font-size: 14px; }
.final-app .empty-column > span { display: block; font-size: 34px; color: #756b86; }
.final-app .empty-column strong { display: block; margin-block: 8px; }
.final-app .request-record { min-height: 381px; }
.final-app .request-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.final-app .request-fields .wide { grid-column: 1 / -1; }
.final-app .request-fields dt { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.final-app .request-fields dd { padding: 12px 15px; border-radius: 12px; background: #f1f1f3; color: #525b68; font-size: 14px; }
.final-app .record-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

.final-app .integrations { padding: 28px 0 50px; }
.final-app .integration-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.final-app .integration-heading h2 { font-size: 22px; letter-spacing: -.04em; line-height: 1.4; }
.final-app .tool-list { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 22px 16px; }
.final-app .tool-list span { display: flex; flex: 1; justify-content: center; min-width: 140px; padding: 17px 24px; border: 1px solid #e6e4df; border-radius: 100px; background: white; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }

.final-app .section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 70px; margin-bottom: 40px; }
.final-app .section-heading > p { max-width: 480px; }
.final-app .benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.final-app .benefit-card { padding: 30px; border-radius: 24px; background: #fffefa; }
.final-app .feature-mark { display: inline-grid; place-items: center; width: 47px; height: 47px; margin-bottom: 30px; border-radius: 16px; font-size: 25px; }
.final-app .benefit-card p { margin-top: 15px; color: var(--muted); }
.final-app .setup-strip { display: grid; grid-template-columns: 1fr 3fr; align-items: center; gap: 30px; margin-top: 40px; padding-top: 32px; border-top: 1px solid #78522040; }
.final-app .setup-strip h3 { max-width: 160px; font-size: 24px; }
.final-app .setup-strip ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.final-app .setup-strip li { display: flex; gap: 10px; align-items: flex-start; }
.final-app .setup-strip li > span { display: grid; flex-shrink: 0; place-items: center; width: 28px; height: 28px; border: 1px solid #89632c66; border-radius: 50%; font-size: 13px; }
.final-app .setup-strip strong { display: block; line-height: 1.6; }
.final-app .setup-strip p { margin-top: 4px; font-size: 14px; }
.final-app .split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.final-app .section-copy h2 { margin-bottom: 24px; }
.final-app .section-copy > p { max-width: 510px; color: var(--muted); }
.final-app .section-copy .text-link { margin-top: 22px; }

.final-app .job-figure { padding: 22px; border-radius: 30px; background: #f3d5cf; }
.final-app .job-card { padding: 28px; border-radius: 24px; background: #fff; }
.final-app .job-card > h3 { font-size: 23px; }
.final-app .source-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 20px; }
.final-app .source-pills span { padding: 5px 11px; border-radius: 100px; background: #f2f2f5; color: #545c68; font-size: 13px; }
.final-app .job-steps { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.final-app .job-steps li { display: flex; align-items: flex-start; gap: 12px; }
.final-app .job-steps li > span { display: grid; flex-shrink: 0; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f3f1f5; color: #60506e; font-size: 13px; font-weight: 700; }
.final-app .job-steps strong { font-size: 15px; font-weight: 700; }
.final-app .job-steps p { margin-top: 5px; font-size: 14px; color: var(--muted); }
.final-app .job-steps .review-step { padding: 16px; border-radius: 18px; background: #f5effb; }
.final-app .job-steps .review-step > span { background: #e7d9f5; }
.final-app .previous-report { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.final-app .previous-report p { margin-top: 8px; font-size: 13px; color: var(--muted); }

.final-app .coding-section .section-heading > p { color: var(--muted); }
.final-app .coding-board { overflow: hidden; border: 1px solid #e0e1e4; border-radius: 26px; background: #fff; }
.final-app .coding-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px 28px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.final-app .coding-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.final-app .coding-stages article { min-width: 0; padding: 28px; }
.final-app .coding-stages article + article { border-left: 1px solid var(--line); }
.final-app .stage-number { display: block; margin-bottom: 25px; color: #625b6d; font-size: 13px; font-weight: 600; }
.final-app .coding-stages h3 { font-size: 23px; margin-bottom: 18px; }
.final-app .coding-stages p { color: var(--muted); font-size: 14px; }
.final-app .agent-note { margin-top: 24px; padding: 18px; border-radius: 18px; background: #fff2e0; }
.final-app .agent-note strong { display: block; font-size: 14px; }
.final-app .agent-note p { margin-top: 7px; }
.final-app .code-preview { margin-block: 20px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #f8f8fa; }
.final-app .code-preview > span { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.final-app .code-preview code { display: block; padding: 15px 12px; font: 13px/1.9 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.final-app .code-preview code span { color: #1b6855; }
.final-app .review-gate { margin-top: 24px; padding: 18px; border-radius: 18px; background: #fff2ee; }
.final-app .review-gate p { margin-top: 10px; }
.final-app .managed-section { color: #fff7fb; }
.final-app .managed-section .section-copy > p { color: #f5dbe4; }
.final-app .managed-section .eyebrow { color: #fbd0dc; }
.final-app .service-stack { display: grid; gap: 12px; }
.final-app .service-stack > div { display: flex; align-items: center; gap: 16px; padding: 23px 24px; border: 1px solid #ffffff24; border-radius: 22px; background: #ffffff0b; }
.final-app .service-stack > div:nth-child(2) { margin-left: 20px; background: #ffffff16; }
.final-app .service-stack > div:nth-child(3) { margin-left: 40px; background: #fff5f0; color: #54283a; }
.final-app .service-stack > div > span { font-size: 13px; }
.final-app .service-stack > p { margin-top: 12px; font-size: 14px; color: #f5dbe4; }
.final-app .trust-section .split { align-items: start; }
.final-app .partner-note { margin-top: 32px; padding: 24px 0 0; border-top: 1px solid var(--line); }
.final-app .partner-note h3 { font-size: 20px; }
.final-app .partner-note p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.final-app .control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.final-app .control-grid article { padding: 24px; border-radius: 24px; background: #f3f3f4; }
.final-app .control-dot { display: block; width: 20px; height: 20px; border-radius: 7px; margin-bottom: 22px; border: 1px solid currentColor; }
.final-app .control-grid h3 { font-size: 19px; }
.final-app .control-grid p { margin-top: 12px; font-size: 14px; color: var(--muted); }

.final-app .pricing-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 80px;align-items: center;color: #242831;}
.final-app .pricing-grid p {color: #242831;}
.final-app .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-block: 26px 4px; font-size: 82px; font-weight: 700; line-height: 1.1; letter-spacing: -.07em; }
.final-app .price span { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.final-app .pricing-section .section-copy > .btn { margin-top: 25px; }
.final-app .pricing-card { padding: 36px; border-radius: 28px; background: #fffefa; }
.final-app .pricing-card h3 { font-size: 23px; line-height: 1.35; }
.final-app .price-list { margin: 24px 0; padding: 0; list-style: none; }
.final-app .price-list li { padding: 12px 0 12px 26px; position: relative; border-bottom: 1px solid #ece8df; }
.final-app .price-list li::before { content: "\2713"; position: absolute; left: 0; color: #216c59; font-weight: 700; }
.final-app .pricing-terms p { font-size: 13px; color: #242831; }
.final-app .closing { color: white; }
.final-app .closing-grid { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 70px; }
.final-app .closing h2 { font-size: clamp(34px, 4vw, 58px); }
.final-app .closing p {max-width: 510px;margin-top: 24px;color: white;}
.final-app .closing-action { justify-self: end; }
.final-app .closing .btn { background: #fff9f4; color: #30252a; }
.final-app .closing .btn:hover { background: #fff; }
.final-app .closing-action p { margin-top: 15px; font-size: 14px; }
.final-app .site-footer { padding-block: 52px 108px; }
.final-app .footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; margin-bottom: 34px; }
.final-app .footer-top p { margin-top: 17px; color: var(--muted); font-size: 14px; }
.final-app .footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 13px 24px; max-width: 550px; font-size: 14px; }
.final-app .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 35px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.final-app .footer-bottom p { max-width: 850px; }
.final-app .footer-bottom > span { flex-shrink: 0; }
.final-app .demo-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 36px; margin: auto; overflow-y: auto; border: 1px solid #e4dadd; border-radius: 28px; background: #fffefa; color: var(--ink); box-shadow: 0 28px 100px #24283140; }
.final-app .demo-dialog::backdrop { background: #24232b88; backdrop-filter: blur(5px); }
.final-app .dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 26px; }
.final-app .dialog-top .eyebrow { margin: 0; }
.final-app .dialog-close { min-height: 44px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 100px; background: #fff; font-size: 14px; }
.final-app .demo-dialog h2 { margin-bottom: 20px; font-size: clamp(34px, 3.65vw, 46px); }
.final-app .walkthrough { margin: 28px 0; padding-left: 24px; }
.final-app .walkthrough li { padding-left: 8px; margin-bottom: 22px; }
.final-app .walkthrough li::marker { color: #a64233; font-weight: 700; }
.final-app .walkthrough p { margin-top: 6px; color: var(--muted); font-size: 14px; }
/* Separate key reading surfaces without adding depth to every nested detail. */
.final-app :is(.benefit-card, .job-card, .coding-board, .pricing-card) {
  box-shadow: 0 0 0 1px #24283108, 0 4px 10px #2428310d, 0 18px 36px -10px #24283130;
}
.final-app .control-grid article {
  box-shadow: 0 0 0 1px #24283106, 0 3px 8px #2428310a, 0 12px 24px -8px #24283124;
}
@media (max-width: 1100px) {
  .final-app .wrap { width: calc(100% - 64px); }
  .final-app .desktop-nav { gap: 17px; font-size: 13px; }
  .final-app .header-cta { padding-inline: 17px; }
  .final-app .section-heading { gap: 40px; }
  .final-app .app-hero-stage .app-preview { margin-right: 65px; }
  .final-app .hero-glass-mark { width: 245px; right: -4px; }
  .final-app .split, .final-app .pricing-grid { gap: 44px; }
  .final-app .app-shell { grid-template-columns: 145px minmax(0, 1fr); }
  .final-app .app-sidebar { padding-inline: 10px; }
  .final-app .app-main { padding-inline: 18px; }
  .final-app .dashboard-grid { grid-template-columns: minmax(170px, .8fr) minmax(0, 1.4fr); gap: 12px; }
  .final-app .ui-card { padding: 19px; }
  .final-app .kanban { grid-template-columns: 1fr 1fr; }
  .final-app .kanban-column:last-child { grid-column: 1 / -1; }
  .final-app .empty-column { padding: 8px; }
  .final-app .empty-column > span { display: none; }
  .final-app .empty-column strong { margin-top: 0; }
  .final-app .benefit-card, .final-app .coding-stages article { padding: 24px; }
  .final-app .coding-stages { grid-template-columns: 1fr; }
  .final-app .coding-stages article { display: grid; grid-template-columns: minmax(180px, .7fr) 1fr; gap: 0 30px; }
  .final-app .coding-stages article + article { border-left: 0; border-top: 1px solid var(--line); }
  .final-app .stage-number { grid-column: 1 / -1; margin-bottom: 15px; }
  .final-app .coding-stages h3 { grid-column: 1; grid-row: 2 / 4; }
  .final-app .coding-stages article > :is(p, div) { grid-column: 2; }
  .final-app .code-preview { margin-top: 0; }
}
@media (max-width: 850px) {
  .final-app .desktop-nav { display: none; }
  .final-app .menu-toggle { display: inline-flex; }
  .final-app .header-cta { margin-left: auto; }
  .final-app .nav-row { gap: 14px; min-height: 88px; }
  .final-app .section { padding-block: 76px; }
  .final-app .hero { padding-top: 45px; }
  .final-app .hero-intro { margin-bottom: 58px; }
  .final-app .app-hero-stage { padding-top: 40px; }
  .final-app .app-hero-stage .app-preview { margin-right: 0; }
  .final-app .hero-glass-mark { width: 165px; top: -55px; right: 10px; }
  .final-app .app-preview { padding: 18px; }
  .final-app .preview-label > span:last-child { display: none; }
  .final-app .app-shell { grid-template-columns: 1fr; }
  .final-app .app-sidebar { display: none; }
  .final-app .app-main { padding: 0 20px 20px; }
  .final-app .section-heading, .final-app .split, .final-app .pricing-grid { grid-template-columns: 1fr; gap: 32px; }
  .final-app .section-heading > p, .final-app .section-copy > p { max-width: 600px; }
  .final-app .benefit-grid { gap: 12px; }
  .final-app .benefit-card { padding: 23px 19px; }
  .final-app .benefit-card h3 { font-size: 20px; }
  .final-app .setup-strip { grid-template-columns: 1fr; gap: 22px; }
  .final-app .setup-strip h3 { max-width: none; }
  .final-app .job-figure { max-width: 620px; width: 100%; }
  .final-app .managed-section .split { gap: 40px; }
  .final-app .service-stack { max-width: 600px; }
  .final-app .pricing-card { max-width: 640px; }
  .final-app .closing-grid { grid-template-columns: 1.2fr 1fr; gap: 30px; }
  .final-app .footer-top { flex-direction: column; gap: 30px; }
  .final-app .footer-links { justify-content: flex-start; max-width: none; }
  .final-app .footer-bottom { flex-direction: column; gap: 20px; }
}
@media (max-width: 600px) {
  .final-app .wrap { width: calc(100% - 40px); }
  .final-app .section { padding-block: 62px; }
  .final-app h1 { font-size: 44px; letter-spacing: -.065em; }
  .final-app h2 { font-size: 34px; }
  .final-app .eyebrow { margin-bottom: 18px; font-size: 13px; }
  .final-app .header-cta { display: none; }
  .final-app .hero { padding-top: 38px; padding-bottom: 34px; }
  .final-app .hero-intro { margin-bottom: 38px; }
  .final-app .hero-intro .eyebrow { max-width: none; }
  .final-app .hero-description { margin-top: 22px; font-size: 15px; }
  .final-app .hero-intro .actions { margin-top: 23px; gap: 10px; }
  .final-app .hero-intro .actions .btn { width: 100%; max-width: 340px; }
  .final-app .hero-intro .note { margin-top: 14px; }
  .final-app .app-hero-stage { padding-top: 36px; }
  .final-app .hero-glass-mark { width: 128px; top: -34px; right: 0; }
  .final-app .app-preview { padding: 12px; margin-inline: -8px; border-radius: 26px; }
  .final-app .preview-label { margin: 1px 0 13px; }
  .final-app .preview-pill { padding: 6px 10px; font-size: 13px; }
  .final-app .app-shell { border-radius: 20px; }
  .final-app .app-main { padding: 0 12px 14px; }
  .final-app .app-topbar { min-height: 53px; font-size: 13px; }
  .final-app .app-topbar > .chip { display: none; }
  .final-app .app-topbar > span > span { margin-inline: 4px; }
  .final-app .app-heading { margin: 19px 2px 16px; }
  .final-app .app-heading h2 { font-size: 23px; }
  .final-app .app-heading .studio-avatar { display: none; }
  .final-app .app-tabs { width: 100%; }
  .final-app .app-tabs button { flex: 1; padding: 9px 10px; min-height: 42px; }
  .final-app .panel-caption { margin-block: 14px; font-size: 13px; }
  .final-app .dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
  .final-app .current-work { grid-row: 1; }
  .final-app .ui-card { padding: 20px; border-radius: 24px; }
  .final-app .current-work h4 { font-size: 18px; }
  .final-app .current-work .card-top { margin-bottom: 18px; }
  .final-app .support-widget { display: grid; grid-template-columns: minmax(0, 1fr) 116px; align-items: center; gap: 0 12px; text-align: left; }
  .final-app .support-widget h3, .final-app .support-widget > .ui-muted, .final-app .usage-totals { grid-column: 1; }
  .final-app .support-widget > .ui-muted { margin: 4px 0 12px; }
  .final-app .usage-ring { grid-column: 2; grid-row: 1 / 4; width: 116px; height: 116px; margin: 0; }
  .final-app .usage-ring > span { width: 88px; height: 88px; }
  .final-app .usage-ring strong { font-size: 27px; }
  .final-app .usage-totals { gap: 8px; justify-content: flex-start; }
  .final-app .usage-totals > span { flex: 1; }
  .final-app .report-widget { flex-wrap: wrap; gap: 12px; }
  .final-app .report-widget > div { flex-basis: calc(100% - 60px); }
  .final-app .report-widget > .chip { margin-left: 55px; }
  .final-app .kanban { grid-template-columns: 1fr; min-height: 0; }
  .final-app .kanban-column:last-child { grid-column: auto; }
  .final-app .kanban-column { padding: 12px; }
  .final-app .task-card { padding: 20px; }
  .final-app .request-fields { grid-template-columns: 1fr; }
  .final-app .request-record { min-height: 0; }
  .final-app .request-fields .wide { grid-column: auto; }
  .final-app .app-preview figcaption { padding: 0 3px; font-size: 13px; }
  .final-app .integrations { padding-block: 24px 40px; }
  .final-app .integration-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .final-app .integration-heading h2 { font-size: 24px; }
  .final-app .tool-list { gap: 9px; }
  .final-app .tool-list span { min-width: 110px; font-size: 18px; padding: 12px 16px; }
  .final-app .section-heading { gap: 22px; margin-bottom: 28px; }
  .final-app .benefit-grid { grid-template-columns: 1fr; gap: 14px; }
  .final-app .benefit-card { padding: 26px; }
  .final-app .feature-mark { margin-bottom: 20px; }
  .final-app .benefit-card h3 { font-size: 23px; }
  .final-app .setup-strip { margin-top: 30px; padding-top: 26px; }
  .final-app .setup-strip ol { grid-template-columns: 1fr; gap: 18px; }
  .final-app .setup-strip li { gap: 14px; }
  .final-app .setup-strip p { font-size: 14px; margin: 2px 0 0; }
  .final-app .split, .final-app .pricing-grid { gap: 30px; }
  .final-app .job-figure { padding: 12px; border-radius: 26px; }
  .final-app .job-card { padding: 22px 18px; }
  .final-app .job-steps .review-step { padding: 14px 12px; }
  .final-app .job-figure figcaption { padding-inline: 5px; }
  .final-app .coding-bar { align-items: flex-start; flex-direction: column; padding: 20px; }
  .final-app .coding-stages article { display: block; padding: 25px 22px; }
  .final-app .coding-stages h3 { font-size: 24px; }
  .final-app .stage-number { margin-bottom: 20px; }
  .final-app .code-preview { margin-top: 20px; }
  .final-app .service-stack > div { padding: 21px 18px; gap: 12px; }
  .final-app .service-stack > div:nth-child(2) { margin-left: 10px; }
  .final-app .service-stack > div:nth-child(3) { margin-left: 20px; }
  .final-app .control-grid { grid-template-columns: 1fr; gap: 13px; }
  .final-app .control-grid article { padding: 24px; }
  .final-app .control-dot { margin-bottom: 17px; }
  .final-app .control-grid h3 { font-size: 21px; }
  .final-app .pricing-card { padding: 27px 24px; border-radius: 24px; }
  .final-app .price { font-size: 74px; }
  .final-app .closing-grid { grid-template-columns: 1fr; gap: 28px; }
  .final-app .closing h2 { font-size: 40px; }
  .final-app .closing-action { justify-self: start; }
  .final-app .closing-action p { margin-top: 15px; }
  .final-app .site-footer { padding-top: 40px; }
  .final-app .footer-links { gap: 10px 22px; }
  .final-app .demo-dialog { padding: 25px 22px; border-radius: 22px; }
  .final-app .dialog-top { gap: 10px; }
  .final-app .dialog-top .eyebrow { max-width: 140px; }
  .final-app .dialog-close { flex-shrink: 0; }
}
@media (max-width: 360px) {
  .final-app .wrap { width: calc(100% - 32px); }
  .final-app .eyebrow { letter-spacing: 0; }
  .final-app .app-main { padding-inline: 10px; }
  .final-app .app-tabs button { padding-inline: 7px; font-size: 13px; }
  .final-app .ui-card { padding: 17px; }
  .final-app .support-widget { grid-template-columns: minmax(0, 1fr) 94px; gap: 0 8px; }
  .final-app .usage-ring { width: 94px; height: 94px; }
  .final-app .usage-ring > span { width: 72px; height: 72px; }
  .final-app .usage-ring strong { font-size: 24px; }
  .final-app .usage-totals { flex-direction: column; gap: 5px; }
  .final-app .usage-totals strong { display: inline; margin-right: 5px; }
  .final-app .service-stack > div:nth-child(n) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .final-app *, .final-app *::before, .final-app *::after { scroll-behavior: auto !important; }
  .final-app .hero-brand-mark { animation: none; }
  .final-app .dot-grid-lit { opacity: 0 !important; }
}
@media (pointer: coarse) {
  .final-app .dot-grid-lit { opacity: 0 !important; }
}
@media (forced-colors: active) {
  .final-app .dot-grid { display: none; }
  .final-app .hero-glass-mark, .final-app .hero-brand-mark { display: none; }
  .final-app :is(.ui-card, .task-card, .benefit-card, .job-card, .control-grid article, .pricing-card, .chip, .app-tabs, .service-stack > div, .request-fields dd) { border: 1px solid CanvasText; }
  .final-app .app-tabs button[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .final-app .usage-ring { border: 8px solid Highlight; }
  .final-app .btn { border-color: ButtonText; }
}