/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ─────────────────────────────────────────────────────────────
   threewordshare — "Billboard" design language
   Ported verbatim from the Claude Design handoff bundle.
   Tokens: paper #F5F3F4 · ink #0B090A · accent #BA181B · silver #B1A7A6
   No border-radius. No shadows (except modal scrim). No gradients.
   ───────────────────────────────────────────────────────────── */

:root {
	--acc: #ba181b;
	--ink: #0b090a;
	--paper: #f5f3f4;
	--grey: #6f6968;
	--silver: #b1a7a6;
	--dust: #d3d3d3;

	/* Spring curves, generated by Motion's CSS spring generator rather than
	   hand-tuned cubic-beziers. A cubic-bezier cannot overshoot and settle, so
	   everything eased with one arrives and stops dead. These are real spring
	   physics sampled into linear(), which is duration-independent: the curve
	   is normalised 0..1, so an element can set its own duration and still get
	   the settle. */

	/* bounce 0.28. The reel landing on a word: overshoots, rocks back, stops.
	   This is the moment the product exists for, so it gets the loudest curve
	   in the file. */
	--ease-settle: linear(
		0,
		0.0378,
		0.1304,
		0.2523,
		0.3847,
		0.5147,
		0.6339,
		0.7376,
		0.8239,
		0.8927,
		0.9453,
		0.9835,
		1.0096,
		1.026,
		1.0349,
		1.0382,
		1.0377,
		1.0347,
		1.0303,
		1.0253,
		1.0202,
		1.0155,
		1.0113,
		1.0078,
		1.0049,
		1.0027,
		1.0011,
		0.9999,
		0.9992,
		1
	);

	/* bounce 0.45 at 0.2s. The click when a word locks into place: fast and
	   visibly springy, like a detent. */
	--ease-snap: linear(
		0,
		0.2544,
		0.6825,
		0.9908,
		1.1163,
		1.1146,
		1.0635,
		1.0154,
		0.9897,
		0.9841,
		0.9889,
		0.9957,
		1.0002,
		1.0019,
		1.0018,
		1.0009,
		1.0002,
		1
	);

	/* bounce 0.15. Entrances and panels: enough life to read as physical,
	   not enough to draw attention to itself. */
	--ease-rise: linear(
		0,
		0.0663,
		0.2105,
		0.3763,
		0.5332,
		0.6669,
		0.7733,
		0.8533,
		0.9107,
		0.9499,
		0.9754,
		0.9911,
		1,
		1.0044,
		1.0061,
		1.0062,
		1.0055,
		1.0045,
		1.0035,
		1.0026,
		1.0018,
		1.0012,
		1.0008,
		1,
		1
	);
}

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Archivo', sans-serif;
}
a {
	color: inherit;
}

/* Text selection is left alone on purpose. Disabling it page-wide looked more
   app-like, but it also meant the three words, the unrecoverable secret phrase
   and the back-office tables could not be selected or copied by hand. */

/* Smooth-scroll in-page nav anchors (HOW IT WORKS / THE 4TH WORD / PRICING)
   instead of jumping; offset targets so the sticky masthead doesn't cover them. */
html {
	scroll-behavior: smooth;
}
#top,
#how,
#fourth,
#pricing {
	scroll-margin-top: 0px;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ===========================================================
   LANDING PAGE  (route "/")
   =========================================================== */
.disp {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.92;
	letter-spacing: 0.005em;
}

/* masthead */
.mast {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: baseline;
	gap: 26px;
	padding: 18px 36px 14px;
	border-bottom: 3px solid var(--ink);
	background: var(--paper);
}
.brand {
	font-weight: 800;
	letter-spacing: 0.3em;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.brand .dot {
	color: var(--acc);
}
.nav {
	margin-left: auto;
	display: flex;
	gap: 24px;
	align-items: baseline;
}
.nav a {
	font-size: 11.5px;
	letter-spacing: 0.18em;
	font-weight: 600;
	color: var(--grey);
	text-decoration: none;
	transition: color 0.15s;
}
.nav a:hover {
	color: var(--ink);
}
.nav a.cta {
	color: #fff;
	background: var(--acc);
	padding: 8px 14px;
	letter-spacing: 0.14em;
	white-space: nowrap;
}
.nav a.cta:hover {
	filter: brightness(0.85);
	color: #fff;
}

/* hero */
.hero {
	padding: 64px 36px 30px;
}
.kicker {
	font-size: 11px;
	letter-spacing: 0.26em;
	font-weight: 700;
	color: var(--grey);
	margin-bottom: 18px;
}
.hero h1 {
	margin: 0;
	font-size: clamp(58px, 9.5vw, 132px);
}
.hero h1 .acc {
	color: var(--acc);
}
.hero p {
	font-size: clamp(15px, 1.4vw, 18px);
	color: var(--grey);
	max-width: 560px;
	line-height: 1.65;
	margin: 22px 0 0;
}
.hero p b {
	color: var(--ink);
	font-weight: 700;
}
.ctarow {
	display: flex;
	gap: 12px;
	margin-top: 30px;
	flex-wrap: wrap;
}
.btn {
	font-family: 'Anton', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 16px 30px;
	border: 3px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	white-space: nowrap;
	transition:
		background 0.15s,
		color 0.15s,
		filter 0.15s;
}
.btn.acc {
	background: var(--acc);
	border-color: var(--acc);
	color: #fff;
}
.btn.acc:hover {
	filter: brightness(0.85);
}
.btn.ghost {
	background: transparent;
	color: var(--ink);
}
.btn.ghost:hover {
	background: var(--ink);
	color: var(--paper);
}

/* hero demo */
.demo {
	margin: 40px 36px 0;
	border: 3px solid var(--ink);
	background: #fff;
	padding: 30px 34px 34px;
}
.demo-label {
	font-size: 11px;
	letter-spacing: 0.22em;
	font-weight: 700;
	color: var(--grey);
}
.demo-label b {
	color: var(--ink);
}
.wordrow {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.1em 0.55em;
	margin-top: 14px;
}
.word {
	display: flex;
	align-items: flex-start;
	font-size: clamp(40px, 6.2vw, 96px);
}
.word em {
	font-style: normal;
	font-family: 'Archivo', sans-serif;
	font-weight: 300;
	font-size: 0.42em;
	color: var(--silver);
	margin: 0.14em 8px 0 0;
	letter-spacing: 0;
}
.word.mid .slot-reel {
	color: var(--acc);
}
.slot-clip {
	display: block;
	overflow: hidden;
	height: 1em;
}
.slot-reel {
	display: block;
	position: relative;
	will-change: transform;
	transition-property: transform;
	/* The reel settles instead of stopping dead. Duration is set per word so
	   the three land left to right; this curve is normalised, so it applies
	   at any of them. */
	transition-timing-function: var(--ease-settle);
}
.slot-item {
	display: block;
	height: 1em;
	line-height: 1;
	white-space: nowrap;
}
.slot-item.spin {
	position: absolute;
	left: 0;
}
.demo-foot {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-top: 18px;
	flex-wrap: wrap;
}
.respin {
	font-family: 'Archivo', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 9px 14px;
	border: 1.5px solid var(--ink);
	background: transparent;
	cursor: pointer;
	transition:
		border-color 0.15s,
		color 0.15s;
}
.respin:hover {
	border-color: var(--acc);
	color: var(--acc);
}
.demo-foot .meta {
	font-size: 12px;
	color: var(--grey);
}
.demo-foot .meta b {
	color: var(--ink);
}

/* ticker */
.ticker {
	border-top: 3px solid var(--ink);
	border-bottom: 3px solid var(--ink);
	margin-top: 56px;
	overflow: hidden;
	background: var(--paper);
}
.ticker-track {
	display: flex;
	gap: 48px;
	padding: 13px 0;
	white-space: nowrap;
	width: max-content;
}
.ticker-track span {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--grey);
}
.ticker-track b {
	color: var(--acc);
	font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
	.ticker-track {
		animation: tick 46s linear infinite;
	}
}
@keyframes tick {
	to {
		transform: translateX(-50%);
	}
}

