/* app.css — the application's stylesheet (structure + components).
   It is brand-agnostic: every colour and font is a CSS custom property defined
   once in the :root block below. The identity *words* live in package brand.

   ┌─────────────────────────────────────────────────────────────────────────┐
   │  BRAND TOKENS — edit this block to adopt finalised brand guidelines.      │
   └─────────────────────────────────────────────────────────────────────────┘

   Direction: "tutu — Connection That Counts." tutu is a UK guarantor-loan brand:
   every loan starts with a connection between a borrower and the guarantor who
   believes in them. Two sides, one force. The system is deliberately four
   colours — Tutu Pink (the signature warm field + CTAs), Deep Plum (weight,
   trust, all dark chrome and text), Neutral Beige (calm page), White (cards).
   Depth comes from colour-blocking and hairlines, not shadow. Headlines and
   buttons are ALL-CAPS Archivo Black; supportive copy is Instrument Sans.
   The borrower reads in pink; the guarantor is the plum backer behind them. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

:root {
	/* text — plum is the trust colour and does all the reading work */
	--ink: #1F0713;        /* tutu plum — headings + body */
	--ink-soft: #4A2C38;   /* softened plum — leads, labels, secondary body */
	--muted: #7A5563;      /* muted plum — captions, hints, range bounds */
	/* surfaces */
	--paper: #F3E3CA;      /* neutral beige — page background (calm, warm) */
	--paper-2: #EAD7B9;    /* deeper beige — muted surfaces, progress track */
	--card: #FFFFFF;       /* white — cards, nav, modals */
	--line: rgba(31, 7, 19, 0.12); /* plum hairline — all borders & dividers */
	/* primary = brand / the borrower (Tutu Pink) */
	--primary: #F18BBE;
	--primary-700: #1F0713;  /* plum — for primary-coloured TEXT on light (links, headings, figures) */
	--primary-hover: #EB78B0; /* deeper campaign pink — hover / active */
	--primary-100: #FBE4EF;  /* pale pink tint — soft fills */
	--primary-rgb: 241, 139, 190;
	--deep-water: #1F0713;   /* plum — dark sections: loan summary, footer */
	/* accent = the guarantor persona (plum — weight, trust, the backer) */
	--accent: #1F0713;
	--accent-600: #1F0713;   /* plum text for the guarantor scope */
	--accent-100: #F3E3CA;   /* beige tint for guarantor light fills */
	/* functional warning (guarantor risk disclosure) — coral, used minimally */
	--danger: #FF484B;
	/* highlight (kept for the risk callout) */
	--gold: #F18BBE;
	/* type */
	--font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;

	/* ---- structural tokens (not brand colours) ---- */
	--radius: 24px;        /* content cards — tutu's rounded surfaces */
	--radius-sm: 14px;     /* inputs, info cards — nested-card feel */
	--radius-pill: 1000px; /* buttons, nav, progress, step segments — fully round */
	--shadow: 0 18px 48px rgba(31, 7, 19, 0.14);      /* floating UI only (the quote card) */
	--shadow-sm: 0 1px 2px rgba(31, 7, 19, 0.04);     /* near-flat — depth is colour, not shadow */

	/* map Bootstrap's primary onto our token */
	--bs-primary: var(--primary);
	--bs-primary-rgb: var(--primary-rgb);
}

/* ---- base ---- */
.app-body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary-100); }

h1, h2, h3, .h3 {
	font-family: var(--font-display);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ink);
}
.h5, .h6 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ink);
}

a { color: var(--primary-700); font-weight: 600; }

/* ---- nav ---- */
.app-nav {
	background: var(--card);
	border-bottom: 1px solid var(--line);
	padding: 0.85rem 0;
}
.app-wordmark {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.7rem;
	letter-spacing: -0.06em;
	text-transform: lowercase;   /* the tutu wordmark is always lowercase */
	color: var(--ink);
	text-decoration: none;
}
/* the wordmark mark: a single Tutu Pink accent */
.app-wordmark-dot { color: var(--primary); }

/* primary nav links */
.app-nav-links { gap: 1.9rem; }
.app-nav-links > a {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--muted);
	text-decoration: none;
}
.app-nav-links > a:hover { color: var(--ink); }

