/* ──────────────────────────────────────────────────────────────────────────
   Hatchik brand overlay
   Values come from the design system in .claude/skills/hatchik-design
   (tokens/colors.css, tokens/fonts.css, tokens/typography.css, tokens/shape.css).

   This sheet is loaded AFTER each page's own <style>, so it re-skins without
   touching any page's markup, copy or layout. Headings are set in Outfit at
   the display weight but are NOT lowercased in CSS — the design gets its
   lowercase look by writing copy that way, and a blanket text-transform
   would mangle proper nouns like "Namaa Solutions SPC".
   ────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Figtree:wght@400;500;600&display=swap");

:root{
  /* paper + ink */
  --ink:#0c1a14;
  --ink-soft:#5b6b64;
  --paper:#f7f4ea;          /* shell-050 — the eggshell page */
  --paper-warm:#fffdf7;     /* shell-000 — cards sit lighter than the page */
  --line:rgba(12,26,20,.14);
  --shadow:rgba(6,20,15,.10);

  /* one accent. teal is retired: the system has a single mint. */
  --mint:#34d399;
  --teal:#34d399;
  --teal-deep:#17b481;

  --hk-px:8px;              /* tokens: --px, the bitmap block depth */
  --hk-night:#06140f;
  --hk-mint-700:#076a4d;
  --hk-shell-100:#f0ece0;
}

body{ font-family:"Figtree",ui-sans-serif,system-ui,-apple-system,sans-serif; }

h1,h2,h3,.plan .name,.plan .price{
  font-family:"Outfit","Figtree",sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
}
h1{ font-size:clamp(2.25rem,4.4vw,3.5rem); letter-spacing:-.028em; }
h2{ letter-spacing:-.024em; }
h3{ font-weight:600; letter-spacing:-.015em; }

/* the kicker: sentence case with a mint underline, never uppercase */
.eyebrow{
  text-transform:none; letter-spacing:0; font-weight:600; font-size:.9375rem;
  color:var(--ink-soft); border-bottom:2px solid var(--mint);
  padding-bottom:2px; display:inline-block;
}

