/* Service pages and guides. Same tokens as the home page. */
:root {
  --canvas: #0A0A0B; --surface: #141416; --ink: #F3F2EF; --soft: #ADA9A3; --body: #C2BEB7;
  --accent-rgb: 158, 190, 230; --accent-hi-rgb: 219, 229, 245; --accent: rgb(var(--accent-rgb));
  --line: rgba(243,242,239,0.09); --line-strong: rgba(243,242,239,0.16);
  --display: "Satoshi", system-ui, sans-serif; --text: "Satoshi", system-ui, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif; --mono: "Geist Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 72px); --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 1.0625rem/1.65 var(--text); letter-spacing: -0.004em; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; text-rendering: optimizeLegibility;
  background-image: radial-gradient(60vw 40vw at 70% -10%, rgba(var(--accent-rgb), 0.09), transparent 70%); background-repeat: no-repeat; }
::selection { background: rgba(var(--accent-rgb), 0.35); color: var(--ink); }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.08em; line-height: 0.9; }
a { color: inherit; }
.mono { font: 500 0.74rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

.bar { position: sticky; top: 0; z-index: 50; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgba(10,10,11,0.92), rgba(10,10,11,0.6)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.mark { font: 700 1.25rem/1 var(--display); letter-spacing: -0.04em; text-decoration: none; }
.bar__right { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 500 0.95rem/1 var(--display); text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: transform 140ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease); }
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--ink); color: var(--canvas); } .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { .btn--solid:hover { background: #fff; } .btn--ghost:hover { border-color: rgba(243,242,239,0.4); } }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

main { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); }

.hero { padding: clamp(3rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem); max-width: 60rem; }
.kicker { color: var(--accent); margin: 0 0 20px; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.96; letter-spacing: -0.055em; }
.lede { margin: 28px 0 0; max-width: 40ch; font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.45; letter-spacing: -0.012em; color: var(--soft); text-wrap: pretty; }
.lede b, .prose b { color: var(--ink); font-weight: 500; }
.meta { color: var(--soft); margin: 22px 0 0; }

.blk { padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid var(--line); }
.blk h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -0.045em; max-width: 18ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.prose { max-width: 62ch; color: var(--body); font-size: 1.1rem; line-height: 1.65; margin: 0 0 1em; text-wrap: pretty; }
.article .blk { padding: clamp(2rem, 4vw, 3rem) 0; }
.article .blk h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 26ch; margin-bottom: 1rem; }
.article { max-width: 780px; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.card { border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 10px; align-content: start; }
.card h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.15; }
.card p { margin: 0; color: var(--soft); }
.card--link { text-decoration: none; transition: transform 200ms var(--ease); }
.card--link .mono { color: var(--accent); } .card--link h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.card--link .more { margin-top: 8px; font: 500 0.95rem var(--display); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .card--link:hover { transform: translateY(-3px); } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 4vw, 56px); counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 3.2rem 1fr; gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(st); grid-row: span 2; font: italic 400 2.6rem/1 var(--serif); color: var(--accent); }
.steps h3 { font-size: 1.25rem; letter-spacing: -0.02em; } .steps p { margin: 0; color: var(--soft); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 62ch; }
.ticks li { position: relative; padding-left: 30px; color: var(--body); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.qa { border-top: 1px solid var(--line); max-width: 860px; }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 16px 0; font: 500 clamp(1.05rem, 1.6vw, 1.3rem)/1.35 var(--display); letter-spacing: -0.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary span { width: 16px; height: 16px; flex: none; position: relative; }
.qa summary span::before, .qa summary span::after { content: ""; position: absolute; inset: 7px 0 auto; height: 2px; background: var(--soft); transition: transform 220ms var(--ease), background-color 160ms; }
.qa summary span::after { transform: rotate(90deg); }
.qa[open] summary span::after { transform: rotate(0deg); } .qa[open] summary span::before { background: var(--accent); }
.qa p { margin: 0 0 22px; max-width: 60ch; color: var(--soft); }

.cta { margin: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem); border-radius: 28px; padding: clamp(32px, 6vw, 72px); text-align: center; display: grid; justify-items: center; gap: 16px; }
.cta h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.05em; max-width: 16ch; }
.cta p { margin: 0; color: var(--soft); max-width: 44ch; }
.cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 20px var(--gutter) 28px; border-top: 1px solid var(--line); color: var(--soft); font-size: 0.9rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; } .foot__nav a { color: var(--soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .foot__nav a:hover { color: var(--ink); } }

/* lux cards: gradient hairline, light that follows the pointer */
.lux { position: relative; isolation: isolate;
  background: linear-gradient(180deg, #19191C 0%, #121214 100%) padding-box,
              linear-gradient(155deg, rgba(243,242,239,0.2), rgba(243,242,239,0.04) 38%, rgba(243,242,239,0.03) 62%, rgba(var(--accent-rgb), 0.28)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 80px -40px rgba(0,0,0,0.85), 0 12px 24px -16px rgba(0,0,0,0.6); }
.lux::before, .lux::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; opacity: var(--lit, 0); transition: opacity 320ms var(--ease); }
.lux::before { inset: 0; z-index: 0; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), 0.09), transparent 62%); }
.lux::after { inset: -1px; z-index: 3; padding: 1px; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-hi-rgb), 0.95), rgba(var(--accent-rgb), 0.25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lux > * { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .bar .btn--solid { padding: 0 14px; }
}

/* accent diet: the colour marks what matters, nothing else */
body { background-image: radial-gradient(60vw 40vw at 70% -10%, rgba(var(--accent-rgb), 0.05), transparent 70%); }
.kicker, .card--link .mono { color: var(--soft); }
.lux {
  background: linear-gradient(180deg, #19191C 0%, #121214 100%) padding-box,
              linear-gradient(155deg, rgba(243,242,239,0.2), rgba(243,242,239,0.04) 40%, rgba(243,242,239,0.03) 65%, rgba(243,242,239,0.1)) border-box;
}
.lux::before { background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%), rgba(243,242,239,0.045), transparent 62%); }
.lux::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(243,242,239,0.55), rgba(243,242,239,0.12) 40%, transparent 70%); }

