/* industry-base.css -- extracts from css/site.css that the industry pages need
   and Webflow cannot express as Designer styles: descendant, child and tag
   selectors. Loaded BEFORE industry.css so the cascade order matches the
   reference (site.css, then industry.css, then the page's own <style>).

   Without .pd-sec h2 and .hero h1 the headings lose their clamp() and render
   at a flat 32px/38px -- which is why every industry page was ~520px SHORTER
   than the reference at 1440 and ~465px TALLER at 390. */

/* Section rhythm. On live .pd-sec-sm exists ONLY as the combo .pd-sec.pd-sec-sm,
   but the reference markup uses it standalone -- so the section rendered with no
   padding at all and came out 56px short. */
.pd-sec-sm{padding:56px 0}

/* Phone mock interior. .screen-body and .bnav are single-class selectors that
   exist on the live site only inside other pages' embeds, never as Designer
   styles, so the earlier sweep wrongly assumed Webflow had them. Without them
   the bottom nav stacks vertically (59px -> 175px) and the hero grows 32px. */
.screen-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:12px 13px 10px}
.bnav{flex:none;display:flex;justify-content:space-around;align-items:center;background:var(--_sharpsell-theme---paper);border-top:1px solid var(--_sharpsell-theme---line);padding:9px 6px 14px;margin:8px -13px -10px}

/* Webflow's Body cannot be styled in the Designer, so the page ground stayed
   #fff instead of --paper and text lost antialiasing. */
body{background:var(--_sharpsell-theme---paper);-webkit-font-smoothing:antialiased}

/* .hero -- the reference gives industry pages 52/32/60 but the live Designer
   style is 56/32/88, which made every hero 32px tall. ref-rule.js reports 3
   distinct .hero values across the 11 existing pages, so the shared style must
   NOT be changed; scoping it here is safe because only the industry pages load
   this file. */
.hero{max-width:1240px;margin:0 auto;padding:52px 32px 60px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}

/* Webflow's base stylesheet styles bare <blockquote> (padding:10px 20px plus a
   5px left border). That is a type selector, so it outranks the *{padding:0}
   reset the reference relies on, and every stack-section pull quote came out
   20px taller with a grey rule down its side. */
blockquote{margin:0;padding:0;border-left:0}

/* css/site.css:221. The shared Webflow .hero-actions is 32px because index
   needs that; ref-rule.js reports 4 distinct values across the 11 existing
   pages, so it is scoped here rather than changed globally (h34). Invisible at
   >=900px -- the hero grid is sized by the taller phone column -- but it made
   every industry hero 4px tall once the grid collapsed to one column. */
.hero-actions{margin-top:28px}

/* Webflow's base h1-h6 carry a line-height the reference never sets, so an
   embedded <h3> rendered 30px where the reference renders `normal`. Reset to
   normal FIRST -- the reference's own .hero h1 / .pd-sec h2 / .cta-in h2 rules
   below have the same specificity and, coming later, win where they apply. */
.hero :is(h1,h2,h3,h4,h5,h6),
.pd-sec :is(h1,h2,h3,h4,h5,h6),
.pd-sec-sm :is(h1,h2,h3,h4,h5,h6),
.faq :is(h1,h2,h3,h4,h5,h6){line-height:normal}

