/* ClickMoxie secondary pages. Shared navigation, buttons, and cards use style.css. */
.cm-page { --cm-gold: var(--gold, #d6b268); --cm-ink: #151719; --cm-body: #555b60; --cm-line: #e3e3df; --cm-paper: #f7f7f3; color: var(--cm-ink); background: #fff; }
.cm-page [hidden] { display: none !important; }
.cm-page-intro { padding: clamp(70px, 8vw, 122px) 0; color: #fff; background: #121416; border-bottom: 1px solid #272a2c; }
.cm-intro-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, .75fr); align-items: center; gap: clamp(40px, 7vw, 112px); }
.cm-intro-copy h1 { margin: 18px 0 24px; font-size: clamp(44px, 5.7vw, 78px); line-height: 1.06; letter-spacing: -.045em; font-weight: 750; }
.cm-intro-copy-wide { max-width: 820px; }
.cm-page-lead { max-width: 640px; margin: 0; color: #c4c8ca; font-size: clamp(17px, 1.65vw, 20px); line-height: 1.75; }
.cm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 34px; }
.cm-page .cm-light-link { color: #fff; }
.cm-intro-note { padding: 32px 0 32px 36px; border-left: 1px solid #3d3b32; }
.cm-note-symbol { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; color: var(--cm-gold); border: 1px solid #66573b; border-radius: 16px; background: #202019; }
.cm-note-symbol .icon { width: 29px; height: 29px; }
.cm-note-heading { margin: 24px 0 15px; font-size: clamp(23px, 2.25vw, 30px); line-height: 1.3; letter-spacing: -.025em; font-weight: 650; }
.cm-intro-note > p:last-child { max-width: 260px; margin: 0; color: #aeb4b7; font-size: 15px; line-height: 1.75; }
.cm-page-section { padding: clamp(65px, 7.5vw, 106px) 0; }
.cm-section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; }
.cm-section-top .section-heading { margin-bottom: 0; }
.cm-section-top .section-kicker { margin-bottom: 14px; }
.cm-section-description { max-width: 340px; margin: 0 0 4px; color: var(--cm-body); font-size: 16px; line-height: 1.7; }
.cm-pricing-note { margin: 22px 0 0; color: #606568; font-size: 13px; line-height: 1.6; text-align: center; }

/* Product vision and page endings. */
.cm-app-section { padding: clamp(60px, 6.6vw, 94px) 0; color: #fff; background: #121416; overflow: hidden; }
.cm-app-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(38px, 6vw, 86px); }
.cm-app-visual { min-width: 0; padding: 28px 0 0; overflow: hidden; border: 1px solid #38372e; border-radius: 22px; background: #fff; }
.cm-app-art { display: block; width: 100%; height: auto; }
.cm-app-copy .section-kicker { color: var(--cm-gold); }
.cm-app-copy h2, .cm-service-copy h2, .cm-contact-aside h2 { margin: 14px 0 24px; font-size: clamp(33px, 3.65vw, 49px); line-height: 1.13; letter-spacing: -.035em; font-weight: 700; }
.cm-app-copy > p:not(.section-kicker):not(.cm-status-pill) { margin: 0; color: #c0c5c8; font-size: 16px; line-height: 1.8; }
.cm-vision-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 27px; padding: 0; list-style: none; }
.cm-vision-words li { padding: 7px 11px; color: #dfdfd9; font-size: 12px; line-height: 1.5; border: 1px solid #3b3d3c; border-radius: 5px; background: #1c1e1e; }
.cm-status-pill { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--cm-gold); font-size: 13px; line-height: 1.6; font-weight: 600; }
.cm-status-pill > span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.cm-app-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cm-app-action p { max-width: 150px; margin: 0; color: #a9afb2; font-size: 12px; line-height: 1.6; }
.cm-app-download:disabled { opacity: .53; cursor: not-allowed; transform: none; box-shadow: none; }
.cm-bottom-section { background: var(--cm-paper); }
.cm-bottom-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.cm-bottom-cta h2 { margin: 12px 0 14px; font-size: clamp(28px, 3.15vw, 41px); line-height: 1.2; letter-spacing: -.035em; }
.cm-bottom-cta p:not(.section-kicker) { margin: 0; color: var(--cm-body); line-height: 1.7; }
.cm-bottom-cta > .btn { flex: 0 0 auto; }

/* Service navigation and detail sections. */
.cm-service-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 46px; }
.cm-service-navigation a { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 17px 18px; color: #f3f3ef; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid #393b3a; border-radius: 10px; background: #1a1c1d; transition: border-color .18s ease, background .18s ease; }
.cm-service-navigation a:hover, .cm-service-navigation a:focus-visible { border-color: var(--cm-gold); background: #25251f; }
.cm-service-navigation a > .icon:first-child { width: 23px; height: 23px; flex: 0 0 auto; color: var(--cm-gold); }
.cm-service-navigation .cm-service-nav-arrow { width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; color: #9da5a9; }
.cm-service-row { padding: clamp(60px, 7vw, 100px) 0; scroll-margin-top: 110px; border-bottom: 1px solid var(--cm-line); }
.cm-service-row:nth-child(even) { background: var(--cm-paper); }
.cm-service-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(40px, 8vw, 120px); }
.cm-service-visual { position: relative; display: flex; min-height: 350px; flex-direction: column; align-items: center; justify-content: center; padding: 35px; overflow: hidden; color: var(--cm-gold); border: 1px solid #32332e; border-radius: 22px; background: radial-gradient(ellipse at center, #343026 0, #1b1d1c 47%, #141617 80%); }
.cm-service-number { position: absolute; top: 23px; left: 27px; color: #aaa28d; font-size: 12px; line-height: 1; letter-spacing: .14em; font-weight: 600; }
.cm-service-orbit { position: relative; display: grid; width: 194px; height: 194px; flex: 0 0 auto; place-items: center; border: 1px solid #4b4637; border-radius: 50%; }
.cm-service-orbit::before, .cm-service-orbit::after { position: absolute; content: ""; border: 1px solid #393b34; border-radius: 50%; pointer-events: none; }
.cm-service-orbit::before { inset: -20px; }
.cm-service-orbit::after { inset: 22px; border-color: #706044; }
.cm-service-visual-icon { display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid #6c5a39; border-radius: 22px; background: #2d2a20; box-shadow: 0 14px 30px #0003; }
.cm-service-visual-icon .icon { width: 43px; height: 43px; }
.cm-service-visual-label { position: relative; margin-top: 36px; color: #d2c8b1; font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.cm-service-copy > p:not(.section-kicker) { margin: 0 0 25px; color: var(--cm-body); font-size: 17px; line-height: 1.8; }
.cm-service-topics, .cm-brief-points { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.cm-service-topics li, .cm-brief-points li { display: flex; align-items: center; gap: 11px; font-size: 14px; line-height: 1.6; }
.cm-service-topics .icon, .cm-brief-points .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #9d7830; }
.cm-services-next { padding: clamp(58px, 6vw, 82px) 0; background: #f1eee5; }

/* Contact and local project brief. */
.cm-contact-intro { padding-bottom: clamp(65px, 7vw, 96px); }
.cm-contact-section { background: var(--cm-paper); }
.cm-contact-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(36px, 6vw, 85px); }
.cm-contact-aside > p:not(.section-kicker) { margin: 0 0 26px; color: var(--cm-body); font-size: 16px; line-height: 1.8; }
.cm-brief-points { margin-bottom: 30px; }
.cm-local-note { display: flex; align-items: flex-start; gap: 12px; margin: 30px 0 24px; padding: 20px; border: 1px solid #e2dac6; border-radius: 10px; background: #f1eee4; }
.cm-local-note-icon { display: flex; margin-top: 3px; color: #8b692c; }
.cm-local-note-icon .icon { width: 20px; height: 20px; }
.cm-local-note h3, .cm-email-option h3 { margin: 0 0 7px; font-size: 14px; line-height: 1.5; }
.cm-local-note p { margin: 0; color: #616057; font-size: 13px; line-height: 1.75; }
.cm-email-option { margin: 28px 0; padding-top: 22px; border-top: 1px solid var(--cm-line); }
.cm-email-option a { font-size: 14px; overflow-wrap: anywhere; }
.cm-contact-products-link { font-size: 14px; }
.cm-brief-card { min-width: 0; padding: clamp(25px, 3.2vw, 44px); border: 1px solid #e0e1dc; border-radius: 20px; background: #fff; box-shadow: 0 12px 36px #18201506; }
.cm-form-heading h2 { margin: 0 0 10px; font-size: clamp(23px, 2.1vw, 29px); line-height: 1.25; letter-spacing: -.025em; }
.cm-form-heading p { margin: 0 0 29px; color: #666b6e; font-size: 12px; line-height: 1.6; }
.cm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 20px; }
.cm-field { min-width: 0; }
.cm-field label, .cm-output-label { display: block; margin-bottom: 9px; color: #252a2d; font-size: 13px; line-height: 1.5; font-weight: 650; }
.cm-optional { color: #6f7579; font-size: 11px; font-weight: 400; }
.cm-field input, .cm-field select, .cm-field textarea, #brief-output { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 49px; margin: 0; padding: 12px 14px; color: #1e252a; font: inherit; font-size: 15px; line-height: 1.6; border: 1px solid #d6dadb; border-radius: 7px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.cm-field select { padding-right: 24px; }
.cm-field textarea, #brief-output { resize: vertical; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus, #brief-output:focus { outline: none; border-color: #a17b35; box-shadow: 0 0 0 3px #c3a05c28; }
.cm-field input::placeholder, .cm-field textarea::placeholder { color: #737b80; opacity: 1; }
.cm-details-field { margin-top: 24px; }
.cm-field-hint { margin: 8px 0 0; color: #73787b; font-size: 12px; line-height: 1.6; }
.cm-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.cm-form-actions > span { max-width: 155px; color: #6b7174; font-size: 11px; line-height: 1.6; }
.cm-brief-create { flex: 0 0 auto; }
.cm-brief-create:disabled { opacity: .58; cursor: not-allowed; transform: none; }
.cm-noscript-note { margin: 0 0 23px; padding: 14px 16px; color: #64542f; font-size: 13px; line-height: 1.7; border: 1px solid #e3d9b8; border-radius: 8px; background: #fbf7e9; }
.cm-noscript-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cm-brief-result { margin-top: 35px; padding-top: 30px; border-top: 1px solid var(--cm-line); scroll-margin-top: 115px; }
.cm-brief-result:focus { outline: none; }
.cm-result-heading { display: flex; align-items: center; gap: 12px; }
.cm-result-check { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; color: #4d633f; border-radius: 50%; background: #edf3e8; }
.cm-result-check .icon { width: 18px; height: 18px; }
.cm-result-heading h3 { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.02em; }
.cm-brief-result > p { margin: 15px 0 20px; color: var(--cm-body); font-size: 13px; line-height: 1.7; }
#brief-output { min-height: 275px; font-size: 13px; line-height: 1.8; background: #f8f9f6; }
.cm-result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cm-result-actions .btn { font-size: 13px; }
.cm-brief-status { margin: 16px 0 0; color: #48613b; font-size: 13px; line-height: 1.7; }
.cm-brief-status:empty { margin: 0; }

@media (max-width: 1000px) {
    .cm-service-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-contact-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 35px; }
    .cm-contact-layout .cm-form-grid { grid-template-columns: 1fr; gap: 20px; }
    .cm-form-actions { align-items: flex-start; flex-direction: column; }
    .cm-form-actions > span { max-width: none; }
}
@media (max-width: 760px) {
    .cm-page-intro { padding: 62px 0; }
    .cm-intro-layout, .cm-app-layout, .cm-service-layout, .cm-contact-layout { grid-template-columns: 1fr; }
    .cm-intro-note { padding: 25px 0 0; border-left: 0; border-top: 1px solid #3d3b32; }
    .cm-note-symbol { width: 48px; height: 48px; border-radius: 12px; }
    .cm-note-symbol .icon { width: 24px; height: 24px; }
    .cm-note-heading { margin-top: 17px; font-size: 23px; }
    .cm-note-heading br { display: none; }
    .cm-intro-note > p:last-child { max-width: none; }
    .cm-section-top, .cm-bottom-cta { flex-direction: column; align-items: flex-start; }
    .cm-section-top { gap: 18px; margin-bottom: 30px; }
    .cm-section-description { max-width: 520px; }
    .cm-app-layout { gap: 39px; }
    .cm-app-visual { width: min(100%, 540px); justify-self: center; }
    .cm-app-copy { max-width: 600px; }
    .cm-service-layout { gap: 34px; }
    .cm-service-visual { min-height: 300px; }
    .cm-service-orbit { width: 164px; height: 164px; }
    .cm-service-visual-icon { width: 78px; height: 78px; }
    .cm-service-visual-icon .icon { width: 36px; height: 36px; }
    .cm-service-copy h2, .cm-contact-aside h2 { max-width: 550px; }
    .cm-contact-layout { gap: 38px; }
    .cm-contact-aside h2 br { display: none; }
    .cm-contact-layout .cm-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-local-note { max-width: 550px; }
}
@media (max-width: 480px) {
    .cm-intro-copy h1 { font-size: clamp(37px, 10.4vw, 49px); }
    .cm-page-lead { font-size: 16px; }
    .cm-hero-actions { align-items: flex-start; flex-direction: column; }
    .cm-page-section { padding: 55px 0; }
    .cm-app-section { padding: 52px 0; }
    .cm-app-visual { border-radius: 18px; }
    .cm-app-copy h2, .cm-service-copy h2, .cm-contact-aside h2 { font-size: 33px; }
    .cm-service-navigation { gap: 9px; margin-top: 33px; }
    .cm-service-navigation a { align-items: flex-start; flex-direction: column; gap: 10px; min-height: 106px; padding: 16px 14px; font-size: 13px; }
    .cm-service-navigation .cm-service-nav-arrow { display: none; }
    .cm-service-row { padding: 50px 0; }
    .cm-service-copy > p:not(.section-kicker) { font-size: 16px; }
    .cm-service-visual { min-height: 275px; border-radius: 16px; }
    .cm-contact-layout .cm-form-grid { grid-template-columns: 1fr; }
    .cm-brief-card { padding: 24px 20px; border-radius: 15px; }
    .cm-field input, .cm-field select, .cm-field textarea { font-size: 16px; }
    .cm-form-actions .btn, .cm-result-actions .btn { width: 100%; justify-content: center; }
    .cm-result-actions { flex-direction: column; }
    .cm-app-action { align-items: flex-start; flex-direction: column; }
    .cm-app-action p { max-width: none; }
}
/* Keep inner pages aligned with the approved light website direction. */
.cm-page-intro { padding: 52px 0 48px; color: var(--cm-ink); background: linear-gradient(120deg, #fff 65%, #fffdf7); border-bottom-color: #ecebea; }
.cm-intro-copy h1 { margin: 17px 0 21px; font-size: clamp(40px, 4.4vw, 60px); letter-spacing: -.04em; }
.cm-page-lead { color: #62636a; font-size: 16px; line-height: 1.7; }
.cm-page .cm-light-link { color: #17181c; }
.cm-intro-note { border-color: #e4ddcb; padding-block: 18px; }
.cm-note-symbol { background: #fff9e8; border-color: #ecddb6; }
.cm-note-heading { font-size: 25px; margin-block: 18px 12px; }
.cm-intro-note > p:last-child { color: #62636a; font-size: 14px; }
.cm-service-navigation { margin-top: 32px; }
.cm-service-navigation a { color: #212226; background: #fff; border-color: #e5e3dd; min-height: 66px; }
.cm-service-navigation a:hover, .cm-service-navigation a:focus-visible { background: #fffbef; }
.cm-service-navigation .cm-service-nav-arrow { color: #776746; }
.cm-page-section { padding-block: 62px; }
.cm-field-hint, .cm-optional { color: #62636a; }
@media (max-width: 760px) {
    .cm-page-intro { padding: 35px 0 38px; }
    .cm-intro-layout { gap: 25px; }
    .cm-intro-note { padding-top: 22px; padding-bottom: 0; }
    .cm-note-symbol { display: none; }
    .cm-note-heading { margin-top: 0; font-size: 22px; }
    .cm-page-section { padding-block: 42px; }
    .cm-page-lead { font-size: 14px; }
    .cm-intro-copy h1 { font-size: 41px; }
    .cm-hero-actions { margin-top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-service-navigation a, .cm-field input, .cm-field select, .cm-field textarea, #brief-output { transition: none; }
}