/* Passport Club public Departure Ledger. Account surfaces use passport-club-doc.css. */
.tss-pcl {
	--pcl-ink: #11110f;
	--pcl-paper: #fffdf3;
	--pcl-cream: #f7f0df;
	--pcl-yellow: #ffd633;
	--pcl-sage: #dbeee8;
	--pcl-muted: #625d52;
	--pcl-line: rgba(17, 17, 15, 0.2);
	display: grid;
	gap: 30px;
	width: min(100%, 1360px);
	margin: 0 auto;
	padding: clamp(26px, 4vw, 56px) clamp(16px, 3vw, 36px) clamp(48px, 7vw, 96px);
	color: var(--pcl-ink);
	font-weight: 500;
}

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

.tss-pcl :is(h1, h2, h3, p, ol, ul, details) { margin: 0; }

.tss-pcl :is(a, summary):focus-visible {
	outline: 3px solid #f37962;
	outline-offset: 3px;
}

.tss-pcl__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.5fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: end;
	padding: clamp(6px, 1vw, 14px) 0;
}

.tss-pcl__hero-copy {
	display: grid;
	gap: 18px;
}

.tss-pcl__hero h1 {
	max-width: 940px;
	color: var(--pcl-ink);
	font-size: clamp(46px, 6.3vw, 88px);
	font-weight: 900;
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.tss-pcl__lede {
	max-width: 760px;
	color: #34332d;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.5;
}

.tss-pcl__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.tss-pcl__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border: 2px solid var(--pcl-ink);
	border-radius: 7px;
	padding: 10px 19px;
	background: var(--pcl-yellow);
	box-shadow: 3px 3px 0 var(--pcl-ink);
	color: var(--pcl-ink);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.1;
	text-decoration: none;
	transition: box-shadow 140ms ease, transform 140ms ease;
}

.tss-pcl__button:active {
	box-shadow: 1px 1px 0 var(--pcl-ink);
	transform: translate(2px, 2px);
}

.tss-pcl__text-link {
	width: fit-content;
	color: var(--pcl-ink);
	font-weight: 850;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.tss-pcl__hero-note {
	display: grid;
	gap: 7px;
	border-left: 3px solid var(--pcl-ink);
	padding: 4px 0 4px 18px;
}

.tss-pcl__hero-note strong {
	font-size: 18px;
	font-weight: 900;
}

.tss-pcl__hero-note p {
	margin-bottom: 8px;
	color: #3d3b34;
	font-size: 14px;
}

.tss-pcl__contents {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	border-top: 2px solid var(--pcl-ink);
	border-bottom: 1px solid var(--pcl-line);
	padding: 14px 0;
}

.tss-pcl__contents a {
	color: var(--pcl-ink);
	font-size: 13px;
	font-weight: 850;
	text-decoration: none;
}

.tss-pcl__contents a:hover { text-decoration: underline; text-underline-offset: 4px; }

.tss-pcl__ledger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
	border: 3px solid var(--pcl-ink);
	background: var(--pcl-paper);
	box-shadow: 9px 9px 0 rgba(17, 17, 15, 0.22);
}

.tss-pcl__reward-sheet { padding: clamp(22px, 3vw, 34px); }

.tss-pcl__section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
	gap: 24px;
	align-items: end;
	border-bottom: 3px solid var(--pcl-ink);
	padding-bottom: 18px;
}

