/* Utilities the ported security and privacy pages need.
 *
 * These live outside grove.css on purpose. grove.css is a byte-for-byte copy of the
 * basalt.health stylesheet, and keeping it that way is what makes "did the design system
 * change?" a one-line diff. Anything this site needs and basalt.health does not goes here,
 * loaded after it. */

.small { font-size: 14.5px; line-height: 1.6; }
.muted { color: var(--muted); }
.container.narrow { max-width: 820px; padding-left: 0; padding-right: 0; }
/* On a paragraph rather than a container: hold the line length at something readable.
 * page-selectors counts a class as defined if the name appears in a loaded sheet, so
 * .narrow existing only inside .container.narrow would have passed the gate while doing
 * nothing at all to the lead paragraphs on /security that carry it. */
p.narrow, .g-sub.narrow { max-width: 68ch; }

/* The two-column card grid on /security. grove ships a three-up (.mini-steps) only. */
.mini-steps.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .mini-steps.two { grid-template-columns: 1fr; } }

/* grove's .perf-table is a numbers table: right-aligned, nowrap, tabular. The gap list is
 * prose in three columns and needs to wrap, so it gets its own table style. */
.prose-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose-table th, .prose-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.prose-table thead th { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--panel); }
.prose-table tbody tr:last-child td { border-bottom: 0; }
.prose-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 720px) { .prose-table td:first-child { white-space: normal; } .prose-table th, .prose-table td { padding: 11px 12px; } }

/* Cards on these pages carry headings and tick lists, which the marketing cards do not. */
.mini-step h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 10px; color: var(--ink); }
.mini-step .frow-list { margin-top: 14px; }
.mini-step .frow-list li { font-size: 14.5px; }
.mini-step > p:last-child { margin-bottom: 0; }

/* Checkbox rows on /demo.
 * grove's .field is built for one labelled input per row: the label is display:block and the
 * input is width:100%. A checkbox inside its own label needs the opposite of both, or the box
 * stretches to the width of the card and the text drops onto the next line. */
.field.checks label { display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: 14.5px; color: var(--muted); margin-bottom: 10px; }
.field.checks label:last-child { margin-bottom: 0; }
.field.checks input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }

/* Footer legal line.
 * grove hardcodes #76806c on the #141414 footer, which measures 4.45:1 against a 4.5:1
 * requirement for text this size. It is the copyright and privacy line, so it is small, grey,
 * and exactly the sort of text that gets left failing because nobody reads it on purpose.
 * #8c9682 is the colour the footer blurb beside it already uses, and measures 5.97:1. */
.footer-bottom { color: #8c9682; }

/* Footer column headings.
 * Same #76806c on #141414 as the legal line: 4.45:1 where 4.5:1 is required at 11px. */
.footer .fcol h5 { color: #8c9682; }

/* The light theme had no background of its own.
 *
 * grove.css's first body rule sets `background: linear-gradient(...)`, and the shorthand resets
 * background-color to transparent. Its second body rule then replaces background-image with the
 * chart-paper grid, taking the gradient with it. What is left in light mode is a grid drawn over
 * nothing, so the page has always borrowed whatever canvas the browser paints behind it.
 *
 * That is invisible while the browser's canvas is white, which is why it survived. It is not
 * invisible to a visitor whose OS is in dark mode and who presses the theme toggle to light: the
 * light tokens apply, the canvas stays dark, and dark-on-dark is what they read. Confirmed in a
 * real browser, not inferred: html.light, --ink #16201f, and body background-color rgba(0,0,0,0).
 *
 * The colour is the first stop of the gradient grove intended. Both dark rules set background on
 * body with higher specificity, so they still win. */
body { background-color: #e6eefc; }

/* The hero photograph is a plate, not a cutout.
 *
 * grove's .hero-cutout expects a subject on transparency, standing on the blue baseline rule. The
 * photograph Ben supplied is shot on a black field, and it cannot be keyed: the dark-suited figure
 * at the bottom right is lit so that about fifteen per cent of him is pure black, contiguous with
 * the backdrop, so a flood fill from the corners removes part of his shoulder and arm no matter
 * how tight the tolerance. Measured at 0, 1, 2 and 3 per cent fuzz; even zero takes 14.8% of him.
 * Repairing that with a morphological close cut visible staircase notches into the same shoulder.
 *
 * So the black field stays and becomes the point: a dark plate resting on the accent rule. The
 * slot, the rule and the entrance animation are grove's and are untouched. */
.hero-cutout img.hero-plate {
  border-radius: 20px;
  box-shadow: 0 24px 60px -32px rgba(20, 20, 20, .45);
  margin-bottom: 8px;
}