/*
Theme Name:     Curator
Theme URI:
Description:    Kadence child theme for the Curator marketing site.
Author:         CuratorLive
Author URI:
Template:       kadence
Version:        1.1.0
*/

/* ============ Brand typography ============ */
body, button, input, select, optgroup, textarea, .entry-content, .entry-content p {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .wp-block-heading, .entry-title, .cur-home h1, .cur-home h2, .cur-home h3, .cur-home h4 {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ============================================================================
 * ORANGE-AS-TEXT TOKEN  (issue #7)
 *
 * #FF8800 stays the brand. It is not muted: every FILL, rule, icon-shape and
 * background shape on the site is still #FF8800. What changed is the TEXT sat
 * on and next to it, because all three of these measured below AA:
 *
 *     white text on #FF8800 .................. 2.39:1
 *     #FF8800 text on white .................. 2.39:1
 *     white text over the Curator Warm ramp ... 2.39–3.83:1
 *
 * Three separate fixes, because they are three different problems:
 *
 *   1. Text ON an orange fill  -> ink #141414.
 *        ink on #FF8800 = 7.70:1     ink on #E06B00 (hover) = 5.50:1
 *   2. Orange used AS text on a light surface -> --orange-text below.
 *   3. Text over the gradient -> ink. Measured every 5% along
 *      #FF8800 -> #FF5E62 -> #E5457E: ink never drops below 4.81:1 (at the
 *      pink end), while white never gets above 3.83:1. So the gradient can
 *      stay a text-bearing surface — but only for ink, never for white.
 *
 * --orange-text is #A85200, not the #B45900 the issue floated. #B45900 clears
 * white (4.81) and the warm tint (4.53) but only reaches 4.33:1 on the
 * rgba(255,136,0,.12) chip fill, which is a real surface in this system.
 * #A85200 clears all three: white 5.42, #FFF7F0 5.12, chip 4.88.
 *
 * Defined on :root, not on .cur-home, because orange text also appears in the
 * Kadence header, the blog loop, single-post content and page-content inline
 * styles — all outside the .cur-home token scope.
 *
 * NOT changed, deliberately:
 *   .cur-foot a:hover is #FF8800 on the #17151a footer = 7.70:1. Orange text
 *   passes on a dark surface; darkening it there would only lose brand colour.
 *   .cur-mark is a decorative quotation ornament, not text content.
 * ========================================================================== */
:root{--orange-text:#A85200;}

/* ============ Homepage component system (cur-*) ============ */
.cur-home{
	--orange:#FF8800; --orange-dk:#E06B00; --coral:#FF6B3D; --pink:#E5457E;
	--ink:#141414; --slate:#5A5560; --tint:#FFF7F0; --white:#FFFFFF; --line:#F0E9E2;
	--grad:linear-gradient(135deg,#FF8800 0%,#FF5E62 55%,#E5457E 100%);
	--shadow:0 12px 34px rgba(20,20,20,.08); --shadow-hov:0 22px 48px rgba(255,136,0,.20);
	color:var(--ink); line-height:1.6;
}
.cur-home *{box-sizing:border-box;}
.cur-home h1,.cur-home h2,.cur-home h3,.cur-home h4{margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:800;text-wrap:balance;}
.cur-home p{margin:0;}
.cur-home a{text-decoration:none;color:inherit;}
.cur-wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.cur-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text);}
.cur-sec{padding:92px 0;}
.cur-tint{background:var(--tint);}
.cur-grad{background:var(--grad);color:#fff;}
.cur-center{text-align:center;}
.cur-lead{color:var(--slate);font-size:1.18rem;}
.cur-grad .cur-lead{color:rgba(255,255,255,.92);}

.cur-ph{position:relative;border-radius:18px;overflow:hidden;
	background:linear-gradient(135deg,rgba(255,136,0,.16),rgba(229,69,126,.16)),var(--tint);
	border:1px dashed rgba(255,136,0,.45);display:flex;align-items:center;justify-content:center;}
.cur-ph::after{content:attr(data-label);font-size:.72rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:rgba(20,20,20,.42);}
.cur-r43{aspect-ratio:4/3;} .cur-r11{aspect-ratio:1/1;}

.cur-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
	padding:.92rem 1.9rem;border-radius:999px;font-weight:700;font-size:1rem;border:2px solid transparent;
	transition:transform .22s ease,box-shadow .22s ease,background .22s ease;cursor:pointer;}
/* ink on the orange fill, not white — 7.70:1 resting, 5.50:1 on the darker hover */
.cur-btn-primary{background:var(--orange);color:var(--ink) !important;}
.cur-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,136,0,.34);background:var(--orange-dk);}
.cur-btn-ghost{background:transparent;color:var(--ink) !important;border-color:rgba(20,20,20,.18);}
.cur-btn-ghost:hover{transform:translateY(-2px);border-color:var(--orange);color:var(--orange-text) !important;}
.cur-grad .cur-btn-primary{background:#fff;color:var(--orange-text) !important;}
.cur-grad .cur-btn-primary:hover{background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.22);}
/* The ghost was white text sat straight on the gradient: 2.39:1 at the orange
 * end, 3.83:1 at the pink end, failing everywhere. Ink over the ramp does clear
 * AA (4.81:1 worst case) but only by 7%, and exactly where a button lands on a
 * 135deg ramp moves with viewport width — too thin a margin to depend on. So the
 * button gets its own opaque ink fill instead and stops being a gradient-bearing
 * surface at all: white on #141414 is 18.42:1 wherever it sits. */
.cur-grad .cur-btn-ghost{background:var(--ink);color:#fff !important;border-color:var(--ink);}
.cur-grad .cur-btn-ghost:hover{background:#000;border-color:#000;color:#fff !important;}

.cur-chip{display:inline-block;padding:.5rem 1rem;border-radius:999px;background:rgba(255,136,0,.12);
	color:var(--orange-text);font-weight:700;font-size:.82rem;}

/* hero */
.cur-hero{padding:64px 0 84px;position:relative;overflow:hidden;}
.cur-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
	radial-gradient(60% 60% at 88% 6%,rgba(255,136,0,.10),transparent 60%),
	radial-gradient(50% 50% at 5% 92%,rgba(229,69,126,.08),transparent 60%);}
.cur-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;}
.cur-hero h1{font-size:clamp(2.4rem,5vw,3.7rem);margin:1rem 0 0;}
.cur-hero .cur-lead{margin-top:1.15rem;max-width:34ch;}
.cur-btns{display:flex;gap:.9rem;margin-top:1.9rem;flex-wrap:wrap;}
.cur-trust{margin-top:1.5rem;font-size:.92rem;color:var(--slate);}
.cur-trust b{color:var(--ink);}
.cur-collage{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:132px;gap:16px;align-items:stretch;}
.cur-collage .cur-ph{aspect-ratio:auto;height:100%;border-style:solid;border-color:rgba(255,136,0,.18);box-shadow:var(--shadow);}
.cur-collage .cur-tall{grid-row:span 2;}

/* A collage with no placeholder slots left in it (#41). Page 373's Capture and
 * Share placeholders were removed rather than filled — an empty grey box
 * labelled "Capture" advertises an unfinished page — which leaves one photo and
 * the bubble in a two-column grid, i.e. a dead column and a photo hanging off
 * the left edge of the hero. One 300px track centred in the hero column keeps
 * the photo at exactly the size [curator_img] already declares in `sizes`
 * (250-300px), so nothing is upscaled and the geometry is unchanged from when
 * the placeholders were beside it.
 *
 * Scoped with :not(:has(.cur-ph)) deliberately: the other five verticals and
 * the homepage still carry placeholders and must not move.
 *
 * The original condition was `:not(:has(.cur-ph))` alone, which was wrong in a
 * way that only showed up once someone filled the last placeholder: the
 * homepage collage went to a single centred column the moment its AI-FX slot
 * got a real image, because "no placeholders" was true for both "slots were
 * removed" and "every slot is filled". Those need opposite layouts.
 *
 * Now it also requires no video and no second photo — i.e. genuinely one
 * visual left, which is the 373 case this was written for. */
.cur-collage:not(:has(.cur-ph)):not(:has(.cur-vid)):not(:has(.cur-shot ~ .cur-shot)){grid-template-columns:300px;justify-content:center;}

/* Real photography in a collage slot. .cur-shot is emitted by [curator_img] and
 * sits in the same grid position a .cur-ph placeholder would, so it has to match
 * the placeholder's radius/shadow rather than introduce its own card treatment.
 *
 * The vertical hero sources are small — 600x598 for five of them — so the slot
 * is capped rather than allowed to grow: below 900px the hero collapses to one
 * column and the collage would otherwise stretch to the full 1200px wrap, which
 * would ask a 600px file to fill a ~590px column (and ~1180px on a 2x screen).
 * 616px keeps each column at or under 300 CSS px, i.e. 600 device px at 2x, so
 * the image is never scaled beyond its native size.
 *
 * As of #19 the homepage hero collage has a .cur-shot too (attachment 393, the
 * mirror booth, also 600px wide), so the cap now applies there as well — which
 * is what it should do: without it the stacked hero below 900px would ask that
 * same 600px file to fill a ~548px column. The :has() scoping is kept because
 * the AI-FX slot beside it is still a placeholder and the cap must not fire on
 * a collage that has no photograph in it at all.
 *
 * Note the interaction with margin-inline:auto below: auto margins on a grid
 * item override stretch, so under 900px the collage sizes to fit-content rather
 * than to 616px — measured 389.7px, i.e. two 186.9px columns, which is exactly
 * 393's native ratio at the 280px row height. That is the "constrain it and let
 * the layout adapt" behaviour, not a bug. */
.cur-collage .cur-shot{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px;
	box-shadow:var(--shadow);background:var(--tint);}
.cur-collage:has(.cur-shot){max-width:616px;}
@media (max-width:900px){.cur-collage:has(.cur-shot){margin-inline:auto;}}

/* A looping tile in a collage slot (#32). Same geometry as .cur-shot above, but
 * deliberately a separate selector rather than a second class on the <video>:
 * .cur-shot also triggers the :has() max-width, which exists for the verticals'
 * 600px stills and has no business capping the homepage hero.
 *
 * height:100% and no aspect-ratio, because the collage slot is sized by the
 * grid row (132px) and not by the source. The box is 242.8x132 (1.84:1) at the
 * widest and 163x132 (1.24:1) on a 390px phone — landscape everywhere, never
 * square, despite the slot carrying .cur-r11. `.cur-collage .cur-ph` sets
 * aspect-ratio:auto at (0,2,0) and beats `.cur-r11` at (0,1,0).
 *
 * The loop is therefore encoded 3:2, the minimax fit across that measured
 * range; design/media/encode.sh has the full viewport table. Do not "restore"
 * a square encode to match the class name — object-fit:cover would throw away
 * 46% of the frame height on desktop. */
.cur-collage .cur-vid{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px;
	box-shadow:var(--shadow);background:var(--tint);}

.cur-bubble{grid-column:1 / -1;background:#fff;border:1px solid var(--line);border-radius:16px;
	padding:14px 16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);}
