/*
Theme Name: Scan2Return
Theme URI: https://scan2return.com
Author: Scan2Return
Author URI: https://scan2return.com
Description: A playful, colorful theme for Scan2Return — a QR-based lost-item recovery platform. Auto-creates its How It Works, Pricing, and Contact pages on activation. Includes a full-length Home page (benefits, dynamic categories/products, audience section, FAQ, newsletter), an illustrated How It Works page, and a complete WooCommerce Shop, Product, Cart, and Checkout experience.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: s2r
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
	--ink:#241C3D;
	--indigo:#2B2250;
	--coral:#FF6B5B;
	--coral-dark:#E5503F;
	--sunshine:#FFC857;
	--sunshine-soft:#FFF4DC;
	--mint:#3DDC97;
	--cloud:#FFF9F2;
	--paper:#FFFFFF;
	--line:#EDE0D2;
	--muted:#6E6485;

	--font-display:'Baloo 2', system-ui, sans-serif;
	--font-body:'Plus Jakarta Sans', system-ui, sans-serif;
	--font-mono:'Space Mono', ui-monospace, monospace;

	--radius-lg:28px;
	--radius-md:18px;
	--radius-sm:10px;
	--shadow-card:0 14px 30px -18px rgba(43,34,80,0.35);
	--shadow-pop:0 20px 40px -16px rgba(255,107,91,0.45);
	--container:1180px;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--ink);
	background:var(--cloud);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
	font-family:var(--font-display);
	color:var(--indigo);
	line-height:1.12;
	margin:0 0 0.5em;
	font-weight:700;
}
h1{ font-size:clamp(2.4rem, 5vw, 3.6rem); }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.5rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.screen-reader-text{
	position:absolute; width:1px; height:1px; overflow:hidden;
	clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link:focus{
	position:fixed; top:10px; left:10px; width:auto; height:auto;
	background:var(--indigo); color:#fff; padding:10px 18px; border-radius:8px; z-index:9999;
}
:focus-visible{ outline:3px solid var(--mint); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
	*{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.eyebrow{
	font-family:var(--font-mono);
	font-size:0.72rem;
	letter-spacing:0.14em;
	color:var(--coral-dark);
	margin:0 0 0.8em;
	font-weight:700;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	font-family:var(--font-display);
	font-weight:600;
	font-size:1rem;
	padding:14px 26px;
	border-radius:100px;
	border:2px solid transparent;
	cursor:pointer;
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
	white-space:nowrap;
}
.btn-primary{ background:var(--coral); color:#fff; box-shadow:var(--shadow-pop); }
.btn-primary:hover{ background:var(--coral-dark); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--indigo); color:var(--indigo); }
.btn-outline:hover{ background:var(--indigo); color:#fff; transform:translateY(-2px); }
.btn-text{ color:var(--coral-dark); font-family:var(--font-display); font-weight:600; }
.btn-sm{ padding:10px 18px; font-size:0.9rem; }
.btn-lg{ padding:18px 36px; font-size:1.1rem; }
.btn-block{ width:100%; }

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(255,249,242,0.9);
	backdrop-filter:blur(8px);
	border-bottom:2px solid var(--line);
}
.site-header-inner{
	display:flex; align-items:center; justify-content:space-between;
	padding:16px 24px;
	gap:24px;
}
.site-logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{
	position:relative; width:30px; height:30px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px;
	transform:rotate(45deg);
}
.logo-mark span{ background:var(--coral); border-radius:3px; }
.logo-mark span:nth-child(2){ background:var(--sunshine); }
.logo-mark span:nth-child(3){ background:var(--mint); }
.logo-mark span:nth-child(4){ background:var(--indigo); }
.logo-text{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--indigo); }

.site-nav .nav-menu{ display:flex; gap:32px; }
.site-nav .nav-menu a{
	font-weight:600; font-size:0.98rem; color:var(--ink);
	padding:8px 0; position:relative;
}
.site-nav .nav-menu a::after{
	content:''; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px;
	background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.site-nav .nav-menu a:hover::after{ transform:scaleX(1); }

.site-header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
	display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle-bar{ width:24px; height:3px; border-radius:3px; background:var(--indigo); transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3){ opacity:0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(4){ transform:translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   4. Hero
   ========================================================================== */
