@font-face {
  font-family: Cairo;
  src: url('./cairo.ttf') format('truetype');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #181b19;
  --dark: #171e1a;
  --paper: #f5f3eb;
  --white: #fffdf8;
  --mint: #79e1b9;
  --green: #225d47;
  --line: #d9ddd3;
  --muted: #565f58;
  --peach: #ffbc9c;
  --blue: #aebfe8;
  --mono: ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box }
body [hidden] { display: none !important }
html { scroll-behavior: smooth; scroll-padding-block: 16px 85px }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.65 Cairo, system-ui, sans-serif }
h1, h2, h3, h4, p { margin: 0 }
h2 { font-size: clamp(28px, 3.7vw, 43px); line-height: 1.25; font-weight: 900 }
h3 { font-size: 20px; line-height: 1.4; font-weight: 850 }
a { color: inherit; text-decoration: none }
button, input, select { font: inherit }
button, select, summary, input[type=checkbox], input[type=radio] { cursor: pointer }
:where(a,button,input,select,summary):focus-visible { outline: 3px solid #378e6c; outline-offset: 3px }
:where(input,select,button,summary) { scroll-margin-block-end: 86px }
.sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap }
.wrap { width: min(1190px, calc(100% - 56px)); margin-inline: auto }
.skip-link { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 20; padding: 9px 14px; color: var(--ink); background: var(--mint); transform: translateY(-150%) }
.skip-link:focus { transform: none }

