/**
 * "Dagslys" — a per-app skin for tk_app landing pages.
 *
 * Loaded only for apps whose _tk_app_skin meta is "daylight", so the rest of
 * the site keeps the porcelain/royal-blue identity. This sheet paints one
 * product's own identity on top of the theme: warm daylight glass, green as
 * the only accent, and a single moving element (the notch in the hero stage).
 *
 * Everything is scoped under body.tk-skin-daylight. Nothing here may leak to
 * another app page — that is the whole point of the file being separate.
 *
 * @package Thomas_Kramer
 */

body.tk-skin-daylight {
	--tk-day-grad: linear-gradient(135deg, #e9eef7 0%, #f6f7f4 46%, #fbf1e8 100%);
	--tk-day-blue: rgba(96, 150, 235, 0.32);
	--tk-day-amber: rgba(240, 164, 96, 0.28);
	--tk-day-ink: #14161c;
	--tk-day-ink-55: rgba(20, 22, 28, 0.55);
	--tk-day-ink-40: rgba(20, 22, 28, 0.42);
	--tk-day-line: rgba(20, 22, 28, 0.09);
	--tk-day-green: #1f9d55;
	--tk-day-green-lit: #35d07a;
	--tk-day-green-btn: linear-gradient(180deg, #27b366, #1b8c4a);
	--tk-day-blue-ok: #0a7cff;
	--tk-day-card: 0 1px 2px rgba(20, 22, 28, 0.06), inset 0 0 0 1px rgba(20, 22, 28, 0.09);
	/* The macOS mockups are the one place the site's own typeface would lie:
	   they are pictures of an Apple screen, so they use the system stack. */
	--tk-day-ui: -apple-system, 'SF Pro Text', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

body.tk-skin-daylight .tk-app-hero {
	padding: 112px 24px 0;
	background: var(--tk-day-grad);
	color: var(--tk-day-ink);
}

/* The two colour fields that make the gradient feel lit rather than printed. */
body.tk-skin-daylight .tk-app-hero::before,
body.tk-skin-daylight .tk-app-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

body.tk-skin-daylight .tk-app-hero::before {
	left: -8%;
	top: -16%;
	width: 56%;
	height: 78%;
	background: radial-gradient(circle, var(--tk-day-blue), transparent 66%);
	filter: blur(34px);
}

body.tk-skin-daylight .tk-app-hero::after {
	right: -7%;
	bottom: 8%;
	width: 54%;
	height: 76%;
	background: radial-gradient(circle, var(--tk-day-amber), transparent 66%);
	filter: blur(36px);
}

body.tk-skin-daylight .tk-app-hero__grid {
	position: relative;
	z-index: 1;
}

/* Stage layout: centred column, product shot full width underneath. */
body.tk-skin-daylight .tk-app-hero--stage .tk-app-hero__content {
	max-width: 720px;
	margin: 0 auto;
	align-items: center;
	text-align: center;
	/* Tight, because everything in this column has to fit above the fold with
	   the button: name, promise, price, CTA, and what it costs to be wrong. */
	gap: 14px;
}

/* A three-beat headline does not need the site's full display size - at 84px
   it alone pushed the button off the first screen. */
body.tk-skin-daylight .tk-app-hero--stage h1.tk-app-hero__title {
	font-size: clamp(36px, 5.2vw, 66px);
	line-height: 1.05;
}

body.tk-skin-daylight .tk-app-hero__back {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(20, 22, 28, 0.08);
	color: var(--tk-day-ink-55);
}

/* Wordmark lockup — the icon language from the design round, in CSS so the
   page needs no image before the real icon is drawn. When _tk_app_icon is set
   the tile is replaced by that image and the arcs are hidden. */
body.tk-skin-daylight .tk-lockup {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

body.tk-skin-daylight .tk-lockup__mark {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tk-day-grad);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 3px 8px rgba(20, 24, 34, 0.2);
}

/* A real icon brings its own edge; the placeholder's white inset ring would
   sit on top of it as a rim. */
body.tk-skin-daylight .tk-lockup__mark:has(img) {
	background: none;
	box-shadow: 0 3px 10px rgba(20, 24, 34, 0.22);
}

body.tk-skin-daylight .tk-lockup__mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Two open arcs, the same green as the waveform in the app. */
body.tk-skin-daylight .tk-lockup__arc {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1.6px solid var(--tk-day-green);
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
}

body.tk-skin-daylight .tk-lockup__arc--in {
	width: 21px;
	height: 21px;
	margin: -10.5px 0 0 -10.5px;
	opacity: 0.6;
}

body.tk-skin-daylight .tk-lockup__arc--out {
	width: 29px;
	height: 29px;
	margin: -14.5px 0 0 -14.5px;
	opacity: 0.38;
}

body.tk-skin-daylight .tk-lockup__name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--tk-day-ink);
}

body.tk-skin-daylight .tk-lockup__name em {
	font-style: normal;
	color: var(--tk-day-green);
}

body.tk-skin-daylight .tk-app-hero__kicker {
	margin: 0;
	font-size: 13.5px;
	color: var(--tk-day-ink-40);
}

body.tk-skin-daylight .tk-app-hero .tk-app-hero__title {
	margin: 0;
	color: var(--tk-day-ink);
	text-wrap: balance;
}

body.tk-skin-daylight .tk-hero__sub {
	color: var(--tk-day-ink-55);
}

/* Price sits with the buttons, not above them: it is part of the decision,
   not part of the pitch. */
body.tk-skin-daylight .tk-app-hero__price {
	margin: 0;
	font-family: var(--tk-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--tk-day-ink-55);
	background: rgba(255, 255, 255, 0.66);
	border-radius: 999px;
	padding: 7px 15px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(20, 24, 34, 0.07);
}

body.tk-skin-daylight .tk-hero__actions {
	margin-top: 2px;
	gap: 18px;
}

/* Primary button: the app's green, not the site's ink. */
body.tk-skin-daylight .tk-hero__actions .tk-btn--dark,
body.tk-skin-daylight .tk-app-pricing .tk-lic-plan--featured .tk-lic-plan__cta,
body.tk-skin-daylight .tk-buybar__cta {
	background: var(--tk-day-green-btn);
	border-color: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 10px 22px rgba(31, 157, 85, 0.32);
}

body.tk-skin-daylight .tk-hero__actions .tk-btn--dark:hover,
body.tk-skin-daylight .tk-app-pricing .tk-lic-plan--featured .tk-lic-plan__cta:hover,
body.tk-skin-daylight .tk-buybar__cta:hover {
	background: linear-gradient(180deg, #2cc472, #1f9d55);
	color: #fff;
}

body.tk-skin-daylight .tk-app-hero__soft {
	color: var(--tk-day-ink-55);
}

body.tk-skin-daylight .tk-app-hero__soft:hover {
	color: var(--tk-day-ink);
}

/* Risk reversal, immediately under the buttons — the three sentences that
   answer "what does this cost me if it turns out not to work". */
body.tk-skin-daylight .tk-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

body.tk-skin-daylight .tk-hero__trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13.5px;
	color: var(--tk-day-ink-55);
}

body.tk-skin-daylight .tk-hero__trust li::before {
	content: '';
	flex: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgba(31, 157, 85, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.2 4 7.4 8.4 2.6' fill='none' stroke='%231f9d55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

body.tk-skin-daylight .tk-app-hero__meta {
	color: var(--tk-day-ink-40);
}

/* ---------------------------------------------------------------------------
   The stage: a Mac desktop where the notch becomes the microphone panel.
   The only thing on the page that moves.

   Lengths are the design's pixel values divided by ten: .tk-stage is the
   query container, so at the reference width of 1000 px one cqw is one pixel
   ten times over. The panel keyframes are the exception - they animate
   against .tk-stage__notch, so they are percentages of that 394 x 37 box.
   --------------------------------------------------------------------------- */

body.tk-skin-daylight .tk-stage-wrap {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 38px auto 0;
	padding: 0 0 0;
}

.tk-stage {
	container-type: inline-size;
	position: relative;
	/* .tk-hero centres its text. A screenshot of a document must not inherit
	   that: nothing on a real Mac is centre-aligned inside a mail window. */
	text-align: left;
	aspect-ratio: 1000 / 520;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
	background: linear-gradient(160deg, #dfe6f1, #f3f1ec);
	box-shadow: 0 30px 60px rgba(20, 24, 34, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	font-family: var(--tk-day-ui);
	color: var(--tk-day-ink);
}

/* Menu bar */
.tk-stage__bar {
	position: absolute;
	inset: 0 0 auto 0;
	height: 3cqw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.6cqw;
	background: rgba(255, 255, 255, 0.5);
	font-size: 1.2cqw;
	font-weight: 500;
	color: rgba(20, 22, 28, 0.72);
}

.tk-stage__menu {
	display: flex;
	align-items: center;
	gap: 1.8cqw;
}

.tk-stage__status {
	display: flex;
	align-items: center;
	gap: 1.4cqw;
}

.tk-stage__menu b {
	font-weight: 700;
}

/* Bobby sits in the menu bar the way any running app does, ringed in green
   because the app is listening. */
.tk-stage__mbicon {
	display: block;
	flex: none;
	width: 1.7cqw;
	height: 1.7cqw;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 0.15cqw rgba(31, 157, 85, 0.9);
}

.tk-stage__mbicon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No portrait set: the ring on its own still reads as a status light. */
.tk-stage__mbicon--dot {
	background: rgba(31, 157, 85, 0.16);
}

/* Notch: the black hardware cut-out never moves. What grows out from behind
   it, to both sides, is the panel. */
.tk-stage__notch {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 39.4cqw;
	height: 3.7cqw;
	pointer-events: none;
}

.tk-stage__wing {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	/* Open: the whole 394 x 37. tk-stage-wing shrinks it from here. */
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 0 0 1.5cqw 1.5cqw;
	/* Clips both readouts, so they are wiped in by the widening panel instead
	   of fading in over bare desktop. */
	overflow: hidden;
	background: rgba(255, 255, 255, 0.66);
	box-shadow: inset 0 -0.1cqw 0 rgba(255, 255, 255, 0.7);
	animation: tk-stage-wing 3.6s cubic-bezier(0.3, 1.1, 0.4, 1) infinite;
}

/* Drawn over the panel, because the cut-out is hardware and nothing overlaps
   it. Its two top corners curve outwards into the menu bar, which no
   border-radius can express - hence the path. */
.tk-stage__cut {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 48.223%;
	height: auto;
	display: block;
}

.tk-stage__hud {
	position: absolute;
	top: 0;
	/* Sized against the notch rather than the panel it sits in: the panel's
	   width is what animates, and the readouts must not stretch with it. */
	width: 11.2cqw;
	height: 3cqw;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.9cqw;
	animation: tk-stage-in 3.6s ease-out infinite;
}

.tk-stage__hud--left {
	left: 0;
	padding-left: 0.5cqw;
}

/* Anchored to the panel's right edge, so it travels outwards as it opens. */
.tk-stage__hud--right {
	right: 0;
	justify-content: flex-end;
	padding-right: 0.8cqw;
}

.tk-stage__label {
	font-size: 1.25cqw;
	font-weight: 600;
	letter-spacing: -0.012em;
	white-space: nowrap;
	color: var(--tk-day-ink);
}

.tk-stage__pip {
	display: block;
	flex: none;
	width: 2.2cqw;
	height: 2.2cqw;
	border-radius: 50%;
	overflow: hidden;
	background: #e6eaf1;
	box-shadow: inset 0 0 0 0.1cqw rgba(255, 255, 255, 0.9);
}

.tk-stage__pip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tk-stage__pip--dot {
	position: relative;
	background: rgba(31, 157, 85, 0.18);
}

.tk-stage__pip--dot::after {
	content: '';
	position: absolute;
	inset: 32%;
	border-radius: 50%;
	background: var(--tk-day-green);
}

.tk-stage__wave {
	display: flex;
	align-items: center;
	gap: 0.25cqw;
	height: 1.2cqw;
}

.tk-stage__wave i {
	display: block;
	width: 0.25cqw;
	height: 100%;
	border-radius: 0.2cqw;
	background: var(--tk-day-green);
	animation: tk-stage-tick 0.78s ease-in-out infinite;
}

.tk-stage__wave i:nth-child(2) { animation-delay: 0.08s; }
.tk-stage__wave i:nth-child(3) { animation-delay: 0.16s; }
.tk-stage__wave i:nth-child(4) { animation-delay: 0.24s; }
.tk-stage__wave i:nth-child(5) { animation-delay: 0.32s; }
.tk-stage__wave i:nth-child(6) { animation-delay: 0.4s; }
.tk-stage__wave i:nth-child(7) { animation-delay: 0.48s; }
.tk-stage__wave i:nth-child(8) { animation-delay: 0.56s; }

.tk-stage__stop {
	flex: none;
	width: 0.5cqw;
	height: 0.5cqw;
	border-radius: 50%;
	background: rgba(12, 14, 18, 0.4);
	box-shadow: inset 0 0 0 0.05cqw rgba(255, 255, 255, 0.35);
}

/* The document the text lands in. It does not animate: the sentence is the
   one thing on the page a reader is meant to be able to finish. */
.tk-stage__doc {
	position: absolute;
	left: 11cqw;
	right: 11cqw;
	top: 11.2cqw;
	bottom: 0;
	padding: 3.4cqw 4cqw;
	border-radius: 1.4cqw 1.4cqw 0 0;
	background: #fff;
	box-shadow: 0 2.4cqw 5.4cqw rgba(28, 34, 48, 0.2), inset 0 0 0 1px rgba(20, 22, 28, 0.08);
	overflow: hidden;
}

.tk-stage__to {
	margin: 0 0 1.8cqw;
	font-size: 1.05cqw;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(20, 22, 28, 0.35);
}

.tk-stage__text {
	margin: 0;
	max-width: 56cqw;
	font-size: 1.9cqw;
	line-height: 1.75;
	color: var(--tk-day-ink);
	text-wrap: pretty;
}

.tk-stage__caret {
	display: inline-block;
	width: 0.25cqw;
	height: 2cqw;
	margin-left: 0.3cqw;
	vertical-align: -0.4cqw;
	background: var(--tk-day-green);
	animation: tk-stage-caret 1s steps(1, end) infinite;
}

/* 190 x 30 shut, 394 x 37 open, as percentages of .tk-stage__notch. The panel
   is transparent when shut, so the cut-out is all that is left of it. */
@keyframes tk-stage-wing {
	0%, 5%    { width: 48.223%; height: 81.081%; background: rgba(255, 255, 255, 0); }
	11%       { width: 83.756%; height: 94.595%; background: rgba(255, 255, 255, 0.5); }
	15%, 86%  { width: 100%;    height: 100%;    background: rgba(255, 255, 255, 0.66); }
	94%       { width: 63.452%; height: 86.486%; background: rgba(255, 255, 255, 0.24); }
	100%      { width: 48.223%; height: 81.081%; background: rgba(255, 255, 255, 0); }
}

@keyframes tk-stage-in {
	0%, 12%   { opacity: 0; }
	20%, 88%  { opacity: 1; }
	94%, 100% { opacity: 0; }
}

@keyframes tk-stage-tick {
	0%, 100% { transform: scaleY(0.28); }
	50%      { transform: scaleY(1); }
}

@keyframes tk-stage-caret {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Answer block, features, how-it-works
   --------------------------------------------------------------------------- */

body.tk-skin-daylight .tk-app-answer {
	/* One gradient, one block: restarting the 135deg ramp in the next section
	   drew a visible seam straight across the page. */
	background: #fff;
}

body.tk-skin-daylight .tk-app-answer__facts {
	background: rgba(255, 255, 255, 0.72);
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: var(--tk-day-card);
}

/* Section headings are centred across this page; the how-it-works heading
   inherited the theme's left-aligned section title and broke the rhythm. */
body.tk-skin-daylight .tk-app-how__title,
body.tk-skin-daylight .tk-app-specs__title,
body.tk-skin-daylight .tk-app-faq__title {
	text-align: center;
}

/* Six benefit cards in two columns is three screens of scrolling. Three
   columns is one glance. Locked at three rather than auto-fit: auto-fit
   picks a column count from the viewport, so a wide display would reflow
   nine cards into 4+4+1 and orphan the last one. */
body.tk-skin-daylight .tk-app-features .tk-card-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* The skin's selector outranks the shared breakpoints in theme.css, so the
   step down has to be repeated here at the same widths. */
@media (max-width: 960px) {
	body.tk-skin-daylight .tk-app-features .tk-card-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	body.tk-skin-daylight .tk-app-features .tk-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Three steps as cards, each with its own glyph, in the order the app
   actually happens. */
body.tk-skin-daylight .tk-app-how__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	counter-reset: tk-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.tk-skin-daylight .tk-app-how__list .process-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 24px 22px;
	background: #fff;
	border: 0;
	border-radius: 14px;
	box-shadow: var(--tk-day-card);
}

body.tk-skin-daylight .tk-app-how__list .process-num {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(31, 157, 85, 0.14);
	box-shadow: inset 0 0 0 1px rgba(31, 157, 85, 0.35);
	color: var(--tk-day-green);
	font-family: var(--tk-font-mono);
	font-size: 11px;
	font-weight: 600;
}

body.tk-skin-daylight .tk-app-how__list h3 {
	margin: 0;
	font-size: 16px;
	letter-spacing: -0.01em;
}

body.tk-skin-daylight .tk-app-how__list p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tk-day-ink-55);
}

body.tk-skin-daylight .tk-app-features .tk-card,
body.tk-skin-daylight .tk-app-guides .tk-card {
	background: #f7f8fa;
	border: 0;
	box-shadow: inset 0 0 0 1px rgba(20, 22, 28, 0.07);
}

/* The tag is a chip, not a highlighter stroke: as a flex item in the card's
   column it stretched to the full width and read as a smudge. */
body.tk-skin-daylight .tk-app-features .tk-card__tag,
body.tk-skin-daylight .tk-app-guides .tk-card__tag {
	align-self: flex-start;
	width: fit-content;
	padding: 4px 9px;
	border-radius: 999px;
	color: var(--tk-day-green);
	background: rgba(31, 157, 85, 0.1);
	border-color: transparent;
}

/* ---------------------------------------------------------------------------
   Proof band — the differentiator, on dark, where it cannot be skimmed past
   --------------------------------------------------------------------------- */

.tk-proof {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 84px 24px;
	background: #14161c;
	color: #fff;
	font-family: var(--tk-font-sans);
}

.tk-proof::before {
	content: '';
	position: absolute;
	left: -6%;
	top: -30%;
	width: 44%;
	height: 150%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(31, 157, 85, 0.22), transparent 66%);
	filter: blur(40px);
	pointer-events: none;
}

.tk-proof__inner {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 64px;
	align-items: center;
}

.tk-proof__kicker {
	margin: 0 0 16px;
	font-family: var(--tk-font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tk-day-green-lit);
}

.tk-proof__title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.14;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: #fff;
	text-wrap: balance;
}

.tk-proof__text {
	margin: 18px 0 0;
	max-width: 470px;
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.58);
	text-wrap: pretty;
}

.tk-proof__points {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.tk-proof__points li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.tk-proof__points li::before {
	content: '';
	flex: none;
	margin-top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tk-day-green-lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.2 4 7.4 8.4 2.6' fill='none' stroke='%2308120c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

.tk-proof__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.tk-proof__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.tk-proof__row:last-of-type {
	padding-bottom: 0;
	border-bottom: 0;
}

.tk-proof__row dt {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
}

.tk-proof__row dd {
	margin: 0;
	font-family: var(--tk-font-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	text-align: right;
}

/* A row whose value reads as "off" is drawn as off. */
.tk-proof__row--off dt {
	color: rgba(255, 255, 255, 0.45);
}

.tk-proof__row--off dd {
	color: rgba(255, 255, 255, 0.28);
}

.tk-proof__note {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.4);
	text-wrap: pretty;
}

@media (max-width: 900px) {
	.tk-proof {
		padding: 64px 24px;
	}

	.tk-proof__inner {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

/* ---------------------------------------------------------------------------
   Pricing section (TK Licensing renders the block; this places and dresses it)
   --------------------------------------------------------------------------- */

body.tk-skin-daylight .tk-app-pricing {
	background: var(--tk-day-grad);
	position: relative;
	overflow: hidden;
}

body.tk-skin-daylight .tk-app-pricing::before {
	content: '';
	position: absolute;
	right: -8%;
	top: -24%;
	width: 48%;
	height: 140%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--tk-day-amber), transparent 66%);
	filter: blur(36px);
	pointer-events: none;
}

body.tk-skin-daylight .tk-app-pricing > * {
	position: relative;
}

body.tk-skin-daylight .tk-app-pricing__head {
	max-width: 620px;
	margin: 0 auto 34px;
	text-align: center;
}

body.tk-skin-daylight .tk-app-pricing__intro {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tk-day-ink-55);
	text-wrap: pretty;
}

body.tk-skin-daylight .tk-lic-plan {
	background: #fff;
	box-shadow: var(--tk-day-card);
}

body.tk-skin-daylight .tk-lic-plan--featured {
	box-shadow: 0 10px 26px rgba(31, 157, 85, 0.14), inset 0 0 0 1.5px var(--tk-day-green);
}

body.tk-skin-daylight .tk-lic-plan__badge {
	background: rgba(31, 157, 85, 0.12);
	color: var(--tk-day-green);
}

body.tk-skin-daylight .tk-lic-plan__features li::before,
body.tk-skin-daylight .tk-lic-trust li::before {
	color: var(--tk-day-green);
}

/* The cheaper plan gets a quiet button. Two solid buttons side by side make
   the reader choose a colour rather than a plan. */
body.tk-skin-daylight .tk-lic-plan:not(.tk-lic-plan--featured) .tk-lic-plan__cta {
	background: rgba(20, 22, 28, 0.05);
	color: var(--tk-day-ink);
	box-shadow: inset 0 0 0 1px rgba(20, 22, 28, 0.12);
}

body.tk-skin-daylight .tk-lic-plan:not(.tk-lic-plan--featured) .tk-lic-plan__cta:hover {
	background: rgba(20, 22, 28, 0.09);
	color: var(--tk-day-ink);
}

body.tk-skin-daylight .tk-lic-form button {
	background: var(--tk-day-green-btn);
	border-color: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 8px 18px rgba(31, 157, 85, 0.3);
}

body.tk-skin-daylight .tk-lic-form button:hover {
	background: linear-gradient(180deg, #2cc472, #1f9d55);
}

/* ---------------------------------------------------------------------------
   Long read, specs, FAQ, closing card
   --------------------------------------------------------------------------- */

/* The long read is the only section the theme renders as a bare blog post:
   760 px of default prose dropped into a page that is 1120 px of cards
   everywhere else. Widen the section so its heading keeps the page's rhythm,
   and keep the reading measure on the text itself. */
body.tk-skin-daylight .tk-entry {
	max-width: 1120px;
}

body.tk-skin-daylight .tk-entry__content {
	max-width: 760px;
	margin-inline: auto;
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--tk-day-ink-55);
}

body.tk-skin-daylight .tk-entry__content h2 {
	margin: 46px 0 14px;
	font-size: clamp(22px, 2.4vw, 28px);
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--tk-day-ink);
}

body.tk-skin-daylight .tk-entry__content > *:first-child {
	margin-top: 0;
}

body.tk-skin-daylight .tk-entry__content p {
	margin: 0 0 18px;
}

/* Same table as the specs section, so the two read as one document rather
   than as a styled page with a plain one glued underneath. */
body.tk-skin-daylight .tk-entry__content table {
	width: 100%;
	margin: 24px 0 28px;
	border-collapse: collapse;
	font-size: 15.5px;
}

body.tk-skin-daylight .tk-entry__content th,
body.tk-skin-daylight .tk-entry__content td {
	padding: 13px 16px 13px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--tk-day-line);
}

