/* InkTells — "ink on paper" design system */
:root {
	--ink-navy: #1e2a55;
	--ink-navy-soft: #2f3f78;
	--ink-gold: #c99a2e;
	--ink-gold-light: #e9b949;
	--ink-text: #141a2e;
	--ink-cream: #faf6ec;
	--ink-cream-deep: #f2ead6;
	--ink-green: #2e8b57;
	--ink-hairline: #e7dfca;
	--ink-radius: 14px;
}

.inktells-landing,
.inktells-form-wrap {
	font-family: 'Inter', 'Noto Sans', system-ui, sans-serif;
	color: var(--ink-text);
	line-height: 1.65;
}
.inktells-landing h1,
.inktells-landing h2,
.inktells-landing h3,
.inktells-form-wrap h3 {
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--ink-navy);
	line-height: 1.3;
}

.inktells-wordmark {
	font-family: 'Caveat', cursive;
	font-size: 2rem;
	font-weight: 600;
	color: var(--ink-navy);
	letter-spacing: 0.5px;
}
.inktells-wordmark span { color: var(--ink-gold); }

/* Hero */
.ink-hero {
	background: linear-gradient(180deg, #2f3f78 0%, #1e2a55 55%, #141a2e 100%);
	border-radius: var(--ink-radius);
	padding: 58px 24px 50px;
	text-align: center;
	color: var(--ink-cream);
	max-width: 980px;
	margin: 0 auto;
}
.ink-hero-mark { color: var(--ink-cream); font-size: 2.4rem; }
.ink-hero h1 {
	color: var(--ink-cream);
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	max-width: 680px;
	margin: 18px auto 12px;
}
.ink-sub { max-width: 560px; margin: 0 auto 26px; color: var(--ink-cream-deep); }
.ink-microcopy { margin-top: 14px; font-size: 0.85rem; color: var(--ink-cream-deep); }

/* Sections */
.ink-section { padding: 56px 8px; max-width: 980px; margin: 0 auto; }
.ink-section h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 32px; }
.ink-center { text-align: center; max-width: 560px; margin: -20px auto 28px; }
.ink-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ink-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ink-feature {
	background: var(--ink-cream);
	border: 1px solid var(--ink-hairline);
	border-radius: var(--ink-radius);
	padding: 24px;
}
.ink-feature h3 { font-size: 1.05rem; margin: 10px 0 6px; }
.ink-feature p { margin: 0; font-size: 0.94rem; color: var(--ink-navy-soft); }
.ink-feature-icon { font-size: 1.6rem; }
.ink-step-num {
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--ink-gold); color: var(--ink-navy);
	font-weight: 700; display: flex; align-items: center; justify-content: center;
	font-family: 'Poppins', sans-serif;
}
.ink-disclaimer {
	max-width: 720px; margin: 24px auto 48px; text-align: center;
	font-size: 0.8rem; color: var(--ink-navy-soft);
}

/* Quiz */
.ink-quiz-section { background: var(--ink-cream-deep); border-radius: var(--ink-radius); }
.ink-quiz { max-width: 480px; margin: 0 auto; }
.ink-quiz-q button {
	display: block; width: 100%; margin: 8px 0; padding: 12px 16px;
	background: #fff; border: 1px solid var(--ink-hairline);
	border-radius: 12px; cursor: pointer; font-size: 0.98rem;
	font-family: inherit; color: var(--ink-text); text-align: left;
	transition: border-color .15s, transform .15s;
}
.ink-quiz-q button:hover { border-color: var(--ink-gold); transform: translateY(-1px); }
.ink-quiz-nudge { font-size: 0.85rem; color: var(--ink-navy-soft); }

/* Card + form */
.inktells-card {
	background: var(--ink-cream);
	border: 1px solid var(--ink-hairline);
	border-radius: var(--ink-radius);
	padding: 32px;
	max-width: 520px;
	margin: 0 auto;
	box-shadow: 0 8px 30px rgba(30, 42, 85, 0.08);
}
.inktells-card-head { text-align: center; margin-bottom: 20px; }
.inktells-card-head h3 { margin: 8px 0 4px; font-size: 1.25rem; }
.inktells-price-line { margin: 0; font-size: 0.94rem; color: var(--ink-navy-soft); }
.inktells-price-line b { color: var(--ink-green); }