.site-header, .hero { background: var(--dark); color: var(--paper) }
.mast { display: flex; gap: 21px; align-items: center; min-height: 64px; border-bottom: 1px solid #e8eee135 }
.brand { display: inline-flex; align-items: center; min-height: 44px }
.brand img, footer img { height: auto }
.toplabel { direction: ltr; color: #bfcac0; font: 10px var(--mono); letter-spacing: .1em }
.toplabel b { color: var(--mint); font-weight: 500 }
.mast nav { display: flex; gap: clamp(8px, 2.7vw, 28px); margin-inline-start: auto; align-items: center; font-size: 13px }
.mast nav a { display: grid; align-items: center; min-height: 44px; white-space: nowrap }
.mast nav a:hover { color: var(--mint) }
.hero-grid { display: grid; grid-template-columns: 1.32fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; padding-block: 40px 47px }
.eyebrow, .live { display: flex; align-items: center; gap: 8px; color: var(--mint); font-weight: 750; font-size: 12px }
.eyebrow i, .live i { width: 7px; height: 7px; background: var(--mint); border-radius: 50% }
.eyebrow span { color: #9faea5 }
.hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.16; margin-block: 10px 14px; font-weight: 950; letter-spacing: -.04em }
.hero h1 em { display: block; color: var(--mint); font-style: normal }
.hero-copy p { max-width: 485px; color: #e2e7dd; font-size: clamp(15px, 1.65vw, 18px) }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 17px; margin-top: 20px }
.hero-actions > span { font-size: 12px; color: #bbc9bd }
.hero-cta { display: inline-flex; align-items: center; gap: 21px; padding: 9px 17px; min-height: 44px; border-radius: 7px; color: var(--ink); background: var(--mint); font-weight: 850 }
.hero-cta:hover { background: #adf1d7 }
.hero-art { border: 1px solid #476051; border-radius: 12px; background: #212d26; padding: 16px; box-shadow: 8px 8px 0 #101813 }
.art-top, .art-line, .art-total { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px }
.art-top { border-bottom: 1px solid #486153; padding-bottom: 9px; color: #dbe4db; font-size: 12px; font-weight: 750 }
.art-tag { color: var(--mint); font-size: 10px }
.art-line { padding-top: 8px; color: #dbe4db; font-size: 13px }
.art-line strong, .art-total strong { font-family: system-ui, sans-serif; white-space: nowrap }
.art-line small, .art-total small { font: 700 10px Cairo }
.art-total { border-top: 1px solid #486153; margin-top: 9px; padding-top: 8px; color: var(--mint); font-weight: 850 }
.art-total strong { font-size: clamp(25px, 3.8vw, 43px); line-height: 1.2 }
.art-bottom { display: grid; grid-template-columns: 4fr 1.4fr; gap: 3px; margin-top: 10px; font-size: 10px; color: var(--ink); white-space: nowrap }
.art-bottom span { padding: 3px 7px; border-radius: 3px }
.art-bottom .cost { background: #dfe8db }
.art-bottom .gain { background: var(--mint) }

.workspace-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding-block: 30px 15px }
.workspace-head p, .section-intro { color: var(--muted); font-size: 13px; margin-top: 4px }
.kicker { color: var(--green); font-size: 12px; font-weight: 800; margin-bottom: 4px }
.kicker b, .index { font-family: var(--mono) }
.workspace-actions, .product-actions, .inline-help { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px }
.workspace-actions { justify-content: end }
.reset { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; background: var(--white); border: 1px solid #bfcabe; border-radius: 7px; padding: 6px 11px; color: var(--green); font-size: 12px; font-weight: 850 }
.reset:hover { background: #e8f2e8 }
.reset:disabled { opacity: .56; cursor: default }
#reset { background: #e2f0e6 }
.modes { border: 0; padding: 0; margin: 0 0 13px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; min-width: 0 }
.modes label { position: relative; min-width: 0 }
.modes input { position: absolute; opacity: 0; width: 1px; height: 1px }
.modes label > span { display: block; height: 100%; padding: 9px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; cursor: pointer }
.modes b { display: block; color: var(--green); font: 800 10px var(--mono); margin-bottom: 4px }
.modes strong { display: block; font-size: 15px; line-height: 1.45 }
.modes small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px }
.modes input:checked + span { border-color: #2c7657; background: #def2e6; box-shadow: inset 0 -2px #3c946d }
.modes input:focus-visible + span { outline: 3px solid #378e6c; outline-offset: 2px }

.workspace { display: grid; grid-template-columns: minmax(0,1.34fr) minmax(0,1fr); align-items: start; gap: 14px }
.editor { display: grid; gap: 8px; min-width: 0 }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; min-width: 0 }
.detail-panel { padding-block: 10px }
.section-head { display: flex; gap: 9px; align-items: start; margin-bottom: 10px }
.section-head p { font-size: 12px; color: var(--muted); margin-top: 2px }
.index { padding: 5px 6px; margin-top: 3px; border-radius: 4px; background: #e5f2e9; color: var(--green); font-size: 11px; font-weight: 800; flex: none }
.formgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 10px }
.formgrid label, #pricingProductField, #pricingFixed label, #allocationField { display: block; font-size: 12px; font-weight: 800; color: #37463c; min-width: 0 }
#pricingFixed { max-width: 50%; margin-top: 6px }
#allocationField, #quickOps { margin-top: 7px }
.unit { position: relative; display: block }
.unit > span { position: absolute; inset-inline-end: 9px; top: 50%; transform: translateY(-50%); color: #536258; font-size: 11px; pointer-events: none }
input[type=number], select { width: 100%; min-width: 0; height: 40px; border: 1px solid #c9d1c8; border-radius: 6px; background: #fffefa; color: var(--ink); margin-top: 3px; padding: 6px 9px; font-size: 14px }
.unit input { padding-inline-end: 38px; direction: ltr; text-align: right; padding-left: 38px; font-family: system-ui,sans-serif; font-variant-numeric: tabular-nums }
.unit input::-webkit-inner-spin-button { appearance: none }
input[aria-invalid=true] { border-color: #a3422c; background: #fff3ed }
.field-error { display: block; color: #9b321f; font-size: 11px; font-weight: 750 }
.hint { color: var(--muted); font-size: 12px; margin-top: 5px }
.hint a, .method a, .faq a { color: var(--green); text-decoration: underline; text-underline-offset: 2px }
.demo-badge { display: inline-block; border-radius: 4px; background: #e6f3e9; color: var(--green); padding: 3px 7px; margin-top: 7px; font-size: 11px; font-weight: 800 }
.product-row { padding: 7px 0; border-top: 1px solid #e7ebe3 }
.product-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px }
.remove-product { border: 0; background: none; color: #9b321f; min-height: 32px; font-size: 12px; padding-inline: 9px }
.remove-product:hover { text-decoration: underline }
.product-actions { margin-top: 4px }
.product-actions .checkline { margin: 0 }
.product-row:has(label:nth-child(3):not([hidden])) .formgrid { grid-template-columns: repeat(3,minmax(0,1fr)) }
.checkline, .channel { display: flex !important; align-items: center; gap: 8px; min-height: 38px; font-size: 12px; font-weight: 750 }
.checkline { margin-top: 6px }
input[type=checkbox] { accent-color: var(--green); width: 17px; height: 17px; margin: 0; flex: none }
.channels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 8px }
.channel { background: #fffefa; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer }
.channel:has(input:checked) { background: #e5f4ea; border-color: #8eb8a1 }
.channel.market-pick { border-style: dashed }
.channel bdi { font-family: system-ui, sans-serif }
.inline-details, .history-panel { border-top: 1px solid #e1e7de; padding-top: 5px; margin-top: 7px }
.inline-details summary, .history-panel summary { color: var(--green); font-weight: 850; font-size: 12px; min-height: 34px; padding-block: 6px }
.inline-details > .formgrid, .history-panel > .formgrid { margin-top: 4px }
.inline-help { margin-top: 5px }
.inline-help .hint { margin: 0 }
.advanced-heading { color: var(--green); padding: 4px 2px 0; font-size: 13px; font-weight: 850 }
.advanced-heading p { color: var(--muted); font-size: 11px; font-weight: 500 }
.options > summary { display: flex; align-items: center; gap: 8px; min-height: 43px; list-style: none }
.options > summary::-webkit-details-marker { display: none }
.options > summary::after { content: '+'; margin-inline-start: auto; color: var(--green); font: 22px system-ui }
.options[open] > summary::after { content: '−' }
.options > summary strong, .options > summary small { display: block }
.options > summary strong { font-size: 16px; font-weight: 850; line-height: 1.4 }
.options > summary small { font-size: 11px; color: var(--muted); margin-top: 2px }
.options h4 { margin: 11px 0 3px; font-size: 14px }
.options .formgrid, #channelControls { margin-top: 7px }
.recommendation, .rate-card { border: 1px solid var(--line); border-radius: 7px; margin-top: 8px; padding: 8px 9px }
.recommendation { background: #e9f4ec; border-color: #b5cdbb }
.recommendation > p:first-child { font-weight: 850; font-size: 13px }
.recommendation button { margin-top: 6px }
.rate-card h4 { text-align: right; margin: 0; font-family: system-ui,sans-serif }
.rate-card .checkline { margin-top: 0 }
.scenario-actions { margin-top: 7px; justify-content: start }
#savedComparison { margin-top: 5px; color: var(--muted); font-size: 12px }
#savedComparison table { border-collapse: collapse; width: 100%; text-align: start }
#savedComparison th, #savedComparison td { text-align: start; padding: 4px 3px; border-bottom: 1px solid var(--line) }
.pricing-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(105px,1fr)); gap: 6px; margin: 7px 0 }
.pricing-summary > div { background: #e9f4ec; border-radius: 6px; padding: 5px 7px }
.pricing-summary span, .pricing-summary strong { display: block; font-size: 11px }
.pricing-summary strong { font-size: 15px; color: var(--green) }
#pricing .reset { margin-top: 6px }

.results { position: sticky; top: 12px; min-width: 0; border-radius: 10px; background: var(--dark); color: var(--paper); padding: 14px 15px; scroll-margin-top: 12px }
.result-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid #e9eee133; padding-bottom: 8px }
.result-top > span:last-child { color: #c9d6ca; font-size: 11px }
.result-state { display: inline-block; padding: 4px 7px; border-radius: 5px; margin-top: 8px; background: #294138; color: #b6f1d6; font-size: 11px; font-weight: 800 }
.result-state.risk { background: #4c3228; color: #ffd5c3 }
.primary-metric { padding-block: 8px }
.primary-metric > span { color: #e2e8df; font-size: 13px }
.primary-metric > strong { display: block; color: var(--mint); font: 800 clamp(31px,4.5vw,48px)/1.15 system-ui,sans-serif; letter-spacing: -.035em; overflow-wrap: anywhere }
.primary-metric strong small { font: 750 15px Cairo; letter-spacing: normal }
.primary-metric p, .mini-economics { color: #c8d2c8; font-size: 11.5px; margin-top: 4px }
.empty-result { padding: 16px 0 6px }
.empty-result b { display: block; font-size: 17px; color: var(--mint); margin-bottom: 4px }
.empty-result p { font-size: 13px; color: #d7dfd5 }
.metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px }
.metric { min-width: 0; padding: 6px 8px; border: 1px solid #e9eee125; border-radius: 6px; background: #253229 }
.metric > span, .metric > small { display: block; color: #dce3da; font-size: 11px }
.metric > small { font-size: 10px; color: #bfcabf }
.metric strong { display: block; color: #fffefa; font: 780 19px/1.28 system-ui,sans-serif; overflow-wrap: anywhere }
.metric strong small { font: 750 10px Cairo }
.metric.target strong { color: var(--peach) }
.detail-grid { margin-top: 5px }
.funnel-result { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-bottom: 6px }
.funnel-result div { background: #28352c; border-radius: 4px; padding: 3px; text-align: center; overflow-wrap: anywhere }
.funnel-result strong, .funnel-result span { display: block }
.funnel-result strong { color: var(--mint); font: 750 14px system-ui }
.funnel-result span { font-size: 10px; color: #d6ddd4 }
.channel-breakdown { border-top: 1px solid #e9eee132; margin-top: 7px; font-size: 11px }
.channel-breakdown summary { padding-block: 5px; min-height: 33px; color: var(--mint); font-weight: 800 }
.channel-breakdown ul { list-style: none; padding: 0; margin: 4px 0 0 }
.channel-breakdown li { display: grid; grid-template-columns: 1fr auto; gap: 3px 6px; padding: 4px 0; border-bottom: 1px solid #e9eee125 }
.channel-breakdown li small { grid-column: 1/-1; color: #cbd4ca; font-size: 10px }
.channel-breakdown li bdi { font-family: system-ui,sans-serif }
.bar { display: flex; overflow: hidden; min-height: 6px; margin-top: 6px; border-radius: 4px; background: #475447 }
.bar span { height: 6px }
.sales { background: var(--mint) }
.aware { background: var(--peach) }
.engage { background: var(--blue) }
.legend { display: flex; flex-wrap: wrap; gap: 4px 9px; margin: 5px 0 }
.legend span { display: flex; gap: 4px; align-items: center; color: #e2e8df; font-size: 10px }
.legend i { width: 6px; height: 6px; border-radius: 2px }
.notice, .skipped { margin-top: 6px; color: #ffd9c9; font-size: 11.5px }
.notice { background: #423329; padding: 5px 7px; border-radius: 5px }
.notice.error { font-size: 13px }
.mobile-summary { display: none }

.method, .faq { padding-block: 36px 22px }
.method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 14px }
.method article { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white) }
.method article > span { color: var(--green); font: 11px var(--mono) }
.method article h3 { font-size: 16px; margin: 3px 0 }
.method article p, .faq-list p { color: var(--muted); font-size: 13px }
.method article a { font-size: 11px }
.faq { padding-top: 20px }
.faq-list { max-width: 760px; margin-top: 10px }
.faq-list details { border-top: 1px solid #cbd3c8; padding-bottom: 6px }
.faq-list summary { padding-block: 8px; min-height: 44px; color: var(--ink); font-weight: 850 }
.faq-list p { padding-inline: 8px; margin-bottom: 5px }
footer { margin-top: 18px; background: var(--dark); color: var(--paper); border-radius: 8px 8px 0 0; padding: 12px; display: flex; align-items: center; gap: 12px; font-size: 12px }
footer a { margin-inline-start: auto; color: var(--mint) }

@media (max-width: 900px) {
  .wrap { width: calc(100% - 40px) }
  .workspace { grid-template-columns: minmax(0,1.16fr) minmax(0,1fr); gap: 9px }
  .panel, .results { padding-inline: 12px }
  .results { position: static }
}
@media (max-width: 730px) {
  .wrap { width: calc(100% - 28px) }
  .toplabel { display: none }
  .mast { gap: 8px; min-height: 56px }
  .mast nav { font-size: 11px }
  .brand img { width: 92px }
  .hero-grid, .workspace { grid-template-columns: minmax(0,1fr) }
  .hero-grid { padding-block: 24px 27px; gap: 18px }
  .hero h1 { font-size: clamp(36px,9.4vw,59px) }
  .hero-art { max-width: 470px; padding: 10px 12px; box-shadow: 4px 4px 0 #101813 }
  .art-line { padding-top: 5px }
  .hero-actions { margin-top: 13px }
  .workspace-head { align-items: start; padding-top: 20px }
  .workspace-actions { flex-shrink: 0 }
  .workspace-head .workspace-actions { flex-direction: column; align-items: stretch }
  .modes, .method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px }
  .reset, .checkline, .channel, .options > summary { min-height: 44px }
  .unit input, select { min-height: 44px; font-size: 16px }
  .mobile-summary:not([hidden]) { display: flex; position: fixed; align-items: center; justify-content: space-between; gap: 5px; inset-inline: 12px; bottom: max(9px,env(safe-area-inset-bottom)); z-index: 10; min-height: 44px; background: #214437; color: #effdf4; border: 1px solid #68927a; border-radius: 7px; padding: 5px 9px; box-shadow: 0 4px 15px #0004; font-size: 12px; font-weight: 800 }
  .mobile-summary span { color: #a8efcf; white-space: nowrap }
  .mobile-summary small { font-size: 10px }
  body:has(.mobile-summary:not([hidden])) { padding-bottom: 61px }
  body:has(input[type=number]:focus,select:focus) .mobile-summary { display: none }
  .primary-metric > strong { font-size: 40px }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 22px) }
  .mast nav { gap: 7px }
  .modes strong { font-size: 13px }
  .modes small { font-size: 10px }
  .method-grid { grid-template-columns: 1fr }
  .product-row:has(label:nth-child(3):not([hidden])) .formgrid { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
#inputs[data-mode="pricing"] :is(#pricing > summary,#basicOptions > summary,#profitHint,#applyProfit,#quickOps,#completionHelp) { display: none }
#inputs[data-mode="pricing"] #basicOptions { border: 0; padding: 0; margin: 0 }
#inputs[data-mode="pricing"] #productPanel .product-row .formgrid { grid-template-columns: minmax(0,1fr) }
#inputs[data-mode="pricing"] #pricing { margin-top: 8px }