/* =============================================================================
   Koloshare — engraved plate system

   The whole site is built from the things that name and find stock in a
   working business: reverse-engraved traffolyte plates, embossed tape,
   shelf-edge tickets, punched tags. Black surface, white core, manila card.

   Two rules keep it honest:
   1. An engraved surface is CUT INTO, never printed on. Light catches the top
      edge of a channel and shadow gathers at the bottom. Reverse that and it
      reads as embossed instead.
   2. Manila is card, never paint. It only appears where a real ticket or tag
      would be.
   ========================================================================== */

/* -- tokens ---------------------------------------------------------------- */

:root {
	color-scheme: light;

	/* plate + cut */
	--plate: #111111;
	--plate-hi: #2a2a2a;
	--plate-lo: #000000;
	--cut: #f4f2ed;
	--cut-dim: #b9b6ae;

	/* paper ground */
	--paper: #f5f6f8;
	--paper-2: #ecedef;
	--card: #ffffff;
	--ink: #11151c;
	--ink-2: #4a5058;
	--ink-3: #5b6068;
	--rule: #d6d6d6;
	--rule-2: #ecedef;

	/* manila card, the one accent */
	--manila: #e8c87a;
	--manila-deep: #c9a44f;
	--manila-soft: #f5e7c4;
	--manila-ink: #4a3a13;
	--manila-on: #3a2d0d;   /* text sitting ON manila, dark in both themes */
	--accent: #444444;      /* the app's hover accent */

	/* metal */
	--screw: #8e8b83;
	--screw-hi: #c9c6bd;

	--r-plate: 8px;
	--r-btn: 8px;
	--r-card: 14px;

	--shadow-plate:
		inset 0 1px 0 rgba(255,255,255,.10),
		inset 0 -1px 0 rgba(0,0,0,.55),
		0 1px 2px rgba(0,0,0,.30);
	--shadow-lift: 0 4px 14px -4px rgba(22,28,37,.10), 0 1px 2px rgba(22,28,37,.05);

	--ease: cubic-bezier(.2,.7,.3,1);
	--gutter: clamp(20px, 5vw, 72px);
	--maxw: 1240px;

	/* Two faces, both earning their place. Comfortaa is the product's own
	   typeface and the wordmark's, so the site and the app read as one thing.
	   Barlow does everything else; labels are Barlow tracked out rather than a
	   third cut. */
	--font-display: 'Comfortaa', ui-rounded, system-ui, sans-serif;
	--font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Dark is not an inversion. The plate is already black, so dark mode dims the
   PAPER to workshop light and lets the cut channels glow the way a lit label
   does at night. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--plate: #0b0b0b;
		--plate-hi: #262626;
		--plate-lo: #000000;
		--cut: #fbf9f4;
		--cut-dim: #96938c;

		--paper: #17161a;
		--paper-2: #1e1d22;
		--card: #232227;
		--ink: #f0eee8;
		--ink-2: #b6b2aa;
		--ink-3: #8d8981;
		--rule: #35333a;
		--rule-2: #2a292f;

		--manila: #e8c87a;
		--manila-deep: #f0d698;
		--manila-soft: #3a3120;
		--manila-ink: #f2dda6;
		--manila-on: #3a2d0d;
		--accent: #cfcdc7;

		--screw: #6a6862;
		--screw-hi: #9c9a93;

		--shadow-lift: 0 6px 18px -6px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--plate: #0b0b0b;
	--plate-hi: #262626;
	--plate-lo: #000000;
	--cut: #fbf9f4;
	--cut-dim: #96938c;

	--paper: #17161a;
	--paper-2: #1e1d22;
	--card: #232227;
	--ink: #f0eee8;
	--ink-2: #b6b2aa;
	--ink-3: #8d8981;
	--rule: #35333a;
	--rule-2: #2a292f;

	--manila: #e8c87a;
	--manila-deep: #f0d698;
	--manila-soft: #3a3120;
	--manila-ink: #f2dda6;
	--manila-on: #3a2d0d;
	--accent: #cfcdc7;

	--screw: #6a6862;
	--screw-hi: #9c9a93;

	--shadow-lift: 0 6px 18px -6px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35);
}