.cur-bubble .cur-dot{width:40px;height:40px;border-radius:50%;background:var(--grad);flex:none;}
.cur-bubble p{font-size:.9rem;color:var(--slate);}
.cur-bubble b{color:var(--ink);}

.cur-head{max-width:640px;margin:0 auto 50px;}
.cur-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}
.cur-head p{margin-top:.9rem;}

.cur-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cur-tile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;
	transition:transform .28s ease,box-shadow .28s ease;}
.cur-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-hov);}
.cur-tile .cur-ph{margin-bottom:12px;}

/* A real photograph in an experience tile (#19). Mirrors .cur-device .cur-shot
 * exactly, except the ratio is 4:3 rather than square, because that is what the
 * .cur-r43 placeholder it replaces reserves — swapping one for the other must
 * not move the heading underneath it.
 *
 * aspect-ratio + object-fit rather than height:auto on its own: the eight tiles
 * sit in one grid row at desktop, so a source with a different native ratio
 * would make its row taller and leave the other seven short. Sizing note: the
 * tile is 233 CSS px at the widest the site gets (1112px content, 4 columns,
 * 20px gaps, 14px padding and a 1px border each side), and (50vw - 64px) in the
 * 2-up layout below 900px. 960x800 clears 3x everywhere. */
.cur-tile .cur-shot{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
	border-radius:18px;background:var(--tint);margin-bottom:12px;}
/* A tile can hold footage as well as a photograph (#32 — the Green Screen tile).
 * .cur-vid was only ever styled inside .cur-collage and .cur-device, so in a
 * tile the <video> element's own width="700" height="524" attributes applied and
 * the tile blew the grid apart, stretching one column across the row. Same
 * geometry as .cur-tile .cur-shot above: the tile decides the size, not the file. */
.cur-tile .cur-vid{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
	border-radius:18px;background:var(--tint);margin-bottom:12px;}
.cur-tile h3{font-size:1.05rem;}
.cur-tile p{font-size:.9rem;color:var(--slate);margin-top:.3rem;}

.cur-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.cur-logo{height:56px;border-radius:12px;background:#fff;border:1px solid var(--line);
	display:flex;align-items:center;justify-content:center;color:rgba(20,20,20,.32);
	font-weight:700;letter-spacing:.1em;font-size:.72rem;}

.cur-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.cur-pillar .cur-ic{width:52px;height:52px;border-radius:14px;background:var(--grad);margin-bottom:16px;}
.cur-pillar h3{font-size:1.15rem;}
.cur-pillar p{color:var(--slate);font-size:.98rem;margin-top:.5rem;}

/* The homepage pricing band used to live here as `.cur-price` + `.cur-big`: a
 * two-column card, text left, price right. It was removed because it collided
 * with the pricing-page plan rows, which share the class name `.cur-price` (see
 * `.cur-plan .cur-price` further down). Unscoped, the two overwrote each other
 * on source order and broke both pages — the plan-card rules turned the band
 * into a nowrap flex row, which disabled its mobile collapse and squeezed
 * "from $29" to one character per line on a phone; and the band's card chrome
 * put a bordered, shadowed box around every plan's price.
 *
 * Rather than scope around the clash, the homepage section was rebuilt on the
 * .cur-stat pattern below — the same centred eyebrow/number/heading/lead/CTA
 * stack the "40%" payoff section uses. One component instead of two, and no
 * class name shared between unrelated things. Do not reintroduce `.cur-price`
 * for anything that is not a plan-card amount row. */

.cur-stat{max-width:720px;margin:0 auto;text-align:center;}
.cur-num{font-size:clamp(3.5rem,9vw,6rem);font-weight:800;line-height:1;
	background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cur-fineprint{font-size:.82rem;color:var(--slate);margin-top:1.4rem;}

/* Printer compatibility rows (#41). The supported models used to live in
 * .cur-chip2 pills, which read as decoration; these are ordinary paragraphs so
 * every model number is real body text. That is the whole point of the section
 * — an answer engine can only cite a model number it can actually read, and no
 * competitor names a single one. Do not "tidy" this back into chips.
 *
 * The brand label is a fixed-width inline-block rather than a grid column so a
 * long model list wraps under itself and stays hung off the brand. */
.cur-models{display:grid;gap:10px;}
.cur-models p{margin:0;color:var(--slate);line-height:1.6;}
.cur-models b{color:var(--ink);display:inline-block;min-width:108px;}
@media (max-width:560px){.cur-models b{display:block;min-width:0;}}

.cur-lines{text-align:center;}
.cur-lines h2{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.14;}
.cur-accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.cur-devices{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.cur-device{text-align:center;}
.cur-device .cur-ph{margin-bottom:12px;}
.cur-device h4{font-size:.98rem;}

/* Real footage in a device slot (#24). .cur-vid is the <video> from
 * [curator_video]; .cur-shot is the <img> from [curator_img] that fills the
 * Kiosk slot, for which no usable video exists. The two have to be
 * indistinguishable in the row, so they share one rule.
 *
 * aspect-ratio, not the intrinsic size, because the tile is square and the
 * sources are not all 480x480 (the 360 loop is 540). Stating it here also
 * reserves the box before the poster decodes, so the row does not shift.
 *
 * object-fit:cover applies to the poster image as well as to decoded frames,
 * so the fallback state is framed identically to playback — no jump at the
 * moment the loop starts.
 *
 * Sizing note for whoever re-encodes these: the tile is SMALLER than it looks.
 * .cur-wrap is 1160px including 24px padding, so the row's content box is
 * 1112px; five columns with 18px gaps make each tile 208 CSS px at the widest
 * the site ever gets, and (50vw - 33px) in the 2-up layout below 900px. 480x480
 * is therefore over 2x everywhere and only ~1% short of 3x on a 390px phone —
 * a much smaller compromise than "the sources are only 480p" suggests. */
.cur-device .cur-vid,
.cur-device .cur-shot{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
	border-radius:18px;background:var(--tint);box-shadow:var(--shadow);margin-bottom:12px;}

.cur-support{max-width:680px;margin:0 auto;text-align:center;}

.cur-quote{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;
	padding:48px;box-shadow:var(--shadow);}
.cur-mark{font-size:3.4rem;line-height:.6;color:var(--orange);font-weight:800;}
.cur-quote blockquote{margin:14px 0 0;font-size:1.5rem;line-height:1.4;font-weight:600;letter-spacing:-.01em;}
/* Kadence puts a rule and an indent on every blockquote. This card already
 * carries .cur-mark as its quotation ornament, so the rule is a second one. */
.cur-quote blockquote{border:0;padding:0;}
.cur-by{display:flex;align-items:center;gap:14px;margin-top:26px;}
.cur-av{width:52px;height:52px;border-radius:50%;background:var(--grad);flex:none;}
.cur-by b{display:block;}
.cur-by span{color:var(--slate);font-size:.92rem;}

/* Testimonial attribution. <figure>/<blockquote>/<figcaption><cite> rather than
 * a div stack, because these are quoted people and the citation is not
 * decoration. Deliberately NOT wrapped in Review/AggregateRating schema: the
 * quotes are genuine but not formally substantiated, and structured review
 * markup on unsubstantiated testimonials is a real risk.
 *
 * No avatar. The production attributions pointed at media 177/178/179, which
 * are flag graphics rather than headshots, so .cur-av is left off instead of
 * carrying a fake face over. Add it back only if a real photo exists.
 *
 * .cur-stars appears only where the source shortcode recorded a rating
 * (star_rating="100%"). Two of the four are star_rating="none" and get no
 * stars — an invented rating is worse than no rating. */
.cur-by cite{display:block;font-style:normal;font-weight:700;color:var(--ink);}
.cur-by .cur-stars{margin-left:auto;flex:none;color:var(--orange);font-size:1rem;
	letter-spacing:.08em;line-height:1;}

/* Two-up variant for the operator quotes; single-column card everywhere the
 * page shows one quote on its own. */
.cur-quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch;}
/* Cards stretch to the tallest quote and the attribution is pushed to the
 * bottom, so two quotes of different lengths still line their names up. */
.cur-quotes .cur-quote{display:flex;flex-direction:column;}
.cur-quotes .cur-quote figcaption{margin-top:auto;padding-top:26px;}
.cur-quotes .cur-quote{max-width:none;padding:36px;}
.cur-quotes .cur-quote blockquote{font-size:1.2rem;}
.cur-quote-sm{max-width:680px;padding:36px;}
.cur-quote-sm blockquote{font-size:1.25rem;}
@media (max-width:900px){
	.cur-quotes{grid-template-columns:1fr;}
}
@media (max-width:600px){
	.cur-quote,.cur-quotes .cur-quote,.cur-quote-sm{padding:30px 24px;}
	.cur-by{flex-wrap:wrap;}
	.cur-by .cur-stars{margin-left:0;flex-basis:100%;}
}

.cur-news{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
	background:var(--grad);border-radius:26px;padding:48px;color:#fff;}
.cur-news h2{font-size:2rem;}
.cur-form{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.cur-form input{flex:1;min-width:200px;padding:.9rem 1.1rem;border-radius:999px;border:0;font-size:1rem;font-family:inherit;}
.cur-note{font-size:.8rem;color:rgba(255,255,255,.82);margin-top:12px;}
.cur-news .cur-ph{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12);}
.cur-news .cur-ph::after{color:rgba(255,255,255,.7);}

.cur-faq{max-width:760px;margin:0 auto;}
.cur-faq details{border-bottom:1px solid var(--line);padding:20px 4px;}
.cur-faq summary{font-weight:700;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;}
.cur-faq summary::-webkit-details-marker{display:none;}
.cur-faq summary::after{content:"+";color:var(--orange-text);font-weight:800;font-size:1.3rem;line-height:1;}
.cur-faq details[open] summary::after{content:"\2013";}
.cur-faq details p{margin-top:.8rem;color:var(--slate);}

.cur-final{max-width:680px;margin:0 auto;text-align:center;}
.cur-final h2{font-size:clamp(2rem,4vw,2.9rem);}

/* homepage full-bleed + hide default page title */
body.home .entry-hero,
body.home nav.kadence-breadcrumbs{display:none !important;}
body.home #inner-wrap .content-container,
body.home #inner-wrap .content-area{padding-top:0 !important;padding-bottom:0 !important;}
body.home .entry-content{margin-top:0 !important;}

/* reveal */
html.js .cur-home [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
html.js .cur-home [data-reveal].in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){html.js .cur-home [data-reveal]{opacity:1;transform:none;transition:none;}}

/* responsive */
@media (max-width:900px){
	.cur-hero-grid,.cur-news{grid-template-columns:1fr;}
	.cur-tiles,.cur-pillars,.cur-devices,.cur-logos{grid-template-columns:repeat(2,1fr);}
	.cur-sec{padding:64px 0;}
}
@media (max-width:520px){
	.cur-tiles,.cur-devices,.cur-logos{grid-template-columns:1fr 1fr;}
	.cur-pillars{grid-template-columns:1fr;}
}

/* ============ Feature-page extras (printer chips, compare, badge) ============ */
/* Hero announcement pill: links the homepage hero to a specific launch.
 * Deliberately NOT the decorative category chip that was stripped from every
 * page top in #116 - that one was a label that went nowhere. This carries
 * news and is a link, so it earns the space. Reuses the .cur-badge colour
 * language rather than inventing a second pill. */
.cur-ann{display:inline-flex;align-items:center;gap:.5rem;max-width:100%;padding:.34rem .9rem .34rem .34rem;border:1px solid rgba(255,136,0,.26);border-radius:999px;background:rgba(255,136,0,.09);color:var(--orange-text);font-size:.84rem;font-weight:700;line-height:1.3;text-decoration:none;transition:background .18s ease,border-color .18s ease;}
.cur-ann:hover,.cur-ann:focus-visible{background:rgba(255,136,0,.16);border-color:rgba(255,136,0,.45);}
.cur-ann-new{flex:none;padding:.22rem .52rem;border-radius:999px;background:var(--grad);color:#fff;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;}
.cur-ann-go{flex:none;}
@media (prefers-reduced-motion:no-preference){.cur-ann-go{transition:transform .18s ease;}.cur-ann:hover .cur-ann-go{transform:translateX(3px);}}
@media (max-width:560px){.cur-ann{font-size:.76rem;padding:.46rem .72rem .46rem .36rem;gap:.4rem;}.cur-ann-new{font-size:.6rem;padding:.2rem .42rem;}}

.cur-badge{display:inline-block;padding:.4rem .9rem;border-radius:999px;background:rgba(255,136,0,.12);
	color:var(--orange-text);font-weight:700;font-size:.78rem;letter-spacing:.04em;}
.cur-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.cur-chip2{display:inline-flex;align-items:center;padding:.55rem 1.05rem;border-radius:999px;
	background:#fff;border:1px solid var(--line);font-weight:600;font-size:.92rem;color:var(--ink);}
.cur-vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px;}
.cur-vs .cur-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;}
.cur-vs .cur-card.cur-old{opacity:.9;}
.cur-vs .cur-card.cur-new{border-color:rgba(255,136,0,.5);box-shadow:var(--shadow);}
.cur-vs h3{font-size:1.15rem;margin-bottom:.7rem;}
.cur-flow{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;margin:.2rem 0 .8rem;}
.cur-vs .cur-new .cur-flow{color:var(--orange-text);}
.cur-checks,.cur-crosses{list-style:none;padding:0;margin:0;}
.cur-checks li,.cur-crosses li{padding:7px 0 7px 30px;position:relative;color:var(--slate);line-height:1.5;}
.cur-checks li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--orange-text);font-weight:800;}
.cur-crosses li::before{content:"\2715";position:absolute;left:0;top:7px;color:#b9b0a8;font-weight:700;}
@media (max-width:700px){.cur-vs{grid-template-columns:1fr;}}

/* ============ Proof band (#39) ============
 * Three figures under the photo-booth hero. Deliberately NOT a second stat
 * component: it reuses .cur-tiles/.cur-tile for the card chrome and .cur-num
 * for the gradient numeral, so it inherits the hover lift and the brand
 * gradient for free. The only thing that has to change is scale — .cur-num is
 * sized for a single full-width figure (up to 6rem) and "1,000,000+" cannot
 * sit in a third of the row at that size.
 *
 * The column count lives here rather than in an inline style because an inline
 * grid-template-columns outranks the responsive media queries below and would
 * pin the band to three columns on a phone, where a 10-character figure at
 * ~30px would run out of the tile. Scoped as .cur-proof .cur-tiles (0,2,0) it
 * still beats the generic .cur-tiles rules in the media queries above. */
.cur-proof .cur-tiles{grid-template-columns:repeat(3,1fr);}
.cur-proof .cur-tile{text-align:center;padding:26px 18px;}
.cur-proof .cur-num{font-size:clamp(1.9rem,4vw,2.9rem);}
.cur-proof .cur-tile p{font-size:.95rem;margin-top:.4rem;}
@media (max-width:520px){.cur-proof .cur-tiles{grid-template-columns:1fr;}}

/* ============ Three-pillar "How it works" band (#47) ============
 * The six vertical pages run .cur-pillars with three steps, not the four the
 * base rule assumes. That count used to be carried by an inline
 * `style="grid-template-columns:repeat(3,1fr)"` on the element — and an inline
 * declaration outranks every media query, so the band stayed 3-up at 390px and
 * the tile headings fragmented inside words ("Spo nsor -rea dy"). Exactly the
 * hazard the .cur-proof note above warns about; it simply had not been applied
 * here. Do not put the column count back in the markup.
 *
 * .cur-pillars.cur-pillars-3 is (0,2,0), so it beats the generic .cur-pillars
 * rules in the responsive block above without !important, and the 520px query
 * below beats it on source order at equal specificity. Collapse straight from
 * three to one, mirroring .cur-proof: an intermediate 2-up leaves a third step
 * orphaned on its own row, which reads as a missing step rather than a wrap. */
.cur-pillars.cur-pillars-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:520px){.cur-pillars.cur-pillars-3{grid-template-columns:1fr;}}

