/*
Theme Name: Salonify
Theme URI: https://www.salonify.in
Author: Salonify
Description: Custom WordPress theme for Salonify — salon & spa management software. Migrated from the original static site design.
Version: 1.0
Text Domain: salonify
*/

:root{
  --bg:#ffffff;
  --bg-alt:#f7f6f4;
  --surface:#fafaf9;
  --border:#e7e5e1;
  --border-strong:#d8d5cf;
  --text:#17161a;
  --text-dim:#68656d;
  --text-faint:#9b98a0;
  --accent:#d7006c;
  --accent-dim:#fdeaf1;
  --accent-2:#7c5cff;
  --mono: "SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --sans: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --radius:10px;
  /* One source of truth for the content column, so .wrap, the nav and the
     .entry-content text measure always share the same grid - including when
     large screens widen it further down. */
  --container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:90px;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border);background:var(--surface);padding:6px 12px;border-radius:100px;}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:8px;font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;transition:all .15s ease;white-space:nowrap;}
.btn-primary{background:var(--text);color:#fff;}
.btn-primary:hover{background:var(--accent);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--text);background:var(--surface);}
.btn-sm{padding:9px 18px;font-size:13px;}
section{padding:56px 0;border-bottom:1px solid var(--border);}
h1,h2,h3{font-weight:650;letter-spacing:-0.02em;line-height:1.14;}
h2{font-size:clamp(28px,3.6vw,42px);}
.section-head{max-width:640px;margin-bottom:32px;}
.section-head p{color:var(--text-dim);font-size:16.5px;margin-top:14px;}
.section-head:has(+ .badge-row){margin-left:auto;margin-right:auto;text-align:center;}

header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--container);margin:0 auto;}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-0.01em;}
.logo-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));flex-shrink:0;}
.nav-links{display:flex;gap:30px;font-size:14.5px;color:var(--text-dim);}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text);font-weight:600;}
.nav-cta{display:flex;align-items:center;gap:24px;}
.nav-cta a.login{font-size:14.5px;color:var(--text-dim);}
.nav-cta a.login:hover{color:var(--text);}
.menu-btn{display:none;background:none;border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;cursor:pointer;}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 24px 20px;border-bottom:1px solid var(--border);}
.mobile-menu a{padding:10px 4px;color:var(--text-dim);border-top:1px solid var(--border);font-size:15px;}
.mobile-menu a:first-child{border-top:none;}
.mobile-menu.open{display:flex;}

/* Announcement strip above the hero, on the home page only. It borrows the
   hero's own accent wash instead of introducing a new colour, and wraps to two
   centred rows on narrow screens rather than shrinking the tap target. */
/* Full-width announcement bar, flush under the header. It is the first thing in
   the home page content, so it butts straight up against the header with no gap.
   padding:0 overrides the global section{padding:96px 0}, and the border-bottom
   is dropped because the theme's light section border would draw a pale line
   across a dark bar. Dark rather than the accent pink: .hero::before washes the
   area just below in --accent-dim, and a pink bar dissolved into it. */
.growth-banner{padding:0;background:var(--text);border-bottom:none;}
.growth-banner-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:3px;padding:12px 20px 14px;}
.growth-banner-kicker{margin:0;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;}
.growth-banner-sub{margin:0;font-size:14.5px;color:rgba(255,255,255,.62);max-width:520px;}
.growth-banner-btn{margin-top:8px;background:var(--accent);color:#fff;padding:8px 18px;font-size:13px;font-weight:600;border-radius:100px;flex-shrink:0;}
.growth-banner-btn:hover{background:#fff;color:var(--text);transform:translateY(-1px);}
/* The bar now supplies the visual break under the header, so the hero's own top
   padding is cut to stop the headline and buttons being pushed down the fold.
   Scoped to body.home because the bar only exists there; these mirror the
   hero's own 1024/860/560 breakpoints. Shrunk further (26/22/18/16 -> 14/12/10/8)
   together with the hero's own text sizes below, so the banner + hero fit within a
   single laptop-height screen without scrolling. */
body.home .hero{padding-top:14px;}
@media (max-width:1024px){ body.home .hero{padding-top:12px;} }
@media (max-width:860px) { body.home .hero{padding-top:10px;} }
@media (max-width:560px) { body.home .hero{padding-top:8px;} }
@media (max-width:600px){
  .growth-banner-inner{padding:10px 16px 12px;gap:3px;}
  .growth-banner-kicker{font-size:12.5px;}
  .growth-banner-sub{font-size:13px;line-height:1.4;}
  .growth-banner-btn{padding:7px 16px;margin-top:7px;}
}

.hero{padding:56px 0 24px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
/* Home only: the hero fills the rest of the screen below the header + banner, so the next
   section (.video-section) never peeks in above the fold - centering the hero's own content
   vertically inside that space rather than leaving it pinned to the top with a gap below.
   100vh minus the header+banner's own height, measured at each width (it is itself shortened
   by its own text wrapping/padding breakpoints); the smaller of the two numbers measured in
   each range is used so the hero is never left short even at the narrowest width in that
   range - a little taller than the bare minimum beats the next section showing through. */
body.home .hero{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 182px);}
/* On mobile the hero no longer forces itself to fill the screen - that was
   only ever to stop the next section peeking in above the fold on short
   desktop/laptop screens. On a phone, a single forced-height screen crowded
   everything together instead; letting it size to its own content, with more
   breathing room per element below, reads as a normal page that flows and
   scrolls, which is what a phone visitor expects. */
@media (max-width:560px){ body.home .hero{min-height:auto;display:block;} }
/* Centered on both axes (was top:-220px, anchored to the hero's old short, top-aligned
   layout) so the glow still sits behind the heading now that the hero fills the screen
   and its content is vertically centered instead, at any height. */
.hero::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:500px;background:radial-gradient(ellipse at center,var(--accent-dim),transparent 70%);pointer-events:none;}
/* Sized so the CONTENT box is 1040px - the width .feature-strip, .mock and the
   .video-wrap below all ask for - after the inherited 24px .wrap gutter. The
   headline keeps its own 820px measure. */
.hero-inner{position:relative;text-align:center;max-width:calc(1040px + 48px);margin:0 auto;}
/* Reduced again (clamp(30px,4.4vw,48px) -> clamp(24px,3.2vw,34px)) together with the
   margins and the banner above, so the banner + hero fit one laptop-height screen
   without scrolling. .hero is used only on the home page, so .page-hero (46px) and
   .detail-hero (42px) elsewhere are untouched. */
.hero h1{font-size:clamp(24px,3.2vw,34px);margin:12px auto 8px;max-width:820px;}
.hero p.tagline{color:var(--accent);font-weight:700;font-size:clamp(15px,1.6vw,17px);margin:0 auto 8px;}
.hero p.sub{color:var(--text-dim);font-size:15px;max-width:600px;margin:0 auto 18px;}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-bottom:64px;flex-wrap:wrap;}
/* Modifier used only when a short caption line follows the hero buttons (home hero), so the
   big 64px gap above still separates the hero from the next section while the caption sits
   close under the buttons. Two classes beat .hero-actions's one on specificity, so this wins
   regardless of source order and every other .hero-actions on the site is unaffected. */
.hero-actions.has-caption{margin-bottom:10px;}
.hero p.hero-caption{color:var(--text-faint);font-size:12.5px;margin:0 auto 32px;}

.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-width:1040px;margin:0 auto;}
.feature-strip div{background:var(--surface);padding:22px 20px;text-align:left;}
/* inline-block, not block: as a block the icon's box filled the whole 219px
   cell while the glyph itself is ~15px, so rotating it swung the glyph around
   the cell centre in a wide arc instead of spinning it in place. Shrinking the
   box to the glyph puts the centre of rotation where it belongs. */
.feature-strip .ficon{font-size:18px;margin-bottom:10px;display:inline-block;transform-origin:50% 50%;will-change:transform;animation:ficon-spin 6s linear infinite;}

@keyframes ficon-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* Negative delays start each icon part-way round, so the four are evenly spread
   rather than turning in lockstep - and none of them sits still first.

   The colours are the two brand accents plus a teal and an amber, which sit in
   the same tonal range so the row still reads as one set rather than four
   unrelated icons. Each is dark enough to hold up against the pale panel. */
