/* Hydra Dev Studio — hydradevstudio.com
   Palette: viper green on charcoal. */

:root {
  --bg: #1e2023;
  --panel: #26282c;
  --fg: #f1f2f3;
  --muted: #a0a4ab;
  --line: #34373c;
  --accent: #8fd633;
  --accent-ink: #16240a;
  --header-bg: #17181b;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
/* Base rule, not a per-section one. The width/height attributes on every <img>
   are presentational hints that land in the CSS cascade, so any rule that sets
   only `width` leaves the attribute's height applied and the image renders
   squashed. Setting `height: auto` once here means a new layout cannot
   reintroduce that, and a stale cached copy of a section rule cannot either. */
img { max-width: 100%; height: auto; }
body {
  margin: 0; padding-top: 60px; background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Navigation */
nav {
  position: fixed; inset: 0 0 auto 0; height: 60px; background: var(--header-bg); z-index: 100;
}
nav .container { display: flex; align-items: center; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* The app icon itself, not a letter in a gradient box. The squircle is cut
   into the PNG's own alpha rather than applied here with border-radius: a
   border-radius corner is a CIRCULAR arc, which meets the straight edge at a
   tangent break and reads as subtly the wrong shape beside the real icon in
   someone's Dock. `corner-shape: squircle` is the eventual CSS answer and is
   too new to depend on. Regenerate with Website/tools/make-web-icons.py.

   Both width AND height are stated. The <img> carries width/height attributes
   (they reserve the box and stop the nav reflowing on load), those attributes
   land in the cascade as presentational hints, and the base `img { height:
   auto }` rule means a declaration that set only `width` here would leave the
   attribute height applied -- the same squashing this stylesheet already got
   caught by once. */
.mark { width: 30px; height: 30px; display: block; }
.brand span { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
nav ul { list-style: none; display: flex; gap: 6px; margin: 0 0 0 auto; padding: 0; align-items: center; }
nav ul a { color: rgba(255,255,255,.6); text-decoration: none; padding: 8px 12px; font-size: 15px; }
nav ul a:hover, nav ul a[aria-current="page"] { color: #fff; }
nav .navcta {
  background: var(--accent); color: var(--accent-ink) !important; border-radius: 7px;
  padding: 8px 16px !important; font-weight: 600; margin-left: 8px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 12px 22px; border-radius: 9px; font-size: 16px; font-weight: 600;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px rgba(143,214,51,.25); }
.btn-secondary { background: var(--panel); color: var(--fg); border: 1px solid var(--line); }
.fineprint { color: var(--muted); font-size: 14px; }

/* Home hero */
header.hero { text-align: center; padding: 64px 0 0; }
h1 {
  font-size: 46px; line-height: 1.12; font-weight: 700; letter-spacing: -.025em;
  margin: 0 auto 18px; max-width: 720px; text-wrap: balance;
}
h1 .grey { color: #6d727a; font-weight: 400; }
.sub { font-size: 19px; color: var(--muted); max-width: 640px; margin: 0 auto; }
.cta { display: flex; gap: 12px; justify-content: center; margin: 30px 0 10px; flex-wrap: wrap; }
.shot { margin: 44px 0 0; }
.shot img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
.kinds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 48px 0 0; }
.kinds span {
  background: var(--panel); border: 1px solid var(--line); border-radius: 100px;
  padding: 6px 14px; font-size: 14px; color: var(--muted);
}
.kinds span.hero-kind { color: var(--fg); border-color: #4d6127; }

/* Sections */
section { padding: 64px 0; }
h2.sh { font-size: 30px; letter-spacing: -.02em; margin: 0 0 10px; text-align: center; }
.sh-sub { color: var(--muted); text-align: center; max-width: 640px; margin: 0 auto 40px; }
.strip { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.feature .ico {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(143,214,51,.14);
  display: grid; place-items: center; font-size: 19px; margin-bottom: 14px;
}
.feature h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--muted); font-size: 15.5px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.two img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
/* A screenshot cropped to its content is taller than the copy beside it; top
   alignment keeps the window chrome level with the heading rather than letting
   a tall image push its own text off-centre. */
.two img { align-self: start; }

/* Sections whose screenshot is too wide to survive a half column -- the
   dual-pane browser, the source-control tab -- put the copy full width and the
   image on its own row beneath. At 494px those two-pane shots scale to ~0.35x
   and stop being readable; the point of the section goes with it. */
.solo h2 { font-size: 27px; letter-spacing: -.02em; margin: 0 0 12px; max-width: 760px; }
.solo p { color: var(--muted); margin: 0 0 12px; max-width: 760px; }
.solo ul.ticks { columns: 2; column-gap: 44px; margin: 20px 0 0; }
.solo ul.ticks li { break-inside: avoid; }
/* A shot that follows prose lines up with it: `.container narrow wideshot`
   gives the image the same 760px measure the text has, so the two share an
   edge instead of the picture hanging wider on both sides. Without `narrow` it
   spans the full container, which is what the homepage's tick lists want. */
.wideshot { margin-top: 34px; }
.wideshot img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
}

/* Upgrade page (upgrade.html): one license-key field and the code it earns. */
.keyform { display: flex; gap: 10px; margin: 6px 0 0; flex-wrap: wrap; }
.keyform input[type=email] { flex: 1 1 200px; font-family: inherit; }
.keyform input {
  flex: 1 1 100%; min-width: 0; padding: 12px 14px; border-radius: 9px; font-size: 15px;
  font-family: var(--mono); color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); letter-spacing: .02em;
}
.keyform input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(143,214,51,.25); }
.keyform button { cursor: pointer; border: 0; white-space: nowrap; }
.keyform button[disabled] { opacity: .6; cursor: default; }
.upgrade-out { margin-top: 22px; text-align: left; }
.upgrade-out p { margin: 0 0 12px; }
.upgrade-out .err { color: var(--muted); }
.code-out {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px;
}
.code-out code { font-family: var(--mono); font-size: 20px; color: var(--accent); letter-spacing: .04em; flex: 1; }
.code-out button { cursor: pointer; border: 0; padding: 8px 14px; font-size: 14px; }
@media (max-width: 560px) {
  .keyform { flex-direction: column; }
  .keyform input, .keyform input[type=email] { flex: none; width: 100%; }
  .keyform button { justify-content: center; }
}

/* Screenshots open full size (js/lightbox.js). The trigger is a real button so
   it is focusable and announced; it has to inherit the image's box exactly,
   because a button's own padding and background would otherwise show as a
   frame around every shot. */
.shot-trigger {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; font: inherit; color: inherit; cursor: zoom-in;
}
.shot-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The hero shot carries its own shadow; lifting it slightly on hover reads as
   "this does something" without moving the layout. */
.shot-trigger img { transition: transform .18s ease, border-color .18s ease; }
.shot-trigger:hover img { transform: translateY(-2px); border-color: #4d6127; }
@media (prefers-reduced-motion: reduce) {
  .shot-trigger img { transition: none; }
  .shot-trigger:hover img { transform: none; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 11, 12, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; overflow: auto;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; }
.lightbox img {
  display: block; max-width: 100%; max-height: calc(100vh - 120px);
  width: auto; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.lightbox-caption {
  color: var(--muted); font-size: 14px; text-align: center;
  margin: 14px auto 0; max-width: 720px;
}
.lightbox-close {
  position: fixed; top: 16px; right: 20px;
  background: none; border: 0; color: var(--muted);
  font-size: 34px; line-height: 1; cursor: pointer; padding: 6px 10px;
}
.lightbox-close:hover { color: var(--fg); }
.lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Stops the page scrolling behind the overlay. */
.lightbox-open, .lightbox-open body { overflow: hidden; }
.two h2 { font-size: 27px; letter-spacing: -.02em; margin: 0 0 12px; }
.two p { color: var(--muted); margin: 0 0 12px; }
ul.ticks { list-style: none; padding: 0; margin: 16px 0 0; }
ul.ticks li { padding-left: 26px; position: relative; margin-bottom: 8px; color: var(--muted); }
ul.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
code {
  font-family: var(--mono); font-size: .88em; background: rgba(255,255,255,.06);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--fg);
}

/* Git panel (no screenshot of the source-control tab exists yet) */
.gitpanel {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  font-family: var(--mono); font-size: 13px;
}
.gitpanel .bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: var(--header-bg); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.gitpanel .branch { color: var(--accent); }
.gitpanel .rows { padding: 8px 0; }
.gitpanel .r { display: flex; gap: 10px; padding: 5px 14px; align-items: baseline; }
.gitpanel .st { width: 14px; text-align: center; font-weight: 700; }
.gitpanel .st.m { color: #d8b45a; }
.gitpanel .st.a { color: var(--accent); }
.gitpanel .st.u { color: var(--muted); }
.gitpanel .path { color: var(--fg); }
.gitpanel .hunk { color: var(--muted); margin-left: auto; font-size: 11.5px; }
.gitpanel .sep { border-top: 1px solid var(--line); margin: 8px 0; }
.gitpanel .lbl { padding: 2px 14px 6px; color: var(--muted); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.gitpanel .diff { padding: 0 14px 12px; }
.gitpanel .diff div { white-space: pre; }
.gitpanel .plus { color: #9ada4c; }
.gitpanel .minus { color: #e0736b; }
.gitpanel .ctx { color: var(--muted); }

/* Prose + inner pages */
.prose h2 { font-size: 22px; margin: 32px 0 10px; letter-spacing: -.015em; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose p { color: var(--muted); margin: 0 0 14px; }
.prose ul { color: var(--muted); }
.prose li { margin-bottom: 7px; }

.pagehead { padding: 56px 0 8px; text-align: center; }
.pagehead h1 { font-size: 38px; margin-bottom: 12px; }
.pagehead p { color: var(--muted); max-width: 640px; margin: 0 auto; }

/* Spec table */
table.spec { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.spec th {
  text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line);
}
table.spec td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
table.spec td:first-child { color: var(--fg); font-weight: 600; width: 210px; }
table.spec td.t { font-family: var(--mono); font-size: 12.5px; width: 130px; }
.tablewrap { overflow-x: auto; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 18px 0; font-size: 17.5px; font-weight: 600;
  list-style: none; display: flex; align-items: baseline; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--accent); font-family: var(--mono); }
.faq details[open] summary::before { content: "–"; }
.faq .a { padding: 0 0 18px 26px; color: var(--muted); }
.faq .a p { margin: 0 0 12px; }
.faq .a p:last-child { margin-bottom: 0; }

/* Pricing */
.pricing { text-align: center; }
.price-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 34px;
  max-width: 460px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.price-card h3 { margin: 0 0 8px; font-size: 19px; }
/* The number is the thing people came to this section for, so it leads. */
.price-card .price {
  font-size: 46px; font-weight: 700; letter-spacing: -.03em;
  color: var(--fg); margin: 0 0 2px; line-height: 1;
}
.price-card .terms { color: var(--muted); font-size: 14px; margin: 16px 0 0; }
.price-card p { color: var(--muted); margin: 0 0 20px; font-size: 15.5px; }

footer { background: var(--header-bg); color: rgba(255,255,255,.6); padding: 28px 0; font-size: 14.5px; }
footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: rgba(255,255,255,.6); text-decoration: none; }
footer a:hover { color: #fff; }
footer p { margin: 0; }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  h1 { font-size: 34px; }
  .pagehead h1 { font-size: 30px; }

  /* The nav used to be `nav ul li:not(:last-child) { display: none }`, which
     left a phone with the Download button and nothing else -- no Features, no
     FAQ, no Pricing, on every page. The only route to them was the footer,
     which on a long page is a lot of scrolling to discover the site has other
     pages at all.

     What does not fit at 390px is the WORDMARK, not the links: the four items
     need 319px of the 342 available, and "Hydra Dev Studio" spelled out eats
     more than the difference. So the mark keeps its job as the home link and
     the words go, which is what the links were sacrificed for. */
  .brand span:not(.mark) { display: none; }
  nav ul { gap: 0; }
  /* Tap targets: state the height rather than deriving it from padding plus
     whatever line box the font happens to produce -- that came out at 41px,
     under the 44px minimum, and would drift again with any font change. The
     nav is 60px tall, so 44 fits with room to spare. */
  nav ul a {
    padding: 0 10px; font-size: 15px;
    min-height: 44px; display: flex; align-items: center;
  }
  nav .navcta { padding: 0 14px !important; margin-left: 6px; }
  /* The mark is 30px of artwork; the LINK around it gets the 44px. */
  .brand { min-height: 44px; display: flex; align-items: center; }

  /* One column. Two survives the narrowing arithmetically and not in practice:
     each column comes out at 149px and the list is full of things like
     `docker-compose.yml`, which needs 191 and simply spills. This override
     existed on the layout page it came from and was lost when the rule moved
     into this stylesheet. */
  .solo ul.ticks { columns: 1; }

  /* The footer is the site's second navigation, not a sentence, so its links
     are targets rather than prose and get a real height. WCAG exempts links
     INSIDE a paragraph of text for good reason -- padding them out would wreck
     the line spacing of the sentence they sit in -- and those are left alone
     deliberately, on this page and every other. */
  footer p a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px; }
  footer .container { gap: 4px; }

  /* 11.5px is too small to read on a phone. */
  table.spec th { font-size: 13px; }
}

/* Narrower still (the small iPhones): tighten rather than start hiding again. */
@media (max-width: 400px) {
  nav ul a { padding: 0 7px; font-size: 14px; }
  nav .navcta { padding: 0 11px !important; margin-left: 4px; }
}