/* sections */
section {
	padding: 72px 36px;
}
.seclabel {
	font-size: 11px;
	letter-spacing: 0.26em;
	font-weight: 700;
	color: var(--grey);
	margin-bottom: 16px;
}
h2.disp {
	font-size: clamp(40px, 5.5vw, 76px);
	margin: 0 0 12px;
}

/* how it works */
.steps {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border-top: 3px solid var(--ink);
	margin-top: 30px;
}
.step {
	padding: 26px 26px 34px 0;
	border-right: 1px solid var(--dust);
}
.step + .step {
	padding-left: 26px;
}
.step:last-child {
	border-right: none;
}
.step .num {
	font-family: 'Anton', sans-serif;
	font-size: 54px;
	color: var(--acc);
}
.step h3 {
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 14px 0 8px;
}
.step p {
	font-size: 14px;
	color: var(--grey);
	line-height: 1.65;
	margin: 0;
}
.step p b {
	color: var(--ink);
}

/* 4th word */
.fourth {
	background: var(--acc);
	color: #fff;
}
.fourth .seclabel {
	color: rgba(255, 255, 255, 0.75);
}
.fourth h2 {
	color: #fff;
}
.fourth .cols {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	grid-gap: 48px;
	gap: 48px;
	align-items: center;
	margin-top: 26px;
}
.fourth p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 16px;
	opacity: 0.95;
	max-width: 520px;
}
.fourth p b {
	font-weight: 700;
}
.chipstack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.chip {
	font-family: 'Anton', sans-serif;
	font-size: clamp(28px, 3vw, 44px);
	text-transform: uppercase;
	background: #fff;
	color: var(--ink);
	padding: 8px 22px 12px;
}
.chip.secret {
	background: var(--ink);
	color: #fff;
	border: 2px dashed rgba(255, 255, 255, 0.6);
	display: inline-flex;
	align-items: center;
}
.chip.secret i {
	font-style: normal;
	color: var(--acc);
	filter: brightness(1.8);
	margin-right: 10px;
	font-size: 0.74em;
	line-height: 1;
	transform: translateY(-0.02em);
}
.chiparrow {
	font-size: 13px;
	letter-spacing: 0.14em;
	font-weight: 700;
	opacity: 0.8;
	padding: 4px 0;
}
.fourth .btn {
	border-color: #fff;
	background: #fff;
	color: var(--acc);
	margin-top: 10px;
}
.fourth .btn:hover {
	filter: brightness(0.92);
}

/* pricing */
.tiers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 3px solid var(--ink);
	margin-top: 30px;
	background: #fff;
}
.tier {
	padding: 30px 32px 34px;
	display: flex;
	flex-direction: column;
}
.tier + .tier {
	border-left: 3px solid var(--ink);
}
.tiername {
	font-size: clamp(32px, 3.6vw, 48px);
}
.tiername.acc {
	color: var(--acc);
}
.tierprice {
	font-size: clamp(46px, 5.5vw, 80px);
	margin-top: 4px;
}
.tierprice em {
	font-style: normal;
	font-size: 0.32em;
	color: var(--grey);
	font-family: 'Archivo', sans-serif;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
}
.feats {
	margin-top: 18px;
	border-top: 1px solid var(--ink);
}
.feat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--dust);
	font-size: 13.5px;
}
.feat b {
	font-weight: 700;
	flex: none;
}
.feat.hot b {
	color: var(--acc);
}
.feat .dim {
	color: var(--grey);
	text-align: right;
}
.tier .btn {
	margin-top: 24px;
	align-self: flex-start;
}
.pricenote {
	font-size: 12px;
	color: var(--grey);
	margin-top: 14px;
}
.tiers.three .tiername {
	margin-bottom: 10px;
}
.tiers.three .tierprice {
	line-height: 1;
}
.tierdrop {
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grey);
}
.tierdrop b {
	color: var(--acc);
}
.tiers.three .feats {
	margin-top: 32px;
	margin-bottom: 36px;
}
/* Title above its note, not beside it: side by side, three columns leave the
   two crammed against each other. */
.tiers.three .feat {
	flex-direction: column;
	gap: 3px;
	padding: 14px 0;
}
.tiers.three .feat .dim {
	text-align: left;
	font-size: 13px;
}
.tiers.three + .pricenote {
	margin-top: 20px;
}
@media (min-width: 761px) {
	.tiers.three {
		grid-template-columns: repeat(3, 1fr);
	}
	.tiers.three .tier {
		padding: 40px 36px 40px;
	}
	.tiers.three .tier .btn {
		margin-top: auto;
	}
}
.feat.off {
	opacity: 0.4;
}
.feat.off b {
	font-weight: 400;
}

/* closing cta */
.closing {
	border-top: 3px solid var(--ink);
	text-align: left;
}
.closing h2 {
	font-size: clamp(44px, 7vw, 96px);
}
.closing h2 .acc {
	color: var(--acc);
}