/* buttons — squared, mint, dark text, hard block shadow */
.nav-cta,.btn-primary,button,.copy-btn{
  border-radius:4px;
  background:var(--mint);
  color:var(--hk-night);
  border:1px solid var(--hk-night);
  box-shadow:var(--hk-px) var(--hk-px) 0 var(--ink);
  font-weight:600;
  transition:background-color 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms cubic-bezier(.2,0,0,1);
}
.nav-cta:hover,.btn-primary:hover,button:hover:not(:disabled),.copy-btn:hover{
  background:var(--teal-deep);
  color:var(--hk-night);
  box-shadow:calc(var(--hk-px) * 1.6) calc(var(--hk-px) * 1.6) 0 var(--ink);
}
button:disabled{ background:var(--hk-shell-100); color:#93a29b; border-color:transparent; box-shadow:none; }

/* surfaces — squared, hairline, soft depth */
.plan,.callout,.box,.note,.limit,.paste,.toc,.said,.check,.byhand,.field{
  border-radius:0;
}
.plan,.callout,.box,.note,.toc{
  background:var(--paper-warm);
  border:1px solid var(--line);
  box-shadow:var(--hk-px) var(--hk-px) 0 var(--ink);
}
.plan .price{ font-size:2.6rem; letter-spacing:-.045em; }
.plan .name{ font-size:1.4rem; }

/* accents that were teal */
a{ color:var(--ink); }
a:hover{ color:var(--hk-mint-700); }
footer a:hover{ color:var(--hk-mint-700); }
.num,.count,.limit-num{ color:var(--hk-mint-700); }
.dot{ background:var(--mint); }
code,.src,.paste-text{ background:var(--hk-shell-100); border-radius:0; }

/* inputs */
input[type=text],input[type=email],textarea{
  border-radius:0; border:1px solid var(--line); background:var(--paper-warm);
  font-family:"Figtree",sans-serif;
}
input:focus,textarea:focus{ outline:2px solid var(--hk-mint-700); outline-offset:1px; }

header{ background:var(--paper); border-bottom:1px solid var(--line); }
footer{ background:var(--hk-shell-100); border-top:1px solid var(--line); }
table,th,td{ border-radius:0; }
thead th{ background:var(--hk-shell-100); }

/* small print inside a display-weight price must drop back to the body face */
.plan .price small,.plan .price .now{
  font-family:"Figtree",ui-sans-serif,sans-serif;
  font-weight:500;
  letter-spacing:0;
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin-left:6px;
}

/* ── Width ──────────────────────────────────────────────────────────────
   The content pages were built to a 720px column. The design system's
   container is 1120px, so the frame widens to that; running text still
   stops at the system's own measure so paragraphs stay readable.        */
:root{ --hk-container:calc(1120px + clamp(20px,5vw,64px) * 2); --hk-gutter:clamp(20px,5vw,64px); }

header{
  max-width:var(--hk-container);
  padding-left:var(--hk-gutter); padding-right:var(--hk-gutter);
}
main{
  max-width:var(--hk-container);
  padding-left:var(--hk-gutter); padding-right:var(--hk-gutter);
}
footer{ padding-left:var(--hk-gutter); padding-right:var(--hk-gutter); }
footer .foot-inner{ max-width:var(--hk-container); }

/* text keeps the system's measure even though the frame is wider */
main > p, main > ul, main > ol, main > .intro, main > .muted, main > .updated{
  max-width:60ch;
}
main > h1, main > h2, main > h3{ max-width:24ch; }

/* with the room, the plans sit side by side as the design's pricing does */
.plans{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:stretch; }
.plan{ display:flex; flex-direction:column; }
.plan p:last-child{ margin-bottom:0; }
.steps,.limits{ max-width:none; }

/* ── Sign in ────────────────────────────────────────────────────────────
   The dashboard link, styled as the system's secondary button so the one
   mint fill in the nav stays the primary action.                        */
.nav-signin{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--hk-control-h-sm,34px); padding:0 14px;
  border-radius:var(--radius-btn); border:1px solid var(--hk-night);
  background:var(--paper-warm); color:var(--ink);
  font-family:"Figtree",sans-serif; font-weight:600; font-size:.875rem;
  text-decoration:none; white-space:nowrap;
  box-shadow:var(--hk-px) var(--hk-px) 0 var(--ink);
  transition:background-color 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms cubic-bezier(.2,0,0,1);
}
.nav-signin:hover{ background:var(--paper); box-shadow:calc(var(--hk-px) * 1.6) calc(var(--hk-px) * 1.6) 0 var(--ink); color:var(--ink); }
header .topnav{ gap:18px; }

/* the mark is a square tile now — nothing should round it */
.logo img,.egg,img.egg{ border-radius:0 !important; }

/* ── Help pages ─────────────────────────────────────────────────────────
   Documentation reads better in the system's narrow container than in the
   full 1120 one the marketing pages use.                                */
body.docs main{ max-width:calc(760px + clamp(20px,5vw,64px) * 2); }
body.docs main > p, body.docs main > ul, body.docs main > ol{ max-width:none; }
body.docs main > h1, body.docs main > h2, body.docs main > h3{ max-width:none; }

/* ── Connector address ──────────────────────────────────────────────────
   One row: the address itself, with Copy beside it. The label that used
   to sit above it only repeated what the address plainly is.           */
.paste .paste-head{ border-bottom:0; gap:14px; }
.paste code.paste-text{
  padding:0; margin:0; border:0; background:none; border-radius:0;
  font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,monospace;
  font-size:14.5px; color:var(--ink); word-break:break-all; line-height:1.5;
}

/* the merchant-of-record disclosure, in the footer of every page */
.legal-note{
  max-width:calc(1120px + clamp(20px,5vw,64px) * 2);
  margin:18px auto 0; padding-inline:var(--hk-gutter);
  font-size:12px; line-height:1.7; color:var(--ink-soft); text-align:center;
}
.legal-note a{ color:var(--ink-soft); text-decoration:underline; }

/* an inline call-to-action link, sized like the system's button */
a.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  height:var(--control-h,44px); padding:0 20px;
  text-decoration:none; font-size:1rem; line-height:1;
  margin-top:4px;
}
a.btn-primary:hover{ text-decoration:none; }

/* ── Pricing cards, matching the home page ──────────────────────────────
   The legacy pages don't carry the full token layer, so the few the card
   needs are declared here with the design system's values.              */