.inktells-steps {
	list-style: none; display: flex; justify-content: center; gap: 10px;
	padding: 0; margin: 18px 0 0;
}
.inktells-steps li {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--ink-cream-deep); border: 1px solid var(--ink-hairline);
	color: var(--ink-navy-soft); font-size: 0.85rem; font-weight: 600;
	display: flex; align-items: center; justify-content: center;
}
.inktells-steps li.on { background: var(--ink-gold); color: var(--ink-navy); border-color: var(--ink-gold); }
.inktells-steps li.done { background: var(--ink-green); color: #fff; border-color: var(--ink-green); }

.inktells-form-wrap label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.92rem; color: var(--ink-navy); }
.inktells-form-wrap input[type="text"],
.inktells-form-wrap input[type="email"],
.inktells-form-wrap input[type="tel"],
.inktells-form-wrap input[type="number"],
.inktells-form-wrap select {
	display: block; width: 100%; margin-top: 6px; padding: 11px 14px;
	border: 1px solid var(--ink-hairline); border-radius: 12px;
	background: #fff; font-size: 1rem; font-family: inherit; color: var(--ink-text);
	box-sizing: border-box;
}
.inktells-form-wrap input:focus,
.inktells-form-wrap select:focus { outline: 2px solid var(--ink-gold-light); border-color: var(--ink-gold); }
.inktells-row { display: flex; gap: 10px; }
.inktells-row label { flex: 1; }
.inktells-hint { display: block; font-weight: 400; font-size: 0.82rem; color: var(--ink-navy-soft); margin: 2px 0 6px; }
.inktells-hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; opacity: 0; }
.inktells-preview { max-width: 100%; border-radius: 12px; border: 1px solid var(--ink-hairline); margin-bottom: 12px; }
.inktells-tip { font-size: 0.85rem; color: var(--ink-navy-soft); }
.inktells-secure { text-align: center; font-size: 0.8rem; color: var(--ink-navy-soft); margin-top: 14px; }

.inktells-btn {
	display: inline-block; background: var(--ink-gold); color: var(--ink-navy);
	border: 0; border-radius: 12px; padding: 13px 30px;
	font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
	cursor: pointer; text-decoration: none; transition: background .15s, transform .15s;
}
.inktells-btn:hover { background: var(--ink-gold-light); transform: translateY(-1px); color: var(--ink-navy); }
.inktells-btn[disabled] { opacity: 0.6; cursor: wait; }
.inktells-btn-ghost {
	background: transparent; border: 1px solid var(--ink-hairline);
	border-radius: 12px; padding: 13px 18px; cursor: pointer; color: var(--ink-navy-soft);
}
.inktells-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ink-cta { font-size: 1.1rem; }

.inktells-error {
	background: #fbdcdc; color: #8f1d1d; border-radius: 12px;
	padding: 12px 16px; margin-top: 14px; font-size: 0.92rem;
}
.inktells-thankyou { text-align: center; padding: 20px 0; }
.inktells-check {
	width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 14px;
	background: var(--ink-green); color: #fff; font-size: 2rem;
	display: flex; align-items: center; justify-content: center;
}

@media (max-width: 560px) {
	.inktells-card { padding: 22px; }
	.inktells-row { flex-direction: column; gap: 0; }
	.ink-hero { padding: 44px 18px; }
}