/* .cur-home a is `color:inherit;text-decoration:none` so that card-wrapping
 * anchors don't turn a whole tile blue and underlined. The side effect is that
 * an inline link inside a paragraph is invisible — indistinguishable from the
 * text around it, which fails WCAG 1.4.1 (colour alone is not even in play
 * here; there is no cue at all). Opt in with .cur-link where the link is a
 * real inline call to action, e.g. the "see pricing" hook on #373. Brand
 * orange plus an underline, no new colour introduced. */
.cur-home a.cur-link{color:var(--orange-text);text-decoration:underline;
	text-underline-offset:3px;font-weight:600;}
.cur-home a.cur-link:hover{text-decoration-thickness:2px;}

/* ============ About page (#44) ============
 * Two additions, both scoped so nothing already on the site moves.
 *
 * .cur-about-firsts is the 2016 / 2017 / 2026 row. Like the proof band above
 * it reuses .cur-tiles/.cur-tile/.cur-num rather than introducing a timeline
 * component — the years ARE the figures, so .cur-num already renders them in
 * the brand gradient at the right weight, and the tile chrome and hover lift
 * come for free. Two things change: three columns instead of four, and a
 * smaller numeral, because a year here sits above a full sentence rather than
 * above a one-word label. Scoped (0,2,0) so it still outranks the generic
 * .cur-tiles rules in the responsive block above. It collapses to one column
 * at 760px rather than the proof band's 520px: the sentences are long enough
 * to run five or six lines in a third of a tablet width, and three tiles of
 * wildly unequal height is worse than a stack.
 *
 * .cur-roster is the team, as text. There are seven people and four headshots
 * (18336-18339), so a photo grid would leave three of seven as gaps and read
 * as unfinished rather than deliberate — James chose the text roster. The
 * headshots stay in use at 36px in .cur-cta-face. Two columns because the
 * roster is four rows, not seven: people who share a role share a row. */
.cur-about-firsts .cur-tiles{grid-template-columns:repeat(3,1fr);}
.cur-about-firsts .cur-tile{padding:28px 24px;}
.cur-about-firsts .cur-num{font-size:clamp(1.7rem,3vw,2.2rem);}
.cur-about-firsts .cur-tile p{font-size:.98rem;color:var(--slate);margin-top:.7rem;line-height:1.55;}
@media (max-width:760px){.cur-about-firsts .cur-tiles{grid-template-columns:1fr;}}

.cur-roster{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 48px;max-width:880px;margin:0 auto;}
.cur-roster-row h3{font-size:1.15rem;margin:0;}
.cur-role{display:inline-block;margin-top:7px;font-size:.78rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);}
.cur-roster-row p{margin-top:9px;color:var(--slate);line-height:1.55;}
@media (max-width:640px){.cur-roster{grid-template-columns:1fr;gap:28px;}}

/* ============ Header polish ============ */
#masthead .site-branding img.custom-logo{max-height:46px;width:auto;}
/* Logo only — hide the redundant site-title text next to the logo */
#masthead .site-branding .site-title,
#masthead .site-branding .site-title-wrap,
#masthead .site-branding .site-description{display:none !important;}
#masthead .header-navigation .menu-item a[href*="/schedule-a-demo/"]{
	background:#FF8800;color:#141414 !important;border-radius:999px;padding:.5rem 1.25rem;
	font-weight:700;transition:background .2s ease,transform .2s ease;line-height:1.2;
}
#masthead .header-navigation .menu-item a[href*="/schedule-a-demo/"]:hover{
	background:#E06B00;transform:translateY(-1px);color:#141414 !important;
}

/* Top-level nav link colors (brand) */
#masthead .header-navigation .menu > .menu-item > a{color:#141414;font-weight:600;}
#masthead .header-navigation .menu > .menu-item > a:hover,
#masthead .header-navigation .menu > .menu-item.current-menu-item > a{color:var(--orange-text);}

/* On-brand animated dropdowns (desktop) */
@media (min-width:769px){
	#masthead .header-navigation ul.sub-menu{
		background:#fff !important;border:1px solid #F0E9E2 !important;border-radius:14px;
		box-shadow:0 18px 44px rgba(20,20,20,.14);padding:8px;min-width:258px;
	}
	#masthead .header-navigation ul.sub-menu li{border:0 !important;}
	#masthead .header-navigation ul.sub-menu li a{
		color:#141414 !important;background:transparent !important;border-radius:10px;
		padding:11px 16px !important;font-weight:500;
		transition:background .18s ease,color .18s ease;
	}
	#masthead .header-navigation ul.sub-menu li a:hover{
		background:rgba(255,136,0,.10) !important;color:#FF8800 !important;
	}
	/* fade + slide reveal — force submenu in-DOM so it can animate */
	#masthead .header-navigation .menu-item > ul.sub-menu{
		display:block !important;visibility:hidden;opacity:0;transform:translateY(10px);
		pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
	}
	#masthead .header-navigation .menu-item:hover > ul.sub-menu,
	#masthead .header-navigation .menu-item:focus-within > ul.sub-menu{
		visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;
	}
}

/* ============ Pricing ============ */
.cur-toggle{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff;
	border:1px solid var(--line);box-shadow:var(--shadow);}
.cur-toggle button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:.95rem;
	padding:.6rem 1.4rem;border-radius:999px;cursor:pointer;color:var(--slate);transition:all .2s ease;}
.cur-toggle button:hover{color:var(--orange-text);}
.cur-toggle button[aria-selected="true"]{background:var(--grad);color:#fff;}
.cur-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;margin-top:44px;}
.cur-plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 28px;
	position:relative;transition:transform .28s ease,box-shadow .28s ease;height:100%;}
.cur-plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-hov);}
.cur-plan.cur-best{border-color:rgba(255,136,0,.55);box-shadow:0 18px 44px rgba(255,136,0,.16);}
.cur-badge-best{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
	background:var(--grad);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.1em;
	text-transform:uppercase;padding:.4rem 1rem;border-radius:999px;white-space:nowrap;}