.tss-pcl__section-head h2,
.tss-pcl__rank-register h2,
.tss-pcl__example h2,
.tss-pcl__reading h2,
.tss-pcl__faq h2,
.tss-pcl__plain-terms h2 {
	color: var(--pcl-ink);
	font-size: clamp(28px, 3.3vw, 44px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
}

.tss-pcl__section-head p {
	color: var(--pcl-muted);
	font-size: 13px;
}

.tss-pcl__reward-row {
	display: grid;
	grid-template-columns: 154px minmax(0, 1fr) 170px;
	gap: 20px;
	align-items: start;
	border-bottom: 1px solid var(--pcl-line);
	padding: 23px 0;
}

.tss-pcl__reward-row:last-child { border-bottom: 0; }

.tss-pcl__reward-row h3 {
	color: var(--pcl-ink);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
}

.tss-pcl__reward-row > div { display: grid; gap: 7px; }

.tss-pcl__reward-row > div p:not(.tss-pcl__reward-outcome),
.tss-pcl__reward-trigger {
	color: var(--pcl-muted);
	font-size: 12px;
}

.tss-pcl__reward-outcome {
	color: var(--pcl-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.tss-pcl__reward-trigger {
	border-left: 2px solid var(--pcl-ink);
	padding-left: 14px;
	font-weight: 800;
}

.tss-pcl__rank-register {
	border-left: 3px solid var(--pcl-ink);
	padding: 28px 24px;
	background: var(--pcl-sage);
}

.tss-pcl__rank-register h2 { margin-bottom: 10px; font-size: 30px; }

.tss-pcl__rank-register > p {
	margin-bottom: 18px;
	color: #34443e;
	font-size: 13px;
}

.tss-pcl__rank-register ol { padding: 0; list-style: none; }

.tss-pcl__rank-register li {
	display: grid;
	grid-template-columns: 29px 1fr;
	gap: 11px;
	border-top: 1px solid rgba(17, 17, 15, 0.28);
	padding: 12px 0;
}

.tss-pcl__rank-register li > span {
	display: grid;
	width: 27px;
	height: 27px;
	place-items: center;
	border: 2px solid var(--pcl-ink);
	border-radius: 50%;
	background: var(--pcl-paper);
	font-size: 11px;
	font-weight: 900;
}

.tss-pcl__rank-register strong { display: block; font-size: 13px; font-weight: 900; }
.tss-pcl__rank-register li p { margin-top: 2px; color: #3f4f49; font-size: 11px; }

.tss-pcl__example {
	display: grid;
	grid-template-columns: 205px minmax(0, 1fr) 230px;
	border: 2px solid var(--pcl-ink);
	background: var(--pcl-paper);
}

.tss-pcl__example > header,
.tss-pcl__example-total { padding: 18px; }
.tss-pcl__example > header { border-right: 1px solid var(--pcl-line); }
.tss-pcl__example h2 { margin-bottom: 7px; font-size: 25px; }
.tss-pcl__example > header p { font-size: 12px; }

.tss-pcl__example ol {
	display: grid;
	grid-template-columns: repeat(5, minmax(120px, 1fr));
	padding: 0;
	list-style: none;
}

.tss-pcl__example li {
	display: grid;
	align-content: start;
	gap: 12px;
	border-right: 1px solid var(--pcl-line);
	padding: 18px 14px;
}

.tss-pcl__example li > span {
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border: 1px solid var(--pcl-ink);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 900;
}

.tss-pcl__example li div { display: grid; gap: 2px; }
.tss-pcl__example li strong { font-size: 12px; }
.tss-pcl__example li small { color: var(--pcl-muted); font-size: 10px; line-height: 1.35; }

.tss-pcl__example-total {
	display: grid;
	align-content: center;
	gap: 8px;
	background: var(--pcl-yellow);
}
.tss-pcl__example-total > strong { font-size: 14px; font-weight: 900; }
.tss-pcl__example-total p { font-size: 12px; }
.tss-pcl__example-total a { font-size: 12px; }

.tss-pcl__reading {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 3px solid var(--pcl-ink);
}

.tss-pcl__reading > section {
	display: grid;
	align-content: start;
	gap: 15px;
	border-right: 1px solid var(--pcl-line);
	border-bottom: 1px solid var(--pcl-line);
	padding: clamp(24px, 3vw, 38px);
}

.tss-pcl__reading > section:nth-child(2n) { border-right: 0; }
.tss-pcl__reading h2 { font-size: clamp(27px, 3vw, 39px); }
.tss-pcl__reading p { max-width: 72ch; color: #3d3a33; line-height: 1.65; }

.tss-pcl__data-list {
	display: grid;
	border-top: 2px solid var(--pcl-ink);
}

.tss-pcl__data-list > div {
	display: grid;
	grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr);
	gap: 18px;
	border-bottom: 1px solid var(--pcl-line);
	padding: 11px 0;
}

.tss-pcl__data-list strong { font-size: 13px; }
.tss-pcl__data-list span { color: var(--pcl-muted); font-size: 13px; }

.tss-pcl__faq {
	display: grid;
	gap: 0;
	max-width: 980px;
	margin: 0 auto;
	padding: clamp(18px, 3vw, 34px) 0;
}

.tss-pcl__faq h2 { margin-bottom: 22px; }

.tss-pcl__faq details { border-top: 1px solid var(--pcl-ink); }
.tss-pcl__faq details:last-child { border-bottom: 1px solid var(--pcl-ink); }

.tss-pcl__faq summary {
	min-height: 52px;
	padding: 15px 40px 15px 0;
	font-weight: 850;
	cursor: pointer;
}

.tss-pcl__faq details p {
	max-width: 76ch;
	padding: 0 36px 20px 0;
	color: var(--pcl-muted);
	line-height: 1.6;
}

.tss-pcl__plain-terms {
	display: grid;
	grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
	gap: 28px;
	border: 2px solid var(--pcl-ink);
	padding: clamp(22px, 3vw, 34px);
	background: var(--pcl-paper);
}

.tss-pcl__plain-terms h2 { margin-bottom: 8px; font-size: 31px; }
.tss-pcl__plain-terms p,
.tss-pcl__plain-terms li { color: var(--pcl-muted); }
.tss-pcl__plain-terms ul { display: grid; gap: 9px; padding-left: 20px; }
.tss-pcl__plain-terms > a { grid-column: 2; }

@media (max-width: 1020px) {
	.tss-pcl__ledger { grid-template-columns: minmax(0, 1fr) 300px; }
	.tss-pcl__reward-row { grid-template-columns: 130px minmax(0, 1fr); }
	.tss-pcl__reward-trigger { grid-column: 2; border-top: 1px solid var(--pcl-line); border-left: 0; padding: 8px 0 0; }
	.tss-pcl__example { grid-template-columns: 190px minmax(0, 1fr); }
	.tss-pcl__example-total { grid-column: 1 / -1; border-top: 2px solid var(--pcl-ink); }
}

@media (max-width: 780px) {
	.tss-pcl { gap: 24px; }
	.tss-pcl__hero { grid-template-columns: 1fr; gap: 22px; }
	.tss-pcl__hero h1 { font-size: clamp(42px, 12vw, 62px); }
	.tss-pcl__actions { display: grid; grid-template-columns: 1fr; }
	.tss-pcl__button { width: 100%; }
	.tss-pcl__contents { flex-wrap: nowrap; overflow-x: auto; }
	.tss-pcl__contents a { flex: 0 0 auto; }
	.tss-pcl__ledger { grid-template-columns: 1fr; box-shadow: 5px 5px 0 rgba(17, 17, 15, 0.22); }
	.tss-pcl__rank-register { border-top: 3px solid var(--pcl-ink); border-left: 0; }
	.tss-pcl__section-head { grid-template-columns: 1fr; gap: 9px; }
	.tss-pcl__reward-row { grid-template-columns: 1fr; gap: 8px; }
	.tss-pcl__reward-trigger { grid-column: auto; }
	.tss-pcl__example { grid-template-columns: 1fr; }
	.tss-pcl__example > header { border-right: 0; border-bottom: 2px solid var(--pcl-ink); }
	.tss-pcl__example ol { grid-template-columns: 1fr; }
	.tss-pcl__example li { grid-template-columns: 28px minmax(0, 0.7fr) minmax(0, 1fr); gap: 10px; border-right: 0; border-bottom: 1px solid var(--pcl-line); }
	.tss-pcl__example-total { grid-column: auto; }
	.tss-pcl__reading { grid-template-columns: 1fr; }
	.tss-pcl__reading > section { border-right: 0; }
	.tss-pcl__plain-terms { grid-template-columns: 1fr; }
	.tss-pcl__plain-terms > a { grid-column: auto; }
}

@media (max-width: 480px) {
	.tss-pcl__reward-sheet,
	.tss-pcl__rank-register { padding: 21px 17px; }
	.tss-pcl__reading > section { padding: 25px 2px; }
	.tss-pcl__data-list > div { grid-template-columns: 1fr; gap: 3px; }
	.tss-pcl__example li { grid-template-columns: 26px minmax(0, 1fr); }
	.tss-pcl__example li > div:last-child { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.tss-pcl__button { transition: none; }
}