/* footer */
footer {
	border-top: 3px solid var(--ink);
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 18px 36px 26px;
	flex-wrap: wrap;
}
footer .brand {
	font-size: 11px;
}
footer .fmeta {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--grey);
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

/* reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
	.rev {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.6s var(--ease-rise),
			transform 0.6s var(--ease-rise);
	}
	.rev.in {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 760px) {
	.mast {
		padding: 14px 18px 12px;
		gap: 14px;
	}
	.nav {
		gap: 14px;
	}
	.nav a {
		font-size: 10px;
		letter-spacing: 0.12em;
	}
	.nav a.how {
		display: none;
	}
	.hero {
		padding: 40px 18px 24px;
	}
	.demo {
		margin: 30px 18px 0;
		padding: 22px 20px 26px;
	}
	section {
		padding: 52px 18px;
	}
	.steps {
		grid-template-columns: 1fr;
	}
	.step {
		border-right: none;
		border-bottom: 1px solid var(--dust);
		padding: 20px 0 24px;
	}
	.step + .step {
		padding-left: 0;
	}
	.step:last-child {
		border-bottom: none;
	}
	.fourth .cols {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.tiers {
		grid-template-columns: 1fr;
	}
	.tier + .tier {
		border-left: none;
		border-top: 3px solid var(--ink);
	}
	footer {
		padding: 16px 18px 22px;
	}
	footer .fmeta {
		margin-left: 0;
	}
}

/* footer links */
footer .fmeta a,
footer .fmeta .tws-cookielink {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}
/* A button, because it reopens the banner rather than navigating. Styled to
   sit in the row as if it were one of the links beside it. */
footer .fmeta .tws-cookielink {
	font: inherit;
	letter-spacing: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
footer .fmeta .tws-cookielink:hover {
	color: var(--ink);
}

/* Cookie consent. Sits on top of the page rather than pushing it, so arriving
   on the site does not shove the hero around while you read it. */
.tws-cookiebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 20px 28px;
	flex-wrap: wrap;
	padding: 16px 30px;
	background: var(--paper);
	border-top: 3px solid var(--ink);
	box-shadow: 0 -10px 30px rgba(11, 9, 10, 0.08);
}
/* Slides up rather than appearing. It is the first thing asked of a visitor,
   and a bar that materialises mid-page reads as an error; one that arrives
   reads as part of the page. */
@media (prefers-reduced-motion: no-preference) {
	.tws-cookiebar {
		animation: twsBarUp 0.45s var(--ease-rise) backwards;
	}
}
@keyframes twsBarUp {
	from {
		transform: translateY(100%);
	}
}
.tws-cookietext {
	flex: 1 1 420px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--grey);
}
.tws-cookietext b {
	color: var(--ink);
}
.tws-cookietext a {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tws-cookiebtns {
	display: flex;
	gap: 10px;
	margin-left: auto;
}
.tws-cookiebtn {
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	text-transform: uppercase;
	padding: 11px 20px;
	border: 2px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.15s,
		color 0.15s;
}
.tws-cookiebtn:hover {
	background: var(--ink);
	color: var(--paper);
}
.tws-cookiebtn.on {
	background: var(--ink);
	color: var(--paper);
}
.tws-cookiebtn.on:hover {
	background: var(--acc);
	border-color: var(--acc);
}
@media (max-width: 720px) {
	.tws-cookiebar {
		padding: 14px 18px;
		gap: 14px;
	}
	.tws-cookiebtns {
		margin-left: 0;
		width: 100%;
	}
	.tws-cookiebtn {
		flex: 1 1;
	}
}
footer .fmeta a:hover {
	color: var(--ink);
}
footer .fmeta .credit {
	color: var(--acc);
	font-weight: 700;
}
footer .fmeta .credit:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── legal / policy pages ─────────────────────────────────── */
.legal {
	flex: 1 1;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 30px 72px;
}
.legal h1.disp {
	font-size: clamp(46px, 8vw, 88px);
	margin: 0 0 6px;
}
.legal-meta {
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--grey);
	margin: 0 0 36px;
}
.legal h2 {
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 36px 0 10px;
	padding-top: 18px;
	border-top: 1px solid var(--dust);
}
.legal p {
	font-size: 15px;
	line-height: 1.75;
	color: #2b2b2b;
	margin: 0 0 14px;
	max-width: 640px;
}
.legal ul {
	margin: 0 0 14px;
	padding-left: 18px;
	max-width: 640px;
}
.legal li {
	font-size: 15px;
	line-height: 1.65;
	color: #2b2b2b;
	margin-bottom: 9px;
}
.legal a {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 2px;
}
@media (max-width: 760px) {
	.legal {
		padding: 40px 18px 56px;
	}
}

/* ===========================================================
   APP  (route "/app")  — verbatim from tws-shared.jsx
   =========================================================== */
