/* Custom Computer Connection — layered on Echo's S.P.A.R.K. terminal theme (style.css, unmodified).
   CCC's accent is the theme's own green; FCAP uses --blue, FP uses --amber. */

:root { --accent: var(--green); --accent-hi: var(--green-hi); }

/* nav logo: mark + name */
.logo { display:flex; align-items:center; gap:12px; color:var(--green); }
.logo img { height:56px; width:auto; filter:drop-shadow(0 0 5px rgba(67,224,138,.45)); }
/* stacked lockup: mark | divider | three lines, same as the logo kit */
.logo .lockup { display:block; border-left:2px solid var(--green); padding-left:12px; font-size:.9rem; line-height:1.15;
  font-weight:500; letter-spacing:.3px; color:var(--green); text-shadow:var(--glow); }

/* hero */
/* hero = the stacked lockup, large: mark | divider | three lines */
.hero h1.hero-lockup { display:flex; align-items:center; gap:clamp(16px,2.6vw,34px); margin-bottom:1.4rem; }
.hero h1.hero-lockup::after { display:none; }
.hero-lockup img { height:clamp(110px,17vw,200px); width:auto; flex:none; filter:drop-shadow(0 0 10px rgba(67,224,138,.35)); }
.hero-lockup .lines { display:flex; flex-direction:column; border-left:4px solid var(--green);
  padding-left:clamp(14px,2.2vw,30px); font-size:clamp(1.5rem,3.6vw,2.7rem); line-height:1.12; color:var(--green-hi); text-shadow:var(--glow); min-height:3.36em; }
.hero-lockup .ln { display:block; min-height:1.12em; }
.hero-lockup .ln:last-child::after { content:"_"; color:var(--green); margin-left:4px; animation:cursor 1.05s steps(1) infinite; }
.hero-content { max-width:900px; }
.hero .facts { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 1.4rem; padding:0; list-style:none; }
.hero .facts li { font-size:.82rem; color:var(--dim); border:1px solid var(--line-2); background:var(--panel); border-radius:5px; padding:4px 10px; }
.hero .facts li b { color:var(--green); font-weight:700; }

/* promise list */
.promise { list-style:none; padding:0; margin:0; }
.promise li { position:relative; padding:.35rem 0 .35rem 1.6rem; }
.promise li::before { content:"[✓]"; position:absolute; left:0; color:var(--green); font-size:.8rem; top:.5rem; }

/* rate tables */
.rates { width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:.6rem; }
.rates th, .rates td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.rates thead th { color:var(--dim); font-weight:500; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line-2); }
.rates td.price { color:var(--green-hi); font-weight:700; white-space:nowrap; text-shadow:var(--glow); }
.rates td.vs { color:var(--dim); font-size:.8rem; }
.rates tbody tr:hover td { background:var(--raised); }
.table-wrap { overflow-x:auto; border:1px solid var(--line-2); border-radius:8px; background:var(--panel); padding:4px 10px; margin-bottom:1rem; }
.fine { color:var(--faint); font-size:.75rem; line-height:1.5; }

/* steps */
.steps { counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; list-style:none; padding:0; }
.steps li { counter-increment:step; background:var(--panel); border:1px solid var(--line-2); border-radius:8px; padding:16px 16px 12px; }
.steps li::before { content:"0" counter(step); display:block; color:var(--amber); font-weight:700; font-size:.8rem; margin-bottom:6px; text-shadow:var(--glow-amber); }
.steps li b { color:var(--green-hi); display:block; margin-bottom:4px; }
.steps li p { color:var(--dim); font-size:.88rem; margin:0; }

