/* ============================================================================
   LTG PEAK - the inner pages: a prospect's client file, the 404, and admin.
   Tokens and components are the homepage's own (web/index.html), trimmed to
   what these pages use. Change a colour there, change it here.
   ========================================================================== */
:root{
  /* Same palette as the homepage (css/site.css), mapped onto this file's
     older token names so the rules below did not have to change. */
  color-scheme: light;
  --abyss:#F2F3EF; --ground:#F2F3EF; --panel:#FBFBF9; --panel-2:#E9EBE5;
  --line:#D7DBD3; --line-soft:#E3E6DF;
  --paper:#111411; --mute:#586058; --faint:#586058;
  --lime:#2F5BFF; --lime-deep:#111411; --lime-ink:#FFFFFF; --lime-wash:rgba(47,91,255,.10);
  --violet:#111411; --violet-wash:rgba(47,91,255,.10);
  --cyan:#111411; --red:#B42318;
  --display:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --mark:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wrap:1100px; --gut:clamp(16px,4vw,48px); --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --abyss:#0C0E0C; --ground:#0C0E0C; --panel:#151815; --panel-2:#1C201C;
    --line:#262B25; --line-soft:#1C201C;
    --paper:#EEF0EA; --mute:#A1A89E; --faint:#A1A89E;
    --lime-deep:#8FA8FF; --lime-wash:rgba(80,120,255,.16);
    --violet:#EEF0EA; --violet-wash:rgba(80,120,255,.16);
    --cyan:#8FA8FF; --red:#FF8A80;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --abyss:#0C0E0C; --ground:#0C0E0C; --panel:#151815; --panel-2:#1C201C;
  --line:#262B25; --line-soft:#1C201C;
  --paper:#EEF0EA; --mute:#A1A89E; --faint:#A1A89E;
  --lime-deep:#8FA8FF; --lime-wash:rgba(80,120,255,.16);
  --violet:#EEF0EA; --violet-wash:rgba(80,120,255,.16);
  --cyan:#8FA8FF; --red:#FF8A80;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{font-family:var(--display);font-weight:700;margin:0;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;font-variant-numeric:tabular-nums}

.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--abyss) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:62px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.mark > svg{width:34px;height:34px;flex-shrink:0;padding:5px;border-radius:9px;background:#111411}
.wordmark{font-family:var(--mark);font-variation-settings:"wdth" 118;font-weight:800;font-size:19px;letter-spacing:.015em;white-space:nowrap}

.page{padding-block:clamp(32px,6vw,72px);display:flex;flex-direction:column;gap:clamp(18px,2.6vw,28px)}
.page h1{font-weight:900;font-size:clamp(2rem,6vw,3.6rem);letter-spacing:-.03em;overflow-wrap:anywhere}
.page h2{font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:800;margin-top:clamp(18px,3vw,30px)}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--mute)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.lede{font-size:clamp(1.02rem,2vw,1.2rem);color:var(--mute);max-width:60ch}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:15px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.btn-go{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.btn-go:hover{background:#2449E6}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--violet);background:var(--violet-wash)}
.btn-sm{padding:7px 12px;font-size:13.5px}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0;border-radius:20px;overflow:hidden}
.facts div{background:var(--panel);padding:14px 16px}
.facts dt{color:var(--faint);margin-bottom:4px}
.facts dd{margin:0;font-weight:600}

.idnote{padding:15px 17px;border-radius:16px;background:var(--lime-wash);color:var(--mute);font-size:.94rem}
.idnote .mono{display:block;color:var(--cyan);margin-bottom:4px}

.block{display:flex;flex-direction:column;gap:14px}
.empty{color:var(--faint);font-size:.92rem}
.thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.thumbs li{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--panel);aspect-ratio:1;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .rm{position:absolute;right:6px;bottom:6px;font:600 11px var(--body);padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--abyss) 85%,transparent);color:var(--paper);cursor:pointer}
.thumbs .rm:hover{border-color:var(--red);color:var(--red)}

.drop{border:1.5px dashed var(--line);background:var(--panel);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:all .18s var(--ease)}
.drop:hover{border-color:var(--lime);background:var(--lime-wash)}
.drop .dname{font-weight:600}
.drop .dcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-deep)}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.field{background:var(--panel);padding:18px 19px 20px;display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-deep)}
input,select,textarea{width:100%;background:var(--ground);border:1px solid var(--line);color:var(--paper);font-family:var(--body);font-size:16px;padding:11px 13px;border-radius:12px;min-height:48px}
textarea{resize:vertical;min-height:130px;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px var(--violet-wash)}
.submit-row{grid-column:1/-1;background:var(--panel-2);padding:18px 19px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fine{color:var(--faint);font-size:.88rem}
.fine.ok{color:var(--lime-deep)}
.fine.bad{color:var(--red)}

/* ------------------------------------------------------------- admin -- */
.admin-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-bar select{width:auto}
.leads{display:flex;flex-direction:column;gap:10px}
.lead{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:16px 18px;display:grid;gap:8px}
.lead-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.lead-head strong{font-family:var(--display);font-size:1.15rem}
.lead-meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--mute);font-size:.9rem}
.lead-meta a{color:var(--paper)}
.lead-ideas{color:var(--mute);font-size:.92rem;white-space:pre-wrap;overflow-wrap:anywhere}
.lead-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lead-actions select{width:auto;padding:7px 10px;font-size:14px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);border-radius:2px;color:var(--cyan)}
.tag.new{color:var(--lime-ink);background:var(--lime);border-color:var(--lime)}

/* the A of the wordmark */
.peak{display:inline-block;width:.66em;height:.74em;vertical-align:-.03em;margin-inline:.02em}
.peak path{fill:var(--paper)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .peak path{fill:#C8F221} }

/* .form and friends set display, which would otherwise beat the hidden attribute */
[hidden]{display:none !important}

/* The header keeps the logo's lime button, as on the homepage. */
.top .btn-go{background:#C8F221;color:#111411;border-color:#C8F221}
.top .btn-go:hover{background:#D6FA45}

/* ------------------------------------------------------- legal pages -- */
.legal{max-width:760px}
.legal h2{margin-top:clamp(14px,2vw,22px)}
.legal p{color:var(--mute);max-width:65ch}
.legal p a,.legal-foot a{color:var(--paper);text-underline-offset:3px}
.legal-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:.9rem}
.top .btn-sm{min-height:42px;padding:0 16px;font-size:14.5px}