.tws-root {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f5f3f4;
	color: #0b090a;
	font-family: 'Archivo', sans-serif;
}
.tws-display {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: var(--case, uppercase);
	line-height: 0.92;
	letter-spacing: 0.005em;
}
.tws-mast {
	display: flex;
	align-items: baseline;
	gap: 26px;
	padding: 18px 30px 14px;
	border-bottom: 3px solid #0b090a;
	flex: none;
}
.tws-brand {
	font-weight: 800;
	letter-spacing: 0.3em;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.tws-brand .dot {
	color: var(--acc);
}
.tws-nav {
	margin-left: auto;
	display: flex;
	gap: 22px;
	align-items: baseline;
}
.tws-navlink {
	font-size: 11.5px;
	letter-spacing: 0.18em;
	font-weight: 600;
	cursor: pointer;
	color: #6f6968;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}
.tws-navlink.on {
	color: #0b090a;
	border-bottom-color: var(--acc);
}
.tws-probadge {
	font-size: 10px;
	letter-spacing: 0.2em;
	font-weight: 800;
	background: var(--acc);
	color: #fff;
	padding: 4px 8px;
	cursor: pointer;
}
.tws-protag {
	display: inline-block;
	font-size: 9px;
	letter-spacing: 0.14em;
	font-weight: 800;
	background: #0b090a;
	color: #f5f3f4;
	padding: 2px 5px;
	margin-left: 7px;
	vertical-align: 2px;
}
.tws-main {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
/* hero + drop */
.tws-hero {
	padding: 28px 30px 0;
}
.tws-hero .tws-display {
	font-size: clamp(54px, 8.5vw, 108px);
}
.tws-hero .acc {
	color: var(--acc);
}
/* 404 body copy. Matches the hero gutter so it hangs off the display line. */
.tws-nfbody {
	flex: 1 1;
	padding: 20px 30px 30px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--grey);
	max-width: 620px;
}
.tws-nfbody a {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tws-nfbody b {
	color: var(--ink);
}
@media (max-width: 720px) {
	.tws-nfbody {
		padding: 16px 18px 24px;
	}
}
.tws-dropstrip {
	margin: 26px 30px;
	flex: 1 1;
	min-height: 190px;
	border: 3px solid #0b090a;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	cursor: pointer;
	position: relative;
	text-align: center;
	padding: 24px;
}
.tws-dropstrip::after {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1.5px dashed #b1a7a6;
	pointer-events: none;
}
.tws-dropstrip.drag {
	background: #fbe9e9;
}
.tws-dropstrip.drag::after {
	border-color: var(--acc);
}
.tws-dropbig {
	font-size: clamp(30px, 4.5vw, 54px);
	white-space: nowrap;
}
.tws-dropsmall {
	font-size: 13px;
	color: #6f6968;
}
.tws-dropsmall u {
	color: var(--acc);
	text-underline-offset: 3px;
}
.tws-steps {
	display: flex;
	border-top: 1px solid #0b090a;
	margin: 0 30px;
	flex: none;
	flex-wrap: wrap;
}
.tws-step {
	flex: 1 1 180px;
	padding: 14px 18px 20px 0;
	display: flex;
	gap: 12px;
	align-items: baseline;
	border-right: 1px solid #d3d3d3;
}
.tws-step + .tws-step {
	padding-left: 20px;
}
.tws-step:last-child {
	border-right: none;
}
.tws-stepnum {
	font-family: 'Anton', sans-serif;
	font-size: 24px;
	color: var(--acc);
}
.tws-steplbl {
	font-size: 12px;
	letter-spacing: 0.14em;
	font-weight: 600;
	text-transform: uppercase;
}
.tws-steplbl i {
	display: block;
	font-style: normal;
	font-weight: 400;
	color: #6f6968;
	letter-spacing: 0.02em;
	text-transform: none;
	margin-top: 3px;
	font-size: 11.5px;
}
/* uploading */
.tws-upcenter {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 30px;
	gap: 18px;
}
.tws-uppct {
	font-size: clamp(90px, 15vw, 180px);
}
.tws-upbar {
	height: 18px;
	border: 3px solid #0b090a;
	background: #fff;
}
.tws-upbar i {
	display: block;
	height: 100%;
	background: var(--acc);
	transition: width 0.12s linear;
}
.tws-upfile {
	font-size: 13px;
	color: #6f6968;
	letter-spacing: 0.06em;
}
.tws-upfile b {
	color: #0b090a;
}
/* success stack */
.tws-stack {
	padding: 14px 30px 10px;
	flex: 1 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tws-sidelabel {
	font-size: 11px;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
}
.tws-wordrow {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.1em 0.55em;
}
.tws-word {
	font-size: clamp(38px, 5.6vw, 86px);
	outline: none;
}
.tws-word em {
	font-style: normal;
	font-family: 'Archivo', sans-serif;
	font-weight: 300;
	font-size: 0.42em;
	color: #b1a7a6;
	vertical-align: 0.34em;
	margin-right: 8px;
	letter-spacing: 0;
}
.tws-word.mid {
	color: var(--acc);
}
.tws-word[contenteditable='true']:focus {
	outline: 3px solid var(--acc);
	outline-offset: 6px;
}
.tws-edithint {
	font-size: 12px;
	color: #6f6968;
	margin-top: 10px;
}
.tws-edithint b {
	color: var(--acc);
}
/* options row */
.tws-optrow {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 14px 30px;
	border-top: 1px solid #0b090a;
	align-items: center;
}
.tws-optlabel {
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: #6f6968;
	margin-right: 4px;
}
.tws-opt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 9px 14px;
	border: 1.5px solid #0b090a;
	cursor: pointer;
	background: transparent;
	color: #0b090a;
	display: inline-flex;
	align-items: center;
	font-family: inherit;
	white-space: nowrap;
}
.tws-opt.on {
	background: #0b090a;
	color: #f5f3f4;
}
.tws-opt.locked {
	border-color: #b1a7a6;
	color: #6f6968;
}
/* action bar */
.tws-actionbar {
	display: flex;
	align-items: stretch;
	border-top: 3px solid #0b090a;
	flex: none;
	flex-wrap: wrap;
}
.tws-abtn {
	font-family: 'Anton', sans-serif;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 18px 30px;
	border: none;
	border-right: 3px solid #0b090a;
	background: #0b090a;
	color: #f5f3f4;
	cursor: pointer;
	white-space: nowrap;
}
.tws-abtn.acc {
	background: var(--acc);
	color: #fff;
}
.tws-abtn.ghost {
	background: transparent;
	color: #0b090a;
}
.tws-abtn:disabled {
	background: #d3d3d3;
	color: #6f6968;
	cursor: default;
}
.tws-abmeta {
	margin-left: auto;
	align-self: center;
	padding: 12px 30px 12px 16px;
	font-size: 12px;
	color: #6f6968;
	text-align: right;
	line-height: 1.55;
}
.tws-abmeta b {
	color: #0b090a;
}
/* receive */
.tws-inputs {
	padding: 8px 30px 0;
	flex: 1 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}
.tws-inrow {
	display: flex;
	align-items: baseline;
	gap: 18px;
	border-bottom: 3px solid #0b090a;
	padding-top: 4px;
}
.tws-inrow .idx {
	font-size: 13px;
	color: #b1a7a6;
	width: 26px;
	flex: none;
}
.tws-input {
	font-family: 'Anton', sans-serif;
	text-transform: var(--case, uppercase);
	font-size: clamp(44px, 8.5vw, 92px);
	line-height: 1.08;
	border: none;
	background: transparent;
	width: 100%;
	padding: 0;
	color: #0b090a;
	caret-color: var(--acc);
}
.tws-input:focus {
	outline: none;
}
.tws-input::placeholder {
	color: #d3d3d3;
}
.tws-foundwrap {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 30px;
	gap: 18px;
}
.tws-found {
	border: 3px solid #0b090a;
	background: #fff;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.tws-foundtag {
	font-size: 11px;
	letter-spacing: 0.22em;
	font-weight: 700;
	color: var(--acc);
	text-transform: uppercase;
}
.tws-foundname {
	font-size: clamp(28px, 4vw, 46px);
	overflow-wrap: anywhere;
}
.tws-foundmeta {
	font-size: 12.5px;
	color: #6f6968;
}
.tws-foundmeta b {
	color: #0b090a;
}
/* pricing */
.tws-pricing {
	flex: 1 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.tws-tier {
	padding: 26px 30px 30px;
	display: flex;
	flex-direction: column;
}
.tws-tier + .tws-tier {
	border-left: 3px solid #0b090a;
}
.tws-tiername {
	font-size: clamp(36px, 4.5vw, 58px);
}
.tws-tiername.acc {
	color: var(--acc);
}
.tws-tierprice {
	font-size: clamp(54px, 7.5vw, 104px);
	margin-top: 4px;
}
.tws-tierprice em {
	font-style: normal;
	font-size: 0.32em;
	color: #6f6968;
	font-family: 'Archivo', sans-serif;
	font-weight: 300;
	letter-spacing: 0;
}
.tws-feats {
	margin-top: 18px;
	border-top: 1px solid #0b090a;
}
.tws-feat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid #d3d3d3;
	font-size: 13.5px;
}
.tws-feat b {
	font-weight: 700;
	flex: none;
}
.tws-feat .dim {
	color: #6f6968;
	text-align: right;
}
.tws-tiercta {
	margin-top: auto;
	padding-top: 24px;
}
.tws-cta {
	font-family: 'Anton', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	padding: 16px 28px;
	border: 3px solid #0b090a;
	background: transparent;
	color: #0b090a;
	cursor: pointer;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.tws-cta.acc {
	background: var(--acc);
	border-color: var(--acc);
	color: #fff;
}
/* Magnetic pull field (components/motion-ui/magnetic-pull). The negative
   margin and equal padding widen the area that tracks the pointer by 32px on
   every side without moving the button, so the pull starts as the cursor
   approaches rather than only once it is on top. flex-start, not centre,
   because the pricing CTA sits left-aligned in its tier. */
.mui-magnetic {
	display: flex;
	justify-content: flex-start;
	margin: -32px;
	padding: 32px;
}
.mui-magnetic-inner {
	display: inline-flex;
}
.tws-cta.done {
	background: #0b090a;
	color: #f5f3f4;
	cursor: default;
}
.tws-cancelnote {
	font-size: 11.5px;
	color: #6f6968;
	margin-top: 10px;
}
.tws-cancelnote u {
	cursor: pointer;
}
/* ledger */
.tws-ledger {
	flex: 1 1;
	padding: 18px 30px 26px;
	overflow: auto;
}
.tws-lhead,
.tws-lrow {
	display: grid;
	grid-template-columns: 1.8fr 1.8fr 0.7fr 0.7fr 0.9fr;
	grid-gap: 14px;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid #d3d3d3;
	font-size: 13px;
	align-items: baseline;
}
.tws-lhead {
	border-bottom: 3px solid #0b090a;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: #6f6968;
}
/* Back-office section tabs.
   Deliberately a LIGHT rule: the masthead above and every .tws-accthead below
   already draw a 3px black line, and a third one stacked between them read as
   a smear of rules rather than structure. Gutter matches .tws-acct (30px) so
   the tabs line up with the brand and the content. */
.tws-adminnav {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: baseline;
	padding: 13px 30px 11px;
	border-bottom: 1px solid var(--dust);
	background: var(--paper);
	flex: none;
}
.tws-adminlink {
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: var(--grey);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s;
	white-space: nowrap;
}
.tws-adminlink:hover {
	color: var(--ink);
}
.tws-adminlink.on {
	color: var(--ink);
	border-bottom-color: var(--acc);
}

/* Back-office chrome.
   The bar is inverted on purpose. The back office is a different place from
   the public site, and the operator should be able to tell at a glance which
   one they are looking at without reading a word. */
.tws-adminbar {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 15px 30px 13px;
	background: var(--ink);
	color: var(--paper);
	flex: none;
}
.tws-adminbrand {
	font-weight: 800;
	letter-spacing: 0.3em;
	font-size: 12px;
	color: var(--paper);
	text-decoration: none;
	white-space: nowrap;
}
.tws-adminbrand .dot {
	color: var(--acc);
}
.tws-admintag {
	font-size: 9.5px;
	letter-spacing: 0.2em;
	font-weight: 700;
	padding: 3px 7px;
	background: var(--acc);
	color: #fff;
	white-space: nowrap;
}
.tws-adminacct {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 20px;
}
.tws-adminout,
.tws-adminsignout {
	font-family: inherit;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: #b1a7a6;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s;
}
.tws-adminout:hover {
	color: var(--paper);
}
.tws-adminsignout:hover {
	color: var(--acc);
}
.tws-adminfoot {
	padding: 14px 30px;
	border-top: 1px solid var(--dust);
	font-size: 11px;
	color: var(--grey);
	flex: none;
}
.tws-adminwait {
	flex: 1 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 30px;
}
.tws-adminwaitlbl {
	font-size: 10.5px;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: var(--grey);
}
/* 720px is the site-wide mobile breakpoint; the gutter drops 30px -> 18px to
   match .tws-acct, or the bar and the content below it stop lining up. */
@media (max-width: 720px) {
	.tws-adminbar {
		flex-wrap: wrap;
		gap: 10px 14px;
		padding: 13px 18px 11px;
	}
	.tws-adminacct {
		gap: 16px;
	}
	.tws-adminnav {
		gap: 16px;
		padding: 12px 18px 10px;
	}
	.tws-adminfoot {
		padding: 13px 18px;
	}
}

.tws-lwords {
	font-weight: 700;
}
/* The words cell is a link to the transfer; keep it looking like the table
   until you point at it. */
a.tws-lwords:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.tws-lwords i {
	font-style: normal;
	color: var(--acc);
}
.tws-lrow .dim {
	color: #6f6968;
}
.tws-lrow.dead,
.tws-lrow.dead .dim,
.tws-lrow.dead .tws-lwords i {
	color: #b1a7a6;
}
.tws-lockpanel {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30px;
	gap: 20px;
}
.tws-lockpanel .tws-display {
	font-size: clamp(44px, 7vw, 92px);
}
.tws-lockpanel .tws-display .acc {
	color: var(--acc);
}
.tws-locksub {
	font-size: 14px;
	color: #6f6968;
	max-width: 480px;
	line-height: 1.6;
}
/* pro modal */
.tws-overlay {
	position: fixed;
	inset: 0;
	background: rgba(11, 9, 10, 0.62);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	padding: 16px;
}
.tws-modal {
	background: #f5f3f4;
	border: 4px solid #0b090a;
	width: min(560px, 100%);
	max-height: 92vh;
	overflow: auto;
}
.tws-modalhead {
	padding: 22px 26px 18px;
	border-bottom: 3px solid #0b090a;
}
.tws-modalreason {
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: var(--acc);
	margin-bottom: 8px;
	text-transform: uppercase;
}
.tws-modaltitle {
	font-size: clamp(44px, 7vw, 60px);
}
.tws-modalfeats {
	padding: 4px 26px 14px;
}
.tws-modalbar {
	display: flex;
	border-top: 3px solid #0b090a;
	flex-wrap: wrap;
}
.tws-modalbar .tws-abtn {
	flex: 1 1 auto;
}
@media (max-width: 720px) {
	.tws-mast {
		padding: 14px 18px 12px;
		gap: 14px;
	}
	.tws-nav {
		gap: 13px;
	}
	.tws-navlink {
		font-size: 10px;
		letter-spacing: 0.12em;
	}
	.tws-hero {
		padding: 22px 18px 0;
	}
	.tws-dropstrip {
		margin: 20px 18px;
	}
	.tws-steps {
		margin: 0 18px;
	}
	.tws-stack,
	.tws-inputs {
		padding-left: 18px;
		padding-right: 18px;
	}
	.tws-optrow {
		padding: 12px 18px;
	}
	.tws-upcenter {
		padding: 0 18px;
	}
	.tws-found {
		padding: 18px 20px;
	}
	.tws-foundwrap {
		padding: 0 18px;
	}
	.tws-actionbar {
		flex-direction: column;
	}
	.tws-abtn {
		border-right: none;
		border-bottom: 2px solid #f5f3f4;
		text-align: left;
		padding: 16px 18px;
		font-size: 17px;
	}
	.tws-abmeta {
		margin-left: 0;
		padding: 12px 18px;
		text-align: left;
	}
	.tws-pricing {
		grid-template-columns: 1fr;
	}
	.tws-tier + .tws-tier {
		border-left: none;
		border-top: 3px solid #0b090a;
	}
	.tws-ledger {
		padding: 14px 18px 22px;
	}
	.tws-lhead,
	.tws-lrow {
		grid-template-columns: 1.6fr 1.4fr 0.6fr 0.9fr;
		gap: 8px;
		font-size: 11.5px;
	}
	.tws-lhead.adm,
	.tws-lrow.adm {
		grid-template-columns: 1.5fr 1.3fr 0.7fr 0.9fr 0.5fr;
	}
	.tws-lhead.adm2,
	.tws-lrow.adm2 {
		grid-template-columns: 1.6fr 0.7fr 0.8fr 1fr;
	}
	.tws-lhead .hidem,
	.tws-lrow .hidem {
		display: none;
	}
	.tws-spotlight {
		padding: 16px 18px 20px;
		gap: 16px;
	}
	.tws-nf {
		padding: 0 18px;
	}
	.tws-acct {
		padding: 20px 18px 24px;
	}
	.tws-lockpanel {
		padding: 0 18px;
	}
}
.tws-feat.hot b {
	color: var(--acc);
}
/* plan ended, files on a clock */
.tws-gracebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 30px;
	background: var(--acc);
	color: #fff;
	font-size: 13.5px;
}
.tws-gracebar .tws-opt.on {
	background: #fff;
	color: #0b090a;
	border-color: #fff;
}
/* three packages */
.tws-pricing3 {
	grid-template-columns: repeat(3, 1fr);
}
.tws-pricing3 .tws-tierprice {
	font-size: clamp(44px, 5.5vw, 80px);
}
.tws-tier.mine {
	background: #f5f3f4;
}
.tws-tierdrop {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #6f6968;
	text-transform: uppercase;
}
.tws-tierdrop b {
	color: var(--acc);
}
.tws-feat.off b,
.tws-feat.off .dim {
	color: #b1a7a6;
	font-weight: 400;
}
.tws-droptable {
	border-top: 1px solid #0b090a;
	margin-bottom: 14px;
}
.tws-droprow {
	display: grid;
	grid-template-columns: 1.2fr repeat(3, 1fr);
	padding: 9px 0;
	border-bottom: 1px solid #d3d3d3;
	font-size: 13.5px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}
.tws-droprow.head {
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 700;
}
.tws-droprow:last-child span + span {
	color: var(--acc);
	font-weight: 700;
}
.tws-planrow {
	flex-wrap: wrap;
	align-items: center;
}
.tws-planrow .dim {
	flex: 1 1 200px;
	text-align: left;
}
@media (max-width: 1000px) and (min-width: 721px) {
	.tws-pricing3 .tws-tier {
		padding: 22px 18px 24px;
	}
	.tws-pricing3 .tws-feat {
		flex-direction: column;
		gap: 2px;
	}
	.tws-pricing3 .tws-feat .dim {
		text-align: left;
	}
}
/* 4th-word spotlight */
.tws-spotlight {
	background: var(--acc);
	color: #fff;
	padding: 20px 30px 24px;
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}
.tws-spotglyph {
	font-size: 40px;
	line-height: 1;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1em;
}
.tws-spottitle {
	font-size: clamp(34px, 4vw, 52px);
}
.tws-spotsub {
	font-size: 13.5px;
	max-width: 600px;
	line-height: 1.6;
	opacity: 0.94;
	margin-top: 6px;
}
.tws-spotsub b {
	font-weight: 700;
}
/* not found */
.tws-nf {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 30px;
	gap: 14px;
}
.tws-nf .tws-display {
	font-size: clamp(40px, 6.5vw, 88px);
}
.tws-nfwords {
	color: var(--acc);
	overflow-wrap: anywhere;
}
.tws-nfsub {
	font-size: 14px;
	color: #6f6968;
	max-width: 540px;
	line-height: 1.6;
}
.tws-secretrow {
	margin-top: 26px;
}
.tws-secret .tws-word {
	font-size: clamp(28px, 3.2vw, 50px);
}
.tws-secret .tws-word em {
	color: var(--acc);
}
.tws-secrethint {
	font-size: 12px;
	color: #6f6968;
	margin-top: 6px;
}
.tws-inrow.gate {
	border-bottom-color: var(--acc);
}
.tws-inrow.gate .idx {
	color: var(--acc);
}
/* identity + account */
.tws-bindrow {
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.tws-bindinput {
	font-family: 'Archivo', sans-serif;
	font-size: 13px;
	padding: 11px 14px;
	border: 1.5px solid #0b090a;
	background: #fff;
	width: min(340px, 100%);
}
.tws-bindinput:focus {
	outline: 2px solid var(--acc);
}
.tws-bindok {
	font-size: 12px;
	font-weight: 700;
	color: var(--acc);
}
.tws-acct {
	flex: 1 1;
	padding: 26px 30px 30px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	overflow: auto;
}
.tws-accthead {
	font-size: 10.5px;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: #6f6968;
	border-bottom: 3px solid #0b090a;
	padding-bottom: 8px;
}
.tws-acctwords {
	transition: filter 0.25s;
	margin-top: 16px;
}
.tws-acctwords.blurred {
	filter: blur(16px);
	pointer-events: none;
}
.tws-acct .tws-word {
	font-size: clamp(30px, 3.8vw, 58px);
}
.tws-acctopts {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 16px;
	flex-wrap: wrap;
}
.tws-flash {
	font-size: 12px;
	font-weight: 700;
	color: var(--acc);
}
.tws-planbox {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0 4px;
	flex-wrap: wrap;
	font-size: 13.5px;
}
.tws-planbox.expired {
	color: var(--acc);
}
.tws-devrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid #d3d3d3;
	font-size: 13.5px;
}
.tws-revoke {
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--acc);
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
	padding: 0;
}
.tws-modalsignin {
	padding: 0 26px 18px;
	font-size: 12px;
	color: #6f6968;
}
.tws-modalsignin u {
	cursor: pointer;
}
.tws-qrwrap {
	padding: 24px 26px 8px;
	display: flex;
	justify-content: center;
}
.tws-qrwrap img {
	width: 230px;
	height: 230px;
	display: block;
	border: 3px solid #0b090a;
	padding: 14px;
	background: #fff;
	box-sizing: content-box;
	image-rendering: pixelated;
}
.tws-qrwords {
	text-align: center;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	font-size: 26px;
	letter-spacing: 0.01em;
	padding: 6px 26px 2px;
}
.tws-qrwords .mid {
	color: var(--acc);
}
.tws-qrcap {
	text-align: center;
	padding: 2px 26px 18px;
	font-size: 12px;
	color: #6f6968;
}
.tws-statgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 3px solid #0b090a;
	background: #fff;
	margin-top: 16px;
}
.tws-stattile {
	padding: 16px 18px 20px;
	border-right: 1px solid #d3d3d3;
}
.tws-stattile:last-child {
	border-right: none;
}
.tws-statnum {
	font-family: 'Anton', sans-serif;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1;
}
.tws-statnum i {
	font-style: normal;
	font-size: 0.5em;
	color: #6f6968;
}
.tws-statlbl {
	font-size: 10px;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: #6f6968;
	margin-top: 6px;
}
.tws-issuetag {
	font-size: 9px;
	letter-spacing: 0.14em;
	font-weight: 800;
	padding: 3px 7px;
	background: #0b090a;
	color: #f5f3f4;
}
.tws-issuetag.un {
	background: var(--acc);
}
.tws-issuetag.trial {
	background: #6f6968;
}
.tws-minibtn {
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 700;
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
	padding: 0;
	color: #0b090a;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tws-minibtn:hover {
	color: var(--acc);
}
.tws-lhead.adm,
.tws-lrow.adm {
	grid-template-columns: 1.8fr 1.8fr 0.7fr 0.7fr 0.9fr 0.5fr;
}
.tws-lhead.adm2,
.tws-lrow.adm2 {
	grid-template-columns: 2fr 0.8fr 0.8fr 1fr;
}
/* motion + hover */
.tws-abtn,
.tws-cta {
	transition:
		background 0.15s,
		color 0.15s,
		filter 0.15s;
}
.tws-abtn:not(.acc):not(.ghost):not(:disabled):hover {
	background: var(--acc);
}
.tws-abtn.acc:not(:disabled):hover {
	filter: brightness(0.85);
}
.tws-abtn.ghost:hover {
	background: #0b090a;
	color: #f5f3f4;
}
.tws-cta.acc:hover {
	filter: brightness(0.85);
}
.tws-cta:not(.acc):not(.done):not(:disabled):hover {
	background: #0b090a;
	color: #f5f3f4;
}
.tws-navlink {
	transition: color 0.15s;
}
.tws-navlink:hover {
	color: #0b090a;
}
.tws-opt {
	transition:
		border-color 0.15s,
		color 0.15s,
		background 0.15s;
}
.tws-opt:not(.on):not(.locked):hover {
	border-color: var(--acc);
	color: var(--acc);
}
.tws-opt.locked:hover {
	border-color: #6f6968;
	color: #0b090a;
}
.tws-dropstrip {
	transition: background 0.2s;
}
.tws-dropstrip:hover {
	background: #fcefef;
}
/* slot machine reveal */
.tws-word {
	display: flex;
	align-items: flex-start;
}
.tws-word em {
	margin-top: 0.14em;
}
.tws-slotclip {
	display: block;
	overflow: hidden;
	height: 1em;
}
.tws-slotreel {
	display: block;
	position: relative;
	will-change: transform;
	transition-property: transform;
	/* The reel settles instead of stopping dead. Duration is set per word so
	   the three land left to right; this curve is normalised, so it applies
	   at any of them. */
	transition-timing-function: var(--ease-settle);
}
.tws-slotitem {
	display: block;
	height: 1em;
	line-height: 1;
	outline: none;
}
.tws-slotitem.spin {
	position: absolute;
	left: 0;
	white-space: nowrap;
}
.tws-slotitem[contenteditable='true']:focus {
	outline: 3px solid var(--acc);
	outline-offset: 6px;
}
@keyframes twsRise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}
@keyframes twsFade {
	from {
		opacity: 0;
	}
}
@keyframes twsPop {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
}
@keyframes twsLock {
	from {
		transform: scale(1.03);
	}
}
@keyframes twsFlash {
	from {
		color: var(--acc);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.tws-main > * {
		animation: twsRise 0.55s var(--ease-rise) backwards;
	}
	.tws-main > *:nth-child(2) {
		animation-delay: 0.07s;
	}
	.tws-main > *:nth-child(3) {
		animation-delay: 0.14s;
	}
	.tws-main > *:nth-child(4) {
		animation-delay: 0.21s;
	}
	.tws-overlay {
		animation: twsFade 0.25s;
	}
	.tws-modal {
		animation: twsPop 0.35s var(--ease-rise);
	}
	/* The settle runs 0.55s, but the click reads at 0.2s, which is what the
	   next word's timing is keyed off. */
	.tws-word.locked {
		animation: twsLock 0.55s var(--ease-snap);
	}

	/* Features land one after another instead of all at once, so the list
	   reads as a sequence of reasons rather than a block of text, and the
	   eye ends on the button beneath it. In the Go Pro modal they start as
	   the panel finishes arriving. */
	/* --feat-base offsets the whole sequence; the modal sets it so the list
	   waits for the panel. */
	.tws-modalfeats {
		--feat-base: 0.12s;
	}
	.tws-feats > .tws-feat,
	.tws-modalfeats > .tws-feat {
		animation: twsRise 0.45s var(--ease-rise) backwards;
		animation-delay: var(--feat-base, 0s);
	}
	.tws-feat:nth-child(2) {
		animation-delay: calc(var(--feat-base, 0s) + 0.05s);
	}
	.tws-feat:nth-child(3) {
		animation-delay: calc(var(--feat-base, 0s) + 0.1s);
	}
	.tws-feat:nth-child(4) {
		animation-delay: calc(var(--feat-base, 0s) + 0.15s);
	}
	.tws-feat:nth-child(5) {
		animation-delay: calc(var(--feat-base, 0s) + 0.2s);
	}
	.tws-feat:nth-child(6) {
		animation-delay: calc(var(--feat-base, 0s) + 0.25s);
	}
	.tws-word.locked em {
		animation: twsFlash 0.6s;
	}
}
@media (prefers-reduced-motion: reduce) {
	.tws-slotreel {
		transition: none !important;
	}
}

/* ===========================================================
   MOBILE HARDENING
   Kills horizontal scroll and stops the masthead from
   overflowing on narrow phones. (overflow-x: clip keeps
   position:sticky working, unlike overflow-x: hidden.)
   =========================================================== */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}