:root{
  --font-display:"Outfit","Figtree",ui-sans-serif,system-ui,sans-serif;
  --ink-900:#0c1a14; --ink-700:#2c3a34;
  --mint-050:#e8faf3; --mint-200:#b9f0d9; --mint-500:#34d399;
  --surface-card:#fffdf7; --surface-brand-soft:#e8faf3;
  --line-soft:rgba(12,26,20,.85);
  --radius-card:0px; --radius-tag:0px;
  --body-sm-size:.875rem;
}
.plans{ gap:20px !important; max-width:840px; margin-inline:auto; align-items:stretch !important; }
.plans .plan{
  height:100%;
  background:var(--surface-card); border:1px solid var(--line-soft);
  border-radius:var(--radius-card); box-shadow:var(--hk-px) var(--hk-px) 0 var(--ink);
  padding:28px; display:flex; flex-direction:column;
}
.plans .plan.featured{
  background:var(--surface-brand-soft); border-color:var(--mint-200);
  /* same depth as the other card — only the fill distinguishes it */
  box-shadow:var(--hk-px) var(--hk-px) 0 var(--ink);
}
.plans .plan-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.plans .plan .name{
  margin:0; font-family:var(--font-display); font-weight:800; font-size:24px;
  letter-spacing:-.04em; text-transform:lowercase; color:var(--ink);
}
.plans .plan .price{
  margin:0; display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-display); font-weight:800; font-size:54px;
  letter-spacing:-.045em; line-height:1; color:var(--ink);
}
.plans .plan .price small{
  font-family:"Figtree",sans-serif; font-weight:500; font-size:1rem;
  letter-spacing:0; color:var(--ink-soft); margin-left:0;
}
.plans .plan > p{ margin:14px 0 20px; font-size:var(--body-sm-size); line-height:1.6; color:var(--ink-700); }
.plans .plan .plan-feats{ margin:0 0 24px; }
.plans .plan .plan-cta{ margin-top:auto; }
.plans .pill{
  display:inline-flex; align-items:center; gap:6px; border-radius:var(--radius-tag);
  padding:4px 10px; font-family:"Figtree",sans-serif; font-size:var(--body-sm-size);
  font-weight:500; line-height:1.4;
  background:var(--mint-050); color:var(--hk-mint-700); border:1px solid var(--mint-200);
}
.plans .plan-cta a{
  display:flex; align-items:center; justify-content:center; width:100%;
  height:52px; padding:0 26px; border-radius:var(--radius-btn);
  font-weight:600; font-size:1.1875rem; text-decoration:none; white-space:nowrap;
  border:1px solid var(--hk-night); box-shadow:var(--hk-px) var(--hk-px) 0 var(--ink);
  transition:background-color 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms cubic-bezier(.2,0,0,1);
}
.plans .plan-cta a.primary{ background:var(--mint-500); color:var(--hk-night); }
.plans .plan-cta a.secondary{ background:var(--surface-card); color:var(--ink); }
.plans .plan-cta a:hover{ box-shadow:calc(var(--hk-px) * 1.6) calc(var(--hk-px) * 1.6) 0 var(--ink); }

/* the technical-details link, centred under the cards */
.plans-more{ margin:48px auto 0 !important; max-width:none !important; text-align:center; }

/* the technical-details pointer is a link, not a second call to action */
.plans-more a.btn-primary,
.plans-more a{
  display:inline; height:auto; padding:0; border:0; box-shadow:none;
  background:none; color:var(--hk-mint-700); font-weight:600; font-size:1rem;
  text-decoration:underline; text-underline-offset:3px;
}
.plans-more a:hover{ background:none; box-shadow:none; color:var(--ink); }

/* the kicker, matched to the home page exactly.
   `.intro p` on some pages outranks a bare `.eyebrow`, hence the specificity. */
.eyebrow,
p.eyebrow,
.intro p.eyebrow,
.intro .eyebrow{
  font-size:.9375rem !important;   /* 15px, as on the home page */
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:#2c3a34;                    /* --ink-700, the home page's kicker ink */
  border-bottom:2px solid var(--mint);
  padding-bottom:2px;
  display:inline-block;
  margin-bottom:18px;
}