.feature-strip div:nth-child(1) .ficon{color:var(--accent);}      /* pink   */
.feature-strip div:nth-child(2) .ficon{color:var(--accent-2);animation-delay:-1.5s;} /* violet */
.feature-strip div:nth-child(3) .ficon{color:#0d9488;animation-delay:-3s;}           /* teal   */
.feature-strip div:nth-child(4) .ficon{color:#e08900;animation-delay:-4.5s;}         /* amber  */

@media (prefers-reduced-motion:reduce){
  .feature-strip .ficon{animation:none;will-change:auto;}
}
.feature-strip h4{font-size:14.5px;margin-bottom:6px;}
.feature-strip p{font-size:13px;color:var(--text-dim);line-height:1.45;}

.mock{margin-top:64px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface);padding:10px;max-width:1040px;margin-left:auto;margin-right:auto;box-shadow:0 40px 90px -40px rgba(20,20,25,0.18);}
.mock-bar{display:flex;gap:6px;padding:10px 8px;}
/* The three window dots, in the usual traffic-light colours. That is what the
   pattern signifies everywhere else, so it reads as a real application window
   immediately - grey dots just looked like unfinished placeholders. */
.mock-bar span{width:10px;height:10px;border-radius:50%;background:var(--border-strong);}
.mock-bar span:nth-child(1){background:#ff5f57;}
.mock-bar span:nth-child(2){background:#febc2e;}
.mock-bar span:nth-child(3){background:#28c840;}
.mock-screen{background:var(--bg-alt);border-radius:8px;padding:34px;min-height:280px;display:grid;grid-template-columns:170px 1fr;gap:22px;}
.mock-side{display:flex;flex-direction:column;gap:10px;}
.mock-side div{height:12px;border-radius:4px;background:var(--border);}
.mock-side div:nth-child(1){width:70%;}
.mock-main{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.mock-card{border:1px solid var(--border);border-radius:8px;padding:16px;background:#fff;}
.mock-card .num{font-family:var(--mono);font-size:22px;color:var(--accent);margin-bottom:6px;}
.mock-card .lbl{font-size:12px;color:var(--text-dim);}
.mock-row{grid-column:1/-1;height:80px;border:1px solid var(--border);border-radius:8px;background:#fff;margin-top:2px;background-image:linear-gradient(90deg,transparent 0%,var(--accent-dim) 50%,transparent 100%);}

/* Real product screenshot in the hero window, replacing the placeholder blocks.
   The padding and grid that framed those blocks are dropped so the screenshot
   fills the screen area edge to edge, the way an actual app would. */
.mock-screen.has-shot{display:block;padding:0;min-height:0;overflow:hidden;background:var(--bg);}
.mock-screen.has-shot img{display:block;width:100%;height:auto;border-radius:8px;}

/* The same window chrome reused inside a two-column section - the SIA,
   BookingZone and Dashboard spotlights on the home page, and the feature detail
   pages that carry a real screenshot. The hero's top margin and 1040px cap are
   dropped because here it sits in a grid column, not across the full width. */
.feature-mock{margin-top:0;max-width:none;}

.video-section{padding:0 0 56px;border-bottom:1px solid var(--border);}
/* Narrower than the 1040px band the .mock and .feature-strip use. At 1040 the
   16/9 player stood 586px tall - 73% of a 1280x800 laptop screen - so it read
   as the page rather than a supporting element. Stepping it in to 820px also
   reads as deliberate against the wider blocks above it.

   Nothing changes below ~870px wide: the .wrap gutters already constrain the
   player to less than this, so tablet and phone keep their existing sizing. */
.video-wrap{max-width:820px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 70px -38px rgba(20,20,25,0.24);border:1px solid var(--border-strong);background:#000;}
.video-wrap video{width:100%;display:block;aspect-ratio:16/9;background:#000;}
.video-caption{text-align:center;max-width:640px;margin:24px auto 0;color:var(--text-dim);font-size:14.5px;}

.stats{padding:32px 0;border-bottom:1px solid var(--border);}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.stats-grid div{text-align:center;padding:0 12px;border-left:1px solid var(--border);}
.stats-grid div:first-child{border-left:none;}
/* Subgrid puts every value on one shared row and every label on another, so
   both stay aligned no matter how many lines an individual label takes. */
@supports (grid-template-rows: subgrid){
  .stats-grid{grid-template-rows:auto auto;}
  .stats-grid div{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;}
}
/* Capped so the longest value ("Multi-Branch") still fits a single line. */
.stats-grid .num{font-family:var(--mono);font-size:clamp(20px,2vw,26px);line-height:1.25;color:var(--accent);font-weight:600;}
.stats-grid .lbl{font-size:13px;color:var(--text-dim);margin-top:6px;}

.grid-12{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.grid-12 .cell{background:#fff;padding:24px;transition:background .15s;}
.grid-12 .cell:hover{background:var(--surface);}
.grid-12 .cell .tag{font-family:var(--mono);font-size:11px;color:var(--text-faint);}
.grid-12 .cell h4{font-size:15.5px;margin-top:8px;}

.features-icon-grid .cell{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.features-icon-grid .cell-icon{width:56px;height:56px;object-fit:contain;flex-shrink:0;}
.features-icon-grid .cell-cta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text);flex-shrink:0;white-space:nowrap;}
.features-icon-grid .cell-cta svg{width:12px;height:12px;transition:transform .15s ease;}
.features-icon-grid .cell:hover .cell-cta svg{transform:translateX(3px);}

.spotlight{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.spotlight + .spotlight{margin-top:88px;}
.spotlight.reverse{direction:rtl;}
.spotlight.reverse > *{direction:ltr;}
.spotlight .badge{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;display:block;}
.spotlight h3{font-size:28px;margin-bottom:14px;}
.spotlight p{color:var(--text-dim);font-size:15.5px;margin-bottom:22px;}

/* AI tools accordion (SARA / SIA / SUHA): same proven details/summary pattern
   as .faq-list, but the summary row carries an icon + title + description
   instead of plain text, and the panel reuses .spotlight wholesale so the
   expanded content looks identical to the standalone sections it replaced. */
.ai-accordion{display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto;}
.ai-acc-item{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 14px 30px -26px rgba(20,20,25,.3);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.ai-acc-item:hover{border-color:#e3d3ef;}
.ai-accordion:not(.js-enhanced) .ai-acc-item[open]{border-color:#e3d3ef;background:linear-gradient(180deg,#fff 0%,#fdf8fb 100%);box-shadow:0 18px 34px -26px rgba(215,0,108,.3);}
.ai-acc-item.is-open{border-color:#e3d3ef;background:linear-gradient(180deg,#fff 0%,#fdf8fb 100%);box-shadow:0 18px 34px -26px rgba(215,0,108,.3);}
.ai-acc-item summary{cursor:pointer;list-style:none;position:relative;display:flex;align-items:center;gap:16px;padding:18px 58px 18px 20px;transition:color .2s ease;}
.ai-acc-item summary::-webkit-details-marker{display:none;}
.ai-acc-item summary::marker{content:"";}
.ai-acc-icon{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.01em;}
/* All three now use real circular icon assets, same glow-ring treatment:
   SIA's pre-rendered mascot, and SARA/SUHA designed in the site's own accent
   gradient (a magnifying glass finding a growth line for SARA's analytics;
   a shopping bag with a "+" badge for SUHA's upsell) since no small marks
   existed for either. All three fit the fixed 46x46 square. */
img.ai-acc-icon-sia,img.ai-acc-icon-sara,img.ai-acc-icon-suha{background:none;object-fit:contain;}
/* The small tag under each icon, matching the "MEET SIA" style from the
   source artwork, now reused for all three. */
.ai-acc-icon-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;width:55px;}
.ai-acc-meet-badge{background:#0d0d10;border-radius:20px;padding:2px 8px;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap;line-height:1.7;}
.ai-acc-meet-badge .meet-l{color:var(--accent);}
.ai-acc-meet-badge .meet-n{color:#fff;}
.ai-acc-text{display:flex;flex-direction:column;gap:3px;}
.ai-acc-title{font-size:16px;font-weight:650;color:var(--text);}
.ai-acc-desc{font-size:14px;color:var(--text-dim);line-height:1.5;}
.ai-acc-item summary::after{content:"";position:absolute;right:16px;top:50%;width:30px;height:30px;font-size:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") center/15px 15px no-repeat,linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);
  transform:translateY(-50%);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .25s ease;}
.ai-accordion:not(.js-enhanced) .ai-acc-item[open] summary::after{transform:translateY(-50%) rotate(180deg);box-shadow:0 8px 16px -10px rgba(215,0,108,.5);}
.ai-acc-item.is-open summary::after{transform:translateY(-50%) rotate(180deg);box-shadow:0 8px 16px -10px rgba(215,0,108,.5);}
.ai-acc-item summary:hover::after{box-shadow:0 8px 16px -10px rgba(215,0,108,.45);}
.ai-acc-item summary:hover .ai-acc-title{color:var(--accent);}
/* Height animation itself is done in JS via the Web Animations API, animating
   an explicit measured pixel height on .ai-acc-panel-wrap (see the <script>
   below) rather than a CSS class/transition - a plain details/summary panel
   can't transition display or height:auto directly, and the CSS-only way
   around that (a grid-rows 0fr/1fr transition) needs a forced synchronous
   layout read right at click time to find its starting point, which is what
   caused the brief hitch on click. WAAPI keyframes don't need that read.
   Without JS, .ai-acc-panel-wrap is simply whatever the native open/closed
   <details> rendering already shows - no CSS fallback rule is needed here. */
.ai-acc-panel-wrap{overflow:hidden;}
.ai-acc-panel{padding:6px 24px 30px;}
.ai-acc-panel .spotlight{gap:40px;}
.ai-acc-panel .mock{margin-top:0;}
/* SUHA's own brand wordmark, standing in for the plain-text .badge label that
   SARA's panel (no logo asset exists for it) still uses. */
.ai-acc-panel .badge-logo{display:block;height:26px;width:auto;margin-bottom:14px;}
@media (prefers-reduced-motion:reduce){.ai-acc-item summary::after{transition:none;}}
@media (max-width:768px){.ai-acc-panel .spotlight{gap:28px;}}
@media (max-width:560px){.ai-acc-item summary{padding:14px 50px 14px 14px;gap:12px;}.ai-acc-icon{width:40px;height:40px;font-size:10px;}.ai-acc-icon-wrap{width:48px;}.ai-acc-meet-badge{font-size:7.5px;padding:2px 6px;}.ai-acc-title{font-size:14.5px;}.ai-acc-desc{font-size:13px;}.ai-acc-panel{padding:0 14px 22px;}.ai-acc-panel .badge-logo{height:22px;}}

/* Scoped to .panel rather than .spotlight .panel: the .dashboard and
   feature-detail panels use the same markup and previously got no frame at all. */
.panel{border:1px solid var(--border);border-radius:12px;background:var(--surface);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.panel::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,var(--accent-dim),transparent 60%);}
.panel .glyph{font-size:52px;position:relative;z-index:1;}
/* Panel imagery fills the 4/3 frame; the brand tint above stays as a wash over
   it, so a photo and the original gradient-only look sit together. */
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.panel:has(img)::after{background:radial-gradient(circle at 28% 16%,rgba(215,0,108,0.10),transparent 55%);z-index:1;}

/* SIA spotlight: the chat screenshot with floating capability callouts. */
.sia-showcase{position:relative;max-width:320px;margin:0 auto;}
.sia-showcase .sia-shot{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 30px 60px -30px rgba(20,20,25,0.28);}
.sia-tag{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 11px;font-size:12px;font-weight:600;line-height:1.35;color:var(--text);box-shadow:0 18px 40px -22px rgba(20,20,25,0.35);max-width:154px;opacity:0;animation:sia-tag-in .55s cubic-bezier(.16,1,.3,1) forwards,sia-tag-float 5.5s ease-in-out infinite;}
.sia-tag svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;}
.sia-tag-a{top:18px;left:-96px;animation-delay:.1s,.9s;}
.sia-tag-b{top:23%;right:-96px;animation-delay:.28s,1.3s;}
.sia-tag-c{bottom:36px;left:-112px;animation-delay:.46s,1.7s;}
@keyframes sia-tag-in{from{opacity:0;translate:0 16px;}to{opacity:1;translate:0 0;}}
@keyframes sia-tag-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@media (max-width:640px){.sia-showcase{max-width:300px;}.sia-tag{position:static;max-width:none;width:max-content;margin:10px auto 0;opacity:1;animation:none;}}
@media (prefers-reduced-motion:reduce){.sia-tag{opacity:1;animation:none;}}

.col3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.col3 .card{border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:#fff;}
.col3 .card .n{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:14px;}
.col3 .card h4{font-size:17px;margin-bottom:10px;}
.col3 .card p{color:var(--text-dim);font-size:14.5px;}

/* The per-section panel tints (violet for Dashboard, teal for BookingZone) were
   removed when those three sections moved to window chrome on a plain
   background. SUHA still uses the .panel treatment above. */

.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.dashboard ul{list-style:none;margin-top:24px;}
.dashboard li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--border);color:var(--text-dim);font-size:14.5px;}
.dashboard li:first-child{border-top:none;}
.dashboard li::before{content:"→";color:var(--accent);font-family:var(--mono);flex-shrink:0;}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);padding:7px 16px 7px 8px;border-radius:100px;font-size:13.5px;color:var(--text-dim);}
.pill-icon{width:22px;height:22px;border-radius:50%;flex-shrink:0;}

.tagcloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.tagcloud span{border:1px solid var(--border);border-radius:8px;padding:10px 16px;font-size:13.5px;color:var(--text);background:var(--surface);font-family:var(--mono);}

.integrations{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
/* Flex + wrap instead of a fixed grid: the 4 plain-text names became 5 real
   logos of varying width (2:1 to 3.5:1 once cropped to their own ink), so a
   fixed column count would leave uneven gaps. This wraps cleanly at any count
   and any screen width, each tile sized to its own logo. */
.integration-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.integration-logo{border:1px solid var(--border);border-radius:10px;background:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:center;}
.integration-logo img{height:32px;width:auto;display:block;}

.diff{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;}
.diff ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:14px;}
.diff li{border:1px solid var(--border);border-radius:8px;padding:16px 18px;background:var(--surface);font-size:14.5px;color:var(--text-dim);}

.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.test-card{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:#fff;display:flex;flex-direction:column;gap:16px;}
.test-card p{font-size:14.5px;color:var(--text);line-height:1.6;}
.test-wall{display:flex;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:8px 0;}
.test-track{display:flex;gap:0;animation:testscroll 60s linear infinite;flex-shrink:0;padding:0;}
/* Same reasoning as .logo-track. The old `padding:0 24px` skewed it further,
   because that padding counts toward the 50% but not toward the repeat. */
.test-track > *{margin-right:20px;}
.test-wall:hover .test-track{animation-play-state:paused;}
.test-track .test-card{min-width:340px;max-width:340px;flex-shrink:0;}
@keyframes testscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.test-who{display:flex;align-items:center;gap:10px;margin-top:auto;}
.test-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;line-height:1;user-select:none;}
.test-who .name{font-size:13.5px;font-weight:600;}
.test-who .role{font-size:12px;color:var(--text-faint);}
/* Provenance mark for a review taken from another platform. Pushed to the far
   end of the author row so it reads as an attribution rather than as part of
   the quote. Height only, width auto, so the mark keeps its own proportions.
   The row is already 64px tall because of the avatar, so this adds no height
   and nothing below the card moves. Cards without a source mark are unaffected. */
.test-card .test-source{margin-left:auto;height:26px;width:auto;flex-shrink:0;align-self:center;}

.logo-wall-head{position:relative;z-index:1;text-align:center;max-width:720px;margin:0 auto 28px;padding:0 20px;}
.logo-wall-heading{font-size:clamp(18px,2.2vw,22px);font-weight:800;margin:0 0 8px;}
.logo-wall-tagline{color:var(--text);font-size:15.5px;line-height:1.6;margin:0;}
.logo-wall{display:flex;gap:44px;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.logo-track{display:flex;gap:0;animation:scroll 90s linear infinite;flex-shrink:0;align-items:center;}
/* Spacing is a per-item margin rather than a flex gap. With `gap`, N items
   span N*w + (N-1)*g, so translateX(-50%) lands half a gap away from where
   the repeated half actually begins - a visible snap once per cycle.
   With margin-right on every item the track is exactly N*(w+m), so 50% is
   precisely one half and the loop is continuous. */
.logo-track > *{margin-right:44px;}
/* Stop the belt while a visitor is reaching for a logo, otherwise it is
   impossible to hover or click a specific one. */
.logo-wall:hover .logo-track,.logo-wall:focus-within .logo-track{animation-play-state:paused;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Each logo occupies an identical box; object-fit:contain keeps every mark at
   its true proportions inside that box, so nothing is stretched. */
.logo-item{position:relative;flex:0 0 auto;width:168px;height:84px;display:block;cursor:pointer;border:0;background:none;padding:0;}
.logo-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s ease;}
.logo-item .logo-colour{opacity:0;}
/* Full opacity: the mono PNGs already carry the intended grey, so an extra
   wash here only washed them out further. */
.logo-item .logo-mono{opacity:1;}
.logo-item:hover .logo-mono,
.logo-item:focus-visible .logo-mono,
.logo-item.is-active .logo-mono{opacity:0;}
.logo-item:hover .logo-colour,
.logo-item:focus-visible .logo-colour,
.logo-item.is-active .logo-colour{opacity:1;}
@media (max-width:860px){
  /* Tighter spacing in this band, but expressed as the item margin - a gap on
     the track would put the 50% keyframe out of step with the repeat again. */
  .logo-wall{gap:32px;}
  .logo-track{gap:0;}
  .logo-track > *{margin-right:32px;}
  .logo-item{width:132px;height:66px;}
}

.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center;}
/* Fixed, identical box for every tile so all six logos read as one even set
   regardless of each wordmark's own shape (3.19:1 to 8.95:1). 300x60/30px was
   sized generously and read as too big on laptop/desktop; content width 200px
   keeps the widest wordmark (Software Advice, 8.95:1) at the same 22px cap as
   the rest without exceeding the box - smaller overall, still every logo the
   same size. Phone sizing (below) is unchanged - only this size was too big. */
.badge-row div{border:1px solid var(--border);border-radius:8px;background:#fff;flex:0 0 auto;width:230px;height:48px;padding:0 15px;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease;}
.badge-row div:hover{border-color:var(--border-strong);}
.badge-row img{width:auto;height:auto;max-width:100%;max-height:22px;display:block;}
@media (max-width:560px){
  .badge-row{gap:10px;}
  /* Same fixed-box idea, scaled down: content width 148px keeps Software
     Advice at the same 16px cap as the rest of the set on phones. */
  .badge-row div{width:168px;height:36px;padding:0 10px;}
  .badge-row img{max-height:16px;}
}

.cta-final{text-align:center;padding:64px 0;}
.cta-final h2{margin-bottom:16px;}
.cta-final p{color:var(--text-dim);margin-bottom:32px;}
.cta-final .hero-actions{margin-bottom:0;}

footer{padding:64px 0 32px;background:var(--bg-alt);border-top:1px solid var(--border);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;}
.footer-grid h5{font-size:13px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;font-family:var(--mono);}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-grid a{color:var(--text-dim);font-size:14px;}
.footer-grid a:hover{color:var(--text);}
.footer-grid p{color:var(--text-dim);font-size:14px;max-width:280px;margin-top:10px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:var(--text-faint);flex-wrap:wrap;gap:14px;}
.footer-social{display:flex;gap:16px;}

/* Google review link, footer brand column.
   Written as ".footer-grid a.google-review" rather than ".google-review" so it
   outranks the ".footer-grid a{display:inline-block;padding:8px 0}" tap-target
   rule at <=860px, which would otherwise flatten the pill on tablets. */
.footer-grid a.google-review{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:9px 16px;
  border:1px solid var(--border);border-radius:999px;background:var(--bg);
  font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.footer-grid a.google-review:hover{
  color:var(--text);border-color:#f5b301;
  transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.07);
}
.footer-grid a.google-review .grev-stars{color:#f5b301;font-size:12.5px;letter-spacing:1.5px;line-height:1;}
@media (prefers-reduced-motion:reduce){
  .footer-grid a.google-review{transition:none;}
  .footer-grid a.google-review:hover{transform:none;}
}

/* generic inner page header */
.page-hero{padding:48px 0 36px;text-align:center;border-bottom:1px solid var(--border);}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);margin:18px 0 14px;}
.page-hero p{color:var(--text-dim);font-size:17px;max-width:600px;margin:0 auto;}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.price-card{border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;background:#fff;display:flex;flex-direction:column;}
.price-card.featured{border-color:var(--accent);box-shadow:0 20px 50px -30px rgba(215,0,108,.35);position:relative;}
.price-card h4{font-size:18px;margin-bottom:6px;}
.price-card .price{font-family:var(--mono);font-size:34px;margin:14px 0;}
.price-card .price span{font-size:14px;color:var(--text-dim);font-family:var(--sans);}
.price-card ul{list-style:none;margin:18px 0 26px;display:flex;flex-direction:column;gap:10px;flex-grow:1;}
.price-card li{font-size:14px;color:var(--text-dim);display:flex;gap:8px;}
.price-card li::before{content:"✓";color:var(--accent);font-weight:700;}
.price-badge{position:absolute;top:-13px;left:28px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;padding:4px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em;}
.price-plan-tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin-bottom:6px;}

.pricing-tabs{display:flex;justify-content:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:5px;max-width:320px;margin:0 auto 48px;}
.pricing-tab-btn{flex:1;border:none;background:transparent;padding:10px 20px;border-radius:100px;font-size:13.5px;font-weight:600;color:var(--text-dim);cursor:pointer;font-family:var(--sans);}
.pricing-tab-btn.active{background:var(--text);color:#fff;}
.pricing-panel{display:none;}
.pricing-panel.active{display:block;}
.pricing-note{max-width:640px;margin:36px auto 0;text-align:center;border:1px dashed var(--border-strong);border-radius:var(--radius);padding:24px 28px;background:var(--surface);}
.pricing-note p{color:var(--text-dim);font-size:14.5px;margin-bottom:14px;}
.advantages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.advantage-item{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-dim);border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:#fff;}
.advantage-item svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:1px;}

/* chatbot widget */
.chatbot{position:fixed;bottom:24px;right:24px;z-index:200;font-family:var(--sans);}
.chatbot-toggle{width:58px;height:58px;border-radius:50%;background:var(--accent);border:none;box-shadow:0 14px 30px -10px rgba(215,0,108,0.55);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;transition:transform .18s ease;}
.chatbot-toggle:hover{transform:scale(1.06);}
.chatbot-panel{position:absolute;bottom:74px;right:0;width:330px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 60px -20px rgba(20,20,25,0.35);display:none;flex-direction:column;overflow:hidden;}
.chatbot-panel.open{display:flex;}
.chatbot-header{background:var(--text);color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14.5px;}
.chatbot-header{gap:6px;}
.chatbot-header #chatHeaderTitle{flex:1 1 auto;min-width:0;}
.chatbot-header button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;flex-shrink:0;width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;}
.chatbot-header button:hover{background:rgba(255,255,255,0.14);}
/* Slightly smaller than the close glyph so it reads as secondary. */
.chatbot-header #chatReset{font-size:15px;opacity:.75;}
.chatbot-header #chatReset:hover{opacity:1;}
.chatbot-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px;max-height:280px;overflow-y:auto;}
.chatbot-body .msg{font-size:13.5px;line-height:1.5;padding:10px 13px;border-radius:12px;max-width:85%;}
.chatbot-body .msg.bot{background:var(--surface);color:var(--text);border-bottom-left-radius:4px;align-self:flex-start;}
.chatbot-body .msg.user{background:var(--text);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;}
/* The follow-up line under the first two answers - the free trial link, then
   the team's numbers. It sits inside the reply bubble, divided off by a hairline
   so it reads as a footnote to the answer rather than a second message.
   white-space is reset because the bubble itself is set to pre-line for the
   newlines in the canned answers, which would otherwise leak into this markup. */
.chatbot-body .msg .msg-cta{white-space:normal;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:12.5px;line-height:1.45;color:var(--text-dim);}
.chatbot-body .msg a{color:var(--accent);font-weight:700;text-decoration:underline;}
/* Keep a number whole - the panel is narrow enough that "+91 95356 38072"
   otherwise breaks after the second group, which makes it hard to read and
   harder to dial. */
.chatbot-body .msg a[href^="tel:"]{white-space:nowrap;}
/* Page links for whatever feature was just asked about. Stacked under the
   answer and above the follow-up line, with no divider of their own - the
   answer stays the main event and the bubble does not end up with two rules
   through it when a follow-up is present too. */
.chatbot-body .msg .msg-links{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:9px;white-space:normal;}
.chatbot-body .msg .msg-links a{font-size:12.5px;line-height:1.35;}
.chatbot-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;}
.chatbot-quick button{border:1px solid var(--border-strong);background:#fff;border-radius:100px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;}
.chatbot-quick button:hover{border-color:var(--accent);color:var(--accent);}
.chatbot-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);}
.chatbot-input input{flex:1;border:1px solid var(--border-strong);border-radius:100px;padding:9px 15px;font-size:13.5px;font-family:var(--sans);background:var(--bg-alt);color:var(--text);}
.chatbot-input button{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:14px;flex-shrink:0;}
.chatbot-wa{display:block;text-align:center;padding:11px;font-size:12.5px;font-weight:700;color:#fff;background:#25D366;}
.chatbot-wa:hover{background:#1fb855;}
.chatbot-lead{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;}
.chatbot-lead input{width:100%;padding:10px 13px;border:1.5px solid var(--border-strong);border-radius:8px;font-family:var(--sans);font-size:13.5px;background:var(--bg-alt);color:var(--text);}
.chatbot-lead input:focus{outline:none;border-color:var(--accent);}
.chatbot-phone-row{display:flex;gap:6px;}
.chatbot-phone-row select{border:1.5px solid var(--border-strong);border-radius:8px;padding:10px 6px;font-family:var(--sans);font-size:13px;background:var(--bg-alt);color:var(--text);flex-shrink:0;width:98px;}
.chatbot-phone-row select:focus{outline:none;border-color:var(--accent);}
.chatbot-phone-row input{flex:1;min-width:0;}
.field-error{border-color:var(--accent) !important;}
.chatbot-error{display:none;font-size:11.5px;color:var(--accent);margin-top:-4px;}
.chatbot-error.show{display:block;}
.chatbot-main{display:flex;flex-direction:column;}

/* split auth pages */
.split-page{display:grid;grid-template-columns:1fr 1fr;min-height:640px;}
.split-form-side{display:flex;align-items:center;justify-content:center;padding:70px 40px;}
/* Salon photo sits under the dark gradient, which stays strong enough to keep
   the white quote text readable (contrast checked at the lightest region). */
.split-content-side{
  background:
    linear-gradient(155deg,rgba(23,22,26,0.93) 0%,rgba(42,39,48,0.88) 100%),
    url("assets/auth-side.jpg") center/cover no-repeat;
  color:#fff;display:flex;flex-direction:column;justify-content:center;padding:70px 56px;position:relative;overflow:hidden;}
.split-content-side::before{content:"";position:absolute;top:-120px;right:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--accent-dim2,rgba(215,0,108,0.35)),transparent 70%);}
.split-content-side::after{content:"";position:absolute;bottom:-140px;left:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,0.25),transparent 70%);}
.split-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:22px;position:relative;}
.quote-wrap{position:relative;min-height:220px;}
.quote-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;flex-direction:column;justify-content:center;}
.quote-slide.active{opacity:1;position:relative;}
.quote-slide blockquote{font-size:26px;font-weight:600;line-height:1.35;letter-spacing:-0.01em;margin-bottom:22px;}
.quote-slide .qwho{font-size:14px;color:rgba(255,255,255,0.65);font-weight:600;}
.quote-dots{display:flex;gap:8px;position:relative;margin-top:32px;}
.quote-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:background .2s;}
.quote-dots span.active{background:var(--accent);width:22px;border-radius:4px;}
.welcome-stats{display:flex;gap:28px;margin-top:36px;position:relative;flex-wrap:wrap;}
.welcome-stats div{min-width:100px;}
.welcome-stats .num{font-family:var(--mono);font-size:22px;font-weight:700;color:#fff;}
.welcome-stats .lbl{font-size:12px;color:rgba(255,255,255,0.55);margin-top:4px;}
@media (max-width:860px){
  .split-page{grid-template-columns:1fr;}
  .split-content-side{order:-1;padding:48px 28px;}
  .quote-slide blockquote{font-size:21px;}
}

/* feature detail / sms templates */
.feature-card-link{display:block;cursor:pointer;transition:box-shadow .15s ease, transform .15s ease;}
.feature-card-link:hover{box-shadow:0 20px 40px -25px rgba(27,21,35,0.35);transform:translateY(-3px);}
.detail-hero{padding:70px 0 50px;border-bottom:1px solid var(--border);}
.detail-hero .back-link{font-size:13.5px;color:var(--text-dim);font-weight:600;margin-bottom:20px;display:inline-flex;align-items:center;gap:6px;}
.detail-hero .back-link:hover{color:var(--accent);}
.detail-hero h1{font-size:clamp(28px,4vw,42px);max-width:720px;}
.detail-hero p.lead{color:var(--text-dim);font-size:17px;max-width:640px;margin-top:16px;}
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px;}
.benefit-item{border:1px solid var(--border);border-radius:10px;padding:18px 20px;background:var(--surface);font-size:14.5px;color:var(--text-dim);display:flex;gap:10px;}
.benefit-item svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:2px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.related-card{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:#fff;}
.related-card .tag{font-family:var(--mono);font-size:11px;color:var(--text-faint);}
.related-card h4{font-size:14.5px;margin-top:8px;}

.occasion-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.occasion-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .15s ease, transform .15s ease;}
.occasion-card:hover{box-shadow:0 20px 40px -25px rgba(27,21,35,0.35);transform:translateY(-3px);}
.occasion-thumb{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(135deg,var(--accent-dim),var(--bg-alt));}
.occasion-card .occ-body{padding:16px 18px;}
.occasion-card h4{font-size:14.5px;margin-bottom:4px;}
.occasion-card p{font-size:12.5px;color:var(--text-faint);}
.type-toggle{display:flex;justify-content:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:5px;max-width:280px;margin:0 auto 44px;}
.type-toggle button{flex:1;border:none;background:transparent;padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;font-family:var(--sans);}
.type-toggle button.active{background:var(--text);color:#fff;}
.sms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.sms-card{border:1px solid var(--border);border-radius:var(--radius-sm,10px);padding:20px 22px;background:#fff;position:relative;}
.sms-card .sms-lbl{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.sms-card p{font-size:14px;color:var(--text);line-height:1.6;}
.sms-copy{margin-top:14px;border:1px solid var(--border-strong);background:var(--surface);border-radius:8px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;}
.sms-copy:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:860px){
  .benefit-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .occasion-grid{grid-template-columns:repeat(2,1fr);}
  .sms-grid{grid-template-columns:1fr;}
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:flex-start;}
.form-box{border:1px solid var(--border);border-radius:var(--radius);padding:32px;background:#fff;}
.form-box label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px;margin-top:16px;}
.form-box label:first-child{margin-top:0;}
.form-box input,.form-box select,.form-box textarea{width:100%;padding:11px 14px;border:1px solid var(--border-strong);border-radius:8px;font-family:var(--sans);font-size:14.5px;background:var(--bg-alt);color:var(--text);}
.form-box textarea{min-height:110px;resize:vertical;}
.form-box select{cursor:pointer;}
.form-box .btn{margin-top:22px;width:100%;}
/* Required-field validation feedback. :user-invalid only styles a field the
   visitor has actually interacted with, so the form is not red on first paint. */
.form-box .req{color:var(--accent);}
.form-box input:user-invalid,.form-box select:user-invalid,.form-box textarea:user-invalid{border-color:var(--accent);background:var(--accent-dim);}
.form-box .hint{display:block;font-size:11.5px;color:var(--text-faint);margin-top:5px;}

/* ---- Password field with a show/hide toggle ------------------------------ */
.pw-field{position:relative;}
.pw-field input{padding-right:42px;}
.pw-toggle{position:absolute;top:0;right:0;bottom:0;width:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--text-dim);}
.pw-toggle:hover{color:var(--text);}
.pw-toggle svg{width:19px;height:19px;}
.pw-toggle .pw-eye-off{display:none;}
.pw-toggle[aria-pressed="true"] .pw-eye-on{display:none;}
.pw-toggle[aria-pressed="true"] .pw-eye-off{display:block;}

/* ---- International phone field ------------------------------------------ */
.phone-field{display:flex;gap:8px;align-items:stretch;}
.phone-field select.phone-cc{
  /* min-width:0 is essential: the longest option ("United Kingdom +44") gives
     the select a ~181px min-content width, and a flex item defaults to
     min-width:auto - which pushed the whole form past a 320px viewport. */
  flex:0 1 auto;width:168px;min-width:0;max-width:100%;
  padding:11px 8px;border:1px solid var(--border-strong);border-radius:8px;
  text-overflow:ellipsis;
  font-family:var(--sans);font-size:14px;background:var(--bg-alt);color:var(--text);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2368656d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px;padding-right:24px;
}
.phone-field input.phone-num{flex:1 1 auto;width:auto;min-width:0;}
.phone-field select.phone-cc:focus{border-color:var(--text);outline:none;}
@media (max-width:560px){
  .phone-field{flex-wrap:wrap;}
  .phone-field select.phone-cc{width:100%;}
  .phone-field .cc-picker{width:100%;}
  .phone-field input.phone-num{width:100%;flex:1 1 100%;}
}

/* ---- Country picker: a shorter open list ---------------------------------
   A native <select> draws its option list as an operating-system popup, and
   its height is not reachable from CSS - with 34 countries that list opened
   almost as tall as the window. On pointer devices footer.php puts this shell
   in front of the real <select>, which stays in the DOM and stays the value
   everything downstream reads. Touch devices keep the native picker, which is
   already compact, and never see these rules. */
.cc-picker{position:relative;flex:0 1 auto;width:168px;min-width:0;max-width:100%;}
/* The real select is kept for value, validation and submit - just not seen. */
.cc-picker select.phone-cc{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;}
.cc-toggle{
  display:block;width:100%;height:100%;min-height:41px;margin:0;text-align:left;
  appearance:none;-webkit-appearance:none;
  padding:11px 24px 11px 8px;border:1px solid var(--border-strong);border-radius:8px;
  font-family:var(--sans);font-size:14px;line-height:1.2;background-color:var(--bg-alt);color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2368656d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px;
}
.cc-toggle:hover{border-color:var(--text);}
.cc-toggle:focus-visible{border-color:var(--text);outline:2px solid var(--accent);outline-offset:1px;}
.cc-list{
  position:absolute;z-index:60;top:calc(100% + 4px);left:0;
  min-width:100%;width:max-content;max-width:min(300px,calc(100vw - 32px));
  /* The whole point of this component: about eight rows and then a scroll,
     instead of all 34 countries at once. */
  max-height:272px;overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 24px 48px -20px rgba(20,20,25,0.32);padding:4px;
}
.cc-list[hidden]{display:none;}
.cc-option{padding:8px 10px;border-radius:6px;font-size:14px;line-height:1.2;color:var(--text);cursor:pointer;white-space:nowrap;}
.cc-option.is-active{background:var(--surface);}
.cc-option.is-on{font-weight:600;}
.cc-option.is-on::after{content:"\2713";float:right;margin-left:14px;color:var(--accent);}

/* ---- Language picker -----------------------------------------------------
   Sits last in .nav-links, so it follows Contact. Google's own controls are
   hidden below and this drives them - see footer.php. */
.lang-picker{position:relative;display:flex;align-items:center;}
.lang-picker[hidden]{display:none;}
.lang-toggle{
  display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;
  appearance:none;-webkit-appearance:none;background:none;border:0;
  font-family:var(--sans);font-size:14.5px;line-height:1;color:var(--text-dim);cursor:pointer;
}
.lang-toggle:hover{color:var(--text);}
.lang-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.lang-globe{flex-shrink:0;}
.lang-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;}
.lang-pop{
  position:absolute;z-index:60;top:calc(100% + 12px);right:0;width:268px;
  background:#fff;border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:0 30px 60px -24px rgba(20,20,25,0.34);padding:8px;
}
.lang-pop[hidden]{display:none;}
.lang-search{
  width:100%;padding:8px 10px;margin-bottom:6px;
  border:1px solid var(--border-strong);border-radius:8px;
  font-family:var(--sans);font-size:13.5px;background:var(--bg-alt);color:var(--text);
}
.lang-search:focus{outline:none;border-color:var(--text);}
/* Roughly nine rows, then scroll - the full list is about ninety languages. */
.lang-list{max-height:320px;overflow-y:auto;overscroll-behavior:contain;}
.lang-head{
  margin:10px 0 3px;padding:0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint);
}
.lang-head[hidden]{display:none;}
.lang-head:first-child{margin-top:2px;}
.lang-option{
  display:flex;align-items:baseline;gap:8px;width:100%;margin:0;
  padding:7px 8px;border:0;border-radius:6px;background:none;
  font-family:var(--sans);font-size:14px;line-height:1.3;color:var(--text);
  text-align:left;cursor:pointer;
}
.lang-option[hidden]{display:none;}
.lang-option:hover,.lang-option:focus-visible{background:var(--surface);outline:none;}
.lang-option.is-on{font-weight:600;}
.lang-option.is-on::after{content:"\2713";margin-left:auto;color:var(--accent);}
.lang-native{display:inline-block;}
.lang-en{font-size:12px;color:var(--text-faint);}
.lang-empty{margin:10px 8px;font-size:13px;color:var(--text-faint);}
/* In the hamburger menu the picker is a full-width row like the links above it. */
.lang-picker-mobile{display:block;border-top:1px solid var(--border);padding-top:10px;margin-top:4px;}
.lang-picker-mobile .lang-toggle{padding:10px 4px;font-size:15px;}
.lang-picker-mobile .lang-pop{right:auto;left:0;width:min(268px,calc(100vw - 48px));}

/* Google's own chrome: the "Translated into ..." bar, the hover tooltip, the
   widget itself and the 40px it pushes the body down by. The nav picker
   replaces all of it.
   iframe.skiptranslate is the one that matters and is matched by class rather
   than by name: Google renames that bar (it is VIpgJd-ZVi9od-ORHb-OEVmcd today,
   goog-te-banner-frame before), but every version carries .skiptranslate. It is
   position:fixed, so left alone it sits on top of the sticky header. */
#google_translate_element,iframe.skiptranslate,
.goog-te-banner-frame,.goog-te-balloon-frame,#goog-gt-tt,
.goog-tooltip,.goog-te-spinner-pos{display:none!important;}
body{top:0!important;}
.goog-text-highlight{background:none!important;box-shadow:none!important;}

/* ---- About: team grid ---------------------------------------------------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.team-card{border:1px solid var(--border);border-radius:12px;background:#fff;padding:26px 24px;display:flex;flex-direction:column;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.team-card:hover{border-color:var(--border-strong);box-shadow:0 24px 48px -32px rgba(27,21,35,0.32);transform:translateY(-2px);}
.team-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:16px;flex-shrink:0;background:var(--surface);}
.team-name{font-size:16.5px;font-weight:650;letter-spacing:-0.01em;color:var(--text);margin-bottom:5px;}
.team-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.team-bio{font-size:14px;line-height:1.65;color:var(--text-dim);margin:0;}
@media (max-width:1024px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .team-grid{grid-template-columns:1fr;gap:16px;}
  .team-card{padding:22px 20px;}
  .team-avatar{width:56px;height:56px;margin-bottom:14px;}
}

/* Fallback shown when a mailto: link has no working mail client to hand off to */
.mailfb{position:fixed;inset:0;z-index:120;background:rgba(23,22,26,0.55);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px);}
.mailfb[hidden]{display:none;}
.mailfb-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px;max-width:460px;width:100%;position:relative;box-shadow:0 40px 90px -40px rgba(20,20,25,0.45);}
.mailfb-card h4{font-size:18px;margin-bottom:8px;}
.mailfb-card > p{color:var(--text-dim);font-size:14.5px;margin-bottom:18px;}
.mailfb-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:22px;line-height:1;color:var(--text-faint);cursor:pointer;padding:4px 8px;border-radius:6px;}
.mailfb-x:hover{color:var(--text);background:var(--surface);}
.mailfb-to{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--border);background:var(--bg-alt);border-radius:8px;padding:11px 12px;font-family:var(--mono);font-size:12.5px;color:var(--text);margin-bottom:18px;word-break:break-all;}
.mailfb-copy{flex-shrink:0;border:1px solid var(--border-strong);background:#fff;border-radius:6px;padding:5px 12px;font-size:12px;font-family:var(--sans);font-weight:600;cursor:pointer;color:var(--text);}
.mailfb-copy:hover{border-color:var(--text);}
.mailfb-actions{display:flex;gap:10px;flex-wrap:wrap;}
.mailfb-actions .btn{flex:1 1 auto;}

/* Contact: details column beside the form */
.contact-details h4{font-size:14px;margin-bottom:6px;letter-spacing:-0.01em;}
.contact-details .cd-block{padding:18px 0;border-top:1px solid var(--border);}
.contact-details .cd-block:first-child{border-top:none;padding-top:0;}
.contact-details p{color:var(--text-dim);font-size:15px;line-height:1.65;}
.contact-details a{color:var(--text-dim);border-bottom:1px solid var(--border-strong);}
.contact-details a:hover{color:var(--accent);border-color:var(--accent);}
.info-list{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:24px;}
.info-list li{border-top:1px solid var(--border);padding-top:14px;font-size:14.5px;color:var(--text-dim);}
.info-list li:first-child{border-top:none;padding-top:0;}
.info-list b{color:var(--text);display:block;margin-bottom:4px;font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;}

.job-list{display:flex;flex-direction:column;gap:14px;}
.job{border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;background:#fff;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.job h4{font-size:16px;margin-bottom:6px;}
.job .meta{font-size:13px;color:var(--text-dim);font-family:var(--mono);}
.job .btn{flex-shrink:0;margin-left:auto;}
.job:hover{border-color:var(--border-strong);}
/* Breathing room between the roles list and the line that follows it. */
.entry-content > .job-list + p{margin-top:22px;}
/* The roles list breaks out of the 760px reading measure to the full .wrap grid
   so the CTA sits against the same right edge as the header and footer. */
.entry-content > .job-list{max-width:none;margin-right:max(24px, calc((100% - var(--container)) / 2 + 24px));}
@media (max-width:560px){
  .job{flex-direction:column;align-items:flex-start;}
  .job .btn{margin-left:0;width:100%;}
}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post-card{display:block;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;color:inherit;text-decoration:none;transition:box-shadow .15s ease, transform .15s ease;}
.post-card:hover{box-shadow:0 20px 40px -25px rgba(27,21,35,0.35);transform:translateY(-3px);}
.post-thumb{aspect-ratio:16/10;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:30px;border-bottom:1px solid var(--border);overflow:hidden;}
/* Featured images must fill the 16/10 frame - without this the centring flexbox
   above leaves the image floating at its natural size. */
.post-thumb img{width:100%;height:100%;object-fit:cover;}
.post-card:hover .post-thumb img{transform:scale(1.03);}
.post-thumb img{transition:transform .35s ease;}
.post-card .post-body{padding:20px;}
/* Article hero image - matches the 720px measure of the body copy below it. */
.post-hero-media{padding:0 0 8px;}
.post-hero-figure{max-width:720px;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface);}
.post-hero-figure img{width:100%;height:100%;object-fit:cover;}

/* Branded cover art carries its headline in the top-left corner, and both boxes
   above crop to a fixed ratio - so centring the crop trims exactly the words the
   image exists to show (12% off the sides of one cover, 16% off the top and
   bottom of the other in the hero). Anchoring top-left keeps the wording whole
   and pushes the trim onto the empty background instead.

   Scoped by the "-cover" filename so the six older posts, whose thumbnails are
   already exactly 16/10 and lose nothing to cropping, keep their centred
   framing. */
.post-thumb img[src*="-cover"],
.post-hero-figure img[src*="-cover"]{object-position:left top;}

.post-card .tag{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;}
.post-card h4{font-size:16px;margin:10px 0 8px;}
.post-card p{font-size:13.5px;color:var(--text-dim);}

/* --- Article body ------------------------------------------------------------
   single.php renders posts into .single-content, which carried no typography of
   its own - pages get theirs from .entry-content, and until now every post was
   plain paragraphs so it never showed. These mirror the .entry-content values so
   headings, lists and links inside an article read exactly like the rest of the
   site. Everything is scoped to .single-content, so nothing outside a post
   is affected. */
.single-content h2{font-size:clamp(22px,3vw,30px);margin:46px 0 16px;}
.single-content h3{font-size:20px;margin:38px 0 14px;}
.single-content > *:first-child{margin-top:0;}
.single-content p{color:var(--text-dim);font-size:16px;line-height:1.75;margin-bottom:20px;}
.single-content ul,.single-content ol{margin:0 0 22px;padding-left:22px;}
.single-content li{color:var(--text-dim);font-size:15.5px;line-height:1.7;margin-bottom:8px;}
.single-content li::marker{color:var(--accent);}
.single-content strong{color:var(--text);font-weight:650;}
.single-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.single-content a:hover{color:var(--text);}
.single-content figure{margin:30px 0;}
.single-content figure img{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--border);}

