/* Devenzi – the light look. Loaded only when the visitor's system is set to light (or to nothing):
     <link rel="stylesheet" href="assets/light.css" media="(prefers-color-scheme: light)">
   The dark look in site.css and the page styles stays as it is; this file only turns it light. Warm paper white,
   ink in near-black, the fox orange a little deeper where it is text (so it stays readable on white). */
:root {
	color-scheme: light;
	--bg: #faf7f3;
	--bg-2: #f3eee8;
	--bg-3: #ebe4dc;
	--accent: #d9590b;
	--accent-2: #b9490a;
	--ink: #1d1814;
	--ink-2: #4a413a;
	--muted: #7a6e65;
	--line: rgba(29, 24, 20, .09);
	--line-2: rgba(29, 24, 20, .17);
	--glass: rgba(255, 255, 255, .72);
	--glass-2: #fff;
	--green: #138a5e;
	--shadow-lg: 0 30px 70px -34px rgba(70, 45, 20, .32);
	--card: rgba(255, 255, 255, .86);
	--card-2: #fff;
	--heading: #17120f;
}
body::before { background: radial-gradient(900px 520px at 85% -10%, rgba(255, 138, 31, .14), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(255, 179, 71, .16), transparent 60%); }
::selection { background: rgba(255, 138, 31, .28); }
h1, h2, h3, .brand, .price strong, .faq summary { color: var(--heading); }