/* page-design sections */
.pd-dark .kicker{color:var(--_sharpsell-theme---sun)}
.pd-dark .btn-ghost{color:var(--_sharpsell-theme---sun)}
.pd-sec h2,.mock-section h2{font-size:clamp(27px,3.2vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:800;max-width:26ch;margin-top:6px}
.pd-sec .lede,.mock-section .lede{margin-top:16px;font-size:17px;line-height:1.68;color:var(--_sharpsell-theme---ink-2);max-width:68ch}
.pd-sec .sec-close{margin-top:34px;font-size:17px;line-height:1.55;font-weight:700;color:var(--_sharpsell-theme---brand);max-width:74ch}
.pd-dark>.pd-wrap>h2,.pd-dark>.pd-wrap>h3{color:#fff}
.pd-dark>.pd-wrap>.lede,.pd-dark>.pd-wrap>p{color:rgba(255,255,255,.78)}
.pd-dark>.pd-wrap>.sec-close{color:var(--_sharpsell-theme---sun)}

/* hero */
.hero h1{font-size:clamp(34px,4.2vw,54px);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.hero .lede{margin-top:20px;font-size:17px;line-height:1.6;color:var(--_sharpsell-theme---ink-2);max-width:52ch}

/* closing CTA band */
.cta-in .kicker{color:var(--_sharpsell-theme---sun)}
.cta-in h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.15;max-width:22ch;margin:0 auto;color:#fff}
.cta-in p{margin:18px auto 30px;font-size:16px;color:rgba(255,255,255,.78);max-width:58ch;line-height:1.68}
.cta-in .btn-primary{background:#fff;color:var(--_sharpsell-theme---brand);box-shadow:0 14px 34px rgba(0,0,0,.28)}

/* logo marquee band + trust badges */
.logo-bar>.logo-bar-label{display:block;flex-basis:auto;margin-bottom:18px}
.ts-badges img{height:74px;width:auto;object-fit:contain}

/* phone mock bottom nav */
.bnav div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--_sharpsell-theme---muted)}
.bnav div.on{color:var(--_sharpsell-theme---brand)}
.bnav svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* scroll reveal. The hidden state is gated on .js-rv, which the live site's own
   script adds to <html>; its observer then adds .rv-in on scroll (verified on
   the live insurance page: 8 of 8 revealed). Both declarations ship together --
   shipping only the hidden half would permanently hide the content. */
.js-rv .rv{opacity:0;transform:translateY(8px);will-change:opacity,transform}
.js-rv .rv.rv-in{opacity:1;transform:none;transition:opacity .38s ease-out,transform .38s ease-out}
@media (prefers-reduced-motion:reduce){
  .js-rv .rv{opacity:1;transform:none}
  .js-rv .rv.rv-in{transition:none}
}

/* phone frame and FAQ, also from css/site.css. These classes exist on the live
   site only inside other pages' embeds, never as Designer styles, so a new page
   gets nothing. Without .phone's aspect-ratio the mock has no height constraint
   and grows to thousands of px. --shadow-lg and --green inlined. */
.phone{position:relative;width:360px;aspect-ratio:360/744;height:auto;background:var(--_sharpsell-theme---ink);border-radius:46px;padding:9px;box-shadow:0 24px 80px rgba(36,16,26,.14),0 2px 0 rgba(255,255,255,.06) inset;flex:none;max-width:88vw}
.phone-screen{position:relative;width:100%;height:100%;background:var(--_sharpsell-theme---paper-2);border-radius:40px;overflow:hidden;display:flex;flex-direction:column}
.notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:100px;height:27px;background:var(--_sharpsell-theme---ink);border-radius:14px;z-index:30}
.app-bar{padding:56px 16px 11px;background:var(--_sharpsell-theme---paper);border-bottom:1px solid var(--_sharpsell-theme---line);display:flex;align-items:center;gap:9px;flex:none}
.app-icon{width:22px;height:22px;border-radius:6px;display:block;aspect-ratio:1/1;object-fit:contain}
.app-bar-title{font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--_sharpsell-theme---ink)}
.bar-chip{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--_sharpsell-theme---brand);background:rgba(181,11,80,.08);border:1px solid rgba(181,11,80,.18);padding:4px 10px;border-radius:999px;white-space:nowrap}
.bar-chip.green{color:#3b6d59;background:rgba(59,109,89,.08);border-color:rgba(59,109,89,.2)}
.phone-stage{display:flex;justify-content:center;position:relative}
.phone-stage::before{content:"";position:absolute;inset:8% 0 -6% 0;background:radial-gradient(60% 55% at 50% 45%, rgba(181,11,80,.07), transparent 70%);z-index:0}
.phone-stage .phone{z-index:1}
@media (max-width:900px){.phone-stage{order:-1}}
.faq{max-width:880px;margin:0 auto;padding:24px 32px 80px}
.faq h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
.faq details{border:1px solid var(--_sharpsell-theme---line);border-radius:var(--_sharpsell-theme---radius-sm);background:var(--_sharpsell-theme---paper);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:16px 20px;font-size:15px;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;font-weight:600;color:var(--_sharpsell-theme---brand);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .faq-a{padding:0 20px 16px;font-size:16px;line-height:1.7;color:var(--_sharpsell-theme---ink-2);max-width:68ch}

/* rotating client logo marquee. .logo-marquee/.logo-track/.logo-group exist on
   the live site only inside the shared Client Logo Marquee component's own
   embed, so an industry page's marquee gets none of them. */
.logo-marquee{position:relative;overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
.logo-track{display:flex;width:max-content;align-items:center;animation:logo-scroll 46s linear infinite;will-change:transform}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-group{display:flex;align-items:center;gap:64px;padding-right:64px;flex:none}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-img{height:calc(var(--lh,40) * 1px);width:auto;max-width:none;object-fit:contain;mix-blend-mode:multiply}
.logo-img.tall{height:38px}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:14px 34px}.logo-group{gap:14px 34px;padding-right:0;flex-wrap:wrap;justify-content:center}.logo-group[aria-hidden="true"]{display:none}.logo-marquee{-webkit-mask-image:none;mask-image:none}}
/* No .logo-img height override in the 760px block below. css/site.css declares
   one at line 152, but its base rule at line 206 has equal specificity and comes
   later, so the reference never shrinks the logos on mobile (measured 46px at
   390px wide). Porting it here revived a rule that is dead in the reference and
   made every logo bar 9px short below 760px. */
@media (max-width:760px){.logo-group{gap:42px;padding-right:42px}.logo-track{animation-duration:34s}.logo-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}}

@media (max-width:900px){.pd-sec-sm{padding:44px 0}}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:44px;padding:36px 20px 48px}}