/* Pull-out answer box at the top of an article */
.post-callout{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--surface);padding:22px 24px;margin:0 0 32px;}
.post-callout .pc-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.post-callout .pc-q{color:var(--text);font-weight:650;font-size:16.5px;margin-bottom:10px;}
.post-callout p{margin-bottom:0;}
.post-callout .pc-stat{font-size:14.5px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}

/* Customer anecdote box. Same shape as .post-callout so the two read as one
   family, but in the secondary accent so a story is not mistaken for the
   quick-answer summary at the top of an article. */
.post-story{border:1px solid var(--border);border-left:3px solid var(--accent-2);border-radius:var(--radius);background:var(--surface);padding:20px 22px;margin:6px 0 30px;}
.post-story .ps-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);margin-bottom:9px;}
.post-story p{margin-bottom:0;font-size:15.5px;}

/* Contact form result line. Empty by default so it takes up no room until
   there is actually something to report. */
.form-status{margin:4px 0 0;font-size:13.5px;line-height:1.5;}
.form-status:empty{display:none;}
.form-status.is-ok{color:#1a7f37;font-weight:600;}
.form-status.is-error{color:#b32d2e;font-weight:600;}

/* FAQ accordion - <details> so it works with no JavaScript */
.post-faq{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);margin-bottom:10px;overflow:hidden;}
.post-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;cursor:pointer;padding:15px 18px;font-weight:600;font-size:15.5px;color:var(--text);list-style:none;}
.post-faq summary::-webkit-details-marker{display:none;}
.post-faq summary::after{content:"+";font-family:var(--mono);font-size:17px;line-height:1.3;color:var(--accent);flex-shrink:0;}
.post-faq[open] summary::after{content:"\2212";}
.post-faq summary:hover{background:var(--surface);}
.post-faq[open] summary{border-bottom:1px solid var(--border);}
.post-faq .faq-a{margin:0;padding:15px 18px;font-size:15px;}