.hero{
	padding:72px 0 60px;
	background-image:radial-gradient(var(--line) 1.5px, transparent 1.5px);
	background-size:22px 22px;
}
.hero-inner{
	display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
.hero-copy .hero-sub{ font-size:1.1rem; color:var(--muted); max-width:520px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.hero-trust-row{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:24px; }
.hero-trust-row span{ font-family:var(--font-mono); font-size:0.8rem; color:var(--muted); }

.hero-visual{ position:relative; min-height:340px; }
.hero-tag{
	position:relative; width:230px; margin:0 auto;
	background:var(--paper); border-radius:24px 24px 24px 6px;
	padding:26px 20px 20px; box-shadow:var(--shadow-card);
	transform:rotate(-6deg);
	opacity:0; translate:0 16px;
	transition:opacity .6s ease, translate .6s ease, transform .6s ease;
}
.hero.is-ready .hero-tag{ opacity:1; translate:0 0; transform:rotate(-6deg); }
.hero-tag-hole{
	position:absolute; top:12px; left:50%; transform:translateX(-50%);
	width:16px; height:16px; border-radius:50%;
	background:var(--cloud); border:3px solid var(--line);
}
.hero-tag-qr{
	margin-top:16px; display:grid; grid-template-columns:repeat(9,1fr); gap:3px;
	background:var(--indigo); padding:10px; border-radius:10px;
}
.hero-tag-qr span{ aspect-ratio:1; background:var(--sunshine); border-radius:1px; }
.hero-tag-qr span:nth-child(3n){ background:var(--coral); }
.hero-tag-qr span:nth-child(5n){ background:var(--cloud); }
.hero-tag-qr span:nth-child(7n){ background:var(--mint); }
.hero-tag-label{
	font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.06em; color:var(--muted);
	text-align:center; margin:12px 0 0;
}
.hero-path{
	position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
}
.hero-path path{
	stroke-dasharray:400; stroke-dashoffset:400;
	transition:stroke-dashoffset 1.4s ease 0.3s;
}
.hero.is-ready .hero-path path{ stroke-dashoffset:0; }
.hero-bubble{
	position:absolute; right:0; bottom:18px; max-width:220px;
	background:var(--indigo); color:#fff; font-size:0.85rem; font-weight:600;
	padding:12px 16px; border-radius:16px 16px 4px 16px; box-shadow:var(--shadow-card);
	display:flex; align-items:center; gap:8px;
	opacity:0; translate:0 10px;
	transition:opacity .5s ease .9s, translate .5s ease .9s;
}
.hero.is-ready .hero-bubble{ opacity:1; translate:0 0; }
.hero-bubble-dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); flex:none; animation:s2r-pulse 1.6s infinite; }

@keyframes s2r-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(61,220,151,0.6);} 50%{ box-shadow:0 0 0 6px rgba(61,220,151,0);} }

/* ==========================================================================
   5. Stats strip
   ========================================================================== */
.stats-strip{ background:var(--indigo); padding:28px 0; }
.stats-strip-inner{
	display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--sunshine); font-weight:700; }
.stat-label{ font-size:0.8rem; color:rgba(255,255,255,0.75); font-family:var(--font-mono); letter-spacing:0.02em; }

/* ==========================================================================
   6. Generic sections
   ========================================================================== */
.section{ padding:88px 0; }
.section-head{ max-width:640px; margin:0 0 44px; }
.section-cta{ margin-top:36px; }

/* ==========================================================================
   7. Signature component — tag card
   ========================================================================== */