/* ===================== RICH LANDING (standalone design) ===================== */
.inktells-landing { background: #faf6ec; padding: 0 0 30px; }
.inktells-landing .ink-section { padding: 46px 18px; max-width: 1020px; margin: 0 auto; }

/* Kickers & headings */
.ink-kicker { display: table; margin: 0 auto 12px; font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-navy-soft); background: #eee4c9; padding: 6px 14px; border-radius: 99px; text-align: center; }
.ink-kicker-dark { background: rgba(255,255,255,.14); color: #fff; }
.ink-h2-light { color: #fff !important; }
.ink-center-light { color: #d9dcec !important; }
.ink-stars { color: var(--ink-gold-light); letter-spacing: 3px; font-size: 1rem; text-align: center; margin-bottom: 8px; }
.ink-mt { margin-top: 22px; }

/* Hero */
.ink-hero { background: linear-gradient(180deg, #2f3f78 0%, #1e2a55 55%, #141a2e 100%); border-radius: 0 0 26px 26px; padding: 54px 20px 48px; text-align: center; color: var(--ink-cream); }
.ink-hero h1 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); max-width: 720px; margin: 14px auto 12px; }
.ink-sub { max-width: 600px; margin: 0 auto 22px; color: #d9dcec; }
.ink-microcopy { margin-top: 12px; font-size: .84rem; color: #c3c8dd; text-align: center; }

/* Handwriting mockup card */
.ink-mock { margin: 6px auto 20px; max-width: 300px; }
.ink-mock-card { background: #fff; border-radius: 14px; padding: 20px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.4); transform: rotate(-1.5deg); }
.ink-mock-k { font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--ink-navy-soft); }
.ink-mock-hw { font-family: 'Caveat', 'Segoe Script', cursive; color: var(--ink-navy); font-size: 1.5rem; line-height: 1.4; border-bottom: 1px dashed #cbd0e0; padding: 6px 0 10px; margin-bottom: 10px; }
.ink-mock-bar { height: 8px; background: #e7e9f2; border-radius: 6px; margin: 7px 0; }
.ink-mock-bar.s { width: 62%; }

/* Chips + price */
.ink-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 2px auto 16px; max-width: 620px; }
.ink-chips span { background: rgba(255,255,255,.10); border: 1px solid rgba(233,185,73,.4); color: #fff; font-size: .78rem; font-weight: 700; padding: 7px 13px; border-radius: 99px; }
.ink-chips span::before { content: "\2713  "; color: var(--ink-gold-light); font-weight: 800; }
.ink-price { display: flex; align-items: baseline; gap: 10px; justify-content: center; margin: 4px 0 16px; }
.ink-price .was { color: #a9afc8; text-decoration: line-through; font-size: 1.15rem; }
.ink-price .now { color: var(--ink-gold-light); font-size: 2.5rem; font-weight: 800; font-family: 'Poppins', sans-serif; line-height: 1; }
.ink-price .off { background: var(--ink-green); color: #fff; font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: 6px; align-self: center; }

/* Buttons — gold pill */
.inktells-btn { display: inline-block; background: linear-gradient(180deg, var(--ink-gold-light), var(--ink-gold)); color: var(--ink-navy); border: 0; border-radius: 99px; padding: 15px 34px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.02rem; cursor: pointer; text-decoration: none; box-shadow: 0 8px 22px rgba(201,154,46,.42); transition: transform .15s; }
.inktells-btn:hover { transform: translateY(-2px); color: var(--ink-navy); }

/* Trust strip */
.ink-trust { padding-top: 18px !important; padding-bottom: 6px !important; }
.ink-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; text-align: center; }
.ink-trust-grid div { background: #fffdf8; border: 1px solid var(--ink-hairline); border-radius: 12px; padding: 14px 10px; }
.ink-trust-grid b { display: block; font-size: 1.4rem; }
.ink-trust-grid small { font-weight: 700; color: var(--ink-navy); font-size: .82rem; }

/* Curiosity list */
.ink-plist { display: grid; gap: 10px; max-width: 680px; margin: 0 auto; }
.ink-pitem { background: #fffdf8; border: 1px solid var(--ink-hairline); border-left: 4px solid var(--ink-gold); border-radius: 12px; padding: 13px 16px; font-weight: 600; color: var(--ink-navy); }

/* Cream band sections */
.ink-band-cream { background: var(--ink-cream-deep); border-radius: 22px; max-width: 1020px; }

/* Feature cards */
.ink-feature { background: #fffdf8; box-shadow: 0 4px 16px rgba(30,42,85,.06); }

/* Quiz dark band */
.ink-quiz-section { background: linear-gradient(180deg, #141a2e, #1e2a55); border-radius: 22px; padding: 50px 20px !important; }

/* How-it-works note */
.ink-note { max-width: 680px; margin: 20px auto 0; background: #fbf6e8; border: 1px solid #ecdfba; border-radius: 12px; padding: 12px 16px; font-size: .9rem; color: var(--ink-navy-soft); }

/* Peek cards */
.ink-peek-t { font-weight: 800; color: var(--ink-navy); margin-bottom: 10px; font-size: .95rem; }
.ink-peek-bar { height: 8px; background: #ece5cf; border-radius: 5px; margin: 7px 0; }
.ink-peek-bar.w80 { width: 80%; } .ink-peek-bar.w60 { width: 60%; filter: blur(1px); }

/* Guarantee */
.ink-guar { border: 2px solid var(--ink-green) !important; text-align: center; max-width: 560px !important; }
.ink-guar-ic { font-size: 2.1rem; }
.ink-guar h3 { margin: 6px 0; }
.ink-guar p { margin: 0; color: var(--ink-navy-soft); font-size: .94rem; }

/* FAQ */
.ink-faq { max-width: 680px; margin: 0 auto; }
.ink-faq details { background: #fffdf8; border: 1px solid var(--ink-hairline); border-radius: 12px; padding: 13px 18px; margin-bottom: 10px; }
.ink-faq summary { font-weight: 700; color: var(--ink-navy); cursor: pointer; }
.ink-faq p { margin: 8px 0 0; color: var(--ink-navy-soft); font-size: .93rem; }

/* Final CTA */
.ink-final { background: linear-gradient(180deg, #2f3f78, #141a2e); border-radius: 22px; text-align: center; color: #fff; }

/* Footer */
.ink-footer { margin: 26px auto 0; padding: 24px 16px 10px; border-top: 1px solid var(--ink-hairline); text-align: center; font-size: .8rem; color: #5b5744; line-height: 1.7; max-width: 860px; }
.ink-foot-brand { font-weight: 800; color: var(--ink-navy); font-size: .95rem; margin-bottom: 4px; }
.ink-footer a { color: var(--ink-navy-soft); }

/* Sticky CTA */
#inktells-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; background: #fffdf8; border-top: 1px solid var(--ink-hairline); box-shadow: 0 -4px 16px rgba(0,0,0,.12); padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 14px; transform: translateY(130%); transition: transform .3s ease; }
#inktells-sticky-cta.on { transform: translateY(0); }
.ink-sticky-price { font-weight: 800; color: var(--ink-navy); font-size: 1.15rem; }
.ink-sticky-was { color: #a9afc8; text-decoration: line-through; font-size: .85rem; font-weight: 600; }
#inktells-sticky-cta a { background: linear-gradient(180deg, var(--ink-gold-light), var(--ink-gold)); color: var(--ink-navy); font-weight: 800; text-decoration: none; padding: 12px 26px; border-radius: 99px; font-size: .95rem; }

@media (max-width: 560px) {
	.inktells-landing .ink-section { padding: 36px 14px; }
	.ink-price .now { font-size: 2.1rem; }
}