/* -- base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
p { margin: 0; }

:focus-visible {
	outline: 3px solid var(--manila-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
	position: absolute; left: 12px; top: -60px; z-index: 200;
	background: var(--plate); color: var(--cut);
	padding: 12px 18px; border-radius: var(--r-plate);
	font-family: var(--font); text-transform: uppercase; letter-spacing: .14em;
	transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

/* =============================================================================
   The engraved plate

   Cut, not printed: a hairline of light on the top edge of the letterform and
   shadow underneath. The channel is the whole trick.
   ========================================================================== */

.plate {
	position: relative;
	background:
		linear-gradient(180deg, var(--plate-hi) 0%, var(--plate) 14%, var(--plate) 86%, var(--plate-lo) 100%);
	color: var(--cut);
	box-shadow: var(--shadow-plate);
	border-radius: var(--r-plate);
}

/* fine brushed grain so the black isn't a flat fill */
.plate::before {
	content: '';
	position: absolute; inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: .5;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255,255,255,.018) 0 1px,
		transparent 1px 3px
	);
}

.engraved {
	color: var(--cut);
	text-shadow:
		0 -1px 0 rgba(0,0,0,.85),
		0 1px 0 rgba(255,255,255,.14);
}

.engraved-deep {
	color: var(--cut);
	text-shadow:
		0 -1px 1px rgba(0,0,0,.9),
		0 1px 0 rgba(255,255,255,.16),
		0 2px 3px rgba(0,0,0,.5);
}

/* countersunk flat-head screw, seen head on. The head is matte and flush, the
   sink is a hairline of shadow around it, and the slot is cut in: dark, with
   light catching its lower edge. Each corner is turned to its own angle. */
.screw {
	position: absolute;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: linear-gradient(180deg, #c3c0b8 0%, var(--screw) 100%);
	box-shadow:
		inset 0 0 0 .8px rgba(0,0,0,.35),
		0 0 0 1.5px #070707,
		0 0 0 2px rgba(255,255,255,.07),
		0 1px 1px 1.5px rgba(0,0,0,.5);
}
.screw::after {
	content: '';
	position: absolute; inset: 0; margin: auto;
	width: 8.5px; height: 1.8px;
	border-radius: 1px;
	transform: rotate(var(--turn, 28deg));
	background: #2a2924;
	box-shadow: 0 .7px 0 rgba(255,255,255,.3), inset 0 .5px 0 rgba(0,0,0,.6);
}

/* punched hanging hole */
.punch {
	position: relative;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow:
		inset 0 2px 3px rgba(0,0,0,.55),
		inset 0 -1px 0 rgba(255,255,255,.10),
		0 1px 0 rgba(255,255,255,.08);
}

/* =============================================================================
   Buttons

   Same language as the workspace: flat, small uppercase label, gentle lift on
   hover. The app never shouts with a button and neither should this.
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: var(--r-btn);
	cursor: pointer;
	text-decoration: none;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: transform .15s var(--ease), background .15s var(--ease),
	            border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.btn--primary {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--card);
}
.btn--primary:hover {
	background: var(--accent);
	border-color: var(--accent);
	transform: translateY(-1px);
	box-shadow: var(--shadow-lift);
}

.btn--ghost {
	background: var(--card);
	border-color: var(--rule);
	color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }

/* on the dark plate the same pair simply inverts */
.btn--onplate {
	background: #fff;
	border-color: #fff;
	color: #11151c;
}
.btn--onplate:hover {
	background: var(--manila);
	border-color: var(--manila);
	color: var(--manila-on);
	transform: translateY(-1px);
}

.btn--onplate-ghost {
	background: transparent;
	border-color: rgba(255,255,255,.28);
	color: #f2f1ee;
}
.btn--onplate-ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }

.btn--full { width: 100%; justify-content: center; padding: 15px 20px; }

/* =============================================================================
   Shelf-edge ticket — the card component
   ========================================================================== */

.ticket {
	position: relative;
	background: var(--card);
	border: 1px solid var(--rule-2);
	border-radius: var(--r-card);
	padding: 24px 22px 22px;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}


.ticket:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule); }

.ticket__code {
	font-family: var(--font);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--ink-3);
	text-transform: uppercase;
}

.ticket__title {
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: clamp(20px, 2.1vw, 24px);
	font-weight: 700;
	letter-spacing: -.014em;
	line-height: 1.18;
}

.ticket__body { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.62; }