/* a paragraph that follows a list needs room, or it reads as another bullet */
main ul + p,
main ol + p{ margin-top:28px; }

/* ── The technical details ──────────────────────────────────────────────
   A reference page: persistent navigation, sections that read as blocks
   rather than one long column of small print.                          */
.td{ max-width:calc(1120px + clamp(20px,5vw,64px) * 2) !important; }
header.td-head{
  display:block !important; max-width:none !important;
  padding:8px 0 0 !important; margin:0 !important;
  background:none; border-bottom:0; position:static;
}
.td-head h1{ margin:14px 0 0; max-width:none; }
.td-intro{ margin:18px 0 0 !important; max-width:62ch; font-size:1.1875rem; line-height:1.55; color:var(--ink-700); }
.td-updated{
  margin:22px 0 0 !important; display:inline-block; font-size:.8125rem; color:var(--ink-soft);
  background:var(--hk-shell-100); border:1px solid var(--line); padding:5px 10px;
}
.td-body{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(28px,4vw,56px); margin-top:clamp(40px,5vw,64px); }

/* the contents list stays with you */
.td-toc{ position:sticky; top:96px; align-self:start; }
.td-toc-title{
  margin:0 0 16px !important; font-family:"Outfit",sans-serif; font-weight:800;
  font-size:1.0625rem; letter-spacing:-.015em; color:var(--ink);
}
.td-toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:2px solid var(--line); }
.td-toc li{ margin:0; }
.td-toc a{
  display:block; padding:7px 0 7px 14px; margin-left:-2px;
  border-left:2px solid transparent; font-size:.875rem; line-height:1.4;
  color:var(--ink-soft); text-decoration:none;
}
.td-toc a:hover{ color:var(--ink); border-left-color:var(--mint); }

/* each section is a block, not a paragraph in a stream */
.td-sec{ padding:0 0 clamp(34px,4vw,48px); margin:0 0 clamp(34px,4vw,48px); border-bottom:1px solid var(--line); }
.td-sec:last-child{ border-bottom:0; margin-bottom:0; }
.td-sec h2{ margin:0 0 16px !important; scroll-margin-top:96px; max-width:none; }
.td-sec h3{ margin:26px 0 8px; }
.td-sec p{ max-width:68ch; }
.td-sec ul{ display:grid; gap:12px; padding-left:0; list-style:none; }
.td-sec ul li{
  position:relative; padding-left:20px; max-width:68ch; line-height:1.65;
}
.td-sec ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; background:var(--mint);
}
.td-sec ul li strong{ color:var(--ink); }

