/* Sendie — homepage-new wiring styles (isolated; does not modify the design's own CSS).
   Uses the bundle's tokens/fonts so wired components read as part of the design. */

/* ── "See what your Sendie could do" — centred, with breathing room + a magical glow ── */
.wire-magic{padding-top:120px;padding-bottom:40px;text-align:center}
.wire-magic-card{position:relative;overflow:hidden;max-width:720px;margin:0 auto;color:#25212f;
  background:linear-gradient(180deg,#f5f1fd,#fbf9ff);border:1px solid #e7ddf7;border-radius:26px;
  padding:52px 44px;box-shadow:0 40px 90px -46px rgba(124,92,255,.5)}
.wire-magic-card::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:460px;height:460px;pointer-events:none;background:radial-gradient(circle,rgba(146,112,245,.28),transparent 68%)}
.wire-magic-badge{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;
  border-radius:16px;background:var(--purple);color:#fff;font-size:22px;box-shadow:0 14px 30px -10px rgba(117,70,220,.7)}
.wire-magic .eyebrow{position:relative;color:#7a609b}
.wire-magic h2{position:relative;margin:0 0 12px;color:#221b33}
.wire-sub{position:relative;font-size:16px;color:#6a6178;line-height:1.65;max-width:470px;margin:0 auto 26px}
.wire-magic-form{position:relative;max-width:560px;margin:0 auto}
.wire-analyze-out{margin-top:22px;text-align:left;max-width:560px;margin-left:auto;margin-right:auto}
.wire-analyze-out:empty{display:none}
.wire-note{font-size:14px;color:#6a6178;margin:0;text-align:center}
.wire-analyze-head{font-size:15px;color:#302439;margin:0 0 14px;font-weight:500;text-align:center}
.wire-analyze-head b{font-weight:600}
/* clean, structured knowledge card (#9): one row per fact, consistent alignment + spacing */
.wire-kcard{background:#fff;border:1px solid #e6ddf5;border-radius:16px;padding:4px 20px;text-align:left;box-shadow:0 14px 34px -20px rgba(40,26,70,.28)}
.wire-kfact{padding:14px 2px;border-bottom:1px solid #f2edf9}
.wire-kfact:last-child{border-bottom:0}
.wire-kfact-l{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#8a7ca0;margin:0 0 3px}
.wire-kfact-ic{font-size:14px;line-height:1}
.wire-kfact-v{font-size:15px;color:#25212f;line-height:1.45;font-weight:500}
.wire-analyze-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:18px}
.wire-analyze-cta .btn{font-size:13px;min-height:44px}
.wire-again{background:transparent;border:0;color:#66517f;font-size:13px;font-weight:500;text-decoration:underline;padding:6px}
/* search suggestions (Google Places autocomplete, reusing the current homepage endpoints) */
.wire-ac{position:relative}
.wire-ac-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border:1px solid #e2dced;
  border-radius:14px;box-shadow:0 24px 60px -24px rgba(40,26,70,.4);overflow:hidden;text-align:left}
.wire-ac-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:12px 15px;font:inherit;
  font-size:14px;color:#2b2440;cursor:pointer;border-bottom:1px solid #f0ecf7}
.wire-ac-item:last-child{border-bottom:0}
.wire-ac-item:hover,.wire-ac-item.on{background:#f4effc}
.wire-ac-item small{display:block;color:#8a7ca0;font-size:12px;margin-top:1px}

/* ── Live Sendie chatbot (sits in the left column of .try-panel, dark surface) ── */
.wire-chat{margin-top:26px}
/* (chat card styling now comes from legacy-widgets.css — the ported current chatbot) */

/* ── White footer (Task 5) ── */
footer.wire-footer{background:#fff;color:#25212f;border-top:1px solid #e9e5f0}
.wire-footer .footer-main{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:38px;padding:60px 0}
.wire-footer .footer-brand p{font-size:14px;color:#6b6478;line-height:1.6;margin-top:20px}
/* social buttons (ported from the current homepage) */
.wire-soc{display:flex;gap:10px;margin-top:20px}
.wire-soc a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#f3eefb;color:#6b6478;transition:background .18s,color .18s,transform .18s}
.wire-soc a:hover{background:var(--purple);color:#fff;transform:translateY(-2px)}
.wire-soc svg{width:17px;height:17px;fill:currentColor}
.wire-footer .footer-brand .brand{color:#25212f}
.wire-footer .footer-brand .logo-mark{background:var(--purple);color:#fff}
.wire-foot-col h3{font-size:13px;font-weight:600;margin:0 0 16px;color:#2a2536}
.wire-foot-col a{display:block;font-size:13px;color:#6b6478;margin:11px 0}
.wire-foot-col a:hover{color:var(--purple)}
.wire-foot-viewall{display:block;background:transparent;border:0;padding:0;margin:11px 0;font-size:13px;font-weight:600;color:var(--purple);text-align:left}
.wire-foot-viewall:hover{text-decoration:underline}
.wire-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid #e9e5f0;padding:22px 0 34px;font-size:12px;color:#847690}
.wire-footer .footer-bottom>div{display:flex;gap:20px;flex-wrap:wrap}
.wire-footer .footer-bottom a{color:#847690}
.wire-footer .footer-bottom a:hover{color:var(--purple)}
@media(max-width:1080px){.wire-footer .footer-main{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.wire-footer .footer-main{grid-template-columns:1fr 1fr}}

/* ── precision polish pass ── */
.wire-magic{padding-top:64px}                              /* #8 tighten space above the section */
#pricing .section{padding-top:60px}                        /* #16 pull pricing up (eyebrow removed) */
.calculator-next .link:hover .icon{transform:translateY(4px)}   /* #17 arrow moves DOWN on hover */
.page-feature-links a{transition:color .18s}               /* #11 discover-businesses hover */
.page-feature-links a:hover{color:var(--purple)}
.page-feature-links a:hover .icon:last-child{transform:translateX(3px);transition:transform .18s;color:var(--purple)}
.closing-actions .cta-spark{font-size:1.05em;margin-left:3px;line-height:1}   /* #19 final CTA spark */
/* #6 autocomplete: fixed to the viewport so no card/overflow/gradient can clip it */
/* #6 The dropdown CONTAINER had no box (items are transparent), so the Google listings floated over
   the page "outside the box" on mobile. Give it a real white card + clamp it to the viewport. */
.wire-ac-list{position:fixed;z-index:10000;text-align:left;background:#fff;border:1px solid #e2dced;border-radius:12px;box-shadow:0 18px 44px -14px rgba(40,26,70,.38);overflow:hidden;max-height:min(46vh,320px);overflow-y:auto;max-width:calc(100vw - 24px)}
/* #5 The chat card (.aichat) is overflow:hidden for its glow, which clipped the "Call Sendie"
   dropdown when it opened downward. Open it UPWARD inside the card so it's never hidden. */
.wire-chat .chat-call-menu{top:auto;bottom:calc(100% + 6px)}
/* #7 Keep the "Build my Sendie" field + button stacked full-width and centred on mobile. */
@media(max-width:640px){
  #wireAnalyzeForm{flex-wrap:wrap}
  #wireAnalyzeForm label{flex-basis:100%}
  #wireAnalyzeForm .btn{width:100%;justify-content:center}
}

/* ── homepage-new refinements batch ── */
/* #2 "How people use Sendie" cards react to the mouse WITHOUT rising: the rail clips vertical
   overflow (overflow-x:auto), so a translateY lift got its top chopped off. Use a border + white
   lift + a downward shadow instead, which stays inside the rail. */
.use-rail .use-card{transition:box-shadow .25s,border-color .2s,background .2s}
.use-rail .use-card:hover{border-color:#c6b1ee;background:#fff;box-shadow:0 16px 32px -20px rgba(70,45,120,.45)}
@media(prefers-reduced-motion:reduce){.use-rail .use-card{transition:none}}

/* #1 the "See what your Sendie could do" search box gets a hover state */
#wireAnalyzeForm label{transition:border-color .18s,box-shadow .18s}
#wireAnalyzeForm label:hover{border-color:#b898ea;box-shadow:0 0 0 3px rgba(124,92,255,.1)}
#wireSite{transition:border-color .18s,box-shadow .18s}

/* #6 spacing above "Connects to your apps" (breathing room after the pricing block) */
#integrations{padding-top:64px}
#pricing .section{padding-bottom:44px}

/* #12/#13 mega-dropdown footer links ("Explore all businesses" / "Explore the complete platform")
   become mouse-reactive: colour shift + the arrow slides */
.mega-footer{transition:color .18s}
.mega-footer:hover{color:var(--purple)}
.mega-footer span,.mega-footer .icon{display:inline-block;transition:transform .18s}
.mega-footer:hover span,.mega-footer:hover .icon:last-child{transform:translateX(4px)}

/* #5 compare-features link: centred, below the plans, above the enterprise card.
   .section-foot is display:flex;justify-content:space-between, so centre it with flex, not text-align. */
.compare-foot{display:flex;justify-content:center;text-align:center;margin:34px 0 30px}
.compare-foot .compare-all{display:inline-flex;justify-content:center}

/* #3 chat call: a clean purple "Call me" pill (phone glyph, calls the number typed in) with a
   caret that reveals "Call Sendie". Deliberately NOT the hero .call-magic button (its JS rewrites
   any .tk-lbl to "Try a Sendie Call" and swaps in the orb, which is wrong here). */
.chat-call-split{position:relative;display:inline-flex;align-items:stretch}
.chat-call-go{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border:0;border-radius:11px 0 0 11px;background:linear-gradient(120deg,#7c5cff,#6b4be0);color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px -9px rgba(107,75,224,.75);transition:background .2s}
.chat-call-go:hover{background:linear-gradient(120deg,#8a6cff,#7452ea)}
.chat-call-go .chat-call-glyph{opacity:.95;flex:none}
.chat-call-caret{display:grid;place-items:center;width:32px;border:0;border-left:1px solid rgba(255,255,255,.28);border-radius:0 11px 11px 0;background:linear-gradient(120deg,#6b4be0,#5c3fd0);color:#fff;cursor:pointer;transition:background .2s}
.chat-call-caret:hover{background:#5836c4}
.chat-call-caret[aria-expanded=true] svg{transform:rotate(180deg)}
.chat-call-caret svg{transition:transform .18s}
.chat-call-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;background:#fff;border:1px solid #e2dced;border-radius:12px;box-shadow:0 18px 44px -18px rgba(40,26,70,.4);overflow:hidden;min-width:148px}
.chat-call-menu a{display:block;padding:11px 15px;font-size:13px;font-weight:600;color:#2b2440;text-decoration:none}
.chat-call-menu a:hover{background:#f4effc;color:var(--purple)}

/* #7 Talk-to-sales modal */
.sales-modal{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;padding:20px}
.sales-modal[hidden]{display:none!important}
.sales-modal-backdrop{position:absolute;inset:0;background:rgba(24,18,38,.55);backdrop-filter:blur(3px)}
.sales-modal-card{position:relative;width:min(460px,100%);background:#fff;color:#25212f;border-radius:20px;padding:30px 28px;box-shadow:0 40px 90px -30px rgba(30,18,60,.6);animation:salesIn .22s ease both}
@keyframes salesIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.sales-modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:#8a7ca0;cursor:pointer;border-radius:8px}
.sales-modal-x:hover{background:#f3eefb;color:#513077}
.sales-modal-card h3{margin:0 0 6px;font-size:22px;letter-spacing:-.02em;color:#221b33}
.sales-modal-sub{margin:0 0 18px;font-size:14px;color:#6a6178;line-height:1.55}
#salesForm{display:flex;flex-direction:column;gap:10px}
#salesForm input,#salesForm textarea{width:100%;padding:12px 14px;border:1px solid #e2dced;border-radius:11px;font:inherit;font-size:14px;color:#25212f;background:#fbf9ff}
#salesForm input:focus,#salesForm textarea:focus{outline:none;border-color:var(--purple);background:#fff}
#salesForm textarea{resize:vertical;min-height:70px}
#salesForm .btn{margin-top:4px;justify-content:center}
.sales-modal-note{margin:2px 0 0;font-size:13px;color:#c0392b}
.sales-modal-ok{font-size:15px;color:#2a7a52;line-height:1.5;margin:6px 0}
@media(prefers-reduced-motion:reduce){.sales-modal-card{animation:none}}

/* #14 post-search CTA: a clean primary button that carries the visitor into registration */
.wire-build-cta{gap:8px}

/* Chat-bubble section subtext must sit on TWO lines max at desktop: give the copy column more
   room and trim the paragraph size a touch so the exact wording fits without a third line. */
@media(min-width:820px){#try-sendie .try-panel{grid-template-columns:1.5fr 1fr}}
#try-sendie .try-edu{font-size:14px;line-height:1.55;max-width:none}
/* #6 On mobile the concierge section (.try-panel is overflow:hidden + rounded) clipped its heading
   and chat card on the right when they rendered wider than the viewport. Guarantee everything fits:
   the heading scales with viewport width and wraps, and the chat card + its flex fields never force
   the panel wider than the screen. */
@media(max-width:760px){
  #try-sendie .try-panel{max-width:100%;min-width:0}
  #try-sendie .try-copy,#try-sendie .wire-chat,#try-sendie .aichat{max-width:100%;min-width:0}
  #try-sendie .try-copy h2{font-size:clamp(27px,7.2vw,35px);overflow-wrap:break-word;word-break:break-word}
  #try-sendie .aichat *{min-width:0}
  #try-sendie .aichat-bar,#try-sendie .aichat .call-row{flex-wrap:wrap}
  #try-sendie .aichat-bar input{flex:1 1 100%;min-width:0}
}

/* #2 hide the "Try a Sendie call" button once the inline call-me field is showing */
.hero-ctas:has(#heroCall.open) .call-magic{display:none}
/* #5 iOS Safari sometimes fails to clip overflow:hidden + border-radius:50% while the orb's inner
   layers animate, leaking their SQUARE box behind the round orb. A radial mask forces the circular
   clip on every browser WITHOUT touching the orb itself (same round shape, gradient and rotation). */
.call-orb{-webkit-mask-image:radial-gradient(circle closest-side,#000 99.5%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 99.5%,transparent 100%)}
/* #1 the disclaimer must be plain, always-visible inline text under the field, NOT the
   legacy floating white popover (which was opacity:0 + a shadow box that obscured it and
   forced awkward wrapping). Fully neutralise the legacy-widgets.css card styling here. */
/* #2 hero call: field + split "Have Sendie call me" button on ONE row, disclaimer as a plain
   full-width line BELOW it (was a floating shadow popover flowing beside the button). */
#heroCall{max-width:none;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#heroCall .hero-call-row{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
#heroCall .hero-call-split{align-items:stretch}
#heroCall .hero-call-split .chat-call-go{border-radius:11px 0 0 11px;font-size:14px;padding:0 18px}
/* The number field: the rebuild moved the input out of .hero-call-field (which carried its style),
   so style it here to match the row, a clean rounded field the same height as the Call me button,
   NOT the raw browser box. */
#heroCall .hero-call-row .dial{min-height:44px;border-radius:12px;border:1.5px solid var(--border2);padding:0 10px}
#heroCall .hero-call-row input[type=tel]{flex:1 1 210px;min-width:150px;min-height:44px;border:1.5px solid var(--border2);border-radius:12px;padding:0 16px;font-family:var(--sans);font-size:14.5px;color:var(--ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
#heroCall .hero-call-row input[type=tel]::placeholder{color:var(--muted2)}
#heroCall .hero-call-row input[type=tel]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(107,92,246,.12)}
#heroCall .hero-call-consent{display:block;position:static;transform:none;margin:0;
  background:transparent;border:0;box-shadow:none;padding:0;width:100%;max-width:none;
  opacity:1;pointer-events:auto;font-size:12px;color:#9992a9;line-height:1.5}
/* #17 estimate note stays on ONE line at the calculator's width (shrink type rather than
   clip); wraps only on very narrow phones where one line can't fit legibly. */
.calc-panel .estimate-note{white-space:nowrap;font-size:11px;letter-spacing:-.1px}
@media(max-width:520px){.calc-panel .estimate-note{white-space:normal;font-size:11px}}
/* #19 one-time tasteful glow on the claim field when its section scrolls into view */
.claim-form label.claim-lit{animation:claimLit 1.8s ease-out 1;border-color:#987aca}
@keyframes claimLit{0%{box-shadow:0 0 0 0 rgba(146,112,245,.0)}18%{box-shadow:0 0 0 4px rgba(146,112,245,.32)}100%{box-shadow:0 0 0 0 rgba(146,112,245,0)}}
@media(prefers-reduced-motion:reduce){.claim-form label.claim-lit{animation:none;box-shadow:0 0 0 3px rgba(146,112,245,.28)}}
/* #3 post-call upsell */
.wire-upsell{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wire-upsell b{font-size:15px;color:var(--text,#f5f3fa)}
.wire-upsell .cta-spark{font-size:1.05em;margin-left:3px}
/* #10 compact, sleek call-row buttons in the chat card (side by side, not huge/stacked) */
.wire-chat .aichat .call-row{flex-wrap:wrap;gap:8px;align-items:center}
.wire-chat .aichat .call-row .call-btn,.wire-chat .aichat .call-row .call-us-btn{min-height:0;padding:9px 14px;font-size:12.5px;flex:0 1 auto;width:auto;border-radius:99px}

/* #15 mouse-reactive feature cards + squiggly underline that draws in on hover, retracts on leave */
.features .feature-card{transition:transform .28s cubic-bezier(.2,.75,.3,1),background .2s,box-shadow .28s}
.features .feature-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(70,45,120,.45)}
.features .feature-card h3{position:relative;display:inline-block}
.features .feature-card h3::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 Q 12 1 23 6 T 47 6 T 71 6 T 95 6 T 119 6 T 139 6' fill='none' stroke='%237546dc' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") left center/0% 100% no-repeat;
  transition:background-size .42s cubic-bezier(.2,.75,.3,1)}
.features .feature-card:hover h3::after{background-size:100% 100%}
@media(prefers-reduced-motion:reduce){.features .feature-card,.features .feature-card h3::after{transition:none}}