.cur-plan h3{font-size:1.35rem;margin-bottom:.35rem;}
.cur-plan .cur-plan-sub{color:var(--slate);font-size:.93rem;min-height:2.6em;}
/* Kept scoped to .cur-plan. `.cur-price` is a plan-card amount row and nothing
 * else — a homepage band once shared the name and broke both pages; see the note
 * in the homepage component system above before reusing this class. */
.cur-plan .cur-price{display:flex;align-items:baseline;gap:.4rem;margin:18px 0 4px;flex-wrap:nowrap;}
.cur-plan .cur-price .amt{font-size:2.9rem;font-weight:800;letter-spacing:-.02em;line-height:1;
	white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cur-plan .cur-price .per{white-space:nowrap;}
/* comparison table */
.cur-cmp-wrap{overflow-x:auto;margin-top:14px;}
.cur-cmp{width:100%;border-collapse:collapse;min-width:640px;background:#fff;
	border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:.93rem;}
.cur-cmp th,.cur-cmp td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);}
.cur-cmp thead th{background:var(--tint);font-weight:800;font-size:.9rem;position:sticky;top:0;}
.cur-cmp td:not(:first-child),.cur-cmp th:not(:first-child){text-align:center;width:16%;}
.cur-cmp .sec td{background:var(--tint);font-weight:800;font-size:.8rem;letter-spacing:.08em;
	text-transform:uppercase;color:var(--ink);}
.cur-cmp .yes{color:var(--orange-text);font-weight:800;}
.cur-cmp .no{color:#c9c1b9;}
.cur-cmp .val{font-weight:700;color:var(--ink);font-size:.88rem;}
.cur-cmp tbody tr:hover td{background:rgba(255,136,0,.04);}
.cur-cmp .sec:hover td{background:var(--tint);}
.cur-plan .cur-price .per{color:var(--slate);font-weight:600;font-size:.95rem;}
.cur-addl{color:var(--slate);font-size:.88rem;margin-bottom:20px;}
.cur-plan .cur-btn{width:100%;margin-bottom:22px;}
.cur-plan .cur-inc{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--ink);margin-bottom:10px;}
.cur-plan ul{list-style:none;padding:0;margin:0;}
.cur-plan li{padding:6px 0 6px 26px;position:relative;color:var(--slate);font-size:.93rem;line-height:1.5;}
.cur-plan li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--orange-text);font-weight:800;}
.cur-plan li .beta{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;
	background:rgba(255,136,0,.14);color:var(--orange-text);padding:.1rem .4rem;border-radius:5px;
	margin-left:.35rem;vertical-align:middle;}
/* billing-mode switching */
.cur-pricing .p-mo,.cur-pricing .p-yr{display:none;}
.cur-pricing[data-mode="mo"] .p-ev,.cur-pricing[data-mode="yr"] .p-ev{display:none;}
.cur-pricing[data-mode="mo"] .p-mo{display:inline;}
.cur-pricing[data-mode="yr"] .p-yr{display:inline;}
.cur-addon{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;
	display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow);}
@media (max-width:900px){.cur-plans{grid-template-columns:1fr;}}

/* ============ Free-trial landing (/free-trial) ============ */
.cur-trial-hero{padding:56px 0 72px;position:relative;overflow:hidden;}
.cur-trial-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
	radial-gradient(58% 58% at 92% 4%,rgba(255,136,0,.12),transparent 60%),
	radial-gradient(50% 50% at 2% 96%,rgba(229,69,126,.09),transparent 60%);}
.cur-trial-grid{display:grid;grid-template-columns:1fr .92fr;gap:52px;align-items:start;position:relative;}
.cur-trial-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:1rem 0 0;}
.cur-trial-hero .cur-lead{margin-top:1.1rem;max-width:38ch;}
.cur-trial-points{list-style:none;padding:0;margin:1.8rem 0 0;}
.cur-trial-points li{padding:8px 0 8px 32px;position:relative;color:var(--slate);line-height:1.55;}
.cur-trial-points li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--orange-text);font-weight:800;}
.cur-trial-points b{color:var(--ink);}

/* form card */
.cur-trial-card{background:#fff;border:1px solid var(--line);border-radius:24px;
	padding:34px 32px;box-shadow:var(--shadow);position:relative;}
.cur-trial-card h2{font-size:1.45rem;}
.cur-trial-card .cur-trial-sub{color:var(--slate);font-size:.95rem;margin-top:.5rem;}
.cur-trial-form{margin-top:22px;}
.cur-trial-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cur-trial-field{margin-bottom:16px;}
.cur-trial-field label{display:block;font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.cur-trial-field label .req{color:var(--pink);margin-left:.15rem;}
.cur-trial-field label .opt{color:var(--slate);font-weight:500;margin-left:.3rem;}
.cur-trial-field input,.cur-trial-field select{
	width:100%;padding:.82rem 1rem;border-radius:12px;border:1px solid #E2DAD2;background:#fff;
	font-family:inherit;font-size:1rem;color:var(--ink);line-height:1.3;
	transition:border-color .18s ease,box-shadow .18s ease;-webkit-appearance:none;appearance:none;}
.cur-trial-field select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A4A4A' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem;}
.cur-trial-field input:hover,.cur-trial-field select:hover{border-color:#cfc4b9;}
.cur-trial-field input:focus,.cur-trial-field select:focus{
	outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,136,0,.22);}
.cur-trial-field input[aria-invalid="true"],.cur-trial-field select[aria-invalid="true"]{border-color:var(--pink);}
.cur-trial-field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(229,69,126,.22);}
.cur-trial-err{display:none;margin-top:6px;font-size:.82rem;font-weight:600;color:#C42360;}
.cur-trial-field.is-bad .cur-trial-err{display:block;}
.cur-trial-hint{display:block;margin-top:6px;font-size:.79rem;color:var(--slate);line-height:1.45;}
/* Phone: dial code + number input on one line. Positioned so the combobox
   popup can span the exact width of the pair at every breakpoint. */
/* scroll-margin keeps the field clear of the sticky header when the popup
   scrolls it to the top of the viewport on a phone. */
.cur-phone-row{display:flex;gap:10px;align-items:flex-start;position:relative;scroll-margin-top:84px;}
.cur-phone-row>input{flex:1 1 auto;min-width:0;}
.cur-trial-field.is-bad .cur-phone-row input{border-color:var(--pink);}
/* Label that only screen readers need — the dial-code control sits under the
   visible "Phone number" label but still carries a real one of its own. */
.cur-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* --- Country dial-code combobox -------------------------------------------
   Unenhanced (no JS) this is a native <select>, which needs a real column
   because it renders the full country name. Once the page script upgrades it,
   the trigger shows only a flag and a dial code and can shrink to fit. */
.cur-cc{flex:0 0 8.6rem;}
.cur-cc.is-enhanced{flex:0 0 auto;}
.cur-cc.is-enhanced .cur-cc-native{display:none;}
/* min-width, not width: every dial code in the list fits inside 120px, so the
   number field never shifts as the country changes — but a longer code added
   later grows the control instead of being cut off. */
.cur-cc-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:.45rem;
	cursor:pointer;min-width:120px;
	padding:.82rem .8rem .82rem 1rem;border-radius:12px;border:1px solid #E2DAD2;background:#fff;
	font-family:inherit;font-size:1rem;color:var(--ink);line-height:1.3;white-space:nowrap;
	min-height:52px;transition:border-color .18s ease,box-shadow .18s ease;}
.cur-cc-trigger:hover{border-color:#cfc4b9;}
.cur-cc-trigger:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,136,0,.22);}
.cur-cc-flag{font-size:1.15rem;line-height:1;}
/* Windows Chrome draws no flag emoji and falls back to the ISO letters. The
   row always carries the ISO code and dial code as text, so nothing here is
   allowed to depend on the glyph actually appearing. */
.cur-cc-dial{font-variant-numeric:tabular-nums;font-weight:600;}
.cur-cc-chev{width:12px;height:8px;flex:none;opacity:.65;}
.cur-cc[data-open="true"] .cur-cc-chev{transform:rotate(180deg);}
.cur-trial-field.is-bad .cur-cc-trigger{border-color:var(--pink);}

/* Anchored to .cur-phone-row, so it is exactly as wide as the dial code and
   number together — full-width on a phone without any viewport arithmetic. */
.cur-cc-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;
	background:#fff;border:1px solid var(--line);border-radius:16px;
	box-shadow:0 18px 42px rgba(31,22,15,.16);padding:8px;}
.cur-cc-pop[hidden]{display:none;}
.cur-cc-search{width:100%;padding:.66rem .85rem;border-radius:10px;border:1px solid #E2DAD2;
	font-family:inherit;font-size:1rem;color:var(--ink);-webkit-appearance:none;appearance:none;}
.cur-cc-search:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,136,0,.22);}
.cur-cc-list{list-style:none;margin:8px 0 0;padding:0;max-height:min(19rem,42vh);overflow-y:auto;
	-webkit-overflow-scrolling:touch;}
.cur-cc-opt{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;border-radius:10px;
	cursor:pointer;font-size:.94rem;color:var(--ink);min-height:44px;}
.cur-cc-opt .iso{font-size:.78rem;font-weight:700;color:var(--slate);letter-spacing:.04em;}
.cur-cc-opt .dial{font-variant-numeric:tabular-nums;font-weight:600;min-width:3.2rem;flex:none;}
.cur-cc-opt .flag,.cur-cc-opt .iso{flex:none;}
/* min-width:0 is what lets a flex item actually shrink far enough to ellipsis;
   without it "United Arab Emirates" pushes the row to two lines. */
.cur-cc-opt .name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cur-cc-opt[hidden]{display:none;}
.cur-cc-opt.is-active{background:#FFF3E4;}
.cur-cc-opt[aria-selected="true"]{font-weight:700;}
.cur-cc-opt[aria-selected="true"] .name::after{content:" ✓";color:var(--orange-text);}
.cur-cc-empty{margin:10px 6px 6px;font-size:.88rem;color:var(--slate);}
.cur-cc-empty[hidden]{display:none;}

@media(max-width:560px){
	/* Shorter list so the search box at the top stays well clear of the
	   on-screen keyboard, and roomier rows for thumbs. */
	.cur-cc-list{max-height:min(15rem,38vh);}
	.cur-cc-opt{padding:.7rem;min-height:48px;}
	.cur-cc-search{min-height:44px;}
}
@media(prefers-reduced-motion:reduce){.cur-cc-trigger{transition:none;}}
.cur-trial-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cur-trial-status{margin:0 0 14px;font-size:.88rem;font-weight:600;color:#C42360;}
.cur-trial-status:empty{margin:0;}
.cur-trial-form .cur-btn{width:100%;margin-top:6px;font-size:1.05rem;padding:1rem 1.6rem;}
.cur-trial-form .cur-btn[disabled]{opacity:.65;cursor:progress;transform:none;box-shadow:none;}
.cur-trial-fine{font-size:.79rem;color:var(--slate);margin-top:14px;line-height:1.5;text-align:center;}
.cur-trial-fine a{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px;}
.cur-trial-alt{font-size:.88rem;color:var(--slate);margin-top:16px;text-align:center;}
.cur-trial-alt a{color:var(--orange-text);font-weight:700;}

/* steps */
.cur-trial-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step;}
.cur-trial-step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;}
.cur-trial-step .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
	border-radius:12px;background:var(--grad);color:#fff;font-weight:800;font-size:1.05rem;margin-bottom:14px;}