body.tk-skin-daylight .tk-entry__content th {
	font-weight: 600;
	color: var(--tk-day-ink);
}

/* A numbered list in a pipeline description is a sequence of steps, not a
   bullet list that happens to count. */
body.tk-skin-daylight .tk-entry__content ol {
	counter-reset: tk-step;
	list-style: none;
	margin: 22px 0 28px;
	padding: 0;
	display: grid;
	gap: 8px;
}

body.tk-skin-daylight .tk-entry__content ol > li {
	counter-increment: tk-step;
	position: relative;
	margin: 0;
	padding: 12px 18px 12px 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: var(--tk-day-card);
}

body.tk-skin-daylight .tk-entry__content ol > li::before {
	content: counter(tk-step);
	position: absolute;
	left: 14px;
	top: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--tk-day-green);
	background: rgba(31, 157, 85, 0.12);
}

body.tk-skin-daylight .tk-entry__content ul {
	margin: 18px 0 24px;
	padding-left: 20px;
}

body.tk-skin-daylight .tk-entry__content li {
	margin-bottom: 6px;
}

/* Every guide opens by answering its own headline before anything else. The
   block is there so a reader who came from a search result can stop after one
   paragraph - and so the answer is the passage an AI summary lifts. */
body.tk-skin-daylight .tk-entry__content .tk-answer-first {
	margin: 0 0 28px;
	padding: 18px 22px;
	border-radius: 14px;
	background: rgba(31, 157, 85, 0.07);
	box-shadow: inset 0 0 0 1px rgba(31, 157, 85, 0.16);
	font-size: 18px;
	line-height: 1.62;
	color: var(--tk-day-ink);
}

