/* Pncyl guides (pncyl.com/guides): the site's paper, ink and orange, set for reading.
   Tokens from marketing/brand/tokens.json. Light only, like the site. */
:root {
  --bg: #F3EFE6; --surface: #FFFFFF; --sand: #E6E0D4; --border: #CFC7B8;
  --ink: #17171A; --ink-2: #5E5A52; --ink-3: #6B665E; --accent: #E0512B; --accent-strong: #C4461F; --accent-text: #B8401F;
  --info: #1F3FCB; --ok: #276B4E; --warn: #87570F; --bad: #B42318;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.65 var(--sans); }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; height: auto; display: block; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 2px solid var(--ink); border-radius: 10px; font: 600 16px/1 var(--sans); color: var(--ink); text-decoration: none; background: transparent; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--sm { padding: 9px 14px; font-size: 14px; }

.gh { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.gh nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 28px); font-size: 15px; }
.gh nav a:not(.btn) { color: var(--ink); text-decoration: none; }
.gh nav a:not(.btn):hover { color: var(--accent-text); }
@media (max-width: 520px) { .gh nav a[href="/#pricing"] { display: none; } }

.article, .gindex { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
.crumbs { font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; } .crumbs a:hover { color: var(--accent-text); }
h1 { font-size: clamp(34px, 5.4vw, 54px); line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 14px; text-wrap: balance; font-weight: 600; }
.lede { font-size: 21px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px; max-width: 60ch; }
.meta { font: 400 13px/1.4 var(--mono); color: var(--ink-3); margin: 0 0 24px; }
.prose h2 { font-size: clamp(25px, 3.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em; margin: 48px 0 12px; font-weight: 600; text-wrap: balance; scroll-margin-top: 80px; }
.prose h3 { font-size: 20px; line-height: 1.3; margin: 28px 0 6px; font-weight: 600; }
.prose p, .prose li { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--accent); }
blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); font-size: 20px; color: var(--ink-2); }