@media (max-width:860px){
  .nav-links{display:none;}
  .nav-cta .login,.nav-cta .btn-primary{display:none;}
  .menu-btn{display:inline-flex;}
  .feature-strip{grid-template-columns:repeat(2,1fr);}
  .grid-12{grid-template-columns:1fr;}
  .spotlight,.spotlight.reverse{grid-template-columns:1fr;direction:ltr;}
  .col3{grid-template-columns:1fr;}
  .dashboard{grid-template-columns:1fr;}
  .integrations{grid-template-columns:1fr;}
  .diff{grid-template-columns:1fr;}
  .test-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .mock-main{grid-template-columns:1fr;}
  .mock-screen{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .advantages-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .post-grid{grid-template-columns:1fr;}
  .chatbot{bottom:16px;right:16px;}
  .chatbot-panel{width:calc(100vw - 32px);}
}


/* ---------------------------------------------------------------------------
   Accessibility: the testimonial and logo marquees loop forever. Anyone who has
   asked their OS to reduce motion gets a static, readable version instead.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Stop the marquees WITHOUT turning them into horizontal scrollers. The
     tracks are 9,000px+ wide, so overflow-x:auto here created a real sideways
     scroll area. They wrap onto centred rows instead, and the duplicated half
     - which exists only to make the loop seamless - is hidden. */
  /* The walls become block containers: as flex items the tracks kept their
     4,560px max-content width (flex-shrink:0) and never wrapped. */
  .logo-wall,.test-wall{display:block;overflow:hidden;mask-image:none;-webkit-mask-image:none;}
  .logo-track,.test-track{
    transform:none !important;
    flex-wrap:wrap;
    justify-content:center;
    width:auto;
    flex-shrink:1;
    row-gap:24px;
  }
  .logo-track > [aria-hidden="true"],
  .test-track > [aria-hidden="true"]{display:none;}
}

