:root {
  --fg: #1a1a1a;
  --muted: #5a5a5a;
  --bg: #ffffff;
  --accent: #000000;
  --accent-hover: #333333;
  --border: #e5e5e5;
  --code-bg: #f5f5f5;
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.18);
  --btn-fg: #ffffff;
  --max: 720px;

  /* Design canvas: a white artboard column sitting on a grey canvas.
     --frame is the railed column; text measure stays --max inside it. */
  --frame: 820px;
  --canvas-bg: #f0f0f0;
  --canvas-line: rgba(0, 0, 0, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8e8e8;
    --muted: #9a9a9a;
    --bg: #141414;
    --accent: #ffffff;
    --accent-hover: #cccccc;
    --border: #2a2a2a;
    --code-bg: #1f1f1f;
    --shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --btn-fg: #141414;
    --canvas-bg: #050505;
    --canvas-line: rgba(255, 255, 255, 0.16);
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--canvas-bg);
}

/* The artboard: one continuous white column made of <main> + <footer>,
   with no top margin so it runs from the very top of the viewport. */
main,
footer {
  max-width: var(--frame);
  margin: 0 auto;
  background: var(--bg);
}

main {
  position: relative;
  padding: 96px 24px 48px;
}

/* The rails only appear once there is real whitespace beside the
   column — otherwise they'd sit flush against the viewport edge. */
@media (min-width: 900px) {
  main,
  footer {
    padding-left: 50px;
    padding-right: 50px;
    border-left: 1px solid var(--canvas-line);
    border-right: 1px solid var(--canvas-line);
  }
}

/* Section divider: hairline running out to the rails */
.rule {
  display: none;
  height: 0;
  border: 0;
  border-top: 1px solid var(--canvas-line);
  margin: 0 -50px 48px;
}

@media (min-width: 900px) {
  .rule {
    display: block;
  }
}

.hero {
  padding-bottom: 8px;
  margin-bottom: 40px;
}

.screenshot {
  margin: 0 0 56px;
}

.screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--canvas-line);
}

.screenshot figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Studio mark and product mark side by side, matched in size. */
.marks {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  line-height: 0;
}

.marks a {
  display: block;
  line-height: 0;
}

.marks img {
  display: block;
}

h1 {
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.lede {
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 24px;
}

h2 {
  font-size: 22px;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 17px;
  margin: 0 0 6px;
}

p {
  margin: 0 0 12px;
}

section {
  margin-bottom: 48px;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.price {
  color: var(--muted);
  font-size: 15px;
}

/* Buttons are pill; containers are squared. */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: background 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--btn-fg);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.ides ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ides li {
  background: var(--code-bg);
  padding: 6px 12px;
  font-size: 14px;
  color: var(--fg);
}

/* Technical grid: squared cells separated by 1px rules. */
/* Pads an odd-numbered last row so the container background does not read as an
   empty box. Same fill as a real cell, no content. */
.feature--filler {
  min-height: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--canvas-line);
  border: 1px solid var(--canvas-line);
}

.feature-grid > .feature {
  background: var(--bg);
  padding: 20px;
}

