/*
  Hisland Comply marketing mockups: shared tokens and base components.
  Colour values copied from hisland-comply overlay/frontend/hisland-theme.css (main, generated by ramp.py).
  Do not invent new colours here; add a page-local rule if a page needs something special.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
	color-scheme: light dark;

	/* Primary, petrol (hue 206) */
	--primary-50: oklch(97.50% 0.0120 206.00deg);
	--primary-100: oklch(93.87% 0.0203 204.42deg); /* #DCEFF1 tint */
	--primary-200: oklch(82.88% 0.0340 204.83deg);
	--primary-300: oklch(71.88% 0.0478 205.23deg);
	--primary-400: oklch(62.39% 0.0615 205.63deg);
	--primary-500: oklch(49.90% 0.0753 206.03deg); /* #1F6F78 */
	--primary-600: oklch(45.83% 0.0698 206.86deg);
	--primary-700: oklch(41.76% 0.0642 207.68deg);
	--primary-800: oklch(37.69% 0.0587 208.50deg); /* #0F4A52 ink */
	--primary-900: oklch(31.35% 0.0493 209.25deg);
	--primary-950: oklch(25.00% 0.0400 210.00deg);

	/* Surface, warm grey (Dynalope neutrals) */
	--surface-50: oklch(98.43% 0.0040 106.47deg);  /* #FAFAF7 canvas */
	--surface-100: oklch(96.16% 0.0057 84.57deg);  /* #F4F2EE subtle */
	--surface-200: oklch(92.28% 0.0075 80.72deg);  /* #E8E5E0 border */
	--surface-300: oklch(83.07% 0.0036 67.77deg);  /* #C9C7C5 strong border */
	--surface-400: oklch(70.00% 0.0080 80.00deg);
	--surface-500: oklch(55.53% 0.0125 77.12deg);
	--surface-600: oklch(46.06% 0.0169 74.24deg);  /* #5E574E secondary text */
	--surface-700: oklch(40.17% 0.0155 74.02deg);
	--surface-800: oklch(34.28% 0.0141 73.79deg);
	--surface-900: oklch(28.39% 0.0127 73.57deg);
	--surface-950: oklch(22.49% 0.0113 73.35deg);  /* #1F1B16 text */

	/* Status. Warning covers overdue; error is for destructive confirmations only (unused on the site). */
	--success-500: oklch(52.34% 0.1347 144.17deg); /* #2E7D32 */
	--warning-100: oklch(94.51% 0.0555 83.73deg);
	--warning-500: oklch(80.57% 0.1676 78.64deg);  /* #F9B000 fill */
	--warning-700: oklch(52.21% 0.1082 79.73deg);  /* #8A6100 text */
	--tertiary-500: oklch(54.50% 0.0400 250.00deg);
	--secondary-500: oklch(64.50% 0.0500 75.00deg);

	/* Semantic roles, the only names pages should use */
	--bg: var(--surface-50);
	--bg-raised: #fff;
	--bg-subtle: var(--surface-100);
	--border: var(--surface-200);
	--border-strong: var(--surface-300);
	--text: var(--surface-950);
	--text-2: var(--surface-600);
	--text-3: var(--surface-500);
	--accent: var(--primary-500);
	--accent-ink: var(--primary-800);
	--accent-tint: var(--primary-100);
	--on-accent: #fff;
	--link: var(--primary-500);
	--ok: var(--success-500);
	--attn-fill: var(--warning-500);
	--attn-tint: var(--warning-100);
	--attn-text: var(--warning-700);
	--deep: var(--primary-950); /* the one dark band per page */
	--on-deep: var(--primary-50);

	--radius-base: 0.625rem;
	--radius-container: 0.75rem;
	--shadow: 0 2px 8px -2px rgba(141, 79, 0, .05), 0 4px 16px -4px rgba(141, 79, 0, .03);

	--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* Type scale, major third from 17px body */
	--step--1: 0.875rem;  /* 14 */
	--step-0: 1.0625rem;  /* 17 */
	--step-1: 1.3125rem;  /* 21 */
	--step-2: 1.625rem;   /* 26 */
	--step-3: 2.0625rem;  /* 33 */
	--step-4: clamp(2.125rem, 1.4rem + 3vw, 3.25rem); /* 34 to 52 */

	--page: 72rem;
	--gutter: clamp(1rem, 4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: oklch(20.00% 0.0120 73.35deg);
		--bg-raised: oklch(25.00% 0.0120 73.57deg);
		--bg-subtle: oklch(25.00% 0.0120 73.57deg);
		--border: oklch(30.00% 0.0120 73.79deg);
		--border-strong: oklch(37.20% 0.0120 74.02deg);
		--text: var(--surface-50);
		--text-2: var(--surface-300);
		--text-3: var(--surface-400);
		--accent: oklch(49.90% 0.0602 206.03deg);
		--accent-ink: var(--primary-200);
		--accent-tint: oklch(31.35% 0.0394 209.25deg);
		--link: oklch(71.88% 0.0382 205.23deg);
		--ok: oklch(62% 0.1078 144.17deg);
		--attn-fill: oklch(80.57% 0.1341 78.64deg);
		--attn-tint: oklch(30% 0.05 75deg);
		--attn-text: oklch(80.57% 0.1341 78.64deg);
		--deep: oklch(25.00% 0.0320 210.00deg);
		--shadow: 0 2px 8px -2px rgba(0, 0, 0, .3);
	}
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 var(--step-0)/1.55 var(--font-sans);
	font-kerning: normal;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.3; }