/* Buttons: the orange one stays; the quiet ones become white. */
.btn--navy, .btn--ghost, .btn--line { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn--navy:hover, .btn--ghost:hover, .btn--line:hover { background: #fff; border-color: rgba(29, 24, 20, .32); }
.btn--accent { box-shadow: 0 8px 18px -12px rgba(150, 60, 0, .45); }
.btn--accent:hover { box-shadow: 0 12px 22px -12px rgba(150, 60, 0, .5); }

/* Header */
.top { background: rgba(250, 247, 243, .7); }
.top.is-scrolled { background: rgba(250, 247, 243, .9); }
.nav a:hover, .nav a[aria-current], .top-actions .link:hover { color: var(--heading); }
.nav a[aria-current] { background: #fff; }
.top-actions .btn--navy { background: var(--heading); color: #fff; }
.top-actions .btn--navy:hover { background: #2b241f; }
.menu-btn { background: #fff; color: var(--ink); }
@media (max-width: 860px) { .top.is-open .nav { background: rgba(250, 247, 243, .98); } }

/* Hero */
.hero::after { background: radial-gradient(closest-side, rgba(255, 138, 31, .16), transparent); }
.hero h1 em { background-image: linear-gradient(100deg, #e8520c, #ff8a1f 55%, #e8520c); }
.eyebrow { background: rgba(255, 138, 31, .1); box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .3); }
.demo-window { background: linear-gradient(180deg, #fff, #fbf8f5); box-shadow: 0 50px 100px -50px rgba(70, 45, 20, .45), 0 0 0 1px var(--line); }
.demo-bar { background: #f6f1eb; }
.demo-bar i { background: #e0d6cb; }
.demo-bar span { background: #fff; }
.hero-demo::after { background: radial-gradient(closest-side, rgba(255, 138, 31, .14), transparent); }
.float-chip { background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(70, 45, 20, .35), inset 0 0 0 1px var(--line); }

/* The plugin demo: arrows on white. */
[data-demo] .vsfy .vsfy-arrow, [data-showcase] .vsfy .vsfy-arrow { background: #fff; }

/* Patterns in ink instead of white. */
.pat--grid::before { background-image: linear-gradient(rgba(29, 24, 20, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 24, 20, .055) 1px, transparent 1px); }
.pat--dots::before { background-image: radial-gradient(rgba(29, 24, 20, .16) 1.1px, transparent 1.6px); }
.pat--plus::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 22v12M22 28h12' stroke='%231d1814' stroke-opacity='.14' stroke-width='1.2'/%3E%3C/svg%3E"); }
.pat--glow::after { background: radial-gradient(closest-side, rgba(255, 138, 31, .1), transparent); }
.pat .feature, .pat .value, .pat .flow-step, .pat .plan, .pat .faq details, .pat .compare, .pat .product:not(.product--soon), .pat .switch { background-color: var(--card); }
.pat .feature:hover, .pat .value:hover, .pat .product:not(.product--soon):hover { background-color: var(--card-2); }

/* Sections */
.section--white { background: linear-gradient(180deg, transparent, rgba(243, 238, 232, .8) 18%, rgba(243, 238, 232, .8) 82%, transparent); }
.dark { background: linear-gradient(180deg, transparent, rgba(236, 228, 219, .75) 20%, rgba(236, 228, 219, .75) 80%, transparent); }
.switch button:hover, .switch button[aria-pressed="true"] { color: var(--heading); }
.switch button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 20px -12px rgba(70, 45, 20, .3); }
.showcase, .mock { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(251, 248, 245, .95)); }

/* Cards */
.feature, .flow-step, .value, .plan, .compare, .faq details, .product { box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -32px rgba(70, 45, 20, .3); }
.feature:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -30px rgba(70, 45, 20, .35); }
.feature-ic, .flow-ic { background: linear-gradient(145deg, rgba(255, 138, 31, .18), rgba(255, 179, 71, .12)); }
.plan--pro { background: linear-gradient(180deg, rgba(255, 138, 31, .1), #fff 45%); box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .4), 0 40px 80px -45px rgba(217, 89, 11, .35); }
.plan-badge { background: var(--heading); color: #fff; }
.compare thead th { background: rgba(29, 24, 20, .03); }
.compare td:last-child { background: rgba(255, 138, 31, .05); }
.compare tbody tr:hover { background: rgba(29, 24, 20, .025); }
.no { color: rgba(29, 24, 20, .3); }
.checklist .tick, .yes { background: rgba(19, 138, 94, .1); }
.pill { background: rgba(255, 138, 31, .1); box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .28); }
.pill--green { background: rgba(19, 138, 94, .08); box-shadow: inset 0 0 0 1px rgba(19, 138, 94, .25); }
.product:hover { box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .35), 0 40px 80px -45px rgba(70, 45, 20, .4); }
.product--soon { border-color: rgba(29, 24, 20, .18); }
.band-in { background: radial-gradient(520px 280px at 100% 0%, rgba(255, 138, 31, .2), transparent 70%), linear-gradient(135deg, #fff, #f6efe7); box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .25), 0 30px 70px -40px rgba(70, 45, 20, .35); }

/* Footer */
.foot { background: rgba(236, 228, 219, .6); }

/* Legal pages, contact form */
.contact-form input, .contact-form textarea { background: #fff; border-color: var(--line-2); }
.contact-state.is-ok { color: #0d6b48 !important; }
.contact-state.is-error { color: #a3262b !important; }

/* ---- Product pages (map-studio.css, video-slider.css) ---- */
.shot { box-shadow: 0 30px 70px -34px rgba(70, 45, 20, .4), 0 0 0 1px var(--line); }
.tabs-list, .explorer-bar, .devices { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tabs-list button:hover, .explorer-bar button:hover { color: var(--heading); background: rgba(29, 24, 20, .04); }
.tabs-list button[aria-selected="true"], .explorer-bar button[aria-pressed="true"], .ticker button[aria-pressed="true"] { color: var(--heading); background: rgba(255, 138, 31, .12); box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .4); }
.ticker button { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ticker button:hover { color: var(--heading); }
.devices button[aria-pressed="true"] { background: var(--heading); color: #fff; }
.billing { background: rgba(29, 24, 20, .05); box-shadow: inset 0 0 0 1px var(--line); }
.billing button { color: var(--ink-2); }
.billing button[aria-pressed="true"] { background: #fff; color: var(--heading); box-shadow: 0 2px 8px -2px rgba(70, 45, 20, .25); }
.explorer-stage, .pane-demo { background: linear-gradient(180deg, #fff, #fbf8f5); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); }
.explorer-stage.is-phone { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line), inset 0 0 0 9px #1d1814, inset 0 0 0 10px rgba(29, 24, 20, .4); }
.stat, .detail, .counter, .privacy-text { background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -32px rgba(70, 45, 20, .3); }
.stat strong { background-image: linear-gradient(100deg, #17120f, #c2410c); }
.detail:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -30px rgba(70, 45, 20, .35); }
.detail > .icon { background: linear-gradient(145deg, rgba(255, 138, 31, .18), rgba(255, 179, 71, .12)); box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .22); }
.counter li.is-new b { color: var(--accent); }
.cmp span { background: #fff; }
kbd { background: #fff; box-shadow: inset 0 -2px 0 rgba(29, 24, 20, .15), inset 0 0 0 1px var(--line-2); color: var(--heading); }
.guide-toc { background: var(--card); }
.guide-body strong, .admin-grid figcaption strong, .looks figcaption strong, .pane .who strong { color: var(--heading); }
.guide-body code { background: rgba(29, 24, 20, .05); color: var(--accent-2); }
.guide-note { background: rgba(255, 138, 31, .08); }
/* The story's cards beside the map, in white. */
.story-card { background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -36px rgba(70, 45, 20, .4); }
.story-step.is-on .story-card { box-shadow: inset 0 0 0 1px rgba(217, 89, 11, .4), 0 30px 70px -34px rgba(217, 89, 11, .35); }
.story-card .story-lead { color: var(--heading); }
.story-card li > .icon { background: rgba(255, 138, 31, .12); }
.thread .thread-ghost { stroke: rgba(29, 24, 20, .12); }
.thread circle { fill: #fff; stroke: rgba(29, 24, 20, .25); }
.story-frame { box-shadow: 0 50px 100px -50px rgba(70, 45, 20, .5), 0 0 0 1px var(--line); }