/* /modules/ (MKT-09 launch): ported from the approved MKT-07 mockup (modules.css).
   Page-only rules on top of /assets/ed/base.css. The groups are rendered by tools/render-modules.cjs. */

/* ---------- Hero: directory of the six groups ---------- */
.phero .sub2 { font-size: 16px; color: var(--on-dark-muted); max-width: 600px; margin: 12px auto 0; line-height: 1.6; opacity: .85; }
.phero h1.split { max-width: none; }
.phero .reassure { margin-top: 18px; font-size: 14px; color: var(--gold-2); font-weight: 600; }
.dir { margin: 58px auto 0; max-width: 1040px; text-align: left; }
.dir .q { text-align: center; font: 700 13px Manrope; letter-spacing: .04em; color: var(--on-dark-muted); margin: 0 0 16px; }
.dir .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dir a { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: #fff; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s; overflow: hidden; }
.dir a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); opacity: .9; }
.dir a:hover { background: rgba(255,255,255,.11); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(234,197,27,.45); }
.dir .n { font: 800 13px Manrope; color: var(--gold); letter-spacing: .06em; }
.dir b { display: block; font-size: 17px; letter-spacing: -.01em; }
.dir small { display: block; color: var(--on-dark-muted); font-size: 13.5px; font-weight: 500; }
.dir svg { width: 16px; height: 16px; color: var(--gold); transition: transform .3s var(--ease); }
.dir a:hover svg { transform: translate(3px, 0); }
.shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1040px; margin: 22px auto 0; border-top: 1px solid rgba(255,255,255,.14); text-align: left; }
.shortcuts a { text-decoration: none; color: #fff; padding: 18px 20px 4px; border-left: 1px solid rgba(255,255,255,.1); }
.shortcuts a:first-child { border-left: 0; }
.shortcuts span { display: block; font: 700 12px Manrope; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.shortcuts strong { display: flex; gap: 8px; align-items: center; font-size: 16px; margin-top: 4px; }
.shortcuts strong svg { width: 15px; height: 15px; color: var(--gold); }

/* ---------- Sticky group nav ---------- */
.gnav { position: sticky; top: 78px; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.gnav .wrap { display: flex; justify-content: safe center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.gnav .wrap::-webkit-scrollbar { display: none; }
.gnav a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--muted); transition: background .25s, color .25s; }
.gnav a i { width: 8px; height: 8px; border-radius: 50%; }
.gnav a .n { font: 800 11px Manrope; letter-spacing: .06em; opacity: .7; display: inline-flex; }
.gnav a:hover { color: var(--text); background: var(--surface); }
.gnav a.on { color: var(--green); background: var(--gold-light); }

/* ---------- Group sections ---------- */
.group { scroll-margin-top: 136px; }
.g-deliver-work, .g-look-after-customers { background: var(--surface); }
.group .chead { max-width: 820px; }
.group .chead .eyebrow i { box-shadow: none; }
/* The example business for groups without a staged sidebar (Manage resources, Automate and improve) */
.gbiz { display: flex; align-items: center; gap: 8px; width: fit-content; margin: -24px auto 30px; padding: 5px 13px 5px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 700; color: var(--muted); }
.gbiz img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.group .app .brand .nm small { white-space: nowrap; }
.g-automate-improve .gbiz { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* Feature tabs (vertical list, or a pill row) */
.ftabs { display: grid; gap: 6px; }
.ftabs button { position: relative; text-align: left; font: inherit; color: var(--text); background: transparent; border: 0; border-radius: 16px; padding: 14px 18px 14px 20px; cursor: pointer; overflow: hidden; transition: background .3s var(--ease), box-shadow .3s; }
.ftabs button::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--line-2); transition: background .3s; }
.ftabs button b { display: block; font-size: 16px; letter-spacing: -.01em; }
.ftabs button small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.ftabs button:hover { background: var(--surface); }
.g-deliver-work .ftabs button:hover, .g-look-after-customers .ftabs button:hover { background: var(--bg); }
.ftabs button.on { background: var(--card); box-shadow: var(--shadow-s), inset 0 0 0 1px var(--line); }
.ftabs button.on::before { background: var(--tone); }
.ftabs .prog, .kside .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--tone); opacity: .7; }
.cycling:not(.held) .ftabs button.on .prog, .cycling:not(.held) .kside .on .prog { animation: mkProg var(--dwell, 5.2s) linear both; }
@keyframes mkProg { to { width: 100%; } }
.ftabs.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.ftabs.row button { border-radius: 999px; padding: 10px 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ftabs.row button::before, .ftabs.row button small { display: none; }
.ftabs.row button b { font-size: 14.5px; font-weight: 700; }
.ftabs.row button.on { background: var(--green); color: #fff; box-shadow: none; }
.ftabs.row button.on .prog { background: var(--gold); }

.gstage { display: grid; grid-template-columns: 330px 1fr; gap: 44px; align-items: start; }
.gstage.flip { grid-template-columns: 1fr 330px; }
.gstage.flip .gside { order: 2; }
.gstage.top { grid-template-columns: 1.55fr 1fr; align-items: center; gap: 52px; }
.gmain .gdet { margin-top: 34px; }
.laptop .screen { background: #f6f7f9; }

/* Feature detail copy */
.fdetail .fk, .rcard .fk, .kcard .fk { display: inline-flex; align-items: center; gap: 8px; font: 800 12.5px Manrope; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.fdetail h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; margin: 8px 0 12px; }
.fdetail p { color: var(--muted); margin: 0; }
.fdetail ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.fdetail li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.fdetail li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green-2); }
.gmain .fdetail, .gdet.wide .fdetail { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.gmain .fdetail > :not(ul), .gdet.wide .fdetail > :not(ul) { grid-column: 1; }
.gmain .fdetail ul, .gdet.wide .fdetail ul { grid-column: 2; grid-row: 1 / span 6; margin-top: 4px; align-self: start; }
.tlink { display: inline-flex; margin-top: 16px; font-weight: 700; font-size: 15px; color: var(--green-2); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; justify-self: start; }
.figcap { font-size: 13px; color: var(--muted); margin-top: 12px !important; font-style: italic; }
.gdet .fdetail { animation: mkFade .5s var(--ease) both; }
@keyframes mkFade { from { opacity: 0; transform: translateY(8px); } }

/* 03 Manage resources: spotlight cards */
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.spot.rcard { align-items: stretch; text-align: left; gap: 10px; padding: 26px 24px 24px; border-radius: 24px; scroll-margin-top: 150px; transition: box-shadow .3s; }
.spot.rcard h3 { text-align: left; font-size: 21px; }
.spot.rcard p { margin: 0; text-align: left; font-size: 14.5px; }
.rcard.on { box-shadow: inset 0 0 0 2px var(--tone); }
.rcard .mini { position: relative; margin-top: auto; background: var(--card); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; font-size: 13.5px; }
.rcard .mini .mt { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.rcard .mini .mr { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.rcard .mini .mr span { color: var(--muted); }
.rcard .mini .mr b { font-weight: 700; text-align: right; }
.rcard .mini .st { font-style: normal; font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--mint-2); color: var(--green-2); white-space: nowrap; }

/* 05 Know the business */
.kbiz { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.kside { display: grid; gap: 10px; }
.kcard { position: relative; overflow: hidden; text-align: left; font: inherit; color: var(--text); background: transparent; border: 0; border-radius: 18px; padding: 16px 18px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, box-shadow .3s; }
.kcard b { display: block; font-size: 16.5px; margin-top: 4px; letter-spacing: -.01em; }
.kcard small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 4px; }
.kcard:hover { background: var(--surface); }
.kcard.on { background: var(--card); box-shadow: var(--shadow-s), inset 0 0 0 1.5px var(--tone); }
.gdet.wide { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }

/* 06 Automate and improve: the green band */
.g-automate-improve { background: var(--green); color: #fff; position: relative; overflow: hidden; }
.g-automate-improve::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60%; height: 80%; background: radial-gradient(closest-side, rgba(234,197,27,.16), transparent); pointer-events: none; }
.g-automate-improve .wrap { position: relative; }
.g-automate-improve .chead .eyebrow { color: var(--gold); }
.g-automate-improve .chead h2 { color: #fff; }
.g-automate-improve .chead h2 em { color: var(--gold); }
.g-automate-improve .chead p { color: var(--on-dark-muted); }
.agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.acard { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 26px; border-radius: 26px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); scroll-margin-top: 150px; transition: box-shadow .3s; }
.acard.on { box-shadow: inset 0 0 0 2px var(--gold); }
.acard > :not(.amini) { margin-left: 12px; margin-right: 12px; }
.acard .fk { margin-top: 14px; font: 800 12.5px Manrope; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.acard h3 { font-size: 22px; letter-spacing: -.02em; color: #fff; }
.acard p { margin: 0; color: var(--on-dark-muted); font-size: 15px; line-height: 1.55; }
.acard .tlink { color: var(--gold); }
.amini { position: relative; aspect-ratio: 480 / 380; border-radius: 16px; overflow: hidden; background: #f6f7f9; box-shadow: 0 24px 40px -28px rgba(0,0,0,.6); }
.app.solo { width: 480px; height: 380px; grid-template-columns: 1fr; }
.app.solo .body { padding: 18px 20px; gap: 14px; }
.app.solo .h h4 { font-size: 19px; }
.app.solo .flowx.v .nd { min-width: 300px; padding: 10px 14px; }

/* Mid-page call to action (live copy) */
.midcta { background: var(--green-deep); color: #fff; }
.midcta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 44px; padding-bottom: 44px; flex-wrap: wrap; }
.midcta p { margin: 0 0 6px; color: var(--gold); font-weight: 700; font-size: 14px; }
.midcta h2 { font-size: clamp(28px, 3vw, 40px); color: #fff; }

/* ---------- Feature index ---------- */
#index { scroll-margin-top: 136px; background: var(--surface); }
.fsearch { max-width: 760px; margin: 0 auto; }
.fsearch .in { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 999px; padding: 6px 8px 6px 22px; box-shadow: var(--shadow-s), inset 0 0 0 1px var(--line); }
.fsearch .in svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.fsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 17px Manrope; color: var(--text); padding: 14px 0; }
.fsearch .in:focus-within { box-shadow: var(--shadow-s), inset 0 0 0 2px var(--gold); }
.fchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.fchips button { display: inline-flex; align-items: center; gap: 8px; font: 600 14px Manrope; color: var(--text); background: var(--bg); border: 0; border-radius: 999px; padding: 9px 15px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.fchips button i { width: 8px; height: 8px; border-radius: 50%; }
.fchips button.on { background: var(--green); color: #fff; box-shadow: none; }
.fcount { text-align: center; color: var(--muted); font-size: 14px; margin: 16px 0 26px; }
.fidx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fi { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; text-decoration: none; background: var(--card); border-radius: 16px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line); transition: transform .25s var(--ease), box-shadow .25s; }
.fi:hover { transform: translateY(-2px); box-shadow: var(--shadow-s), inset 0 0 0 1px var(--line-2); }
.fi .dt { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; grid-row: 1 / span 2; }
.fi b { display: block; font-size: 15.5px; }
.fi small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.fi .gn { grid-column: 2; font: 700 11px Manrope; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .8; margin-top: 4px; }
.fidx .none { grid-column: 1 / -1; text-align: center; color: var(--muted); }

/* ---------- Integrations (text only) ---------- */
.integ { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.integ h2 { font-size: clamp(30px, 3.4vw, 44px); }
.integ p { color: var(--muted); }
.ilist { display: grid; gap: 10px; }
.ilist .it { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 18px 22px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ilist .it b { font-size: 18px; letter-spacing: -.01em; }
.ilist .it small { grid-column: 1; color: var(--muted); font-size: 14px; }
.ilist .it .s { grid-row: 1 / span 2; grid-column: 2; font: 700 12px Manrope; padding: 5px 11px; border-radius: 999px; background: var(--mint-2); color: var(--green-2); }
.ilist .it.soon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); box-shadow: none; border: 1.5px dashed var(--line-2); }
.ilist .it.soon .s { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Studio link (live copy) ---------- */
.studio-link { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 38px; border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); flex-wrap: wrap; }
.studio-link .k { font: 700 13px Manrope; color: var(--muted); }
.studio-link h2 { font-size: clamp(26px, 2.8vw, 36px); margin: 6px 0 8px; }
.studio-link p { margin: 0; color: var(--muted); max-width: 560px; }

/* ---------- Staged screen internals ---------- */
.group .screen .app { transition: opacity .45s var(--ease); }
.group .screen .app.enter { opacity: 0; }
.app .body.mk { padding: 22px 26px; }
.app .mk .para { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: #2c3446; }
.app .mk .mrow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid #eef0f4; font-size: 14.5px; }
.app .mk .mrow:last-child { border-bottom: 0; }
.app .mk .mrow > div { flex: 1; min-width: 0; }
.app .mk .mrow b { display: block; font-size: 14.5px; }
.app .mk .mrow small { color: #6b7385; font-size: 13px; }
.app .mk .mrow .k { flex: 1; color: #7b8394; }
.app .mk .card .lbl + .mrow { margin-top: 6px; }
.app .mk .dotc { width: 10px; height: 10px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 4px var(--t-soft); flex: none; }
.app .mk .secl { display: grid; gap: 2px; margin-top: 10px; }
.app .mk .secl div { padding: 9px 12px; border-radius: 9px; font-size: 14px; color: #4b5467; }
.app .mk .secl .on { background: var(--t-soft); color: var(--t-ink); font-weight: 600; }
.app .mk .opt { flex: 1; border: 1px solid #dfe2ea; border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 14px; margin-top: 8px; }
.app .mk .opt small { display: block; font-weight: 500; color: #6b7385; font-size: 12.5px; }
.app .mk .opt.on { border: 2px solid var(--t); }
.app .mk .kv.tot { border-top: 1px solid #e6e8ee; padding-top: 12px; }
.app .mk .kv.tot b { font-size: 18px; }
.app .mk .bcard { background: #f6f7f9; border: 1px solid #e6e8ee; border-left: 3px solid var(--t); border-radius: 10px; padding: 12px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.app .mk .box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #cfd4de; display: grid; place-items: center; flex: none; }
.app .mk .box.done { background: #1f7a45; border-color: #1f7a45; color: #fff; }
.app .mk .box svg { width: 14px; height: 14px; }
.app .mk .evt { margin-top: 10px; background: var(--t-soft); border-left: 3px solid var(--t); border-radius: 8px; padding: 10px; font-weight: 600; font-size: 13.5px; }
.app .mk .evt small { display: block; color: #6b7385; font-weight: 500; font-size: 12.5px; margin-top: 2px; }
.app .mk .free { margin-top: 10px; color: #9aa1b0; font-size: 13px; }
.app .mk .tb { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.app .mk .tb td { padding: 13px 0; border-bottom: 1px solid #eef0f4; }
.app .mk .tb tr:last-child td { border-bottom: 0; }
.app .mk .big { font: 700 40px/1.1 Inter; letter-spacing: -.02em; margin-top: 8px; color: #1d2433; font-variant-numeric: tabular-nums; }
.app .mk .barrow { display: grid; grid-template-columns: 170px 1fr 90px; gap: 14px; align-items: center; font-size: 14px; }
.app .mk .barrow b { text-align: right; }
.app .mk .bar { height: 12px; background: #eef0f4; border-radius: 6px; overflow: hidden; }
.app .mk .bar i { display: block; height: 100%; width: var(--w); background: var(--t); border-radius: 6px; }
.app .mk .sync { display: flex; gap: 8px; align-items: center; color: #1f7a45; font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.app .mk .sync svg { width: 15px; height: 15px; }
.app .mk .flowx { display: flex; align-items: center; }
.app .mk .nd { background: #fff; border: 1px solid #e6e8ee; border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 14px; text-align: center; min-width: 170px; }
.app .mk .nd small { display: block; color: #6b7385; font-weight: 500; font-size: 12.5px; }
.app .mk .nd.x { border-color: var(--t); box-shadow: 0 0 0 3px var(--t-soft); }
.app .mk .ln { flex: 1; height: 2px; background: #dfe2ea; position: relative; overflow: hidden; }
.app .mk .ln i { position: absolute; inset: 0; background: var(--t); transform-origin: left; }
.app .mk .flowx.v { flex-direction: column; }
.app .mk .flowx.v .ln { flex: none; width: 2px; height: 22px; }
.app .mk .flowx.v .ln i { transform-origin: top; }
.app .mk .flowx.v .nd { min-width: 340px; }
.app .mk .bub { background: #f1f3f7; border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 14.5px; max-width: 88%; line-height: 1.5; }
.app .mk .bub.me { justify-self: end; background: var(--t); color: #fff; border-radius: 14px 14px 4px 14px; }
.app .mk .photo { width: 300px; flex: none; border-radius: 14px; background-size: cover; background-position: center; min-height: 250px; }
.app .mk .col { min-width: 150px; font-weight: 600; font-size: 14px; background: #f6f7f9; border: 1px solid #e6e8ee; border-radius: 8px; padding: 8px 12px; }
.app .mk .arr { flex: 1; color: #9aa1b0; }
.app .mk .arr svg { width: 16px; height: 16px; }
.app .mk .dsteps { display: grid; grid-template-columns: repeat(3, 1fr); }
.app .mk .st { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; font-size: 14.5px; }
.app .mk .st::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: #dfe2ea; }
.app .mk .st:first-child::before { display: none; }
.app .mk .st.done::before { background: #1f7a45; }
.app .mk .st .c { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #dfe2ea; background: #fff; display: grid; place-items: center; position: relative; }
.app .mk .st.done .c { background: #1f7a45; border-color: #1f7a45; color: #fff; }
.app .mk .st .c svg { width: 16px; height: 16px; }
.app .mk .st small { color: #6b7385; font-size: 13px; }
.app .mk .num { width: 30px; height: 30px; border-radius: 50%; background: var(--t-soft); color: var(--t-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.app .mk .reqs { display: grid; gap: 10px; }
.app .mk .rq { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e6e8ee; border-radius: 12px; padding: 12px 14px; }
.app .mk .rq.on { border-color: var(--t); }
.app .mk .rq .para { font-size: 13.5px; margin-top: 2px; }

/* Staged screens are drawn at 880 x 550 so their content reads larger in the laptop */
.group .screen .sc-in { position: absolute; inset: 0; }
.group .screen .app { width: 880px; height: 550px; grid-template-columns: 196px 1fr; font-size: 15px; }
.group .screen .app .side { padding: 18px 12px; }
.group .screen .app .brand { padding-bottom: 16px; }
.group .screen .app .top { height: 56px; padding: 0 22px; }
.group .screen .app .body.mk { padding: 18px 22px; gap: 14px; overflow: hidden; }
.app .mk .stats .sv { font: 700 24px/1.15 Inter; letter-spacing: -.02em; color: #1d2433; margin-top: 6px; font-variant-numeric: tabular-nums; }
.app .mk .stats small { color: #6b7385; font-size: 12.5px; }
.app .mk .free.strong { color: #1d2433; font-weight: 600; text-align: left; }
.app .mk .steps3 { gap: 8px; }
.app .mk .s3 { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #6b7385; background: #fff; border: 1px solid #e6e8ee; border-radius: 10px; padding: 8px 12px; }
.app .mk .s3 .num { width: 24px; height: 24px; font-size: 12px; }
.app .mk .s3.done { color: #1f7a45; }
.app .mk .s3.done .num { background: #e3f5ea; color: #1f7a45; }
.app .mk .s3.on { color: var(--t-ink); border-color: var(--t); }

/* Scripted loops (Rev 2 pattern; cursor, toast and bump styles come from base.css) */
.app .mk .mrow.new { animation: rowIn .7s var(--ease) both; background: #f1f6fd; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.app .mk .inv { display: grid; gap: 12px; margin-top: 12px; animation: mkFade .45s var(--ease) both; }
.app .mk .inv .kv { grid-template-columns: 1fr auto; }
.app .mk .q-total { font-variant-numeric: tabular-nums; }

/* Your investment, as on the homepage proposal */
.app .mk .inv .line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef0f4; font-size: 14px; }
.app .mk .inv .line small, .app .mk .qopt small { display: block; color: #6b7385; font-size: 12.5px; }
.app .mk .qopt { display: flex; align-items: center; gap: 11px; margin-top: 10px; border: 1px solid #dfe2ea; border-radius: 10px; padding: 10px 12px; font-size: 14px; transition: border-color .35s, background .35s; }
.app .mk .qopt > div { flex: 1; }
.app .mk .qopt .tick { flex: 0 0 22px; height: 22px; border-radius: 7px; border: 2px solid #cfd4de; display: grid; place-items: center; transition: all .3s; }
.app .mk .qopt .tick svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity .25s; }
.app .mk .qopt.in { border-color: #f2ad47; background: #fffaf0; }
.app .mk .qopt.in .tick { background: var(--t); border-color: var(--t); }
.app .mk .qopt.in .tick svg { opacity: 1; }
.app .mk .qtot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #eef0f4; margin-top: 12px; padding-top: 11px; font-size: 14px; color: #4b5467; }
.app .mk .qtot b { font: 700 21px Inter; color: #1d2433; font-variant-numeric: tabular-nums; }
.app .mk .qopt.added { border-color: #f2ad47; background: #fffaf0; animation: popIn .6s var(--ease) both; }
.app .mk .qopt .pill { flex: none; }
.app .mk .qwith { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 14px; color: #4b5467; opacity: 0; transition: opacity .4s; }
.app .mk .qwith.on { opacity: 1; }
.app .mk .qwith b { font: 700 16px Inter; color: #1d2433; font-variant-numeric: tabular-nums; }

/* Screen motion: rows arrive, bars grow, lines draw */
@keyframes mkRise { from { opacity: 0; transform: translateY(8px); } }
@keyframes mkGrow { from { width: 0; } }
@keyframes mkDraw { from { transform: scaleX(0); } }
@keyframes mkDrawV { from { transform: scaleY(0); } }
@keyframes mkType { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.app .mk [style*="--i"] { animation: mkRise .5s var(--ease) both; animation-delay: calc(var(--i) * .1s + .15s); }
.app .mk .bar i { animation: mkGrow 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * .12s + .3s); }
.app .mk .ln i { animation: mkDraw .7s var(--ease) both; animation-delay: .4s; }
.app .mk .flowx.v .ln i { animation-name: mkDrawV; }
.app .mk .typed { animation: mkType 1.4s steps(6) both; animation-delay: .4s; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .gstage, .gstage.flip { grid-template-columns: 280px 1fr; gap: 32px; }
  .gstage.flip { grid-template-columns: 1fr 280px; }
  .ftabs button small { display: none; }
  .rgrid { grid-template-columns: repeat(2, 1fr); }
  .agrid { grid-template-columns: repeat(2, 1fr); }
  .agrid .acard:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; }
  .agrid .acard:last-child .amini { grid-row: 1 / span 6; }
  .fidx { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .dir .grid { grid-template-columns: 1fr 1fr; }
  .shortcuts { grid-template-columns: 1fr; }
  .shortcuts a { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding: 14px 4px; }
  .shortcuts a:first-child { border-top: 0; }
  .gstage, .gstage.flip, .gstage.top, .kbiz, .integ { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gstage.flip .gside { order: 0; }
  .ftabs:not(.row) { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 6px; }
  .ftabs:not(.row)::-webkit-scrollbar { display: none; }
  .ftabs:not(.row) button { flex: none; border-radius: 999px; padding: 10px 16px; box-shadow: inset 0 0 0 1px var(--line); background: var(--bg); }
  .ftabs:not(.row) button::before { display: none; }
  .ftabs:not(.row) button b { font-size: 14.5px; }
  .ftabs:not(.row) button.on { background: var(--green); color: #fff; box-shadow: none; }
  .ftabs.row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 22px; padding: 2px 18px 6px; }
  .ftabs.row::-webkit-scrollbar { display: none; }
  .ftabs.row button { flex: none; }
  .gmain .fdetail, .gdet.wide .fdetail { grid-template-columns: minmax(0, 1fr); }
  .gmain .fdetail ul, .gdet.wide .fdetail ul { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .kside { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 6px; }
  .kside::-webkit-scrollbar { display: none; }
  .rgrid, .agrid, .fidx { grid-template-columns: minmax(0, 1fr); }
  .agrid .acard:last-child { display: flex; }
}
@media (max-width: 600px) {
  .group .laptop .lid { padding: 5px; border-radius: 16px; }
  .group .laptop .lid::before, .group .laptop .base { display: none; }
  .group .laptop .screen { aspect-ratio: 620 / 540; border-radius: 12px; }
  .group .screen .app { width: 620px; height: 540px; grid-template-columns: 1fr; }
  .group .screen .app .side { display: none; }
  .app .mk .photo { width: 220px; }
  .dir .grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dir a { padding: 14px 16px; }
  .dir { margin-top: 40px; }
  .group { scroll-margin-top: 124px; }
  .studio-link { padding: 26px 22px; }
  .midcta .wrap { padding-top: 34px; padding-bottom: 34px; }
  .ilist .it { padding: 16px 18px; }
}

/* Reduced motion: everything still, final states shown */
@media (prefers-reduced-motion: reduce) {
  .app .mk [style*="--i"], .app .mk .bar i, .app .mk .ln i, .app .mk .typed, .gdet .fdetail { animation: none !important; }
  .ftabs .prog, .kside .prog { display: none; }
  .group .screen .app { transition: none; }
}

/* ---------- Launch additions ---------- */
/* Feature ids sit on the tabs and cards, so /modules/#quotes lands below the sticky bars */
.ftabs button, .kcard { scroll-margin-top: 150px; }
/* Small-screen polish: a status pill beside a wrapped label keeps its shape */
.rcard .mini .mr { align-items: center; }

/* ---------- Round 2 (1 Oct 2026): real office captures, the field app phone, the Assistant card ---------- */
.realcap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;z-index:6;background:#fff}
.mpair{position:relative}
.mpair .mphone{position:absolute;left:-5%;bottom:-6%;width:22%;min-width:110px;z-index:3;filter:drop-shadow(0 26px 36px rgba(0,0,0,.35))}
.mpair .mphone .phone{width:100%;border-radius:clamp(20px,2.8vw,36px);padding:clamp(5px,.55vw,7px)}
.mpair .mphone .phone .screen{border-radius:clamp(16px,2.3vw,30px)}
.mpair .mphone .phone .island{top:clamp(8px,1vw,14px);height:clamp(10px,1.3vw,18px)}
@media (max-width:700px){.mpair{display:flex;align-items:flex-end;gap:8px}.mpair .laptop{flex:1;min-width:0}.mpair .mphone{position:relative;left:auto;bottom:auto;width:25%;min-width:0;flex:0 0 25%}}
.gdet .newin.on-light{margin:0 0 14px}
.acard .newin{color:#e6f1ed;font-size:13.5px}
.cfm.mini{transform:none;opacity:1;padding:10px 12px}
.cfm.mini .acts2{margin-top:8px}
.cfm.mini .go{padding:7px 12px;font-size:12.5px}
.newstrip{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;margin-top:30px}
.newstrip span{display:inline-flex;gap:10px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#e6f1ed;border-radius:999px;padding:9px 16px 9px 9px;font-weight:600;font-size:14px}
.newstrip b{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--gold);color:var(--green);border-radius:999px;padding:3px 8px}