.tws-input {
	min-width: 0;
} /* let inputs shrink inside flex rows */
.tws-word {
	overflow-wrap: anywhere;
} /* never push the row sideways */

/* Keep both mastheads on a SINGLE row. Nav items never break mid-word
   ("SIGN IN" stays together; the PRO tag stays beside LEDGER), and the
   wordmark + nav scale down progressively so the row never gets cramped. */
.tws-mast,
.mast {
	flex-wrap: nowrap;
}
.tws-nav,
.nav {
	flex-wrap: nowrap;
}
.tws-brand,
.mast .brand {
	white-space: nowrap;
}
.tws-navlink,
.nav a,
.tws-probadge {
	white-space: nowrap;
}

/* Wordmark collapses to the short "T.W.S" form on smaller screens. */
.tws-brand-short,
.brand-short {
	display: none;
}
@media (max-width: 600px) {
	.tws-brand-full,
	.brand-full {
		display: none;
	}
	.tws-brand-short,
	.brand-short {
		display: inline;
	}
}

/* Landing has just 2 visible links below 760px — keep it roomy. */
@media (max-width: 760px) {
	.mast {
		gap: 12px;
	}
	.mast .brand {
		letter-spacing: 0.16em;
	}
	.nav {
		gap: 16px;
	}
}

/* App's 6-item nav: tighten in two steps so it stays a comfortable one-liner. */
@media (max-width: 860px) {
	.tws-mast {
		gap: 14px;
		padding: 16px 22px 12px;
	}
	.tws-brand {
		font-size: 12px;
		letter-spacing: 0.14em;
	}
	.tws-nav {
		gap: 14px;
	}
	.tws-navlink {
		font-size: 10px;
		letter-spacing: 0.1em;
	}
	.tws-protag {
		font-size: 8px;
		padding: 2px 4px;
		margin-left: 5px;
	}
}
@media (max-width: 600px) {
	.tws-mast {
		gap: 10px;
		padding: 14px 16px 11px;
	}
	.tws-brand {
		font-size: 11px;
		letter-spacing: 0.08em;
	}
	.tws-nav {
		gap: 11px;
	}
	.tws-navlink {
		font-size: 9px;
		letter-spacing: 0.06em;
	}
	.tws-protag {
		font-size: 7.5px;
		padding: 1px 3px;
		margin-left: 4px;
	}
}

/* Narrow phones: the wordmark is already "T.W.S" (≤600), so the row fits;
   just give the nav a touch more breathing room. */
@media (max-width: 430px) {
	.tws-nav {
		gap: 10px;
	}
	.tws-navlink {
		font-size: 9.5px;
	}
}