/* sample report */
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.shots figure { margin:0; background:var(--panel); border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
.shots img { width:100%; height:auto; display:block; }
.shots figcaption { padding:10px 12px; font-size:.8rem; color:var(--dim); border-top:1px solid var(--line); }

/* contact */
.contact-grid { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.contact-lines { list-style:none; padding:0; margin:0; }
.contact-lines li { padding:6px 0; border-bottom:1px dashed var(--line); }
.contact-lines li:last-child { border-bottom:0; }
.contact-lines .k { color:var(--dim); display:inline-block; min-width:7ch; }
.qr { text-align:center; }
.qr img { width:150px; height:150px; background:#fff; padding:8px; border-radius:6px; display:block; margin:0 auto 6px; }
.qr span { font-size:.78rem; color:var(--dim); }

/* customer login link in nav */
.nav-links a.nav-portal { color:var(--amber); border-color:rgba(255,179,71,.35); background:rgba(255,179,71,.06); }
.nav-links a.nav-portal:hover { color:#ffd08a; box-shadow:inset 0 -2px 0 var(--amber); }

/* chat placeholder */
.chat-fab { position:fixed; right:18px; bottom:18px; z-index:1100; font-family:var(--mono); font-size:.88rem; color:var(--green-hi);
  background:var(--raised); border:1px solid var(--line-hot); border-radius:22px; padding:10px 16px; cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.chat-fab:hover { border-color:var(--green); box-shadow:var(--glow), 0 6px 24px rgba(0,0,0,.5); }
.chat-fab .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-right:6px; box-shadow:var(--glow-amber); }
.chat-panel { position:fixed; right:18px; bottom:72px; z-index:1100; width:min(360px, calc(100vw - 36px)); background:var(--panel);
  border:1px solid var(--line-hot); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.6); overflow:hidden; }
.chat-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--inset); border-bottom:1px solid var(--line-2); font-size:.85rem; color:var(--green-hi); }
.chat-head em { color:var(--amber); font-style:normal; }
.chat-head button { background:none; border:0; color:var(--dim); font-size:1.3rem; cursor:pointer; line-height:1; }
.chat-log { padding:14px; font-size:.85rem; max-height:50vh; overflow:auto; }
.chat-log p { margin-bottom:.7rem; }
.chat-log .sys { color:var(--dim); font-size:.78rem; }
.amber { color:var(--amber); }
.chat-input { display:flex; gap:8px; align-items:center; padding:10px 14px; border-top:1px solid var(--line-2); background:var(--inset); color:var(--green); }
.chat-input input { flex:1; background:transparent; border:0; color:var(--faint); font-family:var(--mono); font-size:.85rem; outline:none; }

/* portal page */
.portal { min-height:100vh; display:flex; align-items:center; justify-content:center; padding-top:80px; }
.portal .container { display:flex; justify-content:center; }
.portal-box { width:min(460px,100%); }
.portal-box label { display:block; font-size:.78rem; color:var(--dim); margin:12px 0 4px; }
.portal-box input { width:100%; padding:10px 12px; background:var(--inset); border:1px solid var(--line-2); border-radius:6px; color:var(--faint); font-family:var(--mono); }
.portal-box .btn { width:100%; margin:16px 0 0; opacity:.5; cursor:not-allowed; }
.portal-status { font-size:.8rem; color:var(--dim); border-left:2px solid var(--amber); padding-left:10px; margin:14px 0; }
.portal-list { list-style:none; padding:0; margin:0 0 6px; font-size:.88rem; }
.portal-list li::before { content:"[ ] "; color:var(--faint); }

/* message form */
.msg-panel h3 { color:var(--amber); }
.msg-form label { display:block; font-size:.78rem; color:var(--dim); margin-bottom:12px; }
.msg-form .opt { color:var(--faint); }
.msg-form input, .msg-form select, .msg-form textarea { display:block; width:100%; margin-top:4px; padding:10px 12px; background:var(--inset);
  border:1px solid var(--line-2); border-radius:6px; color:var(--txt); font-family:var(--mono); font-size:.9rem; }
.msg-form input:focus, .msg-form select:focus, .msg-form textarea:focus { outline:none; border-color:var(--green); box-shadow:var(--glow); }
.msg-form textarea { resize:vertical; }
.msg-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.msg-form .btn { margin:4px 0 0; }
.msg-form .hp { display:none; }
.form-status { font-size:.85rem; margin:10px 0 0; min-height:1.2em; color:var(--dim); }
.form-status.ok { color:var(--green-hi); } .form-status.err { color:var(--amber); }

@media (max-width:768px){
  .msg-form .row2 { grid-template-columns:1fr; gap:0; }
  .contact-grid { grid-template-columns:1fr; }
  .rates tr { display:grid; grid-template-columns:1fr auto; border-bottom:1px solid var(--line); }
  .rates th, .rates td { border-bottom:0; }
  .rates thead th.vs { display:none; }
  .rates td.vs { grid-column:1 / -1; padding-top:0; }
  .rates td.vs:empty { display:none; }
  .logo img { height:40px; } .logo .lockup { font-size:.72rem; }
  .hero h1.hero-lockup { gap:12px; }
  .hero-lockup img { height:auto; width:min(190px,48vw); }
  .hero-lockup .lines { font-size:clamp(1.05rem,4.6vw,1.4rem); padding-left:12px; border-left-width:3px; }
}