/* AbidioBuild design system. Sister to Abidio: shared terracotta, with job-site slate and spec-sheet details. */
:root {
  color-scheme: light;
  --paper: #f4f3f0; --paper-2: #ebe9e4; --surface: #ffffff; --line: #e1ded8; --line-2: #cfcbc3;
  --ink: #1c2427; --ink-2: #384246; --muted: #5d676a;
  --slate: #22333a; --slate-2: #2d424a; --on-slate: #e9eef0; --on-slate-muted: #a9b7bc;
  --accent: #b4562f; --accent-600: #9a4826; --accent-50: #f9ece5; --accent-bright: #e07a4b;
  --good: #2f7a4c; --good-50: #e6f2ea; --warn: #9a6a12; --warn-50: #fbf2df;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 14px; --r-sm: 8px;
  --shadow: 0 1px 2px rgba(28,36,39,.06), 0 12px 32px -14px rgba(28,36,39,.22);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-stretch: 112%; margin: 0; text-wrap: balance; letter-spacing: -.015em; line-height: 1.08; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spec, .eyebrow { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eyebrow { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-sm); background: var(--accent); color: #fff; font: 700 15px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .15s; }
.btn:hover { background: var(--accent-600); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.ghost:hover { background: var(--paper-2); }
.btn.dark { background: var(--slate); }
.btn.dark:hover { background: var(--slate-2); }
.btn.sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; color: var(--ink); }
.brand img { width: 32px; height: 32px; }
.brand b { color: var(--accent); font-weight: 800; }

/* Forms */
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 700; }
.field small { color: var(--muted); font-size: 13px; }
.input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; }
textarea.input { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }

/* Before/after slider (shared by the site, the app and the client page) */
.compare { position: relative; overflow: hidden; border-radius: var(--r); background: var(--paper-2); user-select: none; -webkit-user-select: none; }
.compare img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.compare .before { position: absolute; inset: 0; height: 100%; clip-path: inset(0 50% 0 0); }
.compare .bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.3); pointer-events: none; }
.compare .bar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322333a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.compare .lbl { position: absolute; bottom: 12px; padding: 4px 10px; border-radius: 6px; font: 500 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
.compare .lbl.l { left: 12px; background: rgba(28,36,39,.72); color: #fff; }
.compare .lbl.r { right: 12px; background: rgba(255,255,255,.94); color: var(--ink); }
.compare .ai { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(28,36,39,.55); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 10px; background: var(--slate); color: #fff; font-size: 14px; box-shadow: var(--shadow); }
.toast.err { background: #8a2a1a; }
.brand b { margin: 0; }
.compare .lbl { max-width: calc(50% - 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }