/*
 * SALAM SYSTEM — MEADOWLAND GREEN / revision 02
 * A web interpretation of the approved colour direction, not a certified
 * conversion of the Coloro physical standard 050-61-19.
 * Read together with styles.css. Layout and application logic are retained.
 * Dark tones carry text; the mid-tone meadow is reserved for material/accent use.
 */
:root {
  --meadow: #a1a15d;
  --meadow-light: #cdd3a7;
  --meadow-pale: #ecefdf;
  --meadow-ink: #606536;
  --forest: #2d422f;
  --forest-hover: #3c563d;
  --graphite: #29322e;
  --metal: #c6ccc6;
  --paper: #f8f7f2;
  --white: #ffffff;
  --ink: #202823;
  --muted: #536153;
  --line: #d8ddd0;
  --control-line: #7a866f;
  --green: var(--forest);
  --green-2: var(--forest-hover);
  --lime: var(--meadow-light); /* Compatibility alias for the original markup. */
  --cream: #eeeade;
  --orange: #ac764a;
}
::selection { background: var(--meadow-light); color: var(--ink); }
:focus-visible { outline: 3px solid #4b613e; outline-offset: 4px; }
body { background: var(--paper); color: var(--ink); }
.button { font-size: 14px; border-radius: 9px; }
.button.dark { background: var(--forest); color: #fff; box-shadow: 0 3px 0 #20302418; }
.button.dark:hover { background: var(--forest-hover); box-shadow: 0 8px 20px #2430261c; }
.button.lime { background: var(--meadow-light); color: #243225; }
.button.lime:hover { background: #dde2be; }
.button.outline { border-color: var(--control-line); }
.button.outline:hover { background: #ecefdf; }
.button.small { font-size: 13px; }
.icon-button { border-color: var(--control-line); }
.icon-button:hover { background: var(--meadow-pale); }
/* The brand stays quiet. Meadow is a signature accent, not an all-over tint. */
.utility { background: var(--forest); color: #eef1e5; }
.utility a { color: #eef1e5; }
.utility-inner { min-height: 32px; font-size: 12px; }
.brand { color: var(--forest); }
.brand-period { color: var(--meadow-ink); }
.brand-word small { font-size: 9px; }
.site-header { background: rgba(248,247,242,.97); border-color: var(--line); }
.nav-link { font-size: 14px; }
.nav-link:hover { color: var(--meadow-ink); }
.language-toggle { font-size: 12px; min-width: 56px; }
.language-toggle span { color: #626d5b; }
.language-toggle span.active { color: var(--forest); }
.mega-menu { border-color: var(--line); box-shadow: 0 22px 50px #20302622; }
.mega-item { font-size: 14px; }
.mega-item small { font-size: 10px; color: var(--muted); }
.mega-item:hover { background: #eff1e6; }
.eyebrow { color: var(--forest); }
.eyebrow.light { color: #dde5cc; }
.hero .eyebrow { font-size: 11px; }
.small-cross { color: var(--meadow-ink); }
.hero h1 .serif-accent { color: var(--forest); }
.hero-description { color: var(--muted); }
.hero-footnote { color: var(--muted); font-size: 12px; }
.fine-line { background: var(--meadow); width: 3px; }
.studio-label { color: var(--muted); font-size: 10px; }
.studio-label i { background: #747a41; box-shadow: 0 0 0 4px #a1a15d18; }
.motion-button { font-size: 11px; min-height: 44px; padding: 9px 4px; }
.motion-button .icon { width: 15px; height: 15px; }
.studio-caption { color: var(--muted); font-size: 11px; max-width: 250px; }
.scene-disclaimer { color: #5b6656; font-size: 11px; }
.scene-selector { gap: 4px; }
.scene-button { color: #56614e; width: 36px; height: 36px; font-size: 11px; }
.scene-button.active { background: var(--meadow-pale); border: 1px solid #737d54; color: var(--forest); }
.scene-button:hover { background: #e4e9d3; }
.rail-item { font-size: 13px; }
.rail-no { color: var(--muted); font-size: 11px; }
.rail-item:hover { background: #ecefdf; }
/* Material palette: warm paper, graphite hardware, silver stand, meadow detail. */
.scene-orbit { border-color: #cfd4c1; }
.scene-coordinate { color: #687259; }
.scene-connectors { stroke: #a3ad90; }
.platform-shadow { background: #2f392f; opacity: .14; }
.platform {
  background: linear-gradient(125deg,#fff 0%,#efefea 70%,#d8dcd4);
  box-shadow: 0 3px 0 #d3d6cd,0 7px 0 #c6cdc1,0 11px 0 #b8c2b3,0 16px 0 #b0bba8,0 25px 34px #28332a22;
}
.platform-grid { background-image: linear-gradient(#7d8b6d12 1px,transparent 1px),linear-gradient(90deg,#7d8b6d12 1px,transparent 1px); }
.platform>span,.hero-object-label { color: #596b4b; }
.brand-cube {
  background: linear-gradient(145deg,#b8ba7e,#999c55);
  color: #253727;
  box-shadow: 2px 3px 0 #8b904e,4px 6px 0 #7b8243,9px 14px 20px #58603d24;
}
.pebble-one { background: radial-gradient(circle at 30% 25%,#eee7d3,#b6a381 75%); }
.pebble-two { background: radial-gradient(circle at 30% 25%,#c6c998,#7b854e 75%); }
.art-paper { background: #fffefa; border-color: #fff; box-shadow: 0 2px 0 #d6dacb,0 4px 0 #e8e9df,0 6px 0 #d4dacb,0 15px 24px #25392b22; }
.paper-back { background: #bfc799; }
.paper-eyebrow,.paper-baseline { color: #576b46; }
.canvas-tiles i { background: #eff1e7; border-color: #d8decc; }
.canvas-tiles i:after { background: #c2cba9; box-shadow: 0 5px 0 #d7deca; }
.canvas-tiles i:nth-child(3) { background: #b5bd87; border-color: #a1ab72; }
.art-tab { background: #cdd3a7; color: #344631; box-shadow: 3px 4px 0 #a5af77,6px 10px 16px #46583526; }
.art-monitor { background: #f1f3f0; border-color: #303934; box-shadow: 3px 3px 0 #17221c,6px 6px 0 #26312b,7px 15px 26px #26332c30; }
.mini-pos-top { border-color: #dce1d9; background: #fff; }
.mini-pos-top b,.mini-cart b { color: var(--forest); }
.mini-pos-top span { color: #576d42; }
.mini-product-grid i { background: #fff; color: #586952; border-color: #d9e0d4; }
.mini-product-grid i:nth-child(2) { background: #eee9df; color: #7d6643; }
.mini-product-grid i:nth-child(3) { background: #e9eddf; }
.mini-cart>span { background: #dce2d6; }
.mini-cart>i { background: var(--meadow); }
.art-monitor-neck { background: linear-gradient(90deg,#7c8780,#cfd5cf 55%,#9da99f); }
.art-monitor-foot { background: linear-gradient(130deg,#d1d7d0,#a2aca4); box-shadow: 0 3px 0 #839186,0 7px 9px #29382e28; }
.art-printer { background: linear-gradient(150deg,#fdfdf9,#d7ddd6); box-shadow: 2px 4px 0 #b3bdb1,6px 8px 12px #2a372b28; }
.printer-slot { background: #62715f; }
.printer-paper { background: #fffefb; border-color: #e0e3dc; }
.printer-paper i { background: #b7c3af; }
.art-printer>span { color: #687c40; }
.art-browser { background: #fffefa; box-shadow: 2px 3px 0 #d6dbd0,4px 6px 0 #bcc7b4,8px 14px 23px #2e3b2d26; }
.back-browser { background: #adb89c; }
.browser-dots { background: #eff1e9; border-color: #d9dfd2; }
.browser-dots i { background: #9aa88d; }
.browser-dots span { color: #576b47; }
.browser-copy b { color: var(--forest); }
.browser-copy i { background: #d5ddc9; box-shadow: 0 6px 0 #e1e5d9; }
.browser-copy>span { background: var(--meadow); }
.browser-figure { background: #e9ecdf; }
.browser-figure i { background: #8d9e68; box-shadow: 3px 3px 0 #65784d; }
.browser-figure i:nth-child(2) { background: #c5b18b; box-shadow: 3px 3px 0 #a58b63; }
.browser-figure i:nth-child(3) { background: #c9d3af; box-shadow: none; }
.code-tag { background: #30432f; color: #e6eace; box-shadow: 2px 4px 0 #1f2d20,5px 7px 12px #28362828; }
.browser-panel-grid i { background: #d0dac3; }
.art-pay-card { background: linear-gradient(140deg,#b8bb7e,#969c55); color: #243626; box-shadow: 2px 4px 0 #788143,5px 11px 22px #31402c29; }
.art-pay-card>.icon { color: #455b30; }
.pay-card-lines i { background: #6c7a42; }
.art-pay-phone { background: #fcfdf9; border-color: #2d3931; box-shadow: 2px 3px 0 #18261d,5px 7px 14px #29382b32; color: var(--forest); }
.phone-notch { background: #2d3931; }
.pay-symbol { background: #e0e6cb; }
.art-pay-phone>small { color: #5b6c4c; }
.art-pay-phone>i { background: #d4dfc5; }
.pay-coin { background: radial-gradient(circle at 30% 20%,#e1d2b2,#ad9671); border-color: #d6c39d; color: #6c5939; box-shadow: 3px 3px 0 #8f7856,5px 8px 10px #38432c22; }
.studio-scene[data-focus="tools"] [data-object="tools"] .art-paper,
.studio-scene[data-focus="web"] [data-object="web"] .front-browser,
.studio-scene[data-focus="pos"] [data-object="pos"] .art-monitor,
.studio-scene[data-focus="payments"] [data-object="payments"] .art-pay-phone { outline-color: #6a7b49; }
/* White solution surfaces prevent the green-on-green wash. */
.solution-card { background: #fffefb; border-color: var(--line); }
.solution-card:hover { border-color: #8b9b73; box-shadow: 0 16px 36px #2b392e12; }
.card-top>.mono { font-size: 10px; color: #4e6044; }
.card-top>.icon { color: #5b7149; }
.card-content>p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.card-tags>span { color: #4b5f3e; font-size: 11px; padding: 5px 7px; background: #edf0e3; }
.card-link { font-size: 13px; color: var(--forest); }
.tools-card .card-art { background: radial-gradient(ellipse at 50% 65%,#e1e8ce7a,transparent 70%); }
.pos-card .card-art { background: radial-gradient(ellipse at 50% 65%,#dfe6e166,transparent 70%); }
.web-card .card-art { background: radial-gradient(ellipse at 50% 65%,#ece5d669,transparent 70%); }
.payments-card .card-art { background: radial-gradient(ellipse at 50% 65%,#e2e6d36e,transparent 70%); }
/* Flow explorer */
.pathway-section { background: #efefe5; border-color: #dbdfd0; }
.pathway-heading p { color: var(--muted); font-size: 15px; }
.industry-tab { border-color: #7c886b; color: #42553a; font-size: 13px; min-height: 44px; }
.industry-tab.active { background: var(--forest); color: white; border-color: var(--forest); }
.industry-tab:hover:not(.active) { background: #e3e8d5; }
.industry-panel { background: #fffefa; border-color: #d3dbc8; }
.industry-story .mono { color: #4e6541; font-size: 11px; }
.industry-story p { color: var(--muted); font-size: 14px; }
.route-card { background: #f2f4eb; border-color: #dfe4d3; }
.route-card:last-of-type { background: #e3e9d0; border-color: #b9c69a; }
.route-card>.icon { color: #56713f; }
.route-card .route-number { color: #526546; font-size: 11px; }
.route-card p { color: #4d5d43; font-size: 12px; }
.route-arrow { color: #667850; }
.industry-hint { color: #58664c; font-size: 12px; line-height: 1.7; }
/* Existing screenshots remain original; only their surrounding frames change. */
.project-image { background: #e7ecde; border-color: #d0d8c5; }
.project-card:nth-child(2) .project-image { background: #e1e6d7; }
.project-card:nth-child(3) .project-image { background: #ece9df; }
.browser-toolbar { color: #4f6046; background: #fffefa; }
.project-badge { font-size: 10px; color: #364b2f; background: #f9fbf2f5; border-color: #c4cfb3; }
.project-meta>.mono { color: #4e6440; font-size: 11px; }
.project-meta p { color: var(--muted); font-size: 14px; }
.project-meta .text-button { font-size: 14px; }
/* Calculator: forest background, light text, visibly bounded controls. */
.toolkit-section { background: #2b402e; color: #f7f8f0; }
.toolkit-section:before { border-color: #abb98722; box-shadow: 0 0 0 70px #abb98708,0 0 0 140px #abb98705; }
.toolkit-copy .eyebrow { color: #dde5cd; font-size: 11px; }
.toolkit-copy h2 .serif-accent { color: #d9dfb6; }
.toolkit-copy p { color: #d2dccb; font-size: 15px; }
.toolkit-caption { color: #d1dac4; font-size: 12px; line-height: 1.8; }
.calculator { background: #344c36; border-color: #7c9069; }
.calc-heading .mono { color: #d9e2cc; font-size: 10px; }
.calc-live { color: #e2e8d3; font-size: 10px; }
.calc-live i { background: #d1d9a2; }
.calc-inputs label { color: #e3ead9; font-size: 12px; }
.calc-inputs input { background: #263c2a; color: #fff; border-color: #9aaa82; font-size: 16px; min-height: 46px; }
.calc-inputs input:focus { outline-color: #e0e5c1; }
.toolkit-section :focus-visible { outline-color: #e0e5c1; }
.forecast-head { color: #d9e3ce; font-size: 10px; line-height: 1.7; border-color: #718164; }
.forecast-row { font-size: 12px; }
.forecast-row>span:first-child { color: #e0e8d7; }
.forecast-number { font-size: 14px; }
.forecast-number.profit { color: #e2e9bc; }
.forecast-track { background: #4d6746; }
.forecast-track i { background: #b9c48e; }
.forecast-number.negative { color: #ffcfaf; }
.forecast-track.negative i { background: #e9b18a; }
.calc-bottom { color: #dbe5ce; font-size: 11px; border-color: #718164; }
.calc-bottom strong { color: #f3f5e7; }
.calc-export { color: #edf2d5; font-size: 12px; min-height: 44px; }
.calc-note { color: #d9e2cc; font-size: 12px; line-height: 1.8; }
/* Readable descriptions and notes */
.process-number { color: #405834; background: #edf1e3; border-color: #899a71; font-size: 12px; }
.process-step p { color: var(--muted); font-size: 14px; }
.process-step:not(:last-child):after { background: #cbd6bd; }
.care-strip>div { color: #455b39; font-size: 13px; }
.care-strip .icon { color: #536f3d; }
.faq-list summary { font-size: 15px; }
.faq-plus { color: #506a3e; }
.faq-list details>p { color: var(--muted); font-size: 14px; }
.contact-section { background: #e9eddd; border-color: #d3dbc4; }
.contact-copy p { color: #4e6044; font-size: 15px; }
.contact-small { color: #4c5d41; font-size: 12px; }
.contact-small a { color: #314a2e; }
.contact-copy .eyebrow { font-size: 11px; }
.contact-email { border-color: #96a881; }
.enquiry-form { background: #fffefa; border-color: #c6d1b7; }
.form-topline>.mono { color: #425b35; font-size: 11px; }
.form-topline>span:last-child { color: #526348; font-size: 12px; }
.enquiry-form label { color: #3e5535; font-size: 13px; }
.enquiry-form input,.enquiry-form select,.enquiry-form textarea {
  background: #fff; color: var(--ink); border-color: var(--control-line); font-size: 15px; min-height: 46px;
}
.enquiry-form input::placeholder,.enquiry-form textarea::placeholder { color: #64705d; opacity: 1; }
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus { border-color: #4b613e; outline-color: #4b613e; }
.form-note { color: #536448; font-size: 12px; line-height: 1.8; }
.brief-ready pre { background: #eff2e6; font-size: 13px; color: #30412c; }
.small-note { font-size: 12px; }
.footer { background: #f8f7f2; }
.footer-top>div:first-child>p { color: #53634b; font-size: 13px; }
.footer-links .mono { color: #4c613f; font-size: 11px; }
.footer-links button,.footer-links a { color: #3e5434; font-size: 12px; min-height: 30px; }
.footer-bottom { color: #556549; font-size: 12px; line-height: 1.8; }
.footer-bottom button { font-size: 12px; color: #465d38; min-height: 30px; }
.footer-concept { font-size: 10px; }
.footer-bottom a { color: #405934; border-color: #7b8f65; width: 36px; height: 36px; }
/* Dialogs keep the same functional content and clearer hierarchy. */
.main-dialog { background: var(--paper); border-color: #a9b898; }
.main-dialog::backdrop { background: rgba(27,41,29,.62); }
.dialog-close { background: #fcfdf6; }
.dialog-feature { background: #eef2e4; border-color: #cdd8bd; }
.dialog-feature>.icon { color: #506d3c; }
.dialog-feature p { color: #4c6140; font-size: 14px; }
.dialog-note { color: #536247; border-color: #879b64; font-size: 13px; }
.dialog-product-links a { border-color: #7c9067; font-size: 13px; }
.dialog-product-links a:hover { background: #e5ebd8; }
.advisor-choice { border-color: #87996e; background: #fffefa; }
.advisor-choice>.icon { color: #577240; }
.advisor-choice small { color: #506245; font-size: 12px; }
.advisor-choice:hover,.advisor-choice.selected { background: #e8efda; border-color: #5f7947; }
.advisor-progress i { background: #cdd7bd; }
.advisor-progress i.active { background: #647e4a; }
.advisor-result { background: #e4ecd5; border-color: #a3b686; }
.advisor-result p,.advisor-result ul { color: #435c34; }
.advisor-nav>span { font-size: 12px; }
.info-dialog a { color: #3e6032; }
.toast { background: var(--forest); color: #f6f8ee; font-size: 13px; border-color: #7e9466; }
.noscript-note { background: #ece6d0; color: #4f462e; }
/* Typographic refinement respects the original responsive layout. */
@media(min-width:1021px) {
  .card-content h3 { min-height: 54px; }
  .card-content>p { min-height: 102px; }
  .card-tags { min-height: 64px; }
  .calc-heading { flex-wrap: wrap; row-gap: 9px; }
  .calc-live { align-self: center; }
}
@media(max-width:1200px) {
  .desktop-nav { gap: 22px; }
  .header-inner { gap: 22px; }
  .header-actions { gap: 20px; }
  .card-content>p { font-size: 14px; }
}
@media(max-width:1020px) {
  .nav-link { font-size: 13px; }
  .card-content>p { min-height: 0; }
  .card-tags { min-height: 0; }
  .calc-heading { flex-direction: column; }
  .calc-live { font-size: 10px; }
  .studio-top { flex-wrap: wrap; row-gap: 0; }
  .studio-bottom { flex-wrap: wrap; row-gap: 8px; }
  .studio-caption { max-width: 235px; }
  .footer-links { gap: 25px; }
}
@media(max-width:820px) {
  .studio-top { flex-wrap: nowrap; }
  .studio-bottom { flex-wrap: nowrap; }
  .studio-caption { max-width: 280px; }
  .scene-button { min-width: 40px; height: 40px; }
  .calc-heading { flex-direction: row; flex-wrap: wrap; }
  .calc-heading h3 { max-width: 320px; }
  .contact-copy .eyebrow { font-size: 10px; }
  .footer-top>div:first-child>p { font-size: 12px; }
}
@media(max-width:540px) {
  .utility-inner { font-size: 10px; min-height: 30px; }
  .brand-word small { font-size: 8px; }
  .hero .eyebrow { font-size: 10px; }
  .hero-footnote { font-size: 12px; }
  .hero-buttons { gap: 18px; }
  .hero-buttons .button,.hero-buttons .text-button { font-size: 13px; }
  .studio-label { font-size: 9px; }
  .motion-button { font-size: 11px; min-height: 44px; }
  .studio-bottom { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .scene-selector { justify-content: center; gap: 5px; }
  .scene-button { width: 40px; height: 40px; font-size: 11px; }
  .studio-caption { max-width: none; text-align: center; font-size: 11px; }
  .scene-disclaimer { text-align: center; font-size: 11px; line-height: 1.7; margin-top: 8px; }
  .rail-item { font-size: 11px; line-height: 1.6; padding: 16px 9px; }
  .rail-no { font-size: 10px; }
  .card-top>.mono { font-size: 10px; }
  .card-content>p { font-size: 15px; min-height: 0; }
  .card-tags { min-height: 0; }
  .card-tags>span { font-size: 11px; }
  .card-link { font-size: 14px; }
  .industry-tab { font-size: 12px; min-height: 44px; padding: 9px 13px; }
  .pathway-heading p { font-size: 14px; }
  .industry-story .mono { font-size: 10px; }
  .industry-story p { font-size: 14px; }
  .route-card p { font-size: 12px; }
  .industry-hint { font-size: 11px; }
  .project-meta p { font-size: 14px; }
  .project-meta>.mono { font-size: 10px; }
  .project-badge { font-size: 10px; }
  .toolkit-copy .eyebrow { font-size: 10px; }
  .toolkit-caption { font-size: 12px; }
  .calc-heading { flex-direction: column; }
  .calc-heading .mono { font-size: 10px; }
  .calc-live { font-size: 10px; }
  .calc-inputs label { font-size: 12px; }
  .calc-inputs input { font-size: 16px; }
  .forecast-head { font-size: 9px; }
  .forecast-number { font-size: 12px; }
  .forecast-row { font-size: 11px; }
  .forecast-head,.forecast-row { grid-template-columns: 39px 1fr 1fr; gap: 9px; }
  .calc-bottom { font-size: 11px; flex-wrap: wrap; }
  .calc-export { font-size: 12px; }
  .calc-note { font-size: 12px; }
  .process-step p { font-size: 13px; }
  .care-strip>div { font-size: 12px; }
  .faq-list summary { font-size: 15px; }
  .faq-list details>p { font-size: 14px; }
  .contact-copy .eyebrow { font-size: 10px; }
  .contact-copy p { font-size: 15px; }
  .contact-small { font-size: 12px; }
  .form-topline { flex-wrap: wrap; gap: 8px; }
  .form-topline>.mono { font-size: 10px; }
  .form-topline>span:last-child { font-size: 12px; }
  .enquiry-form label { font-size: 13px; }
  .enquiry-form input,.enquiry-form select,.enquiry-form textarea { font-size: 16px; }
  .form-note { font-size: 12px; margin-inline: 0; }
  .footer-top>div:first-child { flex-wrap: wrap; gap: 18px; }
  .footer-top>div:first-child>p { font-size: 12px; }
  .footer-links .mono { font-size: 11px; }
  .footer-links button,.footer-links a { font-size: 12px; }
  .footer-bottom { font-size: 11px; }
  .footer-bottom>div { flex-wrap: wrap; gap: 12px; }
  .footer-bottom button { font-size: 11px; }
  .footer-concept { font-size: 10px; }
  .dialog-feature p { font-size: 14px; }
  .dialog-note { font-size: 12px; }
  .advisor-choice small { font-size: 12px; }
}
@media(max-width:360px) {
  .hero-buttons .button,.hero-buttons .text-button { font-size: 12px; }
  .hero-buttons { gap: 15px; }
  .studio-label { font-size: 8px; }
  .motion-button { font-size: 10px; }
  .rail-item { font-size: 10px; }
  .rail-no { font-size: 9px; }
  .forecast-number { font-size: 11px; }
  .forecast-head { font-size: 9px; }
  .calc-inputs label { font-size: 11px; }
  .contact-email { font-size: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .float-object { animation: none !important; }
  .studio-scene { transform: none !important; }
}
@media print {
  .toolkit-section,.calculator { color: #111; background: #fff; }
  .calc-inputs label,.calc-note,.calc-bottom,.calc-heading .mono,.forecast-row>span:first-child,.forecast-head { color: #111; }
  .calc-live { color: #333; }
}