/* The heading above this table is centred across the section's full 1120 px,
   but the table caps out at 760 - so left-aligned it sat 180 px to the left
   of its own title and read as a layout bug. */
body.tk-skin-daylight .tk-app-specs__table {
	margin-inline: auto;
}

body.tk-skin-daylight .tk-app-specs__table th {
	color: var(--tk-day-ink);
}

body.tk-skin-daylight .tk-faq-acc__item summary::marker,
body.tk-skin-daylight .tk-faq-acc__item summary::-webkit-details-marker {
	color: var(--tk-day-green);
}

body.tk-skin-daylight .tk-cta--dark {
	background: #14161c;
}

body.tk-skin-daylight .tk-cta--dark .tk-btn--white:hover {
	color: var(--tk-day-green);
}

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tk-stage__wing,
	.tk-stage__hud,
	.tk-stage__caret,
	.tk-stage__wave i {
		animation: none !important;
	}

	/* Frozen mid-dictation, which is the state the picture is about anyway:
	   panel open, both readouts lit. */
	.tk-stage__wing {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.66);
	}

	.tk-stage__hud {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
	body.tk-skin-daylight .tk-app-hero {
		padding: 104px 20px 0;
	}

	body.tk-skin-daylight .tk-stage-wrap {
		margin-top: 30px;
	}

	/* Stacked, the ticks have to line up under each other - centring each row
	   individually makes the column look ragged. */
	body.tk-skin-daylight .tk-hero__trust {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-inline: auto;
		gap: 8px;
	}
}