.cur-trial-step h3{font-size:1.1rem;}
.cur-trial-step p{color:var(--slate);font-size:.95rem;margin-top:.5rem;}

/* keyboard focus visibility across the page */
.cur-trial a:focus-visible,.cur-trial button:focus-visible,
.cur-trial input:focus-visible,.cur-trial select:focus-visible,
.cur-trial summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:8px;}

@media (max-width:900px){
	.cur-trial-grid{grid-template-columns:1fr;gap:36px;}
	.cur-trial-hero .cur-lead{max-width:none;}
	.cur-trial-steps{grid-template-columns:1fr;}
}
@media (max-width:520px){
	.cur-trial-card{padding:26px 20px;}
	.cur-trial-row{grid-template-columns:1fr;gap:0;}
}

/* ============ Blog listing ============ */
.cur-blog-hero{background:#FFF7F0;padding:74px 0 58px;text-align:center;border-bottom:1px solid #F0E9E2;}
.cur-blog-hero .cur-wrap{max-width:760px;}
.cur-blog-hero h1{font-size:clamp(2.2rem,4.6vw,3.2rem);margin:.6rem 0 0;font-weight:800;letter-spacing:-.02em;color:#141414;}
.cur-blog-hero .cur-lead{margin:1rem auto 0;}
.cur-blog-grid .wp-block-post-template{gap:26px !important;}
.cur-blog-grid .wp-block-post{
	background:#fff;border:1px solid #F0E9E2;border-radius:16px;overflow:hidden;
	display:flex;flex-direction:column;transition:transform .28s ease,box-shadow .28s ease;
}
.cur-blog-grid .wp-block-post:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(255,136,0,.16);}
.cur-blog-grid .wp-block-post-featured-image{margin:0;}
.cur-blog-grid .wp-block-post-featured-image a,.cur-blog-grid .wp-block-post-featured-image img{display:block;}
.cur-blog-grid .wp-block-post-featured-image img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.cur-blog-grid .wp-block-post > :not(.wp-block-post-featured-image){padding-left:22px;padding-right:22px;}
.cur-blog-grid .wp-block-post-terms{margin-top:18px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-text);}
.cur-blog-grid .wp-block-post-terms a{color:var(--orange-text);text-decoration:none;}
.cur-blog-grid .wp-block-post-title{margin-top:8px;font-size:1.2rem;line-height:1.3;font-weight:700;}
.cur-blog-grid .wp-block-post-title a{color:#141414;text-decoration:none;}
.cur-blog-grid .wp-block-post-title a:hover{color:var(--orange-text);}
.cur-blog-grid .wp-block-post-excerpt{margin-top:10px;color:#5A5560;font-size:.95rem;line-height:1.55;}
.cur-blog-grid .wp-block-post-excerpt__more-text{color:var(--orange-text);font-weight:600;}
.cur-blog-grid .wp-block-post-date{margin:14px 0 20px;color:#8b8592;font-size:.85rem;}
.cur-blog-grid .wp-block-query-pagination{margin-top:44px !important;justify-content:center;gap:8px;}
.cur-blog-grid .wp-block-query-pagination a,
.cur-blog-grid .wp-block-query-pagination .current{
	padding:.5rem .9rem;border-radius:10px;border:1px solid #F0E9E2;color:#141414;font-weight:600;text-decoration:none;
}
.cur-blog-grid .wp-block-query-pagination a:hover{border-color:#FF8800;color:var(--orange-text);}
.cur-blog-grid .wp-block-query-pagination .current{background:#FF8800;color:#141414;border-color:#FF8800;}
@media (max-width:900px){.cur-blog-grid .wp-block-post-template{grid-template-columns:1fr 1fr !important;}}
@media (max-width:560px){.cur-blog-grid .wp-block-post-template{grid-template-columns:1fr !important;}}

/* ============ Single post reading experience ============ */
body.single-post .entry-header .entry-title{
	font-size:clamp(2rem,4vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;
}
body.single-post .single-entry .entry-content{max-width:720px;margin-left:auto;margin-right:auto;}
body.single-post .entry-content.single-content{font-size:1.08rem;line-height:1.75;color:#2a2730;}
body.single-post .entry-content.single-content > p{margin:0 0 1.35em;}
body.single-post .entry-content.single-content h2{
	font-size:1.65rem;font-weight:700;letter-spacing:-.015em;margin:2.1em 0 .6em;line-height:1.25;
}
body.single-post .entry-content.single-content h3{
	font-size:1.28rem;font-weight:700;margin:1.7em 0 .5em;line-height:1.3;
}
body.single-post .entry-content.single-content a{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px;}
body.single-post .entry-content.single-content a:hover{color:#141414;}
body.single-post .entry-content.single-content ul,
body.single-post .entry-content.single-content ol{margin:0 0 1.35em;padding-left:1.4em;}
body.single-post .entry-content.single-content li{margin-bottom:.5em;}
body.single-post .entry-content.single-content li > p{margin:0;}
body.single-post .entry-content.single-content blockquote{
	margin:1.8em 0;padding:1.1em 1.4em;background:#FFF7F0;border-left:4px solid #FF8800;
	border-radius:0 12px 12px 0;
}
body.single-post .entry-content.single-content blockquote p:last-child{margin-bottom:0;}
body.single-post .entry-content.single-content img{border-radius:14px;height:auto;}
body.single-post .entry-content.single-content hr{
	border:0;border-top:1px solid #F0E9E2;margin:2.4em 0;
}
body.single-post .entry-content.single-content strong{color:#141414;}
/* related posts grid at the foot of a post */
body.single-post .entry-related .loop-entry{
	border:1px solid #F0E9E2;border-radius:16px;overflow:hidden;
	transition:transform .28s ease,box-shadow .28s ease;
}
body.single-post .entry-related .loop-entry:hover{
	transform:translateY(-5px);box-shadow:0 20px 42px rgba(255,136,0,.15);
}
body.single-post .entry-related .entry-title{font-size:1.08rem;line-height:1.32;}
body.single-post .entry-related .entry-title a:hover{color:var(--orange-text);}

/* ============ Custom footer (replaces Kadence default) ============ */
#colophon.site-footer{display:none !important;}
.cur-foot{background:#17151a;color:#cfc9d2;padding:66px 0 30px;
	font-family:'Inter',-apple-system,sans-serif;}
.cur-foot-wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.cur-foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px;}
.cur-foot h5{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
	margin:0 0 16px;font-family:'Poppins',sans-serif;font-weight:700;}
.cur-foot a{display:block;color:#b7b1bd;font-size:.94rem;padding:5px 0;text-decoration:none;
	transition:color .2s ease;}
.cur-foot a:hover{color:#FF8800;}
.cur-foot-brand{color:#fff;font-size:1.4rem;font-weight:800;margin-bottom:12px;
	font-family:'Poppins',sans-serif;letter-spacing:-.02em;}
.cur-foot-brand span{color:#FF8800;}
.cur-foot-about{font-size:.92rem;color:#9a94a2;max-width:30ch;margin:0 0 18px;line-height:1.6;}
.cur-foot-social{display:flex;gap:16px;}
.cur-foot-social a{display:inline;padding:0;font-weight:600;font-size:.85rem;}
.cur-foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;
	display:flex;justify-content:space-between;gap:16px;font-size:.85rem;color:#8b8592;flex-wrap:wrap;}
@media (max-width:900px){.cur-foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.cur-foot-grid{grid-template-columns:1fr;}}

/* ============================================================================
 * BEGIN — DUAL CTA PAIR + CALENDLY DEMO MODAL  (issue #4)
 * Self-contained region. Everything for the paired "Start Free Trial" /
 * "Book a 30-min demo" component lives between this banner and the END marker.
 * Colours are literal brand hex rather than var() because this component also
 * renders inside the Kadence header, outside the .cur-home token scope.
 * ==========================================================================*/

.cur-cta{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.cur-cta-center{align-items:center;text-align:center;}
.cur-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;}
.cur-cta-center .cur-cta-row{justify-content:center;}

.cur-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
	padding:.92rem 1.9rem;border-radius:999px;font-weight:700;font-size:1rem;line-height:1.2;
	font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;border:2px solid transparent;
	text-decoration:none;cursor:pointer;text-align:center;
	transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;}
.cur-cta-btn:focus-visible{outline:3px solid #E5457E;outline-offset:3px;}
.cur-cta-primary{background:#FF8800;color:#141414 !important;}
.cur-cta-primary:hover{background:#E06B00;color:#141414 !important;transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,136,0,.34);}
.cur-cta-secondary{background:transparent;color:#141414 !important;border-color:rgba(20,20,20,.18);}
.cur-cta-secondary:hover{border-color:#FF8800;color:var(--orange-text) !important;transform:translateY(-2px);}
.cur-cta-sm .cur-cta-btn{padding:.55rem 1.2rem;font-size:.9rem;}

/* on a gradient section the fill inverts, matching .cur-btn's behaviour */
.cur-grad .cur-cta-primary{background:#fff;color:var(--orange-text) !important;}
.cur-grad .cur-cta-primary:hover{background:#fff;color:var(--orange-text) !important;box-shadow:0 14px 30px rgba(0,0,0,.22);}
/* Was white text directly on the ramp — 2.39:1 at the orange end. Given its own
 * opaque ink fill (18.42:1) rather than relying on ink-over-gradient, which only
 * clears AA by 7% at the pink end and shifts with viewport width. Matches
 * .cur-grad .cur-btn-ghost. */
.cur-grad .cur-cta-secondary{background:#141414;color:#fff !important;border-color:#141414;}
.cur-grad .cur-cta-secondary:hover{background:#000;border-color:#000;color:#fff !important;}
/* the trust line IS on the ramp; ink holds >=4.81:1 the whole way along it */
.cur-grad .cur-cta-trust{color:#141414;}
.cur-grad .cur-cta-face-ph{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);}

/* Quiet text link under the pair ("or see pricing" / "or explore all features",
 * issue #6). Deliberately not a button — it must stay visibly subordinate to the
 * two actions above it. Ink at rest rather than #FF8800: orange text on a light
 * surface is 2.39:1 and fails AA, so the accent only appears on hover as the
 * darker #B45900 (4.81:1 on white). */
.cur-cta-alt{margin:0;font-size:.95rem;line-height:1.4;}
.cur-cta-center .cur-cta-alt{text-align:center;}
.cur-cta-alt a{color:#141414;font-weight:600;text-decoration:underline;
	text-underline-offset:3px;text-decoration-thickness:1px;
	transition:color .18s ease;}
.cur-cta-alt a:hover{color:var(--orange-text);}
.cur-cta-alt a:focus-visible{outline:3px solid #141414;outline-offset:3px;border-radius:4px;}
.cur-grad .cur-cta-alt a{color:#141414;}
.cur-grad .cur-cta-alt a:hover{color:#141414;text-decoration-thickness:2px;}
.cur-grad .cur-cta-alt a:focus-visible{outline-color:#141414;}
#mobile-drawer .cur-cta-nav .cur-cta-alt a{color:#fff;}

/* lazy-load state while assets.calendly.com/widget.js is being fetched */
.cur-cta-btn[aria-busy="true"]{pointer-events:none;opacity:.78;}
.cur-cta-btn[aria-busy="true"]::after{content:"";width:.95em;height:.95em;border-radius:50%;
	border:2px solid currentColor;border-top-color:transparent;animation:cur-cta-spin .7s linear infinite;}
@keyframes cur-cta-spin{to{transform:rotate(360deg);}}

/* team trust signal — image sources live in functions.php, curator_cta_avatars().
 * The face count is not fixed: the stack below overlaps however many are given. */
.cur-cta-trust{display:flex;align-items:center;gap:.65rem;margin:0;
	font-size:.92rem;line-height:1.4;color:#5A5560;flex-wrap:wrap;}
.cur-cta-center .cur-cta-trust{justify-content:center;}
/* Each extra face costs 24px of row width, so a four-up stack leaves the copy a
 * very narrow column on a small phone. Below 420px the faces take their own line
 * and the sentence gets the full width back. */
@media (max-width:420px){
	.cur-cta-trust{flex-direction:column;align-items:flex-start;gap:.5rem;}
	.cur-cta-center .cur-cta-trust{align-items:center;text-align:center;}
}
.cur-cta-faces{display:inline-flex;flex:none;}
.cur-cta-face{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none;
	border:2px solid #fff;box-shadow:0 2px 8px rgba(20,20,20,.12);background:#FFF7F0;}
.cur-cta-face + .cur-cta-face{margin-left:-12px;}
.cur-cta-face img{width:100%;height:100%;object-fit:cover;display:block;}
/* neutral geometric placeholder — deliberately depicts no one */
.cur-cta-face-ph{background:linear-gradient(135deg,rgba(255,136,0,.34),rgba(229,69,126,.34)),#FFF7F0;
	box-shadow:inset 0 0 0 1px rgba(255,136,0,.38),0 2px 8px rgba(20,20,20,.10);}

/* header placement (issue #8: two actions, Login + Start Free Trial) */
#masthead .cur-cta-nav{display:flex;align-items:center;}
/* Separation from the nav link group is the substantive part of #8 — Login used
 * to sit inline with Solutions / Experiences / Pricing / Blog. A gap plus a
 * hairline rule makes the actions read as a distinct cluster. */
#masthead .header-navigation .menu > li.cur-cta-nav{
	margin-left:1.15rem;padding-left:1.15rem;border-left:1px solid rgba(20,20,20,.16);}
/* Login is quieter than the trial button but must still read as a button, not a
 * text link: a border you can actually see against the white header. Hover goes
 * to #B45900 rather than #FF8800 — orange text on white is 2.39:1 and fails AA. */
#masthead .cur-cta-nav .cur-cta-secondary{
	background:#fff;border-color:rgba(20,20,20,.34);}
#masthead .cur-cta-nav .cur-cta-secondary:hover{
	background:#FFF7F0;border-color:var(--orange-text);color:var(--orange-text) !important;}
#masthead .cur-cta-nav .cur-cta{flex-direction:row;align-items:center;gap:.55rem;}
#masthead .cur-cta-nav .cur-cta-row{gap:.55rem;flex-wrap:nowrap;}
#masthead .cur-cta-nav .cur-cta-btn{white-space:nowrap;}
#masthead .header-navigation .menu > li.cur-cta-nav > .cur-cta a{padding:.55rem 1.2rem;}
#mobile-drawer .cur-cta-nav{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(20,20,20,.12);}
#mobile-drawer .cur-cta-nav .cur-cta{width:100%;}
#mobile-drawer .cur-cta-nav .cur-cta-row{flex-direction:column;align-items:stretch;width:100%;gap:.6rem;}
/* full-size in the drawer — the compact nav padding is under the 44px tap target */
#mobile-drawer .cur-cta-nav .cur-cta-btn{width:100%;padding:.85rem 1.4rem;font-size:1rem;}
/* Kadence's mobile drawer panel is near-black. The default secondary button is
 * ink-on-transparent, which measured 1.06:1 in there — invisible. Invert it.
 * Tied to the drawer being dark; verify_close/audit assert the measured contrast
 * against the drawer's real background so a lighter drawer trips the test. */
#mobile-drawer .cur-cta-nav .cur-cta-secondary{
	color:#fff !important;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);}
#mobile-drawer .cur-cta-nav .cur-cta-secondary:hover{
	border-color:#FF8800;color:#FF8800 !important;background:rgba(255,255,255,.12);}

/* Calendly's popup sits above Kadence's sticky header */
.calendly-overlay{z-index:100000 !important;}

/* --- Close control ---------------------------------------------------------
 * Calendly ships a 19x19px white X (close-icon.svg) pinned to the viewport
 * corner. Over our light scrim that measured 2.46:1 against its background,
 * and it lands directly on top of the white "Book a 30-min demo" header
 * button, so it was effectively invisible — no way out for a mouse user.
 *
 * Replaced with an opaque 46px circular chip and an ink X drawn in CSS, so it
 * reads the same whatever happens to sit behind it.
 *
 * !important is load-bearing here, not laziness: widget.css is injected into
 * <head> at click time, so it lands AFTER this stylesheet, and Calendly's own
 * rule is `.calendly-overlay .calendly-popup-close` — identical specificity,
 * later in the cascade. Without !important theirs wins.
 * ------------------------------------------------------------------------- */
/* Calendly sizes the panel 1000px wide but paints a ~400px card inside it, so
 * ~300px either side was transparent panel that LOOKED like backdrop and
 * swallowed clicks. Constrain the panel to the card it actually draws: the
 * panel's corner becomes the card's corner (so the close button can sit on it)
 * and everything around it becomes real, clickable backdrop.
 * Desktop only — below Calendly's own 975px breakpoint the card already fills
 * the panel edge to edge, so their mobile layout is left alone. */
@media (min-width:976px){
	.calendly-overlay .calendly-popup{
		min-width:0 !important;max-width:440px !important;width:440px !important;
	}
}

/* Close control: re-parented into .calendly-popup by cta.js, so these offsets
 * are relative to the panel, not the viewport. */
.calendly-overlay .calendly-popup-close{
	width:46px !important;height:46px !important;
	top:10px !important;right:10px !important;
	background:#fff !important;background-image:none !important;
	border:1px solid rgba(20,20,20,.12) !important;border-radius:50% !important;
	box-shadow:0 8px 24px rgba(20,20,20,.30) !important;
	opacity:1 !important;visibility:visible !important;display:block !important;
	position:absolute !important;z-index:3 !important;cursor:pointer !important;
	transition:background .18s ease,border-color .18s ease;
}
.calendly-overlay .calendly-popup-close::before,
.calendly-overlay .calendly-popup-close::after{
	content:"";position:absolute;top:50%;left:50%;
	width:19px;height:2px;border-radius:2px;background:#141414;
}
.calendly-overlay .calendly-popup-close::before{transform:translate(-50%,-50%) rotate(45deg);}
.calendly-overlay .calendly-popup-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.calendly-overlay .calendly-popup-close:hover{background:#FFF7F0 !important;border-color:rgba(255,136,0,.55) !important;}
.calendly-overlay .calendly-popup-close:hover::before,
.calendly-overlay .calendly-popup-close:hover::after{background:#A85200;}
/* Neutral ink ring, not the pink used on the CTA buttons. Pink is the brand's
 * contrast accent against orange fills; on this white chip a neutral ring is
 * both calmer and higher contrast. */
.calendly-overlay .calendly-popup-close:focus-visible{
	outline:3px solid #141414 !important;outline-offset:3px !important;}
@media (max-width:975px){
	.calendly-overlay .calendly-popup-close{top:8px !important;right:8px !important;width:44px !important;height:44px !important;}
}
@media (prefers-reduced-motion:reduce){
	.calendly-overlay .calendly-popup-close{transition:none;}
}

@media (max-width:560px){
	.cur-cta-row{flex-direction:column;align-items:stretch;width:100%;}
	.cur-cta-btn{width:100%;padding-left:1.1rem;padding-right:1.1rem;}
	.cur-cta{align-items:stretch;width:100%;}
	.cur-cta-trust{font-size:.86rem;}
}
@media (prefers-reduced-motion:reduce){
	.cur-cta-btn{transition:none;}
	.cur-cta-btn:hover{transform:none;}
	.cur-cta-btn[aria-busy="true"]::after{animation:none;}
}
/* ===================== END — DUAL CTA + DEMO MODAL ======================= */

/* ============ Asset drop (#48) ============
 * An internal, token-gated upload page. Mobile is the primary target, not a
 * fallback: the footage and photos this collects are on phones, so the layout
 * starts at one column and earns extra columns as width appears.
 *
 * Every colour here is an existing token. #C42360 is the error red already in
 * use by .cur-trial-err rather than a second one. Orange appears as text only
 * via --orange-text and as a fill only under --ink, per the contrast note at
 * the top of this file.
 *
 * No inline grid-template-columns anywhere in the markup this styles. #47 was
 * caused by exactly that — an inline style is (1,0,0) and beats every media
 * query below, which pins a phone to a desktop column count. The column counts
 * live here and nowhere else. */
.cur-drop{padding:40px 0 80px;}
.cur-drop-gate{max-width:520px;margin:80px auto;text-align:center;}
.cur-drop-gate p{margin-top:12px;color:var(--slate);}

.cur-drop-head{max-width:720px;margin-bottom:36px;}
.cur-drop-head h1{font-size:clamp(1.9rem,6vw,2.6rem);margin-top:8px;}
.cur-drop-head .cur-lead{margin-top:14px;}
.cur-drop-count{margin-top:18px;font-size:1rem;color:var(--slate);}
.cur-drop-count strong{font-size:1.5rem;color:var(--orange-text);font-weight:800;}
.cur-drop-note{margin-top:16px;font-size:.86rem;color:var(--slate);}

.cur-drop-name{display:block;margin-top:22px;max-width:380px;}
.cur-drop-name span{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;}
.cur-drop-name input{width:100%;padding:12px 14px;font-size:16px; /* 16px or iOS zooms the page on focus */
	border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);}
.cur-drop-name input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,136,0,.22);}
.cur-drop-name small{display:block;margin-top:6px;font-size:.78rem;color:var(--slate);}

.cur-drop-group{margin-bottom:20px;}
.cur-drop-group details{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.cur-drop-group summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
	padding:18px 20px;cursor:pointer;list-style:none;font-family:'Poppins',sans-serif;}
.cur-drop-group summary::-webkit-details-marker{display:none;}
.cur-drop-group summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;}
.cur-drop-group-title{font-weight:800;font-size:1.1rem;letter-spacing:-.02em;}
.cur-drop-group-meta{font-size:.8rem;font-weight:700;color:var(--orange-text);
	letter-spacing:.06em;text-transform:uppercase;margin-left:auto;}
.cur-drop-group-intro{padding:0 20px;margin-bottom:4px;color:var(--slate);font-size:.92rem;}

.cur-drop-list{display:grid;grid-template-columns:1fr;gap:16px;padding:16px 20px 22px;}
.cur-drop-slot{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--white);}
.cur-drop-slot[data-state="empty"]{border-style:dashed;border-color:rgba(255,136,0,.45);}
.cur-drop-slot[data-state="replace"]{border-color:var(--orange);}

/* The chip drops to its own row on a phone and moves up beside the title once
 * there is width for it. Grid rather than flex so "Needs replacing" can never
 * squeeze a slot name into a two-character column. */
.cur-drop-slot-head{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:start;}
.cur-drop-ar{grid-column:1;grid-row:1;align-self:center;display:block;
	border:2px solid var(--orange);border-radius:4px;background:rgba(255,136,0,.12);}
.cur-drop-ar--square{width:26px;height:26px;}
.cur-drop-ar--landscape{width:34px;height:15px;}
.cur-drop-ar--landscape43{width:28px;height:21px;}
.cur-drop-ar--portrait{width:20px;height:26px;}
.cur-drop-ar--logo{width:34px;height:14px;}
.cur-drop-slot-id{grid-column:2;grid-row:1;min-width:0;}
.cur-drop-slot-id h3{font-size:1.02rem;}
.cur-drop-where{margin-top:2px;font-size:.78rem;color:var(--slate);}
/* The page label is a link so an uploader can see the slot in context before
 * shooting for it. Underlined rather than colour-only: at .78rem on a muted
 * grey, colour alone is not a reliable affordance. */
.cur-drop-where a{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px;}
.cur-drop-where a:hover,.cur-drop-where a:focus-visible{color:var(--orange-dk);}
.cur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.cur-drop-state{grid-column:1 / -1;grid-row:2;justify-self:start;
	font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	padding:4px 10px;border-radius:999px;white-space:nowrap;}
.cur-drop-slot[data-state="empty"] .cur-drop-state{background:rgba(20,20,20,.06);color:var(--slate);}
.cur-drop-slot[data-state="filled"] .cur-drop-state{background:rgba(255,136,0,.12);color:var(--orange-text);}
.cur-drop-slot[data-state="replace"] .cur-drop-state{background:var(--orange);color:var(--ink);}

.cur-drop-brief{margin-top:12px;font-size:.92rem;color:var(--slate);line-height:1.55;}
.cur-drop-slot-note{margin-top:8px;font-size:.82rem;color:var(--orange-text);line-height:1.5;}
.cur-drop-size{margin-top:10px;font-size:.82rem;color:var(--slate);}
.cur-drop-size strong{color:var(--ink);}

.cur-drop-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.cur-drop-thumbs:empty{display:none;}
.cur-drop-thumb{margin:0;width:88px;}
.cur-drop-thumb img{display:block;width:88px;height:88px;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.cur-drop-thumb-file{display:flex;align-items:center;justify-content:center;width:88px;height:88px;
	border-radius:10px;background:rgba(255,136,0,.12);color:var(--orange-text);font-size:.72rem;font-weight:700;}
.cur-drop-thumb figcaption{margin-top:5px;font-size:.68rem;color:var(--slate);line-height:1.35;}
.cur-drop-thumb-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.cur-drop-thumb-meta{display:block;}

.cur-drop-actions{margin-top:14px;}
.cur-drop-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
	min-height:48px; /* thumb-sized target — this is used one-handed at events */
	padding:0 22px;border-radius:999px;background:var(--orange);color:var(--ink);
	font-weight:700;font-size:.95rem;cursor:pointer;transition:background .18s ease;}
.cur-drop-btn:hover{background:var(--orange-dk);}
.cur-drop-btn:focus-within{outline:3px solid var(--ink);outline-offset:2px;}
/* The input covers the whole label so any tap opens the camera roll. */
.cur-drop-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}

.cur-drop-queue{list-style:none;margin:12px 0 0;padding:0;}
.cur-drop-queue:empty{display:none;}
.cur-drop-item{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-top:1px solid var(--line);}
.cur-drop-item-name{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cur-drop-item-status{font-size:.78rem;color:var(--slate);}
.cur-drop-item.is-done .cur-drop-item-status{color:var(--orange-text);font-weight:700;}
.cur-drop-item.is-failed .cur-drop-item-status{color:#C42360;font-weight:600;}
.cur-drop-bar{display:block;height:4px;margin-top:5px;border-radius:999px;background:rgba(20,20,20,.08);overflow:hidden;}
.cur-drop-item.is-waiting .cur-drop-bar,.cur-drop-item.is-failed .cur-drop-bar{display:none;}
.cur-drop-bar-fill{display:block;width:0;height:100%;border-radius:999px;background:var(--orange);transition:width .25s ease;}
@media (prefers-reduced-motion:reduce){.cur-drop-bar-fill{transition:none;}}

@media (min-width:760px){
	.cur-drop{padding:56px 0 96px;}
	.cur-drop-slot-head{grid-template-columns:auto 1fr auto;}
	.cur-drop-state{grid-column:3;grid-row:1;justify-self:end;align-self:center;}
	.cur-drop-list{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1100px){
	.cur-drop-list{grid-template-columns:repeat(3,1fr);}
}

/* ============ SOLUTIONS HUB (page 133) — #49 ============
 * Two six-item grids live on this page: the industry cards (.cur-tiles) and the
 * shared-capability blocks (.cur-pillars). Both base rules assume four across,
 * which leaves a 4+2 orphan row. Three across gives 3+3.
 *
 * The column count lives HERE, not in a style="" attribute on the element. An
 * inline grid-template-columns outranks every media query below it, which is how
 * the vertical pages ended up pinned to desktop columns at 390px with headings
 * fragmenting inside words (#47). Do not move it back into the markup.
 *
 * .cur-sol-cards is (0,1,0) — the same specificity as the generic .cur-tiles and
 * .cur-pillars rules it has to beat — so it wins on source order alone and must
 * stay after them. That is why this block is at the end of the file. */
.cur-sol-cards{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.cur-sol-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.cur-sol-cards{grid-template-columns:1fr;}}

/* The industry cards carry a paragraph of real copy rather than a caption, so
 * they need more room than a four-across image tile and a looser line height. */
.cur-sol-cards .cur-tile{padding:16px;}
.cur-sol-cards .cur-tile p{line-height:1.55;}

/* "Explore →" affordance at the foot of each industry card. #FF8800 on white is
 * 2.6:1, below AA, so orange used AS TEXT takes --orange-text (#A85200). Button
 * fills and icons keep the brighter --orange. Same rule as .cur-eyebrow above. */
.cur-go{color:var(--orange-text);font-weight:700;font-size:.9rem;margin-top:.7rem;}

/* The support number is the emergency path during a live event, so it must never
 * arrive as "+1 (800) 708-" / "0247" on two lines — at 390px it broke at the
 * hyphen inside 708-0247, which is a valid break opportunity for a compound word
 * and a wrong one for a phone number. */
.cur-tel{white-space:nowrap;color:var(--orange-text);font-weight:700;}

/* Proof band — three verified figures (1,000,000+ events / 96 countries /
 * operating since December 2015). Deliberately scoped .cur-sol-* rather than
 * reusing the .cur-proof name: #47 is landing its own .cur-proof band on the
 * vertical pages on a parallel branch, and two branches editing one rule is a
 * merge conflict waiting to happen. Consolidate once both are on main.
 *
 * .cur-num is sized for a single full-bleed figure (up to 6rem); "1,000,000+" is
 * ten characters and cannot sit in a third of the row at that size, hence the
 * smaller clamp. (0,2,0) beats the generic .cur-tiles media queries above. */
.cur-sol-proof .cur-tiles{grid-template-columns:repeat(3,1fr);}
.cur-sol-proof .cur-tile{text-align:center;padding:26px 18px;}
.cur-sol-proof .cur-num{font-size:clamp(1.7rem,4vw,2.8rem);}
.cur-sol-proof .cur-tile p{font-size:.95rem;margin-top:.4rem;color:var(--slate);}
@media (max-width:600px){.cur-sol-proof .cur-tiles{grid-template-columns:1fr;}}
/* ===================== END — SOLUTIONS HUB (#49) ======================== */

/* Footer contact column. The note lines are deliberately quieter than the links
 * above them: the phone number should be findable at 2am with a printer jammed,
 * without reading as the primary route in. Chat is the first line. */
/* "Talk to us" sits inside the brand column now, not as a sixth grid child.
 * It needs its own top margin because it is no longer a grid cell picking up
 * the 36px gap, and the links need the .cur-foot-col treatment they used to
 * inherit from being one. */
.cur-foot-contact{margin-top:28px;}
.cur-foot-contact h5{margin:0 0 12px;}
.cur-foot-contact a{display:block;padding:3px 0;}
.cur-foot-contact .cur-foot-note{display:block;font-size:.78rem;color:var(--slate);
	margin:2px 0 10px;line-height:1.45;}
.cur-foot-contact a[href^="tel:"]{font-variant-numeric:tabular-nums;}

/* Slot ID and required dimensions, surfaced on the card. James asked for both
 * to be visible so a file can be exported to the exact size and the slot quoted
 * back without ambiguity. The ID is the same string the endpoint prefixes onto
 * the stored filename, so there is one identifier rather than two. */
.cur-drop-slotid{display:inline-block;margin-top:4px;font-size:.72rem;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	color:var(--orange-text);background:var(--tint);border:1px solid var(--line);
	border-radius:5px;padding:1px 6px;user-select:all;}
.cur-drop-dims{font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------------
 * Placeholder slot annotation (#48) — staging only.
 *
 * Every grey box says what to shoot for it and which slot to upload it to, so
 * the page itself is the brief. Rendered by the_content filter in
 * asset-drop.php, which is registered behind curator_asset_drop_env_ok(), so
 * none of this has anything to style on production.
 *
 * The label used to be a ::after carrying attr(data-label). It still is on any
 * placeholder the filter did not tag — a pseudo-element cannot hold three
 * separate elements, one of which has to be independently selectable, so a
 * tagged box renders real children and turns the pseudo-element off instead of
 * fighting it.
 *
 * No padding is added to .cur-ph itself and no box geometry changes: these
 * boxes sit in a grid whose row height and aspect ratios are load-bearing, and
 * swapping a placeholder for a real photograph must not move the heading under
 * it. The padding lives on the inner .cur-ph-tag.
 *
 * Sizing is set by the smallest box on the site, not the most comfortable. A
 * hero collage band is 132px tall and ~243px wide on desktop, ~163px on a
 * 390px phone (.cur-collage grid-auto-rows:132px, two columns). Three lines at
 * these sizes measure ~47px tall, so they clear 132px with room to spare, and
 * overflow-wrap:anywhere lets the longest IDs — home-gallery-ai-photo-effects,
 * feat-field-sharing-station — wrap rather than push out of the box. */
.cur-ph.cur-ph-tagged::after{content:none;}
.cur-ph-tag{display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:3px;padding:6px;min-width:0;max-width:100%;text-align:center;line-height:1.25;}
.cur-ph-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:rgba(20,20,20,.5);overflow-wrap:anywhere;}

/* user-select:all so one tap on a phone selects the whole ID — this exists to
 * be copied into a filename or quoted back, and part of an ID is worse than
 * none. Kept monospace for the same reason the upload card is: these strings
 * are read character by character. */
.cur-ph-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;
	color:var(--orange-text);background:rgba(255,255,255,.75);
	border:1px solid rgba(255,136,0,.32);border-radius:5px;padding:1px 5px;
	max-width:100%;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;}
.cur-ph-size{font-size:.6rem;font-weight:600;color:rgba(20,20,20,.58);
	font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}

/* "no slot yet" — a placeholder the manifest has no row for. Deliberately not
 * given a size: an invented export dimension would look exactly like a briefed
 * one on the page, and someone would shoot to it. */
.cur-ph-none{font-size:.6rem;font-style:italic;color:rgba(20,20,20,.42);}

/* The news cards invert the placeholder onto a dark panel, so the annotation
 * has to invert with them or it is unreadable there. */
.cur-news .cur-ph-label{color:rgba(255,255,255,.72);}
.cur-news .cur-ph-size{color:rgba(255,255,255,.66);}
.cur-news .cur-ph-none{color:rgba(255,255,255,.55);}
.cur-news .cur-ph-id{color:#fff;background:rgba(255,255,255,.16);
	border-color:rgba(255,255,255,.34);}

/* ---- Customer and activation logo bands (#19 1b) ----------------------
 * Two bands, worded differently on purpose. "Why operators choose Curator"
 * carries the ten operators and venues that actually run on Curator. The
 * second, "Brands Curator has run activations for", carries six corporate
 * marks — a factual claim about work done rather than an endorsement claim,
 * which is the line James chose to draw for Google, Nike, Netflix, Coca-Cola,
 * Lucasfilm and Tomb Raider.
 *
 * Logos render greyscale and lift to colour on hover, so eight palettes do
 * not fight the page. The images are 400x160 transparent PNGs; the tile
 * decides the size, the file does not. */
.cur-logos-5{grid-template-columns:repeat(5,1fr);}
.cur-logos-6{grid-template-columns:repeat(6,1fr);max-width:900px;margin-inline:auto;}
.cur-logo .cur-shot{display:block;width:auto;max-width:78%;height:36px;object-fit:contain;
	filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s;}
.cur-logo:hover .cur-shot{filter:none;opacity:1;}
.cur-logos-head2{margin-top:44px;}
.cur-logos-head2 .cur-lead{margin-top:.4rem;}
@media (max-width:900px){.cur-logos-5,.cur-logos-6{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.cur-logos-5,.cur-logos-6{grid-template-columns:repeat(2,1fr);}}
@media (prefers-reduced-motion:reduce){.cur-logo .cur-shot{transition:none;}}

/* Mascot in the newsletter block — rounded to match every other image on
 * the site, which all sit at 18px. It was the one square-cornered picture. */
.cur-news .cur-shot{border-radius:18px;}

/* The payoff headline, once the placeholder 40% came out. It takes the stat
 * number's job — the one big centred element — at a size a sentence can carry
 * rather than a numeral's 6rem. Line-height and balance so it wraps well. */
.cur-stat-h{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;line-height:1.1;
	letter-spacing:-.02em;margin-top:.7rem;text-wrap:balance;}

/* Crop bias for library photos whose subject sits off-centre — the scream
 * (mouth low in frame) and the haunt group shot (a logo along the bottom
 * edge that object-fit:cover would otherwise slice through). */
.cur-shot.cur-pos-top{object-position:50% 0;}
.cur-shot.cur-pos-low{object-position:50% 70%;}
/* The verticals' three-card rows reuse .cur-tiles, which is a four-column
 * grid; three cards in four columns left a permanent hole on the right. */
.cur-sol-cards{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.cur-sol-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.cur-sol-cards{grid-template-columns:1fr;}}

/* Three pills squeezed at 375px until words broke mid-letter ("Monthl/y").
 * The row wraps instead and labels never break. .cur-toggle is used only on
 * the pricing page, so this reaches nothing else. */
@media (max-width:560px){
	.cur-toggle{display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;}
	.cur-toggle button{padding:.55rem 1.05rem;font-size:.88rem;white-space:nowrap;}
}

/* "+ N more - see full comparison below" is the link itself, not a button
 * beside it (#109 follow-up). The marker is suppressed because the row is a
 * footnote to the list rather than another included feature. */
.cur-plan ul li.cur-more{list-style:none;padding-left:0;margin-top:.35rem;}
.cur-plan ul li.cur-more::before{content:none;}
.cur-plan ul li.cur-more a{color:var(--orange-text);font-weight:600;text-decoration:underline;
	text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;}
.cur-plan ul li.cur-more a:hover{color:var(--orange);text-decoration-thickness:2px;}
.cur-plan ul li.cur-more a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

/* ---------------------------------------------------------------------------
 * Pillar icons. The chip used to be an empty gradient square, which read as an
 * icon that had failed to load rather than as decoration. James picked the
 * gradient-icon-no-square treatment.
 *
 * Masked SVG, so the gradient paints through the icon and the whole set lives
 * here rather than being inlined 105 times across 14 pages; swapping one is a
 * one-line change. Drawn at 44px with a 2.1 stroke because a thin stroke
 * collapses the gradient to a single orange.
 *
 * The mask is applied only when a cur-ic-* modifier is present, so any chip
 * that is ever added without one keeps the old square instead of vanishing.
 * ------------------------------------------------------------------------- */
.cur-pillar .cur-ic[class*="cur-ic-"]{width:44px;height:44px;border-radius:0;margin-bottom:14px;
	background:var(--grad);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:44px 44px;mask-size:44px 44px;}
.cur-pillar .cur-ic-ai{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z'/><path d='M18 16l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z'/><path d='M18 16l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z'/></svg>");}
.cur-pillar .cur-ic-analytics{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><rect x='5' y='11' width='3.6' height='7'/><rect x='10.2' y='6' width='3.6' height='12'/><rect x='15.4' y='14' width='3.6' height='4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><rect x='5' y='11' width='3.6' height='7'/><rect x='10.2' y='6' width='3.6' height='12'/><rect x='15.4' y='14' width='3.6' height='4'/></svg>");}
.cur-pillar .cur-ic-brand{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M15 4l5 5L9 20H4v-5z'/><path d='M13 6l5 5'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M15 4l5 5L9 20H4v-5z'/><path d='M13 6l5 5'/></svg>");}
.cur-pillar .cur-ic-capture{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h3.5L8 5h8l1.5 2H21v12H3z'/><circle cx='12' cy='13' r='3.5'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h3.5L8 5h8l1.5 2H21v12H3z'/><circle cx='12' cy='13' r='3.5'/></svg>");}
.cur-pillar .cur-ic-device{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2.5' width='14' height='19' rx='2.5'/><path d='M10.5 18.5h3'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2.5' width='14' height='19' rx='2.5'/><path d='M10.5 18.5h3'/></svg>");}
.cur-pillar .cur-ic-display{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4' width='19' height='12.5' rx='2'/><path d='M9 20.5h6M12 16.5v4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4' width='19' height='12.5' rx='2'/><path d='M9 20.5h6M12 16.5v4'/></svg>");}
.cur-pillar .cur-ic-globe{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3c2.5 2.7 3.8 5.7 3.8 9S14.5 18.3 12 21C9.5 18.3 8.2 15.3 8.2 12S9.5 5.7 12 3z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3c2.5 2.7 3.8 5.7 3.8 9S14.5 18.3 12 21C9.5 18.3 8.2 15.3 8.2 12S9.5 5.7 12 3z'/></svg>");}
.cur-pillar .cur-ic-lock{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2.5'/><path d='M8 10V7a4 4 0 018 0v3'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2.5'/><path d='M8 10V7a4 4 0 018 0v3'/></svg>");}
.cur-pillar .cur-ic-offline{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l20 20'/><path d='M5 12.5a11 11 0 014.5-2.6'/><path d='M1.5 8.8A16 16 0 017 5.6'/><path d='M16.8 10.3A11 11 0 0119 12.5'/><path d='M14 5.2a16 16 0 018.5 3.6'/><circle cx='12' cy='18.5' r='1'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l20 20'/><path d='M5 12.5a11 11 0 014.5-2.6'/><path d='M1.5 8.8A16 16 0 017 5.6'/><path d='M16.8 10.3A11 11 0 0119 12.5'/><path d='M14 5.2a16 16 0 018.5 3.6'/><circle cx='12' cy='18.5' r='1'/></svg>");}
.cur-pillar .cur-ic-pay{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2.5'/><path d='M2 10h20'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2.5'/><path d='M2 10h20'/></svg>");}
.cur-pillar .cur-ic-print{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9V3h12v6'/><rect x='3' y='9' width='18' height='8' rx='2'/><path d='M6 15h12v6H6z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9V3h12v6'/><rect x='3' y='9' width='18' height='8' rx='2'/><path d='M6 15h12v6H6z'/></svg>");}
.cur-pillar .cur-ic-privacy{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21.5s7.5-3.8 7.5-9.5V5.3L12 2.5 4.5 5.3V12c0 5.7 7.5 9.5 7.5 9.5z'/><polyline points='9 12 11.2 14.2 15.2 10.2'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21.5s7.5-3.8 7.5-9.5V5.3L12 2.5 4.5 5.3V12c0 5.7 7.5 9.5 7.5 9.5z'/><polyline points='9 12 11.2 14.2 15.2 10.2'/></svg>");}
.cur-pillar .cur-ic-qr{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><path d='M14 14h3v3h-3zM19 19h2v2h-2'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><path d='M14 14h3v3h-3zM19 19h2v2h-2'/></svg>");}
.cur-pillar .cur-ic-roi{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>");}
.cur-pillar .cur-ic-share{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4z'/></svg>");}
.cur-pillar .cur-ic-step{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='8.2 12.2 10.8 14.8 15.8 9.4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='8.2 12.2 10.8 14.8 15.8 9.4'/></svg>");}
.cur-pillar .cur-ic-support{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 01-9 8.4 9.6 9.6 0 01-2.9-.5L3 21l1.7-5.1A8.3 8.3 0 013 11.5 8.4 8.4 0 0112 3a8.4 8.4 0 019 8.5z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 01-9 8.4 9.6 9.6 0 01-2.9-.5L3 21l1.7-5.1A8.3 8.3 0 013 11.5 8.4 8.4 0 0112 3a8.4 8.4 0 019 8.5z'/></svg>");}