@media (min-width: 600px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.feature p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

code {
  background: var(--code-bg);
  padding: 1px 5px;
  font-size: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

kbd {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 1px 6px;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg);
}

.faq details {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  list-style: none;
  position: relative;
  padding-right: 24px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: 15px;
}

.faq a {
  color: var(--accent);
}

footer {
  padding: 24px;
  border-top: 1px solid var(--canvas-line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Close the artboard off at the bottom and let the canvas show below it. */
@media (min-width: 900px) {
  footer {
    padding-top: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--canvas-line);
    margin-bottom: 56px;
  }
}

footer p {
  margin: 0;
}

footer p + p {
  margin-top: 8px;
}

footer a {
  color: var(--accent);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Nunjucks highlighting widget.

   Colours are the IntelliJ Light and Darcula values for the
   DefaultLanguageHighlighterColors keys the plugin's highlighter falls back to.
   NunjucksColors.kt hardcodes no hex at all — it only declares fallbacks — so
   these are the theme values those keys resolve to in a real IDE.
   --------------------------------------------------------------------------- */

.playground .njk-caption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

.njk-widget {
  border: 1px solid var(--canvas-line);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* IntelliJ Light */
  --njk-bg: #ffffff;
  --njk-chrome: #f2f2f2;
  --njk-chrome-fg: #4a4a4a;
  --njk-edge: #d6d6d6;
  --njk-gutter: #adadad;
  --njk-selected: #ffffff;

  --c-delim: #9e880d;      /* METADATA */
  --c-tag: #0033b3;        /* KEYWORD */
  --c-filter: #0f766e;     /* FILTER — teal, as in IntelliJ Light */
  --c-keyword: #0033b3;    /* KEYWORD */
  --c-ident: #080808;      /* IDENTIFIER */
  --c-number: #1750eb;     /* NUMBER */
  --c-string: #067d17;     /* STRING */
  --c-literal: #871094;    /* CONSTANT */
  --c-operator: #080808;   /* OPERATION_SIGN, PARENTHESES, BRACKETS, … */
  --c-comment: #8c8c8c;    /* BLOCK_COMMENT */
  --c-bad: #ff0000;        /* HighlighterColors.BAD_CHARACTER */

  /* The HTML layer painted over every TEMPLATE_DATA run */
  --c-html-tag: #0033b3;
  --c-html-attr: #174ad4;
  --c-html-value: #067d17;
  --c-html-comment: #8c8c8c;
  --c-html-text: #080808;
}

.njk-widget[data-theme="dark"] {
  /* Darcula */
  --njk-bg: #2b2b2b;
  --njk-chrome: #3c3f41;
  --njk-chrome-fg: #bbbbbb;
  --njk-edge: #4e5254;
  --njk-gutter: #606366;
  --njk-selected: #2b2b2b;

  --c-delim: #bbb529;
  --c-tag: #cc7832;
  --c-filter: #d9a441;     /* FILTER — gold, as in Darcula */
  --c-keyword: #cc7832;
  --c-ident: #a9b7c6;
  --c-number: #6897bb;
  --c-string: #6a8759;
  --c-literal: #9876aa;
  --c-operator: #a9b7c6;
  --c-comment: #808080;
  --c-bad: #ff6b68;

  --c-html-tag: #e8bf6a;
  --c-html-attr: #bababa;
  --c-html-value: #a5c261;
  --c-html-comment: #808080;
  --c-html-text: #a9b7c6;
}

/* Toolbar: sample tabs left, theme + copy right. */
.njk-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  background: var(--njk-chrome);
  border-bottom: 1px solid var(--njk-edge);
  flex-wrap: wrap;
}

.njk-tabs {
  display: flex;
  flex-wrap: wrap;
}

.njk-tab {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--njk-edge);
  background: transparent;
  color: var(--njk-chrome-fg);
  font: inherit;
  font-size: 13px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.njk-tab:hover {
  color: var(--c-ident);
}

.njk-tab.is-active {
  background: var(--njk-selected);
  color: var(--c-ident);
  box-shadow: inset 0 -2px 0 var(--c-tag);
}

.njk-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

.njk-tool {
  appearance: none;
  background: transparent;
  border: 1px solid var(--njk-edge);
  color: var(--njk-chrome-fg);
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}

.njk-tool:hover {
  color: var(--c-ident);
  border-color: var(--njk-gutter);
}

.njk-tab:focus-visible,
.njk-tool:focus-visible,
.njk-fold:focus-visible {
  outline: 2px solid var(--c-tag);
  outline-offset: -2px;
}

/* Code surface */
.njk-stage {
  background: var(--njk-bg);
}

.njk-panel {
  overflow-x: auto;
}

.njk-panel:focus-visible {
  outline: 2px solid var(--c-tag);
  outline-offset: -2px;
}

.njk-code {
  display: table;
  min-width: 100%;
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}

.njk-row {
  display: table-row;
}

.njk-row[hidden] {
  display: none;
}

.njk-ln,
.njk-fold-cell,
.njk-lc {
  display: table-cell;
  white-space: pre;
}

.njk-ln {
  color: var(--njk-gutter);
  text-align: right;
  padding: 0 8px 0 12px;
  user-select: none;
  width: 1px;
}

.njk-fold-cell {
  width: 1px;
  padding-right: 8px;
  user-select: none;
}

.njk-lc {
  color: var(--c-html-text);
  padding-right: 16px;
  font: inherit;
  background: none;
}

/* Fold arrow, mimicking the editor gutter control. */
.njk-fold {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--njk-gutter);
  cursor: pointer;
  padding: 0;
  width: 12px;
  height: 12px;
  line-height: 1;
  display: block;
  position: relative;
  top: 3px;
}

.njk-fold::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 2px auto 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.njk-fold.is-collapsed::before {
  margin: 0 0 0 3px;
  border-left: 6px solid currentColor;
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.njk-fold:hover {
  color: var(--c-ident);
}

.njk-folded {
  background: var(--njk-chrome);
  border: 1px solid var(--njk-edge);
  color: var(--njk-chrome-fg);
  padding: 0 6px;
  margin: 0 4px;
}

/* Token colours — see CLASS in nunjucks-highlight.js for the mapping. */
.njk-delim    { color: var(--c-delim); }
.njk-tag      { color: var(--c-tag); font-weight: 600; }
.njk-keyword  { color: var(--c-keyword); font-weight: 600; }
.njk-ident    { color: var(--c-ident); }
.njk-filter   { color: var(--c-filter); }
.njk-number   { color: var(--c-number); }
.njk-string   { color: var(--c-string); }
.njk-literal  { color: var(--c-literal); }
.njk-operator { color: var(--c-operator); }
.njk-paren    { color: var(--c-operator); }
.njk-bracket  { color: var(--c-operator); }
.njk-brace    { color: var(--c-operator); }
.njk-comma    { color: var(--c-operator); }
.njk-dot      { color: var(--c-operator); }
.njk-comment  { color: var(--c-comment); font-style: italic; }
.njk-bad      { color: var(--c-bad); text-decoration: underline wavy; }

.html-tag     { color: var(--c-html-tag); }
.html-attr    { color: var(--c-html-attr); }
.html-value   { color: var(--c-html-value); }
.html-punct   { color: var(--c-html-tag); }
.html-comment { color: var(--c-html-comment); font-style: italic; }
.html-doctype { color: var(--c-html-comment); }
.html-entity  { color: var(--c-html-attr); }

/* No-JS fallback: the samples ship as plain <pre> blocks. */
.njk-source {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  background: var(--njk-bg);
  color: var(--c-html-text);
  border-top: 1px solid var(--njk-edge);
}

.njk-source:first-child {
  border-top: 0;
}

/* ---------------------------------------------------------------------------
   Pricing tier switch.

   Radios rather than buttons, so the control works with CSS alone: no
   JavaScript, keyboard arrow keys come free, and the panel is visible even if
   the stylesheet never loads.
   --------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pricing {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
}

/* Kept focusable — only the label is painted. */
.tier-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.segmented label {
  padding: 7px 16px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.segmented label + label {
  border-left: 1px solid var(--border);
}

.segmented label:hover {
  color: var(--fg);
}

#tier-individual:checked ~ .segmented label[for="tier-individual"],
#tier-org:checked ~ .segmented label[for="tier-org"] {
  background: var(--accent);
  color: var(--btn-fg);
}

#tier-individual:focus-visible ~ .segmented label[for="tier-individual"],
#tier-org:focus-visible ~ .segmented label[for="tier-org"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tier {
  display: none;
}

#tier-individual:checked ~ .tier--individual,
#tier-org:checked ~ .tier--org {
  display: block;
}

