/*
 * Global shell styles: design tokens + site header/footer/jump-nav chrome.
 * Ported from the source design's assets/site-shell.css.
 *
 * Naming convention (theme-wide):
 *   - Design tokens:  --dropp-color-*, --dropp-layout-*
 *   - Site chrome:    .dropp-shell-{element} (header, nav, footer, ...)
 *   - Blocks:         .dropp-block-{slug}__{element}--{modifier} (BEM)
 *   - Page families:  a page's "look", the body class .dropp-look-{name} (post meta _dropp_look), for the few places
 *                     where the design's page families differ (see docs/architecture.md)
 * Per-block styles live alongside each block: blocks/{page}/{slug}/style.css.
 *
 * Breakpoints (all CSS in the theme): max-width 480 / 720 / 960 / 1080px; a min-width is the value plus one.
 * Nothing else is allowed (the theme audit checks it). See docs/css.md.
 */
:root{
	--dropp-color-bg:#090c10;
	--dropp-color-bg2:#0f151c;
	--dropp-color-panel:#131b24;
	--dropp-color-panel2:#17222c;
	--dropp-color-line:rgba(255,255,255,.11);
	--dropp-color-line2:rgba(255,255,255,.18);
	--dropp-color-text:#f6f9fb;
	--dropp-color-soft:#a8bac8;
	--dropp-color-muted:#718799;
	--dropp-color-blue:#29B8E5;
	--dropp-color-blue2:#1697c2;
	--dropp-color-cyan:#7fd3f0;
	--dropp-color-teal:#19c3a2;
	--dropp-color-warm:#f1b55b;
	--dropp-layout-max:1180px;
	--dropp-font-base:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
/* The browser keeps a focused or linked element this far below the top, clear of the sticky header (68px). A page with a
   sticky bar under the header (jump bar or section menu, to 117px; Embedded's taller bar, to 140px) needs more, or a
   field reached with Shift+Tab hides under the bar. The jump targets' own margin (below) shrinks by the same amount,
   so a jump-bar link still lands where it did. */
html:has(.dropp-shell-jumpbar),html:has(.dropp-block-section-menu){scroll-padding-top:128px}
html:has(body.dropp-look-embedded .dropp-shell-jumpbar){scroll-padding-top:150px}
/* Decorative glows reach past the edge of the screen; clipped here, a phone cannot drift sideways (clip, unlike
   hidden, keeps the sticky bars sticky). */
main.site-main{overflow-x:clip}
body{margin:0;background:var(--dropp-color-bg);color:var(--dropp-color-text)!important;font-family:var(--dropp-font-base)!important;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--dropp-color-cyan)}
/* A link inside a block's text (dropp_inline_html()): underlined, so it reads as a link without relying on colour. */
.dropp-text-link{color:inherit;text-decoration:underline;text-decoration-color:var(--dropp-color-cyan);text-decoration-thickness:1px;text-underline-offset:3px}
.dropp-text-link:hover{color:var(--dropp-color-cyan)}
button,input{font:inherit}

/* Shared layout primitives used by every block */
.dropp-wrap{max-width:var(--dropp-layout-max);margin:0 auto;padding:0 28px}
.dropp-section{padding:92px 0;background:var(--dropp-color-bg)}
.dropp-section--alt{background:var(--dropp-color-bg2)}
/* Explicit, not inherited from body: an inherited color loses to ANY rule
   that sets color explicitly on h1-h6, however low its specificity or
   wherever it's coming from (WP core/plugin admin styles, a future
   editor-only stylesheet, etc.) -- inherited values are always weaker than
   a specified one in the cascade, regardless of selector weight or order. */
h1,h2,h3,h4,h5,h6{color:var(--dropp-color-text);margin-top:0}
/* The design source relies on the browser's default block spacing (1em under a paragraph, 1em above and below a list).
   Underscores' style.css, which loads first, swaps those for 1.5em / 3em values, so they are restored here. */
p{margin:0 0 1em}
ul,ol{margin:1em 0}
li>ul,li>ol{margin:0}
/* Underscores gives .post and .page a margin under them, meant for an article; WordPress also puts .page on <body>, so
   every page ended with a 24px strip under the footer. */