p { margin: 0 0 1em; max-width: 65ch; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
code, .ref { font-family: var(--font-mono); font-size: .88em; }
.lede { font-size: var(--step-1); color: var(--text-2); line-height: 1.5; max-width: 38ch; }
.muted { color: var(--text-2); }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section + .section { border-top: 1px solid var(--border); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg-raised); padding: .5rem 1rem; z-index: 10; }

/* Placeholder: anything that needs a real fact before launch */
.tbd {
	background: var(--attn-tint);
	color: var(--attn-text);
	border-radius: 4px;
	padding: 0 .3em;
	font-family: var(--font-mono);
	font-size: .85em;
}

/* Buttons: one .btn-primary per screen */
.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 2.75rem; padding: .6rem 1.15rem;
	border-radius: var(--radius-base);
	font: 500 var(--step-0)/1.2 var(--font-sans);
	text-decoration: none; cursor: pointer;
	border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--primary-700); text-decoration: none; }
.btn-quiet { background: transparent; color: var(--accent-ink); border-color: var(--border-strong); }
.btn-quiet:hover { background: var(--bg-subtle); }
@media (prefers-color-scheme: dark) {
	.btn-quiet { color: var(--text); }
	.btn-primary:hover { background: var(--primary-600); }
}

/* Nav. Mobile menu uses <details>, no JS. */
.nav { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 5; }
.nav .wrap { display: flex; align-items: center; gap: 2rem; min-height: 4rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.125rem; }
.brand svg { width: 1.6rem; height: 1.6rem; color: var(--accent); }
@media (prefers-color-scheme: dark) { .brand svg { color: var(--link); } }
.nav-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--text-2); text-decoration: none; font-size: var(--step--1); font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav-links a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: .3rem; }
.nav-end { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
.nav-end .signin { font-size: var(--step--1); color: var(--text-2); text-decoration: none; }
.nav-end .btn { min-height: 2.4rem; padding: .4rem .9rem; font-size: var(--step--1); }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-base); font-size: var(--step--1); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] ul { position: absolute; left: 0; right: 0; top: 4rem; background: var(--bg); border-bottom: 1px solid var(--border); list-style: none; margin: 0; padding: .5rem var(--gutter) 1rem; }
.menu li a { display: block; padding: .7rem 0; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
@media (max-width: 860px) {
	.nav-links, .nav-end { display: none; }
	.menu { display: block; }
}

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 3rem 0 2.5rem; font-size: var(--step--1); color: var(--text-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
.footer h4 { font-size: var(--step--1); color: var(--text); margin: 0 0 .75rem; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--text); text-decoration: underline; }
.footer .fine { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* Deep band: one per page at most, for the closing call to action */
.band { background: var(--deep); color: var(--on-deep); }
.band h2 { color: #fff; }
.band p { color: var(--primary-200); }
.band .btn-primary { background: #fff; color: var(--primary-800); }
.band .btn-primary:hover { background: var(--primary-100); }
.band a:not(.btn) { color: var(--primary-200); }

/* FAQ: native details */
.faq { border-top: 1px solid var(--border); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; font-weight: 500; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .25rem; top: 1rem; font-size: 1.3rem; color: var(--text-3); font-weight: 400; }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding: 0 0 1.25rem; color: var(--text-2); }

/* Product shot frame */
.shot { border: 1px solid var(--border); border-radius: var(--radius-container); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-raised); }
.shot img { width: 100%; height: auto; }
.shot figcaption { padding: .7rem 1rem; font-size: var(--step--1); color: var(--text-2); border-top: 1px solid var(--border); }
.shot .dark-only { display: none; }
@media (prefers-color-scheme: dark) { .shot .light-only { display: none; } .shot .dark-only { display: block; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }