/* Yalla2x v5: the parts live adds to the shared pages (owner, 2026-10-31: content from live, look from the local site).
   Tokens only (css/site.css): the text blocks, Home's "Proof, in practice", the "Talk to us" and newsletter panels, and
   the WhatsApp button, which keeps WhatsApp's own green (owner, 2026-10-29: "no whatsapp is green color, dont change"). */

/* ---- text blocks: on the page's left edge and the type scale ---- */
.deep-sec > * { max-width: 46rem; }
.deep-sec h2 { margin: 0 0 18px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); }
.deep-sec h3 { margin: 32px 0 10px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h5); line-height: 1.2; color: var(--ink); }
.deep-sec p { margin: 0 0 14px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.deep-sec a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.deep-sec a:hover { color: var(--gold-ink); }

/* ---- the quote cards of the case studies (Home's "Proof, in practice" has its own: css/pages/home-proof.css) ---- */
.cs-quote { display: flex; flex-direction: column; margin: 0; padding: clamp(24px, 2.4vw, 36px); background: var(--panel); border-radius: var(--r-lg); }
.cs-quote blockquote { margin: 0 0 18px; font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
.cs-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); }
.cs-q-logo { display: flex; flex: none; align-items: center; justify-content: center; width: 96px; height: 42px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
.cs-q-logo img { display: block; max-width: 100%; max-height: 100%; }
.cs-q-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-q-name { font-weight: 600; font-size: var(--t-small); color: var(--ink); }
.cs-q-li { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.cs-q-li:hover { color: var(--gold-ink); }
.li-ic { flex: none; width: 14px; height: 14px; fill: currentColor; }   /* the LinkedIn mark: no blue on the site */
.cs-q-role { font-weight: 600; font-size: var(--t-small); color: var(--gold-ink); text-decoration: none; }
.cs-q-role:hover { text-decoration: underline; }

/* ---- every form on the site, like the owner's image of 2026-11-02: the words on a warm panel, the form on a white card, in the site's round language: pill fields and
   buttons, a softer corner only on what is too tall to be a pill. .lk-cta and .lk-news are the page panels; Book a demo and the calculator's email use .lk-cta too. Contact and the
   Box page's form are .enq (css/pages/contact.css), in the same look. */
.lk-cta-wrap, .lk-news-wrap { padding-block: clamp(32px, 5vw, 72px); }
.lk-cta, .lk-news { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; border-radius: var(--r-xl); background: var(--warm); color: var(--ink); }
.lk-cta__copy, .lk-news__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(28px, 4.4vw, 64px) clamp(22px, 4vw, 60px); }
.lk-cta__k, .lk-news__k { margin: 0 0 16px; font: 700 var(--t-kicker)/1.3 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.lk-cta h2, .lk-news h2 { margin: 0 0 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.04em; color: var(--ink); }
.lk-cta__copy > p:not(.lk-cta__k):not(.lk-cta__alt), .lk-news__copy > p:not(.lk-news__k) { margin: 0; max-width: 46ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.lk-cta__alt { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 0; }
.lk-cta__alt a { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--gold-mark); font-size: var(--t-body); font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.lk-cta__alt a:hover { border-bottom-color: var(--gold-ink); }
.lk-cta__alt svg { width: 13px; height: 13px; }
.lk-cta__art { width: clamp(180px, 20vw, 300px); height: auto; margin-top: auto; padding-top: clamp(24px, 3vw, 40px); fill: none; stroke: var(--gold-deep); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lk-cta__art circle { fill: var(--gold-deep); stroke: none; }

/* the white card, on any panel: an .lk-form or the calculator's form */
.lk-cta > form, .lk-news > form { align-self: stretch; min-width: 0; padding: clamp(24px, 3.6vw, 52px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 18px 44px -32px rgba(70, 48, 10, 0.4); }
.lk-form { display: grid; align-content: center; gap: 20px; }
.lk-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.lk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lk-field label { font-size: var(--t-body); font-weight: 500; line-height: 1.3; color: var(--ink); }
.lk-form input:not([type="hidden"]), .lk-form select, .lk-form textarea { width: 100%; min-height: 52px; padding: 12px 22px; border: 1px solid var(--line-3); border-radius: 999px; background-color: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.4 var(--font); appearance: none; transition: border-color 0.2s var(--ease); }
.lk-form ::placeholder { color: var(--ink-num); opacity: 1; }
.lk-form select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%230E0E0E' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 22px center; background-size: 10px; }
.lk-form select:has(option[value=""]:checked), .lk-form input[type="date"]:not(.is-set) { color: var(--ink-num); }
.lk-form textarea { min-height: 132px; border-radius: 26px; padding-block: 16px; resize: vertical; }
.lk-form input:hover, .lk-form select:hover, .lk-form textarea:hover { border-color: var(--ink-2); }
.lk-form input:focus, .lk-form select:focus, .lk-form textarea:focus { outline: 2px solid var(--gold-ink); outline-offset: 2px; border-color: var(--ink); }
/* the fold for what not everyone needs */
.lk-more summary { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); cursor: pointer; list-style: none; }
.lk-more summary::-webkit-details-marker { display: none; }
.lk-more summary:hover { color: var(--ink); }
.lk-more summary svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease); }
.lk-more[open] summary svg { transform: rotate(180deg); }
.lk-more .lk-form__row { margin-top: 16px; }
/* the send button: gold and round, its words left and its arrow right */
.lk-form button[type="submit"], .form-send { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font: 600 var(--t-body)/1.2 var(--font); text-align: left; cursor: pointer; transition: background-color 0.25s var(--ease); }
.lk-form button[type="submit"] svg, .form-send svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lk-form button[type="submit"]:hover, .form-send:hover { background: var(--gold-deep); color: var(--ink); }
.lk-form button:disabled, .form-send:disabled { opacity: 0.6; cursor: default; }
.lk-note { margin: -6px 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.lk-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lk-form .lk-ok, .lk-form .lk-err { margin: 0; font-size: var(--t-body); font-weight: 600; }
.lk-form .lk-ok { color: var(--gold-ink); }
.lk-form .lk-err { color: var(--err); }
/* "Your email app should now be open": news, not an error, in the same box as Contact's and the Box form's */
.lk-form .lk-err.is-mail, .field-form [data-tco-result].is-mail { padding: 14px 20px; border: 1px solid var(--line-3); border-radius: var(--r-md); background: var(--panel); color: var(--ink); font-size: var(--t-small); font-weight: 400; line-height: 1.5; }
@media (max-width: 1023px) {
  .lk-cta, .lk-news { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .lk-cta__art { display: none; }
  .lk-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the FAQ at the end of the new Insights ---- */
.art__faq { margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
.art__faq h2 { margin: 0 0 8px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h4); letter-spacing: -0.02em; }
.art__q { margin-top: 24px; }
.art__q h3 { margin: 0 0 8px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h6); line-height: 1.3; }
.art__q p { margin: 0; font-size: var(--t-lead); line-height: 1.75; color: var(--ink-2); }

/* ---- WhatsApp button: as on live, WhatsApp's green ---- */
.lk-wa { position: fixed; right: 18px; bottom: 18px; z-index: 9000; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); text-decoration: none; transition: transform 0.15s ease; }
.lk-wa:hover { transform: scale(1.06); }
.lk-wa svg { width: 30px; height: 30px; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .lk-wa { transition: none; } }

/* ---- the Search button and box, as on live ---- */
.hs-pill{display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:999px;background:#fff}
.hs-pill__search{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:transparent;color:var(--ink);font:600 var(--t-body)/1 var(--font);cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease)}
.hs-pill__search svg,.hdr__search svg{width:16px;height:16px;flex:none}
.hs-pill__contact{border:0}
.hs-pill__contact:hover{background:var(--ink)}
.hs-pill__search:hover,.hs-pill__search[aria-expanded="true"]{background:var(--ink);color:#fff}
.hs-pill:has(.hs-pill__search:hover) .hs-pill__contact,.hs-pill:has(.hs-pill__search[aria-expanded="true"]) .hs-pill__contact{background:#fff;color:var(--ink)}
.hs-pill:has(.hs-pill__contact:hover) .hs-pill__search{background:transparent;color:var(--ink)}
.hs-pill:has(.hs-pill__contact:hover) .hs-pill__contact{background:var(--ink);color:#fff}
.hs-pill :focus-visible,.hdr__search:focus-visible,.hs-panel :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hdr__search{display:none;place-items:center;width:44px;height:44px;flex:none;margin-left:auto;border:1px solid var(--line-3);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.hdr__search:hover,.hdr__search[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:1365px){.hdr__search{display:grid}.hdr__burger{margin-left:0}.hdr{gap:12px}}
.hs-panel{position:fixed;left:0;right:0;top:var(--hdr);z-index:51;max-height:calc(100dvh - var(--hdr));overflow-y:auto;background:#fff;border-bottom:1px solid var(--line);padding-block:16px 20px}
.hs-panel[hidden]{display:none}
.hs-panel__form{display:flex;gap:8px}
.hs-panel__input{flex:1;min-width:0;min-height:48px;padding:0 20px;border:1px solid var(--line-3);border-radius:999px;background:#fff;color:var(--ink);font:400 var(--t-body)/1.2 var(--font)}
.hs-panel__input::-webkit-search-cancel-button{display:none}
.hs-panel__status{margin-top:12px;color:var(--ink-2);font-size:var(--t-small)}
.hs-panel__status:empty{display:none}
.hs-panel__list{margin-top:8px;list-style:none;padding:0}
.hs-panel__hit{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.hs-panel__hit strong{display:block;font-weight:600;font-size:var(--t-body)}
.hs-panel__hit span{display:block;margin-top:2px;color:var(--ink-2);font-size:var(--t-small)}
.hs-panel__hit:hover strong{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}