/* IC Memo Kit — guide/article layer.
   Reuses the site's Linear dark tokens from ../styles.css; adds only
   article-prose + inline mini-calc styling native to that system. */

.gwrap { max-width: 820px; margin: 0 auto; padding: 0 24px 72px; }
.crumb { font-size: 13px; color: var(--ink-subtle); margin: 28px 0 0; }
.crumb a { color: var(--ink-muted); }
.crumb a:hover { color: var(--primary-hover); }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 30px 0 12px; }

article h1 { font-weight: 600; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; }
article .lede { font-size: 18px; color: var(--ink-muted); line-height: 1.6; max-width: 66ch; }
article .asof { font-size: 12.5px; color: var(--ink-tertiary); margin: 12px 0 30px; }
article h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 600; letter-spacing: -.025em; margin: 44px 0 14px; line-height: 1.2; }
article h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 28px 0 8px; color: var(--ink); }
article p { font-size: 16px; color: var(--ink-muted); line-height: 1.68; margin-bottom: 16px; }
article ul, article ol { margin: 8px 0 18px 22px; }
article li { font-size: 16px; color: var(--ink-muted); line-height: 1.62; margin-bottom: 8px; }
article b, article strong { color: var(--ink); font-weight: 600; }
article code { background: var(--surface-3); border: 1px solid var(--hairline); padding: 1px 6px; border-radius: 5px; font-size: 13.5px; color: var(--ink-muted); }
article a { color: var(--primary-hover); }
article a:hover { text-decoration: underline; }

/* prose tables */
article table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 16px 0 24px; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
article th, article td { padding: 11px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); color: var(--ink-muted); }
article thead th { background: var(--surface-2); color: var(--ink); font-weight: 500; }
article tbody tr:last-child td { border-bottom: none; }
article td.num, article th.num { text-align: right; font-variant-numeric: tabular-nums; }
article td.pos { color: var(--good); font-weight: 600; }
article td.neg { color: var(--bad); font-weight: 600; }

/* callout / worked-example boxes */
.gbox { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 20px; margin: 22px 0; }
.gbox .h { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-hover); margin-bottom: 8px; }
.gbox p:last-child { margin-bottom: 0; }
.gbox.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.gbox.warn .h { color: var(--warn); }
.gbox.good { border-color: var(--good-line); background: var(--good-soft); }
.gbox.good .h { color: var(--good); }

/* key takeaways / faq */
.kv-note { font-size: 13.5px; color: var(--ink-subtle); border-left: 2px solid var(--hairline-strong); padding-left: 14px; margin: 18px 0; line-height: 1.6; }

/* inline mini-calculator */
.mini { background: var(--surface-1); border: 1px solid var(--hairline-strong); border-radius: 16px; padding: 22px; margin: 28px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.mini h3 { margin: 0 0 3px; font-size: 15px; color: var(--ink); }
.mini .sub { font-size: 12.5px; color: var(--ink-subtle); margin-bottom: 16px; }
.mini label.lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-bottom: 8px; }
.mini .val { font-weight: 600; color: var(--primary-hover); font-size: 14px; font-variant-numeric: tabular-nums; }
.mini .cf { margin: 14px 0; }
.mini select { width: 100%; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--surface-2); color: var(--ink); }
.mini select:focus, .mini input:focus { outline: none; border-color: var(--primary-focus); box-shadow: 0 0 0 2px rgba(94,105,209,.4); }
.mini .mres { background: var(--surface-3); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
.mini .mres .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--ink-muted); }
.mini .mres .row:last-child { border-bottom: none; }
.mini .mres .row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mini .mres .row .em { color: var(--primary-hover); font-weight: 600; }

/* CTA block */
.gcta { background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 16px; padding: 26px; margin: 40px 0 12px; }
.gcta h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; color: var(--ink); }
.gcta p { font-size: 14.5px; color: var(--ink-subtle); margin-bottom: 16px; }
.gcta .btn-row { margin: 0; }

/* related links */
.rel { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--hairline); }
.rel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-subtle); font-weight: 500; margin-bottom: 12px; }
.rel a { display: block; color: var(--ink); font-size: 15px; margin-bottom: 8px; }
.rel a:hover { color: var(--primary-hover); }

/* index grid */
.gindex { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
@media (max-width: 680px) { .gindex { grid-template-columns: 1fr; } }
.gcard { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 12px; padding: 22px; display: block; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); transition: border-color .14s ease; }
.gcard:hover { border-color: var(--hairline-tertiary); }
.gcard .tag { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .03em; color: var(--primary-hover); background: var(--surface-3); border: 1px solid var(--hairline); padding: 3px 9px; border-radius: 9999px; margin-bottom: 12px; }
.gcard h2 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin: 0 0 7px; line-height: 1.3; }
.gcard p { font-size: 13.5px; color: var(--ink-subtle); margin: 0; line-height: 1.55; }