.tier-price {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--muted);
}

.tier-price strong {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-right: 6px;
}

.tier-note {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.tier-terms {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
}

.tier-terms a {
  color: var(--accent);
}

.ides-note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* Product mark: the plugin's own icon sitting beside the title, the way it
   appears on the Marketplace. The Obra logo above it stays the studio link. */
/* .product-mark was replaced by .marks in the hero — see above. */

/* The code samples are the one thing that can't reflow — long template lines
   just scroll. Smaller type on narrow screens fits more of them per line. */
@media (max-width: 600px) {
  .njk-code,
  .njk-source {
    font-size: 11px;
  }

  /* Four tabs plus the theme button wrap to three rows on a phone, which reads
     as a broken toolbar. Keep one row and let the tabs scroll instead. */
  .njk-bar {
    flex-wrap: nowrap;
  }

  .njk-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .njk-tabs::-webkit-scrollbar {
    display: none;
  }

  .njk-tab {
    padding: 8px 10px;
    font-size: 12px;
  }

  .njk-tools {
    padding: 0 6px;
    flex-shrink: 0;
  }

  .njk-tool {
    font-size: 11px;
    padding: 3px 8px;
  }

  .njk-ln {
    padding: 0 6px 0 8px;
  }
}

/* ---------------------------------------------------------------- new syntax
   "New in Liquid" showcase. Shopify brand green is used as an accent only —
   the mark is a generic bag glyph, not a reproduction of the Shopify logo. */

:root {
  --shopify: #5e8e3e;
  --shopify-wash: rgba(94, 142, 62, 0.07);
  --shopify-edge: rgba(94, 142, 62, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shopify: #95bf47;
    --shopify-wash: rgba(149, 191, 71, 0.08);
    --shopify-edge: rgba(149, 191, 71, 0.30);
  }
}

/* Flat, not a panel. The section separators and the green eyebrow already mark this
   block; wrapping it in a bordered box put a box inside a box around the code sample. */
.newsyntax {
  border: 0;
  padding: 0;
  background: none;
}

.newsyntax h2 {
  margin-top: 0.2rem;
}

.newsyntax-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--shopify);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.newsyntax-mark {
  display: inline-flex;
  color: var(--shopify);
}