.tag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.tag-card{
	position:relative; background:var(--paper); border:2px solid var(--line);
	border-radius:6px var(--radius-md) var(--radius-md) var(--radius-md);
	padding:38px 26px 30px; box-shadow:var(--shadow-card);
	opacity:1; translate:0 0; transition:opacity .5s ease, translate .5s ease, transform .25s ease;
}
/* Non-commerce tag-cards (steps, testimonials) get a subtle entrance animation */
.tag-card:not(.product-card){ opacity:0; translate:0 18px; }
.tag-card:not(.product-card).is-visible{ opacity:1; translate:0 0; }
.tag-card:hover{ transform:rotate(-1deg) translateY(-4px); }
.tag-card-hole{
	position:absolute; top:14px; left:24px; width:14px; height:14px; border-radius:50%;
	background:var(--cloud); border:3px solid var(--line);
}
.tag-card-num{ font-family:var(--font-mono); color:var(--coral-dark); font-weight:700; font-size:0.9rem; }
.tag-card h3{ margin-top:10px; }
.tag-card p{ color:var(--muted); margin-bottom:0; }

/* ==========================================================================
   8. Use cases
   ========================================================================== */
.usecase-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.usecase-card{
	background:var(--paper); border-radius:var(--radius-md); padding:28px 22px;
	box-shadow:var(--shadow-card);
	opacity:0; translate:0 18px; transition:opacity .5s ease, translate .5s ease;
}
.usecase-card.is-visible{ opacity:1; translate:0 0; }
.usecase-icon{
	width:52px; height:52px; border-radius:16px; background:var(--sunshine-soft);
	display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.usecase-icon span{ display:block; background:var(--coral); border-radius:4px; }
.icon-luggage span{ width:22px; height:26px; border:3px solid var(--coral); background:transparent; border-radius:5px; }
.icon-keys span{ width:22px; height:22px; border-radius:50%; border:5px solid var(--coral); background:transparent; }
.icon-laptop span{ width:26px; height:18px; border-radius:3px; border:3px solid var(--coral); background:transparent; }
.icon-car span{ width:26px; height:14px; border-radius:8px 8px 3px 3px; border:3px solid var(--coral); background:transparent; }
.usecase-card p{ color:var(--muted); font-size:0.94rem; margin-bottom:0; }

/* Dynamic "shop by category" cards (WooCommerce categories) */
.category-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.category-card{
	display:block; background:var(--paper); border-radius:var(--radius-md); padding:22px;
	box-shadow:var(--shadow-card); text-align:left; transition:transform .2s ease, box-shadow .2s ease;
}
.category-card:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -18px rgba(43,34,80,0.4); }
.category-card-media{
	width:100%; aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px;
	background:var(--sunshine-soft); display:flex; align-items:center; justify-content:center;
}
.category-card-media img{ width:100%; height:100%; object-fit:cover; }
.category-card-fallback{ width:44px; height:44px; border-radius:12px; background:var(--paper); display:flex; align-items:center; justify-content:center; }
.category-card-fallback span{ width:20px; height:20px; border-radius:50%; border:4px solid var(--coral); }
.category-card h3{ margin-bottom:4px; font-size:1.15rem; }
.category-card-count{ font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); }

/* Benefits grid */
.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.benefit-card{
	background:var(--paper); border:2px solid var(--line); border-radius:var(--radius-md);
	padding:28px 24px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.benefit-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--coral); }
.benefit-icon{ font-size:1.8rem; display:block; margin-bottom:14px; }
.benefit-card h3{ font-size:1.1rem; margin-bottom:6px; }
.benefit-card p{ color:var(--muted); font-size:0.94rem; margin-bottom:0; }

