/* =============================================================================
   QUOTASQ WEBSITE STYLES

   Developer notes:
   - Brand colors are defined once as reusable custom properties.
   - Layout classes are grouped in the same order as sections in page.tsx.
   - Product illustrations live in visuals.css so content layout stays readable.
   - Breakpoints at the bottom of this file adapt the full page for tablet/mobile.
   ============================================================================= */

/* 01. Brand tokens and global document defaults. */
:root {
  --ink: #10130f;
  --ink-soft: #1b2118;
  --paper: #f3f2ec;
  --paper-light: #fafaf6;
  --lime: #a6df21;
  --lime-bright: #c9ff3d;
  --green: #659016;
  --mist: #e4ebcf;
  --muted: #686e64;
  --line: rgba(16, 19, 15, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

/* 02. Header and approved brand artwork. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(16, 19, 15, 0.08);
  background: rgba(243, 242, 236, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { display: block; width: 146px; height: auto; }
.nav-links { display: flex; gap: 34px; font-size: 13px; font-weight: 650; color: #474c44; }
.nav-links a { transition: color 180ms ease; }
.nav-links a:hover { color: var(--green); }
.nav-action { border: 1px solid #b9bcb4; border-radius: 3px; padding: 12px 16px; font-size: 13px; font-weight: 750; transition: 180ms ease; }
.nav-action span { margin-left: 12px; }
.nav-action:hover { color: white; background: var(--ink); border-color: var(--ink); }

/* 03. Hero: the primary promise and product dashboard. */
.hero { min-height: 780px; padding: 62px 0 92px; display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 56px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #666c62; text-transform: uppercase; letter-spacing: 1.7px; font-size: 10px; font-weight: 800; }
.eyebrow i { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 4px rgba(166, 223, 33, 0.14); }
.hero h1 { margin: 26px 0 30px; font-size: clamp(58px, 6vw, 86px); font-weight: 500; line-height: 0.96; letter-spacing: -5px; }
.hero h1 em { display: inline-block; color: #7e8977; font-style: normal; font-weight: 520; }
.hero-copy > p { max-width: 590px; color: #555c52; font-size: 18px; line-height: 1.65; }
.hero-actions { margin-top: 38px; display: flex; align-items: center; gap: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 3px; font-size: 13px; font-weight: 780; transition: 200ms ease; }
.button span { margin-left: 15px; color: var(--lime); }
.button-dark { color: white; background: var(--ink); box-shadow: 0 12px 25px rgba(16, 19, 15, 0.16); }
.button-dark:hover { background: #2c3427; transform: translateY(-2px); }
.button-outline { color: var(--ink); border: 1px solid #aeb2aa; background: rgba(250,250,246,0.5); box-shadow: none; }
.button-outline span { color: var(--green); }
.button-outline:hover { border-color: #858b81; background: rgba(250,250,246,0.88); transform: translateY(-2px); }
.inline-link { border-bottom: 1px solid #9da199; padding: 7px 0; font-size: 13px; font-weight: 720; }
.inline-link span { margin-left: 12px; }
.hero-footnote { margin-top: 66px; padding-top: 17px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 22px; }
.hero-footnote span { color: #858981; text-transform: uppercase; letter-spacing: 1.2px; font-size: 8px; }
.hero-footnote b { color: #565c53; font-size: 10px; }

/* Shared editorial labels and section-heading layout. */
.section-label { min-height: 26px; display: flex; align-items: center; color: #697067; text-transform: uppercase; letter-spacing: 1.55px; font-size: 9px; font-weight: 820; }
.section-label-inverse { color: #a4aa9e; }
.section-head { margin: 28px 0 58px; display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; }
.section-head h2, .clarity h2, .barometer-copy h2 { margin: 0; font-size: clamp(44px, 4.6vw, 64px); font-weight: 510; line-height: 1.04; letter-spacing: -3.6px; }
.section-head h2 em, .clarity h2 em { color: #7d8975; font-style: normal; }
.section-head p { width: 340px; margin: 0; color: #636a60; font-size: 15px; line-height: 1.65; }

/* 04. Principle: establishes the quota/SQ brand narrative. */
.principle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 128px 0;
  color: white;
  background: var(--ink);
}

/* The dark barometer is intentionally subdued so the principle remains the focus. */
.principle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.4;
  background: url("../images/quotasq-barometer-orbital-background-dark.png") right center / cover no-repeat;
}

/* This directional veil protects copy contrast without hiding the instrument. */
.principle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16,19,15,0.96) 0%, rgba(16,19,15,0.8) 48%, rgba(16,19,15,0.28) 100%);
}

.principle-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.8fr 3.2fr; gap: 42px; }
.principle-copy h2 { max-width: 900px; margin: 0; color: #d9dbd5; font-size: clamp(38px, 4.3vw, 61px); font-weight: 480; line-height: 1.1; letter-spacing: -3px; }
.principle-copy h2 em { color: var(--lime-bright); font-style: normal; }
.sq-definition { margin-top: 78px; padding-top: 38px; border-top: 1px solid rgba(255,255,255,0.14); display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 38px; }
.sq-monogram { position: relative; padding-left: 28px; color: var(--lime-bright); font-size: 42px; font-weight: 820; }
.sq-monogram::before, .sq-monogram::after, .sq-monogram span { content: ""; position: absolute; bottom: 1px; width: 5px; background: #718064; transform: skew(-10deg); }
.sq-monogram::before { left: 0; height: 28px; }
.sq-monogram::after { left: 11px; height: 40px; }
.sq-monogram span { left: 22px; height: 53px; background: var(--lime); }
.sq-definition p { max-width: 670px; margin: 0; color: #9da399; font-size: 19px; line-height: 1.62; }
.sq-definition strong { color: white; }

/* 05. System: three merchant-intelligence capabilities. */
.system { padding: 122px 0 132px; }
.system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.system-card { min-height: 500px; padding: 18px; border: 1px solid #d6d9cf; background: #f7f6f0; box-shadow: 0 8px 26px rgba(28, 33, 24, 0.05); transition: 200ms ease; }
.system-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(28, 33, 24, 0.1); }
.system-visual { position: relative; height: 226px; overflow: hidden; display: grid; place-items: center; border: 1px solid #d4d9cc; border-radius: 7px; background: radial-gradient(circle at 50% 45%, rgba(166,223,33,0.12), transparent 36%), linear-gradient(145deg,#f8f8f3,#e4e8dc); }
.system-tag { margin-top: 27px; color: var(--green); text-transform: uppercase; letter-spacing: 1.2px; font-size: 8px; font-weight: 820; }
.system-card h3 { margin: 13px 0 12px; font-size: 24px; font-weight: 610; letter-spacing: -0.8px; }
.system-card > p { margin: 0; color: #656b62; font-size: 13px; line-height: 1.65; }

/* 06. Platform: connected CRM, scoring, analytics and workflow modules. */
.platform { padding: 126px 0 136px; color: white; background: #1a2017; }
.platform-head { margin-bottom: 72px; }
.platform-head h2 em { color: #9eaa96; }
.platform-head p { color: #9aa096; }
.platform-list { border-top: 1px solid rgba(255,255,255,0.17); }
.platform-row { min-height: 82px; padding: 18px 8px; border-bottom: 1px solid rgba(255,255,255,0.13); display: grid; grid-template-columns: 90px 1.1fr 1.35fr 30px; align-items: center; transition: 180ms ease; }
.platform-row:hover { padding-left: 18px; background: rgba(166,223,33,0.055); }
.platform-row > span { width: fit-content; padding: 5px 7px; border: 1px solid rgba(201,255,61,0.24); border-radius: 2px; color: var(--lime); font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.platform-row h3 { margin: 0; font-size: 22px; font-weight: 540; letter-spacing: -0.6px; }
.platform-row p { max-width: 450px; margin: 0; color: #9da39a; font-size: 12px; line-height: 1.55; }
.platform-row > i { color: var(--lime); font-style: normal; }

/* 07. Decision intelligence: narrative copy beside the live decision field. */
.clarity { padding: 136px 0; display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center; gap: 72px; }
.clarity-copy h2 { margin-top: 34px; }
.clarity-copy > p { max-width: 460px; margin: 28px 0 0; color: #62695f; font-size: 16px; line-height: 1.72; }
.outcome-grid { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.outcome-grid div { display: grid; gap: 6px; }
.outcome-grid strong { font-size: 12px; }
.outcome-grid span { color: #7a8077; font-size: 10px; }

/* 08. Operate with intelligence.
   Desktop height is approximately 50% of the artwork's natural full-width
   height. The background is scaled by height (`auto 100%`), which preserves its
   1680:943 aspect ratio and anchors the complete gauge on the right. */
.barometer-cta {
  position: relative;
  width: 100%;
  height: clamp(500px, 28.06vw, 620px);
  border-top: 1px solid rgba(101, 144, 22, 0.13);
  background-color: #f1f1e1;
  background-image: url("../images/quotasq-barometer-orbital-background.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}

.barometer-copy {
  --cta-copy-left: clamp(52px, 6vw, 104px);
  width: min(1530px, calc(100% - 48px));
  height: 100%;
  padding: 32px 0 36px var(--cta-copy-left);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.barometer-copy .section-label {
  width: auto;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.barometer-copy h2 {
  width: min(430px, 34vw);
  max-width: 430px;
  margin: 24px 0 0;
  color: var(--ink);
  font-size: clamp(28px, 2vw, 34px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -1.6px;
}

.barometer-copy h2 em {
  color: var(--green);
  font-style: normal;
}

.barometer-copy > p {
  width: min(500px, 39vw);
  max-width: 500px;
  margin: 52px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

.barometer-copy .button {
  min-height: 58px;
  margin-top: auto;
  padding: 0 22px;
  font-size: 16px;
  white-space: nowrap;
  background: rgba(243, 242, 236, 0.72);
  box-shadow: 3px 4px 0 rgba(250, 250, 246, 0.72);
}

/* 09. Footer: the transparent dark-surface logo sits directly on Quota Ink. */
.footer { padding-top: 78px; color: white; background: #11150f; }
.footer-main { padding-bottom: 68px; display: grid; grid-template-columns: 1fr 1fr 1.1fr; }
.brand-footer { padding: 0; background: transparent; }
.brand-footer img { width: 150px; background: transparent; }
.footer-main > p { margin: 0; color: #a2a79e; font-size: 17px; line-height: 1.55; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; }
.footer-links div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-links small { margin-bottom: 7px; color: #6e746b; text-transform: uppercase; letter-spacing: 1.3px; font-size: 8px; }
.footer-links a { color: #c6cac2; font-size: 12px; }
.footer-bottom { min-height: 72px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: space-between; color: #72786f; font-size: 9px; }

/* 10. Responsive adaptations. */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 780px; }
  .intelligence-console { width: min(760px,100%); margin-inline: auto; }
  .principle-grid { grid-template-columns: 1fr; }
  .system-grid { grid-template-columns: 1fr 1fr; }
  .system-card:last-child { grid-column: 1 / -1; }
  .clarity { grid-template-columns: 1fr; }
  .clarity-copy { max-width: 720px; }
  .decision-field { width: min(760px,100%); margin-inline: auto; }
  .barometer-cta { height: clamp(500px, 48vw, 580px); }
  .barometer-copy { --cta-copy-left: clamp(36px, 5vw, 64px); width: min(100% - 48px, 1180px); }
  .barometer-copy > p { width: min(430px, 43vw); }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 84px; }
  .principle::before { background-position: 64% center; }
  .principle::after { background: rgba(16,19,15,0.76); }
  .shell { width: min(100% - 30px,1180px); }
  .nav { height: 72px; }
  .nav-links { display: none; }
  .nav-action { padding: 10px 12px; font-size: 11px; }
  .hero { min-height: auto; padding: 54px 0 74px; gap: 48px; }
  .hero h1 { font-size: 52px; letter-spacing: -3.6px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-footnote { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-footnote span { grid-column: 1 / -1; }
  .principle, .system, .platform { padding: 88px 0; }
  .principle-copy h2 { font-size: 36px; letter-spacing: -1.8px; }
  .sq-definition { margin-top: 52px; grid-template-columns: 1fr; }
  .section-head { display: block; }
  .section-head p { width: auto; margin-top: 25px; }
  .section-head h2, .clarity h2 { font-size: 43px; letter-spacing: -2.4px; }
  .system-grid { grid-template-columns: 1fr; }
  .system-card:last-child { grid-column: auto; }
  .platform-row { min-height: 74px; grid-template-columns: 65px 1fr 22px; }
  .platform-row p { display: none; }
  .platform-row h3 { font-size: 18px; }
  .clarity { padding: 92px 0; gap: 55px; }
  .barometer-cta {
    height: 650px;
    background-image: linear-gradient(180deg, rgba(241,241,225,0.98) 0%, rgba(241,241,225,0.92) 48%, rgba(241,241,225,0.28) 72%, rgba(241,241,225,0) 100%), url("../images/quotasq-barometer-orbital-background.png");
    background-position: center, 62% center;
    background-size: 100% 100%, auto 54%;
  }
  .barometer-copy { --cta-copy-left: 0; width: min(100% - 30px, 1180px); height: 650px; padding: 48px 0 290px; }
  .barometer-copy .section-label { width: auto; white-space: normal; }
  .barometer-copy h2 { width: auto; max-width: 420px; margin-top: 24px; font-size: 36px; letter-spacing: -2px; }
  .barometer-copy > p { width: auto; max-width: 92%; margin-top: 40px; font-size: 15px; line-height: 1.7; }
  .barometer-copy .button { margin-top: auto; }
  .footer-main { grid-template-columns: 1fr; gap: 38px; }
  .footer-links { margin-top: 8px; }
  .footer-bottom { padding: 24px 0; align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .system-card, .platform-row { transition: none; }
}


/* =============================================================================
   PRODUCT VISUALS

   These are lightweight CSS illustrations used by the hero, system cards and
   decision field. They contain no application logic and can be restyled without
   changing the semantic content in page.tsx.
   ============================================================================= */

/* Hero dashboard shell and live merchant metrics. */
.intelligence-console { position: relative; padding: 10px; overflow: hidden; border-radius: 11px; background: #151a13; box-shadow: 0 36px 80px rgba(18,22,16,0.27); }
.intelligence-console::before { content: ""; position: absolute; top: -60px; right: 30px; width: 180px; height: 180px; background: var(--lime); filter: blur(110px); opacity: 0.18; }
.console-top { position: relative; height: 48px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: space-between; color: white; }
.console-top .brand img { width: 74px; }
.live-indicator { display: flex; align-items: center; gap: 7px; color: #bec4b9; font-size: 9px; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-bright); box-shadow: 0 0 9px var(--lime); }
.console-body { position: relative; min-height: 542px; padding: 28px; border-radius: 4px; background: #f5f5ef; }
.console-heading { display: flex; align-items: center; justify-content: space-between; }
.console-heading small, .metric-card small, .recommendation small { color: #838981; text-transform: uppercase; letter-spacing: 1px; font-size: 8px; }
.console-heading h2 { margin: 5px 0 0; font-size: 21px; }
.console-heading > span { padding: 9px 10px; border: 1px solid #dfe1d9; border-radius: 3px; background: white; font-size: 8px; }
.console-grid { margin-top: 19px; display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 10px; }
.score-card, .metric-card, .signals-card, .recommendation { border: 1px solid #e0e2d9; border-radius: 5px; background: white; }
.score-card { padding: 15px; display: flex; align-items: center; gap: 16px; }
.score-dial { width: 98px; height: 98px; flex: none; padding: 6px; border-radius: 50%; background: conic-gradient(var(--lime) 0 84%,#e7eadf 84%); }
.score-dial > span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: white; }
.score-dial small { color: #92968f; text-transform: uppercase; letter-spacing: 0.7px; font-size: 6px; }
.score-dial strong { font-size: 29px; line-height: 1; }
.score-dial em { color: var(--green); font-size: 7px; font-style: normal; }
.score-card b { display: inline-block; padding: 5px 7px; border-radius: 10px; color: #4f7512; background: #edf8d8; text-transform: uppercase; font-size: 7px; }
.score-card p { margin: 10px 0 0; color: #686e65; font-size: 9px; line-height: 1.45; }
.metric-card { position: relative; min-height: 132px; padding: 16px; overflow: hidden; }
.metric-card strong { display: block; margin-top: 6px; font-size: 23px; }
.metric-card > span { color: #507e0e; font-size: 8px; }
.mini-chart { position: absolute; left: 15px; right: 15px; bottom: 0; height: 58px; display: flex; align-items: flex-end; gap: 3px; }
.mini-chart i { flex: 1; border-radius: 1px 1px 0 0; background: #d9e7bd; }
.mini-chart i:nth-child(n+8) { background: #add555; }
.signals-card { margin-top: 10px; padding: 14px 17px; }
.signals-title, .signal-row > div:first-child { display: flex; justify-content: space-between; }
.signals-title b { font-size: 10px; }
.signals-title small { color: #979b94; font-size: 7px; }
.signal-row { margin-top: 12px; }
.signal-row span, .signal-row b { font-size: 8px; }
.signal-track { height: 4px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: #eff0eb; }
.signal-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7dac27,var(--lime)); }
.recommendation { margin-top: 10px; padding: 12px 14px; display: flex; align-items: center; }
.spark { width: 30px; height: 30px; margin-right: 10px; display: grid; place-items: center; border-radius: 50%; color: var(--lime-bright); background: var(--ink); }
.recommendation div { display: grid; gap: 3px; }
.recommendation b { font-size: 9px; }
.recommendation > i { width: 28px; height: 28px; margin-left: auto; display: grid; place-items: center; border-radius: 50%; background: #eef0e8; font-style: normal; font-size: 10px; }

/* System-card illustrations: relationship graph, capacity gauge and workflow. */
.system-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(101,144,22,0.055) 1px,transparent 1px),linear-gradient(90deg,rgba(101,144,22,0.055) 1px,transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom,black,transparent 92%); }
.relation-orbit { position: absolute; border: 1px solid rgba(101,144,22,0.38); border-radius: 50%; }
.orbit-a { width: 156px; height: 156px; }
.orbit-b { width: 94px; height: 94px; border-style: dashed; }
.relation-core { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--lime-bright); background: radial-gradient(circle at 36% 30%,#30372b,#10130f 64%); box-shadow: 0 0 0 7px rgba(166,223,33,0.13),0 12px 24px rgba(16,19,15,0.2); font-size: 11px; font-weight: 800; }
.relation-node { position: absolute; z-index: 3; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #c6cbbd; border-radius: 50%; background: white; box-shadow: 0 8px 16px rgba(28,34,23,0.13); font-style: normal; font-size: 9px; font-weight: 750; }
.node-a { top: 21px; right: 52px; }.node-b { bottom: 25px; left: 48px; }.node-c { right: 33px; bottom: 30px; }
.capacity-arc { position: absolute; bottom: 55px; width: 190px; height: 98px; border: 9px solid #cbd1c3; border-bottom: 0; border-radius: 100px 100px 0 0; }
.capacity-arc::after { content: ""; position: absolute; left: 26px; bottom: 0; width: 122px; height: 65px; border: 9px solid var(--lime); border-bottom: 0; border-radius: 100px 100px 0 0; }
.capacity-needle { position: absolute; z-index: 2; left: 50%; bottom: 58px; width: 70px; height: 3px; border-radius: 3px; background: var(--ink); transform: rotate(-37deg); transform-origin: left center; }
.capacity-score { position: absolute; z-index: 3; left: 50%; bottom: 38px; width: 50px; height: 50px; transform: translateX(-50%); display: grid; place-content: center; border-radius: 50%; color: white; background: var(--ink); box-shadow: 0 0 0 6px rgba(166,223,33,0.14),0 10px 20px rgba(16,19,15,0.2); text-align: center; font-size: 14px; font-weight: 800; }
.capacity-score small { display: block; color: var(--lime); font-size: 6px; }
.capacity-range { position: absolute; bottom: 16px; color: #5a6353; text-transform: uppercase; letter-spacing: 1px; font-size: 6px; font-weight: 800; }
.decision-flow { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.decision-flow span { width: 59px; height: 59px; display: grid; place-items: center; border: 1px solid #cbd0c4; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 8px 18px rgba(27,33,23,0.1); font-size: 8px; font-weight: 800; }
.decision-flow span:last-of-type { color: white; border-color: var(--ink); background: var(--ink); }
.decision-flow > i { color: #6e7865; font-style: normal; }
.decision-pulse { position: absolute; left: 24px; right: 24px; bottom: 37px; height: 44px; border-top: 2px solid var(--lime); transform: skewY(-7deg); opacity: 0.75; }
.decision-dots { position: absolute; bottom: 17px; display: flex; gap: 7px; }
.decision-dots i { width: 5px; height: 5px; border-radius: 50%; background: #b8bdb0; }
.decision-dots i:last-child { background: var(--lime); box-shadow: 0 0 0 4px rgba(166,223,33,0.14); }

/* Decision field: four input signals converge into the SQ operating score. */
.decision-field { position: relative; height: 510px; overflow: hidden; border: 1px solid #cad0c3; border-radius: 10px; background: radial-gradient(circle at 50% 50%,rgba(166,223,33,0.13),transparent 30%),linear-gradient(145deg,#f7f7f2,#dfe4d8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),0 24px 55px rgba(28,34,23,0.12); }
.decision-field::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(101,144,22,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(101,144,22,0.06) 1px,transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at center,black,transparent 79%); }
.field-label { position: absolute; top: 18px; left: 20px; display: flex; align-items: center; gap: 8px; color: #687261; text-transform: uppercase; letter-spacing: 1.25px; font-size: 7px; font-weight: 800; }
.field-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(166,223,33,0.13); }
.field-inputs { position: absolute; z-index: 4; left: 24px; top: 50%; transform: translateY(-50%); display: grid; gap: 15px; }
.field-inputs span { width: 102px; padding: 11px 12px; border: 1px solid #cbd0c4; border-radius: 4px; background: rgba(250,250,246,0.95); box-shadow: 0 7px 15px rgba(25,30,21,0.08); font-size: 8px; font-weight: 700; }
.field-inputs i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #6ea8ff; }
.field-inputs span:nth-child(2) i { background: #aa83ff; }.field-inputs span:nth-child(3) i { background: #ffbd59; }.field-inputs span:nth-child(4) i { background: var(--lime); }
.field-lines { position: absolute; left: 126px; top: 50%; width: 125px; height: 245px; transform: translateY(-50%); }
.field-lines i { position: absolute; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg,#aeb6a7,rgba(101,144,22,0.62)); transform-origin: right; }
.field-lines i:nth-child(1) { top: 30px; transform: rotate(24deg); }.field-lines i:nth-child(2) { top: 92px; transform: rotate(8deg); }.field-lines i:nth-child(3) { bottom: 92px; transform: rotate(-8deg); }.field-lines i:nth-child(4) { bottom: 30px; transform: rotate(-24deg); }
.field-rings i { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(101,144,22,0.27); border-radius: 50%; transform: translate(-50%,-50%); }
.field-rings i:first-child { width: 230px; height: 230px; }.field-rings i:last-child { width: 280px; height: 280px; border-style: dashed; opacity: 0.65; }
.field-engine { position: absolute; z-index: 3; left: 50%; top: 50%; width: 170px; height: 170px; transform: translate(-50%,-50%); display: grid; place-content: center; border-radius: 50%; color: white; background: radial-gradient(circle at 38% 30%,#30392a,#11150f 62%); box-shadow: 0 0 0 9px rgba(225,232,216,0.9),0 0 0 10px #aeb9a2,0 22px 42px rgba(16,19,15,0.25); text-align: center; }
.field-engine small { color: var(--lime); font-size: 9px; }.field-engine strong { font-size: 48px; line-height: 1.05; }.field-engine span { color: #9ea398; text-transform: uppercase; letter-spacing: 0.7px; font-size: 7px; }
.field-output-line { position: absolute; left: 63%; right: 88px; top: 50%; height: 1px; background: linear-gradient(90deg,rgba(101,144,22,0.55),#aeb6a7); }
.field-outputs { position: absolute; z-index: 4; right: 22px; top: 50%; transform: translateY(-50%); display: grid; gap: 15px; }
.field-outputs span { width: 92px; padding: 11px 8px; border: 1px solid #c4cbba; border-radius: 4px; background: rgba(250,250,246,0.95); box-shadow: 0 7px 15px rgba(25,30,21,0.08); text-align: center; font-size: 8px; font-weight: 700; }

/* Compact illustration sizing for phones. */
@media (max-width: 720px) {
  .console-body { min-height: 470px; padding: 15px; }
  .console-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 120px; }
  .score-dial { width: 84px; height: 84px; }
  .decision-field { height: 420px; }
  .field-inputs { left: 10px; }.field-inputs span { width: 64px; padding: 10px 7px; font-size: 0; }.field-inputs i { margin: 0; }
  .field-lines { left: 73px; width: 70px; }
  .field-rings i:first-child { width: 170px; height: 170px; }.field-rings i:last-child { width: 205px; height: 205px; }
  .field-engine { width: 122px; height: 122px; }.field-engine strong { font-size: 36px; }
  .field-output-line { left: 66%; right: 66px; }
  .field-outputs { right: 8px; }.field-outputs span { width: 61px; padding: 9px 4px; font-size: 7px; }
}