body.page{margin:0}
h1{font-size:clamp(42px,5.2vw,68px);line-height:1.02;letter-spacing:-.045em;max-width:950px;margin-bottom:22px}
h2{font-size:clamp(31px,4vw,48px);line-height:1.08;letter-spacing:-.035em;margin-bottom:16px}
h3{font-size:21px;line-height:1.18;letter-spacing:-.02em;margin-bottom:10px}
.dropp-section-head{margin-bottom:38px}
.dropp-section-head p{font-size:18px;color:var(--dropp-color-soft);margin-bottom:0}
.dropp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 23px;border-radius:10px;font-weight:700}
.dropp-btn--primary{background:var(--dropp-color-blue);color:#fff}
.dropp-btn--secondary{border:1px solid var(--dropp-color-line2);color:#fff;background:rgba(255,255,255,.03)}
/* A social network's logo before a link's words (dropp_social_icon(): a team member's buttons, the footer's social
   links), sized by the text; vertical-align places it on a line of text, a button's flex row centres it. */
.dropp-social-icon{flex:none;width:1.1em;height:1.1em;margin-right:.5em;vertical-align:-.15em}

/* ---- Interior page primitives (Developers, No-Code, About, Partners, ...) ----
   The interior pages in the source design share one heading scale, section
   rhythm and button row that differ from the Home page's, so they get their
   own shared classes here instead of being re-declared in every block. */
.dropp-eyebrow{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--dropp-color-cyan);display:flex;align-items:center;gap:9px;margin-bottom:18px}
.dropp-eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dropp-color-blue);box-shadow:0 0 0 5px rgba(41,184,229,.10)}
.dropp-page-section{padding:var(--dropp-pt,96px) 0 var(--dropp-pb,96px);border-top:1px solid rgba(255,255,255,.035)}
.dropp-page-section--alt{background:var(--dropp-color-bg2)}
.dropp-page-section h2{font-size:clamp(34px,4.1vw,52px);line-height:1.07;letter-spacing:-.04em;margin-bottom:16px}
.dropp-page-section h3{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin-bottom:8px}
.dropp-page-section p{color:var(--dropp-color-soft)}
.dropp-page-head{max-width:840px;margin-bottom:42px}
.dropp-page-head p{font-size:18px;line-height:1.65;margin-bottom:0}
/* "company" look (About/Team): section heads are narrower and
   carry no bottom margin -- the content that follows brings its own top
   spacing -- and the intro paragraph keeps a normal paragraph gap. */
.dropp-look-company .dropp-page-head{max-width:830px;margin-bottom:0}
.dropp-look-company .dropp-page-head p{margin-bottom:1em}
/* "nocode" look (the No-Code pages, the design's sibling of Developers) and "wallet" look (Wallet): the design gives its
   plain section an explicit background (the same colour as the page); No-Code also has a 830px section head. */
.dropp-look-nocode .dropp-page-section,.dropp-look-wallet .dropp-page-section{background:var(--dropp-color-bg)}
.dropp-look-nocode .dropp-page-section--alt,.dropp-look-wallet .dropp-page-section--alt{background:var(--dropp-color-bg2)}
.dropp-look-nocode .dropp-page-head{max-width:830px}
/* "ecosystem" look (Partners, Media): 88px sections with a stronger hairline and 800px section heads; "partners" is
   that page's own margins. */
.dropp-look-ecosystem .dropp-page-section{padding:var(--dropp-pt,88px) 0 var(--dropp-pb,88px);border-top-color:rgba(255,255,255,.05)}
.dropp-look-ecosystem .dropp-page-head{max-width:800px}
.dropp-look-partners .dropp-page-head{margin-bottom:38px}
/* "media" look: the Media page's own head margin and its smaller buttons (46px high, 14px type, 22px above each). */
.dropp-look-media .dropp-page-head{margin-bottom:34px}
.dropp-look-media .dropp-btns{margin-top:0}
.dropp-look-media .dropp-btn,.dropp-look-media .dropp-btns .dropp-btn{min-height:46px;padding:0 19px;font-size:14px;margin-top:22px}
/* "app" look (Get Dropp App): the download page has its own palette, a 16px base with no set line height (its own
   font stack is overridden by the shell's DM Sans, as here) and a 1120px content width with 20px side margins. */
body.dropp-look-app{--dropp-app-line:rgba(255,255,255,.09);--dropp-app-muted:#9baab6;--dropp-app-panel:#0b1117;--dropp-app-blue:#18b7e7;--dropp-app-blue2:#7fdcff;--dropp-app-text:#f3f7fa;background:#05070a;color:var(--dropp-app-text)!important;font-size:16px;line-height:normal}
body.dropp-look-app .dropp-wrap{max-width:1160px;padding:0 20px}
/* "merchants" look (Merchants): the design page is its own system on the shell's DM Sans -- a near-black page, 1200px content with 30px
   side margins (19px at 720px and narrower), a 16px base with no set line height. */
body.dropp-look-merchants{background:#080b0f;color:#f7fafc!important;font-size:16px;line-height:normal}
body.dropp-look-merchants .dropp-wrap{max-width:1200px;padding-left:30px;padding-right:30px}
/* "embedded" look (Embedded): a near-black page with a 16px base and no set line height. The design's blocks lay out their own
   width (.shell, in components/embedded.css); the design's `nav` rule (72px, flex) also lands on its on-page bar. */
body.dropp-look-embedded{background:#05070a;color:#eef5fb!important;font-size:16px;line-height:normal}
body.dropp-look-embedded .dropp-shell-jumpbar{display:flex;align-items:center;justify-content:space-between;height:72px}
.dropp-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.dropp-btns .dropp-btn{font-size:15px}
.dropp-btn.dropp-btn--text{min-height:auto;padding:0;color:var(--dropp-color-cyan);font-size:14px}

/* Respect the OS-level reduced-motion preference: every transition/animation
   in the theme (hover lifts, dropdown reveals, smooth-scroll) still reaches
   its end state, just without the animated motion in between. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.dropp-shell-skip{position:fixed;left:12px;top:-80px;z-index:9999;padding:10px 14px;border-radius:8px;background:#fff;color:#090c10;font:700 13px 'DM Sans',system-ui,sans-serif;text-decoration:none}.dropp-shell-skip:focus{top:10px}

.dropp-shell-header{position:sticky;top:0;z-index:1000;background:rgba(9,12,16,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--dropp-color-line);color:var(--dropp-color-text)}
.dropp-shell-header *,.dropp-shell-footer *{box-sizing:border-box}
.dropp-shell-header__inner{max-width:var(--dropp-layout-max);height:68px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.dropp-shell-logo{display:inline-flex;align-items:center;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 14px;box-shadow:0 12px 28px -22px rgba(0,0,0,.95);flex:0 0 auto}
.dropp-shell-logo img{display:block;height:28px;width:auto;max-width:none}
.dropp-shell-nav{display:flex;align-items:center;gap:2px;min-width:0}
.dropp-shell-nav__menu{display:contents}
/* Not display:contents -- a real box is needed here so .sub-menu (a child
   of THIS li, not of the <a>) has something to anchor position:absolute
   to. Its own layout footprint still matches a bare <a> since it holds
   exactly one and has no padding/margin of its own. */
.dropp-shell-nav__menu li{position:relative;list-style:none}
.dropp-shell-nav a{font:500 12.7px/1 'DM Sans',system-ui,sans-serif;color:#a8bac8;text-decoration:none;padding:10px 7px;border-radius:8px;white-space:nowrap}
/* Top-level menu links are direct flex items in the source markup (so
   blockified, 33px tall at line-height:1); here they sit inside an <li>,
   where a bare <a> stays inline and its hover box comes out ~4px taller. */
.dropp-shell-nav__menu > li > a{display:block}
.dropp-shell-nav a:hover,.dropp-shell-nav a[aria-current='page']{color:#fff;background:rgba(255,255,255,.055)}
.dropp-shell-nav-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--dropp-color-blue);color:#fff!important;padding:10px 15px!important;border-radius:9px!important;font-weight:700!important;white-space:nowrap}

/* Child menu items (desktop dropdown): CSS handles mouse hover and
   keyboard focus (:focus-within, so Tab reaches child links even though
   they're only visually revealed once focus lands inside); js/navigation.js
   adds the .is-open trigger for touch, plus aria-expanded and outside-click/
   Escape-to-close, none of which CSS alone can do. */
.dropp-shell-nav__menu .menu-item-has-children > a{display:inline-flex;align-items:center;gap:5px}
.dropp-shell-nav__menu .menu-item-has-children > a::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.dropp-shell-nav .sub-menu{list-style:none;margin:6px 0 0;padding:8px;position:absolute;top:100%;left:0;min-width:230px;background:#0d1319;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:1001}
.dropp-shell-nav .sub-menu li{position:static}
.dropp-shell-nav .sub-menu a{display:block;padding:10px 12px;border-radius:8px;white-space:nowrap;color:#b9c8d2;font-size:13px}
.dropp-shell-nav .sub-menu a:hover,.dropp-shell-nav .sub-menu a[aria-current='page']{color:#fff;background:rgba(255,255,255,.06)}
.dropp-shell-nav__menu li:hover > .sub-menu,
.dropp-shell-nav__menu li:focus-within > .sub-menu,
.dropp-shell-nav__menu li.is-open > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* An invisible bridge over the 6px gap above the dropdown, so the pointer stays "on" the item while it moves down to it. Without
   it the dropdown closed in the gap for anyone whose system reduces motion (no fade-out delay to cross it with). */
.dropp-shell-nav .sub-menu::before{content:'';position:absolute;left:0;right:0;top:-8px;height:8px}
/* Escape closes a dropdown opened by hover or focus until the pointer and the focus have left the item (js/navigation.js). */
.dropp-shell-nav .dropp-shell-nav__menu li.is-dismissed > .sub-menu{opacity:0;visibility:hidden}

.dropp-shell-mobile-nav{display:none}.dropp-shell-mobile{position:relative}.dropp-shell-mobile summary{list-style:none;cursor:pointer;border:1px solid rgba(255,255,255,.15);border-radius:9px;padding:9px 12px;color:#fff;font:700 13px 'DM Sans',system-ui,sans-serif}.dropp-shell-mobile summary::-webkit-details-marker{display:none}
.dropp-shell-mobile-panel{position:absolute;right:0;top:44px;width:min(310px,calc(100vw - 38px));max-height:calc(100vh - 90px);overflow-y:auto;padding:10px;background:#0d1319;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.dropp-shell-mobile-panel ul{display:contents}
.dropp-shell-mobile-panel li{display:contents}
.dropp-shell-mobile-panel a{display:block;color:#b9c8d2;text-decoration:none;font:600 14px/1.2 'DM Sans',system-ui,sans-serif;padding:11px 12px;border-radius:8px}.dropp-shell-mobile-panel a:hover,.dropp-shell-mobile-panel a[aria-current='page']{color:#fff;background:rgba(255,255,255,.06)}.dropp-shell-mobile-panel .dropp-shell-nav-cta{margin-top:5px;text-align:center}
/* Child items: shown inline, always expanded (no nested accordion) --
   simplest, most robust pattern for a touch list. Distinguished from
   top-level items by indent/size/color alone, since .sub-menu's own box
   is gone too (display:contents above applies to it as a <ul>). */
.dropp-shell-mobile-panel .sub-menu a{padding-left:26px;font:500 13px/1.2 'DM Sans',system-ui,sans-serif;color:#8ea0af}

.dropp-shell-footer{border-top:1px solid var(--dropp-color-line);padding:42px 0 28px;background:#080b0f;color:#7f95a6}
.dropp-shell-footer__inner{max-width:var(--dropp-layout-max);margin:0 auto;padding:0 28px}
.dropp-shell-footer__grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:34px}
/* The logo column, then the link columns sharing the rest: four in the design, as many as the "Footer columns" widget
   area holds (footer.php prints the count). */
.dropp-shell-footer__grid--cols-1{grid-template-columns:1.2fr 1fr}
.dropp-shell-footer__grid--cols-2{grid-template-columns:1.2fr repeat(2,1fr)}
.dropp-shell-footer__grid--cols-3{grid-template-columns:1.2fr repeat(3,1fr)}
.dropp-shell-footer__grid--cols-5{grid-template-columns:1.2fr repeat(5,1fr)}
.dropp-shell-footer__grid--cols-6{grid-template-columns:1.2fr repeat(6,1fr)}
.dropp-shell-footer__brand-logo{display:inline-flex;background:#fff;border-radius:10px;padding:7px 12px;text-decoration:none}.dropp-shell-footer__brand-logo img{height:26px;width:auto;display:block;max-width:none}
.dropp-shell-footer__brand-copy{font:400 13px/1.55 'DM Sans',system-ui,sans-serif;color:#7f95a6;max-width:260px;margin:14px 0 0}
.dropp-shell-footer__title{font:700 12px/1.2 'DM Sans',system-ui,sans-serif;color:#d6e2e8;text-transform:uppercase;letter-spacing:.11em;margin-bottom:14px}
/* Link rules are scoped to the menus/copyright row on purpose. A bare
   `.dropp-shell-footer a{display:block}` also caught the brand-logo <a>
   (specificity 0,1,1 vs its own 0,1,0 inline-flex), stretching the white
   logo pill across the whole column. */
.dropp-shell-footer__menu,.dropp-shell-footer__column ul{list-style:none;margin:0;padding:0}
.dropp-shell-footer__menu a,.dropp-shell-footer__column li a,.dropp-shell-footer__copyright a{font:400 13px/1.3 'DM Sans',system-ui,sans-serif;color:#7f95a6;text-decoration:none}
.dropp-shell-footer__menu a,.dropp-shell-footer__column li a{display:block;margin:9px 0}
.dropp-shell-footer__menu a:hover,.dropp-shell-footer__column li a:hover,.dropp-shell-footer__copyright a:hover{color:#fff}
.dropp-shell-footer__copyright{border-top:1px solid var(--dropp-color-line);margin-top:30px;padding-top:20px;font:400 12px/1.4 'DM Sans',system-ui,sans-serif;color:#607585;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.dropp-shell-footer__copyright a{display:inline;margin:0 0 0 14px}

.dropp-shell-video-fallback{display:none;padding:42px 24px;text-align:center;color:#a8bac8}.dropp-shell-video-fallback strong{display:block;color:#fff;font-size:18px;margin-bottom:8px}.dropp-shell-video-fallback a{display:inline-flex;margin-top:14px;padding:11px 16px;border-radius:9px;background:#29B8E5;color:#fff;text-decoration:none;font-weight:700}

@media (max-width: 1080px) {
	.dropp-shell-nav{display:none}
	.dropp-shell-mobile-nav{display:block}
	.dropp-shell-header__inner{padding:0 20px}
	.dropp-shell-footer__grid{grid-template-columns:1fr 1fr}
}

/* Secondary on-page navigation for long interior pages */
.dropp-shell-jumpbar{position:sticky;top:68px;z-index:45;background:rgba(9,12,16,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.10)}
.dropp-shell-jumpbar__inner{max-width:1180px;margin:0 auto;min-height:48px;padding:0 28px;display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none}
.dropp-shell-jumpbar__inner::-webkit-scrollbar{display:none}
.dropp-shell-jumpbar a{flex:0 0 auto;color:#8095a5;font-size:12px;line-height:1;font-weight:650;padding:8px 10px;border-radius:8px;white-space:nowrap;text-decoration:none;transition:color .16s ease,background .16s ease,border-color .16s ease;border:1px solid transparent}
.dropp-shell-jumpbar a:hover{color:#fff;background:rgba(255,255,255,.045)}
.dropp-shell-jumpbar a.is-active{color:#fff;background:rgba(41,184,229,.11);border-color:rgba(41,184,229,.18)}
.dropp-shell-jump-target,.dropp-has-jump-bar main [id]{scroll-margin-top:82px} /* 128 + 82: a section lands 210px down, as before */
body.dropp-look-embedded.dropp-has-jump-bar main [id]{scroll-margin-top:60px} /* 150 + 60 */
/* Small screens (docs/css.md): every rule below applies at 720px and narrower. */
@media (max-width: 720px) {
	/* Home and the shell: 18px side margins, 66px sections, a 16px base. */
	.dropp-wrap{padding:0 18px}
	.dropp-section{padding:66px 0}
	body{font-size:16px}
	/* The looks that change the margins or the section height. */
	.dropp-look-ecosystem .dropp-page-section{padding:70px 0}
	body.dropp-look-merchants .dropp-wrap{padding-left:19px;padding-right:19px}
	/* Interior pages: 72px sections, 36px headings, 19px side padding (Home uses 18px), and a 17px base (only Home drops to 16px). */
	.dropp-page-section{padding:72px 0}
	.dropp-page-section h2{font-size:36px}
	.dropp-page-section>.dropp-wrap,.dropp-block-page-hero>.dropp-wrap,.dropp-block-cta-band>.dropp-wrap{padding:0 19px}
	.dropp-page-section,.dropp-block-page-hero,.dropp-block-cta-band{font-size:17px}
	/* Footer and the on-page navigation bar. */
	.dropp-shell-footer__inner{padding:0 20px}
	.dropp-shell-footer__grid{grid-template-columns:1fr;gap:26px}
	.dropp-shell-footer__copyright{display:block}
	.dropp-shell-footer__copyright span:last-child{display:block;margin-top:10px}
	.dropp-shell-footer__copyright a{margin:0 14px 0 0}
	.dropp-shell-jumpbar__inner{padding:0 19px}
}