/* manila tag variant, used where something is genuinely marked up */
.ticket--tag {
	background: linear-gradient(180deg, var(--manila-soft), var(--card) 62%);
	border-color: var(--manila-deep);
}


/* =============================================================================
   Header
   ========================================================================== */

.bar {
	position: sticky; top: 0; z-index: 100;
	background: var(--plate);
	color: var(--cut);
	box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 6px 18px -12px rgba(0,0,0,.6);
}
.bar__in {
	display: flex; align-items: center; gap: 18px;
	min-height: 66px;
}
.bar__mark { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.bar__mark img { height: 26px; width: auto; }

.bar__nav { display: flex; align-items: center; gap: 2px; }
.bar__nav a {
	position: relative;
	padding: 9px 13px;
	border-radius: 3px;
	text-decoration: none;
	color: var(--cut-dim);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .13em;
	transition: color .15s var(--ease), box-shadow .15s var(--ease);
}
.bar__nav a:hover { color: var(--cut); }
/* the channel deepens under the active item, as if it were cut further in */
.bar__nav a[aria-current="page"] {
	color: var(--cut);
	box-shadow: inset 0 2px 4px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.1);
	background: rgba(0,0,0,.28);
}

.bar__tools { display: flex; align-items: center; gap: 10px; }

.themetog {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	border: 1px solid #333;
	border-radius: 3px;
	background: linear-gradient(180deg, #232323, #131313);
	color: var(--cut-dim);
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
	transition: color .15s var(--ease), border-color .15s var(--ease);
}
.themetog:hover { color: var(--cut); border-color: #5a5a5a; }
.themetog svg { width: 17px; height: 17px; }
.themetog .i-sun { display: none; }
:root[data-theme="dark"] .themetog .i-sun { display: block; }
:root[data-theme="dark"] .themetog .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .themetog .i-sun { display: block; }
	:root:not([data-theme="light"]) .themetog .i-moon { display: none; }
}

.burger { display: none; width: 38px; height: 38px; border: 1px solid #333; border-radius: 3px; background: linear-gradient(180deg, #232323, #131313); color: var(--cut); cursor: pointer; }

@media (max-width: 940px) {
	.bar__nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch;
		padding: 10px var(--gutter) 20px;
		background: var(--plate);
		box-shadow: 0 18px 30px -18px rgba(0,0,0,.8);
	}
	.bar__nav.is-open { display: flex; }
	.bar__nav a { padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
	.burger { display: grid; place-items: center; }
}

/* =============================================================================
   Hero — the plate itself
   ========================================================================== */

.hero {
	position: relative;
	background:
		radial-gradient(120% 80% at 50% -10%, #1d1d1d 0%, transparent 60%),
		linear-gradient(180deg, #131313 0%, var(--plate) 40%, #060606 100%);
	color: var(--cut);
	overflow: hidden;
}
.hero::before {
	content: '';
	position: absolute; inset: 0; pointer-events: none;
	background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
/* the chamfer where the cutter entered the sheet */
.hero::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.85));
}

.hero__in {
	position: relative;
	padding: clamp(52px, 6.5vw, 96px) 0 0;
	text-align: center;
}


.hero__say {
	margin: 0 auto;
	max-width: 20ch;
	font-family: var(--font-display);
	font-size: clamp(33px, 5vw, 60px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.028em;
}

.hero__sub {
	margin: 22px auto 0;
	max-width: 58ch;
	color: #b0ada6;
	font-size: clamp(16.5px, 1.5vw, 19px);
	line-height: 1.6;
}

.hero__acts { margin-top: clamp(26px, 3vw, 36px); display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

.hero__meta {
	margin-top: 18px;
	color: #969289;
	font-size: 13.5px;
	letter-spacing: .01em;
}

/* deliberately cropped by the fold, so the page reads as having more below */
.hero__shot {
	margin: clamp(40px, 5vw, 68px) auto -10px;
	max-width: 1080px;
	padding: 10px 10px 0;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(180deg, #2b2b2b, #171717);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.14),
		0 -1px 0 rgba(255,255,255,.05),
		0 40px 80px -30px rgba(0,0,0,.9);
}
.hero__shot img { width: 100%; border-radius: 4px 4px 0 0; display: block; }

.hero__fix { position: absolute; inset: 0; pointer-events: none; }
.hero__fix .screw { top: 22px; }
.hero__fix .screw:nth-child(1) { left: 22px; --turn: 18deg; }
.hero__fix .screw:nth-child(2) { right: 22px; --turn: -42deg; }
.hero__fix .screw:nth-child(3) { top: auto; bottom: 22px; left: 22px; --turn: 63deg; }
.hero__fix .screw:nth-child(4) { top: auto; bottom: 22px; right: 22px; --turn: -9deg; }
@media (max-width: 700px) { .hero__fix { display: none; } }

/* =============================================================================
   Sections
   ========================================================================== */

.sec { padding: clamp(64px, 8.5vw, 118px) 0; }
.sec--tight { padding: clamp(38px, 4.6vw, 60px) 0; }
/* two tight sections in a row were stacking into a gap you could park in */
.sec--tight + .sec--tight { padding-top: 0; }
.sec--paper2 { background: var(--paper-2); border-block: 1px solid var(--rule-2); }

.sechead { max-width: 60ch; }
.sechead--mid { margin-inline: auto; text-align: center; }


.sechead h2 {
	font-family: var(--font-display);
	font-size: clamp(27px, 3.9vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
}

.sechead p { margin-top: 14px; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 18px); }
.sechead--mid p { max-width: 62ch; }

.grid { display: grid; gap: 18px; margin-top: clamp(34px, 4.5vw, 54px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* two phone shots side by side would be enormous at full width */
.grid--phones { max-width: 640px; margin-inline: auto; }

/* -- the shelf rail: a horizontal run of plates -------------------------- */

.rail {
	margin-top: clamp(34px, 4.5vw, 54px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	overflow: hidden;
}
.rail__cell {
	background: var(--card);
	padding: 22px 20px;
}
.rail__n {
	font-family: var(--font);
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 600;
	line-height: 1;
}
.rail__l { margin-top: 8px; font-family: var(--font); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* The lead heading inside a duo or a plate. Same voice as .sechead h2, but
   usable anywhere without the section wrapper. */
.h-lead {
	font-family: var(--font-display);
	font-size: clamp(27px, 3.9vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
}
.h-lead--centre { max-width: 18ch; margin-inline: auto; }

.stamp { font-family: var(--font); font-size: 13.5px; color: var(--ink-3); letter-spacing: .02em; }

/* -- split: copy beside a shot ------------------------------------------- */

.duo {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: center;
}
.duo--flip > *:first-child { order: 2; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } .duo--flip > *:first-child { order: 0; } }

.ticklist { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.ticklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 16px; color: var(--ink-2); }
.ticklist strong { color: var(--ink); font-weight: 600; }
.ticklist svg { width: 16px; height: 16px; margin-top: 4px; color: var(--manila-deep); }

/* -- screenshots sit in a plate frame ------------------------------------ */

.shot {
	margin: 0;
	background: var(--plate);
	padding: 10px;
	border-radius: 5px;
	box-shadow: var(--shadow-plate), var(--shadow-lift);
}
.shot img { border-radius: 2px; width: 100%; }
.shot figcaption {
	margin-top: 10px; padding: 0 4px 3px;
	font-family: var(--font);
	font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
	color: #9c988f;
}


/* =============================================================================
   Comparison
   A table, because that is what a comparison is. Not four cards pretending.
   ========================================================================== */

.vs {
	margin-top: clamp(30px, 4vw, 46px);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	overflow: hidden;
	background: var(--card);
}

.vs__row {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 1.15fr;
	gap: 0;
	border-top: 1px solid var(--rule-2);
	font-size: 15px;
}
.vs__row:first-child { border-top: 0; }
.vs__row > span { padding: 15px 18px; color: var(--ink-2); }
.vs__row > span:first-child { color: var(--ink); font-weight: 500; }

.vs__row--head {
	background: var(--paper-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: -.005em;
}
.vs__row--head > span { color: var(--ink); padding-block: 14px; }

/* the column that matters gets the manila card treatment, held all the way
   down so the eye tracks it as one field rather than seven highlights */
.vs__us {
	background: var(--manila-soft);
	color: var(--ink) !important;
	font-weight: 500;
	box-shadow: inset 1px 0 0 var(--manila-deep);
}
.vs__row--head .vs__us { background: var(--manila); color: var(--manila-on) !important; }

.vs__note {
	margin-top: 16px;
	color: var(--ink-3);
	font-size: 13.5px;
	max-width: 70ch;
}

@media (max-width: 860px) {
	.vs { border: 0; background: none; }
	.vs__row { grid-template-columns: 1fr; border: 1px solid var(--rule-2); border-radius: var(--r-card); margin-bottom: 12px; background: var(--card); }
	.vs__row--head { display: none; }
	.vs__row > span { border-top: 1px solid var(--rule-2); padding: 12px 16px; }
	.vs__row > span:first-child { border-top: 0; font-family: var(--font-display); font-weight: 700; }
	/* without the header row each cell has to say which column it is */
	.vs__row > span:nth-child(2)::before { content: 'Shared drive: '; color: var(--ink-3); }
	.vs__row > span:nth-child(3)::before { content: 'Per-seat tool: '; color: var(--ink-3); }
	.vs__row > span:nth-child(4)::before { content: 'Koloshare: '; color: var(--manila-deep); font-weight: 600; }
	.vs__us { box-shadow: none; border-radius: 0 0 var(--r-card) var(--r-card); }
}

/* =============================================================================
   Pricing
   ========================================================================== */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(34px, 4.5vw, 54px); align-items: start; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.plan { position: relative; background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-card); padding: 28px 26px 30px; }
.plan--best { border-width: 2px; border-color: var(--plate); box-shadow: 0 8px 18px -12px rgba(20,19,15,.5); }
.plan--best .plan__name { color: var(--ink); }

.plan__flag {
	position: absolute; top: -1px; right: 18px;
	padding: 5px 11px 6px;
	background: var(--manila);
	color: var(--manila-on);
	font-family: var(--font); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	border-radius: 0 0 3px 3px;
}
.plan__name { font-family: var(--font); font-size: 26px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.plan__price { margin-top: 12px; display: flex; align-items: baseline; gap: 7px; }
.plan__price b { font-family: var(--font); font-size: clamp(38px, 4.6vw, 50px); font-weight: 600; line-height: 1; }
.plan__price span { font-family: var(--font); font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.plan__for { margin-top: 10px; color: var(--ink-3); font-size: 14px; min-height: 2.9em; }
.plan ul { margin: 20px 0 24px; padding: 0; list-style: none; display: grid; gap: 11px; border-top: 1px solid var(--rule-2); padding-top: 20px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: var(--ink-2); }
.plan li svg { width: 14px; height: 14px; margin-top: 4px; color: var(--manila-deep); }
.plan .btn { width: 100%; justify-content: center; padding: 14px 18px; }

.billing { display: inline-flex; gap: 2px; padding: 3px; background: var(--rule-2); border-radius: 4px; margin-top: 22px; }
.billing button {
	padding: 9px 17px; border: 0; cursor: pointer; border-radius: 2px;
	background: transparent; color: var(--ink-2);
	font-family: var(--font); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
}
.billing button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20,19,15,.16); }
/* the yearly saving is said once, quietly, under the toggle: a stamp, not a tag */
.billing__note { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); letter-spacing: .02em; }

/* =============================================================================
   FAQ
   ========================================================================== */

.faq { margin-top: clamp(30px, 4vw, 46px); border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule-2); }
.faq summary {
	list-style: none; cursor: pointer;
	padding: 21px 44px 21px 0; position: relative;
	font-family: var(--font); font-size: clamp(18px, 2vw, 21px); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: ''; position: absolute; right: 6px; top: 50%;
	width: 13px; height: 2px; background: var(--ink-3);
	transform: translateY(-50%);
}
.faq summary::before {
	content: ''; position: absolute; right: 11.5px; top: 50%;
	width: 2px; height: 13px; background: var(--ink-3);
	transform: translateY(-50%);
	transition: opacity .18s var(--ease);
}
.faq details[open] summary::before { opacity: 0; }
.faq p { padding: 0 0 22px; color: var(--ink-2); max-width: 74ch; }

/* =============================================================================
   Close + footer
   ========================================================================== */

.close-plate {
	position: relative;
	margin: 0 var(--gutter) clamp(56px, 7vw, 90px);
	padding: clamp(48px, 7vw, 88px) clamp(26px, 5vw, 60px);
	text-align: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #1d1d1d 0%, var(--plate) 45%, #070707 100%);
	color: var(--cut);
	box-shadow: var(--shadow-plate), var(--shadow-lift);
	overflow: hidden;
}
.close-plate::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
}
.close-plate h2 {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(30px, 4.6vw, 52px);
	font-weight: 700; line-height: 1.06; letter-spacing: -.022em;
	max-width: 18ch; margin-inline: auto;
}
.close-plate p { position: relative; margin: 18px auto 0; max-width: 50ch; color: #a9a69f; }
.close-plate .acts { position: relative; margin-top: 30px; display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

.foot { background: var(--paper-2); border-top: 1px solid var(--rule-2); padding: clamp(44px, 5vw, 68px) 0 34px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__mark img { height: 24px; width: auto; }
.foot__blurb { margin-top: 14px; color: var(--ink-3); font-size: 14.5px; max-width: 34ch; }

/* Third-party badge in a monochrome footer. It arrives as a saturated orange
   block, which shouts louder than anything Koloshare puts on its own page, so it
   sits back at rest and comes fully forward on hover and focus. Nothing is
   recoloured or cropped: the badge is intact, just quieter until looked at. */
.foot__badge {
	display: inline-block;
	margin-top: 22px;
	line-height: 0;
	border-radius: 6px;
	opacity: .8;
	transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.foot__badge img { width: 168px; height: auto; display: block; }
.foot__badge:hover,
.foot__badge:focus-visible { opacity: 1; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
	.foot__badge { transition: none; }
	.foot__badge:hover, .foot__badge:focus-visible { transform: none; }
}
.foot h3 { font-family: var(--font); font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.foot ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.foot ul a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule-2); display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; color: var(--ink-3); font-size: 13.5px; }

/* =============================================================================
   Prose pages (legals, docs)
   ========================================================================== */

.page-plate { background: var(--plate); color: var(--cut); padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px); position: relative; overflow: hidden; }
.page-plate::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px); }
.page-plate h1 { position: relative; font-family: var(--font-display); font-size: clamp(32px, 5.2vw, 58px); font-weight: 600; text-transform: inherit; line-height: 1.03; max-width: 20ch; }
.page-plate p { position: relative; margin-top: 16px; color: #a9a69f; max-width: 60ch; }

.prose { padding: clamp(46px, 6vw, 76px) 0 clamp(60px, 7vw, 96px); }
.prose__in { max-width: 74ch; }
.prose h2 { font-family: var(--font); font-size: clamp(23px, 2.8vw, 31px); text-transform: uppercase; margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font); font-size: 20px; margin-top: 30px; }
.prose p, .prose li { color: var(--ink-2); margin-top: 15px; }
.prose ul, .prose ol { margin-top: 14px; padding-left: 22px; }
.prose li { margin-top: 9px; }
.prose a { color: var(--card); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
/* A manila tag tied to the page: reinforced eyelet, string, and the tag itself.
   Not a coloured stripe down one edge. */
.prose__note {
	position: relative;
	margin-top: 34px;
	padding: 24px 24px 22px 46px;
	background: var(--manila-soft);
	border: 1px solid var(--manila-deep);
	border-radius: var(--r-card);
}
.prose__note::before {
	content: '';
	position: absolute; left: 17px; top: 26px;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 2px var(--manila-deep);
}
.prose__note::after {
	content: '';
	position: absolute; left: 22px; top: 43px; bottom: 20px;
	width: 1px;
	background: repeating-linear-gradient(180deg, var(--manila-deep) 0 3px, transparent 3px 6px);
	opacity: .7;
}
.prose__note p { margin-top: 0; color: var(--manila-ink); }

.tablewrap { overflow-x: auto; margin-top: 22px; }
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule-2); }
th { font-family: var(--font); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
td { color: var(--ink-2); }

/* =============================================================================
   Motion — one grammar: things get cut in, once, on arrival
   ========================================================================== */

.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.rise { opacity: 1; transform: none; transition: none; }
	.btn, .ticket { transition: none; }
	.btn:hover, .ticket:hover { transform: none; }
}

@media print {
	.bar, .close-plate, .foot__base { display: none; }
	body { background: #fff; color: #000; }
}

/* The footer wordmark is black artwork, so it disappears against the dark
   ground. Invert it rather than shipping a second file. */
.foot__mark img { transition: filter .2s var(--ease); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .foot__mark img { filter: invert(1); }
}
:root[data-theme="dark"] .foot__mark img { filter: invert(1); }