/* ==========================================================================
   Storyshine — About page styles (about.css)
   Loaded only on about.html, after base.css. Sections in page order:
   hero · why we built PY · what we believe · more than one Story · vision
   (The closing CTA uses the shared .final-cta from base.css.)
   ========================================================================== */

/* Hero ===================================================================== */
.about-hero {
	position: relative;
	overflow: hidden;
	padding: 96px 0 72px;
	background: radial-gradient(760px 460px at 12% 0%, var(--tint-yellow-2) 0%, rgba(255, 241, 191, 0) 70%),  radial-gradient(760px 520px at 90% 20%, var(--tint-blush-2) 0%, rgba(252, 227, 220, 0) 70%);
}
.about-hero__ring {
	position: absolute;
	right: -180px;
	top: -160px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	border: 2px dashed rgba(221, 51, 36, 0.22);
}
.about-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.about-hero__title {
	margin-top: 22px;
	max-width: 1080px;
	font-size: 68px;
	line-height: 1.02;
}
.about-hero__line {
	display: block;
}
.about-hero__line + .about-hero__line {
	margin-top: 14px;
}
.about-hero__intro {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	max-width: 920px;
	text-align: left;
}
.about-hero__intro .lead {
	padding-top: 18px;
	border-top: 2px solid var(--line-strong);
}
.about-hero__intro .about-hero__em {
	border-top-color: var(--red);
}
/* Why we built PY ============================================================ */
.why__title {
	margin-top: 16px;
}
.why__body {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.why__lead {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-size: 40px;
	line-height: 1.08;
}
.old-way {
	padding: 28px;
	border-radius: var(--r-lg);
	background: var(--tint-sand);
}
.old-way__text {
	font-size: 19px;
	line-height: 1.55;
	color: var(--text);
}
.old-way__list {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.old-way__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--r-pill);
	background: var(--white);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-faint);
}
.old-way__item span {
	text-decoration: line-through;
	text-decoration-color: var(--red);
}
.why__answer {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-size: 32px;
	line-height: 1.1;
	color: var(--red);
}
.why__answer-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--red);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* What we believe (dark band) =================================================== */
.belief {
	margin-top: var(--section-gap);
	padding: 120px 0;
	color: var(--white);
	background: radial-gradient(700px 400px at 90% 0%, rgba(221, 51, 36, 0.3) 0%, rgba(221, 51, 36, 0) 70%),  radial-gradient(600px 400px at 0% 100%, rgba(253, 209, 40, 0.14) 0%, rgba(253, 209, 40, 0) 70%),  var(--ink);
}
.belief__title {
	margin-top: 18px;
	max-width: 980px;
	color: var(--white);
}
.belief__tiles {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.belief-tile {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 26px;
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease, background-color 0.3s ease;
}
.belief-tile:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.09);
}
.belief-tile__label {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-size: 28px;
	line-height: 1.05;
}
.belief__closing {
	margin-top: 40px;
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-size: 30px;
	color: var(--yellow);
}
/* More than one Story ============================================================ */
.more__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: center;
}
.more__title {
	margin-top: 16px;
}
.type-pills {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.type-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: var(--r-pill);
	background: var(--white);
	border: 1px solid var(--line);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	box-shadow: var(--shadow-card);
}
.type-pill .icon {
	color: var(--red);
}
.type-pill .bi {
	font-size: 20px;
	color: var(--red);
}
.more__text {
	margin-top: 32px;
	max-width: 480px;
}
.more__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	border-radius: 32px;
	border: 1px solid var(--line);
	background: radial-gradient(420px 320px at 30% 20%, var(--tint-yellow-2) 0%, rgba(255, 241, 191, 0) 70%),  radial-gradient(420px 320px at 80% 90%, var(--tint-blush-2) 0%, rgba(252, 227, 220, 0) 70%),  var(--white);
}
.more__img {
	width: 100%;
	max-width: 460px;
}
/* Vision ============================================================================ */
.vision {
	padding-bottom: var(--section-gap);
}
.vision__timeline {
	margin-top: 52px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 20px;
}
.vision-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 36px;
	border-radius: 32px;
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
}
.vision-card--next {
	background: var(--tint-yellow);
	border-color: transparent;
}
.vision-card__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--red-dark);
}
.vision-card--next .vision-card__label {
	color: var(--gold);
}
.vision-card__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--red);
}
.vision-card--next .vision-card__dot {
	background: var(--yellow);
	box-shadow: 0 0 0 4px rgba(253, 209, 40, 0.35);
}
.vision-card__text {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-size: 30px;
	line-height: 1.12;
}
.vision__arrow {
	align-self: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--red);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-red);
}

/* Motion ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
.about-hero__ring {
	animation: spin 50s linear infinite;
}
.vision-card--next .vision-card__dot {
	animation: ring-pulse 2.2s ease-out infinite;
}
.vision__arrow .icon {
	animation: nudge 1.8s ease-in-out infinite;
}
}

/* Responsive ======================================================================== */
@media (max-width: 1024px) {
.about-hero__title {
	font-size: 56px;
}
.belief__tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
 @media (max-width: 760px) {
.about-hero {
	padding: 48px 0 32px;
}
.about-hero__ring {
	width: 320px;
	height: 320px;
	right: -140px;
	top: -120px;
}
.about-hero__title {
	font-size: 36px;
}
.about-hero__line + .about-hero__line {
	margin-top: 10px;
}
.about-hero__intro {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: 28px;
}
.why__lead {
	font-size: 28px;
}
.old-way {
	padding: 20px;
}
.old-way__text {
	font-size: 16px;
}
.old-way__item {
	font-size: 13px;
	padding: 8px 12px;
}
.why__answer {
	font-size: 24px;
}
.why__answer-icon {
	width: 38px;
	height: 38px;
}
.belief {
	padding: 64px 0;
}
.belief__tiles {
	gap: 10px;
	margin-top: 32px;
}
.belief-tile {
	padding: 18px;
	gap: 24px;
	border-radius: 20px;
}
.belief-tile .bi {
	color: #000000;
}
.belief-tile__label {
	font-size: 20px;
}
.belief__closing {
	font-size: 22px;
	margin-top: 28px;
}
.more__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}
.type-pills {
	margin-top: 24px;
	gap: 8px;
}
.type-pill {
	font-size: 14px;
	padding: 10px 14px;
}
.more__text {
	margin-top: 24px;
}
.more__visual {
	padding: 16px;
	border-radius: 24px;
}
.more__img {
	max-width: 320px;
}
.vision__timeline {
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 32px;
}
.vision-card {
	padding: 24px;
	border-radius: 24px;
}
.vision-card__text {
	font-size: 22px;
}
.vision__arrow {
	justify-self: center;
	width: 52px;
	height: 52px;
	transform: rotate(90deg);
}
}