/* Keyboard focus was relying on the browser default, which the dark buttons
   swallowed. A visible ring on every interactive element instead. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.form-box input:focus,.form-box textarea:focus{border-color:var(--text);outline-offset:0;}


/* ---------------------------------------------------------------------------
   Vertical rhythm across breakpoints.

   The desktop scale (96px sections, 110px CTA, 100px hero) was previously
   applied at every width, which left roughly a third of a phone screen empty
   between each band. These steps scale it down with the viewport.
   --------------------------------------------------------------------------- */

/* Stats: 5 columns only survives on wide screens - below that the mono values
   are too cramped and wrap. Dividers are recomputed per row so no item that
   starts a row keeps a stray left border. */
@media (max-width:1080px){
  /* Subgrid is switched off once the row wraps. It only exists to line the
     values and labels up across ONE row - and because a subgrid inherits the
     parent's row-gap, keeping it here opened a 30px hole between every number
     and its own label. */
  .stats-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:none;row-gap:34px;}
  .stats-grid div{display:block;grid-row:auto;border-left:1px solid var(--border);}
  .stats-grid div:nth-child(3n+1){border-left:none;}
}
@media (max-width:620px){
  .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:30px;}
  /* :nth-child(n) matches the specificity of the 3-column rule above, which
     would otherwise keep winning and drop the divider on the 4th item. */
  .stats-grid div:nth-child(n){border-left:1px solid var(--border);}
  .stats-grid div:nth-child(odd){border-left:none;}
}

@media (max-width:1024px){
  section{padding:44px 0;}
  .hero{padding:44px 0 20px;}
  .video-section{padding:0 0 44px;}
  .stats{padding:28px 0;}
  .cta-final{padding:52px 0;}
  .page-hero{padding:40px 0 30px;}
  .detail-hero{padding:36px 0 28px;}
}

@media (max-width:860px){
  section{padding:40px 0;}
  .hero{padding:36px 0 16px;}
  .video-section{padding:0 0 38px;}
  .stats{padding:26px 0;}
  .cta-final{padding:44px 0;}
  .page-hero{padding:34px 0 26px;}
  .detail-hero{padding:32px 0 24px;}

  .entry-content > *:not(section):not(script):first-child,
  .entry-content > .wp-block-heading:first-child,
  .entry-content > h1:first-child{margin-top:48px;}
  .entry-content > *:not(section):not(script):last-child{margin-bottom:48px;}

  /* The logo-wall band sets padding inline in the page content, so no normal
     rule can reach it; left alone it becomes the TALLEST band on a phone. */
  .entry-content > section[style*="padding:64px"]{padding-top:52px !important;padding-bottom:52px !important;}

  .hero-actions{margin-bottom:48px;}
  .mock{margin-top:44px;}
  .section-head{margin-bottom:26px;}
  footer{padding:52px 0 28px;}
  .footer-grid{gap:32px;margin-bottom:40px;}
}

@media (max-width:560px){
  section{padding:34px 0;}
  .hero{padding:36px 0 28px;}
  .hero h1{margin:16px auto 12px;}
  .hero p.tagline{margin:0 auto 12px;}
  .hero p.sub{margin:0 auto 24px;}
  .hero p.hero-caption{margin:0 auto 36px;}
  .logo-wall-head{margin:0 auto 24px;}
  .video-section{padding:0 0 32px;}
  .cta-final{padding:38px 0;}
  .page-hero{padding:30px 0 22px;}
  .entry-content > section[style*="padding:64px"]{padding-top:44px !important;padding-bottom:44px !important;}

  .entry-content > *:not(section):not(script):first-child,
  .entry-content > .wp-block-heading:first-child,
  .entry-content > h1:first-child{margin-top:40px;}
  .entry-content > *:not(section):not(script):last-child{margin-bottom:40px;}

  /* Stacked CTAs were centred at their natural widths, giving a ragged edge. */
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px;}
  .hero-actions .btn{width:100%;}

  /* The pill wraps to two lines at this width; keep the dot on the first line
     instead of floating against the middle of the block. */
  .eyebrow{align-items:flex-start;text-align:left;font-size:11px;letter-spacing:.04em;}
  .eyebrow::before{flex-shrink:0;margin-top:6px;}

  /* Footer link rows were 17px tall - below a comfortable tap target. */
  .footer-grid ul{gap:4px;}
  .footer-grid a{display:inline-block;padding:7px 0;}
  .footer-social{gap:18px;}
  .footer-social a{padding:6px 0;}
  .detail-hero .back-link{padding:6px 0;margin-bottom:14px;}
}


/* ---- content area: bare WordPress blocks (Heading/Paragraph/List) ----
   The container itself is full-width, so raw <section> blocks pasted into the
   page bleed edge to edge on their own. Text blocks are pulled back to a 760px
   measure whose LEFT EDGE lines up with the .wrap grid the header, footer and
   every section use - so body copy sits in the same column as the logo, not
   floating in the middle of the viewport. */
.entry-content{max-width:none;margin:0;padding:0;}

.entry-content > *:not(section):not(script){
  max-width:760px;
  margin-left:max(24px, calc((100% - var(--container)) / 2 + 24px));
  margin-right:24px;
}
/* Top/bottom breathing room lives on the first and last text block, so pages
   that open or close with a full-bleed section stay flush to header/footer. */
.entry-content > *:not(section):not(script):first-child{margin-top:64px;}
.entry-content > *:not(section):not(script):last-child{margin-bottom:64px;}

.entry-content > .wp-block-heading,
.entry-content > h1, .entry-content > h2, .entry-content > h3, .entry-content > h4{
  margin-top:48px;margin-bottom:16px;font-weight:650;letter-spacing:-0.02em;color:var(--text);
}
.entry-content > .wp-block-heading:first-child,
.entry-content > h1:first-child{margin-top:64px;}
.entry-content > h1{font-size:clamp(28px,4vw,42px);}
.entry-content > h2{font-size:clamp(22px,3vw,30px);}
.entry-content > h3{font-size:20px;}
.entry-content > h4{font-size:17px;}
.entry-content > p{color:var(--text-dim);font-size:16px;line-height:1.75;margin-bottom:20px;}
.entry-content > ul, .entry-content > ol{margin-top:0;margin-bottom:20px;padding-left:24px;}
.entry-content > ul li, .entry-content > ol li{color:var(--text-dim);font-size:15.5px;line-height:1.7;margin-bottom:8px;}
.entry-content > figure, .entry-content > .wp-block-image{margin-top:24px;margin-bottom:24px;}


/* ===========================================================================
   DEVICE COVERAGE PASS
   Findings from sweeping 13 pages across 13 viewports (320px -> 2560px).
   Each block below fixes something that measurably broke, rather than
   restating rules that already work.
   =========================================================================== */

/* --- Tablet tier (561-860px) -------------------------------------------------
   Below 860 every grid collapsed straight to a single column, which leaves a
   768px iPad rendering 12 feature cells as one very long list. Two columns
   suit this width far better. */
@media (min-width:561px) and (max-width:860px){
  .grid-12{grid-template-columns:repeat(2,1fr);}
  .col3{grid-template-columns:repeat(2,1fr);}
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .advantages-grid{grid-template-columns:repeat(2,1fr);}
  .integrations{grid-template-columns:repeat(2,1fr);}
  .test-grid{grid-template-columns:repeat(2,1fr);}
  .feature-strip{grid-template-columns:repeat(2,1fr);}
}

/* --- Touch targets -----------------------------------------------------------
   The sweep flagged the hamburger at 35px and footer/back links at 21-22px on
   tablets, where the mobile padding rule (<=560px) never applied. */
@media (max-width:860px){
  .menu-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;}
  .footer-grid ul{gap:4px;}
  .footer-grid a{display:inline-block;padding:8px 0;}
  .footer-social{gap:18px;}
  .footer-social a{display:inline-block;padding:8px 0;}
  .detail-hero .back-link{padding:8px 0;margin-bottom:12px;}
  .nav-cta a.login{padding:8px 0;}
  header .logo{padding:4px 0;}
  .quote-dots span{width:10px;height:10px;}
  .quote-dots span.active{width:26px;}
}

/* --- Small-label legibility --------------------------------------------------
   A handful of mono/uppercase micro-labels sat at 11px, which is hard work on a
   phone. 12px keeps the same look and reads properly. */
@media (max-width:860px){
  .eyebrow{font-size:12px;}
  .grid-12 .cell .tag,
  .post-card .tag,
  .team-role,
  .price-plan-tag,
  .price-badge,
  .form-box .hint{font-size:12px;}
}

/* --- Narrow phones (<=430px) -------------------------------------------------
   Two-up grids get cramped once the viewport drops below ~430px. */