/* Below this the mockup stops being readable as a screen; it becomes a
   texture. Keeping the notch and the document, dropping the body copy, is
   more honest than shrinking 11px type to 5px. */
@media (max-width: 560px) {
	.tk-stage {
		aspect-ratio: 1000 / 620;
	}

	/* The panel has to grow faster than the stage shrinks - at 390 px an
	   unscaled 394/1000 notch would set "Lytter" in 5 px type - so everything
	   inside it is scaled by the same 580/394. */
	.tk-stage__notch {
		width: 58cqw;
		height: 5.4cqw;
	}

	.tk-stage__hud {
		width: 16.5cqw;
		height: 4.4cqw;
		gap: 1.3cqw;
	}

	.tk-stage__hud--left {
		padding-left: 0.75cqw;
	}

	.tk-stage__hud--right {
		padding-right: 1.2cqw;
	}

	.tk-stage__pip {
		width: 3.2cqw;
		height: 3.2cqw;
	}

	.tk-stage__wave {
		height: 1.8cqw;
		gap: 0.37cqw;
	}

	.tk-stage__wave i {
		width: 0.37cqw;
	}

	.tk-stage__stop {
		width: 0.74cqw;
		height: 0.74cqw;
	}

	.tk-stage__bar {
		height: 4.4cqw;
	}

	.tk-stage__mbicon {
		width: 2.5cqw;
		height: 2.5cqw;
	}

	/* The wider panel now reaches where "Arkiv" and "Redigér" used to sit. A
	   real menu bar drops what will not fit too, so only the app name stays. */
	.tk-stage__menu span {
		display: none;
	}

	.tk-stage__doc {
		left: 6cqw;
		right: 6cqw;
		top: 16cqw;
		padding: 5cqw 5cqw;
	}

	.tk-stage__text {
		font-size: 3.1cqw;
		max-width: none;
	}

	.tk-stage__to {
		font-size: 2cqw;
		margin-bottom: 3cqw;
	}

	.tk-stage__label {
		font-size: 2cqw;
	}

	.tk-stage__bar {
		font-size: 2cqw;
	}

	.tk-stage__caret {
		width: 0.4cqw;
		height: 3.2cqw;
		vertical-align: -0.6cqw;
	}
}