/* Send "how it works" steps: stack into one clean column instead of an
   awkward 2 + 1 wrap with leftover dividers. */
@media (max-width: 760px) {
	.tws-steps {
		flex-direction: column;
		margin: 0 18px;
	}
	.tws-step {
		flex: none;
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #d3d3d3;
		padding: 14px 0 16px;
	}
	.tws-step + .tws-step {
		padding-left: 0;
	}
	.tws-step:last-child {
		border-bottom: none;
	}
}

/* Small phones: scale the big type so nothing overflows. */
@media (max-width: 440px) {
	.mast .brand {
		font-size: 12px;
		letter-spacing: 0.1em;
	}
	.nav a {
		font-size: 9.5px;
		letter-spacing: 0.07em;
	}
	.tws-hero .tws-display {
		font-size: clamp(38px, 12vw, 60px);
	}
	.hero h1 {
		font-size: clamp(40px, 12.5vw, 64px);
	}
	.tws-uppct {
		font-size: clamp(58px, 22vw, 108px);
	}
	.tws-input {
		font-size: clamp(32px, 12vw, 60px);
	}
	.tws-wordrow .tws-word {
		font-size: clamp(30px, 11vw, 60px);
	}
	.tws-abtn {
		font-size: 16px;
		padding: 15px 16px;
	}
	.tws-cta {
		font-size: 16px;
		padding: 14px 18px;
	}
	.demo .word {
		font-size: clamp(34px, 12vw, 64px);
	}
	section {
		padding: 44px 16px;
	}
	.hero {
		padding: 34px 16px 22px;
	}
	h2.disp {
		font-size: clamp(34px, 9vw, 60px);
	}
}