@media (max-width:430px){
  .feature-strip{grid-template-columns:1fr;}
  .stats-grid{row-gap:26px;}
  .wrap{padding:0 18px;}
  .form-box{padding:24px 20px;}
  .split-form-side{padding:44px 20px;}
  .split-content-side{padding:40px 20px;}
  .mailfb-card{padding:22px 18px;}
  .mailfb-actions{flex-direction:column;}
  .mailfb-actions .btn{width:100%;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* --- Very small / older phones (<=360px) ------------------------------------ */
@media (max-width:360px){
  .wrap{padding:0 16px;}
  .split-form-side{padding:36px 16px;}
  .form-box{padding:20px 16px;}
  h2{font-size:clamp(22px,6.4vw,28px);}
  .chatbot-panel{width:calc(100vw - 24px);}
}

/* --- Large monitors ----------------------------------------------------------
   The container deliberately stays at its original 1180px on every screen size.
   Letting it grow on big monitors made the site read as stretched, so the
   design keeps its intended measure and simply centres in the extra space. */

/* --- Media elements ----------------------------------------------------------
   No overflow-x trap here on purpose: a sweep of every page from 320px to
   2560px shows nothing exceeds the viewport, so clipping the body would only
   hide future mistakes rather than prevent them. */
img,video,svg,iframe,table{max-width:100%;}


/* ===========================================================================
   MOBILE FIXES  (measured at 390px on a real touch viewport)
   =========================================================================== */

/* --- The dashboard mock ------------------------------------------------------
   On a phone this decorative wireframe was 649px tall - three quarters of a
   screen of grey placeholder bars. The fake sidebar and chart row carry no
   meaning at this size, so only the three figures survive, side by side. */
@media (max-width:700px){
  .mock{margin-top:36px;padding:6px;border-radius:12px;}
  .mock-bar{padding:6px 6px 2px;}
  .mock-screen{padding:14px;min-height:0;grid-template-columns:1fr;gap:0;}
  .mock-screen.has-shot{padding:0;}
  .mock-side,.mock-row{display:none;}
  .mock-main{grid-template-columns:repeat(3,1fr);gap:8px;}
  .mock-card{padding:12px 8px;text-align:center;}
  .mock-card .num{font-size:16px;margin-bottom:2px;}
  .mock-card .lbl{font-size:10.5px;line-height:1.3;}
}

/* --- Stats row ---------------------------------------------------------------
   "Multi-Branch" is far longer than the other four values; at the 2-column
   phone layout it wrapped and was left stranded alone in the final row. */
@media (max-width:620px){
  .stats-grid .num{font-size:17px;letter-spacing:-0.02em;}
  .stats-grid .lbl{font-size:12px;}
  .stats-grid div{padding:0 8px;}
  /* an odd last item spans the full width instead of sitting orphaned */
  .stats-grid div:last-child:nth-child(odd){grid-column:1 / -1;border-left:none;}
}

/* --- Video ------------------------------------------------------------------
   The browser's control bar is a fixed height, so on a short mobile video it
   covered a larger share of the frame - and the poster's caption with it. */
@media (max-width:700px){
  .video-caption{font-size:13.5px;margin-top:16px;}
}


/* ===========================================================================
   NO SIDEWAYS MOTION OR OVERFLOW ON PHONES (client-logo belt)
   Kept scrolling at every OTHER width already - each item is a small
   fixed-size logo with no cut-off risk - so it keeps scrolling on phones
   too, just resized like the existing 860px tablet step already does. It
   still respects prefers-reduced-motion (see that block above), and the
   `html,body{overflow-x:clip}` rule below keeps it from ever creating a real
   sideways scrollbar even here.

   The testimonial belt used to be static here too (.test-card's 340px+ was
   wider than the phone itself), but on request it now scrolls on phones as
   well - see the width overrides on .test-wall-long/.test-wall-short further
   down, which give it a fixed card width narrow enough to fit instead of
   forcing it into a wrapped static list.
   =========================================================================== */
@media (max-width:700px){
  .logo-wall{gap:20px;}
  .logo-track{gap:0;}
  .logo-track > *{margin-right:18px;}
  .logo-item{width:120px;height:60px;}
}

/* Last-resort containment. Everything above fixes the causes; this makes a
   sideways scroll structurally impossible if any future content misbehaves.
   `clip` (not `hidden`) because clip does not create a scroll container, so
   the sticky header keeps working. */
html,body{overflow-x:clip;max-width:100%;}

/* Slightly smaller logos and a tighter margin on very small phones - same
   scrolling belt as above, just more of it fits in view at once. */
@media (max-width:470px){
  .logo-track > *{margin-right:14px;}
  .logo-item{width:98px;height:50px;}
}


/* --- Second testimonial row, travelling the other way -----------------------
   Same keyframe as the first row, played in reverse, so the two belts move in
   opposite directions. Both still pause on hover via the existing rule. */
.test-wall-2{margin-top:20px;}
.test-track.reverse{animation-direction:reverse;}

@media (max-width:700px){
  /* Matching the first row's phone treatment: static, stacked, full width, and
     only the four unique quotes - the repeats exist purely for the loop. */
  .test-wall-2{margin-top:14px;}
  /* superseded: see the :nth-child(n+6) rule further down */
}


/* --- Testimonial rows sized to their content --------------------------------
   Row 1 carries the long quotes, row 2 the short ones. Grouping them this way
   means a card is never stretched to match a neighbour three times its length,
   which is what left so much dead space before. Wider cards on the long row
   keep those quotes from becoming tall columns of text. */
.test-wall-long .test-card{min-width:400px;max-width:400px;}
.test-wall-short .test-card{min-width:310px;max-width:310px;}
.test-wall-short{margin-top:20px;}

@media (max-width:900px){
  .test-wall-long .test-card{min-width:360px;max-width:360px;}
}

@media (max-width:700px){
  .test-wall-short{margin-top:14px;}
  /* Same scrolling belt as every larger screen, just a narrower fixed card -
     min() caps it against the viewport itself so a phone under ~350px never
     gets a card wider than its own screen. Needs to stay a real width (not
     100%) for the belt to keep sliding; all 20 cards (5 unique x4, for the
     loop) stay visible here too, same as every other width. */
  .test-wall-long .test-card{min-width:min(300px,86vw);max-width:min(300px,86vw);}
  .test-wall-short .test-card{min-width:min(250px,78vw);max-width:min(250px,78vw);}
}


/* --- Featured testimonial ---------------------------------------------------
   The longest quote sits on its own beneath the two rows. In a marquee it was
   setting the height for every card beside it; here it has the room it needs
   and the rows size to their own content. */
.test-feature{
  max-width:780px;margin:34px auto 0;
  border:1px solid var(--border);border-radius:14px;background:#fff;
  padding:34px 38px;position:relative;
  box-shadow:0 24px 60px -40px rgba(27,21,35,0.30);
}
.test-feature::before{
  content:"\201C";position:absolute;top:2px;left:26px;
  font-family:Georgia,"Times New Roman",serif;font-size:78px;line-height:1;
  color:var(--accent);opacity:.16;pointer-events:none;
}
.test-feature p{
  position:relative;font-size:16.5px;line-height:1.75;color:var(--text-dim);margin:0;
}
.test-feature .test-who{
  display:flex;align-items:center;gap:12px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--border);
}
@media (max-width:700px){
  .test-feature{margin-top:22px;padding:26px 22px;}
  .test-feature p{font-size:15px;}
  .test-feature::before{font-size:60px;left:16px;}
}


/* ===========================================================================
   1. NAVBAR SIGN UP BUTTON
   Pink by default, inverting to a white face with pink type when pressed - and
   it stays inverted while you are actually on the signup page. Scoped to
   .nav-cta so every other .btn-primary on the site keeps its dark treatment.
   =========================================================================== */
.nav-cta .btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.nav-cta .btn-primary:hover{
  background:#bd005f;          /* a shade deeper, still clearly pink */
  border-color:#bd005f;
  color:#fff;
}
.nav-cta .btn-primary:active,
.nav-cta .btn-primary[aria-current="page"]{
  background:#fff;
  border-color:var(--accent);
  color:var(--accent);
  transform:none;
}
.nav-cta .btn-primary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ===========================================================================
   3. TESTIMONIAL AVATARS matched to the About-page team avatars (64px / 56px)
   The initials scale with the circle so they stay optically centred.
   =========================================================================== */
.test-avatar{
  width:64px;height:64px;
  font-size:22px;
  letter-spacing:.01em;
}
@media (max-width:620px){
  .test-avatar{width:56px;height:56px;font-size:19px;}
}
/* Four of the ten authors have supplied a real photograph. The circle, its two
   sizes and every other author's initials are unchanged - the photo just fills
   the same circle. The pink gradient stays underneath as the backstop if an
   image ever fails to load. */
.test-avatar.has-photo{padding:0;overflow:hidden;}
.test-avatar.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
/* Two authors sent a salon logo instead of a portrait. A logo is not a face:
   cropped into the round portrait frame the Toni & Guy wordmark - 4.8:1 - would
   render 64x13px and be unreadable, so logos get a tile of the same height that
   is free to take the width the mark needs. The pink gradient goes with it,
   since these are black ink on white. Portraits and initials are untouched. */
.test-avatar.has-logo{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  width:auto;min-width:64px;max-width:132px;padding:5px 8px;overflow:hidden;
}
.test-avatar.has-logo img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;}
@media (max-width:620px){
  /* matches the smaller avatar on phones */
  .test-avatar.has-logo{min-width:56px;max-width:118px;}
}


/* --- Lead form shown inline, mid-conversation --------------------------------
   Once the visitor has had a few exchanges the capture form drops into the
   thread itself rather than blocking the chat up front. Styled as a card so it
   reads as part of the conversation. */
.chatbot-lead.inline{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  padding:14px;
  margin-top:4px;
  gap:6px;
}
.chatbot-lead.inline input{background:#fff;}
/* the composer is locked until the details are given */
.chatbot-input.is-locked input,
.chatbot-input.is-locked button{opacity:.5;cursor:not-allowed;}
.chatbot-quick.is-locked button{opacity:.45;cursor:not-allowed;}
/* The greeting copy belongs to the up-front version of this form; inline it is
   introduced by the bot message just above it, so it would read twice. */
.chatbot-lead.inline > p:nth-of-type(1),
.chatbot-lead.inline > p:nth-of-type(2){display:none;}


/* --- App store buttons (BookingZone spotlight) -------------------------------
   Paired dark buttons in the shape of the familiar store badges. Icons are
   inline SVG so they inherit the button colour and cost no extra request. */
.app-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
.app-btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 18px;border-radius:10px;
  background:var(--text);color:#fff;border:1px solid var(--text);
  text-decoration:none;transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.app-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px);}
.app-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.app-btn svg{width:21px;height:21px;flex-shrink:0;fill:currentColor;}
.app-btn .lbl{display:flex;flex-direction:column;line-height:1.15;text-align:left;}
.app-btn .lbl small{font-size:10px;opacity:.72;font-weight:500;letter-spacing:.03em;}
.app-btn .lbl strong{font-size:14.5px;font-weight:650;letter-spacing:-0.01em;}
@media (max-width:430px){
  .app-btns{gap:10px;}
  .app-btn{flex:1 1 100%;justify-content:center;}
}


/* --- Sell With Boost listing badge ------------------------------------------
   This badge SVG already draws its own white plate, radius and border, so the
   tile wrapper drops ours - otherwise it renders as a border inside a border.
   At 36px tall it is 144px wide, so it lines up with the 150px tiles. */
/* This badge is a third-party SVG (sellwithboost.com) that already draws its
   own white background, border and rounded corners at a fixed 4:1 shape - so
   it gets no card of ours (that would double the frame). To read as "the same
   size" as the other six it's scaled to the same overall height as their box
   instead of the same inner logo cap, since its border is already part of the
   image, not something sitting inside a box like the plain wordmarks. */
.badge-row .badge-boost{border:0;background:none;padding:0;width:auto;height:48px;}
.badge-row .badge-boost a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.badge-row .badge-boost img{height:48px;width:auto;max-width:100%;display:block;}
@media (max-width:560px){
  .badge-row .badge-boost{width:auto;height:36px;}
  .badge-row .badge-boost img{height:36px;}
}


/* ===========================================================================
   GROWTH ANALYZER  (/growth-analyzer/)
   Uses the site's own accent (pink) and its own icon language - a bare
   coloured glyph in a span, no background box, the same pattern .ficon
   already uses in the hero feature strip - rather than anything new. All
   classes are ga-prefixed so nothing here can collide with the rest of the
   site. `section{padding:96px 0}` is a sitewide default for every <section>;
   .ga-page is a section too, so it inherited that gap under the nav and is
   cancelled here rather than touching the shared rule.
   =========================================================================== */
.ga-page{background:var(--bg-alt);padding:0 0 64px;border-bottom:none;font-family:var(--sans);font-size:14px;}
/* Narrower than the sitewide 1180px .wrap, on purpose - this is a compact
   tool form, not a wide marketing layout, so it gets more visible margin on
   both sides rather than stretching to the site's usual full container. */
.ga-page .wrap{max-width:1000px;}
.ga-topbar{background:#fff;border-bottom:1px solid var(--border);padding:14px 0;}
.ga-topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
/* .eyebrow (the pill+dot label used everywhere else on the site) covers the
   "GROWTH ANALYZER" tag - reusing it here instead of a one-off style keeps
   this page's top label consistent with how every other section on the
   site introduces itself. */
.ga-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;}
.ga-topbar-right{display:flex;align-items:center;gap:14px;}
.ga-secure{display:flex;align-items:center;gap:6px;background:var(--accent-dim);color:var(--accent);border-radius:20px;padding:6px 12px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.ga-secure-short{display:none;}
.ga-help{font-size:12.5px;color:var(--text-dim);}
.ga-help:hover{color:var(--text);}

.ga-steps-wrap{position:relative;}
.ga-steps{display:flex;align-items:flex-start;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.ga-steps::-webkit-scrollbar{display:none;}
.ga-step{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.ga-step .circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;border:2px solid var(--border-strong);color:var(--text-faint);flex-shrink:0;}
.ga-step .label b{display:block;font-size:13px;}
.ga-step .label span{display:block;font-size:11.5px;color:var(--text-faint);}
.ga-step.is-active .circle{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px -6px rgba(215,0,108,.55);}
.ga-step.is-active .label b{color:var(--accent);}
.ga-step-line{width:22px;height:1px;background:var(--border-strong);margin:0 6px;flex-shrink:0;align-self:center;}
/* Off on desktop - the row already fits with no scrolling there, so there is
   nothing for an arrow to reveal. Enabled only inside the mobile breakpoint
   below, where the row scrolls horizontally. */
.ga-steps-nav{display:none;}

/* Longhand on purpose: a 3-value shorthand here would zero out .wrap's own
   left/right padding, pulling this text flush to the page edge instead of
   lining up with the card grid below it. */
.ga-intro{padding-top:32px;padding-bottom:32px;}
.ga-intro h1{font-size:21px;}
.ga-intro p{color:var(--text-dim);margin-top:8px;max-width:none;font-size:13px;}

.ga-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start;}
/* Same soft ambient shadow language as .mock/.team-card/.post-card elsewhere
   on the site - flat 1px-border cards with no shadow was the main thing
   making this page read as unfinished next to the rest of the site. */
.ga-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 24px 50px -34px rgba(20,20,25,0.18);}
.ga-card h3{display:flex;align-items:center;gap:9px;font-size:13.5px;margin-bottom:16px;}
/* Same glyph-in-a-span pattern as .ficon on the home page, just static (no
   spin) and one colour - a decorative flourish here, not a hero animation. */
.ga-card h3 .ic{font-size:16px;color:var(--accent);line-height:1;}

.ga-field{margin-bottom:14px;}
.ga-field label{display:block;font-size:11.5px;font-weight:600;margin-bottom:6px;}
.ga-field input[type=text],.ga-field input[type=number],.ga-field select{width:100%;padding:10px 13px;border:1px solid var(--border-strong);border-radius:8px;font-size:13px;font-family:var(--sans);background:#fff;}
.ga-field input:focus,.ga-field select:focus{outline:none;border-color:var(--accent);}
/* Average Price is computed from Lowest/Highest, not typed in - styled like
   the read-only revenue total/average boxes below (.ga-total-row) so it
   visibly reads as a result, not an empty field waiting for input. */
#gaPriceAvg{background:var(--surface);color:var(--text-dim);cursor:not-allowed;}
#gaPriceAvg:focus{border-color:var(--border-strong);}
.ga-fetch-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.ga-fetch-row .ga-field{flex:1 1 200px;margin-bottom:0;}
/* Same pink-tinted shadow the chatbot toggle uses, so the primary actions
   on this page have the same sense of "pop" every other pink CTA gets. Also
   scoped smaller than the sitewide .btn - this is a compact tool form, the
   14.5px sitewide button size read as oversized against everything else here. */
.ga-page .btn{font-size:13px;padding:10px 18px;}
.ga-btn-accent{background:var(--accent);color:#fff;font-family:var(--sans);box-shadow:0 14px 26px -14px rgba(215,0,108,.5);}
.ga-btn-accent:hover{background:#bd005f;transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(215,0,108,.55);}
.ga-hint{font-size:11.5px;color:var(--text-faint);margin-top:9px;}
.ga-fetch-note{display:none;margin-top:12px;background:var(--accent-dim);border:1px solid #f3c9e0;border-radius:8px;padding:11px 13px;font-size:12px;color:var(--text);}
.ga-fetch-note.is-shown{display:block;}

/* Business Details: a preview of the fields the Google fetch will fill in,
   shown as example values rather than an empty box or a decorative icon -
   every row is clearly captioned "example" so it can never read as real data
   the visitor did not enter. */
.ga-preview-list{border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);padding:5px 14px;}
.ga-preview-list div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px;}
.ga-preview-list div:last-child{border-bottom:none;}
.ga-preview-list span{color:var(--text-dim);}
.ga-preview-list b{font-weight:600;color:var(--text-faint);}
.ga-preview-note{font-size:11px;color:var(--text-faint);margin-top:9px;font-style:italic;}

/* Location on Map: a simple flat illustration standing in for a real map -
   no Maps API is connected yet, so this is clearly a mock, not live tiles. */
.ga-map-preview{border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--surface);}
.ga-map-preview svg{display:block;width:100%;height:auto;}
.ga-map-caption{padding:11px 14px;font-size:11px;color:var(--text-faint);font-style:italic;border-top:1px solid var(--border);}

/* Google Review Summary: an example score and breakdown in the same shape
   real data will use, so the layout reads as finished rather than empty. */
.ga-review-preview{border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);padding:9px 14px;}
.ga-review-score{display:flex;align-items:baseline;gap:9px;margin-bottom:5px;}
.ga-review-score b{font-size:17px;color:var(--text-faint);}
.ga-review-stars{color:#f5b301;font-size:13px;letter-spacing:2px;}
.ga-review-bars div{display:grid;grid-template-columns:22px 1fr 30px;align-items:center;gap:7px;margin-bottom:1px;font-size:10px;color:var(--text-faint);}
.ga-review-bars .bar{height:4px;border-radius:4px;background:var(--border);overflow:hidden;}
.ga-review-bars .bar i{display:block;height:100%;background:#f5b301;border-radius:4px;}

.ga-upload{border:2px dashed var(--border-strong);border-radius:8px;padding:28px 18px;text-align:center;background:var(--surface);cursor:pointer;transition:border-color .15s ease;display:block;font-size:13px;}
.ga-upload:hover,.ga-upload.is-drag{border-color:var(--accent);}
.ga-upload .cloud{font-size:19px;margin-bottom:9px;color:var(--accent);}
.ga-upload input[type=file]{display:none;}
.ga-upload .fname{margin-top:11px;font-size:12px;font-weight:600;color:var(--accent);}
.ga-or{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-faint);font-size:11px;font-weight:700;}
.ga-or .line{width:1px;flex:1;background:var(--border-strong);min-height:40px;}
.ga-alt-box{background:var(--accent-dim);border-radius:8px;padding:16px;height:100%;}
.ga-alt-box strong{color:var(--accent);display:block;margin-bottom:5px;font-size:13px;}
.ga-alt-box p{font-size:12px;color:var(--text-dim);margin-bottom:13px;}
.ga-upload-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;}