/* ---- buttons ---- */
.btn {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
}
.btn-primary,
.app-btn {
	--bs-btn-color: var(--ink);          /* plum label on a pink pill */
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-color: var(--ink);
	--bs-btn-hover-bg: var(--primary-hover);
	--bs-btn-hover-border-color: var(--primary-hover);
	--bs-btn-active-color: var(--ink);
	--bs-btn-active-bg: var(--primary-hover);
	--bs-btn-active-border-color: var(--primary-hover);
	--bs-btn-disabled-color: var(--ink);
	--bs-btn-disabled-bg: var(--primary);
	--bs-btn-disabled-border-color: var(--primary);
	border-radius: var(--radius-pill);
	padding: 0.7rem 1.7rem;
}
.btn-outline-primary {
	--bs-btn-color: var(--ink);
	--bs-btn-border-color: var(--ink);
	--bs-btn-hover-bg: var(--ink);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-border-color: var(--ink);
	--bs-btn-active-bg: var(--ink);
	--bs-btn-active-border-color: var(--ink);
	border-radius: var(--radius-pill);
}
.btn-outline-secondary {
	--bs-btn-color: var(--muted);
	--bs-btn-border-color: var(--line);
	--bs-btn-hover-bg: var(--primary-100);
	--bs-btn-hover-color: var(--ink);
	--bs-btn-hover-border-color: var(--line);
	border-radius: var(--radius-pill);
}

/* ---- hero ---- */
.app-hero { padding: 4rem 0 3.5rem; }
.app-eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink);
	margin-bottom: 1rem;
}
.app-hero-title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2.4rem, 5.4vw, 3.8rem);
	line-height: 0.96;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin-bottom: 1.1rem;
}
.app-hero-lead {
	font-size: 1.12rem;
	color: var(--ink-soft);
	max-width: 32rem;
	margin-bottom: 1.4rem;
}
.app-ticks { list-style: none; padding: 0; margin: 0; }
.app-ticks li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.6rem;
	color: var(--ink-soft);
}
.app-ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.15em;
	width: 1.25rem; height: 1.25rem;
	border-radius: 50%;
	background: var(--primary);
}
.app-ticks li::after {
	content: "✓";
	position: absolute;
	left: 0.33rem; top: 0.05em;
	color: var(--ink);
	font-size: 0.78rem;
	font-weight: 700;
}

/* ---- quote card (the landing calculator — the signature elevated card) ---- */
.app-quote-card {
	background: var(--card);
	border-radius: 28px;
	padding: 1.7rem;
	box-shadow: var(--shadow);
	border: 1px solid var(--line);
}

/* ---- amount picker / slider ---- */
.app-picker .form-label { font-weight: 600; color: var(--ink); }
.app-picker-amount {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 2.1rem;
	color: var(--ink);
	letter-spacing: -0.03em;
}
.app-range { accent-color: var(--primary); }
.app-range::-webkit-slider-thumb { background: var(--primary); }
.app-range-bounds { color: var(--muted); font-size: 0.82rem; }
/* term selector: a pill track with pill segments; selected fills plum */
.app-term-group {
	display: flex;
	gap: 6px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 5px;
}
.app-term-group .btn {
	flex: 1 1 0;
	margin: 0;
	padding: 0.55rem 0;
	border: none;
	border-radius: var(--radius-pill);
	font-weight: 700;
	color: var(--muted);
	background: transparent;
}
.app-term-group .btn:hover { color: var(--ink); background: var(--primary-100); }
.app-term-group .btn-check:checked + .btn { background: var(--deep-water); color: #fff; }

/* ---- loan summary (the dark plum centrepiece) ---- */
.app-summary {
	background: var(--deep-water);
	color: #fff;
	border-radius: var(--radius);
	padding: 1.4rem 1.5rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--hairline, inset 0 0 0 1px rgba(255,255,255,0.14));
}
.app-summary::after {
	content: "";
	position: absolute;
	right: -2rem; top: -2rem;
	width: 6rem; height: 6rem;
	border-radius: 50%;
	background: var(--primary);   /* the pink borrower, orbiting the plum summary */
}
.app-summary-main { position: relative; z-index: 1; margin-bottom: 1rem; }
.app-summary-label {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.75;
}
.app-summary-amount {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 2.5rem;
	line-height: 1;
	display: block;
	letter-spacing: -0.03em;
}
.app-summary-sub { font-size: 0.9rem; opacity: 0.85; }
.app-summary-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem 1rem;
	margin: 0;
}
.app-summary-grid dt {
	font-weight: 500;
	font-size: 0.82rem;
	opacity: 0.78;
}
.app-summary-grid dd {
	margin: 0 0 0.4rem;
	font-weight: 700;
	font-size: 1.02rem;
}

/* ---- "how it works" steps ---- */
.app-steps { padding: 1rem 0 3.5rem; }
.app-step-num {
	width: 3rem; height: 3rem;
	margin: 0 auto 0.8rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--primary);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.3rem;
}

