/* Anchorwright — the site's one stylesheet, built on the Pixso reference.
   Near-monochrome canvas, hairline elevation, Figtree carrying every voice.
   Color enters only through the wordmark gradient and the one cool wash. */
:root {
  --color-obsidian: #000000;
  --color-carbon: #121212;
  --color-graphite: #333333;
  --color-slate: #666666;
  --color-ash: #808080;
  --color-fog: #999999;
  --color-smoke: #4d4d4d;
  --color-charcoal-veil: #3d3d3d;
  --color-paper: #faf8fd;
  --color-bone: #f9f9fa;
  --color-mist: #eaebee;
  --color-ice-wash: #cfe7ed;
  --gradient-iris-sweep: linear-gradient(88deg, #ee7cff 1.37%, #4e6fff 45.72%, #559cff 106.06%);
  --surface-card: #ffffff;

  --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-caption: 12px; --text-body: 14px; --text-body-lg: 16px;
  --text-subheading: 18px; --text-heading-sm: 24px; --text-heading: 30px;
  --text-heading-lg: 34px; --text-display: 48px; --text-display-lg: 60px;

  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 20px;

  --radius-cards: 8px; --radius-buttons: 12px; --radius-prominent: 18px;
  --shadow-sm: rgba(0,0,0,0.04) 0px 2px 4px 0px, rgba(0,0,0,0.3) 0px 0px 1px 0px;
  --shadow-subtle: rgba(0,0,0,0.1) 0px 1px 1px 0px, rgba(0,0,0,0.4) 0px 0px 1px 0px;

  /* the anchor, as a mask — the gradient is painted through it */
  --mark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='12' r='5.5'/%3E%3Cpath d='M32 18v34M17 25h30M11 37c0 11 9.5 17 21 17s21-6 21-17M11 37l-5-5M53 37l5-5'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-obsidian);
  font-family: var(--font-figtree); font-weight: 400;
  font-size: var(--text-body-lg); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
a { color: var(--color-obsidian); text-decoration: none; }
a:hover { color: var(--color-graphite); }
a:focus-visible { outline: 2px solid var(--color-carbon); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: var(--color-ice-wash); }

.rail { max-width: var(--page-max-width); margin: 0 auto; padding: 0 24px; }

/* — navigation: 64px, transparent over the canvas, no bottom border — */
.nav { height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: var(--text-subheading); letter-spacing: -0.02em; }
.brand a { color: inherit; }
.brand .mark { width: 26px; height: 26px; flex: none; display: block;
  background: var(--gradient-iris-sweep);
  -webkit-mask: var(--mark-mask) center / contain no-repeat;
  mask: var(--mark-mask) center / contain no-repeat; }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a:not(.btn) { font-size: var(--text-body); font-weight: 500;
  color: var(--color-charcoal-veil); padding: 8px 12px; border-radius: 8px;
  white-space: nowrap; }
.nav-links a:not(.btn):hover { background: var(--color-bone); color: var(--color-obsidian); }

.btn { display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: var(--text-body); font-weight: 500;
  padding: 11px 20px; border-radius: var(--radius-buttons);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; flex: none; }
.btn-primary { background: var(--color-carbon); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #000; color: #fff; }
.btn-secondary { background: transparent; color: var(--color-obsidian);
  border-color: var(--color-mist); box-shadow: var(--shadow-subtle); }
.btn-secondary:hover { border-color: var(--color-fog); color: var(--color-obsidian); }
.btn:focus-visible { outline: 2px solid var(--color-carbon); outline-offset: 3px; }
.nav-links .btn { padding: 8px 16px; border-radius: 8px; }
.nav-links .btn-primary { color: #fff; }
.nav-links .btn-primary:hover { background: #000; color: #fff; }

/* — hero: centered, oversized, tight — */
.hero { padding: 72px 0 var(--section-gap); text-align: center; }
.hero h1 { font-weight: 700;
  font-size: clamp(38px, 5.4vw, var(--text-display-lg)); line-height: 1.1;
  max-width: 17ch; margin: 0 auto; }
.hero.app h1 { max-width: 22ch; }
.hero .lede { font-size: var(--text-subheading); line-height: 1.5;
  color: var(--color-slate); max-width: 62ch; margin: 24px auto 0; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 32px; }
.eyebrow { display: inline-block; font-size: var(--text-caption); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-slate);
  margin-bottom: 20px; }

/* the status label — the studio's one honesty device, used everywhere */
.status { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-caption); font-weight: 500; color: var(--color-slate);
  border: 1px solid var(--color-mist); border-radius: 8px; padding: 4px 8px;
  background: var(--surface-card); white-space: nowrap; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-ash); flex: none; }
.hero .status { margin-bottom: 20px; }

/* — section furniture: 80px of canvas, no rules — */
section + section { margin-top: var(--section-gap); }
.sec-head { max-width: 66ch; }
.sec-head h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, var(--text-heading-lg));
  line-height: 1.21; }