/* Two rows now instead of one 3-up row: Customer Count + Revenue, then
   Services & Pricing + Team & Resources (the slot Services Offered used to
   sit in, before that section was removed). */
.ga-manual-grid{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-bottom:14px;}
.ga-manual-grid-2{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;}
/* Styled like a read-only field, matching the real inputs above it, rather
   than bare text - the computed numbers should look like they belong in the
   form, not like a caption underneath it. */
.ga-total-row{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap;}
.ga-total-row div{flex:1 1 140px;border:1px solid var(--border-strong);border-radius:8px;padding:9px 13px;background:var(--surface);}
.ga-total-row span{display:block;font-size:10.5px;color:var(--text-faint);margin-bottom:3px;}
.ga-total-row b{font-size:14px;}

.ga-footer-bar{background:#fff;border-top:1px solid var(--border);padding:16px 0;margin-top:32px;}
.ga-footer-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ga-secure-note{font-size:11.5px;color:var(--text-dim);}
.ga-footer-actions{display:flex;gap:10px;}

.ga-lead{display:none;padding-top:36px;}
.ga-lead.is-shown{display:block;}
.ga-lead-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;max-width:460px;margin:0 auto;}
.ga-confirm{display:none;text-align:center;padding:56px 20px;}
.ga-confirm.is-shown{display:block;}
.ga-confirm .tick{width:52px;height:52px;border-radius:50%;background:#e8f9ee;color:#1a9c53;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;font-weight:700;}

@media (max-width:900px){
  .ga-grid{grid-template-columns:1fr;}
  .ga-manual-grid{grid-template-columns:1fr;}
  .ga-manual-grid-2{grid-template-columns:1fr;}
  .ga-upload-grid{grid-template-columns:1fr;}
  .ga-or{flex-direction:row;}
  .ga-or .line{width:auto;height:1px;flex:1;min-width:40px;min-height:0;}
}
@media (max-width:560px){
  /* Keep the step circles + labels exactly as on desktop (just requested) -
     the 5-step row is wider than the screen at this size regardless, so it
     scrolls horizontally (.ga-steps already has overflow-x:auto) rather than
     dropping the labels. */
  .ga-step-line{width:20px;margin:0 6px;}
  /* Native scrollbar hidden (it sat flush under the step row and looked
     unfinished) - swipe still scrolls the row, and these two round arrow
     buttons (the theme's own pink accent + soft shadow, like .chatbot-toggle)
     give a visible, tappable way to do the same thing. Only one shows at a
     time: right arrow to reveal steps 3-5, left arrow to come back. */
  .ga-steps{padding-right:34px;}
  .ga-steps-nav{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;border:none;box-shadow:0 8px 18px -8px rgba(215,0,108,.55);font-size:15px;line-height:1;cursor:pointer;z-index:2;padding:0;}
  .ga-steps-nav-right{right:0;}
  .ga-steps-nav-left{left:0;display:none;}
  .ga-steps-wrap.is-scrolled .ga-steps-nav-left{display:flex;}
  .ga-steps-wrap.is-scrolled .ga-steps-nav-right{display:none;}
  .ga-steps-wrap::before,.ga-steps-wrap::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none;z-index:1;transition:opacity .15s ease;}
  .ga-steps-wrap::before{left:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0));opacity:0;}
  .ga-steps-wrap::after{right:0;background:linear-gradient(to left,#fff,rgba(255,255,255,0));}
  .ga-steps-wrap.is-scrolled::before{opacity:1;}
  .ga-steps-wrap.is-scrolled::after{opacity:0;}
  /* Topbar: brand name is redundant with the site's own nav/logo just above
     this bar, so it's hidden here to leave room for the secure badge + help
     link to stay on the same line as "GROWTH ANALYZER" instead of wrapping
     to a second line. */
  .ga-topbar .wrap{flex-wrap:nowrap;gap:4px;padding-left:14px;padding-right:14px;}
  .ga-brand{gap:5px;}
  .ga-brand-name{display:none;}
  .ga-topbar .eyebrow{font-size:9.5px;padding:4px 8px;gap:5px;letter-spacing:.03em;}
  .ga-topbar-right{gap:4px;}
  .ga-secure{padding:4px 8px;}
  .ga-secure-full{display:none;}
  .ga-secure-short{display:inline;}
  .ga-footer-bar .wrap{flex-direction:column;align-items:stretch;}
  .ga-footer-actions{justify-content:stretch;}
  .ga-footer-actions .btn{flex:1;}
  .ga-fetch-row .ga-field{flex:1 1 100%;}
}

/* --- Blog author box (single posts only) --- */
.author-box{display:flex;align-items:flex-start;gap:18px;max-width:720px;margin-top:44px;padding:22px 24px;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.author-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#fff;}
.author-info{min-width:0;}
.author-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px;}
.author-box .author-name{font-size:17px;font-weight:650;letter-spacing:-0.01em;color:var(--text);margin:0 0 3px;}
.author-box .author-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;}
.author-box .author-bio{font-size:14px;line-height:1.65;color:var(--text-dim);margin:0;}
@media (max-width:520px){.author-box{flex-direction:column;padding:20px;}}

/* --- Author on blog preview cards --- */
.post-card .post-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.post-card .post-author{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--mono);font-size:11px;color:var(--text-dim);}
.post-card .post-author img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface);}
.post-card .post-author span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* --- Home: salon & spa software by city --- */
.city-section{border-top:1px solid var(--border);border-bottom:none;}
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.city-card{border:1px solid var(--border);border-radius:12px;background:#fff;padding:24px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.city-card:hover{border-color:var(--border-strong);box-shadow:0 24px 48px -32px rgba(27,21,35,0.32);transform:translateY(-2px);}
.city-card h3{font-size:19px;font-weight:650;letter-spacing:-0.01em;color:var(--text);margin:0 0 4px;}
.city-chip{display:inline-block;max-width:100%;padding:7px 11px;border:0;border-radius:999px;background:linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);font-size:12px;line-height:1.35;color:var(--text-dim);}
@media (max-width:1100px){.city-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.city-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media (max-width:480px){.city-grid{grid-template-columns:1fr;}}
a.city-chip{text-decoration:none;background-size:100% 100%;transition:box-shadow .18s ease,color .15s ease,filter .18s ease;}
a.city-chip:hover,a.city-chip:focus-visible{background:linear-gradient(135deg,#fcdcea 0%,#e9e0ff 100%);color:var(--text);box-shadow:0 6px 14px -8px rgba(215,0,108,0.45);}

/* --- Growth Analyzer: live Google lookup --- */
.ga-fetch-note.is-error{background:#fff5f5;border-color:#f0c4c4;}
.ga-pick-title{margin:0 0 8px;font-weight:600;}
.ga-picks{display:flex;flex-direction:column;gap:8px;}
.ga-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;background:#fff;cursor:pointer;font:inherit;color:var(--text);transition:border-color .15s ease,background .15s ease;}
.ga-pick:hover,.ga-pick:focus-visible{border-color:var(--accent);background:var(--accent-dim);}
.ga-pick b{font-size:12.5px;font-weight:600;}
.ga-pick span{font-size:11.5px;color:var(--text-dim);}
.ga-preview-list b{text-align:right;overflow-wrap:anywhere;}
.ga-preview-list b.is-live{color:var(--text);}
.ga-review-score b.is-live{color:var(--text);}
.ga-map-preview iframe{display:block;width:100%;height:220px;border:0;}
.ga-map-caption.is-live{font-style:normal;color:var(--text-dim);}
.ga-map-caption a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.ga-map-frame{height:190px;overflow:hidden;position:relative;}
.ga-map-frame iframe{height:238px;}
.ga-map-credit{display:block;margin-top:4px;font-size:10.5px;color:var(--text-faint);}
.ga-map-credit a{color:var(--text-faint);text-decoration:underline;}

/* --- Growth Analyzer: stepper state (active/done circles, clickable) --- */
.ga-step{cursor:pointer;}
.ga-step:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px;}
.ga-step.is-done .circle{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-size:0;}
.ga-step.is-done .circle::before{content:"\2713";font-size:14px;font-weight:700;}
.ga-step.is-done .label b{color:var(--text);}
.ga-step-line.is-done{background:var(--accent);}

/* --- Growth Analyzer: Fetch from Google button + result note (same soft look as the city buttons) --- */
#gaFetchBtn{background:linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);color:var(--text);border:0;box-shadow:none;transition:box-shadow .18s ease,filter .18s ease;}
#gaFetchBtn:hover,#gaFetchBtn:focus-visible{background:linear-gradient(135deg,#fcdcea 0%,#e9e0ff 100%);color:var(--text);box-shadow:0 8px 18px -10px rgba(215,0,108,0.5);transform:none;}
#gaFetchBtn:disabled{opacity:.7;cursor:progress;}
.ga-fetch-note{background:linear-gradient(135deg,#f6f2ff 0%,#eef5ff 100%);border-color:#ddd3fb;color:var(--text);}
.ga-fetch-note.is-error{background:#fff5f5;border-color:#f0c4c4;}

/* --- Growth Analyzer: "Existing Software Data" boxes - softer cards with a gentle shadow --- */
.ga-upload-grid{gap:26px;}
.ga-upload{border:1.5px dashed #e3d3ef;border-radius:16px;padding:34px 22px;background:linear-gradient(180deg,#ffffff 0%,#fdf7fb 100%);box-shadow:0 18px 34px -26px rgba(20,20,25,.35),0 2px 6px rgba(20,20,25,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;}
.ga-upload:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 24px 40px -26px rgba(215,0,108,.35),0 2px 6px rgba(20,20,25,.05);}
.ga-upload.is-drag{border-color:var(--accent);background:linear-gradient(180deg,#fff7fb 0%,#fdeaf3 100%);box-shadow:0 24px 40px -24px rgba(215,0,108,.4);}
.ga-alt-box{border-radius:16px;padding:26px 24px;background:linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);box-shadow:0 18px 34px -26px rgba(20,20,25,.35),0 2px 6px rgba(20,20,25,.04);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.ga-alt-box strong{font-size:14.5px;}
.ga-alt-box p{font-size:12.5px;line-height:1.6;}
.ga-alt-box .btn{background:#fff;border-color:transparent;box-shadow:0 8px 18px -12px rgba(20,20,25,.35);transition:transform .2s ease,box-shadow .2s ease;}
.ga-alt-box .btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px -12px rgba(215,0,108,.4);}

/* Footer "Review us on Google": the Google G replaces the star row */
.footer-grid a.google-review .grev-logo{width:18px;height:18px;flex-shrink:0;display:block;}
.footer-grid a.google-review:hover{border-color:#4285f4;}

/* Growth Analyzer: "Your data is 100% secure" pill uses the same soft tint as the Fetch from Google button */
.ga-secure{background:linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);color:var(--text);}

/* Growth Analyzer: Fetch from Google button - circular arrow icon with a little breathing room */
#gaFetchBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;}
#gaFetchBtn .ga-arrow{width:18px;height:18px;flex-shrink:0;display:block;}

/* Growth Analyzer: upload box icon */
.ga-upload .cloud{margin-bottom:12px;line-height:0;}
.ga-upload .cloud img{display:block;width:44px;height:auto;margin:0 auto;transition:transform .25s ease;}
.ga-upload:hover .cloud img{transform:translateY(-3px);}

/* --- Growth Analyzer: true step-by-step wizard (one panel visible at a time) ---
   Replaces the old single scrolling page: .ga-wizard is the 2-col shell
   (main panel + a persistent reference sidebar that stays visible across all
   steps), sized the same 1.4fr/1fr split .ga-grid used so the page's
   overall proportions don't shift. */
.ga-wizard{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start;margin-top:22px;}
.ga-wizard-main,.ga-wizard-side{display:flex;flex-direction:column;gap:18px;}
.ga-wizard-side{gap:24px;}
/* Step 2 only: the reference sidebar (Google Business Profile, checklist)
   has nothing left to show on this step, so it's hidden and the form panel
   is centered in the middle of the screen instead of sitting in its usual
   grid track. */
.ga-wizard--solo .ga-wizard-side{display:none;}
@media (min-width:901px){
  .ga-wizard--solo{grid-template-columns:1fr;}
  .ga-wizard--solo .ga-wizard-main{max-width:640px;width:100%;margin:0 auto;}
}
.ga-panel-head{margin-bottom:14px;}
.ga-step-pill{display:inline-block;background:var(--accent-dim);color:var(--accent);border-radius:20px;padding:3px 10px;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:9px;}
.ga-panel-head h2{font-size:16px;margin:0 0 6px;}
.ga-panel-head p{color:var(--text-dim);font-size:12px;max-width:560px;margin:0;}
.ga-field-ic{display:inline-block;height:12px;width:auto;margin-right:6px;vertical-align:-1px;}
.ga-card{padding:16px;}

/* "Why we need this?" explainer box inside Step 1 */
.ga-info-box{display:flex;gap:10px;margin-top:24px;padding:11px 14px;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;}
.ga-info-box .ga-info-ic{display:block;height:17px;width:auto;flex-shrink:0;}
.ga-info-box strong{display:block;font-size:12.5px;margin-bottom:3px;}
.ga-info-box p{font-size:12px;color:var(--text-dim);margin:0;line-height:1.5;}

/* Each step's own footer, inside the step's card column (not a sitewide bar) */
.ga-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;}
.ga-help-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.ga-help-row .ga-help,.ga-help-row .ga-watch{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-dim);}
.ga-help-row .ga-watch{color:var(--accent);font-weight:600;}
.ga-help-row .ic{font-size:13px;}
.ga-footer-btns{display:flex;gap:10px;}

/* Topbar: sits on the same light page background as the intro below it, not
   a separate white strip - matches the reference design's single continuous
   band from the brand row down to the stepper. */
.ga-topbar{background:transparent;border-bottom:none;padding:12px 0 0;}
.ga-secure{background:var(--accent-dim);}
.ga-secure-ic{display:block;height:13px;width:auto;flex-shrink:0;}
.ga-info-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--text-faint);color:var(--text-faint);font-size:10px;font-style:italic;font-family:Georgia,serif;cursor:help;flex-shrink:0;}
.ga-intro{padding-top:14px;padding-bottom:22px;}
.ga-intro h1{font-size:17px;}
.ga-intro p{margin-top:6px;font-size:12px;}
.ga-stepper{padding:16px 0;}

/* Google Business Profile card: light tinted card split into the profile
   preview (photo + name + rating + quick actions) and the checklist, as two
   fixed grid columns so they stay side by side at every desktop width
   instead of wrapping whenever the sidebar narrows. */
.ga-gbp-card{background:linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);border-color:#f0dcec;padding:24px;}
.ga-gbp-main{min-width:0;}
.ga-gbp-main h3{margin-bottom:14px;font-size:13.5px;}
.ga-gbp-mini{background:#fff;border:1px solid var(--border-strong);border-radius:10px;padding:16px;}
.ga-gbp-mini-top{display:flex;gap:10px;}
.ga-gbp-photo{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--surface);}
.ga-gbp-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.ga-gbp-photo.is-placeholder img{object-fit:cover;}
.ga-gbp-info{min-width:0;}
.ga-gbp-info>b{display:block;font-size:10.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ga-gbp-rating{display:flex;align-items:baseline;gap:5px;margin-top:3px;font-size:9.5px;line-height:1.3;color:var(--text-dim);}
.ga-gbp-rating .stars{color:#f5b301;letter-spacing:1px;font-size:10.5px;}
.ga-gbp-cat{display:block;font-size:9px;line-height:1.3;color:var(--text-faint);margin-top:3px;}
.ga-gbp-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:16px;}
.ga-gbp-act{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 3px;font-size:9.5px;color:var(--text-dim);text-decoration:none;background:none;border:none;font-family:inherit;cursor:pointer;}
.ga-gbp-act .ic{display:block;width:20px;height:20px;object-fit:contain;}
.ga-gbp-act:hover{color:var(--accent);}
.ga-gbp-act.is-saved{color:var(--accent);font-weight:600;}
.ga-gbp-act.is-disabled{opacity:.5;pointer-events:none;}
.ga-gbp-card .ga-preview-note{margin-top:8px;font-size:10.5px;}

#gaChecklistCard{padding:24px;}
.ga-checklist strong{display:block;font-size:12px;margin-bottom:12px;}
.ga-checklist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ga-checklist li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);white-space:nowrap;}
.ga-checklist .ck{color:var(--accent);font-weight:700;flex-shrink:0;}

/* Add Your Business Data options: the upload-a-file / enter-manually choice,
   shown inline inside Step 2's own panel (above the manual-entry fields),
   side by side on desktop with a vertical "or" divider between them. */
.ga-data-options-block{margin:18px 0;}
.ga-data-options-intro{font-size:12px;color:var(--text-dim);margin:0 0 12px;line-height:1.5;}
.ga-data-options-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;}
.ga-data-option-btn{display:flex;width:100%;height:100%;gap:10px;align-items:center;background:#fff;border:1px solid var(--border-strong);border-radius:10px;padding:10px;font:inherit;text-align:left;cursor:pointer;}
.ga-data-option-btn:hover{border-color:var(--accent);}
.ga-data-option-btn .ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;}
.ga-data-option-btn .ic img{display:block;width:13px;height:auto;}
.ga-data-option-btn div{min-width:0;flex:1;}
.ga-data-option-btn b{display:block;font-size:12px;color:var(--text);}
.ga-data-option-btn p{font-size:11px;color:var(--text-faint);margin:2px 0 0;line-height:1.45;}
.ga-data-option-btn .chev{flex-shrink:0;color:var(--text-faint);font-size:15px;}
.ga-data-option-btn .fname{display:block;font-size:10.5px;color:var(--accent);font-weight:600;margin-top:3px;}
.ga-data-options-or{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10.5px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;}
.ga-data-options-or::before,.ga-data-options-or::after{content:"";width:1px;flex:1;background:var(--border-strong);min-height:20px;}

@media (max-width:900px){
  .ga-wizard{grid-template-columns:1fr;}
  .ga-wizard-side{order:2;}
  .ga-data-options-list{grid-template-columns:1fr;}
  .ga-data-options-or{flex-direction:row;}
  .ga-data-options-or::before,.ga-data-options-or::after{width:auto;height:1px;flex:1;min-width:30px;min-height:0;}
}
@media (max-width:480px){
  .ga-gbp-actions{grid-template-columns:repeat(2,1fr);}
}

/* --- FAQ section (native Details blocks) --- */
.faq-section{border-bottom:none;}
.faq-section .faq-list{max-width:820px;display:flex;flex-direction:column;gap:12px;}
.faq-list details{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 14px 30px -26px rgba(20,20,25,.3);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.faq-list details:hover{border-color:#e3d3ef;}
.faq-list details[open]{border-color:#e3d3ef;background:linear-gradient(180deg,#fff 0%,#fdf8fb 100%);box-shadow:0 18px 34px -26px rgba(215,0,108,.3);}
.faq-list summary{cursor:pointer;list-style:none;position:relative;padding:18px 58px 18px 22px;font-size:16px;font-weight:600;line-height:1.45;color:var(--text);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::marker{content:"";}
.faq-list summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:500;line-height:1;}
.faq-list details[open] summary::after{content:"\2212";}
.faq-list details>p{margin:0;padding:0 22px 20px;font-size:15px;line-height:1.75;color:var(--text-dim);}
.faq-list details>p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:560px){.faq-list summary{padding:16px 52px 16px 16px;font-size:15px;}.faq-list details>p{padding:0 16px 18px;}}

/* FAQ: arrow-head icon that turns over when a question opens, plus a soft slide/fade for the answer */
.faq-list summary::after{content:"";width:30px;height:30px;top:50%;right:16px;font-size:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") center/15px 15px no-repeat,linear-gradient(135deg,#fff1f7 0%,#f5f0ff 100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .25s ease;}
.faq-list details[open] summary::after{content:"";transform:translateY(-50%) rotate(180deg);box-shadow:0 8px 16px -10px rgba(215,0,108,.5);}
.faq-list summary:hover::after{box-shadow:0 8px 16px -10px rgba(215,0,108,.45);}
.faq-list summary{transition:color .2s ease;}
.faq-list summary:hover{color:var(--accent);}
.faq-list details>p{animation:faq-fade .4s ease both;}
@keyframes faq-fade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.faq-list details>p{animation:none;}.faq-list summary::after{transition:none;}}

/* Blog cover for "10 reasons salon owners are switching": show the whole 16:10 artwork in the post header */
.post-hero-figure:has(img[src*="salon-bookings-switching-to-salonify-cover-2"]){aspect-ratio:16/10;}
.post-hero-figure:has(img[src*="salon-bookings-switching-to-salonify-cover-3"]){aspect-ratio:16/10;}
.post-hero-figure:has(img[src*="salon-bookings-switching-to-salonify-cover-4"]){aspect-ratio:16/10;}
.post-hero-figure:has(img[src*="digital-payments-salons-spas-cover-2"]){aspect-ratio:16/10;}

/* Onboarding section ("From signup to live in 3 hours flat") above the
   "Go digital. Grow smarter." section - a light text column (eyebrow,
   headline, 3 points) next to a dark progress-style card, in the same
   spirit as similar "what onboarding looks like" sections seen elsewhere,
   rebuilt here with Salonify's own copy and a simpler checklist visual
   instead of a scripted carousel. */
.onboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.onboard-text h2{font-size:34px;font-weight:650;letter-spacing:-0.02em;line-height:1.16;margin:16px 0 18px;}
.onboard-accent{color:var(--accent);}
.onboard-desc{color:var(--text-dim);font-size:16px;line-height:1.6;margin-bottom:28px;}
.onboard-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.onboard-points li{display:flex;gap:14px;align-items:flex-start;}
.onboard-point-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:background .3s ease,color .3s ease,transform .3s ease;}
.onboard-point-body{display:flex;flex-direction:column;gap:3px;}
.onboard-point-title{font-weight:650;color:var(--text);font-size:15.5px;transition:color .3s ease;}
.onboard-point-desc{color:var(--text-dim);font-size:14px;line-height:1.55;}
/* Synced with the card's current slide (see the <script> in the block):
   whichever point matches the slide now showing gets the theme-color
   treatment, so visitors can see which claim on the left the card on the
   right is currently illustrating. */
.onboard-points li.is-active .onboard-point-icon{background:var(--accent);color:#fff;transform:scale(1.06);}
.onboard-points li.is-active .onboard-point-title{color:var(--accent);}
@media (prefers-reduced-motion:reduce){.onboard-point-icon,.onboard-point-title{transition:none;}}
.onboard-card{background:#0d0d10;border-radius:18px;padding:34px;position:relative;overflow:hidden;}
.onboard-card::before{content:"";position:absolute;top:-80px;right:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(215,0,108,.35),transparent 70%);pointer-events:none;}
.onboard-pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;background:rgba(215,0,108,.15);color:#ff79b8;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:100px;}
.onboard-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
.onboard-card h3{position:relative;z-index:1;color:#fff;font-size:22px;font-weight:650;margin:16px 0 10px;}
.onboard-card-desc{position:relative;z-index:1;color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.6;margin-bottom:24px;}
.onboard-checklist{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;position:relative;z-index:1;}
.onboard-step{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;font-size:13.5px;color:rgba(255,255,255,.55);transition:color .3s ease,border-color .3s ease,background .3s ease;}
.onboard-step.is-done{color:#fff;}
.onboard-step.is-active{border-color:rgba(215,0,108,.4);background:rgba(215,0,108,.08);color:#fff;}
/* The checkmark/dot is CSS-generated (::before) rather than typed into the
   HTML, so the step-by-step reveal (see the <script> in the block) only
   ever has to toggle .is-done/.is-active classes - a plain, empty
   .onboard-check span works for every step in every one of the 3 slides. */
.onboard-check{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;background:rgba(255,255,255,.1);transition:background .3s ease,color .3s ease;}
.onboard-step.is-done .onboard-check{background:var(--accent);color:#fff;}
.onboard-step.is-done .onboard-check::before{content:"\2713";}
.onboard-step.is-active .onboard-check{background:var(--accent);color:#fff;animation:onboard-pulse 1.6s ease infinite;}
.onboard-step.is-active .onboard-check::before{content:"\25CF";}
@keyframes onboard-pulse{0%,100%{box-shadow:0 0 0 0 rgba(215,0,108,.5);}50%{box-shadow:0 0 0 6px rgba(215,0,108,0);}}
.onboard-stat{display:flex;align-items:baseline;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;position:relative;z-index:1;}
.onboard-stat-num{font-size:32px;font-weight:800;color:var(--accent);line-height:1;}
.onboard-stat-desc{color:rgba(255,255,255,.55);font-size:13px;line-height:1.5;}
/* Auto-rotating card content: a single content slot whose innerHTML the
   script swaps every 5s (see the <script> in the block), rather than
   several wide cards side by side - so nothing scrolls. min-height keeps
   the card from jumping size as it swaps between the 3 slides (each built
   with the same pill/h3/desc/checklist/stat shape so their heights are
   already close); the crossfade itself is just an opacity transition,
   paused on hover via .onboard-card:hover and resumed on mouse-leave. */
.onboard-card-inner{min-height:420px;transition:opacity .25s ease;}
.onboard-card-inner.is-fading{opacity:0;}
.onboard-dots{display:flex;gap:8px;margin-top:22px;position:relative;z-index:1;}
.onboard-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:background .2s ease,transform .2s ease;}
.onboard-dot.is-active{background:var(--accent);transform:scale(1.3);}
.onboard-dot:hover{background:rgba(255,255,255,.4);}
@media (prefers-reduced-motion:reduce){.onboard-step.is-active .onboard-check{animation:none;}.onboard-card-inner{transition:none;}.onboard-step,.onboard-check{transition:none;}}
@media (max-width:860px){.onboard-grid{grid-template-columns:1fr;gap:36px;}.onboard-text h2{font-size:28px;}}
@media (max-width:560px){.onboard-card{padding:24px;}.onboard-text h2{font-size:25px;}.onboard-card-inner{min-height:380px;}}