/* chrome: light on metal, the ice blue is what it reflects */
@property --lx { syntax: "<number>"; inherits: false; initial-value: 0.4; }
:root { --chrome: linear-gradient(100deg, #7d8591 0%, #eef3f9 17%, #a3adba 31%, #ffffff 44%, #8a94a2 57%, #dbe4ef 71%, #9fb3cd 83%, #f3f7fb 100%); }
h1 em, h2 em, h3 em, .mark, .se-msg em {
  background-image: var(--chrome); background-size: 260% 100%; background-position: calc(var(--lx) * 100%) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.btn--solid {
  background: linear-gradient(180deg, #FFFFFF 0%, #E4E9F0 44%, #C8CFD9 56%, #EEF2F7 100%); color: #0B0C0E;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(30,36,46,0.28), 0 1px 2px rgba(0,0,0,0.5), 0 10px 26px -12px rgba(var(--accent-rgb), 0.45);
}
@media (hover: hover) and (pointer: fine) { .btn--solid:hover { background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 44%, #D3DAE3 56%, #F6F8FB 100%); } }
.lux {
  background: linear-gradient(180deg, #19191C 0%, #121214 100%) padding-box,
              conic-gradient(from var(--ang, 210deg), rgba(255,255,255,0.34), rgba(255,255,255,0.05) 18%, rgba(var(--accent-rgb), 0.2) 38%, rgba(255,255,255,0.04) 58%, rgba(220,228,238,0.22) 78%, rgba(255,255,255,0.34)) border-box;
}

/* ---------- loading: the chrome WU draws itself while fonts and scripts arrive (first visit only) ---------- */
.loader { display: none; }
.wu-loading .loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #0A0A0B; animation: wuSafety 0.01s 4.5s forwards; }
.loader .wu-svg { width: min(64vw, 460px); }
.wu-svg { overflow: visible; }
.wu-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wu-rim { stroke: #060709; stroke-width: 21; } .wu-body { stroke: url(#wu-chrome); stroke-width: 17; }
.wu-ice { stroke: rgba(158, 190, 230, 0.6); stroke-width: 3.6; transform: translate(2px, 4px); }
.wu-spec { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.6; transform: translate(-2px, -3px); }
.loader .wu-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wuDraw 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards; }
.loader__bar { position: absolute; bottom: 14vh; width: 140px; height: 1px; background: rgba(243, 242, 239, 0.12); overflow: hidden; }
.loader__bar i { display: block; height: 100%; background: rgb(158, 190, 230); transform-origin: 0 50%; transform: scaleX(var(--p, 0.08)); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
.loader.is-done { clip-path: inset(0 0 100% 0); transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1); }
@keyframes wuDraw { to { stroke-dashoffset: 0; } }
@keyframes wuSafety { to { opacity: 0; visibility: hidden; } }

/* states */
.empty__card { border-radius: 28px; padding: clamp(32px, 6vw, 64px); display: grid; justify-items: start; gap: 14px; max-width: 720px; }
.empty__card h2 { margin: 0; }
.empty__card p { margin: 0 0 8px; color: var(--soft); }
.empty__icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(243,242,239,0.05); box-shadow: inset 0 0 0 1px rgba(243,242,239,0.14); }