/* the honest section reads as deliberate, not as small print */
.td-sec-dark{
  background:var(--hk-night); color:#f2f6f4; border-bottom:0;
  padding:clamp(28px,3.5vw,40px); margin-inline:calc(clamp(20px,5vw,64px) * -0.4);
}
.td-sec-dark h2{ color:#fff; }
.td-sec-dark ul li,.td-sec-dark p{ color:#c9d6d0; }
.td-sec-dark ul li strong,.td-sec-dark p strong{ color:#fff; }
.td-sec-dark a{ color:var(--mint); }

/* the numbers table */
.td-sec table{ width:100%; border-collapse:collapse; margin-top:22px; border:1px solid var(--line); background:var(--paper-warm); }
.td-sec thead th{
  background:var(--hk-shell-100); font-family:"Outfit",sans-serif; font-weight:800;
  font-size:.875rem; text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink);
}
.td-sec tbody td{ padding:14px; border-bottom:1px solid var(--line); vertical-align:top; font-size:.9375rem; line-height:1.55; }
.td-sec tbody tr:last-child td{ border-bottom:0; }
.td-sec tbody td:first-child{ font-weight:600; color:var(--ink); }
/* give the table sensible proportions instead of letting content decide */
.td-sec table{ table-layout:fixed; }
.td-sec th:nth-child(1),.td-sec td:nth-child(1){ width:22%; }
.td-sec th:nth-child(2),.td-sec td:nth-child(2){ width:26%; }
.td-sec th:nth-child(3),.td-sec td:nth-child(3){ width:52%; }
.td-sec tbody td:nth-child(2){ font-family:"Outfit",sans-serif; font-weight:800; color:var(--hk-mint-700); }
.td-sec tbody td:last-child{ color:var(--ink-soft); }

@media (max-width:880px){
  .td-body{ grid-template-columns:1fr; }
  .td-toc{ position:static; padding-bottom:22px; border-bottom:1px solid var(--line); }
  .td-toc ul{ grid-template-columns:repeat(2,1fr); display:grid; border-left:0; }
  .td-toc a{ padding-left:0; border-left:0; }
  .td-sec{ overflow-x:auto; }
  .td-sec-dark{ margin-inline:0; }
}

/* status page: the "last checked" stamp */
.status-stamp{ margin:14px 0 0 !important; font-size:.8125rem; color:var(--ink-soft); }

/* ── Contact form ───────────────────────────────────────────────────────
   A fixed, half-width column: a full-bleed text field invites an essay,
   and the fields are short.                                            */
#contact{ max-width:520px; }
#contact .field{ margin-bottom:22px; }
#contact label{ display:block; margin-bottom:8px; font-weight:600; font-size:.9375rem; color:var(--ink); }
#contact input[type=text],
#contact input[type=email],
#contact textarea{ width:100%; }
#contact textarea{ min-height:170px; }
#contact .count{ display:block; margin-top:6px; text-align:right; font-size:.8125rem; color:var(--ink-soft); }
#contact .check{
  display:flex; align-items:center; gap:10px;
  background:var(--paper-warm); border:1px solid var(--line);
  padding:12px 14px; font-size:.9375rem; color:var(--ink-soft);
}
#contact .check .dot{ width:9px; height:9px; flex:0 0 auto; background:var(--mint); border-radius:50%; }
#contact button[type=submit]{ min-width:150px; }
.said{ max-width:520px; }
@media (max-width:640px){ #contact,.said{ max-width:none; } }

/* ── Help pages ─────────────────────────────────────────────────────────
   Every help page carries the whole list, so you can move between them
   without going back to the index.                                     */
body.docs main.doc{ max-width:calc(1120px + clamp(20px,5vw,64px) * 2) !important; }
.doc-body{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; }
.doc-toc{ position:sticky; top:96px; }
.doc-toc-title{
  margin:0 0 18px !important; font-family:"Outfit",sans-serif; font-weight:800;
  font-size:1.0625rem; letter-spacing:-.015em; color:var(--ink);
}
.doc-toc ul{ list-style:none; margin:0; padding:0; }
.doc-toc li{ margin:0; }

/* the theme label */
.doc-toc .doc-group{
  margin:24px 0 9px; font-family:"Outfit",sans-serif; font-weight:800;
  font-size:.9375rem; letter-spacing:-.01em; color:var(--ink); line-height:1.3;
}
.doc-toc .doc-group:first-child{ margin-top:0; }

/* topics sit under their theme */
.doc-toc .doc-item{ border-left:2px solid var(--line); }
.doc-toc .doc-item a,
.doc-toc .doc-item strong{
  display:block; padding:6px 0 6px 14px; margin-left:-2px;
  border-left:2px solid transparent;
  font-size:.875rem; line-height:1.4; font-weight:400;
  color:var(--ink-soft); text-decoration:none;
}
.doc-toc .doc-item a:hover{ color:var(--ink); border-left-color:var(--mint); }
.doc-toc .doc-item strong{ color:var(--ink); font-weight:600; border-left-color:var(--mint); }
.doc-content{ min-width:0; }
.doc-content .crumb{ margin:0 0 10px !important; font-size:.8125rem; color:var(--ink-soft); }
.doc-content h1{ margin:0 0 18px; }
.doc-content h2{ margin:38px 0 12px; scroll-margin-top:96px; }
.doc-content h3{ margin:26px 0 8px; }
.doc-content p,.doc-content li{ max-width:68ch; }
.doc-content .plain{
  margin-top:40px !important; padding-top:18px; border-top:1px solid var(--line);
  font-size:.875rem; color:var(--ink-soft);
}
@media (max-width:880px){
  .doc-body{ grid-template-columns:1fr; }
  .doc-toc{ position:static; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
  .doc-toc ul{ grid-template-columns:repeat(2,1fr); border-left:0; }
  .doc-toc a{ padding-left:0; border-left:0; }
}