.toc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; margin: 8px 0 24px; font-size: 15px; }
.toc strong { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.toc ol { margin: 10px 0 0; padding-left: 1.2em; columns: 2; column-gap: 28px; }
@media (max-width: 600px) { .toc ol { columns: 1; } }
.toc a { color: var(--ink); text-decoration: none; } .toc a:hover { color: var(--accent-text); }

.callout { margin: 28px 0; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.callout strong:first-child { display: block; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.callout p { margin: 0; }
.callout.tip strong:first-child { color: var(--ok); }
.callout.warn { background: #FBF5EA; border-color: #E3CFA6; } .callout.warn strong:first-child { color: var(--warn); }
.callout.pncyl { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: start; border: 2px solid var(--ink); }
.callout.pncyl strong { font: 600 18px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 6px; display: block; }
.callout.pncyl .btn { margin-top: 12px; }
@media (max-width: 520px) { .callout.pncyl { grid-template-columns: 1fr; } }

ol.steps { list-style: none; padding: 0; counter-reset: s; }
ol.steps > li { counter-increment: s; position: relative; padding: 0 0 6px 52px; margin: 18px 0; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font: 500 15px/1 var(--mono); background: var(--surface); }
ol.steps > li:last-child::before { background: var(--accent); border-color: var(--accent); color: #fff; }
ol.steps h3 { margin: 4px 0 4px; }
ol.steps p { margin: 0; }

.table { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 12px 14px 0; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--sand); vertical-align: top; }
th { font-weight: 600; background: #FAF8F3; }
tr:last-child td { border-bottom: 0; }

figure.dg { margin: 32px 0; background: #FAF8F3; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; position: relative; }
figure.dg figcaption { padding: 12px 118px 14px 16px; min-height: 48px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--sand); background: var(--surface); }
.dg-replay { position: absolute; bottom: 10px; right: 12px; font: 500 12px/1 var(--mono); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.dg-replay:hover { color: var(--ink); border-color: var(--ink); }

/* The drawings move only once guides.js has seen them on screen (class play); otherwise they rest, finished. */
.dg .a.swing { transform: rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) {
  .dg.play .a { animation-delay: var(--d, 0s); animation-fill-mode: both; animation-timing-function: cubic-bezier(.3,.8,.3,1); }
  .dg.play .a.draw { stroke-dasharray: 1; animation-name: g-draw; animation-duration: .9s; }
  .dg.play .a.fade { animation-name: g-fade; animation-duration: .5s; }
  .dg.play .a.pop { transform-box: fill-box; transform-origin: center; animation-name: g-pop; animation-duration: .5s; }
  .dg.play .a.grow-x { animation-name: g-grow-x; animation-duration: .7s; }
  .dg.play .a.grow-y { animation-name: g-grow-y; animation-duration: .7s; }
  .dg.play .a.swing { animation-name: g-swing; animation-duration: 1.3s; }
  .dg.play .a.walk { animation: g-walk calc(var(--steps) * .45s) steps(var(--steps), end) var(--d) infinite; }
}
@keyframes g-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes g-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes g-swing { from { transform: rotate(0deg); } to { transform: rotate(-90deg); } }
@keyframes g-walk { from { transform: translate(0, 0); } to { transform: translate(calc(var(--gx) * var(--steps)), calc(var(--ry) * var(--steps))); } }

/* Calculators */
.tool { margin: 32px 0; padding: 20px; border-radius: 16px; background: var(--surface); border: 2px solid var(--ink); }
.tool h3 { margin: 0 0 4px; font-size: 20px; }
.tool .t-intro { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; }
.tool .t-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tool label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.tool input, .tool select { font: 500 16px/1.2 var(--mono); padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #FAF8F3; color: var(--ink); width: 100%; }
.tool input:focus, .tool select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.tool .t-out { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #FAF8F3; border-left: 4px solid var(--ink); font-size: 16px; }
.tool .t-out.ok { border-left-color: var(--ok); } .tool .t-out.no { border-left-color: var(--bad); } .tool .t-out.maybe { border-left-color: var(--warn); }
.tool .t-big { font: 600 26px/1.15 var(--sans); letter-spacing: -0.01em; display: block; margin-bottom: 4px; }
.tool .t-out p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }

.faq { margin-top: 48px; }
.faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; font: 500 20px/1 var(--mono); color: var(--accent); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); }

.endcta { margin: 56px 0 0; padding: 28px; border-radius: 18px; background: var(--ink); color: var(--bg); }
.endcta h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.02em; }
.endcta p { color: #D6D0C4; margin: 0 0 18px; max-width: 56ch; }
.endcta .btn--primary:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }

.related { margin-top: 48px; }
.related h2 { font-size: 24px; }
.related ul, .cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.related a, .cards a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.related a:hover, .cards a:hover { border-color: var(--ink); }
.related span, .cards a span:last-child { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.cards .cat { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text); }

.gindex { max-width: 1000px; }
.gindex h1 { max-width: 16ch; }
.gindex .latest { margin: 32px 0 16px; }
.cat-block { padding: 28px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; scroll-margin-top: 80px; }
.cat-block h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.015em; }
.cat-block > p { grid-column: 1; margin: 0; color: var(--ink-2); font-size: 15px; }
.cat-block ul { grid-column: 2; grid-row: 1 / span 2; list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.cat-block li { break-inside: avoid; padding: 5px 0; font-size: 16px; }
.cat-block a { color: var(--ink); text-decoration: none; } .cat-block a:hover { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 720px) { .cat-block { grid-template-columns: 1fr; } .cat-block ul { grid-column: 1; grid-row: auto; columns: 1; } }

.gf { border-top: 1px solid var(--border); padding: 32px clamp(16px, 4vw, 40px) 48px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.gf p { margin: 8px 0 0; }
.gf nav { display: flex; gap: 18px; flex-wrap: wrap; }
.gf nav a { color: var(--ink-2); }
.gf-small { flex-basis: 100%; font-size: 12px; max-width: 80ch; }