/* Audience section (dark) */
.audience-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.audience-card{
	background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-md);
	padding:26px 22px; transition:background .2s ease, transform .2s ease;
}
.audience-card:hover{ background:rgba(255,255,255,0.1); transform:translateY(-4px); }
.audience-icon{ font-size:1.7rem; display:block; margin-bottom:12px; }
.audience-card h3{ color:#fff; font-size:1.05rem; margin-bottom:6px; }
.audience-card p{ color:rgba(255,255,255,0.7); font-size:0.9rem; margin-bottom:0; }

/* Newsletter */
.newsletter-section{ background:var(--sunshine-soft); }
.newsletter-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.newsletter-inner > div:first-child{ max-width:460px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input[type="email"]{
	padding:14px 18px; border:2px solid var(--line); border-radius:100px; font-family:var(--font-body);
	font-size:1rem; min-width:240px; background:var(--paper);
}
.newsletter-form input[type="email"]:focus{ outline:none; border-color:var(--coral); }

/* Section head variant with an action link on the right */
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.section-head-row .section-head, .section-head-row > div{ margin-bottom:0; }

/* ==========================================================================
   9. Privacy callout
   ========================================================================== */
.privacy-inner{ display:grid; grid-template-columns:1.1fr 0.7fr; gap:48px; align-items:center; }
.privacy-list{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.privacy-list li{ position:relative; padding-left:28px; font-weight:600; }
.privacy-list li::before{
	content:'\2713'; position:absolute; left:0; top:0; color:#fff; background:var(--mint);
	width:18px; height:18px; border-radius:50%; font-size:0.7rem; display:flex; align-items:center; justify-content:center;
}
.privacy-visual{ display:flex; justify-content:center; }
.privacy-shield{
	width:180px; height:200px; background:var(--indigo);
	clip-path:polygon(50% 0%,100% 20%,100% 60%,50% 100%,0% 60%,0% 20%);
	display:flex; align-items:center; justify-content:center;
}
.privacy-shield-check{ color:var(--mint); font-size:3rem; }

/* ==========================================================================
   10. Testimonials
   ========================================================================== */
.quote{ font-size:1.02rem; color:var(--ink); }
.quote-author{ font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); margin-bottom:0; }
.testimonial-note{ text-align:center; color:var(--muted); font-size:0.85rem; margin-top:28px; font-style:italic; }

/* ==========================================================================
   11. Pricing teaser + CTA banner
   ========================================================================== */
.pricing-teaser-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.pricing-teaser-inner h2{ margin-bottom:8px; }
.cta-banner{ background:var(--coral); text-align:center; }
.cta-banner-inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.cta-banner h2{ color:#fff; max-width:600px; }
.cta-banner .btn-primary{ background:var(--indigo); box-shadow:0 20px 40px -16px rgba(43,34,80,0.5); }
.cta-banner .btn-primary:hover{ background:var(--ink); }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer{ background:var(--indigo); color:rgba(255,255,255,0.85); padding:64px 0 0; }
.footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-brand{ display:flex; flex-direction:column; gap:12px; }
.footer-brand .logo-text{ color:#fff; }
.footer-brand p{ color:rgba(255,255,255,0.65); font-size:0.92rem; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:rgba(255,255,255,0.7); font-size:0.92rem; }
.footer-col a:hover{ color:var(--sunshine); }
.footer-bottom{ display:flex; justify-content:space-between; padding:22px 24px; font-size:0.82rem; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:8px; }
.footer-tag-emoji{ font-family:var(--font-mono); }

/* ==========================================================================
   13. Interior page hero
   ========================================================================== */
.page-hero{ padding:64px 0 50px; text-align:center; background:var(--sunshine-soft); }
.page-hero-sub{ max-width:560px; margin:0 auto; color:var(--muted); font-size:1.08rem; }

/* ==========================================================================
   13b. Flow diagram (How It Works top visual)
   ========================================================================== */
.flow-diagram-section{ padding:20px 0 60px; }
.flow-diagram{
	display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
	background:var(--paper); border-radius:var(--radius-lg); padding:40px 32px; box-shadow:var(--shadow-card);
}
.flow-node{ text-align:center; max-width:160px; }
.flow-node h3{ font-size:1.05rem; margin-bottom:2px; }
.flow-node p{ color:var(--muted); font-size:0.85rem; margin-bottom:0; }
.flow-node-icon{
	display:flex; align-items:center; justify-content:center; width:76px; height:76px; margin:0 auto 14px;
	border-radius:50%; background:var(--sunshine-soft);
}
.flow-tag-shape{ width:26px; height:34px; border:3px solid var(--coral); border-radius:6px 6px 6px 2px; position:relative; }
.flow-tag-shape::before{ content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; border:2px solid var(--coral); }
.flow-scan-shape{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:4px; width:28px; height:28px; }
.flow-scan-shape span{ background:var(--coral); border-radius:2px; }
.flow-scan-shape span:nth-child(2){ background:var(--sunshine); }
.flow-scan-shape span:nth-child(3){ background:var(--mint); }
.flow-scan-shape span:nth-child(4){ background:var(--indigo); }
.flow-connect-shape{ font-size:1.6rem; }
.flow-arrow{ font-size:1.6rem; color:var(--line); }

/* ==========================================================================
   14. Detailed steps (How It Works)
   ========================================================================== */
.step-timeline{ position:relative; padding-left:8px; }
.step-row{
	position:relative;
	display:grid; grid-template-columns:60px 1fr; gap:24px; align-items:start;
	padding:28px 0;
	opacity:0; translate:0 14px; transition:opacity .5s ease, translate .5s ease;
}
.step-row.is-visible{ opacity:1; translate:0 0; }
.step-icon-wrap{
	position:relative; width:60px; height:60px; border-radius:50%; background:var(--indigo);
	display:flex; align-items:center; justify-content:center; z-index:1;
}
.step-row:not(:last-child) .step-icon-wrap::after{
	content:''; position:absolute; top:60px; left:50%; transform:translateX(-50%);
	width:0; height:44px; border-left:3px dashed var(--line);
}
.step-num{ font-family:var(--font-display); font-size:1.3rem; color:var(--sunshine); font-weight:700; }
.step-body p{ color:var(--muted); margin-bottom:0; }

/* ==========================================================================
   14b. Old way vs Scan2Return way comparison
   ========================================================================== */
.compare-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.compare-col{ background:var(--paper); border-radius:var(--radius-md); padding:32px; box-shadow:var(--shadow-card); }
.compare-col.compare-new{ border:2px solid var(--mint); }
.compare-list{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.compare-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink); }
.x-mark, .check-mark{
	flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	font-size:0.75rem; font-weight:700; margin-top:2px;
}
.x-mark{ background:rgba(255,107,91,0.15); color:var(--coral-dark); }
.check-mark{ background:rgba(61,220,151,0.18); color:#1c8a5e; }

/* ==========================================================================
   15. Pricing cards
   ========================================================================== */
.pricing-grid{ align-items:stretch; }
.pricing-card{ display:flex; flex-direction:column; text-align:left; }
.pricing-card .price{ font-family:var(--font-display); font-size:2.4rem; color:var(--indigo); font-weight:700; margin:6px 0 20px; }
.pricing-card .price span{ font-family:var(--font-body); font-size:0.9rem; color:var(--muted); font-weight:500; margin-left:6px; }
.feature-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex:1; }
.feature-list li{ position:relative; padding-left:24px; color:var(--ink); font-size:0.95rem; }
.feature-list li::before{ content:'\2713'; position:absolute; left:0; color:var(--mint); font-weight:700; }
.pricing-card.is-popular{ border-color:var(--coral); transform:scale(1.03); }
.pricing-card.is-popular:hover{ transform:scale(1.03) rotate(-1deg) translateY(-4px); }
.popular-badge{
	position:absolute; top:-14px; right:20px; background:var(--coral); color:#fff;
	font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em;
	padding:6px 12px; border-radius:100px;
}
.pricing-note{ text-align:center; color:var(--muted); font-size:0.85rem; margin-top:28px; font-style:italic; }

/* ==========================================================================
   16. Feature comparison table
   ========================================================================== */
.compare-table{ background:var(--paper); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.compare-row{ display:grid; grid-template-columns:2fr repeat(3,1fr); padding:16px 22px; align-items:center; }
.compare-row:nth-child(even){ background:var(--cloud); }
.compare-row span:not(:first-child){ text-align:center; color:var(--muted); }
.compare-head{ background:var(--indigo) !important; }
.compare-head span{ color:#fff !important; font-family:var(--font-display); font-weight:600; }

/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
	background:var(--paper); border:2px solid var(--line); border-radius:var(--radius-sm);
	padding:18px 22px;
}
.faq-item summary{ font-family:var(--font-display); font-weight:600; cursor:pointer; list-style:none; position:relative; padding-right:28px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; position:absolute; right:0; top:-2px; font-size:1.3rem; color:var(--coral); }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ margin:14px 0 0; color:var(--muted); }

/* ==========================================================================
   18. Contact form
   ========================================================================== */
.contact-inner{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:48px; align-items:start; }
.contact-form{ background:var(--paper); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-card); }
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-weight:600; font-size:0.92rem; }
.form-row input, .form-row textarea{
	font-family:var(--font-body); font-size:1rem; padding:12px 14px;
	border:2px solid var(--line); border-radius:var(--radius-sm); background:var(--cloud);
	transition:border-color .2s ease;
}
.form-row input:focus, .form-row textarea:focus{ border-color:var(--coral); outline:none; }
.form-notice{ padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-weight:600; }
.form-notice-success{ background:rgba(61,220,151,0.15); color:#1c8a5e; }
.form-notice-error{ background:rgba(255,107,91,0.15); color:var(--coral-dark); }
.contact-info{ display:flex; flex-direction:column; gap:20px; }
.contact-info a{ color:var(--coral-dark); font-weight:600; }

/* ==========================================================================
   19. Blog / archive fallback
   ========================================================================== */
.archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.archive-card{ background:var(--paper); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); padding:20px; }
.archive-card-thumb img{ border-radius:var(--radius-sm); margin-bottom:14px; }

/* ==========================================================================
   20. Responsive
   ========================================================================== */
@media (max-width: 960px){
	.hero-inner, .privacy-inner, .contact-inner{ grid-template-columns:1fr; }
	.hero-visual{ order:-1; }
	.stats-strip-inner{ grid-template-columns:repeat(2,1fr); }
	.tag-grid, .usecase-grid{ grid-template-columns:repeat(2,1fr); }
	.category-grid{ grid-template-columns:repeat(2,1fr); }
	.benefits-grid{ grid-template-columns:repeat(2,1fr); }
	.audience-grid{ grid-template-columns:repeat(2,1fr); }
	.footer-inner{ grid-template-columns:1fr 1fr; }
	.compare-row{ font-size:0.9rem; }
	.compare-cols{ grid-template-columns:1fr; }
	.flow-diagram{ flex-direction:column; }
	.flow-arrow{ transform:rotate(90deg); }
	.newsletter-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 720px){
	.site-nav{
		position:absolute; top:100%; left:0; right:0; background:var(--paper);
		border-bottom:2px solid var(--line); max-height:0; overflow:hidden; transition:max-height .3s ease;
	}
	.site-nav.is-open{ max-height:300px; }
	.site-nav .nav-menu{ flex-direction:column; gap:0; padding:12px 24px; }
	.site-nav .nav-menu a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); }
	.nav-toggle{ display:flex; }
	.site-header-cta .btn-sm{ display:none; }

	.tag-grid, .usecase-grid, .footer-inner{ grid-template-columns:1fr; }
	.category-grid, .benefits-grid, .audience-grid{ grid-template-columns:1fr; }
	.stats-strip-inner{ grid-template-columns:1fr 1fr; }
	.pricing-card.is-popular{ transform:none; }
	.pricing-card.is-popular:hover{ transform:translateY(-4px); }
	.compare-row{ grid-template-columns:1.4fr repeat(3,1fr); font-size:0.78rem; padding:12px; }
	.section{ padding:60px 0; }
}