/*
 * KudoTaps marketing pages: the shared design system for /industries/, /maintenance/,
 * /campaigns/, the use-case pages and /pricing/.
 *
 * Everything is scoped under .ind because css/foundation.css restyles buttons, headings, lists
 * and selects globally across the site; without the scope those rules reach in and produce
 * uppercase buttons and full-width form controls.
 *
 * The local tokens (--ink, --br, --ac ...) now read from the site-wide kp- tokens in
 * css/kudo-public.css, so these pages share one green, one ink and one hairline with the rest of
 * the site. The class names are unchanged; pages that still use .btn get the kp-btn look.
 * Pictures are drawn rather than photographed: the product is software, so the real screens beat
 * stock imagery, they are always accurate and they weigh nothing.
 */

        /* --br owns every ACTION: buttons, links, ticks. --ac is the illustration colour: eyebrows,
           chart bars, step numbers. Both default to the kp- green; a page may still override --ac. */
        .ind { --ink:var(--kp-ink,#0f172a); --ink2:var(--kp-ink-2,#475467); --line:var(--kp-line,#e4e7ec);
               --br:var(--kp-g,#2f9e63); --brs:var(--kp-g-soft,#eafaf1); --ac:var(--kp-g,#2f9e63); --acs:var(--kp-g-soft,#eafaf1);
               --mk-shadow:var(--kp-shadow,0 1px 2px rgba(16,24,40,.04), 0 10px 30px -16px rgba(16,24,40,.18));
               --mk-shadow-hover:var(--kp-shadow-hover,0 2px 4px rgba(16,24,40,.05), 0 18px 40px -18px rgba(16,24,40,.24));
               --mk-ease:var(--kp-ease,cubic-bezier(.2,.8,.2,1));
               font-family:var(--kp-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color:var(--ink); -webkit-font-smoothing:antialiased; }
        .ind * { box-sizing:border-box; }
        .ind-in { max-width:1180px; margin:0 auto; padding:0 24px; }
        .ind h1,.ind h2,.ind h3,.ind h4 { font-family:inherit; color:var(--ink); margin:0; letter-spacing:-.02em; text-wrap:balance; }
        .ind p { margin:0; color:var(--ink2); line-height:1.6; }
        .ind a { text-decoration:none; }

        .eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ac); }

        /* ---------- hero ----------
           A pale green wash, a pill kicker, a very large dark heading. The wash is finished before
           the section edge so the bottom of the gradient never reads as a hard line. */
        .hero { position:relative; overflow:hidden; padding:80px 0 84px;
                background:radial-gradient(60% 70% at 82% 6%, rgba(47,158,99,.13), rgba(47,158,99,0) 70%),
                           linear-gradient(180deg, #f4faf7 0%, #fff 62%); }
        .hero .ind-in { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
        .hero h1 { color:var(--ink); font-size:clamp(40px, 5vw, 58px); line-height:1.06; font-weight:900; letter-spacing:-.025em; margin:20px 0 20px; }
        .hero p { color:var(--ink2); font-size:18px; line-height:1.65; max-width:52ch; }
        .hero .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px;
                         border:1px solid var(--kp-g-line,#bfe6d0); background:rgba(255,255,255,.85); color:var(--kp-g-dark,#15803d); line-height:1; }
        .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
        /* Proof row under the hero buttons: short facts, never invented numbers. */
        .proof { display:flex; flex-wrap:wrap; gap:16px 36px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
        .proof .n { font-size:20px; font-weight:800; color:var(--br); line-height:1.1; letter-spacing:-.02em; }
        .proof .l { font-size:11.5px; font-weight:700; color:var(--ink2); text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
        .hero-mid .proof { justify-content:center; }
        /* .hero p carries a max-width; in a centred hero it also needs auto side margins or the
           paragraph sits against the left edge of the column. */
        .hero-mid p { margin-left:auto; margin-right:auto; }
        .tile .i svg, .tile-i svg { width:26px; height:26px; }

        /* Legacy .btn, kept for pages not yet moved to .kp-btn: same shape and behaviour. */
        .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:600; font-size:16px; line-height:20px;
               padding:13px 24px 15px; border-radius:10px; text-transform:none; letter-spacing:0; margin:0; border:1px solid transparent;
               transition:background .15s var(--mk-ease), border-color .15s, color .15s; }
        .btn-p { background:var(--br); color:#fff; }
        .btn-p:hover, .btn-p:focus { background:var(--kp-g-dark,#15803d); color:#fff; }
        .btn-g { background:#fff; color:var(--ink); border-color:#d0d5dd; }
        .btn-g:hover, .btn-g:focus { border-color:var(--kp-muted,#98a2b3); color:var(--ink); }
        /* On the dark sections the ghost button has to flip back. */
        .sec-d .btn-g, .end .btn-g { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
        .sec-d .btn-g:hover, .end .btn-g:hover { border-color:#fff; color:#fff; }

        /* ---------- the scene: sticker, phone, request ---------- */
        .scene { position:relative; min-height:400px; }
        .card3d { position:absolute; background:#fff; border-radius:16px; border:1px solid var(--line);
                  box-shadow:0 18px 44px rgba(11,18,32,.13); }

        /* Not rotated: rotated glyphs get resampled and the baseline goes wavy at this size. */
        .sticker { left:0; top:26px; width:268px; padding:15px 17px; display:flex; gap:13px; align-items:center;
                   border-radius:8px; border:1px dashed #c4c9d0; }
        .qr { width:74px; height:74px; flex:none; display:block; background:#fff; }
        .sticker .n { font-size:27px; font-weight:900; line-height:1; color:var(--ink); }
        .sticker .m { font-size:11.5px; color:var(--ink2); margin-top:4px; }
        .sticker .r { font-size:8.5px; font-weight:700; margin-top:6px; letter-spacing:.4px; color:var(--ink); }

        .phone { right:6px; top:0; width:212px; padding:14px; border-radius:24px; border:7px solid var(--ink); box-shadow:0 22px 52px rgba(11,18,32,.28); }
        .ph-h { font-size:10px; font-weight:700; color:var(--kp-muted,#98a2b3); text-transform:uppercase; letter-spacing:.7px; }
        .ph-t { font-size:15px; font-weight:700; margin:5px 0 12px; line-height:1.2; }
        .ph-opt { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; border:1px solid var(--line); border-radius:9px; padding:9px 10px; margin-bottom:7px; color:#344054; }
        .ph-opt svg { width:14px; height:14px; flex:none; }
        .ph-opt.on { border-color:var(--br); background:var(--brs); color:var(--kp-g-dark,#15803d); }
        .ph-go { background:var(--br); color:#fff; font-size:12px; font-weight:700; text-align:center; border-radius:8px; padding:10px; margin-top:4px; }

        .ticket { left:18px; bottom:0; width:300px; padding:16px 18px; }
        .tk-top { display:flex; align-items:center; gap:8px; }
        .tk-dot { width:8px; height:8px; border-radius:50%; background:#f04438; box-shadow:0 0 0 3px rgba(240,68,56,.16); }
        .tk-new { font-size:10px; font-weight:700; letter-spacing:.6px; color:#b42318; }
        .tk-time { margin-left:auto; font-size:10.5px; color:var(--kp-muted,#98a2b3); font-weight:700; }
        .tk-t { font-size:14.5px; font-weight:700; margin:9px 0 3px; color:var(--ink); }
        .tk-s { font-size:11.5px; color:var(--ink2); }
        .tk-tags { display:flex; gap:6px; margin-top:11px; flex-wrap:wrap; }
        .tk-tag { font-size:10px; font-weight:700; padding:4px 9px; border-radius:999px; background:#f2f4f7; color:#344054; }
        .tk-tag.ac { background:var(--acs); color:var(--kp-g-dark,#15803d); }

        /* ---------- tag stage: one large asset tag on a soft panel (QR asset tag pages) ---------- */
        .tagstage { position:relative; display:flex; align-items:center; justify-content:center; min-height:440px; padding:48px 24px;
                    border-radius:20px; border:1px solid var(--kp-g-line,#bfe6d0); overflow:hidden;
                    background:radial-gradient(70% 60% at 50% 40%, #fff 0%, rgba(255,255,255,0) 70%), var(--kp-g-soft,#eafaf1); }
        .bigtag { position:relative; width:290px; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:16px;
                  padding:22px 22px 20px; text-align:center; box-shadow:0 24px 50px -12px rgba(11,18,32,.22); }
        .bigtag::before, .bigtag::after { content:''; position:absolute; top:12px; width:8px; height:8px; border-radius:50%;
                  background:#e4e7ec; box-shadow:inset 0 1px 1px rgba(16,24,40,.18); }
        .bigtag::before { left:12px; } .bigtag::after { right:12px; }
        .bt-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0 10px; }
        .bt-k { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); text-align:left; }
        .bt-no { font-size:30px; font-weight:900; line-height:1; color:var(--ink); }
        .bt-qr { display:block; width:184px; height:184px; margin:16px auto 14px; }
        .bt-name { font-size:17px; font-weight:700; color:var(--ink); }
        .bt-loc { font-size:13px; color:var(--ink2); margin-top:3px; }
        .bt-chip { position:absolute; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:#fff;
                   border:1px solid var(--line); box-shadow:var(--mk-shadow); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; }
        .bt-chip-1 { top:26px; left:22px; }
        .bt-chip-2 { bottom:28px; right:22px; }
        @media (max-width:600px) {
            .tagstage { min-height:0; padding:72px 16px 76px; }
            .bigtag { width:260px; }
            .bt-qr { width:160px; height:160px; }
            .bt-chip { font-size:12px; padding:7px 12px; }
            .bt-chip-1 { top:18px; left:14px; }
            .bt-chip-2 { bottom:20px; right:14px; }
        }

        /* ---------- generic section ---------- */
        .sec { padding:88px 0; }
        .sec-t { background:var(--kp-bg-2,#f8fafc); }
        .sec-d { background:var(--kp-dark,#0b1220); color:#fff; }
        .sec-d h2, .sec-d h3 { color:#fff; }
        .sec-d p { color:rgba(255,255,255,.66); }
        .sec-d .eyebrow { color:var(--kp-g-bright,#44b276); }
        .sec h2 { font-size:clamp(28px, 3.2vw, 36px); font-weight:800; line-height:1.12; }
        .sec .lede { font-size:17px; line-height:1.65; max-width:60ch; margin-top:14px; }
        .head { margin-bottom:40px; }

        /* ---------- what gets a label ---------- */
        .things { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px; }
        .thing { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 18px; text-align:center;
                 box-shadow:var(--mk-shadow); transition:transform .2s var(--mk-ease), box-shadow .2s var(--mk-ease), border-color .2s; }
        .thing:hover { transform:translateY(-3px); box-shadow:var(--mk-shadow-hover); border-color:var(--kp-g-line,#bfe6d0); }
        .thing .i { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px;
                    background:var(--kp-g-soft,#eafaf1); color:var(--kp-g-dark,#15803d); font-size:22px; line-height:1; }
        .thing .i svg { width:22px; height:22px; }
        .thing .l { font-size:14px; font-weight:600; color:#344054; margin-top:12px; line-height:1.4; }

        /* ---------- problems ---------- */
        .pains { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
        .pain { background:#fff; border:1px solid var(--line); border-left:3px solid #f04438; border-radius:12px; padding:22px 24px; box-shadow:var(--mk-shadow); }
        .pain h3 { font-size:16.5px; font-weight:700; margin-bottom:7px; }
        .pain p { font-size:15px; }

        /* ---------- steps (dark band by default; a light variant when the band is not dark) ---------- */
        .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
        .step { position:relative; padding:26px 22px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
        .step .n { font-size:36px; font-weight:900; line-height:1; color:var(--kp-g-bright,#44b276); font-variant-numeric:tabular-nums; }
        .step h3 { font-size:16.5px; font-weight:700; margin:12px 0 6px; }
        .step p { font-size:14.5px; }
        .sec:not(.sec-d) .step { background:#fff; border-color:var(--line); box-shadow:var(--mk-shadow); }
        .sec:not(.sec-d) .step .n { color:var(--ac); }

        /* ---------- feature rows ---------- */
        .feats { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
        .feat { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--mk-shadow);
                transition:transform .2s var(--mk-ease), box-shadow .2s var(--mk-ease), border-color .2s; }
        .feat:hover { border-color:var(--kp-g-line,#bfe6d0); }
        /* The tick is drawn, not a text glyph: the markup still says ✓ for old pages, the
           character is hidden and a stroked SVG check takes its place (same look as .kp-check). */
        .ind .tick { width:24px; height:24px; border-radius:50%; background:var(--brs); color:var(--kp-g-dark,#15803d); font-size:0; line-height:0;
                display:flex; align-items:center; justify-content:center; margin-bottom:12px; flex:none; }
        .ind .tick::before { content:''; width:13px; height:13px; background:currentColor;
                -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
                        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }
        .feat h3 { font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
        .feat p { font-size:15px; line-height:1.6; }

        /* Link cards (use cases on hubs, feature and industry pages): lift on hover. */
        .uc-cards a.feat { display:block; }
        .uc-cards a.feat:hover { transform:translateY(-3px); box-shadow:var(--mk-shadow-hover); }

        /* ---------- example report ---------- */
        .split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
        .panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--mk-shadow);
                 transition:transform .2s var(--mk-ease), box-shadow .2s var(--mk-ease), border-color .2s; }
        a.panel:hover { transform:translateY(-3px); box-shadow:var(--mk-shadow-hover); border-color:var(--kp-g-line,#bfe6d0); }
        .panel-h { display:flex; align-items:baseline; gap:10px; margin-bottom:18px; }
        .panel-h h4 { font-size:14.5px; font-weight:700; }
        .panel-h .ex { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--kp-muted,#98a2b3); text-transform:uppercase; }
        .bar-row { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
        .bar-l { width:104px; font-size:12.5px; font-weight:700; color:#344054; flex:none; }
        .bar-t { flex:1; height:22px; background:#f2f4f7; border-radius:6px; overflow:hidden; }
        .bar-t i { display:block; height:100%; border-radius:6px; background:var(--ac); }
        .bar-t i.hot { background:#f04438; }
        .bar-v { width:42px; text-align:right; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
        .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
        .kpi .v { font-size:24px; font-weight:900; letter-spacing:-.03em; }
        .kpi .l { font-size:10.5px; font-weight:700; color:var(--kp-muted,#98a2b3); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }

        /* ---------- question card ---------- */
        .qcard { background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--mk-shadow); }
        .qcard .q { font-size:22px; font-weight:700; margin:10px 0 20px; line-height:1.25; }
        .faces { display:flex; gap:10px; }
        .face { width:52px; height:52px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:25px; color:var(--kp-muted,#98a2b3); }
        .face svg { width:28px; height:28px; }
        .face.pick { border-color:var(--br); background:var(--brs); color:var(--kp-g-dark,#15803d); }

        /* ---------- faq ---------- */
        .faqs { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:14px; align-items:start; }
        .faq { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 28px; }
        .faq h3 { font-size:17px; font-weight:700; margin-bottom:9px; letter-spacing:-.01em; }
        .faq p { font-size:15px; line-height:1.6; }

        /* ---------- end ---------- */
        .end { background:var(--kp-dark,#0b1220); color:#fff; padding:88px 0; text-align:center; position:relative; overflow:hidden; }
        .end::before { content:''; position:absolute; inset:-50% 30% auto -20%; height:460px;
                       background:radial-gradient(closest-side, rgba(47,158,99,.45), transparent); opacity:.45; }
        .end .ind-in { position:relative; z-index:1; }
        .end h2 { color:#fff; font-size:clamp(30px, 3.6vw, 40px); font-weight:800; }
        .end p { color:rgba(255,255,255,.68); font-size:17px; max-width:52ch; margin:14px auto 28px; }
        .end .cta { justify-content:center; }

        /* ---------- poster generation (campaign pages) ----------
           A drawn poster: headline, subtitle, the location's QR, a logo slot and the two brand
           colours the owner picks. Drawn, not photographed, so it always matches the product. */
        .pg-split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; }
        .pg-stage { position:relative; display:flex; justify-content:center; align-items:center; padding:64px 20px 72px; border-radius:20px;
                    border:1px solid var(--kp-g-line,#bfe6d0); background:radial-gradient(70% 60% at 50% 40%, #fff 0%, rgba(255,255,255,0) 70%), var(--kp-g-soft,#eafaf1); }
        .pg-poster { width:270px; max-width:100%; aspect-ratio:8.5/11; background:var(--kp-g-dark,#15803d); color:#fff; border-radius:10px;
                     padding:26px 22px 20px; display:flex; flex-direction:column; align-items:center; text-align:center;
                     box-shadow:0 26px 50px -14px rgba(11,18,32,.35); }
        .pg-logo { width:86px; height:24px; border-radius:6px; border:1.5px dashed rgba(255,255,255,.6); font-size:9.5px; font-weight:700;
                   letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); }
        .pg-h { font-size:26px; font-weight:900; line-height:1.05; letter-spacing:-.02em; margin-top:18px; color:#fff; }
        .pg-s { font-size:12.5px; line-height:1.45; margin-top:8px; color:rgba(255,255,255,.85); max-width:200px; }
        .pg-qr { margin-top:auto; background:#fff; border-radius:10px; padding:10px; }
        .pg-qr img { display:block; width:108px; height:108px; }
        .pg-loc { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:10px; color:rgba(255,255,255,.8); }
        .pg-sw { position:absolute; right:18px; bottom:18px; display:flex; gap:8px; align-items:center; background:#fff; border:1px solid var(--line);
                 border-radius:999px; padding:7px 12px 7px 8px; box-shadow:var(--mk-shadow); font-size:12px; font-weight:600; color:var(--ink); }
        .pg-sw i { width:18px; height:18px; border-radius:50%; display:block; border:1px solid rgba(16,24,40,.12); }
        .pg-tag { position:absolute; left:18px; top:18px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 12px;
                  box-shadow:var(--mk-shadow); font-size:12px; font-weight:600; color:var(--ink); }
        .pg-list { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; }
        .pg-list li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.55; color:var(--ink2); }
        .pg-list li b { color:var(--ink); font-weight:600; }
        .pg-list .tick { margin:1px 0 0; }
        .pg-own { margin-top:56px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; }
        .pg-swap { display:flex; align-items:center; justify-content:center; gap:16px; }
        .pg-up { width:150px; aspect-ratio:8.5/11; border-radius:10px; background:#fff; border:1px solid var(--line); box-shadow:var(--mk-shadow);
                 padding:14px; display:flex; flex-direction:column; gap:7px; }
        .pg-up .ln { height:8px; border-radius:4px; background:#e4e7ec; }
        .pg-up .ln.w { width:70%; height:12px; background:#cbd5e1; }
        .pg-up .ln.s { width:55%; }
        .pg-up .q { margin-top:auto; align-self:center; width:58px; height:58px; border-radius:6px; border:2px dashed var(--kp-muted,#98a2b3);
                    display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--kp-muted,#98a2b3); }
        .pg-up .q img { width:48px; height:48px; display:block; }
        .pg-up.done .q { border:0; }
        .pg-arrow { color:var(--br); flex:none; }
        .pg-arrow svg { width:28px; height:28px; display:block; }
        .pg-cap { font-size:12.5px; color:var(--ink2); text-align:center; margin-top:10px; }
        .pg-fee { margin-top:40px; display:flex; gap:14px; align-items:center; padding:18px 22px; border-radius:14px; background:#fff; border:1px solid var(--line); }
        .pg-fee .kp-icon { flex:none; }
        .pg-fee p { font-size:15px; }
        .pg-fee b { color:var(--ink); font-weight:600; }
        @media (max-width:900px) {
            .pg-split, .pg-own { grid-template-columns:1fr; gap:32px; }
            .pg-own .pg-swap-wrap { order:2; }
        }
        @media (max-width:420px) {
            .pg-up { width:120px; }
            .pg-swap { gap:10px; }
        }

        /* ---------- "printing your QR asset tags" callout (maintenance pages) ---------- */
        .tagcall { display:flex; align-items:center; gap:20px; margin-top:28px; padding:20px 24px; background:#fff;
                   border:1px solid var(--line); border-radius:16px; box-shadow:var(--mk-shadow);
                   transition:transform .2s var(--mk-ease), box-shadow .2s var(--mk-ease), border-color .2s; }
        .tagcall:hover { transform:translateY(-2px); box-shadow:var(--mk-shadow-hover); border-color:var(--kp-g-line,#bfe6d0); }
        .tagcall-i { flex:none; width:48px; height:48px; border-radius:12px; background:var(--kp-g-soft,#eafaf1); color:var(--kp-g-dark,#15803d);
                     display:flex; align-items:center; justify-content:center; }
        .tagcall-i svg { width:24px; height:24px; }
        .tagcall-b { flex:1; min-width:0; }
        .tagcall h3 { font-size:17px; font-weight:700; margin:0 0 4px; }
        .tagcall p { font-size:14.5px; }
        .tagcall-go { flex:none; font-size:14px; font-weight:600; color:var(--br); white-space:nowrap; }
        .tagcall:hover .tagcall-go { color:var(--kp-g-dark,#15803d); }
        @media (max-width:600px) {
            .tagcall { flex-wrap:wrap; gap:14px; padding:18px; }
            .tagcall-go { flex-basis:100%; }
        }
        @media (prefers-reduced-motion: reduce) { .tagcall:hover { transform:none; } }

        /* Breadcrumb above a hero heading (sub-pages such as /qr-asset-tags/). */
        .crumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink2); }
        .crumb a { color:var(--br); }
        .crumb a:hover { color:var(--kp-g-dark,#15803d); text-decoration:underline !important; }
        .crumb .sep { color:var(--kp-muted,#98a2b3); }

        .other { display:flex; gap:10px; flex-wrap:wrap; }
        .other a { font-size:14px; font-weight:600; color:var(--kp-g-dark,#15803d); border:1px solid var(--line); border-radius:999px; padding:9px 16px; background:#fff;
                   transition:border-color .15s, background .15s; }
        .other a:hover { border-color:var(--br); background:var(--brs); }

        @media (max-width:900px) {
            .hero .ind-in, .split { grid-template-columns:1fr; gap:34px; }
            .hero h1 { font-size:38px; }
            .scene { min-height:430px; }
        }
        @media (max-width:600px) {
            .ind-in { padding:0 16px; }
            .hero { padding:56px 0 60px; }
            .hero h1 { font-size:36px; line-height:1.08; }
            .hero p { font-size:17px; }
            .sec, .end { padding:56px 0; }
            .head { margin-bottom:28px; }
            .cta > a { flex:1 1 100%; }
            .proof { gap:16px 26px; }
            .proof > div { flex:1 1 40%; }
            .faq { padding:22px; }
        }
        @media (max-width:520px) {
            /* Phones: stack the three pieces (label, phone, request) instead of overlapping the label. */
            .scene { min-height:470px; }
            .sticker { top:0; left:0; width:250px; }
            .phone { top:100px; right:0; }
            .ticket { left:0; bottom:0; width:280px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .thing:hover, .uc-cards a.feat:hover, a.panel:hover { transform:none; }
        }