/* ============================================================
Sentinel Hub — site styles
Palette: ink #20271f · pine #386c3c (sampled from logo)
Type: Big Shoulders Display (display) · Public Sans (body) · IBM Plex Mono (data)
============================================================ */

:root {
--ink: #20271f;
--pine: #386c3c;
--pine-deep: #26502b;
--moss: #7d9f80;
--mist: #e7ede6;
--paper: #f4f6f2;
--white: #ffffff;
--line: #cfd8ce;
--amber: #a86f14;
--display: "Big Shoulders Display", "Arial Narrow", sans-serif;
--body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
--mono: "IBM Plex Mono", "Courier New", monospace;
--maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
margin: 0;
font-family: var(--body);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 1.5rem;
}

/* ---------- Type scale ---------- */

h1, h2, h3 {
font-family: var(--display);
font-weight: 800;
line-height: 1.05;
margin: 0 0 1rem;
text-wrap: balance;
letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); text-transform: uppercase; }
h3 { font-size: 1.35rem; font-family: var(--body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.1rem; max-width: 62ch; orphans: 2; widows: 2; }

.lede { font-size: 1.2rem; max-width: 56ch; }

/* Eyebrow with hexagon marker echoing the logo */
.eyebrow {
font-family: var(--mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--pine);
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 1rem;
}

.eyebrow::before {
content: "";
width: 11px;
height: 12px;
background: var(--pine);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
flex: none;
}

/* ---------- Link sets (each set consistent within itself) ---------- */

/* Set 1: navigation — ink, pine underline on hover */
.nav a {
color: var(--ink);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
padding: 0.35rem 0;
border-bottom: 2px solid transparent;
}

.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--pine); }

.nav a[aria-current="page"] { border-bottom-color: var(--pine); color: var(--pine-deep); }

/* Set 2: in-content text links — pine, underlined, deepen on hover */
main a:not(.btn) {
color: var(--pine);
text-decoration: underline;
text-underline-offset: 2px;
}

main a:not(.btn):hover, main a:not(.btn):focus-visible { color: var(--pine-deep); }

/* Set 3: footer links — mist, underline on hover */
.footer a {
color: var(--mist);
text-decoration: none;
}

.footer a:hover, .footer a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }

/* ---------- Buttons ---------- */

.btn {
display: inline-block;
font-family: var(--body);
font-weight: 700;
font-size: 1rem;
padding: 0.8rem 1.6rem;
border-radius: 4px;
text-decoration: none;
border: 2px solid var(--pine);
cursor: pointer;
}

.btn-solid { background: var(--pine); color: var(--white); }

.btn-solid:hover, .btn-solid:focus-visible { background: var(--pine-deep); border-color: var(--pine-deep); }

.btn-ghost { background: transparent; color: var(--pine); }

.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--mist); color: var(--pine-deep); }

/* ---------- Header ---------- */

.header {
background: var(--white);
border-bottom: 1px solid var(--line);
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1rem 1.5rem;
max-width: var(--maxw);
margin: 0 auto;
}

.logo-link { flex: none; }

.logo-link img { width: 220px; }

.nav ul {
display: flex;
gap: 1.6rem;
list-style: none;
margin: 0;
padding: 0;
}

.nav-toggle { display: none; }

.nav-toggle-label {
display: none;
cursor: pointer;
padding: 0.4rem;
border-radius: 4px;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
width: 26px;
height: 3px;
background: var(--ink);
border-radius: 2px;
position: relative;
content: "";
}

.nav-toggle-label span::before { position: absolute; top: -8px; }

.nav-toggle-label span::after { position: absolute; top: 8px; }

/* ---------- Hero ---------- */

.hero { padding: 4.5rem 0 4rem; }

.hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 3.5rem;
align-items: center;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* Signature element: the wallet ledger */
.ledger {
background: var(--ink);
color: var(--mist);
font-family: var(--mono);
font-size: 0.86rem;
line-height: 1.7;
border-radius: 8px;
padding: 1.6rem 1.7rem;
box-shadow: 0 20px 50px rgba(32, 39, 31, 0.25);
overflow-x: auto;
}

.ledger-title {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--moss);
margin-bottom: 1rem;
}

.ledger table { border-collapse: collapse; width: 100%; white-space: nowrap; }

.ledger td { padding: 0.15rem 1.2rem 0.15rem 0; }