/* ---- journey ---- */
.app-journey { max-width: 860px; }
.app-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 2rem;
}
@media (max-width: 575.98px) { .app-card { padding: 1.3rem; } }

.app-section-heading {
	color: var(--ink);
	position: relative;
	padding-top: 0.4rem;
}
.app-section-heading::before {
	content: "";
	display: block;
	width: 2.4rem;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--primary);
	margin-bottom: 0.6rem;
}

/* ---- progress: a flat pink fill on a beige track ---- */
.app-step-label { color: var(--ink); font-weight: 600; }
.app-progress-bar { height: 8px; border-radius: var(--radius-pill); background: var(--paper-2); }
.app-progress-bar .progress-bar {
	background: var(--primary);
	border-radius: var(--radius-pill);
}

/* ---- guarantor step: the page shifts to the guarantor's plum (the backer) ---- */
.guarantor-scope .app-section-heading { color: var(--accent-600); }
.guarantor-scope .app-section-heading::before { background: var(--accent); }
.guarantor-scope .app-summary::after { background: var(--accent-100); }

/* ---- forms ---- */
.form-label { font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; }
.form-control, .form-select {
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--line);
	padding: 0.6rem 0.85rem;
}
.form-control:focus, .form-select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.35);
}
.form-text { color: var(--muted); }
.input-group-text {
	background: var(--primary-100);
	border: 1.5px solid var(--line);
	color: var(--ink);
	font-weight: 600;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* ---- SECCI ---- */
.app-secci {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 1.2rem 1.3rem;
}
.app-secci dt { font-weight: 500; color: var(--muted); padding-bottom: 0.35rem; }
.app-secci dd { font-weight: 700; padding-bottom: 0.35rem; }
.app-schedule { font-size: 0.9rem; }
.app-schedule thead th { color: var(--muted); font-weight: 700; border-color: var(--line); }

/* ---- success (a warm Tutu Pink confirmation — the connection made) ---- */
.app-tick {
	width: 4.2rem; height: 4.2rem;
	margin: 0 auto;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--primary);
	color: var(--ink);
	font-size: 2rem;
	box-shadow: 0 0 0 8px var(--primary-100);
}
.app-next {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 1.2rem 1.3rem;
}
.app-next li { margin-bottom: 0.35rem; color: var(--ink-soft); }

/* ---- guarantor-obligation block (pre-application disclosure) ---- */
.app-obligation {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--ink);
	background: var(--primary-100);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 0.85rem 1rem;
}

/* ---- demo hand-off link (surfaces stubbed email/notification links) ---- */
.app-demo-link {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 1rem 1.1rem;
	background: var(--primary-100);
	border: 1px dashed var(--primary);
	border-radius: var(--radius-sm);
}
.app-demo-tag {
	flex: none;
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink);
	background: var(--primary);
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill);
}
.app-demo-body a { word-break: break-all; }

/* ---- footer (the dark plum legal bar) ---- */
.app-footer {
	background: var(--deep-water);
	color: rgba(255, 255, 255, 0.72);
	padding: 2.2rem 0;
	margin-top: 3rem;
}
.app-footer p { max-width: 60rem; }

/* ---- guarantor risk callout (above the fold on the invitation) ---- */
.app-risk {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 5px solid var(--danger);
	border-radius: var(--radius-sm);
	padding: 1rem 1.1rem;
}
.app-risk h2 { color: var(--danger); }
.app-risk p { color: var(--ink); font-size: 0.95rem; }

/* ---- FAQ disclosures ---- */
.app-faq {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 0.7rem 0.9rem;
	margin-bottom: 0.6rem;
	background: var(--card);
}
.app-faq > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--ink);
	list-style: none;
}
.app-faq > summary::-webkit-details-marker { display: none; }
.app-faq > summary::after { content: "+"; float: right; color: var(--muted); font-weight: 700; }
.app-faq[open] > summary::after { content: "\2013"; }
.app-faq > p { margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }

/* ---- marketing: how it works + help ---- */
.app-mkt-hero { padding: 4.5rem 0 1.5rem; }
.app-mkt-narrow { max-width: 760px; }
.app-mkt-grid { max-width: 880px; }
.app-how-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 5px solid var(--primary);
	border-radius: var(--radius);
	padding: 1.6rem 1.7rem;
	height: 100%;
}
.app-how-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem; height: 2.6rem;
	border-radius: 50%;
	background: var(--primary);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.05rem;
}
.app-pullquote { background: var(--paper-2); margin-top: 3.5rem; border-radius: var(--radius); }
.app-pullquote-text {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1.06;
	margin: 0;
}

/* ---- accessibility ---- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }