/* ═══ Lattice (Figma 3HjmoajLyPIUJKo1BNuG1q 62:2, inner pages 72:2 … 77:1862). Creative layer only: content and
   spacing live in the fields, colors and sizes in Branding; Color Modes = dark (no switch).
   --lat-acc: orange as small text (#C2410C on white, #FF8A4C on black); --lat-num: large orange numerals. ═══ */
:root { --lat-acc: #C2410C; --lat-num: #E8590C; --lat-ink: var(--cm-title, #000); --lat-paper: var(--cm-bg, #fff); }
html[data-color-mode="dark"] { --lat-acc: #FF8A4C; --lat-num: #FF6B1F; }
html[data-cm-page="native"] .ct-cm-lock-opp, html[data-cm-page="alt"] .ct-cm-follow { --lat-acc: #FF8A4C; --lat-num: #FF6B1F; }
html[data-cm-page="alt"] .ct-cm-lock-opp { --lat-acc: #C2410C; --lat-num: #E8590C; }

/* Archivo at 90% width (closest Google cut to PP Formula). */
body *:is(h1, h2, h3, h4, .titles, .page-titles, .hd, .h2, .h3, .num, .ct2-hero-title) { font-stretch: 90%; }

/* Hero (HER-39): the console keeps its full drawing; the second button is the outline one. */
body .ct2-hero-centered .ct7-ce-frame { aspect-ratio: auto !important; height: auto !important; }
body .ct2-hero-centered .ct7-ce-frame img { position: static !important; width: 100% !important; height: auto !important; object-fit: contain !important; }
body .ct2-hero .ct2-hero-buttons a.button:nth-child(2) { background: transparent !important; color: var(--lat-ink) !important; border: 1.5px solid var(--lat-ink) !important; }
body .ct2-hero .ct2-hero-buttons a.button:nth-child(2):hover { background: var(--lat-ink) !important; color: var(--lat-paper) !important; }
body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blk .h01 .acts .btn.ghost { color: var(--lat-ink); border-color: var(--lat-ink); }
body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blk .h01 .acts .btn.ghost:hover { background: var(--lat-ink); color: var(--lat-paper); border-color: var(--lat-ink); }

/* Inner heroes (HER-01): dot lattice and the lattice mark on the right, decoration only. */
.sb-heroes .h01 .body { position: relative; }
.sb-heroes .h01 .body::after {
	content: ""; position: absolute; right: 0; top: calc(var(--hp-top, 120px) - 20px); width: 408px; height: 306px; pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' fill='none' stroke='%23FF6B1F' stroke-width='1.6'%3E%3Cpath d='M20 20h140M20 160h140M20 20l140 140M160 20 20 160'/%3E%3Ccircle cx='20' cy='20' r='5' fill='%23fff'/%3E%3Ccircle cx='160' cy='20' r='5' fill='%23fff'/%3E%3Ccircle cx='20' cy='160' r='5' fill='%23fff'/%3E%3Ccircle cx='160' cy='160' r='5' fill='%23fff'/%3E%3Ccircle cx='90' cy='90' r='6' fill='%23FF6B1F'/%3E%3C/svg%3E") 60% 52% / 180px 180px no-repeat,
		radial-gradient(circle, color-mix(in srgb, var(--lat-ink) 45%, transparent) 1.2px, transparent 1.6px) 0 0 / 34px 34px;
}
@media (max-width: 1100px) { .sb-heroes .h01 .body::after { width: 300px; opacity: .6; } }
@media (max-width: 767px) { .sb-heroes .h01 .body::after { display: none; } }

/* Logos (LOG-20): one row, one color that follows the mode. */
body .sb-blk.sb-blk.sb-blk .l20 .strip { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
body .sb-blk.sb-blk.sb-blk .l20 .strip > p { flex: none; margin: 0; }
body .sb-blk.sb-blk.sb-blk .l20 .logos { display: flex !important; flex: 1; flex-wrap: nowrap !important; justify-content: space-between; align-items: center; gap: clamp(16px, 2.6vw, 40px) !important; }
body .sb-blk.sb-blk.sb-blk .l20 .logos img { height: clamp(18px, 1.9vw, 28px) !important; width: auto !important; max-width: none !important; max-height: none !important; }
html[data-color-mode="dark"] .lat-logos .l20 .logos img { filter: invert(1); }
@media (max-width: 900px) { body .sb-blk.sb-blk.sb-blk .l20 .strip { flex-direction: column; align-items: flex-start; } body .sb-blk.sb-blk.sb-blk .l20 .logos { flex-wrap: wrap !important; justify-content: flex-start; gap: 20px 28px !important; } }

/* Small orange text and large orange numerals read on both modes. */
.sb-blk.sb-blk *:is(.n12 .bar.us b, .s05 .r-type, .l13 .cap) { color: var(--lat-acc) !important; }
.lat-layers .c16-n b { color: var(--lat-num) !important; }
.lat-bench .n12 .grid { align-items: start; }

/* Code panels (CRD-21 stand-in for Code Cards, class lat-code): black in both modes, mono code. */
.lat-code .features-list .panel { margin-top: 48px; background: #000; border: 1px solid #2A2A2A; border-radius: 14px; padding: 26px 28px; color: #fff; }
.lat-code .features-list .panel .titles { color: #fff !important; font-family: var(--font-body); font-stretch: 100%; font-size: 18px !important; font-weight: 600; }
.lat-code .features-list .panel::before { display: none; }
.lat-code .lat-pre { margin: 0; background: none; padding: 0; white-space: pre; overflow-x: auto; font: 400 15px/1.65 "Geist Mono", ui-monospace, monospace; color: #fff; }
.lat-code .features-list .panel a { color: #FF8A4C; }
.lat-code .features-list *:is(.panel, .panel *) { --color-headings: #fff; }

/* Sign-up (CTA-04): the whole band is the opposite color, the card has none of its own; orange dot field at both sides. */
.lat-signup .c4-card { background: transparent !important; box-shadow: none; }
.lat-dots .c4 { position: relative; }
.lat-dots .c4::before, .lat-dots .c4::after { content: ""; position: absolute; top: 12%; bottom: 12%; width: min(22vw, 300px); pointer-events: none;
	background: radial-gradient(circle, #FF6B1F 1.4px, transparent 1.8px) 0 0 / 26px 26px; opacity: .55;
	-webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent); }
.lat-dots .c4::before { left: 0; }
.lat-dots .c4::after { right: 0; transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) { .lat-dots .c4::before, .lat-dots .c4::after { animation: lat-drift 18s linear infinite alternate; } }
@keyframes lat-drift { to { background-position: 26px 13px; } }
@media (max-width: 767px) { .lat-dots .c4::before, .lat-dots .c4::after { width: 18vw; opacity: .35; } }

/* Regions map (IMG-24): the dot map sits on the mode's card color. */
.lat-map img { background: var(--cm-surface, #F4F4F4); border-radius: 14px; }

/* Inverted pieces (lat-invert): strips and banners in the opposite color of the page. */
.lat-invert *:is(.d13-card, .d12) { background: var(--lat-ink) !important; color: var(--lat-paper) !important; border-color: transparent !important; }
.lat-invert *:is(.d13-card, .d12) *:is(h2, p) { color: var(--lat-paper) !important; }

/* Footer (FTR-13): links at body size, the index stays ruled. */
body .sb-blk.sb-blk.sb-blk .f13 .f13-row ul a { font-size: 17px !important; font-weight: 500 !important; font-family: var(--font-body) !important; font-stretch: 100%; letter-spacing: 0 !important; }

/* Product pictures in tabs and the pinned story keep their whole drawing (they are screens, not photos). */
body .lat-how img, body .lat-workloads img, body .lat-story img, body .lat-usecases img { object-fit: contain !important; background: #000; }
body .lat-story .ct-sticky-media, body .lat-story *:is(figure, .st-media) { height: auto !important; aspect-ratio: auto !important; }

/* Framework layouts: paragraphs in the mode's muted color (Studio Blocks already do this). */
body .lat *:is(.wysiwyg, .faq-answer, .answer, .cc-columns) p { color: var(--cm-muted, #4D4D4D); }


/* Homepage
--------------------------------------------------------------------------------------- */

/* .section-list-wrap li { border-color: #fff; } */
/* .giving-form_wrapper { background-color: #fff; padding: 40px 25px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} */


/* Secondary Pages
--------------------------------------------------------------------------------------- */



/* Media Queries
--------------------------------------------------------------------------------------- */


/* Desktops and laptops ----------- */

@media only screen
and (max-height : 1440px) {


}

@media only screen
and (max-height : 1100px) {


}

@media only screen
and (max-height : 900px) {


}

@media only screen
and (max-height : 800px) {


}

@media only screen
and (max-height: 540px) {


}


@media only screen
and (max-width : 2260px) {


}


@media only screen
and (max-width : 2000px) {


}


@media only screen
and (max-width : 1800px) {


}



@media only screen
and (max-width : 1770px) {


}

@media only screen
and (max-width : 1600px) {

}


@media only screen
and (max-width : 1500px) {


}

@media only screen
and (max-width : 1350px) {


}


@media only screen
and (max-width : 1300px) {


}



@media only screen
and (max-width : 1350px) {


}

@media only screen
and (max-width : 1200px) {


}

@media only screen
and (max-width : 1150px) {


}

@media only screen
and (max-width : 1100px) {


}

@media only screen
and (max-width : 1000px) {


}

@media only screen
and (max-width : 880px) {


}


/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {


}

@media screen and (min-width:320px) and (max-width:780px) and (orientation:landscape) {


}

@media only screen
and (max-width : 501px) and (orientation:portrait)  {
	

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {


}