/* Akiba Solutions Ltd — company site.

   THIS DELIBERATELY DOES NOT LOOK LIKE THE PRODUCT SITE, and the divergence is
   the design decision rather than a drift from it. `apps/web/public/site.css`
   dresses Akiba Pocket Money: a dark ground, one sans (DM Sans) doing every
   job, a rainbow prism gradient, glass panels and glow blobs. That is a
   consumer app selling itself. This is the company that owns it, on its own
   apex, read by people checking whether a business is real — a registrar, a
   platform reviewer, a prospective partner. Those are different jobs, and an
   earlier draft of this file that inherited the product's dark skin was
   rejected by the owner for exactly that reason.

   THE CONCEPT IS AN ANNOTATED DOCUMENT, not a landing page. Light paper,
   generous margins, hairline rules, a narrow measure for prose, and small
   monospaced labels in the margin naming what each section is. The company's
   pitch is rigour and honesty, so the page is set like a specification you can
   find a fact in quickly. There is no hero gradient, no glass, no glow.

   THE ACCENT IS THE ONE HUE THE PRODUCT'S BRAND EXCLUDES. Deep forest green.
   `apps/web/public/site.css` records, in its own words, that the Akiba mark has
   no pixel in the green band and that both greens were removed from the prism
   for that reason. So green is the one family the product's gradient can never
   drift into, which makes it the safest possible signal of "same company,
   different thing". It is also far darker and less saturated than the product's
   mint `--teal-500`, so the two do not read as a shade disagreement.

   COLOUR OTHERWISE COMES FROM THE LOGO AND NOWHERE ELSE. The page is ink on
   paper with one accent; the mark is the only saturated thing on it. That is
   what stops a multi-coloured logo fighting the layout.

   SINGLE THEME, ON PURPOSE. The owner asked for a light site, so there is no
   dark variant and no `prefers-color-scheme` block. Every colour is therefore
   painted explicitly from a token below rather than inherited, so the page
   holds its appearance on any host background.

   NO EXTERNAL REQUEST IS MADE BY THIS PAGE. All three typefaces are served
   from this Worker's own asset bundle, so no visitor's IP reaches a third
   party — the page claims privacy by design further down, and a claim its own
   stylesheet contradicts is worse than no claim. It is also what lets the
   Worker send `default-src 'self'` with no exceptions. Source Serif is loaded
   without its optical-size axis, which is unused here and was 58% of the file.

   These values are this site's token definition, in the sense AGENTS.md
   requires raw colour values to live in one. Nothing below restates a literal.
   `docs/contracts/deployment-company-site.md` owns why this file shares no code
   with the product's token layer. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/plex-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Paper and ink ---- */
  --paper: #fcfcfa;
  --paper-sunk: #f5f5f1;
  --card: #ffffff;
  --ink: #14161a;
  --ink-soft: #40454d;
  --ink-mute: #767c85;
  --rule: #e6e6e1;
  --rule-strong: #d2d2cb;

  /* ---- Accent ---- */
  --accent: #1e5b3e;
  --accent-deep: #16452f;
  --accent-wash: #eef4f0;

  /* ---- Type ---- */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Layout ---- */
  --maxw: 1120px;
  --measure: 34rem; /* ~65 characters at this body size */
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

.measure {
  max-width: var(--measure);
}

/* The margin label. Small, monospaced, tracked — this is the device that makes
   the page read as an annotated document rather than a brochure. It names what
   a section IS; it is never decoration and never a number, because the sections
   are not a sequence. */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(252, 252, 250, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.brand img {
  width: 28px;
  height: auto;
}

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.nav-links a {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}

.nav-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* One page, three anchors and a contact link — a disclosure menu would be
   JavaScript bought for nothing, and scrolling reaches all of it. */
@media (max-width: 820px) {
  .nav-links {
    display: none;
  }
}

/* ---------- Links and buttons ---------- */

/* The default action is a text link with a rule under it, not a filled pill.
   A page set like a document should not shout in five places. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 500;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}

.link-arrow:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15.5px;
  padding: 13px 24px;
  border-radius: 3px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--card);
  transition:
    background 0.16s ease,
    border-color 0.16s ease;
}

.btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn-quiet:hover {
  background: var(--paper-sunk);
  border-color: var(--ink-mute);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 14px;
}

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

.hero {
  padding: 104px 0 88px;
  border-bottom: 1px solid var(--rule);
}

.hero h1 {
  margin-top: 26px;
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  max-width: 17ch;
}

/* The one place the accent appears at display size. Spent here and nowhere
   else, so it reads as emphasis rather than as decoration. */
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  margin-top: 28px;
  font-size: 1.12rem;
  color: var(--ink-soft);
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
}

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

/* The two-column frame that carries the concept: label in the left margin,
   content in the right. It collapses to a single column below 900px, where the
   label simply sits above its section. */
.section {
  padding: 84px 0;
  border-bottom: 1px solid var(--rule);
}

.section-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 48px;
}

@media (max-width: 900px) {
  .section-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.section h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
}

.section-intro {
  margin-top: 20px;
  color: var(--ink-soft);
}

/* ---------- The project entry ---------- */

/* A register entry rather than a marketing card: hairline framed, the status
   stated as a labelled value instead of implied by a coloured pill. */
.entry {
  margin-top: 36px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
  padding: 32px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
}

.entry img {
  width: 56px;
  height: auto;
}

.entry h3 {
  font-size: 1.35rem;
}

.entry p {
  margin-top: 14px;
  color: var(--ink-soft);
}

.entry-status {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.entry-status .value {
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}

@media (max-width: 620px) {
  .entry {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px;
    gap: 18px;
  }
}

/* ---------- Standards ---------- */

/* Hairline-separated rows, not a grid of rounded cards with accent bars. Each
   row is a claim and its substantiation, which is a list, so it is set as one. */
.standards {
  margin-top: 36px;
  border-top: 1px solid var(--rule);
}

.standard {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.standard h3 {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

.standard p {
  color: var(--ink-soft);
  font-size: 16px;
}

@media (max-width: 720px) {
  .standard {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ---------- About prose ---------- */

.prose p + p {
  margin-top: 20px;
}

.prose p {
  color: var(--ink-soft);
}

/* ---------- Facts table ---------- */

/* Set as a definition list with tabular figures, because these are the values
   somebody arrives looking for and a table is how you find one fast. */
.facts {
  margin-top: 40px;
  border-top: 1px solid var(--rule-strong);
}

.fact {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.fact dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
}

.fact dd {
  margin: 0;
  font-size: 16.5px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ---------- Contact ---------- */

.contact-inner {
  margin-top: 30px;
  padding: 36px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-wash);
}

.contact-inner p {
  margin-top: 14px;
  color: var(--ink-soft);
}

.contact-address {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  word-break: break-word;
}

.contact-address:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

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

.site-footer {
  padding: 52px 0 76px;
  color: var(--ink-mute);
  font-size: 14px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}

.footer-top a:hover {
  color: var(--ink);
}

/* The statutory disclosure. Small, but it is the reason a company site has a
   footer at all — the four values the Companies (Trading Disclosures)
   Regulations require. `src/company.ts` owns them and refuses to publish a
   missing one. */
.disclosure {
  margin-top: 26px;
  max-width: 46rem;
  line-height: 1.75;
}

.disclosure strong {
  color: var(--ink-soft);
  font-weight: 600;
}

.footer-copyright {
  margin-top: 18px;
}