/* Full-bleed band rather than an inset card: bleeds past <main>'s 24px padding the
   same way .rule does, so the sample reads as part of the page, not a box on it. */
.newsyntax-sample {
  overflow-x: auto;
  margin: 1.2rem -24px;
  padding: 1.1rem 24px;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--code-bg);
  font-size: 0.85rem;
  line-height: 1.55;
}

.newsyntax-tags {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.newsyntax-tags li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.newsyntax-tags code {
  color: var(--shopify);
  font-weight: 600;
  white-space: nowrap;
}

.newsyntax-tags span {
  color: var(--muted);
  flex: 1 1 16rem;
}

.newsyntax-footnote {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------- audiences
   Shopify / Jekyll tabs. Reuses the .tier-input + .segmented mechanism from the
   pricing section — CSS only, no JS. Panel rules are keyed by id, so a third
   audience needs a matching rule here. */

.audience-tabs {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

#aud-shopify:checked ~ .segmented label[for="aud-shopify"],
#aud-jekyll:checked ~ .segmented label[for="aud-jekyll"] {
  background: var(--accent);
  color: var(--btn-fg);
}

#aud-shopify:focus-visible ~ .segmented label[for="aud-shopify"],
#aud-jekyll:focus-visible ~ .segmented label[for="aud-jekyll"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.audience {
  display: none;
}

#aud-shopify:checked ~ .audience--shopify,
#aud-jekyll:checked ~ .audience--jekyll {
  display: block;
}

.audience-lede {
  margin-top: 0;
}

.audiences ul {
  margin: 0;
  padding-left: 1.1rem;
}

.audiences li {
  margin-bottom: 0.4rem;
}

/* Cross-links to the other Obra IntelliJ plugins, in the footer. */
.siblings {
  color: var(--muted);
  font-size: 0.85rem;
}