.ledger td:last-child { padding-right: 0; text-align: right; }

.ledger .rule td { border-top: 1px solid rgba(125, 159, 128, 0.4); padding-top: 0.6rem; }

.ledger .ok { color: #9ecb9f; }

.ledger .cap { color: #e3b04e; }

.ledger .sum { color: var(--white); font-weight: 600; }

/* ---------- Sections ---------- */

.section { padding: 4rem 0; }

.section-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-ink { background: var(--ink); color: var(--mist); }

.section-ink h2 { color: var(--white); }

.section-ink .eyebrow { color: var(--moss); }

.section-ink .eyebrow::before { background: var(--moss); }

.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2.5rem;
}

.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
margin-top: 2.5rem;
}

.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 8px;
padding: 1.8rem;
}

.card h3 { margin-top: 0; }

.card .tag {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pine);
display: block;
margin-bottom: 0.7rem;
}

/* Numbered process steps (a true sequence) */
.steps { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: step; }

.step {
counter-increment: step;
display: grid;
grid-template-columns: 72px 1fr;
gap: 1.6rem;
padding: 1.8rem 0;
border-top: 1px solid var(--line);
}

.step::before {
content: counter(step, decimal-leading-zero);
font-family: var(--display);
font-weight: 800;
font-size: 2.4rem;
color: var(--pine);
line-height: 1;
}

.step h3 { margin: 0.15rem 0 0.5rem; }

.step p { margin-bottom: 0.4rem; }

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; margin-top: 2.5rem; font-size: 0.98rem; }

.compare th, .compare td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }

.compare thead th { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); border-bottom: 2px solid var(--pine); }

.compare .yes { color: var(--pine-deep); font-weight: 700; }

.compare .no { color: var(--amber); font-weight: 700; }

/* Definition rows */
.spec { display: grid; grid-template-columns: 220px 1fr; gap: 0.5rem 2rem; margin-top: 2rem; }

.spec dt { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pine); padding-top: 0.2rem; }

.spec dd { margin: 0 0 1.2rem; }

/* CTA band */
.cta-band { text-align: center; }

.cta-band p { margin-left: auto; margin-right: auto; }

/* ---------- Forms ---------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; margin-top: 2rem; max-width: 760px; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }

.field-full { grid-column: 1 / -1; }

.field label { font-weight: 700; font-size: 0.92rem; }

.field input, .field select, .field textarea {
font-family: var(--body);
font-size: 1rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--white);
color: var(--ink);
}

.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--pine); outline-offset: 1px; border-color: var(--pine); }

.form-note { font-size: 0.9rem; color: #4c544b; }

/* ---------- Footer ---------- */

.footer {
background: var(--ink);
color: var(--mist);
padding: 3rem 0 2.5rem;
margin-top: 0;
}

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }

.footer-word {
font-family: var(--display);
font-weight: 800;
font-size: 1.9rem;
text-transform: uppercase;
color: var(--white);
letter-spacing: 0.02em;
}

.footer-word em { font-style: normal; color: var(--moss); }

.footer h4 { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--moss); margin: 0 0 0.8rem; }

.footer ul { list-style: none; margin: 0; padding: 0; line-height: 2; }

.footer-legal { border-top: 1px solid rgba(125, 159, 128, 0.35); margin-top: 2.5rem; padding-top: 1.4rem; font-size: 0.85rem; color: var(--moss); }

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
.hero-grid, .grid-3, .grid-2, .footer-grid, .form-grid { grid-template-columns: 1fr; }
.hero { padding: 3rem 0; }
.spec { grid-template-columns: 1fr; }
.spec dd { margin-bottom: 1.6rem; }
.step { grid-template-columns: 52px 1fr; gap: 1.1rem; }
.compare { display: block; overflow-x: auto; }
}

@media (max-width: 720px) {
.nav-toggle-label { display: block; }
.nav { position: relative; }
.nav ul {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.8rem);
background: var(--white);
border: 1px solid var(--line);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(32, 39, 31, 0.15);
flex-direction: column;
gap: 0;
min-width: 220px;
padding: 0.5rem 0;
z-index: 20;
}
.nav ul li a { display: block; padding: 0.7rem 1.2rem; border-bottom: none; }
.nav ul li a:hover, .nav ul li a:focus-visible { background: var(--mist); }
.nav-toggle:checked ~ ul { display: flex; }
.logo-link img { width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}