.sec-head p { margin-top: 14px; font-size: var(--text-body-lg); color: var(--color-slate); }

/* — cards — */
.grid { display: grid; gap: 20px; margin-top: 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface-card); border-radius: var(--radius-cards);
  padding: var(--card-padding); box-shadow: var(--shadow-sm); }
.card h3 { font-weight: 600; font-size: var(--text-body-lg); }
.card p { margin-top: 8px; font-size: var(--text-body); color: var(--color-slate); }

.app-card { display: flex; flex-direction: column; align-items: flex-start; }
.app-card .status { margin-bottom: 16px; }
.app-card h3 { font-size: var(--text-heading-sm); font-weight: 600; line-height: 1.3; }
.app-card h3 a:hover { color: var(--color-slate); }
.app-card p { margin-top: 10px; }
.app-card .more { margin-top: 18px; font-size: var(--text-body); font-weight: 500;
  color: var(--color-obsidian); }
.app-card:hover .more { color: var(--color-slate); }

/* the cool wash — the one tinted surface in the system */
.wash { background: var(--color-ice-wash); border-radius: var(--radius-prominent);
  padding: 50px; }
.wash h2 { font-weight: 700; font-size: clamp(26px, 3vw, var(--text-heading));
  line-height: 1.21; max-width: 30ch; }
.wash p { margin-top: 16px; color: var(--color-charcoal-veil); max-width: 56ch;
  font-size: var(--text-body-lg); }
.wash .figures { display: flex; flex-wrap: wrap; gap: 50px; margin-top: 32px; }
.fig .n { font-size: var(--text-heading-lg); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; white-space: nowrap; }
.fig .l { font-size: var(--text-body); color: var(--color-graphite); margin-top: 4px; }

/* — the data rows: the one place a hairline is allowed — */
.rows { margin-top: 30px; border-top: 1px solid var(--color-mist); }
.row { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--color-mist); }
.row dt { font-weight: 600; font-size: var(--text-body-lg); }
.row dd { margin: 0; font-size: var(--text-body); color: var(--color-slate); }
.note { margin-top: 20px; font-size: var(--text-body); color: var(--color-ash);
  max-width: 66ch; }

.qa { max-width: 62ch; }
.qa h3 { font-weight: 600; font-size: var(--text-subheading); line-height: 1.5; }
.qa p { margin-top: 6px; font-size: var(--text-body); color: var(--color-slate); }

.close { text-align: center; padding: 0 0 var(--section-gap); }
.close h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, var(--text-heading-lg));
  line-height: 1.21; max-width: 22ch; margin: 0 auto; }
.close p { margin: 16px auto 0; color: var(--color-slate); font-size: var(--text-body-lg);
  max-width: 54ch; }
.close .mail { font-weight: 500; color: var(--color-obsidian);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--color-fog); }

footer { border-top: 1px solid var(--color-mist); padding: 30px 0 50px;
  font-size: var(--text-body); color: var(--color-slate);
  display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; }

@media (max-width: 900px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .wash { padding: 32px; }
  .wash .figures { gap: 30px; }
  .row { grid-template-columns: 1fr; }
  :root { --section-gap: 56px; }
}
@media (max-width: 600px) { .nav-links a:not(.btn) { display: none; } }